/* LegalNod · Signal design system */
@font-face{font-family:"Bricolage Grotesque";src:url(fonts/bricolage.woff2) format("woff2");font-weight:500 800;font-stretch:100%;font-display:optional}
@font-face{font-family:"DM Sans";src:url(fonts/dmsans.woff2) format("woff2");font-weight:400 600;font-display:optional}

:root{
  --bg:#fff;--ink:#0d0f14;--soft:#5c6370;--line:#e8eaee;--mist:#f5f6f8;
  --blue:#2f4bff;--blue-dark:#2238d6;--blue-soft:#eef1ff;--yellow:#ffe14d;
  --green:#15803d;--green-soft:#dcfce7;--amber:#a16207;--amber-soft:#fef3c7;--red:#b91c1c;--red-soft:#fee2e2;
  --r-lg:36px;--r-md:24px;--r-sm:14px;
  --disp:"Bricolage Grotesque","Arial Black",system-ui,sans-serif;
  --body:"DM Sans",system-ui,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%}
h1,h2,h3,h4{font-family:var(--disp);letter-spacing:-.03em;line-height:1.02}
.wrap{max-width:1160px;margin:0 auto;padding:0 32px}
.narrow{max-width:820px}
.soft{color:var(--soft)}
.center{text-align:center}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0;position:relative}
.logo{font-family:var(--disp);font-weight:800;font-size:24px;display:inline-flex;align-items:center;letter-spacing:-.03em;line-height:1.1}
/* The wordmark: no symbol. The tilted yellow highlighter behind "Nod" is the mark. */
.logo .hl{position:relative;display:inline-block;padding:0 .1em;margin-left:.06em;color:var(--ink)}
.logo .hl i{position:absolute;inset:.03em 0 -.04em;background:var(--yellow);border-radius:.16em;transform:rotate(-3deg)}
.logo .hl b{position:relative;font-weight:inherit}
.links{display:flex;gap:28px;font-size:15px;font-weight:500;align-items:center}
.links a:not(.btn):hover,.links a.on{color:var(--blue)}
.navm,.menu,.m-only{display:none}
.burger{width:44px;height:44px;border-radius:50%;border:0;background:var(--mist);cursor:pointer;position:relative;flex:none}
.burger i{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:var(--ink);transition:transform .28s cubic-bezier(.3,1.3,.5,1),top .28s}
.burger i:first-child{top:17px}.burger i:last-child{top:25px}
.menu-open .burger i:first-child{top:21px;transform:rotate(45deg)}.menu-open .burger i:last-child{top:21px;transform:rotate(-45deg)}

/* buttons */
.btn{display:inline-block;background:var(--blue);color:#fff;padding:15px 26px;border-radius:99px;font-weight:600;font-size:16px;border:0;cursor:pointer;font-family:var(--body);transition:transform .12s,background .12s}
.btn:hover{background:var(--blue-dark);transform:translateY(-1px)}
.btn.dark{background:var(--ink)}.btn.dark:hover{background:#000}
.btn.ghost{background:var(--mist);color:var(--ink)}.btn.ghost:hover{background:var(--line)}
.btn.yellow{background:var(--yellow);color:var(--ink)}.btn.yellow:hover{background:#ffd91a}
.btn.sm{padding:10px 18px;font-size:14px}
.btn.block{display:block;width:100%;text-align:center}
.cta{display:flex;gap:12px;flex-wrap:wrap}

/* hero */
.hero{padding:56px 0 72px;display:grid;grid-template-columns:1fr 420px;gap:48px;align-items:center}
.hero h1{font-size:84px;line-height:.95;font-weight:800;margin-bottom:24px}
mark{background:var(--yellow);color:inherit;padding:0 10px;border-radius:12px;display:inline-block;transform:rotate(-1.5deg)}
.lede{font-size:20px;color:var(--soft);max-width:560px;margin-bottom:30px}
.trust{display:flex;gap:22px;margin-top:26px;font-size:14px;color:var(--soft);flex-wrap:wrap}
.trust b{color:var(--ink)}
.page-hero{padding:48px 0 56px;max-width:860px}
.page-hero h1{font-size:68px;font-weight:800;margin-bottom:20px}
.eyebrow{display:inline-block;background:var(--blue-soft);color:var(--blue);border-radius:99px;padding:6px 14px;font-size:13px;font-weight:600;margin-bottom:20px}

/* chat mock */
.phone{background:var(--blue);border-radius:32px;padding:26px;color:#fff}
.bubble{background:rgba(255,255,255,.14);border-radius:18px;padding:14px 16px;font-size:15px;margin-bottom:12px}
.bubble.q{background:#fff;color:var(--ink);margin-left:36px;border-bottom-right-radius:5px}
.bubble.tool{background:rgba(13,15,20,.28);font-size:13px;font-family:ui-monospace,Consolas,monospace}
.bubble.tool small{display:block;opacity:.75;margin-top:3px;font-family:var(--body)}
.nodcard{background:#fff;color:var(--ink);border-radius:20px;padding:18px;margin-top:6px}
.nodcard .top{display:flex;justify-content:space-between;align-items:center;font-size:12px;font-weight:600;color:var(--soft);margin-bottom:10px;letter-spacing:.04em}
.nodcard h3{font-size:20px;font-weight:700;margin-bottom:4px}
.nodcard p{font-size:14px;color:var(--soft)}
.who{display:flex;gap:10px;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:13px}
.av{width:36px;height:36px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;font-weight:700;flex:none;color:var(--ink)}

/* chips */
.chip{display:inline-block;white-space:nowrap;border-radius:99px;padding:4px 12px;font-size:12px;font-weight:700}
.chip.green{background:var(--green-soft);color:var(--green)}
.chip.amber{background:var(--amber-soft);color:var(--amber)}
.chip.red{background:var(--red-soft);color:var(--red)}
.chip.blue{background:var(--blue-soft);color:var(--blue)}
.chip.grey{background:var(--mist);color:var(--soft)}

/* bands and grids */
.band{background:var(--mist);border-radius:var(--r-lg);padding:64px 56px;margin-bottom:28px}
.band.blue{background:var(--blue-soft)}
.band.ink{background:var(--ink);color:#fff}
.band.ink .sub,.band.ink .soft{color:#aab0bb}
.band.plain{background:transparent;padding-left:0;padding-right:0}
.band h2,.h2{font-size:48px;font-weight:800;margin-bottom:14px}
.sub{color:var(--soft);font-size:18px;max-width:620px;margin-bottom:36px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.card{background:#fff;border-radius:var(--r-md);padding:26px}
.band.plain .card,.card.line{border:1px solid var(--line)}
.card h3{font-size:22px;font-weight:700;margin-bottom:8px}
.card p{color:var(--soft);font-size:15px}
.num{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:700;margin-bottom:16px;flex:none}
.card .chip{margin-bottom:12px}

/* kits */
.kit{display:flex;flex-direction:column;min-height:200px;transition:transform .15s,box-shadow .15s}
a.kit:hover{transform:translateY(-3px);box-shadow:0 16px 30px -18px rgba(47,75,255,.45)}
.kit .emoji{font-size:26px;margin-bottom:12px}
.kit p{flex:1}
.kit .row{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.price{font-family:var(--disp);font-weight:700;font-size:20px}
.go{background:var(--blue-soft);color:var(--blue);border-radius:99px;padding:7px 14px;font-size:13px;font-weight:600}
.kit.custom{background:var(--ink);color:#fff}.kit.custom p{color:#aab0bb}.kit.custom .go{background:var(--yellow);color:var(--ink)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px}
.filters span{background:#fff;border-radius:99px;padding:8px 16px;font-size:14px;font-weight:500;cursor:pointer}
.filters span.on{background:var(--ink);color:#fff}

/* timeline */
.flow{display:grid;gap:18px}
.flow .card{display:grid;grid-template-columns:40px 1fr;gap:18px;align-items:start}
.flow .num{margin:0}
.flow code,.code{font-family:ui-monospace,Consolas,monospace;font-size:13px;background:var(--blue-soft);color:var(--blue);padding:2px 8px;border-radius:6px}
.codeblock{background:var(--ink);color:#e8ebee;border-radius:var(--r-sm);padding:16px 18px;font-family:ui-monospace,Consolas,monospace;font-size:13px;overflow-x:auto;white-space:nowrap}
.codeblock b{color:var(--yellow);font-weight:400}

/* lists */
.ticks{list-style:none;display:grid;gap:12px}
.ticks li{padding-left:32px;position:relative;font-size:16px}
.ticks li::before{content:"✓";position:absolute;left:0;top:1px;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-size:12px;display:grid;place-items:center;font-weight:700}
.band.ink .ticks li::before{background:var(--yellow);color:var(--ink)}

/* faq */
.faq{display:grid;gap:12px}
.faq details{background:#fff;border-radius:var(--r-sm);padding:20px 24px}
.band.plain .faq details{border:1px solid var(--line)}
.faq summary{font-family:var(--disp);font-weight:700;font-size:19px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:"+";color:var(--blue);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq p{color:var(--soft);margin-top:12px;font-size:15px}

/* pricing */
.plan{display:flex;flex-direction:column}
.plan .chip{align-self:flex-start}
.plan .big{font-family:var(--disp);font-size:52px;font-weight:800;letter-spacing:-.03em;margin:10px 0 4px}
.plan .big small{font-size:16px;font-weight:500;color:var(--soft);letter-spacing:0;font-family:var(--body)}
.plan .ticks{margin:20px 0 26px;flex:1}.plan .ticks li{font-size:15px}
.plan.hot{background:var(--blue);color:#fff}.plan.hot p,.plan.hot .big small{color:#d5dbff}
.plan.hot .ticks li::before{background:var(--yellow);color:var(--ink)}
table.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r-md);overflow:hidden;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:16px 20px;border-bottom:1px solid var(--line)}
.tbl th{font-size:13px;color:var(--soft);font-weight:600}
.tbl tr:last-child td{border-bottom:0}

/* forms */
.field{display:grid;gap:6px;margin-bottom:16px}
.field label{font-size:14px;font-weight:600}
.field small{color:var(--soft);font-size:13px}
input,select,textarea{font-family:var(--body);font-size:16px;padding:14px 16px;border-radius:var(--r-sm);border:1.5px solid var(--line);background:#fff;color:var(--ink);width:100%}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px var(--blue-soft)}
textarea{min-height:140px;resize:vertical}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--soft);margin-bottom:16px}
.check input{width:20px;height:20px;flex:none;margin-top:1px;accent-color:var(--blue)}
.tabs{display:inline-flex;background:var(--mist);border-radius:99px;padding:5px;margin-bottom:24px}
.tabs button{border:0;background:transparent;padding:10px 20px;border-radius:99px;font-family:var(--body);font-weight:600;font-size:14px;cursor:pointer;color:var(--soft)}
.tabs button.on{background:#fff;color:var(--ink);box-shadow:0 2px 8px rgba(13,15,20,.08)}
.formcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:32px}

/* close + footer */
.close{background:var(--blue);color:#fff;border-radius:var(--r-lg);padding:80px 40px;text-align:center;margin-bottom:28px}
.close h2{font-size:64px;font-weight:800;margin-bottom:26px}
.close p{color:#d5dbff;font-size:18px;max-width:520px;margin:-10px auto 26px}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;padding:40px 0 20px;font-size:14px}
.foot h4{font-size:14px;font-family:var(--body);letter-spacing:0;margin-bottom:12px}
.foot a{display:block;color:var(--soft);margin-bottom:8px}.foot a:hover{color:var(--blue)}
.legal{border-top:1px solid var(--line);padding:20px 0 34px;font-size:13px;color:var(--soft)}

/* app shell */
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh;background:var(--mist)}
.side{background:#fff;padding:24px 18px;display:flex;flex-direction:column;gap:6px;border-right:1px solid var(--line)}
.side .logo{margin-bottom:26px;padding:0 10px}
.side a.item{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r-sm);font-weight:500;font-size:15px;color:var(--soft)}
.side a.item.on{background:var(--blue-soft);color:var(--blue);font-weight:600}
.side .spacer{flex:1}
.main{padding:32px 40px 60px;max-width:1100px;width:100%}
.main h1{font-size:40px;font-weight:800;margin-bottom:6px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:28px;flex-wrap:wrap}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:22px}
.stat .v{font-family:var(--disp);font-size:36px;font-weight:800;letter-spacing:-.03em}
.stat .k{font-size:13px;color:var(--soft);font-weight:600}
.rows{display:grid;gap:10px}
.rowitem{background:#fff;border-radius:var(--r-sm);padding:16px 20px;display:flex;align-items:center;gap:16px;justify-content:space-between}
.rowitem b{display:block;font-size:16px}.rowitem span.meta{font-size:13px;color:var(--soft)}
.rowitem.sel{outline:2px solid var(--blue)}
.sect{font-family:var(--disp);font-size:22px;font-weight:700;margin:30px 0 14px;letter-spacing:-.02em}
.tl{list-style:none;display:grid;gap:0}
.tl li{padding:0 0 22px 30px;position:relative;font-size:15px}
.tl li::before{content:"";position:absolute;left:5px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--blue)}
.tl li::after{content:"";position:absolute;left:10px;top:20px;bottom:0;width:2px;background:var(--line)}
.tl li:last-child::after{display:none}
.tl li.todo::before{background:#fff;border:2px solid var(--line)}
.tl small{display:block;color:var(--soft);font-size:13px}
.direction{background:#fff;border-radius:var(--r-md);padding:26px;border-left:6px solid var(--blue)}
.direction p{margin-bottom:10px;font-size:15px}
.cols{display:grid;grid-template-columns:1.5fr 1fr;gap:22px;align-items:start}
.qcols{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start}
.tabbar{display:none}
.simple{min-height:100vh;background:var(--mist);padding:28px 20px 60px}
.simple .inner{max-width:640px;margin:0 auto}
.stepper{display:flex;gap:8px;margin:22px 0 26px}
.stepper i{flex:1;height:6px;border-radius:99px;background:var(--line)}
.stepper i.on{background:var(--blue)}

/* responsive */
@media(max-width:900px){
  .wrap{padding:0 16px}
  .hero{grid-template-columns:1fr;padding:24px 0 44px;gap:36px}
  .hero h1{font-size:50px!important}.page-hero h1{font-size:42px}.page-hero{padding:24px 0 36px}
  .lede{font-size:17px}
  .cta .btn{width:100%;text-align:center}
  .band{padding:40px 20px;border-radius:28px}
  .band.plain{padding-left:0;padding-right:0}
  .band h2,.h2{font-size:34px}.sub{font-size:16px}
  .grid3,.grid2,.split,.cols,.qcols,.stats{grid-template-columns:1fr}
  .split{gap:28px}
  .kit{min-height:0}
  .close{padding:56px 22px;border-radius:28px}.close h2{font-size:40px}
  .foot{grid-template-columns:1fr 1fr}
  .formcard{padding:22px}
  .tbl th,.tbl td{padding:12px 14px;font-size:14px}
  .app{grid-template-columns:1fr}
  .side{display:none}
  .main{padding:22px 16px 110px}
  .main h1{font-size:32px}
  .tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:8px 8px calc(8px + env(safe-area-inset-bottom));justify-content:space-around;z-index:30}
  .tabbar a{display:grid;justify-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--soft);padding:6px 12px;border-radius:12px}
  .tabbar a span{font-size:20px}
  .tabbar a.on{color:var(--blue);background:var(--blue-soft)}
  .rowitem{flex-wrap:wrap}
}

/* privilege line */
.pline{display:grid;grid-template-columns:.8fr auto 1.6fr;gap:18px;align-items:stretch;margin-bottom:34px}
.pseg{border-radius:var(--r-md);padding:24px}
.pseg .tagline{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-bottom:10px}
.pseg h3{font-size:22px;font-weight:700;margin-bottom:6px}
.pseg p{font-size:15px}
.pseg.before{background:repeating-linear-gradient(135deg,#1b1f28,#1b1f28 10px,#232834 10px,#232834 20px);color:#aab0bb;border:1.5px dashed #4a5160}
.pseg.before h3{color:#fff}.pseg.before .tagline{color:#ff8f85}
.pmark{display:grid;place-items:center;position:relative;padding:0 6px}
.pmark::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;background:var(--yellow);transform:translateX(-50%);border-radius:3px}
.pmark span{position:relative;background:var(--yellow);color:var(--ink);font-family:var(--disp);font-weight:800;border-radius:99px;padding:12px 18px;font-size:16px;white-space:nowrap;transform:rotate(-3deg)}
.pafter{display:grid;gap:18px}
.pseg.priv{background:#fff;color:var(--ink)}.pseg.priv p{color:var(--soft)}.pseg.priv .tagline{color:var(--green)}
.pseg.struct{background:var(--blue);color:#fff}.pseg.struct p{color:#d5dbff}.pseg.struct .tagline{color:var(--yellow)}
.pnote{border-top:1px solid #2a2f3a;margin-top:30px;padding-top:22px;font-size:15px;color:#aab0bb;max-width:760px}
.pnote b{color:#fff}
@media(max-width:900px){
  .pline{grid-template-columns:1fr}
  .pmark{padding:6px 0}.pmark::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:3px;transform:translateY(-50%)}
}

/* icons (shared set with the app) */
.ic{width:26px;height:26px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kico{width:46px;height:46px;border-radius:14px;background:var(--blue-soft);color:var(--blue);display:grid;place-items:center;margin-bottom:14px}
.kico.dark{background:rgba(255,255,255,.12);color:var(--yellow)}

/* ── films: the LegalNod player (assets/site.js builds the controls) ─────────
   Inline: copy beside the film. Playing: the band breaks out to nearly the full window ("theater"), the copy folds
   away, the film grows to fit the screen height, and the controls and chapters sit BELOW the picture so they never
   cover the film's own speaker dock. */
.chip.yel{background:var(--yellow);color:var(--ink);margin-bottom:16px}
.filmband{--ease:cubic-bezier(.65,0,.35,1);--morph:.7s;transition:margin var(--morph) var(--ease),padding var(--morph) var(--ease),border-radius var(--morph) var(--ease)}
.filmrow{display:flex;align-items:center;justify-content:center;gap:48px;transition:gap var(--morph) var(--ease)}
.filmcopy{flex:1 1 0;min-width:0;transition:flex-grow var(--morph) var(--ease),opacity .3s}
.filmcopy .sub{margin-bottom:22px}
.film{flex:1.5 1 0;min-width:0;max-width:calc((100svh - 210px) * 16 / 9);transition:flex-grow var(--morph) var(--ease)}
.filmrow.rev .film{order:-1}
.asks{display:grid;gap:8px}
.ask{display:flex;align-items:center;gap:14px;padding:13px 16px 13px 18px;border-radius:16px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);font-weight:600;font-size:16px;line-height:1.3;transition:background .15s,color .15s,border-color .15s,transform .2s cubic-bezier(.3,1.4,.5,1)}
.ask span{flex:1}
.ask em{font-style:normal;font-size:13px;font-weight:700;color:#aab0bb;font-variant-numeric:tabular-nums;display:inline-flex;align-items:center;gap:10px}
.ask em::after{content:"";border-left:9px solid var(--yellow);border-top:6px solid transparent;border-bottom:6px solid transparent}
.ask:hover,.ask:focus-visible{background:var(--yellow);border-color:var(--yellow);color:var(--ink);transform:translateX(4px)}
.ask:hover em,.ask:focus-visible em{color:var(--ink)}.ask:hover em::after,.ask:focus-visible em::after{border-left-color:var(--ink)}
.btn.watch::before{content:"";display:inline-block;margin-right:10px;vertical-align:0;border-left:9px solid var(--blue);border-top:6px solid transparent;border-bottom:6px solid transparent}

/* the frame */
.film-stage{position:relative;aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:#000;container-type:inline-size;isolation:isolate;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);transition:border-radius var(--morph) var(--ease)}
.film-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block}
.film.on .film-stage{cursor:pointer}
/* The browser never sees the pointer on the video itself, so it adds none of its own hover buttons (Edge "Enhance" and
   picture-in-picture, Firefox's toggle) or its video right-click menu. Clicks land on the frame, which the player handles. */
.film.on .film-stage video{pointer-events:none}
.film-stage:fullscreen{border-radius:0;box-shadow:none}

/* cover: before the first play */
.film-cover{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:radial-gradient(ellipse at center,rgba(13,15,20,.18),rgba(13,15,20,.5));transition:opacity .35s,visibility 0s .35s}
.film.started .film-cover{opacity:0;visibility:hidden}
.film-big{display:inline-flex;align-items:center;gap:clamp(10px,1.6cqw,16px);border:0;cursor:pointer;background:var(--yellow);color:var(--ink);border-radius:99px;
  padding:clamp(7px,1.1cqw,10px) clamp(18px,3cqw,30px) clamp(7px,1.1cqw,10px) clamp(7px,1.1cqw,10px);font:700 clamp(15px,2.3cqw,22px)/1 var(--body);letter-spacing:-.01em;
  box-shadow:0 24px 50px -16px rgba(0,0,0,.7);animation:filmPulse 2.6s ease-out infinite;transition:transform .25s cubic-bezier(.3,1.4,.5,1)}
.film-big i{width:clamp(42px,7.4cqw,68px);aspect-ratio:1;border-radius:50%;background:var(--ink);color:var(--yellow);display:grid;place-items:center}
.film-big i svg{width:42%;height:42%;margin-left:8%}
.film-big small{font-size:.72em;font-weight:600;opacity:.6;font-variant-numeric:tabular-nums;margin-left:-.2em}
.film-stage:hover .film-big,.film-big:focus-visible{transform:scale(1.05)}
@keyframes filmPulse{0%{box-shadow:0 0 0 0 rgba(255,225,77,.55),0 24px 50px -16px rgba(0,0,0,.7)}75%,100%{box-shadow:0 0 0 clamp(14px,3cqw,26px) rgba(255,225,77,0),0 24px 50px -16px rgba(0,0,0,.7)}}

/* paused (after the first play), loading, the close button */
.film-mid{position:absolute;left:50%;top:50%;z-index:2;width:clamp(56px,10cqw,84px);aspect-ratio:1;margin:0;transform:translate(-50%,-50%) scale(.8);border:0;border-radius:50%;
  background:var(--yellow);color:var(--ink);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;box-shadow:0 20px 40px -14px rgba(0,0,0,.7);
  transition:opacity .2s,transform .25s cubic-bezier(.3,1.4,.5,1),visibility 0s .2s}
.film-mid svg{width:40%;height:40%;margin-left:8%}
.film.started.paused:not(.ended) .film-mid{opacity:1;visibility:visible;transform:translate(-50%,-50%);transition:opacity .2s,transform .25s cubic-bezier(.3,1.4,.5,1)}
.film-spin{position:absolute;left:50%;top:50%;z-index:2;width:54px;height:54px;margin:-27px 0 0 -27px;border-radius:50%;border:4px solid rgba(255,255,255,.25);border-top-color:var(--yellow);opacity:0;transition:opacity .2s;pointer-events:none;animation:filmSpin .8s linear infinite}
.film.waiting:not(.paused) .film-spin{opacity:1;transition-delay:.25s}
@keyframes filmSpin{to{transform:rotate(360deg)}}
.film-x{position:absolute;top:clamp(8px,1.6cqw,16px);right:clamp(8px,1.6cqw,16px);z-index:5;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(13,15,20,.62);color:#fff;display:grid;place-items:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .25s,background .15s,visibility 0s .25s}
.film-x svg{width:20px;height:20px}
.film-x:hover{background:var(--ink)}
.theater .film-x{opacity:1;visibility:visible;transition:opacity .25s .3s,background .15s}
.film.playing.still .film-x{opacity:0;transition:opacity .4s}
.film-stage:fullscreen .film-x{display:none}

/* end card */
.film-end{position:absolute;inset:0;z-index:4;display:grid;place-items:center;align-content:center;gap:clamp(14px,2.6cqw,26px);padding:20px;text-align:center;
  background:rgba(13,15,20,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s .45s;cursor:default}
.film.ended .film-end{opacity:1;visibility:visible;transition:opacity .45s}
.film-end h3{color:#fff;font-size:clamp(24px,5cqw,54px);font-weight:800;max-width:16ch}
.film-end .row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.film-end .btn{display:inline-flex;align-items:center;gap:8px;font-size:clamp(14px,1.8cqw,17px)}
.film-end .btn.ghost{background:rgba(255,255,255,.12);color:#fff}.film-end .btn.ghost:hover{background:rgba(255,255,255,.2)}
.film-end .btn svg{width:18px;height:18px}

/* controls: under the frame, shown once the film has started */
.film-bar{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--ease,ease),opacity .3s}
.film-bar>div{overflow:hidden;min-height:0}
.film.started .film-bar{grid-template-rows:1fr;opacity:1}
.film.started .film-bar>div{animation:filmOpen 0s .5s forwards}
@keyframes filmOpen{to{overflow:visible}}
.film-scrub{position:relative;height:26px;margin-top:8px;display:flex;align-items:center;cursor:pointer;touch-action:none;outline:0}
.film-segs{display:flex;gap:3px;width:100%;height:5px;transition:height .15s}
.film-scrub:hover .film-segs,.film-scrub.drag .film-segs,.film-scrub:focus-visible .film-segs{height:9px}
.film-segs i{position:relative;height:100%;min-width:2px;background:rgba(255,255,255,.16);border-radius:3px;overflow:hidden}
.film-segs b{position:absolute;inset:0 auto 0 0;width:0}
.film-segs .buf{background:rgba(255,255,255,.2)}
.film-segs .fill{background:var(--yellow)}
.film-segs i.hov{background:rgba(255,255,255,.3)}
.film-knob{position:absolute;top:50%;left:0;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;background:var(--yellow);box-shadow:0 0 0 5px rgba(255,225,77,.22);transform:scale(0);transition:transform .15s;pointer-events:none}
.film-scrub:hover .film-knob,.film-scrub.drag .film-knob,.film-scrub:focus-visible .film-knob{transform:scale(1)}
.film-tip{position:absolute;bottom:30px;left:0;transform:translateX(-50%);background:#fff;color:var(--ink);border-radius:10px;padding:7px 11px;font-size:13px;line-height:1.2;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .12s;box-shadow:0 12px 30px -10px rgba(0,0,0,.6);z-index:2}
.film-tip b{font-weight:700;margin-right:7px}.film-tip span{color:var(--soft);font-variant-numeric:tabular-nums}
.film-scrub:hover .film-tip,.film-scrub.drag .film-tip{opacity:1}
.film-row{display:flex;align-items:center;gap:4px;padding:2px 0 0;min-width:0}
.film-row button{width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:background .15s,color .15s}
.film-row button:hover{background:rgba(255,255,255,.1)}
.film-row svg{width:22px;height:22px}
.film-row .film-pp{background:var(--yellow);color:var(--ink);margin-right:6px}.film-row .film-pp:hover{background:#ffd91a}
.film-row .film-pp svg{width:18px;height:18px}
.film-time{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap;margin-right:4px}
.film-time span{color:#8a909b}
.film-now{font-size:14px;color:#c9ced6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.film-now::before{content:"·";margin:0 8px 0 4px;color:#5c6370}
.film-row .sp{flex:1}
.film-row .film-speed{width:auto;min-width:44px;padding:0 10px;border-radius:99px;font:700 13px var(--body);font-variant-numeric:tabular-nums}
.film-row .film-speed.fast{color:var(--yellow)}

/* chapters: a strip under the controls while the film is large */
.film-rail{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;max-height:0;opacity:0;margin-top:0;padding:0 2px;scroll-padding:0 40px;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);
  transition:max-height var(--morph,.7s) var(--ease,ease),opacity .35s,margin var(--morph,.7s) var(--ease,ease)}
.film-rail::-webkit-scrollbar{display:none}
.theater .film-rail{max-height:60px;opacity:1;margin-top:10px}
.film-rail button{flex:none;display:flex;align-items:center;gap:9px;padding:8px 15px 8px 8px;border-radius:99px;border:0;background:rgba(255,255,255,.07);color:#c9ced6;
  font:600 14px var(--body);cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.film-rail button em{font-style:normal;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;color:#8a909b;background:rgba(255,255,255,.08);border-radius:99px;padding:3px 8px}
.film-rail button:hover{background:rgba(255,255,255,.14);color:#fff}
.film-rail button.on{background:var(--yellow);color:var(--ink)}
.film-rail button.on em{background:rgba(13,15,20,.12);color:var(--ink)}
.film-rail button.done:not(.on) em{color:var(--yellow)}

/* theater */
.filmband.theater{margin-inline:calc(50% - var(--vw,100vw) / 2 + 16px);padding:20px 20px 16px;border-radius:28px}
.theater .filmrow{gap:0}
.theater .filmcopy{flex-grow:0;opacity:0;overflow:hidden;pointer-events:none}
.theater .film{flex-grow:1}
.nomotion,.nomotion *{transition:none!important}

@media(max-width:900px){
  .filmrow{flex-direction:column;align-items:stretch;gap:28px}
  .filmcopy,.film{flex:none}
  .film{max-width:none;width:100%}
  .filmrow.rev .film{order:0}
  .ask{font-size:15.5px;padding:12px 14px 12px 16px}
  .filmband.theater{margin-inline:calc(50% - var(--vw,100vw) / 2);padding:10px 0 12px;border-radius:0}
  .theater .filmcopy{display:none}
  .theater .film-stage{border-radius:0;box-shadow:none}
  .theater .film{max-width:calc((100svh - 170px) * 16 / 9);margin-inline:auto}
  .theater .film-bar>div,.theater .film-rail{padding-inline:12px}
  .film-row button{width:44px;height:44px}
}
@container (max-width:460px){.film-big{padding-right:8px}.film-big b{display:none}}
@media(max-width:560px){.film-now,.film-row .film-prev,.film-row .film-next{display:none}.film-row{gap:2px}}
@media(prefers-reduced-motion:reduce){.filmband,.filmband *{transition:none!important;animation:none!important}}

/* a plain white card inside a dark band keeps dark text */
.band.ink .card:not([style*="background"]){color:var(--ink)}

/* ── mobile: bar, menu and the first screen ─────────────────────────────── */
@media(max-width:900px){
  .links{display:none}
  .navm{display:flex;align-items:center;gap:10px}
  .nav{position:sticky;top:0;z-index:40;height:62px;padding:0 16px;margin:0 -16px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);transition:box-shadow .2s}
  .nav.stuck{box-shadow:0 1px 0 var(--line)}
  .menu-open .nav{background:#fff;box-shadow:none}
  .logo{font-size:22px}
  html.menu-open{overflow:hidden}
  .menu{display:flex;flex-direction:column;gap:22px;position:fixed;z-index:39;left:0;right:0;top:62px;bottom:0;background:#fff;padding:14px 16px calc(18px + env(safe-area-inset-bottom));overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .22s,transform .3s cubic-bezier(.2,.9,.3,1),visibility 0s .3s}
  .menu-open .menu{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .3s cubic-bezier(.2,.9,.3,1)}
  .mlabel{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin:0 4px 8px}
  .mgroup a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:18px;background:var(--mist);margin-bottom:8px;min-height:64px;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .35s cubic-bezier(.2,.9,.3,1)}
  .mgroup a b{display:block;font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15}
  .mgroup a small{display:block;font-size:13.5px;color:var(--soft);margin-top:2px}
  .mgroup a .ic{width:22px;height:22px;color:var(--soft)}
  .mgroup a.on{background:var(--blue-soft)}.mgroup a.on b,.mgroup a.on .ic{color:var(--blue)}
  .mgroup a:active{background:var(--line)}
  .menu-open .mgroup a{opacity:1;transform:none}
  .menu-open .mgroup:nth-child(1) a:nth-of-type(1){transition-delay:.04s}.menu-open .mgroup:nth-child(1) a:nth-of-type(2){transition-delay:.08s}.menu-open .mgroup:nth-child(1) a:nth-of-type(3){transition-delay:.12s}
  .menu-open .mgroup:nth-child(2) a:nth-of-type(1){transition-delay:.14s}.menu-open .mgroup:nth-child(2) a:nth-of-type(2){transition-delay:.18s}.menu-open .mgroup:nth-child(2) a:nth-of-type(3){transition-delay:.22s}.menu-open .mgroup:nth-child(2) a:nth-of-type(4){transition-delay:.26s}
  .mfoot{margin-top:auto;display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
  .mfoot .btn{text-align:center;padding:16px 10px}
  [id]{scroll-margin-top:74px}
  .tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-md)}
  .foot{gap:26px 20px;padding-top:28px}.foot>div:first-child{grid-column:1/-1}
  .faq details{padding:16px 18px}.faq summary{font-size:17px}
  .plan .big{font-size:44px}
  .card{padding:22px}
  .flow .card{grid-template-columns:36px 1fr;gap:14px}
  .phone{border-radius:28px;padding:20px}
}

/* The first screen fills exactly what the phone shows on arrival: the bar plus this block is one viewport. */
@media(max-width:640px){
  .m-only{display:revert}
  .d-only{display:none!important}
  .first{--above:62px;min-height:calc(100vh - var(--above));min-height:calc(100svh - var(--above));display:flex!important;flex-direction:column;gap:14px;padding:6px 0 calc(16px + env(safe-area-inset-bottom))!important;max-width:none;align-items:stretch!important}
  .hero.first>div:first-child{display:contents}
  .first .eyebrow{order:1;align-self:flex-start;margin:0;font-size:12.5px;padding:5px 12px}
  .first h1{order:2;margin:0;font-size:42px!important;font-size:clamp(34px,min(12.4vw,7.3svh),56px)!important;line-height:.98}
  .first .lede{order:3;margin:0;font-size:16px;font-size:clamp(15px,2.5svh,17.5px);line-height:1.45;max-width:none}
  .first .fvis,.first .phone{order:4;margin:auto 0}
  .first .cta{order:5;margin-top:auto;display:grid;gap:4px}
  .first .cta .btn{width:100%;text-align:center;padding:16px 20px;font-size:17px}
  .first .cta .btn.ghost{background:transparent;color:var(--ink);padding:10px;font-size:15px}
  .first .cta .btn.ghost:not(.watch)::after{content:" \2193";color:var(--blue)}
  .first .trust{order:6;margin:0;justify-content:center;gap:4px 14px;font-size:12.5px;text-align:center}

  .page-hero.first h1{font-size:36px!important;font-size:clamp(30px,min(10vw,5.7svh),46px)!important;line-height:1}
  .menu-open .navm .btn{display:none}

  /* the chat mock, sized for a phone */
  .first .phone{border-radius:26px;padding:14px}
  .first .bubble{font-size:14.5px;padding:11px 14px;margin-bottom:8px;line-height:1.38}
  .first .bubble.q{margin-left:44px}
  .first .bubble:not(.q){margin-right:28px;border-bottom-left-radius:5px}
  .first .nodcard{display:none;padding:13px 15px;border-radius:18px;margin-top:2px}
  .first .nodcard .top{margin-bottom:6px;font-size:11px}
  .first .nodcard h3{font-size:18px;margin:0}
  .first .nodcard p,.first .nodcard .who{display:none}

  /* compact rows used as the first-screen picture on the plainer pages */
  .fvis{display:grid;gap:8px;list-style:none}
  .fvis>*{display:flex;align-items:center;gap:12px;background:var(--mist);border-radius:16px;padding:9px 14px;font-weight:600;font-size:15px;line-height:1.25}
  ol.fvis{gap:6px}ol.fvis>*{padding:7px 12px}
  .fvis .n{width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700;flex:none}
  .fvis .kico{width:36px;height:36px;border-radius:11px;margin:0;flex:none}.fvis .kico .ic{width:20px;height:20px}
  .fvis .r{margin-left:auto;font-family:var(--disp);font-weight:700;font-size:17px;white-space:nowrap}
  .fvis small{display:block;font-weight:400;color:var(--soft);font-size:13px}
  .fvis .hot{background:var(--blue);color:#fff}.fvis .hot small{color:#d5dbff}

  /* kit page: bullets, then the price and the button */
  .first .ticks{order:4;margin:auto 0!important;gap:9px}.first .ticks li{font-size:15px}
  .first .buy{order:5;position:static!important;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 16px;padding:14px 16px;margin-top:auto}
  .first .buy .chip{grid-column:1/-1;justify-self:start;margin:0 0 2px}
  .first .buy p{display:none}
  .first .buy .price{font-size:40px!important}
  .first .buy .btn{padding:16px 10px}

  /* arrival */
  .first .eyebrow,.first h1,.first .lede,.first .fvis,.first .phone,.first .ticks,.first .buy,.first .cta,.first .trust{animation:up .6s cubic-bezier(.2,.9,.3,1) both}
  .first h1{animation-delay:.05s}.first .lede{animation-delay:.11s}.first .fvis,.first .phone,.first .ticks{animation-delay:.18s}.first .cta,.first .buy{animation-delay:.26s}.first .trust{animation-delay:.32s}
  .first .phone>*{animation:pop .5s cubic-bezier(.3,1.4,.5,1) both}
  .first .phone>:nth-child(1){animation-delay:.45s}.first .phone>:nth-child(2){animation-delay:.95s}.first .phone>:nth-child(3){animation-delay:1.45s}
  .first .fvis>*{animation:up .5s cubic-bezier(.2,.9,.3,1) both}
  .first .fvis>:nth-child(1){animation-delay:.24s}.first .fvis>:nth-child(2){animation-delay:.3s}.first .fvis>:nth-child(3){animation-delay:.36s}.first .fvis>:nth-child(4){animation-delay:.42s}.first .fvis>:nth-child(5){animation-delay:.48s}

  .band{padding:36px 18px;border-radius:26px;margin-bottom:18px}
  .band h2,.h2{font-size:31px;line-height:1.05}
  .close{padding:48px 20px}.close h2{font-size:36px}.close .btn{width:100%}
  .foot{grid-template-columns:1fr 1fr}
}
/* taller phones have room for the matter card */
@media(max-width:640px) and (min-height:700px){.first .nodcard{display:block}}
@media(max-width:640px) and (min-height:800px){.first .nodcard .who{display:flex;margin-top:10px;padding-top:10px}.first .phone{padding:16px}}
/* short phones: keep the headline and the button, trim the rest */
@media(max-width:640px) and (max-height:590px){
  .first{gap:10px}
  .first .eyebrow{display:none}
  .first .trust{display:none}
  .first .fvis>*{padding:8px 12px;font-size:14px}.first .fvis small{display:none}
}
@media(max-width:640px) and (max-height:720px){.first .ticks li:nth-child(n+4){display:none}}
@media(max-width:640px) and (max-height:520px){.first .bubble.q{display:none}.first .fvis>:nth-child(n+4){display:none}}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.first *,.first{animation:none!important}.menu,.mgroup a,.burger i{transition:none!important}html{scroll-behavior:auto}}
@media(max-width:640px) and (max-height:690px){.page-hero.first .cta .btn.ghost{display:none}}
@media(max-width:370px){.first{gap:11px}.first .phone{padding:12px}.first .bubble{margin-bottom:6px}}
.foot a.logo{display:flex;color:var(--ink)}
/* the fee table reads as stacked cards on a phone */
@media(max-width:640px){
  .tbl thead,.tbl tr:has(th){display:none}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl tr{padding:16px 18px;border-bottom:1px solid var(--line)}.tbl tr:last-child{border-bottom:0}
  .tbl td{padding:0!important;border:0;font-size:15px}
  .tbl td:first-child{font-family:var(--disp);font-weight:700;font-size:19px;margin-bottom:2px}
  .tbl td:nth-child(2){color:var(--blue);font-weight:600;margin-bottom:6px}
  .tbl td:nth-child(3){color:var(--soft)}
}


/* ── desktop: the bar stays with you ──────────────────────────────────────
   Sticky at the top. Airy and transparent over the hero; after the first few pixels (.stuck, set in site.js) it
   tightens, the logo steps down a size, and a frosted full-width background with a hairline comes in behind it.
   While a film plays large (html.film-theater) the bar slides out of the way and returns when the film closes. */
html{overflow-x:clip}
@media(min-width:901px){
  .nav{position:sticky;top:0;z-index:40;padding:18px 0;transition:padding .25s ease,transform .35s cubic-bezier(.65,0,.35,1)}
  .nav::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);right:calc(50% - 50vw);background:rgba(255,255,255,0);box-shadow:0 1px 0 rgba(232,234,238,0);transition:background .25s,box-shadow .25s}
  .nav.stuck{padding:10px 0}
  .nav.stuck::before{background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.6) blur(16px);backdrop-filter:saturate(1.6) blur(16px);box-shadow:0 1px 0 var(--line)}
  .nav .logo{transition:font-size .25s ease}
  .nav.stuck .logo{font-size:21px}
  [id]{scroll-margin-top:84px}
}
.film-theater .nav{transform:translateY(-110%);transition:transform .35s cubic-bezier(.65,0,.35,1)}
@media(prefers-reduced-motion:reduce){.nav,.nav::before,.nav .logo{transition:none!important}}