/* Direction A · Night Shift (Pixel, spec 04) — landing preview stylesheet. Index only; legal pages keep styles.css.
   Tokens are the spec 04 landing-only neutral set (see contrast-table.md). */
@font-face{font-family:"Inter";src:url(brand/fonts/InterVariable.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter Display";src:url(brand/fonts/InterDisplay-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Inter Display";src:url(brand/fonts/InterDisplay-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(brand/fonts/JetBrainsMono-Variable-latin.woff2) format("woff2");font-weight:100 800;font-display:swap}
:root{
  --bg:#08090c;--surf:#101216;--raised:#16181d;
  --t1:#f4f5f7;--t2:#a4a9b3;--t3:#8b919c;--link:#b4cafa;
  --hair:rgba(255,255,255,.08);--hs:rgba(255,255,255,.14);--input-edge:rgba(255,255,255,.38);
  --glass:rgba(255,255,255,.05);--glass-hover:rgba(255,255,255,.10);
  --cta-fill:rgba(23,103,210,.20);--cta-fill-hover:rgba(23,103,210,.32);--cta-border:#7da2ec;--cta-border-hover:#b4cafa;
  --warn:#f4c477;--warn-soft:#1f1a10;--danger:#ff8a8a;--ok:#7fd6a4;
  --ease:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);--sam:#c4cfd9;
  --r-xs:6px;--r-sm:8px;--r-md:10px;--r-lg:14px;--r-xl:16px;--r-pill:999px;
  --e-float:0 20px 50px -24px rgba(0,0,0,.8);--e-stage:0 40px 100px -40px rgba(0,0,0,.9);--e-sam:0 30px 80px -20px rgba(196,207,217,.28);
  --nav-h:64px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 8px)}
html,body{margin:0}
body{background:var(--bg);color:var(--t1);font:400 15px/24px Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--link);outline-offset:2px;border-radius:var(--r-xs)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Waitlist honeypot: off-screen for people, still in the form for bots. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--raised);padding:8px 12px;border-radius:var(--r-sm)}
.skip:focus{left:8px}
.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.narrow{max-width:720px}
.kbd{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-xs);font:500 11px/1 "JetBrains Mono",monospace;background:rgba(255,255,255,.06);border:1px solid var(--hs);color:var(--t2)}

/* nav */
.nav-bar{position:sticky;top:0;z-index:10;background:rgba(8,9,12,.72);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);border-bottom:1px solid var(--hair)}
.nav{height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:8px;font:600 17px/1 Inter;letter-spacing:-.01em}
.brand img{width:18px;height:20px}
.links{display:flex;gap:28px;font:500 13px/20px Inter;color:var(--t2);margin-left:auto}
.links a:hover{color:var(--t1)}
.btn-sm{height:28px;padding:0 8px;border-radius:var(--r-sm);display:inline-flex;align-items:center;gap:8px;background:var(--glass);border:1px solid var(--hs);box-shadow:inset 0 1px 0 rgba(255,255,255,.06);font:500 13px/1 Inter;color:var(--t1);white-space:nowrap;transition:background .14s var(--ease)}
.btn-sm:hover{background:var(--glass-hover)}

/* hero */
.hero{position:relative;text-align:center;padding-top:40px;overflow-x:clip}
.hero-grid{position:relative}
.halo{position:absolute;left:50%;top:-40px;width:900px;height:620px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(196,207,217,.10),rgba(196,207,217,.03) 55%,transparent);pointer-events:none}
.copy{position:relative}
.sam{position:relative;width:168px;height:168px;margin:0 auto;border-radius:44px;overflow:hidden;background:var(--sam);box-shadow:0 0 0 1px rgba(255,255,255,.14),var(--e-sam),0 2px 0 0 rgba(255,255,255,.2) inset}
.sam img,.sam video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sam video{opacity:0;transition:opacity .2s linear}
.sam video.is-playing{opacity:1}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-top:28px;min-height:28px;padding:4px 12px;border-radius:var(--r-pill);border:1px solid var(--hs);background:var(--glass);font:500 12px/16px Inter;color:var(--t2)}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:var(--t2);flex:none}
h1{margin:20px auto 0;font:600 72px/76px "Inter Display",Inter;letter-spacing:-.032em;max-width:900px}
h1 span,.h2 span{color:var(--t2)}
.lede{margin:20px auto 0;max-width:580px;font:400 17px/28px Inter;color:var(--t2)}
.wl-form{margin:32px auto 0;width:520px;max-width:100%}
.wl{display:flex;align-items:center;gap:4px;padding:4px;border-radius:var(--r-lg);background:var(--glass);border:1px solid var(--input-edge);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),var(--e-float);backdrop-filter:blur(20px) saturate(140%)}
.wl input{flex:1;min-width:0;height:44px;border:0;background:transparent;color:var(--t1);font:400 15px/24px Inter;padding:0 12px;outline:none}
.wl input::placeholder{color:var(--t3)}
.wl:has(input:focus-visible){outline:2px solid var(--link);outline-offset:2px}
.wl input:focus-visible{outline:none}
.wl-form.invalid .wl{border-color:var(--danger)}
.cta{height:44px;padding:0 12px 0 20px;border-radius:var(--r-md);display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--cta-fill);border:1px solid var(--cta-border);color:#fff;font:500 15px/20px Inter;letter-spacing:-.006em;white-space:nowrap;cursor:pointer;transition:background .14s var(--ease),border-color .14s var(--ease),transform 470ms var(--spring)}
.cta:hover{background:var(--cta-fill-hover);border-color:var(--cta-border-hover)}
.cta:active{transform:scale(.98);transition-duration:.14s,.14s,90ms}
.cta .kbd{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);color:#dbe6ff}
.cta[aria-busy="true"]{cursor:progress}
.cta[aria-busy="true"]::before{content:"";width:12px;height:12px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.form-msg{min-height:0;margin-top:0;font:400 13px/20px Inter;text-align:left}
.form-msg:not(:empty){margin-top:8px}
.form-msg[data-kind="error"]{color:var(--danger)}
.success{display:flex;gap:12px;align-items:center;text-align:left;padding:12px 16px;border-radius:var(--r-lg);border:1px solid var(--hs);background:var(--glass);color:var(--t2);font:400 14px/20px Inter}
.success strong,.success em{color:var(--t1);font-style:normal;font-weight:500}
.check{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(127,214,164,.12);color:var(--ok)}
.fine{margin-top:16px;font:400 12px/16px Inter;color:var(--t3)}
.fine a{text-decoration:underline;text-underline-offset:2px}
.fine a:hover{color:var(--t1)}
.peekcap{display:inline-flex;align-items:center;gap:8px;margin:36px 0 8px;font:500 11px/16px "JetBrains Mono",monospace;color:var(--t3)}
.peekcap:hover{color:var(--t1)}

@media (min-width:1024px){
  .hero{text-align:left;padding-top:64px}
  .hero-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;align-items:center}
  .hero-grid .copy{grid-column:1 / 8;grid-row:1}
  .hero .eyebrow{margin-top:0}
  .hero h1{margin:20px 0 0}
  .hero .lede{margin:20px 0 0}
  .hero .wl-form{margin:32px 0 0}
  .hero-grid .halo{grid-column:7 / 13;grid-row:1;left:50%;top:50%;transform:translate(-50%,-50%)}
  .peekcap{margin:48px 0 8px}
}
@media (min-width:1024px) and (max-width:1199px){.hero-grid .copy{grid-column:1 / 9}}

/* sections */
.section{padding:120px 0 0}
.kicker{font:500 12px/16px "JetBrains Mono",monospace;color:var(--t2);text-transform:none}
.h2{font:600 48px/52px "Inter Display",Inter;letter-spacing:-.028em;margin:12px 0 48px;max-width:860px}

/* audiences */
.aud-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.aud{display:block;padding:24px;border-radius:var(--r-xl);border:1px solid var(--hair);background:var(--surf);transition:border-color .14s var(--ease),background .14s var(--ease)}
.aud:hover{border-color:var(--hs);background:var(--raised)}
.aud-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);border:1px solid var(--hs);background:var(--glass);color:var(--t1);margin-bottom:20px}
.aud-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.aud h3,.plan h3,.trust h3{font:600 17px/24px Inter;letter-spacing:-.01em;margin-bottom:8px}
.aud p,.trust p{font:400 14px/20px Inter;color:var(--t2)}

/* chapters. Default (no JS, < 900px, short screens, reduced motion) = stacked cards.
   night.js adds .is-pinned to opt in to the sticky film strip (P1-9). */
.ch-sentinels{display:none}
.ch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.chapter{display:flex;flex-direction:column;border:1px solid var(--hair);border-radius:var(--r-xl);background:var(--surf);overflow:hidden}
.ch-copy{all:unset;box-sizing:border-box;display:block;padding:16px 20px 20px;color:var(--t3)}
.ch-copy:focus-visible{outline:2px solid var(--link);outline-offset:4px;border-radius:var(--r-xs)}
.ch-no{display:flex;align-items:center;gap:8px;font:500 11px/16px "JetBrains Mono",monospace;color:var(--t3)}
.ch-aud{display:block;margin-top:8px;font:500 12px/16px "JetBrains Mono",monospace;color:var(--t2)}
.ch-title{display:block;margin-top:4px;font:600 17px/24px Inter;letter-spacing:-.01em;color:var(--t1);transition:color .24s var(--ease)}
.ch-line{display:block;margin-top:8px;font:400 14px/20px Inter;color:var(--t2)}
.ch-progress,.ch-copy .kbd{display:none}
.ch-fig{order:-1;margin:0}
.frame{position:relative;border-radius:var(--r-xl);border:1px solid var(--hs);overflow:hidden;background:var(--surf);aspect-ratio:16/10;box-shadow:var(--e-stage)}
.chapter .frame{border-radius:0;border:0;border-bottom:1px solid var(--hair);box-shadow:none}
.frame video{width:100%;height:100%;object-fit:cover}
.frame picture{display:flex;justify-content:center;height:100%;background:radial-gradient(closest-side,rgba(196,207,217,.06),transparent)}
.still-tall{height:100%;width:auto;object-fit:contain}
/* Clip + Sam toggles (Nick, Oct 22, 5:48 AM: no visible pause buttons, same deal as the word wheel). night.js lays an
   invisible real <button> over the clip / Sam tile: click or tap the media to pause, Enter/Space from the keyboard,
   fixed label + aria-pressed. The focus ring is inset (frames clip overflow) and shows on :focus-visible only. */
.media-toggle{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none}
.media-toggle:focus,.media-toggle:focus-visible{outline:none}
.media-toggle::after{content:"";position:absolute;inset:3px;border-radius:inherit;outline:2px solid transparent;pointer-events:none}
.media-toggle:focus-visible::after{outline-color:var(--link)}

/* pinned film strip (JS opt-in) */
.is-pinned.ch-track{position:relative;height:calc(var(--n) * 100vh)}
.is-pinned .ch-sentinels{display:block;position:absolute;left:0;right:0;top:calc(50vh - var(--nav-h));pointer-events:none}
.is-pinned .ch-sentinels i{display:block;height:calc(((var(--n) - 1) * 100vh + var(--nav-h)) / var(--n))}
.is-pinned .ch-sticky{position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));display:flex;align-items:center}
.is-pinned .ch-grid{grid-template-columns:minmax(0,360px) minmax(0,1fr);grid-template-rows:repeat(var(--n,5),auto);gap:0;column-gap:56px;width:100%;align-content:center}
.is-pinned .chapter{display:contents}
.is-pinned .ch-copy{grid-column:1;grid-row:calc(var(--i) + 1);padding:16px 0;border-top:1px solid var(--hair);cursor:pointer}
.is-pinned .ch-copy .kbd{display:inline-flex}
.is-pinned .ch-title{color:var(--t2)}
.is-pinned .ch-line{height:0;max-height:none;min-height:0;overflow:hidden;opacity:0;transform:translateY(8px);margin-top:0;
  transition:height .24s var(--ease),margin-top .24s var(--ease),opacity .24s var(--ease),transform .24s var(--ease)} /* r3 R3-2: symmetric 0↔60 so list height is constant */
.is-pinned .ch-progress{display:block;height:1px;margin-top:12px;background:var(--hair);opacity:0}
.ch-progress i{display:block;height:100%;width:0;background:var(--t1)}
.is-pinned .chapter.is-active .ch-title{color:var(--t1)}
.is-pinned .chapter.is-active .ch-line{height:60px;margin-top:8px;opacity:1;transform:none} /* 60 = 3 × 20px lines */
.is-pinned .chapter.is-active .ch-progress{opacity:1}
.is-pinned .chapter.is-active .ch-no .kbd{color:var(--t1);border-color:var(--input-edge)}
.is-pinned .ch-fig{order:0;grid-column:2;grid-row:1 / -1;align-self:center;opacity:0;transform:scale(.98);visibility:hidden;pointer-events:none;
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility 0s linear .32s}
.is-pinned .chapter.is-active .ch-fig{opacity:1;transform:none;visibility:visible;pointer-events:auto;transition-delay:0s}
.is-pinned .chapter .frame{border-radius:var(--r-xl);border:1px solid var(--hs);box-shadow:var(--e-stage)}

/* plans + trust */
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.plan{padding:28px;border-radius:var(--r-xl);border:1px solid var(--hs);background:linear-gradient(180deg,var(--raised),var(--surf))}
.plan-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.plan-tag{font:500 11px/16px "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--t2)}
.plan-lead{font:500 13px/20px Inter;color:var(--t2);margin:-8px 0 8px}
.price{margin-top:20px;padding-top:12px;border-top:1px solid var(--hair);font:500 13px/20px Inter;color:var(--t2)}
.soon{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-xs);border:1px solid rgba(244,196,119,.45);color:var(--warn);background:var(--warn-soft);font:500 11px/16px Inter;white-space:nowrap;vertical-align:middle}
.aud .soon{margin:0 0 8px}
.plan h3{margin-bottom:16px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:8px;color:var(--t2);font:400 14px/20px Inter}
.ticks li{position:relative;padding-left:24px}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:16px;height:16px;background:var(--t1);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5l10 -10'/%3E%3C/svg%3E") center/contain no-repeat}
.trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hs)}
.trust{padding:24px 24px 0 0}
.trust + .trust{padding-left:24px;border-left:1px solid var(--hair)}

/* requirements */
.provisional{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:var(--t2);font:400 14px/20px Inter;margin:-28px 0 12px}
.pill-warn{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-xs);border:1px solid rgba(244,196,119,.45);color:var(--warn);background:var(--warn-soft);font:500 11px/16px "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase}
.platforms{color:var(--t2);margin:0 0 32px;max-width:820px;font:400 14px/20px Inter}
.platforms strong{color:var(--t1);font-weight:500}
.picker{display:grid;grid-template-columns:1fr 1fr;gap:24px;padding:28px;border-radius:var(--r-xl);border:1px solid var(--hs);background:var(--surf)}
.picker-head{grid-column:1 / -1}
.picker-head h3{font:600 17px/24px Inter;margin-bottom:4px}
.picker-head p{color:var(--t2);font:400 14px/20px Inter}
.picker-form{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-content:start}
.field{display:flex;flex-direction:column;gap:8px;min-width:0}
.field[hidden]{display:none}
.field label{font:500 13px/20px Inter;color:var(--t1)}
.field select{appearance:none;height:44px;padding:0 36px 0 12px;border-radius:var(--r-md);border:1px solid var(--input-edge);background:var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23a4a9b3' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 14px center;color:var(--t1);font:400 15px/24px Inter;cursor:pointer}
.field select:hover{border-color:var(--t2)}
.field select option{background:var(--raised);color:var(--t1)}
.picker-result{border-radius:var(--r-lg);padding:24px;min-height:200px;background:var(--raised);border:1px solid var(--hair)}
.res-label{font:500 11px/16px "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--t2);margin:0 0 8px}
.res-title{font:600 17px/24px Inter;margin:0 0 8px}
.res-title-lg{font:600 22px/28px "Inter Display",Inter;letter-spacing:-.01em}
.res-reason{color:var(--t2);margin:0 0 12px;font:400 14px/20px Inter}
.res-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;padding:0;list-style:none}
.chip{font:500 12px/16px Inter;padding:4px 12px;border-radius:var(--r-pill);border:1px solid var(--hs);background:var(--glass);color:var(--t1)}
.res-note{color:var(--t2);font:400 13px/20px Inter;margin:0}
.res-note + .res-note{margin-top:4px}
.res-primary{background:var(--surf);border:1px solid var(--hs);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);border-radius:var(--r-lg);padding:20px;margin-bottom:16px}
.res-primary .res-reason{color:var(--t1)}
.res-alt{color:var(--t2);font:400 13px/20px Inter;margin:0}
.res-secondary{border-top:1px dashed var(--hs);padding-top:12px}
.res-sub{font:600 14px/20px Inter;margin:0 0 8px}
.res-warn{font:400 13px/20px Inter;color:var(--t2);margin:0;padding-left:12px;border-left:2px solid var(--warn)}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:24px}
.tier{position:relative;padding:20px;border-radius:var(--r-xl);border:1px solid var(--hair);background:var(--surf)}
.tier.is-match{border-color:var(--hs);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.tier.is-match::before{content:"Your match";position:absolute;top:-11px;right:16px;font:500 12px/16px Inter;padding:2px 8px;border-radius:var(--r-pill);background:var(--raised);border:1px solid var(--hs);color:var(--t1)}
.tier-tag{font:500 11px/16px "JetBrains Mono",monospace;text-transform:uppercase;letter-spacing:.1em;color:var(--t2);margin:0 0 8px}
.tier h3{font:600 17px/24px Inter;margin-bottom:4px}
.tier-sum{color:var(--t2);font:400 14px/20px Inter;margin:0 0 16px}
.tier dl{margin:0;display:grid;gap:8px;font:400 13px/20px Inter}
.tier dt{color:var(--t3);font:500 11px/16px Inter;text-transform:uppercase;letter-spacing:.08em}
.tier dd{margin:2px 0 0;color:var(--t1)}
.req-note{color:var(--t2);font:400 13px/20px Inter;margin:20px 0 0;max-width:820px}

/* FAQ */
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair);padding:20px 0}
.faq summary{cursor:pointer;list-style:none;font:600 17px/24px Inter;letter-spacing:-.01em;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:16px;height:16px;margin-top:4px;background:var(--t3);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .24s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--t2);margin-top:12px;font:400 14px/20px Inter}
.inline-link{color:var(--link);text-decoration:underline;text-underline-offset:3px}

/* final CTA + footer */
.final{position:relative;text-align:center;padding:160px 32px 120px;overflow:clip}
.final .h2{margin:0 auto}
.final .lede{margin-top:16px}
.halo-final{top:40px;transform:translateX(-50%)}
.final .cta{background:var(--glass);border-color:var(--hs)}
.final .cta:hover{background:var(--glass-hover);border-color:rgba(255,255,255,.28)}
.final .cta .kbd{background:rgba(255,255,255,.06);border-color:var(--hs);color:var(--t2)}
.final .lede{margin:16px auto 0}
.final .wl-form{margin:32px auto 0}
.final .wl-form,.final .h2,.final .lede,.final .fine{position:relative}
.footer{border-top:1px solid var(--hair);padding:32px 0;color:var(--t2);font:400 14px/20px Inter}
.footer-inner{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.footer .brand{color:var(--t1)}
.footer nav{display:flex;gap:16px}
.footer nav a:hover{color:var(--t1)}
.footer .copy{margin-left:auto}

@media (max-width:1100px){.links{gap:20px}}
@media (max-width:1000px){
  .aud-grid,.tiers{grid-template-columns:1fr 1fr}
  :root{--nav-h:100px}
  /* P2-11: links become a scrollable 36px sub-bar under the nav */
  .nav{flex-wrap:wrap;height:auto;row-gap:0}
  .nav .brand,.nav .btn-sm{height:64px;display:flex;align-items:center}
  .nav .btn-sm{height:28px;margin:18px 0}
  .links{order:3;flex:0 0 100%;height:36px;margin:0;gap:20px;align-items:center;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
  .links::-webkit-scrollbar{display:none}
}
@media (max-width:900px){
  .plan-grid,.picker{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
  .trust + .trust{padding-left:0;border-left:0;border-top:1px solid var(--hair);margin-top:24px}
}
@media (max-width:640px){
  .wrap{padding:0 20px}
  .hero{padding-top:28px}
  .eyebrow{margin-top:24px}
  h1{font-size:40px;line-height:44px;letter-spacing:-.028em}
  .lede{font-size:16px;line-height:26px;margin-top:16px}
  .wl{flex-direction:column;align-items:stretch}
  .wl input{flex:none;height:48px}
  .cta{height:48px}
  .cta .kbd{display:none}
  .peekcap{margin-top:28px}
  .section{padding-top:88px}
  .h2{font-size:32px;line-height:36px;margin-bottom:32px}
  .aud-grid,.tiers,.picker-form{grid-template-columns:1fr}
  .ch-grid{grid-template-columns:1fr}
  .picker{padding:20px}
  .final{padding:112px 20px 88px}
  .footer .copy{margin-left:0;width:100%}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}

/* ---- Hero word scroll (Nick, 2026-10-22). Slot roll: clip mask + 450ms --ease. ----
   Line 1 = "Your Personal" + the slot on its own line (block, full column width), so nothing beside it
   (Sam, lede) can move when the word changes. Slot is taller than the line box so descenders/ascenders
   aren't clipped; negative margins keep the visual line rhythm. */
.ws-h1{display:block}
.ws-l1,.ws-l2{display:block}
.ws-l2{color:var(--t2)}
.ws-l2 .nw{white-space:nowrap}
/* ---- r2 wheel (Nick, 1:57 AM): the word list is a vertical drum. --θ per item, radius --R.
   The slot reserves a fixed 2.3em band (h1 box constant); the drum rotates inside it, the slot masks top/bottom
   so the curve fades into the canvas. Active word flat + t1; ±1 t3 ~35%; ±2 ~12%; others hidden.
   Default markup ships the rest frame (Assistant centred, Chief of staff faint above), so no-JS and reduced
   motion show the same static wheel. */
.ws-slot{--θ:40deg;--R:1.5em;position:relative;display:block;height:2.9em;margin:-.08em 0 -.14em;overflow:hidden;
  perspective:9em;perspective-origin:50% 50%;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 28%,#000 74%,transparent 96%);
          mask-image:linear-gradient(180deg,transparent 4%,#000 28%,#000 74%,transparent 96%)}
.ws-drum{position:absolute;left:0;right:0;top:50%;height:1.3em;margin-top:-.65em;transform-style:preserve-3d;
  transform:translateZ(calc(-1 * var(--R))) rotateX(calc(var(--i, 5) * var(--θ)));transition:transform .32s var(--ease)}
.ws-word{position:absolute;left:0;right:0;top:0;line-height:1.3em;white-space:nowrap;backface-visibility:hidden;
  transform:rotateX(calc(-1 * var(--k) * var(--θ))) translateZ(var(--R));opacity:0;
  transition:opacity .32s var(--ease),color .32s var(--ease)}
.ws-h1 .ws-word[data-d="0"]{opacity:1;color:var(--t1)}
.ws-h1 .ws-word[data-d="1"],.ws-h1 .ws-word[data-d="-1"]{opacity:calc(.36 * var(--nf, 1));color:var(--t3)}
.ws-h1 .ws-word[data-d="2"],.ws-h1 .ws-word[data-d="-2"]{opacity:calc(.12 * var(--nf, 1));color:var(--t3)}
.ws-slot.is-paused{--nf:.6}
@media (min-width:1024px){.hero-grid .ws-slot{perspective-origin:0 50%}} /* left-aligned hero ≥ the 2-col breakpoint: neighbours shrink toward the left edge */
.ws-drum.no-anim,.ws-drum.no-anim .ws-word{transition:none}
@media (max-width:640px){.ws-slot{height:2.7em;margin:-.06em 0 -.1em}}
/* Wheel toggle (Nick, 1:58 AM): an invisible real <button> laid over the slot, outside the h1 semantics. */
.ws-toggle{position:absolute;z-index:2;margin:0;padding:0;border:0;background:transparent;cursor:pointer;border-radius:var(--r-sm);-webkit-tap-highlight-color:transparent}
.ws-toggle:focus{outline:none}
.ws-toggle:focus-visible{outline:none}
/* r3 R3-1 (Nick: no visible button): the focus ring hugs the active-word band, not the faint neighbours.
   JS sets --ring-top/--ring-h/--ring-w from the active word's line box; the hit area stays the full slot. */
.ws-toggle::after{content:"";position:absolute;left:0;transform:translateX(var(--ring-left,-6px));top:var(--ring-top,30%);width:calc(var(--ring-w,100%) + 12px);height:var(--ring-h,40%);
  border-radius:var(--r-sm);outline:2px solid transparent;outline-offset:0;pointer-events:none;transition:transform .32s var(--ease),width .32s var(--ease)} /* transform, not left: no layout-shift entries */
.ws-toggle:focus-visible::after{outline-color:var(--link)}

.ico{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ws-l2 .nw{white-space:nowrap}
/* word-scroll colours: beat the generic `h1 span` (t2) rule */
.ws-h1 .ws-l1{color:var(--t2)}
.ws-h1 .ws-l2,.ws-h1 .ws-l2 .nw{color:var(--t2)}
/* Tagline sub-line (Nick, 1:45 AM): relaxed, text weight, muted; part of the h1's accessible name. */
.ws-h1 .ws-l2{margin-top:12px;font:500 30px/40px Inter,system-ui,sans-serif;letter-spacing:normal;color:var(--t2);text-wrap:balance}
@media (max-width:640px){.ws-h1 .ws-l2{margin-top:10px;font-size:21px;line-height:28px}}

/* r2 N-10: the scrollable nav sub-bar fades at the right edge so it reads as scrollable */
@media (max-width:1000px){.links{padding-right:24px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 24px),transparent)}}
@media (max-width:640px){.links{gap:16px}}
/* r3 N-10: sub-bar bleeds to the screen edge so "FAQ" peeks in under the fade */
@media (max-width:640px){.links{flex:0 0 calc(100% + 40px);margin:0 -20px;padding:0 44px 0 20px}}
/* r2 N-11: small phones (360x740, 375x667) keep the waitlist bar above the fold */
@media (max-width:640px) and (max-height:880px){
  .hero{padding-top:16px}
  .eyebrow{margin-top:16px}
  .hero h1{margin-top:12px}
  .hero .lede{margin-top:12px;font-size:15px;line-height:22px}
  .hero .wl-form{margin-top:20px}
  .hero .wl{flex-direction:row;align-items:center}
  .hero .wl input{flex:1 1 auto;height:44px}
  .hero .cta{height:44px;padding:0 16px}
}
@media (max-width:640px) and (max-height:700px){
  .eyebrow{margin-top:12px}
  .hero .wl-form{margin-top:16px}
  .ws-h1 .ws-l2{margin-top:6px}
}

/* ---- Mobile polish (Nick, Oct 22, 5:48 AM: "polish for mobile"). Visual language unchanged; fixes tap targets,
   iOS input zoom, hero fit and the waitlist form on phones. ---- */
/* Tap targets >= 44px without changing how small controls look: an invisible hit area around them. */
.btn-sm{position:relative}
.btn-sm::after,.peekcap::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
.peekcap{position:relative}
/* FAQ: the whole row (not just the 24px text line) opens the answer. Same spacing as before. */
.faq details{padding:0}
.faq summary{padding:20px 0}
.faq details p{margin:-8px 0 0;padding-bottom:20px}
/* iOS zooms into fields under 16px: 16px on touch screens and phones. */
@media (pointer:coarse),(max-width:640px){.wl input,.field select{font-size:16px}}
@media (max-width:1000px){
  /* Sub-bar links fill the 44px bar height so each one is a full-height tap target. */
  :root{--nav-h:108px}
  .links{height:44px;align-items:stretch}
  .links a{display:inline-flex;align-items:center}
}
@media (max-width:640px){
  .fine{font-size:13px;line-height:20px}
  .footer{padding:24px 0 32px}
  .footer-inner{row-gap:8px}
  .footer nav{gap:4px 20px;flex-wrap:wrap}
  .final .cta,.hero .cta{width:100%}
}
/* Phones from ~800px tall (390x844, 430x932): stacked waitlist bar, full-width field and button (still above the fold).
   Shorter phones (360x740, 375x667) keep the one-row bar from r2 N-11 so it stays above the fold. */
@media (max-width:640px) and (max-height:799px){.hero .cta{width:auto;padding:0 14px}.hero .wl input{padding:0 8px 0 12px}} /* 16px text: keep the full placeholder visible at 360 */
@media (max-width:640px) and (min-height:800px) and (max-height:880px){
  .hero .wl{flex-direction:column;align-items:stretch}
  .hero .wl input{flex:none;height:48px}
  .hero .cta{height:48px}
}
/* Footer links: full 44px rows on phones and touch tablets. */
@media (max-width:640px),(pointer:coarse){.footer nav a{display:inline-flex;align-items:center;min-height:44px}.footer .brand{min-height:44px}}
/* Very narrow phones (< 360px): the longest wheel word ("Project manager.") must fit the slot. */
@media (max-width:359px){h1{font-size:36px;line-height:40px}.wrap{padding:0 16px}.links{flex-basis:calc(100% + 32px);margin:0 -16px;padding-left:16px}}


/* Hero lede, compacted (Nick, Oct 22, 6:23 AM): shorter copy, one step down the ramp (17/28 -> 16/26; phones 15/22). */
.hero .lede{font-size:16px;line-height:26px;max-width:540px}
@media (max-width:640px){.hero .lede{font-size:15px;line-height:22px;margin-top:12px}}

/* ---- Hero recording (Nick, Oct 22, 6:41 AM): a real app recording that blends into the page instead of reading as a
   raw screenshot. Borderless rounded window, soft edge fade (mask) into the background, accent glow behind it,
   slight desaturation + cool tint. Desktop: beside the headline with a gentle tilt, bleeding into the page gutter.
   Stacked (< 1024): below the form, so the form stays as high as possible; phones bleed edge to edge. ---- */
.hero .eyebrow{margin-top:0}
.hero-rec{position:relative;margin:40px auto 0;max-width:760px}
.hero-rec::before{content:"";position:absolute;inset:6% 4%;z-index:0;border-radius:50%;background:radial-gradient(closest-side,rgba(23,103,210,.30),rgba(23,103,210,.08) 60%,transparent);filter:blur(36px);pointer-events:none}
.hero-rec-frame{position:relative;z-index:1;aspect-ratio:16/10;border-radius:var(--r-xl);overflow:hidden;background:var(--surf);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,#000 72%,transparent);-webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,#000 72%,transparent);mask-composite:intersect}
.hero-rec-frame video{width:100%;height:100%;object-fit:cover;filter:saturate(.8) brightness(.9) contrast(1.02)}
.hero-rec-frame::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(125,162,236,.07),transparent 45%),radial-gradient(120% 90% at 50% 30%,transparent 55%,rgba(8,9,12,.55))}
.hero-rec .media-toggle{z-index:3}
@media (min-width:1024px){
  .hero-grid .hero-rec{grid-column:9 / 13;grid-row:1;margin:0;max-width:none;width:calc(100% + 32px);perspective:1800px}
  .hero-grid .hero-rec-frame{transform:rotateY(-11deg) rotateX(3deg);transform-origin:0 50%}
}
@media (min-width:1200px){
  .hero-grid .copy{grid-column:1 / 7}
  .hero-grid .hero-rec{grid-column:7 / 13}
}
@media (max-width:640px){.hero-rec{margin:28px -20px 0;max-width:none}.hero-rec-frame{border-radius:0}}
@media (max-width:359px){.hero-rec{margin:24px -16px 0}}