/* 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:24px;height:24px}
.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}}

/* --- Target-release review prototype sections (2026-10-23) --- */
/* Disabled release action: no fake doors. */
.cta[disabled],.btn-disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.rel-note{margin:12px auto 0;max-width:520px;font:400 13px/20px Inter;color:var(--t2);text-align:center}
.rel-note strong{color:var(--t1);font-weight:500}
.wl input[disabled]{color:var(--t3)}
.hero-cta-row{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:20px;flex-wrap:wrap}
.link-arrow{font:500 14px/20px Inter;color:var(--link);display:inline-flex;align-items:center;gap:6px}
.link-arrow:hover{text-decoration:underline}
/* Workflow: five questions, one example */
.wf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start;margin-top:40px}
.wf-steps{list-style:none;margin:0;padding:0}
.wf-step{padding:16px 0;border-top:1px solid var(--hair);display:grid;grid-template-columns:128px 1fr;gap:16px}
.wf-step:first-child{border-top:0;padding-top:0}
.wf-step b{font:600 13px/20px Inter;color:var(--t1)}
.wf-step p{font:400 14px/22px Inter;color:var(--t2)}
.wf-note{margin-top:16px;font:400 13px/20px Inter;color:var(--t3)}
.wf .frame{aspect-ratio:16/10}
.wf .frame img,.wf .frame video{width:100%;height:100%;object-fit:cover}
/* How it fits together */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:40px}
.fit-box{border:1px solid var(--hs);border-radius:var(--r-xl);background:var(--surf);padding:20px}
.fit-box h3{font:600 16px/22px Inter;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.fit-box h3 span{font:500 11px/16px "JetBrains Mono",monospace;color:var(--t3)}
.fit-box p{margin-top:8px;font:400 14px/22px Inter;color:var(--t2)}
.fit-box.local{border-color:rgba(180,202,250,.45)}
.fit-box.optional{border-style:dashed}
.lanes{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.lane{border:1px solid var(--hair);border-radius:var(--r-lg);padding:16px 20px;background:rgba(255,255,255,.02)}
.lane b{display:block;font:600 14px/20px Inter}
.lane p{margin-top:4px;font:400 13px/20px Inter;color:var(--t2)}
/* Templates */
.tmpl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:40px}
.tmpl{border:1px solid var(--hs);border-radius:var(--r-xl);background:var(--surf);padding:20px;display:flex;flex-direction:column;gap:8px}
.tmpl h3{font:600 16px/22px Inter}
.tmpl .tmpl-tag{font:500 11px/16px "JetBrains Mono",monospace;color:var(--t3);text-transform:uppercase;letter-spacing:.06em}
.tmpl p{font:400 14px/22px Inter;color:var(--t2)}
.tmpl ul{margin:4px 0 0;padding-left:18px;font:400 13px/20px Inter;color:var(--t2)}
/* Deal Room teaser */
.teaser{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;margin-top:40px}
.teaser .frame{aspect-ratio:16/10}
.teaser .frame img{width:100%;height:100%;object-fit:cover}
.teaser p{font:400 15px/24px Inter;color:var(--t2);margin-top:12px}
/* Sam strip */
.sam-strip{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;margin-top:40px;border:1px solid var(--hs);border-radius:var(--r-xl);background:var(--surf);padding:24px 28px}
.sam-strip .sam{width:112px;height:112px;border-radius:30px;margin:0;flex:none}
.sam-strip h3{font:600 20px/26px "Inter Display",Inter;letter-spacing:-.015em}
.sam-strip p{margin-top:6px;font:400 14px/22px Inter;color:var(--t2)}
/* Plans: disabled download + roles */
.plan .cta{margin-top:20px}
.plan .price-free{font:600 15px/22px Inter;color:var(--t1)}
.roles{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.roles i{font-style:normal;height:24px;display:inline-flex;align-items:center;padding:0 8px;border-radius:var(--r-xs);border:1px solid var(--hs);font:500 12px/1 Inter;color:var(--t1);background:rgba(255,255,255,.04)}
/* Picker result basis line */
.res-meta{font:400 12px/18px "JetBrains Mono",monospace;color:var(--t3);margin-top:10px}
@media (max-width:900px){
  .wf,.teaser{grid-template-columns:1fr;gap:32px}
  .fit,.lanes,.tmpl-grid{grid-template-columns:1fr}
  .sam-strip{grid-template-columns:1fr;text-align:center;justify-items:center}
  .wf-step{grid-template-columns:1fr;gap:4px}
}
/* Site-specific Sam media (owner direction 2026-10-23): generated for the web,
   dark-staged, full-bleed — replaces the app stills' light tile treatment. */
.sam.sam-site{background:#0b1222}
.sam.sam-site img,.sam.sam-site video{object-fit:cover}

/* Audience statement band (added 2026-10-23, Nick's tagline) */
.tagline-band{padding:56px 0 4px; text-align:center}
.tagline-band p{font-size:clamp(24px,3.2vw,36px); font-weight:600; letter-spacing:-.025em; color:#eef3ff}
.tagline-band span{color:#7db1ff}

/* === Dither hero (Concept C9, approved 2026-10-24) + black header (Nick) === */
@font-face{font-family:"PlexSans"; src:url(assets/fonts/IBMPlexSans.woff2) format("woff2"); font-weight:500 600; font-display:swap}
@font-face{font-family:"PlexMono"; src:url(assets/fonts/IBMPlexMono.woff2) format("woff2"); font-weight:500; font-display:swap}
.nav-bar{background:transparent; border-bottom:none}
.dhero{position:relative; overflow:hidden; text-align:center; padding:10px 0 44px; background:radial-gradient(1100px 560px at 50% -10%, rgba(47,123,255,.12), transparent 62%), #020409}
#field{position:absolute; inset:0; overflow:hidden; font-family:"PlexMono",ui-monospace,Menlo,monospace; font-size:10.5px; line-height:1.35; letter-spacing:1.5px; margin:0; white-space:pre; pointer-events:none; user-select:none; color:transparent; background:linear-gradient(180deg,#a5ecff 0%,#4fd8ff 42%,#2f7bff 88%); -webkit-background-clip:text; background-clip:text; -webkit-mask-image:linear-gradient(180deg, transparent, #000 10%, #000 86%, transparent); mask-image:linear-gradient(180deg, transparent, #000 10%, #000 86%, transparent)}
.dhero-inner{position:relative; z-index:2}
.d-eyebrow{font-family:"PlexSans",sans-serif; font-size:13px; letter-spacing:.24em; text-transform:uppercase; color:#bfe9ff; font-weight:600; padding-top:34px}
.d-h1{font-family:"PlexSans",sans-serif; font-size:clamp(44px,7.2vw,88px); line-height:1.04; letter-spacing:-.03em; font-weight:600; margin-top:18px; color:#f2f7ff}
.d-stage{height:148px; margin:0 auto; max-width:960px}
.d-always{font-family:"PlexSans",sans-serif; margin-top:2px; font-size:clamp(24px,3.4vw,38px); font-weight:600; letter-spacing:-.02em; color:#f2f7ff}
.d-dot{color:#4fd8ff; text-shadow:0 0 14px rgba(79,216,255,.8)}
.d-sub{font-family:"PlexSans",sans-serif; margin:20px auto 0; color:#9db8da; font-size:clamp(16px,1.8vw,19px); line-height:1.62; max-width:56ch; font-weight:500}
.d-sub b{color:#f2f7ff; font-weight:600}
.d-local{font-family:"PlexSans",sans-serif; margin-top:14px; font-size:15.5px; color:#bfe9ff; font-weight:600}
.d-cta{display:flex; gap:13px; justify-content:center; margin-top:34px; flex-wrap:wrap}
.d-btn{border-radius:99px; padding:15px 29px; font-size:16px; font-weight:600; border:1px solid rgba(160,205,255,.35); background:rgba(140,190,255,.07); color:#eaf7ff; font-family:"PlexSans",sans-serif; -webkit-appearance:none; appearance:none; backdrop-filter:blur(10px) saturate(150%); -webkit-backdrop-filter:blur(10px) saturate(150%); box-shadow:inset 0 1px 0 rgba(255,255,255,.18); text-decoration:none; display:inline-block}
.d-btn-primary{background:rgba(170,215,255,.14); border-color:rgba(210,240,255,.55); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 16px rgba(79,216,255,.10), 0 0 22px rgba(79,216,255,.20)}
.d-btn[disabled]{opacity:.75; cursor:not-allowed}
.d-rel{margin-top:16px; font-size:13.5px; color:#55708f; font-family:"PlexSans",sans-serif}
.d-rel strong{color:#9db8da}
.d-feed{margin:34px auto 0; font-size:14.5px; color:#bfe9ff; font-weight:500; font-family:"PlexSans",sans-serif}
.d-ok{color:#4ade80; margin-right:7px}
.d-who{color:#55708f}
.pos-lead{font-size:clamp(17px,2vw,20px); line-height:1.65; color:#c9d9f2; max-width:68ch; margin:14px 0 26px; font-weight:500}
.hero-visual{padding-top:34px}
@media (max-width:860px){ .d-stage{height:132px} }
@media (max-width:639px){ .d-stage{height:176px} }

/* Hero display type: Saira (2026-10-24 polish pass; word sampled in Saira Condensed 700) */
@font-face{font-family:"Saira"; src:url(assets/fonts/Saira-600.woff2) format("woff2"); font-weight:600; font-display:swap}
@font-face{font-family:"Saira"; src:url(assets/fonts/Saira-700.woff2) format("woff2"); font-weight:700; font-display:swap}
@font-face{font-family:"SairaCondensed"; src:url(assets/fonts/SairaCondensed-700.woff2) format("woff2"); font-weight:700; font-display:swap}
.d-h1{font-family:"Saira",sans-serif; letter-spacing:-.015em}
.d-always{font-family:"Saira",sans-serif}
.d-eyebrow{font-family:"Saira",sans-serif}

/* === C11 polish — hierarchy by reason (2026-10-24) === */
@font-face{font-family:"Saira"; src:url(assets/fonts/Saira-200.woff2) format("woff2"); font-weight:200; font-display:swap}
@font-face{font-family:"Saira"; src:url(assets/fonts/Saira-300.woff2) format("woff2"); font-weight:300; font-display:swap}
@font-face{font-family:"Saira"; src:url(assets/fonts/Saira-500.woff2) format("woff2"); font-weight:500; font-display:swap}
.dhero{background:radial-gradient(1000px 540px at 50% 40%, rgba(87,220,255,.13), transparent 62%), radial-gradient(1100px 620px at 50% 34%, rgba(47,123,255,.10), transparent 64%), radial-gradient(1200px 700px at 50% 115%, rgba(38,64,175,.10), transparent 65%), #020409; padding-bottom:64px}
.dhero::before{content:""; position:absolute; top:0; left:0; right:0; height:1px; z-index:3; background:linear-gradient(90deg, transparent, rgba(120,215,255,.45) 50%, transparent)}
#field{background-image:linear-gradient(180deg,#d2f7ff 0%,#57dcff 38%,#3f8cff 74%,#2b5cff 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-mask-image:linear-gradient(180deg, transparent, #000 9%, #000 80%, transparent); mask-image:linear-gradient(180deg, transparent, #000 9%, #000 80%, transparent)}
.d-eyebrow{padding-top:46px; font-size:11.5px; letter-spacing:.34em; font-weight:500; color:#7d9cc4}
.d-h1{margin-top:22px; font-size:clamp(48px,7.8vw,96px); font-weight:200; letter-spacing:-.01em; background:linear-gradient(180deg,#ffffff 20%,#c4e2ff 90%); -webkit-background-clip:text; background-clip:text; color:transparent}
.d-always{margin-top:12px; font-size:clamp(26px,3.6vw,40px); font-weight:300; letter-spacing:-.01em; color:#e8f4ff}
.d-sub{margin-top:26px; font-weight:400; color:#93a9c9; line-height:1.7; max-width:54ch}
.d-local{margin-top:20px; font-family:"Saira",sans-serif; font-size:15px; font-weight:500; color:#6fb7e8}
.d-local .no{color:#eaf7ff}
.d-cta{margin-top:38px}
.d-btn{font-family:"Saira",sans-serif; font-weight:600; font-size:15px}
.d-rel{margin-top:18px; font-size:12.5px; color:#5b7694}
.d-feed{margin-top:42px; font-family:"PlexMono",ui-monospace,monospace; font-size:12.5px; color:#6fc3e8; letter-spacing:.02em}
.tagline-band{font-family:"Saira",sans-serif; font-weight:200; letter-spacing:-.01em}

@media (max-width:639px){ .d-eyebrow{font-size:10.5px; letter-spacing:.18em} }

/* === C12 — drop shadows on the type (2026-10-24) === */
.d-h1{filter:drop-shadow(0 10px 28px rgba(24,90,255,.35))}
.d-always{text-shadow:0 2px 26px rgba(47,140,255,.35), 0 1px 2px rgba(0,0,0,.35)}
.d-eyebrow,.d-sub,.d-local,.d-feed{text-shadow:0 1px 14px rgba(2,4,9,.9)}
.d-btn{text-shadow:0 1px 8px rgba(2,4,9,.45)}

.dhero::before{display:none}

.nav-bar::after{content:""; position:absolute; left:0; right:0; top:0; height:190px; z-index:-1; pointer-events:none; background:linear-gradient(180deg, #000 34%, rgba(0,0,0,0) 100%)}

/* === FINALS — site-wide design system (2026-10-24) === */
.kicker{font-family:"Saira",sans-serif; font-size:11.5px; font-weight:500; letter-spacing:.34em; text-transform:uppercase; color:#7d9cc4; line-height:1.6}
.h2{font-family:"Saira",sans-serif; font-weight:200; font-size:clamp(34px,4.6vw,54px); line-height:1.08; letter-spacing:-.015em; color:#eef4ff}
.lede{color:#9db8da}
.btn-sm{font-family:"Saira",sans-serif; font-weight:600}
.link-arrow{font-family:"Saira",sans-serif; font-weight:500}
.footer .brand-lockup{display:inline-flex; align-items:center}


/* === Dither hero v2 — legible role words (2026-10-24) === */
.d-stage{position:relative; height:clamp(150px, 11.5vw, 230px); max-width:1100px}
@media (max-width:860px){ .d-stage{height:150px} }
@media (max-width:639px){ .d-stage{height:184px} }
.d-stage-toggle{position:absolute; z-index:3; margin:0; padding:0; border:0; background:transparent; cursor:pointer; -webkit-tap-highlight-color:transparent}
.d-stage-toggle:focus{outline:none}
.d-stage-toggle:focus-visible{outline:2px solid rgba(120,215,255,.55); outline-offset:4px; border-radius:14px}

/* === Public-ready (2026-10-24): "Coming soon" CTAs, compact mobile menu === */
.ticks .soon{margin-left:6px; height:20px; font-size:11px}
.nav-menu{display:none}
@media (max-width:1000px){
  html:has(.nav.has-menu){--nav-h:64px}
  html.js{--nav-h:64px}
  html.js .nav-bar .nav{flex-wrap:nowrap; height:64px; gap:12px}
  html.js .nav-bar .nav .btn-sm{margin:0 0 0 auto; height:32px; padding:0 12px}
  html.js .nav-bar .nav:not(.has-menu) .links{display:none}
  .nav.has-menu{flex-wrap:nowrap; height:64px; gap:12px}
  .nav.has-menu .btn-sm{margin:0 0 0 auto; height:32px; padding:0 12px}
  .nav.has-menu .links{display:none; position:absolute; top:100%; left:0; right:0; z-index:20; flex-direction:column; align-items:stretch; height:auto; margin:0; padding:6px 20px 14px; gap:0; overflow:visible; white-space:normal; -webkit-mask-image:none; mask-image:none; background:#08090c; border-bottom:1px solid var(--hair); box-shadow:0 18px 40px rgba(0,0,0,.45); flex-basis:auto}
  .nav.has-menu.open .links{display:flex}
  .nav.has-menu .links a{display:flex; align-items:center; height:48px; font-size:15px; color:var(--t1); border-bottom:1px solid var(--hair)}
  .nav.has-menu .links a:last-child{border-bottom:0}
  .nav-menu{display:inline-flex; align-items:center; gap:8px; height:32px; padding:0 10px; border-radius:var(--r-sm); border:1px solid var(--hs); background:transparent; color:var(--t1); font:500 13px/1 Inter; cursor:pointer; position:relative}
  .nav-menu::after{content:""; position:absolute; inset:-6px}
  .nav-menu-ico{display:inline-flex; flex-direction:column; gap:4px; width:14px}
  .nav-menu-ico i{display:block; height:1.5px; background:currentColor; border-radius:1px; transition:transform .18s var(--ease)}
  .nav.open .nav-menu-ico i:first-child{transform:translateY(2.75px) rotate(45deg)}
  .nav.open .nav-menu-ico i:last-child{transform:translateY(-2.75px) rotate(-45deg)}
}
@media (max-width:359px){ .nav-menu-label{display:none} .nav.has-menu .btn-sm{padding:0 10px} }

/* === Dither-tile logo (2026-10-24) === */
.footer .brand-lockup img{height:48px; width:auto; display:block}
.footer .brand-lockup{margin-right:20px}

/* === Dither hero v4 — original C9 look, finer word grid (2026-10-24) === */
.d-wordfield{position:absolute; top:0; left:0; margin:0; overflow:hidden; white-space:pre; pointer-events:none; user-select:none; font-family:"PlexMono",ui-monospace,Menlo,monospace; font-weight:500; color:transparent; background-image:linear-gradient(180deg,#e2faff 0%,#6ae0ff 38%,#4f98ff 74%,#3d6bff 100%); background-repeat:no-repeat; -webkit-background-clip:text; background-clip:text; filter:drop-shadow(0 0 5px rgba(87,200,255,.28))}

/* Buttons (Nick, 2026-10-24: "no ugly blue buttons"). Primary = off-white fill with ink text; secondary = 1px hairline
   with light text. Blue survives only as the keyboard focus ring. Sizes and click targets are unchanged. */
:root{--btn-ink:#0b1222;--btn-paper:#eef2f8;--btn-line:rgba(238,242,248,.30);--btn-line-hover:rgba(238,242,248,.62)}
.cta{background:var(--btn-paper);border:1px solid var(--btn-paper);color:var(--btn-ink);font-weight:600;box-shadow:none}
.cta:hover{background:#fff;border-color:#fff}
.cta .kbd{background:rgba(11,18,34,.07);border-color:rgba(11,18,34,.18);color:#3a4862}
.cta[aria-busy="true"]::before{border-color:rgba(11,18,34,.25);border-top-color:var(--btn-ink)}
.final .cta{background:transparent;border-color:var(--btn-line);color:var(--btn-paper)}
.final .cta:hover{background:rgba(238,242,248,.06);border-color:var(--btn-line-hover)}
body .d-btn{background:transparent;border-color:var(--btn-line);color:var(--btn-paper);box-shadow:none;transition:background .15s,border-color .15s}
body .d-btn:hover{background:rgba(238,242,248,.06);border-color:var(--btn-line-hover)}
body .d-btn-primary{background:var(--btn-paper);border-color:var(--btn-paper);color:var(--btn-ink);text-shadow:none;box-shadow:0 0 0 1px rgba(238,242,248,.08),0 8px 28px rgba(0,0,0,.35)}
body .d-btn-primary:hover{background:#fff;border-color:#fff}
body .review .r-btn.primary{background:var(--btn-paper);border-color:var(--btn-paper);color:var(--btn-ink)}
.cta:focus-visible,.d-btn:focus-visible,.btn-sm:focus-visible{outline:2px solid #7fb2ff;outline-offset:3px}

/* Hero headline in the header zone, with a decoder animation (night.js). Plex Mono: every glyph is the same width
   and spaces never scramble, so nothing shifts while it decodes. */
.dhero .d-eyebrow{padding-top:14px;font:500 clamp(14px,1.25vw,17px)/1.5 "PlexMono",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:#dcebff;text-shadow:0 1px 14px rgba(2,4,9,.95),0 0 20px rgba(47,140,255,.22)}
.dhero .d-eyebrow.decoding .dec-t{color:#9fd8ff}
@media (max-width:639px){.dhero .d-eyebrow{padding-top:10px;font-size:12.5px;letter-spacing:.08em}}

/* Top bar (Nick 4:24 AM ET): the eyebrow sits in a solid bar above the nav, out of the dither field.
   The bar scrolls away; the nav stays sticky at top:0. */
.topbar{position:relative;z-index:11;background:#05070d;border-bottom:1px solid rgba(140,180,235,.16);text-align:center}
.topbar-t{margin:0;padding:9px 12px;font:500 12px/16px "PlexMono",ui-monospace,Menlo,monospace;letter-spacing:.22em;text-transform:uppercase;color:#e4efff;white-space:nowrap;overflow:hidden}
@media (max-width:520px){.topbar-t{font-size:11px;letter-spacing:.1em;padding:8px}}
.dhero .d-h1{margin-top:34px}
@media (max-width:639px){.dhero .d-h1{margin-top:26px}}
.topbar-t .dec-t{transition:color .35s ease,text-shadow .35s ease}
.topbar-t.decoding .dec-t{color:#7fb6ff;text-shadow:0 0 10px rgba(47,140,255,.45)}

/* Hero task list (Nick 4:40 AM ET): hook + scannable list of work to hand off. 12 shown on desktop, 8 on phones; JS reveals the rest. */
.d-hook{font-family:"PlexSans",sans-serif;margin:24px auto 0;max-width:40ch;color:#eaf3ff;font-size:clamp(18px,2vw,22px);line-height:1.4;font-weight:500;text-shadow:0 1px 14px rgba(2,4,9,.9)}
.d-tasks{max-width:920px;margin:18px auto 0;text-align:left}
.t-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.t-list li{display:flex;align-items:center;gap:10px;min-height:40px;padding:8px 12px;border:1px solid rgba(140,180,235,.14);border-radius:10px;background:rgba(5,8,15,.78);color:#d6e3f5;font:500 14.5px/1.35 Inter,system-ui,sans-serif}
.t-g{flex:none;font:500 13px/1 "PlexMono",ui-monospace,Menlo,monospace;color:#6fc3e8}
html.js .d-tasks:not(.open) .t-list li:nth-child(n+13){display:none}
.t-more{display:flex;align-items:center;gap:8px;margin:12px auto 0;height:34px;padding:0 14px;border:1px solid rgba(238,242,248,.22);border-radius:999px;background:transparent;color:#dfe9f7;font:500 12.5px/1 "PlexMono",ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}
.t-more:hover{border-color:rgba(238,242,248,.45);background:rgba(238,242,248,.05)}
.t-more:focus-visible{outline:2px solid #6fc3e8;outline-offset:2px}
.t-more-g{font-size:14px;color:#6fc3e8}
.t-plugs{margin:14px 0 0;text-align:center;font:500 12px/1.6 "PlexMono",ui-monospace,Menlo,monospace;color:#a9bad3;letter-spacing:.02em}
.t-plugs-k{color:#6fc3e8;text-transform:uppercase;letter-spacing:.14em;margin-right:6px}
html.js .d-tasks:not(.open) .t-plugs{display:none}
.t-note{margin:10px auto 0;max-width:72ch;text-align:center;font:400 12.5px/1.55 Inter,system-ui,sans-serif;color:#8ea2bf;text-shadow:0 1px 10px rgba(2,4,9,.9)}
.t-note a{color:#b4cafa;text-decoration:underline;text-underline-offset:2px}
.d-tasks.open .t-list li.t-new{animation:t-in .32s ease both;animation-delay:calc(var(--i,0) * 22ms)}
@keyframes t-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.d-tasks.open .t-list li.t-new{animation:none}}
@media (max-width:900px){.t-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .d-hook{margin-top:20px}
  .t-list{grid-template-columns:1fr;gap:6px}
  .t-list li{min-height:36px;padding:6px 12px;font-size:14px}
  html.js .d-tasks:not(.open) .t-list li:nth-child(n+9){display:none}
}
html:not(.js) .t-more{display:none}
/* task list sizing pass */
.d-hook{max-width:none;margin-top:18px}
.d-tasks{max-width:1040px;margin-top:16px}
.t-list li{min-height:38px;padding:7px 12px}
html.js .d-tasks:not(.open) .t-list li:nth-child(n+10){display:none}
@media (max-width:900px){html.js .d-tasks:not(.open) .t-list li:nth-child(n+9){display:none}}
@media (max-width:560px){html.js .d-tasks:not(.open) .t-list li:nth-child(n+7){display:none}.d-hook{font-size:17.5px;margin-top:16px}.t-list{gap:5px}.t-list li{min-height:34px;padding:5px 12px}.t-more{margin-top:10px}}
.dhero .t-note{margin-top:14px}
.t-plugs{display:table;margin:12px auto 0;padding:6px 14px;border:1px solid rgba(140,180,235,.14);border-radius:999px;background:rgba(5,8,15,.86)}
html.js .d-tasks:not(.open) .t-plugs{display:none}
@media (max-width:560px){.t-plugs{display:block;border-radius:12px}}
/* short-phrase dense grid (Nick 4:53 AM): 4 cols desktop (12 shown), 3 tablet (9), 2 phone (8) */
.t-list{grid-template-columns:repeat(4,minmax(0,1fr))}
html.js .d-tasks:not(.open) .t-list li:nth-child(n+10){display:list-item}
html.js .d-tasks:not(.open) .t-list li:nth-child(n+10){display:flex}
html.js .d-tasks:not(.open) .t-list li:nth-child(n+13){display:none}
.d-tasks{max-width:980px}
@media (max-width:900px){.t-list{grid-template-columns:repeat(3,minmax(0,1fr))}html.js .d-tasks:not(.open) .t-list li:nth-child(n+10){display:none}}
@media (max-width:560px){.t-list{grid-template-columns:repeat(2,minmax(0,1fr))}.t-list li{font-size:13.5px;padding:5px 10px;gap:7px}html.js .d-tasks:not(.open) .t-list li:nth-child(n+7){display:flex}html.js .d-tasks:not(.open) .t-list li:nth-child(n+9){display:none}}
@media (max-width:560px){.t-list li{font-size:13px;line-height:1.25}html.js .d-tasks:not(.open) .t-list li:nth-child(n+7){display:none}}
@media (min-width:561px) and (max-width:900px){html.js .d-tasks:not(.open) .t-list li:nth-child(n+9){display:flex}html.js .d-tasks:not(.open) .t-list li:nth-child(n+10){display:none}}
/* Grouped pitch list (Nick 5:11 AM ET): 5 tabs x 8 lines; all groups stacked with headings without JS. */
.d-groups{max-width:900px;margin:16px auto 0;text-align:left}
.tg-tabs{display:none}
html.js .tg-tabs{display:flex;justify-content:center;gap:6px;margin:0 0 12px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tg-tabs::-webkit-scrollbar{display:none}
.tg-tab{flex:none;height:32px;padding:0 13px;border:1px solid rgba(238,242,248,.2);border-radius:999px;background:rgba(5,8,15,.7);color:#a9bad3;font:500 11.5px/1 "PlexMono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.tg-tab:hover{color:#eaf3ff;border-color:rgba(238,242,248,.4)}
.tg-tab[aria-selected="true"]{color:#fff;border-color:rgba(111,195,232,.75);background:rgba(111,195,232,.08);box-shadow:inset 0 -2px 0 #6fc3e8}
.tg-tab:focus-visible,.tg-p:focus-visible{outline:2px solid #6fc3e8;outline-offset:2px}
.tg-h{margin:16px 0 8px;font:500 12px/1.2 "PlexMono",ui-monospace,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase;color:#6fc3e8;text-align:center}
html.js .tg-h{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.js .tg-panels{display:grid}
html.js .tg-p{grid-area:1/1;transition:opacity .22s ease}
html.js .tg-p:not(.on){visibility:hidden;opacity:0}
.tg-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.tg-list li{display:flex;align-items:center;gap:10px;min-height:38px;padding:7px 13px;border:1px solid rgba(140,180,235,.14);border-radius:10px;background:rgba(5,8,15,.78);color:#d6e3f5;font:500 14.5px/1.3 Inter,system-ui,sans-serif}
.tg-free{margin:14px 0 0;text-align:center;font:500 clamp(17px,1.8vw,20px)/1.3 "PlexSans",sans-serif;color:#cfdcef;text-shadow:0 1px 14px rgba(2,4,9,.9)}
.tg-free em{font-style:normal;font-weight:700;color:#fff;background:linear-gradient(90deg,rgba(111,195,232,0),rgba(111,195,232,.9) 20%,rgba(111,195,232,.9) 80%,rgba(111,195,232,0)) no-repeat 0 100%/100% 2px;padding-bottom:2px}
@media (prefers-reduced-motion:reduce){html.js .tg-p,.tg-tab{transition:none}}
@media (max-width:760px){html.js .tg-tabs{justify-content:flex-start;margin-left:-16px;margin-right:-16px;padding:0 16px;mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent)}}
@media (max-width:560px){
  .d-groups{margin-top:14px}
  html.js .tg-tabs{margin-bottom:10px}
  .tg-tab{height:30px;padding:0 11px;font-size:11px}
  .tg-list{grid-template-columns:1fr;gap:4px}
  .tg-list li{min-height:30px;padding:4px 11px;gap:8px;font-size:13.5px;line-height:1.25}
  .tg-free{margin-top:12px;font-size:17px}
  .d-groups .t-plugs{display:none}
}
html.js .d-groups .t-plugs{display:table}
@media (max-width:560px){html.js .d-groups .t-plugs{display:none}}
.tg-tab:first-child:not([aria-selected]){color:#fff;border-color:rgba(111,195,232,.75);background:rgba(111,195,232,.08);box-shadow:inset 0 -2px 0 #6fc3e8}
/* phones: 5 lines per group, "+ 3 more" reveals the rest (applies to every tab) */
.tg-more{display:none}
@media (max-width:560px){
  html.js .tg-panels:not(.full) .tg-list li:nth-child(n+6){display:none}
  html.js .tg-more{display:flex;align-items:center;margin:8px auto 0;height:28px;padding:0 12px;border:1px solid rgba(238,242,248,.2);border-radius:999px;background:transparent;color:#cfdcef;font:500 11px/1 "PlexMono",ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;cursor:pointer}
  .tg-more:focus-visible{outline:2px solid #6fc3e8;outline-offset:2px}
  .tg-list li{min-height:28px;padding:3px 11px}
  .tg-free{margin-top:10px}
}
/* tabs fit on one row at desktop; never clip the first tab */
.d-groups{max-width:940px}
html.js .tg-tabs{justify-content:safe center}
.tg-tab{padding:0 11px;letter-spacing:.05em;font-size:11px}
@media (max-width:760px){html.js .tg-tabs{justify-content:flex-start}}
@media (max-width:900px){html.js .tg-tabs{justify-content:flex-start;margin-left:-16px;margin-right:-16px;padding:0 16px;mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 16px,#000 calc(100% - 24px),transparent)}}
/* Tab script didn't start (error or blocked): show every group stacked, like no-JS. */
html.js .d-groups.tg-fallback .tg-tabs,html.js .d-groups.tg-fallback .tg-more{display:none}
html.js .d-groups.tg-fallback .tg-panels{display:block}
html.js .d-groups.tg-fallback .tg-p{visibility:visible;opacity:1}
html.js .d-groups.tg-fallback .tg-h{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal}
html.js .d-groups.tg-fallback .tg-list li{display:flex}
/* No-JS / fallback headings: spacing between stacked groups */
.tg-p+.tg-p .tg-h{margin-top:20px}
.tg-p:first-child .tg-h{margin-top:4px}