/* Vinci homepage concept — SVZ, 2026-09-18
   Type: Overpass Mono (signpost) + Crimson Text (book). Colour: neutrals for chrome,
   Vinci spectrum (Cool violet → Ambient magenta → Hot gold) reserved for physics
   and one accent. "If a slide is shouting, it isn't Vinci yet." */

@font-face{font-family:'Crimson Text';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/crimson-0.woff2) format('woff2')}
@font-face{font-family:'Crimson Text';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/crimson-1.woff2) format('woff2')}
@font-face{font-family:'Crimson Text';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/crimson-2.woff2) format('woff2')}
@font-face{font-family:'Overpass Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/overpass-3.woff2) format('woff2')}
@font-face{font-family:'Overpass Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/overpass-4.woff2) format('woff2')}
@font-face{font-family:'Overpass Mono';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/overpass-5.woff2) format('woff2')}
@font-face{font-family:'Overpass Mono';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/overpass-6.woff2) format('woff2')}

:root{
  /* Vinci supplied palette (response doc, 2026-09-13) */
  --cool:#5C08FD; --ambient:#ED1379; --hot:#FFC63A; --dark:#484848; --light:#E6E6E6;
  /* derived neutrals (design choices, not brand additions) */
  --bg:#0B0B0D; --bg-2:#111114; --bg-3:#16161A; --panel:#141417; --panel-2:#1A1A1F;
  --line:rgba(230,230,230,.10); --line-2:rgba(230,230,230,.18);
  --ink:#F1F0EC; --ink-2:#B9B8B3; --muted:#7E7D79; --faint:#55554F;
  --mono:'Overpass Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:'Crimson Text',Georgia,'Times New Roman',serif;
  --gutter:clamp(20px,5vw,80px); --max:1360px;
  --r:10px; --r-lg:16px;
  --ease:cubic-bezier(.2,.7,.2,1);

  /* canvas theme read by lib/scene.js */
  --plate-hi:44 44 52; --plate-lo:22 22 28; --plate-edge:150 150 165;
  --field-mode:lighter; --field-alpha:.66; --field-gamma:1.7;
  --plate-alpha:.42; --plate-alpha-depth:.16; --plate-edge-alpha:.30; --shadow-rgb:0 0 0;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--mono);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3{font-weight:400;margin:0}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--hot);color:#111}
:focus-visible{outline:2px solid var(--cool);outline-offset:4px;border-radius:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;top:8px;left:8px;z-index:100;padding:10px 14px;background:var(--ink);color:#111;transform:translateY(-200%)}
.skip:focus{transform:none}

.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#CFCEC9;display:flex;align-items:center;gap:10px}
.eyebrow.center{justify-content:center}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--hot);box-shadow:0 0 12px var(--hot)}
.lede{font-family:var(--serif);font-size:clamp(19px,1.5vw,23px);line-height:1.4;color:var(--ink-2);max-width:62ch}
.period{color:var(--ambient)}
.q{font-family:var(--serif);font-style:italic;font-size:19px;color:var(--ink);line-height:1.35}
.status{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--ink-2)}
.status::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.status.live{color:#E6E6E6;border-color:rgba(255,198,58,.5)}
.status.live::before{background:var(--hot);box-shadow:0 0 8px var(--hot)}
.status.next{color:var(--muted)}
.status.later{color:var(--faint)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;font-size:13px;font-weight:500;letter-spacing:.01em;border:1px solid var(--line-2);transition:transform .25s var(--ease),background .25s,border-color .25s}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:var(--ink);color:#111;border-color:var(--ink)}
.btn.primary:hover{background:#fff}
.btn.ghost:hover{border-color:var(--ink-2);background:rgba(255,255,255,.03)}
.btn.large{padding:14px 22px;font-size:14px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(14px);background:rgba(11,11,13,.72);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--max);margin:0 auto;padding:14px var(--gutter);display:flex;align-items:center;gap:32px}
.wordmark img{height:22px;width:auto}
.nav-links{display:flex;gap:26px;font-size:13px;color:var(--ink-2)}
.nav-links a:hover{color:var(--ink)}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.concept-tag{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--line-2);padding:5px 9px;border-radius:999px}

/* ---------- hero ---------- */
.hero{position:relative;max-width:var(--max);margin:0 auto;padding:clamp(56px,7vw,96px) var(--gutter) clamp(36px,4vw,56px);text-align:center;isolation:isolate;overflow:hidden}
.hero::before{content:'';position:absolute;inset:-20% 10% auto 10%;height:70%;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 30%,rgba(92,8,253,.18),transparent 70%),radial-gradient(35% 40% at 62% 42%,rgba(237,19,121,.10),transparent 70%);filter:blur(10px)}
.hero h1{margin:26px auto 0;font-size:clamp(40px,6vw,92px);line-height:1.0;letter-spacing:-.05em;max-width:16ch}
.hero h1 .line{display:block}
.line-inverter{display:flex;justify-content:center;align-items:baseline;gap:0}
.inverter{position:relative;display:inline-grid;justify-items:center}
.inverter .noun{grid-area:1/1;opacity:0;transform:translateY(.35em);transition:opacity .5s var(--ease),transform .6s var(--ease);
  background:linear-gradient(92deg,var(--cool),var(--ambient) 55%,var(--hot));-webkit-background-clip:text;background-clip:text;color:transparent;
  white-space:nowrap}
.inverter .noun.is-active{opacity:1;transform:none}
.inverter .noun.is-leaving{opacity:0;transform:translateY(-.35em)}
.hero-sub{font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);line-height:1.42;color:var(--ink-2);max-width:66ch;margin:30px auto 0}
.hero-ctas{display:flex;justify-content:center;gap:12px;margin-top:34px;flex-wrap:wrap}

/* ---------- product frame ---------- */
.product{max-width:var(--max);margin:0 auto;padding:0 var(--gutter) 64px}
.product-head{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:22px}
.usecases{display:flex;gap:6px;padding:6px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.02);flex-wrap:wrap;justify-content:center}
.usecase{position:relative;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:8px 14px 8px 14px;border-radius:999px;text-align:left;color:var(--ink-2);transition:background .25s,color .25s}
.usecase b{font-weight:500;font-size:13px;grid-column:1;color:inherit}
.usecase small{grid-column:1;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);line-height:1.2}
.usecase .status{grid-column:2;grid-row:1/3;border-color:transparent;padding:2px 0 2px 0}
.usecase:hover{background:rgba(255,255,255,.04);color:var(--ink)}
.usecase[aria-selected=true]{background:var(--ink);color:#111}
.usecase[aria-selected=true] small{color:#555}
.usecase[aria-selected=true] .status{color:#333}
.usecase.is-next{color:var(--muted);cursor:help}
.usecase.is-next b{color:var(--muted)}
.usecase.is-next:hover{background:transparent;color:var(--ink-2)}
.usecase-tip{min-height:1.6em;font-family:var(--serif);font-style:italic;font-size:16px;color:var(--muted);text-align:center}

.frame{position:relative;display:grid;grid-template-columns:200px minmax(300px,1.05fr) minmax(360px,1.35fr);grid-template-rows:minmax(560px,auto) auto;
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--panel);overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02) inset}
.frame::before{content:'';position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 22%)}

.rail{border-right:1px solid var(--line);padding:14px 12px;display:flex;flex-direction:column;gap:14px;background:var(--bg-2);font-size:12px}
.rail-top{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px}
.rail-mark img{height:14px;width:auto;opacity:.9}
.rail-ws{font-size:10px;color:var(--muted);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-seg{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:8px;padding:3px;font-size:11px;color:var(--muted)}
.rail-seg span{text-align:center;padding:5px 0;border-radius:6px}
.rail-seg .on{background:var(--panel-2);color:var(--ink)}
.rail-nav li{padding:7px 8px;border-radius:7px;color:var(--ink-2)}
.rail-nav li.on{background:var(--panel-2);color:var(--ink)}
.rail-label{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:6px 8px 0}
.rail-recents button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:7px 8px;border-radius:7px;color:var(--ink-2);font-size:11.5px;line-height:1.3}
.rail-recents button i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--faint)}
.rail-recents button.on{background:var(--panel-2);color:var(--ink)}
.rail-recents button.on i{background:var(--hot);box-shadow:0 0 8px var(--hot)}
.rail-foot{margin-top:auto;display:flex;justify-content:space-between;color:var(--faint);padding:0 6px}

.chat{display:flex;flex-direction:column;min-width:0;border-right:1px solid var(--line);background:var(--panel)}
.chat-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.thread{flex:1;padding:22px 18px 8px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.msg{max-width:92%;opacity:0;transform:translateY(8px);animation:msgIn .55s var(--ease) forwards}
@keyframes msgIn{to{opacity:1;transform:none}}
.msg.user{align-self:flex-end;background:var(--panel-2);border:1px solid var(--line);padding:10px 14px;border-radius:12px 12px 4px 12px;font-size:13px;color:var(--ink)}
.msg.vinci{align-self:flex-start;font-size:13px;line-height:1.55;color:var(--ink-2)}
.msg.vinci .who{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.msg.vinci .who i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--hot);margin-right:6px;vertical-align:1px}
.msg.vinci .who .working{color:var(--muted);text-transform:none;letter-spacing:0;margin-left:8px}
.msg.vinci p+p{margin-top:6px}
.msg.vinci b{color:var(--ink);font-weight:500}
.msg.vinci .num{font-variant-numeric:tabular-nums;color:var(--ink)}
.msg.vinci .verdict{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:6px 10px;border:1px solid var(--line-2);border-radius:8px;font-size:12px;color:var(--ink)}
.msg.vinci .verdict i{width:8px;height:8px;border-radius:50%}
.msg.vinci .verdict.pass i{background:#7FD48A}
.msg.vinci .verdict.fail i{background:var(--ambient)}
.msg .tool{display:inline-flex;align-items:center;gap:8px;margin-top:8px;font-size:11px;color:var(--muted)}
.msg .tool b{color:var(--ink-2);font-weight:500}
.msg .tool::before{content:'↳';color:var(--faint);font-size:12px}
.composer{padding:12px 14px 14px;border-top:1px solid var(--line)}
.composer-box{position:relative;min-height:46px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--bg-2);font-size:13px;color:var(--ink);display:flex;align-items:center}
.composer-box .caret{display:inline-block;width:1px;height:1.1em;background:var(--ink);margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.composer-placeholder{position:absolute;left:14px;color:var(--muted);pointer-events:none}
.composer[data-typing=true] .composer-placeholder,.composer[data-has-text=true] .composer-placeholder{opacity:0}
.composer-tools{display:flex;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:14px;padding:0 4px}
.composer-tools .send{width:22px;height:22px;border-radius:50%;background:var(--ink);color:#111;display:grid;place-items:center;font-size:13px}

.stage{position:relative;display:grid;grid-template-rows:auto 1fr auto;min-width:0;background:var(--bg-2)}
.stage-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line);font-size:12px;color:var(--ink-2)}
.stage-tab{display:inline-flex;align-items:center;gap:8px;padding:4px 10px;border:1px solid var(--line);border-radius:7px;background:var(--panel-2)}
.tabdot{width:6px;height:6px;border-radius:50%;background:var(--cool)}
.stage-actions{display:flex;gap:12px;color:var(--muted)}
.object{position:relative;min-height:340px;overflow:hidden;transform:translateX(-14%);opacity:0;transition:transform .9s var(--ease),opacity .7s var(--ease)}
.frame[data-phase]:not([data-phase=idle]) .object{transform:none;opacity:1}
.object-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:none}
.object-canvas:active{cursor:grabbing}
.object-readout{position:absolute;left:14px;top:12px;font-size:11px;line-height:1.5;color:var(--ink-2);pointer-events:none}
.object-readout b{display:block;font-size:22px;letter-spacing:-.03em;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.object-readout small{display:block;color:var(--muted);font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.object-hint{position:absolute;right:14px;bottom:10px;font-size:10px;letter-spacing:.06em;color:var(--faint);pointer-events:none}
.evidence{border-top:1px solid var(--line);padding:12px 14px 14px;min-height:118px;display:grid;gap:8px;align-content:start}
.evidence:empty{display:none}
.ev{opacity:0;transform:translateY(6px);animation:msgIn .5s var(--ease) forwards}
.ev-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;font-size:12px;color:var(--ink-2)}
.ev-row b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.ev-bar{height:6px;border-radius:3px;background:var(--panel-2);overflow:hidden;grid-column:1/-1}
.ev-bar i{display:block;height:100%;width:var(--w,0%);background:linear-gradient(90deg,var(--cool),var(--ambient),var(--hot));transition:width 1.1s var(--ease)}
.ev-title{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between}
.ev-title .prov{color:var(--faint);letter-spacing:.04em;text-transform:none}
.sweep{display:grid;gap:6px}
.sweep-axis{position:relative;height:34px}
.sweep-axis .track{position:absolute;left:0;right:0;top:15px;height:2px;background:var(--line-2)}
.sweep-axis .pt{position:absolute;top:9px;left:var(--x);width:14px;height:14px;margin-left:-7px;border-radius:50%;border:1px solid var(--line-2);background:var(--panel);display:grid;place-items:center;transition:background .3s,border-color .3s}
.sweep-axis .pt i{width:5px;height:5px;border-radius:50%;background:var(--muted)}
.sweep-axis .pt.pass i{background:#7FD48A}
.sweep-axis .pt.fail i{background:var(--ambient)}
.sweep-axis .pt.on{border-color:var(--ink);background:var(--ink)}
.sweep-axis .pt.on i{background:#111}
.sweep-axis .target{position:absolute;left:0;right:0;top:0;font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);text-align:right}
.sweep-legend{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}
.sweep-legend b{color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}

.playbar{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line);background:var(--bg-2);font-size:11px}
.pb{width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);color:var(--ink-2);display:grid;place-items:center;font-size:14px}
.pb.replay{width:auto;padding:0 12px;border-radius:999px;margin-left:auto;font-size:11px;letter-spacing:.06em}
.steps{display:flex;gap:6px;flex:1;overflow:hidden}
.steps li{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.steps button{display:block;width:100%;text-align:left;color:var(--muted);font-size:10.5px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0}
.steps li .bar{height:2px;background:var(--panel-2);border-radius:1px;overflow:hidden}
.steps li .bar i{display:block;height:100%;width:0;background:var(--ink)}
.steps li.done .bar i{width:100%}
.steps li.on button{color:var(--ink)}
.steps li.on .bar i{width:100%;transition:width var(--dur,4s) linear}
.frame-caption{margin:16px auto 0;max-width:76ch;text-align:center;font-size:11.5px;line-height:1.6;color:#8E8D88}

/* ---------- strip ---------- */
.strip{max-width:var(--max);margin:0 auto;padding:36px var(--gutter);display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip p{font-family:var(--serif);font-size:clamp(18px,1.5vw,22px);color:var(--ink-2);max-width:70ch;line-height:1.4}
.strip b{color:var(--ink);font-weight:600}
.link{font-size:13px;white-space:nowrap;color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:2px}

/* ---------- sections ---------- */
.section{max-width:var(--max);margin:0 auto;padding:clamp(72px,8vw,120px) var(--gutter)}
.section.dark{max-width:none;background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section.dark>*{max-width:var(--max);margin-left:auto;margin-right:auto}
.section-rail{display:grid;gap:18px;max-width:900px;margin-bottom:48px}
.section h2{font-size:clamp(34px,4.2vw,64px);line-height:1.05;letter-spacing:-.04em}
.section h3{font-size:22px;letter-spacing:-.02em;line-height:1.2}

/* shift */
.shift{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start}
.shift-problem h2{margin:20px 0 22px}
.shift-answer{padding-top:8px;display:grid;gap:18px}
.shift-answer h3{font-size:clamp(24px,2.2vw,32px);font-family:var(--serif);font-style:italic;letter-spacing:-.02em;line-height:1.2}
.shift-answer>p:not(.eyebrow){color:var(--ink-2);font-size:14.5px;line-height:1.65;max-width:56ch}
.reveal-words .w{display:inline-block;opacity:.18;transition:opacity .5s var(--ease)}
.reveal-words .w.on{opacity:1}
.cadence{margin-top:22px;border:1px solid var(--line);border-radius:var(--r);padding:18px 20px 14px;display:grid;gap:12px;background:var(--bg-2)}
.cadence-row{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:14px;font-size:11px;color:var(--muted)}
.cadence-track{position:relative;height:26px;border-radius:4px;background:var(--panel-2);overflow:hidden}
.cadence-track .tick{position:absolute;top:0;left:var(--x);width:6px;height:100%;background:var(--faint)}
.cadence-row.is-vinci .cadence-label{color:var(--ink)}
.cadence-track .band{position:absolute;inset:0;background:linear-gradient(90deg,var(--cool),var(--ambient) 55%,var(--hot));opacity:.9;transform-origin:left;transform:scaleX(0);transition:transform 1.4s var(--ease)}
.cadence.on .band{transform:none}
.cadence-note{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10px;letter-spacing:.06em;color:var(--ink);mix-blend-mode:difference}
.cadence-axis{display:flex;justify-content:space-between;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding-left:134px}

/* caps */
.caps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.cap{background:var(--bg);padding:28px 26px 26px;display:grid;gap:12px;align-content:start;min-height:250px;position:relative}
.cap h3{margin-top:4px}
.cap>p:not(.q){font-size:13.5px;color:var(--ink-2);line-height:1.6}
.cap.is-next,.cap.is-later{background:var(--bg-2)}
.cap.is-next h3,.cap.is-later h3,.cap.is-next .q,.cap.is-later .q{color:var(--muted)}
.cap.is-later h3,.cap.is-later .q{color:var(--faint)}
.cap-try{margin-top:auto;font-size:12px;color:var(--ink);border-bottom:1px solid var(--line-2);width:max-content;padding-bottom:2px}
.cap-try:hover{border-color:var(--ink)}

/* icp */
.icp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,48px);border-top:1px solid var(--line-2);padding-top:36px}
.icp-grid li{display:grid;gap:14px;align-content:start}
.icp-role{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.icp-grid p:not(.q){font-size:13.5px;color:var(--ink-2);line-height:1.6}

/* proof */
.ledger{display:grid;grid-template-columns:1.1fr 1fr;border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.ledger-major{padding:34px 40px 40px 0;border-right:1px solid var(--line);position:relative;overflow:hidden}
.ledger-label{display:flex;justify-content:space-between;gap:12px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.ledger-label span{font-family:var(--serif);font-style:italic;text-transform:none;letter-spacing:0;font-size:14px;color:var(--muted)}
.big{font-size:clamp(96px,12vw,196px);line-height:1;letter-spacing:-.07em;margin:36px 0 6px;font-variant-numeric:tabular-nums;
  background:linear-gradient(92deg,var(--cool),var(--ambient) 50%,var(--hot));-webkit-background-clip:text;background-clip:text;color:transparent;width:max-content}
.big small{font-size:.28em;letter-spacing:-.02em;margin-left:.2em;font-family:var(--serif);font-style:italic}
.ledger-desc{font-family:var(--serif);font-size:clamp(20px,1.7vw,26px);line-height:1.35;max-width:30ch}
.conditions{display:flex;gap:40px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.conditions div{display:grid;gap:6px}
.conditions strong{font-weight:400;font-size:28px;letter-spacing:-.04em}
.conditions span{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ledger-side article{padding:26px 0 28px 40px}
.ledger-side article+article{border-top:1px solid var(--line)}
.mid{font-size:clamp(26px,2.4vw,38px);letter-spacing:-.04em;line-height:1.15;margin:16px 0 10px;font-variant-numeric:tabular-nums}
.mid em{font-family:var(--serif);font-style:italic;letter-spacing:-.02em}
.mid i{color:var(--muted);font-style:normal;margin:0 6px}
.ledger-side p:not(.ledger-label):not(.mid){font-family:var(--serif);font-size:17px;color:var(--ink-2);line-height:1.4;max-width:44ch}
.quote{margin:56px 0 0;padding:0;display:grid;gap:14px;max-width:64ch}
.quote p{font-family:var(--serif);font-size:clamp(22px,2.2vw,30px);line-height:1.3;letter-spacing:-.01em}
.quote footer{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* how */
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden}
.how-steps li{background:var(--bg-2);padding:26px 24px 30px;display:grid;gap:12px;align-content:start;position:relative;transition:background .4s}
.how-steps li .n{font-size:11px;letter-spacing:.14em;color:var(--muted)}
.how-steps li.on{background:var(--bg-3)}
.how-steps li.on .n{color:var(--hot)}
.how-steps li::after{content:'';position:absolute;left:0;top:0;height:2px;width:0;background:linear-gradient(90deg,var(--cool),var(--ambient),var(--hot));transition:width 1.2s var(--ease)}
.how-steps li.on::after{width:100%}
.how-steps p{font-size:13.5px;color:var(--ink-2);line-height:1.6}

/* where */
.where-head{display:grid;gap:18px;max-width:900px}
.stack-line{margin-top:56px;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line-2);padding-top:22px;gap:14px}
.stack-line li{display:grid;gap:8px;position:relative}
.stack-line li::before{content:'';position:absolute;top:-27px;left:0;width:9px;height:9px;border-radius:50%;background:var(--faint)}
.stack-line li.is-now::before{background:var(--hot);box-shadow:0 0 10px var(--hot)}
.stack-line span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.stack-line strong{font-weight:400;font-size:clamp(22px,2.2vw,32px);letter-spacing:-.03em}
.stack-line li.is-next strong{color:var(--muted)}
.downstream{margin-top:48px;padding-top:32px;border-top:1px solid var(--line);display:grid;gap:14px;max-width:70ch}
.downstream-list{font-family:var(--serif);font-size:clamp(20px,1.8vw,26px);line-height:1.35;color:var(--ink-2)}
.downstream-list em{color:var(--ink)}

/* demos */
.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.demo-card{position:relative;display:grid;gap:12px;align-content:end;min-height:300px;padding:24px;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:var(--bg);transition:transform .35s var(--ease),border-color .35s}
.demo-card::before{content:'';position:absolute;inset:auto -30% -55% -30%;height:90%;background:radial-gradient(50% 60% at 50% 60%,var(--a),transparent 70%),radial-gradient(40% 50% at 70% 40%,var(--b),transparent 70%);opacity:.32;filter:blur(20px);transition:opacity .4s,transform .6s var(--ease)}
.demo-card:hover{transform:translateY(-3px);border-color:var(--ink-2)}
.demo-card:hover::before{opacity:.5;transform:translateY(-8%)}
.demo-card>*{position:relative}
.demo-kind{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.demo-card h3{font-size:21px;line-height:1.2;letter-spacing:-.02em}
.demo-card p{font-family:var(--serif);font-size:16px;color:var(--ink-2);line-height:1.4}
.demo-cta{font-size:12px;color:var(--ink);margin-top:6px}

/* cta */
.cta{text-align:center;display:grid;gap:18px;justify-items:center}
.cta h2{font-size:clamp(40px,5.5vw,84px)}

/* footer */
.foot{border-top:1px solid var(--line);padding:48px var(--gutter) 28px}
.foot-inner{max-width:var(--max);margin:0 auto;display:flex;justify-content:space-between;gap:30px;align-items:start}
.foot-brand{display:grid;gap:14px;max-width:44ch}
.foot-brand img{height:18px;width:auto;opacity:.9}
.foot-brand p{font-family:var(--serif);font-size:16px;color:var(--ink-2)}
.foot-links{display:flex;gap:22px;font-size:12px;color:var(--ink-2)}
.foot-note{max-width:var(--max);margin:36px auto 0;font-size:10.5px;line-height:1.7;color:var(--faint);max-width:90ch}

/* ---------- responsive ---------- */
@media (max-width:1180px){
  .frame{grid-template-columns:180px minmax(280px,1fr) minmax(320px,1.2fr)}
  .caps-grid{grid-template-columns:repeat(2,1fr)}
  .icp-grid{grid-template-columns:repeat(2,1fr)}
  .how-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:980px){
  .nav-links{display:none}
  .frame{grid-template-columns:minmax(0,1fr);grid-template-rows:auto}
  .frame>*{min-width:0;max-width:100%}
  .rail{display:none}
  .chat{border-right:0;border-bottom:1px solid var(--line);min-height:300px}
  .thread{min-height:200px}
  .object{min-height:300px}
  .shift{grid-template-columns:1fr}
  .ledger{grid-template-columns:1fr}
  .ledger-major{border-right:0;border-bottom:1px solid var(--line);padding-right:0}
  .ledger-side article{padding-left:0}
  .demo-grid{grid-template-columns:1fr}
  .stack-line{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .strip{flex-direction:column;align-items:start}
  .foot-inner{flex-direction:column}
}
@media (max-width:640px){
  .concept-tag,.btn.ghost:not(.large){display:none}
  .hero h1{font-size:clamp(38px,11.5vw,56px)}
  .usecase small{display:none}
  .usecase{grid-template-rows:auto;padding:8px 12px}
  .usecase .status{grid-row:1}
  .caps-grid,.icp-grid,.how-steps{grid-template-columns:1fr}
  .conditions{gap:22px;flex-wrap:wrap}
  .cadence-row{grid-template-columns:86px 1fr}
  .cadence-axis{padding-left:100px}
  .steps button{font-size:9.5px}
  .pb.replay{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .object{transform:none;opacity:1}
}