/* Sign-in page. Based on design/login.html; fonts are self-hosted (OFL). */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/login/assets/fonts/fraunces-latin-opsz-normal.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:400;font-display:swap;
  src:url(/login/assets/fonts/lato-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:700;font-display:swap;
  src:url(/login/assets/fonts/lato-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Lato";font-style:normal;font-weight:900;font-display:swap;
  src:url(/login/assets/fonts/lato-latin-900-normal.woff2) format("woff2")}

:root{
  --teal:#00262d; --teal2:#073b40; --lime:#abea14; --paper:#fbfaf6; --paper2:#f5f3eb;
  --card:#fffefb; --hair:#e7e3d8; --ink:#00262d; --ink70:#1f4249; --steel:#64757a;
  --on-dark:#fbfaf6; --on-dark-muted:rgba(251,250,246,.66); --on-dark-hair:rgba(251,250,246,.14);
  --ring:0 0 0 3px rgba(79,154,168,.45); --r:6px;
  --serif:"Fraunces",Georgia,serif; --sans:"Lato",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --danger:#8a2a12;
  --safe-t:env(safe-area-inset-top,0px); --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px); --safe-l:env(safe-area-inset-left,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--paper)}
body{font-family:var(--sans);font-size:16px;color:var(--ink70);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r)}
[hidden]{display:none!important}

/* Desktop: dark left column (top + doors), light right column (sign-in + footer). */
.page{
  min-height:100vh; min-height:100dvh;
  display:grid;
  grid-template-columns:minmax(0,65fr) minmax(360px,35fr);
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"top signin" "doors signin" "doors foot";
}
.top,.doors-wrap{background:var(--teal);color:var(--on-dark)}
.top{grid-area:top;padding:calc(44px + var(--safe-t)) 64px 0 calc(64px + var(--safe-l))}
.doors-wrap{grid-area:doors;padding:32px 64px calc(32px + var(--safe-b)) calc(64px + var(--safe-l))}
.signin{grid-area:signin;background:var(--paper);display:flex;align-items:center;
  padding:calc(56px + var(--safe-t)) calc(48px + var(--safe-r)) 24px 48px}
.foot{grid-area:foot;background:var(--paper);margin:0 calc(48px + var(--safe-r)) 0 48px;
  padding:24px 0 calc(32px + var(--safe-b));border-top:1px solid var(--hair);
  display:flex;flex-wrap:wrap;gap:12px 16px;justify-content:space-between;align-items:center;font-size:14px;color:var(--steel)}

.brand{display:inline-flex;align-items:center;gap:16px;text-decoration:none;min-height:44px;
  transition:transform .24s cubic-bezier(.2,.6,.2,1)}
.wordmark{font-family:var(--sans);font-weight:900;font-size:26px;line-height:1;letter-spacing:-0.033em;color:#ffffff;display:inline-flex;align-items:baseline;user-select:none}
.wordmark .fl{color:var(--lime)}
.brand:hover,.brand:focus-visible{transform:scale(1.05)}
.brand:hover .fl,.brand:focus-visible .fl{animation:fxwm-flicker .9s ease-out forwards}
@keyframes fxwm-flicker{0%{text-shadow:0 0 0 rgba(171,234,20,0)}16%{text-shadow:0 0 10px rgba(171,234,20,.95),0 0 22px rgba(171,234,20,.55)}30%{text-shadow:0 0 4px rgba(171,234,20,.35),0 0 8px rgba(171,234,20,.15)}46%{text-shadow:0 0 10px rgba(171,234,20,.85),0 0 20px rgba(171,234,20,.45)}62%{text-shadow:0 0 6px rgba(171,234,20,.5),0 0 12px rgba(171,234,20,.25)}100%{text-shadow:0 0 9px rgba(171,234,20,.75),0 0 18px rgba(171,234,20,.4)}}
.brand .sep{width:1px;height:26px;background:var(--on-dark-hair)}
.brand .docs{font-family:var(--serif);font-size:24px;color:var(--on-dark)}

.hero{margin-top:36px;max-width:640px}
.eyebrow{font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--lime)}
h1{font-family:var(--serif);font-weight:300;font-size:46px;line-height:1.08;letter-spacing:-.01em;margin-top:16px}
h1 em{font-style:italic}
.lead{font-size:18px;line-height:1.5;color:var(--on-dark-muted);margin-top:12px;max-width:560px}

.doors{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:820px}
.door{display:grid;grid-template-columns:32px 1fr;gap:4px 12px;align-items:start;align-content:start;
  padding:14px 18px;border:1px solid var(--on-dark-hair);border-radius:var(--r);background:rgba(251,250,246,.03);cursor:default}
.door .n{font-family:var(--mono);font-size:12px;color:var(--on-dark-muted);padding-top:3px}
.door .t{font-weight:700;font-size:17px;color:var(--on-dark)}
.door .d{grid-column:2;font-size:14px;line-height:1.45;color:var(--on-dark-muted)}
.door.wide{grid-column:1 / -1}
.door.quiet{border-style:dashed;background:transparent}

.box{max-width:352px;width:100%}
.signin h2{font-family:var(--serif);font-weight:400;font-size:34px;color:var(--ink)}
.signin p{font-size:16px;line-height:1.5;margin-top:12px}
.gbtn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:48px;margin-top:24px;padding:12px 16px;
  background:var(--card);border:1px solid #d8d3c4;border-radius:var(--r);font:700 15px var(--sans);color:var(--ink);cursor:pointer;
  box-shadow:0 1px 2px rgba(0,38,45,.10);transition:transform .18s ease,box-shadow .18s ease;touch-action:manipulation}
.gbtn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,38,45,.16)}
.gbtn:disabled{cursor:progress;opacity:.7}
.gbtn[aria-busy="true"] svg{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.notice{margin-top:16px;padding:12px 14px;border:1px solid var(--hair);border-left:3px solid var(--steel);border-radius:var(--r);background:var(--paper2)}
.notice.error{border-left-color:var(--danger)}
.notice .notice-text{margin:0;font-size:15px;line-height:1.45;color:var(--ink)}
.other{display:inline-flex;align-items:center;min-height:44px;margin-top:8px;padding:0 14px;background:var(--card);
  border:1px solid #d8d3c4;border-radius:var(--r);font:700 14px var(--sans);color:var(--ink);cursor:pointer;touch-action:manipulation}

.small{font-size:14px;line-height:1.5;margin-top:16px;color:var(--ink70)}
.signin p.small{font-size:14px}
.small a{font-weight:700;display:inline-block;padding:12px 0;margin:-12px 0;overflow-wrap:anywhere}
.foot .site{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;font:700 14px var(--sans);color:var(--ink);text-decoration:none;background:var(--card);border:1px solid #d8d3c4;border-radius:var(--r);box-shadow:0 1px 2px rgba(0,38,45,.10);transition:transform .18s ease,box-shadow .18s ease}
.foot .site:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,38,45,.16)}

/* Tablet and phone: one column — intro, sign-in, sections, footer. Sign-in stays above the fold. */
@media (max-width:1100px){
  .page{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto;
    grid-template-areas:"top" "signin" "doors" "foot"}
  .top{padding:calc(32px + var(--safe-t)) calc(32px + var(--safe-r)) 32px calc(32px + var(--safe-l))}
  .hero{margin-top:28px}
  h1{font-size:40px}
  .signin{padding:32px calc(32px + var(--safe-r)) 32px calc(32px + var(--safe-l))}
  .box{max-width:480px}
  .doors-wrap{padding:32px calc(32px + var(--safe-r)) 32px calc(32px + var(--safe-l))}
  .foot{margin:0;padding:20px calc(32px + var(--safe-r)) calc(24px + var(--safe-b)) calc(32px + var(--safe-l));border-top:0}
}
@media (max-width:640px){
  .top{padding:calc(24px + var(--safe-t)) calc(20px + var(--safe-r)) 28px calc(20px + var(--safe-l))}
  .signin,.doors-wrap{padding-left:calc(20px + var(--safe-l));padding-right:calc(20px + var(--safe-r))}
  .foot{padding-left:calc(20px + var(--safe-l));padding-right:calc(20px + var(--safe-r))}
  .hero{margin-top:24px}
  h1{font-size:clamp(28px,8.5vw,34px)}
  .lead{font-size:17px}
  .doors{grid-template-columns:minmax(0,1fr)}
  .door{padding:12px 14px}
  .door .d{font-size:15px}
  .signin h2{font-size:30px}
}
/* Phone in landscape: short screen, keep the button close to the top. */
@media (max-height:520px) and (orientation:landscape){
  .top{padding-top:calc(16px + var(--safe-t));padding-bottom:20px}
  .hero{margin-top:12px}
  h1{font-size:30px}
  .lead{margin-top:8px}
  .signin{padding-top:20px;padding-bottom:20px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}