/* no page-change animation: signing in and out redirects right away */
@view-transition{ navigation:none }

/* The customer login screens on /login. A full-screen app look, no site menu or footer. */
.nav, .n-rule, .mobilemenu, .page.lg footer{ display:none !important }
html, body{ min-height:100%; background:#0A2B1F }
.page.lg{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:100vh; min-height:100dvh;
  padding:calc(24px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));
  background:
    radial-gradient(70vw 50vh at 8% 0%, rgba(46,125,90,.42), transparent 70%),
    radial-gradient(60vw 50vh at 96% 100%, rgba(193,158,66,.26), transparent 70%),
    linear-gradient(165deg,#0A2B1F 0%,#0E3B2A 60%,#14503A 100%) }
.lg-brand{ display:flex; align-items:flex-end; gap:12px; margin-bottom:22px; text-decoration:none }
.lg-brand .t{ height:60px; width:auto; filter:brightness(0) invert(1) sepia(.3) saturate(3) hue-rotate(5deg) }
.lg-brand .ft{ display:block; width:172px }
.lg-brand .ft img{ display:block; width:100%; filter:brightness(0) invert(1) sepia(.3) saturate(3) hue-rotate(5deg) }
.lg-card{ width:min(440px,100%); padding:clamp(24px,5vw,34px); color:var(--ink); background:rgba(251,248,241,.97); border:1px solid rgba(232,207,139,.55); border-radius:24px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.65), 0 0 40px -16px rgba(193,158,66,.55) }
.lg-card h1{ margin:0; font-family:var(--disp); font-weight:500; font-size:clamp(28px,6vw,34px); line-height:1.12; letter-spacing:-.015em; color:var(--oak); text-wrap:pretty }
.lg-lede{ margin:8px 0 20px; font-size:15.5px; line-height:1.5; color:#5E564C; text-wrap:pretty }
.lg-field{ display:block; margin-bottom:14px }
.lg-field > span{ display:block; margin-bottom:6px; font-size:14px; font-weight:600; color:var(--oak) }
.lg-field input{ width:100%; height:52px; padding:0 14px; font-family:var(--body); font-size:16px; color:var(--ink); background:#fff; border:1px solid #A89E89; border-radius:13px; outline:none; transition:border-color .15s ease, box-shadow .15s ease }
.lg-field input:focus{ border-color:#A9872F; box-shadow:0 0 0 3px rgba(193,158,66,.34) }
.lg-pass{ position:relative; display:block }
.lg-pass input{ padding-right:54px }
.lg-eye{ position:absolute; top:4px; right:4px; display:grid; place-items:center; width:44px; height:44px; padding:0; color:var(--oak); background:none; border:none; border-radius:10px; cursor:pointer }
.lg-eye:hover{ background:rgba(14,59,42,.07) }
.lg-eye .off{ display:none }
.lg-eye.on .off{ display:block }
.lg-eye.on .open{ display:none }
.lg-hint{ display:block; margin-top:6px; font-size:13px; font-weight:400; color:#5E564C }
.lg-msg{ margin:0 0 14px; padding:10px 12px; font-size:14px; line-height:1.45; color:#6F1D2B; background:#FBEDE8; border-radius:11px; text-wrap:pretty }
.lg-msg[hidden]{ display:none }
.lg-btn{ width:100%; min-height:56px; margin-top:4px; font-family:var(--body); font-size:17px; font-weight:700; color:#0A2B1F; background:linear-gradient(120deg,#E8CF8B,#C19E42); border:none; border-radius:15px; cursor:pointer;
  box-shadow:0 12px 24px -12px rgba(193,158,66,.95); transition:filter .2s ease, transform .12s ease }
.lg-btn:hover{ filter:brightness(1.06) }
.lg-btn:active{ transform:scale(.98) }
.lg-btn:disabled{ color:#5E564C; background:var(--stone); box-shadow:none; cursor:progress }
.lg-link{ display:block; margin:12px auto 0; min-height:40px; padding:0 8px; font-family:var(--body); font-size:14.5px; font-weight:500; color:var(--oak); background:none; border:none; cursor:pointer; text-decoration:underline; text-decoration-color:rgba(14,59,42,.35); text-underline-offset:3px }
.lg-link:hover{ text-decoration-color:currentColor }
.lg-need{ margin:14px 0 0; padding-top:14px; font-size:14.5px; line-height:1.5; text-align:center; color:#5E564C; border-top:1px solid var(--stone); text-wrap:pretty }
.lg-need a{ font-weight:600; color:var(--oak); white-space:nowrap }
.lg-sent{ display:grid; place-items:center; width:58px; height:58px; margin:0 auto 14px; color:#0A2B1F; background:linear-gradient(135deg,#E8CF8B,#C19E42); border-radius:50% }
#lg-sent{ text-align:center }
#lg-sent b{ overflow-wrap:anywhere; color:var(--oak) }
.lg-view[hidden]{ display:none }
.lg-back{ margin-top:18px; font-size:14px; color:rgba(251,247,238,.88); text-underline-offset:3px }
.lg-back:hover{ color:#fff }
.lg-eye:focus-visible, .lg-btn:focus-visible, .lg-link:focus-visible, .lg-back:focus-visible, .lg-need a:focus-visible{ outline:3px solid #C19E42; outline-offset:2px }
@media(max-width:380px){
  .lg-brand .t{ height:50px }
  .lg-brand .ft{ width:146px }
  .lg-brand{ margin-bottom:16px }
}
@media (prefers-reduced-motion:reduce){
  .lg-btn, .lg-field input{ transition:none }
}

/* Home-screen app on iPhone: the page runs up behind the clock and battery
   (white text), so keep a dark green band behind them. */
.is-app body::before{ content:""; position:fixed; top:0; left:0; right:0; z-index:100; height:env(safe-area-inset-top,0px); background:#0A2B1F; pointer-events:none }