/* ------------------------------------------------------------------
   base.css — structure shared by every design language.
   Colour, type and shape all come from the theme file through custom
   properties; nothing here names a colour or a typeface.
   Surfaces: default (--bg), .alt (--bg-alt) and .inv (inverted). A
   section re-points --fg/--fg-2/--fg-3/--line/--acc/--surface, so
   components and canvases read the right palette wherever they sit.
   ------------------------------------------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ overflow-x:clip; }
html{ background:var(--inv-bg); }
body{
  margin:0; --surface:var(--bg); --panel-c:var(--panel);
  background:var(--bg); color:var(--fg); font-family:var(--sans);
  font-size:17px; line-height:1.55; letter-spacing:var(--body-track);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
p,h1,h2,h3,figure,ol{ margin:0; }
h1,h2,h3{ font-weight:inherit; }
::selection{ background:var(--fg); color:var(--surface); }
a:focus-visible, button:focus-visible, input:focus-visible{ outline:1.5px solid currentColor; outline-offset:4px; }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

.wrap{ max-width:var(--page); margin:0 auto; padding-inline:var(--gutter); }
.inv{
  --fg:var(--inv-fg); --fg-2:var(--inv-fg-2); --fg-3:var(--inv-fg-3); --line:var(--inv-line); --acc:var(--inv-acc);
  --surface:var(--inv-bg); --panel-c:var(--inv-panel); background:var(--inv-bg); color:var(--fg);
}
.alt{ --surface:var(--bg-alt); background:var(--bg-alt); }

/* the display face — whatever the theme says it is */
.display, .h2, .sub, .quote, .cta h2, .law .n, .law h3, .csteps b, .trust h3, .vs-head h3, .gap-num, .sentence{
  font-family:var(--display); font-weight:var(--display-weight); text-transform:var(--display-case);
  letter-spacing:var(--display-track); font-stretch:var(--display-stretch);
}
.label{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); }
.h2{ font-size:var(--h2); line-height:var(--h2-lh); text-wrap:balance; }
.lead{ font-size:clamp(17px, 1.35vw, 19px); color:var(--fg-2); max-width:44ch; text-wrap:pretty; }

/* editorial grid: section index in the margin, content to the right */
.sect{ padding-block:clamp(96px, 12vw, 168px); border-top:var(--sect-rule) solid var(--sect-rule-c, var(--line)); }
.grid{ display:grid; grid-template-columns:repeat(12, 1fr); column-gap:24px; }
.idx{ grid-column:1 / 4; padding-top:.7em; }
.body{ grid-column:4 / 13; }
.body .lead{ margin-top:28px; }
@media (max-width:900px){ .idx, .body{ grid-column:1 / -1; } .idx{ padding:0 0 22px; } }

/* reveal: headings unmask, everything else settles */
.rv{ clip-path:inset(0 0 100% 0); transform:translateY(.35em); transition:clip-path 1.1s var(--ease), transform 1.1s var(--ease); }
.rv.in{ clip-path:inset(-20% -5% -25% -5%); transform:none; }
.fd{ opacity:0; transform:translateY(16px); transition:opacity 1s var(--ease) .12s, transform 1s var(--ease) .12s; }
.fd.in{ opacity:1; transform:none; }

/* buttons */
.btn{
  display:inline-flex; align-items:center; gap:10px; height:46px; padding:0 22px; border-radius:var(--btn-radius); border:0; cursor:pointer;
  font:var(--btn-font); letter-spacing:var(--btn-track); text-transform:var(--btn-case); text-decoration:none; white-space:nowrap;
  transition:background .3s var(--ease), color .3s var(--ease), box-shadow .3s var(--ease), opacity .3s var(--ease);
}
.btn .arr{ display:inline-block; transition:transform .3s var(--ease); }
.btn:hover .arr{ transform:translateX(3px); }
.btn-solid{ background:var(--fg); color:var(--surface); }
.btn-solid:hover{ opacity:.88; }
.btn-line{ background:transparent; color:var(--fg); box-shadow:inset 0 0 0 1px var(--line); }
.btn-line:hover{ box-shadow:inset 0 0 0 1px var(--fg-2); }

/* nav: inverts over whatever it sits on */
.nav{ position:fixed; inset:0 0 auto; z-index:50; mix-blend-mode:difference; color:#fff; pointer-events:none; }
.nav .wrap{ height:72px; display:flex; align-items:center; justify-content:space-between; padding-top:env(safe-area-inset-top,0px); }
.nav a{ pointer-events:auto; text-decoration:none; }
.nav .brand img{ height:19px; width:auto; }
.nav-links{ display:flex; gap:34px; font-size:14px; font-family:var(--nav-font, var(--sans)); text-transform:var(--nav-case, none); letter-spacing:var(--nav-track, 0); }
.nav-links a{ opacity:.72; transition:opacity .2s; }
.nav-links a:hover{ opacity:1; }
.nav .cta{ font-size:14px; padding:9px 16px; border-radius:var(--btn-radius); box-shadow:inset 0 0 0 1px rgba(255,255,255,.5); transition:box-shadow .2s; font-family:var(--nav-font, var(--sans)); text-transform:var(--nav-case, none); letter-spacing:var(--nav-track, 0); }
.nav .cta:hover{ box-shadow:inset 0 0 0 1px #fff; }
/* centre dropdown. The nav blends by difference, so the menu is outlined text, never a filled panel */
.nav .wrap{ position:relative; }
.nav-mid{ position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); display:flex; align-items:center; gap:6px; font-size:14px; font-family:var(--nav-font, var(--sans)); }
.nav-link{ padding:9px 12px; border-radius:999px; opacity:.72; transition:opacity .2s; }
.nav-link:hover{ opacity:1; }
.dd{ position:relative; pointer-events:auto; }
@media (max-width:640px){   /* no room for a centre group beside the logo and button: it becomes a second row */
  .nav .wrap{ height:auto; flex-wrap:wrap; padding-block:calc(14px + env(safe-area-inset-top,0px)) 2px; }
  .nav-mid{ position:static; transform:none; order:3; width:100%; justify-content:center; }
}
.dd-btn{ display:flex; align-items:center; gap:6px; padding:9px 12px; border:0; border-radius:999px; background:none; color:inherit; font:inherit; cursor:pointer; opacity:.72; transition:opacity .2s; }
.dd:hover .dd-btn, .dd:focus-within .dd-btn{ opacity:1; }
.dd-menu{ position:absolute; left:50%; top:100%; padding-top:8px; transform:translate(-50%, -4px); opacity:0; visibility:hidden; transition:opacity .2s, transform .25s var(--ease), visibility 0s .25s; }
.dd:hover .dd-menu, .dd:focus-within .dd-menu{ opacity:1; visibility:visible; transform:translate(-50%, 0); transition:opacity .2s, transform .25s var(--ease); }
.dd-menu a{ display:block; white-space:nowrap; padding:9px 16px; border-radius:12px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.45); transition:box-shadow .2s; }
.dd-menu a:hover, .dd-menu a:focus-visible{ box-shadow:inset 0 0 0 1px #fff; }
@media (max-width:820px){ .nav-links{ display:none; } }

/* scroll stages */
.stage{ position:relative; }
.sticky{ position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; }

/* ---------------- HERO ---------------- */
#hero{ min-height:100vh; min-height:100svh; display:flex; align-items:center; }
.hero-copy{ width:100%; display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(28px, 3.4vw, 44px); padding-block:120px 96px; }
.hero h1{ font-size:var(--h1); line-height:var(--h1-lh); }
.hero h1 em{ font-style:var(--em-style); color:var(--em-color, inherit); }
.hero h1.long{ font-size:var(--h1-long); line-height:var(--h1-long-lh); text-wrap:balance; }
/* catch-up: a lagging accent copy of the headline slides in from behind and dissolves into it (site.js) */
.hero h1:has(.hl-ghost){ display:grid; }
.hl-main, .hl-ghost{ grid-area:1 / 1; }
.hl-main{ position:relative; z-index:1; }
.hl-ghost, .hl-ghost *{ color:var(--acc) !important; }
.hl-main{ animation:hl-land 1.6s var(--ease) both; }
.hl-ghost{ user-select:none; pointer-events:none; animation:hl-catch 1.6s var(--ease) both; }
@keyframes hl-land{ 0%{ opacity:.1; } 50%{ opacity:.3; } 100%{ opacity:1; } }
@keyframes hl-catch{
  0%{ opacity:0; transform:translateX(-.5em); }
  10%{ opacity:.8; }
  70%{ opacity:.55; }
  100%{ opacity:0; transform:none; }
}
/* until site.js starts it; shown anyway after 2.5s if the script never runs */
.hl-wait #headline{ opacity:0; animation:hl-show 0s 2.5s forwards; }
@keyframes hl-show{ to{ opacity:1; } }
.hero h1 .h1-sub{ display:block; margin-top:.3em; font-size:max(.36em, 1.7rem); line-height:1.05; color:var(--fg-2); letter-spacing:-0.03em; }
.hero-side{ display:flex; flex-direction:column; align-items:center; }
.hero-side p{ color:var(--fg-2); font-size:clamp(17px, 1.35vw, 20px); max-width:none; margin-bottom:30px; text-wrap:balance; }
.hero-side .actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }

/* ---------------- 01 THE GAP ---------------- */
#problem{ padding-bottom:0; }
/* centred under the hero; the boxes take the full width */
.lds{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.lds .lead{ margin-top:28px; max-width:52ch; text-wrap:balance; }
.lds .pillars{ width:100%; text-align:left; }
/* what a Living Decision System does — three boxes ahead of the lag chart */
.pillars{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:56px 0 clamp(48px, 6vw, 80px); }
.pillars li{ position:relative; display:flex; flex-direction:column; gap:10px; padding:24px 24px 26px; border-radius:var(--radius); background:var(--panel-c); box-shadow:inset 0 0 0 1px var(--panel-line, var(--line)); }
.pillars li::before{ content:""; position:absolute; left:24px; right:24px; top:0; height:1.5px; background:var(--acc); }
.pillars .label{ color:var(--acc); }
.pillars h3{ font-family:var(--display); font-weight:var(--display-weight); letter-spacing:var(--display-track); font-size:clamp(22px, 1.9vw, 27px); line-height:1.08; text-wrap:balance; }
.pillars p{ font-size:15px; line-height:1.5; color:var(--fg-2); }
@media (max-width:760px){ .pillars{ grid-template-columns:1fr; } }
#gap{ height:240vh; }
#gap .sticky{ display:flex; align-items:center; }
.gapw{ width:100%; }
/* the lag counter sits inside the chart, in a band the lines keep clear of (width set from site.js) */
.gap-hud{ position:absolute; left:0; top:22px; z-index:1; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:8px 20px; pointer-events:none; }
.gap-num{ font-size:clamp(56px, 7vw, 104px); line-height:.85; font-variant-numeric:tabular-nums; transition:color .5s var(--ease); }
.gap-num small{ font-family:var(--mono); font-weight:400; font-stretch:100%; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); margin-left:10px; vertical-align:.6em; }
.gap-num.zero{ color:var(--acc); }
.gap-stage{ position:relative; height:clamp(400px, 62vh, 600px); border-top:1px solid var(--line); }
#gapCv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.gap-foot{ display:flex; justify-content:space-between; gap:16px; margin-top:12px; font-size:15px; color:var(--fg-2); }

/* ---------------- 02 THE CAUSE ---------------- */
.sub{ font-size:clamp(28px, 3vw, 42px); line-height:1.02; margin-bottom:22px; }
/* #cause keeps its bottom padding now that the rounding and stale panels are off the page */
#rounding{ height:260vh; }
#rounding .sticky{ display:flex; align-items:center; }
.round{ width:100%; }
.round-head, .round-foot{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.round-head{ padding-bottom:14px; border-bottom:1px solid var(--line); }
.round-head #rState{ color:var(--fg); }
.round-stage{ position:relative; height:clamp(340px, 58vh, 560px); margin-top:8px; }
#roundCv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.round-foot{ margin-top:14px; font-size:15px; color:var(--fg-2); }

.stale-sect{ padding-block:clamp(40px, 6vw, 80px) clamp(96px, 12vw, 160px); }
.stale{ display:grid; grid-template-columns:1.3fr 1fr; background:var(--panel-c); box-shadow:0 0 0 1px var(--panel-line, var(--line)); border-radius:var(--radius); overflow:hidden; min-height:clamp(360px, 34vw, 460px); }
@media (max-width:760px){ .stale{ grid-template-columns:1fr; } }
.said{ padding:clamp(24px, 4vw, 56px); display:flex; flex-direction:column; justify-content:center; gap:18px; border-right:1px solid var(--line); }
@media (max-width:760px){ .said{ border-right:0; border-bottom:1px solid var(--line); } }
.sentence{ font-size:clamp(30px, 3.6vw, 52px); line-height:1.06; min-height:2.2em; }
.sentence .v{ position:relative; transition:color .4s; }
.sentence .v::after{ content:""; position:absolute; left:-2%; right:-2%; top:56%; height:1.5px; background:var(--fg-3); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--ease); }
.sentence.stale-now .v{ color:var(--fg-3); }
.sentence.stale-now .v::after{ transform:scaleX(1); }
.caret{ display:inline-block; width:.06em; height:.9em; background:var(--fg); vertical-align:-.08em; margin-left:.04em; animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.verdict{ min-height:1.4em; opacity:0; transition:opacity .4s; }
.verdict.on{ opacity:1; }
.verdict b{ color:var(--acc); font-weight:500; }
.live{ padding:clamp(20px, 3vw, 36px); display:flex; flex-direction:column; gap:14px; min-height:0; max-height:clamp(360px, 34vw, 460px); }
@media (max-width:760px){ .live{ max-height:320px; } }
.now{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.now .val{ font-family:var(--mono); font-size:clamp(28px, 3vw, 42px); color:var(--acc); font-variant-numeric:tabular-nums; }
.spark{ position:relative; height:64px; border-bottom:1px solid var(--line); }
.spark canvas{ position:absolute; inset:0; width:100%; height:100%; }
.log{ flex:1; min-height:0; overflow:hidden; font-family:var(--mono); font-size:11.5px; line-height:1.85; color:var(--fg-2); -webkit-mask-image:linear-gradient(#000 50%, transparent); mask-image:linear-gradient(#000 50%, transparent); }
.log div{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.log span{ color:var(--fg-3); margin-right:10px; }

/* ---------------- 03 THE MODEL ---------------- */
#model{ padding-bottom:0; }
#cascade{ height:460vh; }
#cascade .sticky{ display:flex; align-items:center; }
.cascade{ width:100%; align-items:center; }
.csteps{ grid-column:1 / 5; list-style:none; padding:0; }
.csteps li{ padding:14px 0; border-top:1px solid var(--line); color:var(--fg-3); transition:color .5s var(--ease); }
.csteps li b{ display:block; font-size:clamp(22px, 2vw, 28px); line-height:1.05; margin:6px 0 0; color:var(--fg-3); transition:color .5s var(--ease); }
.csteps li p{ font-size:14.5px; line-height:1.5; max-height:0; overflow:hidden; opacity:0; transition:max-height .6s var(--ease), opacity .5s var(--ease), margin .6s var(--ease); }
.csteps li.on b{ color:var(--fg); }
.csteps li.on .label{ color:var(--acc); }
.csteps li.on p{ max-height:8em; opacity:1; margin-top:8px; color:var(--fg-2); }
.csteps li.past b{ color:var(--fg-2); }
.cstage{ grid-column:5 / 13; position:relative; height:clamp(420px, 70vh, 600px); }
#cascadeCv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
@media (max-width:900px){
  .cascade{ display:flex; flex-direction:column-reverse; gap:12px; }
  .csteps, .cstage{ width:100%; }
  .cstage{ height:min(56svh, 470px); }
  .csteps li{ display:none; border-top:0; padding:0; }
  .csteps li.on{ display:block; }
}

/* ---------------- 04 THE OUTCOME ---------------- */
.laws{ display:grid; grid-template-columns:1fr 1fr; margin-top:72px; border-top:1px solid var(--line); }
.law{ padding:36px 0 0; display:grid; grid-template-columns:auto 1fr; column-gap:clamp(20px, 3vw, 48px); align-items:start; }
.law + .law{ padding-left:clamp(20px, 3vw, 48px); border-left:1px solid var(--line); }
.law .n{ font-size:clamp(150px, 17vw, 260px); line-height:.78; color:var(--law-n, var(--fg)); }
.law h3{ font-size:clamp(26px, 2.4vw, 34px); line-height:1.05; margin-bottom:12px; }
.law p{ color:var(--fg-2); font-size:15.5px; max-width:30ch; }
@media (max-width:760px){
  .laws{ grid-template-columns:1fr; }
  .law + .law{ padding-left:0; border-left:0; border-top:1px solid var(--line); margin-top:36px; }
}

/* ---------------- 05 AGENT0 ---------------- */
.shot{ position:relative; margin-top:72px; }
/* a drawn Agent0 session in the site's own type and palette. It plays in
   stages (.s1 trace, .s2 answer, .s3 chart + source); .hot marks the part
   the legend is pointing at. */
.session{ border-radius:var(--radius); background:var(--panel-c); box-shadow:0 0 0 1px var(--panel-line, var(--line)); overflow:hidden; }
.ses-bar{ display:flex; justify-content:space-between; gap:16px; padding:14px clamp(18px, 2.4vw, 28px); border-bottom:1px solid var(--line); }
.ses-live{ display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--acc); margin-right:10px; vertical-align:1px; box-shadow:0 0 0 4px color-mix(in srgb, var(--acc) 18%, transparent); }
.ses-grid{ display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 7fr); }
.ses-chat, .ses-canvas{ padding:clamp(20px, 2.6vw, 36px); display:flex; flex-direction:column; gap:clamp(20px, 2.2vw, 28px); }
.ses-chat{ border-right:1px solid var(--line); }
.ses-q{ align-self:flex-end; max-width:36ch; padding:12px 16px; border-radius:14px 14px 4px 14px; background:color-mix(in srgb, var(--fg) 7%, transparent); font-size:15px; line-height:1.45; }
.ses-trace{ list-style:none; padding:0; margin:10px 0 0; font:400 12.5px/1.5 var(--mono); color:var(--fg-3); display:grid; gap:6px; }
.ses-trace li{ padding-left:18px; position:relative; }
.ses-trace li::before{ content:""; position:absolute; left:2px; top:.6em; width:5px; height:5px; border-radius:50%; background:var(--fg-3); }
.ses-trace li.ok{ color:var(--fg-2); }
.ses-trace li.ok::before{ content:"✓"; background:none; top:0; left:0; width:auto; height:auto; color:var(--acc); }
.ses-a{ margin-top:10px; font-size:15.5px; line-height:1.55; color:var(--fg-2); max-width:40ch; }
.ses-a b{ font-weight:500; color:var(--fg); }
.ses-num{ font-family:var(--display); font-weight:var(--display-weight); letter-spacing:var(--display-track); font-size:clamp(64px, 7vw, 104px); line-height:.9; margin-top:12px; font-variant-numeric:tabular-nums; }
.ses-den{ font:400 12.5px var(--mono); color:var(--fg-3); margin-top:10px; }
.ses-chart{ position:relative; }
.ses-bars{ list-style:none; padding:0; margin:16px 0 0; display:grid; gap:9px; position:relative; }
.ses-bars li{ display:grid; grid-template-columns:8.5em 1fr 3.4em; align-items:center; gap:12px; font-size:13.5px; color:var(--fg-2); }
.ses-bars i{ position:relative; height:8px; border-radius:4px; background:linear-gradient(90deg, var(--acc) calc(var(--w) * 100%), color-mix(in srgb, var(--fg) 7%, transparent) 0); background-size:100% 100%; }
.ses-bars i::after{ content:""; position:absolute; left:calc(var(--avg) * 100%); top:-4px; bottom:-4px; width:1px; background:var(--fg-3); }
.ses-bars li:first-child i{ box-shadow:0 0 18px -4px color-mix(in srgb, var(--acc) 60%, transparent); }
.ses-bars b{ font:400 12.5px var(--mono); color:var(--fg); text-align:right; font-variant-numeric:tabular-nums; }
.ses-avg{ display:grid; grid-template-columns:8.5em 1fr 3.4em; gap:12px; margin-top:6px; font-size:13.5px; }
.ses-avg i{ position:relative; height:12px; }
.ses-avg em{ position:absolute; left:calc(var(--avg) * 100%); transform:translateX(-50%); font-style:normal; font-size:10px; white-space:nowrap; }
.ses-src{ display:inline-flex; align-items:center; gap:10px; max-width:100%; margin-top:18px; padding:7px 12px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line); font:400 12px var(--mono); color:var(--fg-2); }
.ses-src .label{ font-size:10px; color:var(--acc); white-space:nowrap; }
.ses-src-n{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media (max-width:860px){ .ses-grid{ grid-template-columns:minmax(0, 1fr); } .ses-chat{ border-right:0; border-bottom:1px solid var(--line); } }
@media (max-width:480px){ .ses-bars li{ grid-template-columns:7.2em 1fr 3.2em; gap:8px; font-size:12.5px; } .ses-avg{ grid-template-columns:7.2em 1fr 3.2em; gap:8px; font-size:12.5px; } .ses-bar p:last-child{ display:none; } }

/* staging: hidden until the session plays (only when JS has armed it) */
.session.arm .ses-trace li, .session.arm .ses-step[data-k="1"], .session.arm .ses-metric, .session.arm .ses-chart{ opacity:0; transform:translateY(8px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.session.arm .ses-bars i{ background:linear-gradient(90deg, var(--acc), var(--acc)) no-repeat 0 0 / 0% 100%, color-mix(in srgb, var(--fg) 7%, transparent); transition:background-size 1.2s var(--ease); }
.session.s3 .ses-bars i{ background-size:calc(var(--w) * 100%) 100%, 100% 100%; }
.session.s1 .ses-trace li{ opacity:1; transform:none; }
.session.s1 .ses-trace li:nth-child(2){ transition-delay:.45s; }
.session.s1 .ses-trace li:nth-child(3){ transition-delay:.9s; }
.session.s2 .ses-step[data-k="1"], .session.s2 .ses-metric, .session.s3 .ses-chart{ opacity:1; transform:none; }
.session.s3 .ses-bars li:nth-child(2) i{ transition-delay:.08s; } .session.s3 .ses-bars li:nth-child(3) i{ transition-delay:.16s; }
.session.s3 .ses-bars li:nth-child(4) i{ transition-delay:.24s; } .session.s3 .ses-bars li:nth-child(5) i{ transition-delay:.32s; } .session.s3 .ses-bars li:nth-child(6) i{ transition-delay:.4s; }

/* the part the legend points at */
.session [data-k]{ border-radius:12px; outline:1px solid transparent; outline-offset:12px; transition:outline-color .4s var(--ease), opacity .7s var(--ease), transform .7s var(--ease); }
.session [data-k] > .label{ transition:color .4s var(--ease); }
.session [data-k].hot{ outline-color:color-mix(in srgb, var(--acc) 55%, transparent); }
.session [data-k].hot > .label{ color:var(--acc); }
@media (max-width:480px){ .session [data-k]{ outline-offset:8px; } }
.legend{ list-style:none; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); margin-top:28px; }
.legend li{ padding:18px 20px 0 0; color:var(--fg-3); font-size:14.5px; transition:color .4s var(--ease); }
.legend li b{ display:block; font-weight:500; color:var(--fg-2); margin:8px 0 4px; transition:color .4s var(--ease); }
.legend li .label{ transition:color .4s var(--ease); }
.legend li.hot{ color:var(--fg-2); }
.legend li.hot b{ color:var(--fg); }
.legend li.hot .label{ color:var(--acc); }
@media (max-width:760px){ .legend{ grid-template-columns:1fr; } .legend li{ padding:16px 0; border-bottom:1px solid var(--line); } }
.fine{ margin-top:22px; font-size:12.5px; color:var(--fg-3); }
.vs{ margin-top:clamp(80px, 10vw, 140px); }
.vs-head{ display:grid; grid-template-columns:repeat(12, 1fr); column-gap:24px; }
.vs-head h3{ grid-column:4 / 13; font-size:clamp(30px, 3.4vw, 48px); line-height:1.02; text-wrap:balance; }
@media (max-width:900px){ .vs-head h3{ grid-column:1 / -1; } }
.vs table{ width:100%; border-collapse:collapse; margin-top:40px; font-size:15.5px; }
.vs th{ text-align:left; font:400 11px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); padding:0 0 14px; }
.vs th.us{ color:var(--acc); }
.vs td{ padding:16px 16px 16px 0; border-top:1px solid var(--line); vertical-align:top; }
.vs td:first-child{ color:var(--fg-3); width:25%; }
.vs td:nth-child(2){ color:var(--fg-3); width:33%; }
.vs td:last-child{ color:var(--fg); }
.vs .next{ font:400 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); border:1px solid var(--line); padding:2px 6px; margin-left:8px; vertical-align:2px; white-space:nowrap; }
@media (max-width:600px){ .vs td:nth-child(2), .vs th:nth-child(2){ display:none; } .vs td:first-child{ width:38%; } }

/* ---------------- 06 AUTONOMY ----------------
   Decision rights by ambiguity (x) and cost of being wrong (y); the bar
   in each quadrant is how much the agent does on its own. */
.matrix{ margin-top:56px; }
.mx-grid{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border-radius:var(--radius); overflow:visible; box-shadow:0 0 0 1px var(--line); margin-left:28px; margin-bottom:30px; }
.mx-q{ display:flex; flex-direction:column; gap:10px; padding:clamp(20px, 2.6vw, 32px); background:var(--surface); min-height:clamp(180px, 16vw, 220px); }
.mx-q:nth-child(1){ border-top-left-radius:var(--radius); }
.mx-q:nth-child(2){ border-top-right-radius:var(--radius); }
.mx-q:nth-child(3){ border-bottom-left-radius:var(--radius); }
.mx-q:nth-child(4){ border-bottom-right-radius:var(--radius); }
.mx-q h3{ font-family:var(--display); font-weight:var(--display-weight); letter-spacing:var(--display-track); font-size:clamp(22px, 2.1vw, 30px); line-height:1.05; }
.mx-q p{ font-size:15px; color:var(--fg-2); max-width:30ch; flex:1; }
.mx-bar{ position:relative; display:block; height:3px; border-radius:2px; background:var(--line); overflow:hidden; }
.mx-bar::after{ content:""; position:absolute; inset:0 auto 0 0; width:calc(var(--a) * 100%); background:var(--acc); transform:scaleX(0); transform-origin:left; transition:transform 1.4s var(--ease) .5s; }
.matrix.in .mx-bar::after{ transform:scaleX(1); }
.mx-ax{ position:absolute; font:400 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); white-space:nowrap; }
.mx-x{ left:0; bottom:-26px; }
.mx-y{ left:-14px; bottom:0; transform-origin:left bottom; transform:rotate(-90deg) translateY(0); }
@media (max-width:640px){ .mx-grid{ grid-template-columns:1fr; } .mx-q{ min-height:0; } .mx-q:nth-child(n){ border-radius:0; } .mx-q:first-child{ border-radius:var(--radius) var(--radius) 0 0; } .mx-q:nth-child(4){ border-radius:0 0 var(--radius) var(--radius); } .mx-ax{ display:none; } .mx-grid{ margin-left:0; margin-bottom:0; } }

/* ---------------- 07 TRUST ---------------- */
.trust{ display:grid; grid-template-columns:repeat(4, 1fr); margin-top:56px; border-top:1px solid var(--line); }
.trust div{ padding:22px 24px 0 0; }
.lds .trust{ width:100%; }
.lds .trust div{ padding:26px 16px 0; }
.lds .trust p{ margin-inline:auto; }
.trust h3{ font-size:26px; line-height:1.05; margin-bottom:10px; }
.trust p{ font-size:15px; color:var(--fg-2); max-width:26ch; }
@media (max-width:900px){ .trust{ grid-template-columns:1fr 1fr; row-gap:28px; } }
@media (max-width:520px){ .trust{ grid-template-columns:1fr; } }

/* ---------------- 08 PURPOSE ---------------- */
.quote{ font-size:clamp(2.2rem, 4.8vw, 4.4rem); line-height:1.04; text-wrap:balance; max-width:22ch; }
.quote em{ font-style:var(--em-style); color:var(--fg-3); }
.quote-by{ margin-top:36px; }

/* ---------------- CTA ---------------- */
.cta{ padding-block:clamp(110px, 14vw, 200px) clamp(80px, 9vw, 120px); }
.cta h2{ font-size:var(--cta-size); line-height:var(--h1-lh); max-width:15ch; text-wrap:balance; }
.cta .grid{ margin-top:56px; row-gap:28px; align-items:end; }
.cta .lead{ grid-column:1 / 6; }
.cta form{ grid-column:7 / 13; display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--fg-3); padding-bottom:10px; }
.cta input{ flex:1; min-width:0; background:transparent; border:0; color:var(--fg); font:400 18px var(--sans); padding:0; height:46px; }
.cta input::placeholder{ color:var(--fg-3); }
.cta input:focus-visible{ outline:0; }
.cta form:focus-within{ border-bottom-color:var(--fg); }
.cta .note{ grid-column:7 / 13; margin-top:-16px; }
@media (max-width:900px){ .cta .lead, .cta form, .cta .note{ grid-column:1 / -1; } .cta .note{ margin-top:0; } }

footer{ padding-block:40px calc(40px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line); }
.foot{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
.foot img{ height:18px; width:auto; opacity:.9; }
.foot nav{ display:flex; gap:24px; font-size:14px; color:var(--fg-2); }
.foot nav a{ text-decoration:none; }
.foot nav a:hover{ color:var(--fg); }

/* colour-variant toggle (review aid): recolours the whole page in place */
.review{ position:fixed; left:16px; top:calc(80px + env(safe-area-inset-top,0px)); z-index:60; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.variants{
  display:flex; align-items:center; gap:2px;
  padding:4px; border-radius:999px; background:rgba(16,18,22,.88); backdrop-filter:blur(10px); font:500 12px/1 system-ui, sans-serif; color:#bbb;
  box-shadow:0 6px 24px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.08);
}
.variants span{ padding:0 8px 0 10px; font:500 10px/1 ui-monospace, monospace; letter-spacing:.08em; text-transform:uppercase; color:#888; }
.variants button{ display:flex; align-items:center; gap:8px; padding:7px 12px 7px 9px; border:0; border-radius:999px; background:transparent; color:inherit; font:inherit; cursor:pointer; }
.variants button i{ width:12px; height:12px; border-radius:50%; margin-right:3px; }
.variants button:hover{ color:#fff; }
.variants button[aria-pressed="true"]{ background:#f2f2f2; color:#111; }
.heads button{ padding:7px 11px; font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce){
  .rv, .fd{ clip-path:none; opacity:1; transform:none; transition:none; }
}
@media (max-width:600px){ .review{ left:50%; transform:translateX(-50%); align-items:center; } .variants{ font-size:11px; } .variants button{ padding:7px 9px; } .variants span{ display:none; } }

/* ---------------- 02 MANY WORLDS, ONE SHADOW ----------------
   A real projection: the object morphs, the shadow on the wall never
   changes. Tags ride their 3D anchors (positioned from site.js). */
.worlds{ margin-top:56px; }
.worlds-art{
  position:relative; aspect-ratio:16 / 9; overflow:hidden; border-radius:var(--radius);
  background:radial-gradient(120% 90% at 70% 30%, color-mix(in srgb, var(--acc) 5%, var(--panel-c)) 0%, var(--panel-c) 70%);
  box-shadow:0 0 0 1px var(--panel-line, var(--line));
}
@media (max-width:700px){ .worlds-art{ aspect-ratio:4 / 5; } }
#worldsCv{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.w-tag{ position:absolute; left:0; top:0; white-space:nowrap; pointer-events:none; font:500 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-2); will-change:transform; }
.w-tag b{ font-weight:500; color:var(--fg); }
.w-tag.acc b{ color:var(--acc); }
.worlds-hud{ position:absolute; left:24px; right:24px; bottom:20px; display:flex; justify-content:space-between; align-items:flex-end; gap:16px; pointer-events:none; }
.worlds-name{ font-family:var(--display); font-weight:var(--display-weight); letter-spacing:var(--display-track); text-transform:var(--display-case); font-stretch:var(--display-stretch); font-size:clamp(22px, 2.6vw, 34px); line-height:1; }
.worlds-name small{ display:block; font:500 10.5px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--fg-3); margin-bottom:8px; }
.worlds-cap{ margin-top:16px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:15px; color:var(--fg-2); }