/* onb.css — the SIGNUP + LOGIN overlay styles, and nothing else.
 *
 * Born 2026-09-01 with the landing redesign go-live. The redesigned landing page is a
 * self-contained Vite/React bundle; it does NOT load landing.css (80KB of the previous
 * page's own design, whose global selectors would fight the new one). But landing.js —
 * the real signup/login machinery — renders its markup with landing.css's `.onb*`,
 * `.gbtn` and `.lbtn` classes.
 *
 * So this file is a VERBATIM extract of exactly those rules from
 * output/site/assets/css/landing.css (the ONBOARDING + buttons + a11y blocks), with two
 * deliberate differences and nothing else:
 *   1. the `--l-*` design tokens are declared on `.onb` instead of `:root`, so they
 *      cannot leak into (or be overridden by) the redesign's own token set;
 *   2. `.lbtn` / `.gbtn` selectors are scoped under `.onb`, so the page's own buttons
 *      are untouched.
 * The rendered modal is pixel-identical to the one the previous landing page shipped.
 */

/* ============ tokens (scoped: landing.css declares these on :root) ============ */
.onb{
  --l-ink:#0a1422; --l-ink2:#41506a; --l-mut:#6b7b92; --l-line:#e6ecf3;
  --l-bg:#ffffff; --l-bg2:#f5f8fc;
  --l-blue:#1f70df; --l-blue2:#4a90ff;
  --l-font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif;
  font-family:var(--l-font); color:var(--l-ink); line-height:1.5; text-align:left;
}

/* ============ ONBOARDING / LOGIN sheet ============ */
.onb[hidden]{ display:none; }
.onb{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  padding:max(20px, env(safe-area-inset-top, 0px)) max(20px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  background:rgba(7,15,32,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); animation:onbFade .25s ease; }
@keyframes onbFade{ from{ opacity:0; } to{ opacity:1; } }
/* cap to the visible viewport and scroll inside on short/landscape screens */
.onb__sheet{ position:relative; width:min(560px,100%); max-height:calc(100dvh - 40px); overflow-y:auto;
  -webkit-overflow-scrolling:touch; background:#fff; border-radius:28px; box-shadow:0 40px 100px -30px rgba(0,0,0,.6);
  padding:30px 34px 34px; animation:onbUp .3s cubic-bezier(.2,.7,.3,1); }
@keyframes onbUp{ from{ transform:translateY(18px); opacity:0; } to{ transform:none; opacity:1; } }
.onb__close{ position:absolute; z-index:1; top:18px; right:18px; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer;
  background:var(--l-bg2); color:var(--l-mut); font-size:15px; }
.onb__close:hover{ background:#e7eef7; color:var(--l-ink); }
.onb__bar{ height:8px; border-radius:99px; background:var(--l-bg2); overflow:hidden; margin:6px 0 26px; }
.onb__bar i{ display:block; height:100%; width:20%; border-radius:99px; background:linear-gradient(90deg,var(--l-blue),var(--l-blue2)); transition:width .35s cubic-bezier(.4,0,.2,1); }
.onb-step{ animation:onbStep .28s ease both; }
@keyframes onbStep{ from{ opacity:0; transform:translateX(14px); } to{ opacity:1; transform:none; } }
.onb-eyebrow{ font-size:12px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--l-blue); }
.onb-h{ font-size:27px; font-weight:800; letter-spacing:-.02em; margin:6px 0 6px; }
.onb-p{ color:var(--l-ink2); font-size:16px; margin:0 0 22px; }
.onb-p a{ color:var(--l-blue); font-weight:700; }
.onb-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:26px; }
.onb-back{ background:none; border:0; cursor:pointer; color:var(--l-mut); font-family:inherit; font-weight:600; font-size:15px; }
.onb-back:hover{ color:var(--l-ink); }

/* value checklist */
.onb-list{ list-style:none; margin:2px 0 4px; padding:0; display:flex; flex-direction:column; gap:13px; }
.onb-list li{ position:relative; padding-left:34px; font-size:15.5px; color:var(--l-ink2); line-height:1.4; }
.onb-list li b{ color:var(--l-ink); font-weight:700; }
.onb-list li::before{ content:"\2713"; position:absolute; left:0; top:0; width:23px; height:23px; border-radius:50%; font-size:12px; font-weight:800;
  background:#e7f0ff; color:var(--l-blue); display:flex; align-items:center; justify-content:center; }

/* email / password capture */
.onb-field{ margin:2px 0 0; }
.onb-field input{ width:100%; font-family:inherit; font-size:16px; padding:15px 16px; border:2px solid var(--l-line); border-radius:14px;
  color:var(--l-ink); background:#fff; transition:border-color .15s ease; }
.onb-field input::placeholder{ color:var(--l-mut); }
.onb-field input:focus{ outline:none; border-color:var(--l-blue); }
.onb-field input.is-err{ border-color:#e0506b; }
/* The modal stays LIGHT even when the OS/browser is in dark mode. Two parts, both needed:
   (1) color-scheme:light stops the browser painting the sheet + inputs with dark UA chrome;
   (2) the -webkit-autofill override — for a RETURNING user whose saved email/password
   autofill, Safari/Chrome repaint the field dark and IGNORE background:#fff. */
.onb{ color-scheme:light; }
.onb-field input:-webkit-autofill,
.onb-field input:-webkit-autofill:hover,
.onb-field input:-webkit-autofill:focus,
.onb-field input:-webkit-autofill:active{
  -webkit-box-shadow:0 0 0 1000px #fff inset;
  -webkit-text-fill-color:var(--l-ink);
  caret-color:var(--l-ink);
  transition:background-color 9999s ease 0s;
}
/* password field with a show/hide eye */
.onb-field--pw{ position:relative; }
.onb-field--pw input{ padding-right:50px; }
.onb-eye{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:40px; height:40px; display:flex; align-items:center;
  justify-content:center; border:0; background:none; padding:0; cursor:pointer; color:var(--l-mut); border-radius:10px; }
.onb-eye:hover{ color:var(--l-ink); }
.onb-eye[aria-pressed="true"]{ color:var(--l-blue); }
.onb-stay{ display:flex; align-items:center; gap:9px; margin-top:14px; font-size:14px; font-weight:600; color:var(--l-ink2); cursor:pointer; user-select:none; }
.onb-stay input{ width:18px; height:18px; accent-color:var(--l-blue); cursor:pointer; flex:0 0 auto; }
.onb-msg{ min-height:18px; margin-top:8px; font-size:13px; font-weight:600; color:#d6435e; }
.onb-msg a{ color:var(--l-blue); text-decoration:underline; }
/* Short landscape (e.g. iPad 11" landscape, ~700-820px tall): tighten the signup sheet's
   vertical rhythm so the "Create account" button sits above the fold — no scroll to submit. */
@media (orientation:landscape) and (max-height:840px){
  .onb__sheet{ padding:20px 30px 24px; }
  .onb__bar{ margin:4px 0 14px; }
  .onb-h{ font-size:22px; margin:4px 0 4px; }
  .onb-p{ font-size:14.5px; margin:0 0 12px; }
  .onb-list{ gap:8px; }
  .onb-list li{ font-size:14px; }
  .onb-field input{ padding:11px 14px; }
  .onb-eye{ height:36px; }
  .onb-foot{ margin-top:16px; }
  #onbTurnstile{ margin:8px 0 !important; }
}
.onb-note{ display:flex; gap:8px; align-items:flex-start; margin-top:14px; font-size:13px; color:var(--l-mut); line-height:1.45; }
.onb-note a{ color:var(--l-blue); font-weight:700; }

/* Continue with Google */
.onb .gbtn{ display:flex; align-items:center; justify-content:center; gap:11px; width:100%; margin:4px 0 0;
  font-family:inherit; font-size:15px; font-weight:700; color:var(--l-ink); background:#fff;
  border:2px solid var(--l-line); border-radius:14px; padding:14px 16px; cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease, transform .12s ease; }
.onb .gbtn:hover{ border-color:#c9d3e0; box-shadow:0 8px 20px -10px rgba(20,40,80,.35); transform:translateY(-1px); }
.onb .gbtn:focus-visible{ outline:none; border-color:var(--l-blue); }
.onb .gbtn__g{ flex:0 0 auto; }
.onb-or{ display:flex; align-items:center; gap:12px; margin:16px 0; color:var(--l-mut); font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; }
.onb-or::before,.onb-or::after{ content:""; flex:1; height:1px; background:var(--l-line); }

/* ============ buttons (scoped to the overlay) ============ */
.onb .lbtn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-weight:600; font-size:15px;
  padding:10px 18px; border-radius:99px; border:1px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .2s ease, background .2s ease, opacity .2s; }
.onb .lbtn--lg{ font-size:17px; padding:15px 28px; }
.onb .lbtn--block{ width:100%; }
.onb .lbtn--primary{ color:#fff; letter-spacing:.01em; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#3f8ef0 0%,var(--l-blue) 48%,var(--l-blue2) 100%);
  border:1px solid rgba(130,180,255,.55);
  box-shadow:0 12px 30px -8px rgba(10,108,255,.6), 0 2px 6px rgba(10,60,160,.35),
             inset 0 1px 0 rgba(255,255,255,.42), inset 0 -2px 7px rgba(0,40,120,.28);
  text-shadow:0 1px 2px rgba(0,30,90,.35); }
.onb .lbtn--primary::after{ content:""; position:absolute; top:0; bottom:0; left:-70%; width:55%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform:skewX(-18deg);
  transition:left .6s cubic-bezier(.4,0,.2,1); }
.onb .lbtn--primary:hover{ transform:translateY(-2px); filter:brightness(1.06) saturate(1.04);
  box-shadow:0 20px 44px -10px rgba(10,108,255,.78), 0 3px 10px rgba(10,60,160,.4),
             inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 7px rgba(0,40,120,.28); }
.onb .lbtn--primary:hover::after{ left:120%; }
.onb .lbtn--primary:active{ transform:translateY(0) scale(.99); }
.onb .lbtn:active{ transform:translateY(0) scale(.98); }
.onb .lbtn:disabled{ opacity:.6; cursor:default; transform:none; }

/* visible keyboard focus inside the overlay (landing.css's a11y block) */
.onb .lbtn:focus-visible, .onb__close:focus-visible, .onb-back:focus-visible{
  outline:3px solid var(--l-blue2); outline-offset:3px; border-radius:12px; }

/* ============ screen-reader live region (landing.js appends .sr-only to <body>) ============ */
.sr-only{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* ============ scroll lock compatibility ============
   landing.js locks the page with body{overflow:hidden} while a modal is open. The
   redesign's base layer sets html,body{height:100%}, which would turn that lock into a
   CLIP — cropping the whole page below the fold behind the sheet. Let the body box be
   content-sized while a modal is open, and move the lock to the scrolling element. */
html:has(#onb:not([hidden])), html:has(#login:not([hidden])){ overflow:hidden; }
body:has(#onb:not([hidden])), body:has(#login:not([hidden])){ height:auto; }