/* Layout v2: floating pill nav, giant-wordmark hero, one pinned phone that changes per chapter, bento, big zeros.
   Colours/theme tokens come from assistant.css (dark + light). */

/* floating pill nav (replaces the old sticky bar) */
.top{display:none}
.nav{position:fixed;z-index:40;top:12px;left:0;right:0;pointer-events:none}
.navin{pointer-events:auto;width:min(1120px,100% - 24px);margin-inline:auto;display:flex;align-items:center;gap:14px;padding:8px 8px 8px 20px;border-radius:99px;background:color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid var(--line);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);transition:background .3s,box-shadow .3s}
.nav.scrolled .navin{background:color-mix(in srgb,var(--bg) 86%,transparent);box-shadow:0 10px 40px rgba(0,0,0,.28)}
.nav nav{margin:0 auto;display:flex;gap:2px}
.nav nav a{white-space:nowrap;text-decoration:none;font-weight:500;font-size:14.5px;color:var(--dim);padding:9px 15px;border-radius:99px;transition:background .2s,color .2s}
.nav nav a:hover{background:var(--hi);color:var(--text)}
.nav nav a.on{color:var(--text);background:var(--hi)}
.navcta{flex:none;text-decoration:none;background:var(--btn);color:var(--btnfg);font:600 14.5px Roboto;border-radius:99px;padding:10px 20px;transition:filter .2s}
.navcta:hover{filter:brightness(1.1)}
@media(max-width:900px){.nav nav{display:none}.navin{justify-content:space-between}}

/* hero */
.hero2{padding:clamp(104px,13vw,150px) 0 0;text-align:center;overflow:hidden}
.hero2 .pill{background:var(--hi)}
.hero2 h1{font:900 clamp(37px,8.8vw,128px)/.98 Roboto;letter-spacing:-.045em;margin:26px 0 22px}
.hero2 .lede{margin-inline:auto;max-width:36em}
.hero2 .acts{justify-content:center;margin-top:30px}
.hero2 .sub{margin-top:14px}
.stage{position:relative;margin-top:clamp(28px,4vw,56px);height:clamp(480px,58vw,690px);overflow:hidden;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
.giant{position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(1240px,104vw);height:auto;fill:url(#wmg);stroke:var(--line);stroke-width:.7;stroke-linejoin:round;animation:wmin 1.6s .2s cubic-bezier(.3,.7,.2,1) both}
.hero-ph{position:absolute;left:50%;top:clamp(110px,24%,210px);transform:translateX(-50%);width:min(360px,88vw);text-align:left}
.hint.c{text-align:center;margin:6px 0 0;padding-bottom:10px}

/* story */
.story{padding-top:clamp(40px,6vw,80px)}
.story-h{max-width:22em;margin-bottom:clamp(8px,2vw,24px)}
.story-h h2{font:900 clamp(32px,5.2vw,64px)/1.03 Roboto;letter-spacing:-.035em;margin:14px 0 0}
.story-grid{display:grid;grid-template-columns:minmax(300px,360px) 1fr;gap:clamp(36px,8vw,120px);align-items:start}
.pin{position:sticky;top:max(92px,calc(50vh - 340px))}
.phone.dev{display:block;position:relative;overflow:hidden;padding:0;height:660px;width:100%;max-width:360px;margin:0}
.scr{position:absolute;inset:0;padding:18px 14px;display:grid;align-content:start;gap:11px;opacity:0;transform:translateY(18px) scale(.985);transition:opacity .5s,transform .5s;pointer-events:none}
.scr.on{opacity:1;transform:none;pointer-events:auto}
.shadeScr{background:var(--shadebg)}
.shadeScr .ph-top{padding-bottom:6px}
.chapters{padding-bottom:6vh}
.ch{min-height:80vh;display:flex;flex-direction:column;justify-content:center;max-width:34em;opacity:.3;transition:opacity .5s}
.ch.on{opacity:1}
.ch h2{font:900 clamp(30px,4.2vw,56px)/1.04 Roboto;letter-spacing:-.035em;margin:14px 0 18px}
.ch p{color:var(--dim);font-size:clamp(17px,1.7vw,20px);margin:0 0 14px}
.ch p strong{color:var(--text);font-weight:500}
.ch .hint{font-size:14px;color:var(--faint)}
.ch .pts{margin-top:8px}
.phone.dev.mob{display:none}
@media(max-width:900px){
  .story-grid{grid-template-columns:1fr}
  .pin{display:none}
  .ch{min-height:0;opacity:1;padding:clamp(28px,6vw,44px) 0;max-width:none}
  .phone.dev.mob{display:block;height:auto;max-width:360px;margin:22px auto 0}
  .mob .scr{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto;transition:none;min-height:0;padding-bottom:22px}
  .mob .radar{margin-bottom:0}
}

/* screens */
.t.sm{font-size:19px!important;letter-spacing:0!important}
.scr .radar{padding:0;background:none;display:block}
.scr .rd{width:100%;max-width:300px}
.rd .pin2{position:absolute;inset:0;margin:auto;width:28px;height:28px;color:var(--cc)}
.rd .pin2 svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.scr .pl{position:relative;--cc:var(--c);opacity:.32;animation:plin 8s infinite;background:linear-gradient(135deg,var(--ntwash),transparent)}
@media(prefers-color-scheme:light){.scr .pl{--cc:var(--cl)}}
.vlock{display:flex;align-items:center;gap:14px;padding:18px 16px;background:linear-gradient(135deg,var(--wash),var(--bg) 95%)}
.vlock svg{width:34px;height:34px;fill:none;stroke:var(--acc);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vlock b{display:block;font:700 18px/1.2 Roboto}
.vlock span{font-size:13.5px;color:var(--dim)}
@property --p{syntax:"<percentage>";initial-value:100%;inherits:false}
@keyframes cd{to{--p:0%}}
.code .ring{margin-left:auto;flex:none;width:30px;height:30px;border-radius:50%;background:conic-gradient(var(--cc) var(--p),color-mix(in srgb,var(--cc) 22%,transparent) 0);-webkit-mask:radial-gradient(farthest-side,transparent 58%,#000 62%);mask:radial-gradient(farthest-side,transparent 58%,#000 62%);animation:cd 18s linear infinite}
.code b{letter-spacing:.06em}
.scr .tiles{margin-bottom:0}
.scr .result{min-height:84px;margin-top:2px}
.scr .bar{margin-top:0}

/* bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.bento .b3{grid-column:span 3}.bento .b2{grid-column:span 2}
.bento .fc{padding:clamp(24px,3vw,34px)}
.bento .b3 p{font-size:17px;max-width:30em}
@media(max-width:900px){.bento .b3,.bento .b2{grid-column:span 3}}
@media(max-width:600px){.bento .b3,.bento .b2{grid-column:span 6}}

/* the big zeros */
.zeros{padding:clamp(26px,4.5vw,56px);display:grid;grid-template-columns:1.5fr repeat(4,1fr);align-items:end;gap:6px;background:linear-gradient(135deg,var(--wash),var(--bg) 96%)}
.zeros .z0 small{display:block;font:500 13px/1 Roboto;letter-spacing:.06em;color:var(--dim);text-transform:uppercase}
.zeros .z0 b{display:block;font:900 clamp(26px,3.6vw,46px)/1.05 Roboto;letter-spacing:-.03em;margin-top:14px}
.zeros .z{text-align:center;border-left:1px solid var(--line);padding:0 4px}
.zeros .z b{display:block;font:900 clamp(64px,12vw,170px)/.9 Roboto;letter-spacing:-.05em;font-variant-numeric:tabular-nums;min-height:.9em}
.zeros .z span{font-size:clamp(14px,1.5vw,18px);color:var(--dim)}
@media(max-width:820px){.zeros{grid-template-columns:1fr 1fr;gap:26px 0}.zeros .z0{grid-column:1/-1}.zeros .z:nth-of-type(even){border-left:0}.zeros .z b{font-size:clamp(64px,22vw,110px)}}

.cta h2{font-weight:900}