/* Node Hour — landing layer.
   Same palette, same three Plex faces, same rule (cyan = measured, amber = simulated).
   Different density: the terminal is dense because a trader reads it for hours; the
   landing is large because a visitor reads it once, on the way to the terminal. */

:root{
  /* 600, not 700, and a touch tighter: the references that read as premium (Sandclock,
     Depot, Fey via Refero Styles) set 54–72px headlines in medium weight, not posters */
  --l-h1:clamp(42px,6.4vw,94px);
  --l-h2:clamp(30px,3.9vw,56px);
  --l-h3:clamp(20px,2vw,26px);
  --l-body:clamp(15.5px,1.15vw,18px);
  --l-num:clamp(76px,11.5vw,172px);
  --l-pad:clamp(72px,9vw,140px);
  --l-gap:clamp(20px,3vw,44px);
}

/* section reveal: only when JS is present, never under reduced motion */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

.landing{font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;font-size:var(--l-body);line-height:1.6}
.landing .mono{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.landing h1{font-size:var(--l-h1);line-height:.98;letter-spacing:-.02em;font-weight:600;max-width:12ch}
.landing h2{font-size:var(--l-h2);line-height:1.04;letter-spacing:-.015em;font-weight:600;max-width:18ch}
.landing h3{font-size:var(--l-h3);line-height:1.2;font-weight:600}
.landing h1 em,.landing h2 em{font-style:normal;color:var(--real)}
.landing .lbl{font-size:11px;letter-spacing:.14em}
.landing p{color:var(--muted)}
.landing p b{color:var(--text);font-weight:600}
.landing .lede{max-width:56ch;font-size:clamp(16px,1.3vw,20px);line-height:1.55}
.landing .btn{font-size:11.5px;padding:8px 14px}
.landing .btn.lg{font-size:13px;padding:14px 24px;letter-spacing:.1em}
.landing .btn.xl{font-size:14px;padding:18px 30px;letter-spacing:.1em}

section.ls{padding:var(--l-pad) 0;border-top:1px solid var(--line)}
section.ls .head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,56px)}
section.ls .head .lbl{display:flex;align-items:center;gap:12px}
section.ls .head .lbl::before{content:"";width:28px;height:1px;background:var(--real)}
.sub2{max-width:60ch;font-size:var(--l-body)}

/* ── hero ─────────────────────────────────────────────── */
.hero{padding:clamp(48px,7vw,104px) 0 clamp(28px,4vw,48px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--l-gap);align-items:center}
@media (max-width:1000px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero .kicker{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.hero .kicker .chip{font-size:10.5px;padding:5px 9px}
.hero h1{margin-bottom:26px}
.hero .lede{margin-bottom:34px}
.hero .cta{display:flex;gap:10px;flex-wrap:wrap}

/* the number is the object: what a 3D render is on other sites, the live index is here */
.hero-num{display:flex;flex-direction:column;gap:12px;padding:clamp(18px,2.4vw,30px);
  border:1px solid var(--line);border-radius:var(--r);background:var(--panel);position:relative;overflow:hidden}
.hero-num::before{content:"";position:absolute;inset:auto -20% -40% auto;width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,var(--real-bg),transparent 70%);pointer-events:none}
/* a lit top edge on the measured panel, the way metric panels carry their accent in the references */
.hero-num::after,.stripL::after{content:"";position:absolute;top:0;left:8%;right:8%;height:1px;
  background:linear-gradient(90deg,transparent,var(--real),transparent);opacity:.7;pointer-events:none}
.stripL{position:relative}
.hero-num .top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.hero-num .big{display:flex;align-items:baseline;gap:.08em;font-family:"IBM Plex Mono",monospace;font-weight:600;
  font-size:var(--l-num);line-height:.95;letter-spacing:-.03em;color:var(--real);font-variant-numeric:tabular-nums;white-space:nowrap}
.hero-num .big .cur{font-size:.42em;color:var(--dim);font-weight:500;letter-spacing:0;align-self:flex-start;margin-top:.22em}
.hero-num .big .unit{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:600;font-size:.19em;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);margin-left:.4em}
.hero-num .big.stale{color:var(--sim)}
.hero-num .big.fu{animation:numU .7s ease-out}
.hero-num .big.fd{animation:numD .7s ease-out}
@keyframes numU{from{color:var(--bid)}}
@keyframes numD{from{color:var(--ask)}}
.hero-num .stamp{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--dim);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.hero-num .stamp b{color:var(--muted);font-weight:500}
.pick{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pick button{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:600;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 10px;border:1px solid var(--line);border-radius:2px;color:var(--muted);display:inline-flex;gap:8px;align-items:baseline}
.pick button .p{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:0;text-transform:none;color:var(--text)}
.pick button:hover{border-color:var(--dim);color:var(--text)}
.pick button[aria-pressed="true"]{border-color:var(--real);background:var(--real-bg);color:var(--real)}
.pick button[aria-pressed="true"] .p{color:var(--real)}
.pick button:disabled{opacity:.5;cursor:default}

/* marquee tape: the six measured prices, moving because they move */
.tape{margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;position:relative}
.tape::before,.tape::after{content:"";position:absolute;top:0;bottom:0;width:80px;z-index:1;pointer-events:none}
.tape::before{left:0;background:linear-gradient(to right,var(--ground),transparent)}
.tape::after{right:0;background:linear-gradient(to left,var(--ground),transparent)}
.tape .track{display:flex;width:max-content;animation:marquee 46s linear infinite}
.tape:hover .track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.tape .track{animation:none;width:auto;overflow-x:auto}}
.tape .tk{display:flex;align-items:baseline;gap:10px;padding:14px 26px;border-right:1px solid var(--line-soft);flex:none;white-space:nowrap}
.tape .tk b{font-family:"IBM Plex Sans Condensed",sans-serif;font-size:12px;letter-spacing:.08em;color:var(--muted);font-weight:600}
.tape .tk .p{font-family:"IBM Plex Mono",monospace;font-size:16px;font-weight:500;color:var(--real)}
.tape .tk .p.stale{color:var(--sim)}
.tape .tk .a{font-size:11px}
.tape .tk .m{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dim)}

/* ── live view: the terminal itself, not a blurred screenshot of it ── */
section.live{padding-top:clamp(28px,4vw,48px)}
section.live .frame{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow);overflow:hidden}
section.live .fhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line-soft);background:var(--panel-2)}
section.live .fhead .sym{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:700;font-size:15px;letter-spacing:.02em}
section.live .fhead .mark{font-family:"IBM Plex Mono",monospace;font-size:15px;font-weight:600;color:var(--sim)}
section.live .fhead .idx{font-family:"IBM Plex Mono",monospace;font-size:13px;color:var(--real)}
section.live .fhead .k{font-family:"IBM Plex Sans Condensed",sans-serif;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600;margin-right:-8px}
section.live .fhead a{margin-left:auto;font-family:"IBM Plex Sans Condensed",sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
section.live canvas{display:block;width:100%;height:clamp(260px,38vh,460px)}
section.live .legend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;padding:11px 16px;border-top:1px solid var(--line-soft);font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--muted)}
section.live .legend i{font-style:normal;display:inline-flex;align-items:center;gap:6px}
section.live .sw{width:10px;height:10px;border-radius:1px;flex:none}
section.live .sw.dash{height:0;border-top:2px dashed var(--real);width:14px}

/* ── the missing benchmark: a comparison, not four numbered cards ── */
.cmp{width:100%;border-collapse:collapse;font-size:var(--l-body)}
.cmp th,.cmp td{padding:clamp(14px,1.8vw,24px) 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle;text-align:left}
.cmp th{font-family:"IBM Plex Sans Condensed",sans-serif;text-transform:uppercase;letter-spacing:.12em;font-size:11px;color:var(--muted);font-weight:600;padding-top:0}
.cmp td:first-child{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:700;font-size:clamp(18px,1.7vw,24px);letter-spacing:.01em;white-space:nowrap}
.cmp td:first-child small{display:block;font-family:"IBM Plex Sans",sans-serif;font-weight:400;font-size:13px;color:var(--dim);letter-spacing:0;margin-top:3px}
.cmp .ok,.cmp .no{display:inline-flex;align-items:center;gap:9px;white-space:nowrap}
.cmp .ok::before,.cmp .no::before{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:15px;width:24px;height:24px;border-radius:2px;display:grid;place-items:center;flex:none}
.cmp .ok::before{content:"✓";color:var(--bid);background:var(--bid-bg)}
.cmp .no::before{content:"✕";color:var(--ask);background:var(--ask-bg)}
.cmp .ok{color:var(--muted)} .cmp .no{color:var(--text)}
.cmp tr.us td{border-bottom:none;background:var(--panel)}
.cmp tr.us td:first-child{color:var(--real)}
.cmp tr.us td:first-child small{color:var(--muted)}
.cmp tr.gap td{padding:0;height:12px;border:none}
.cmp-note{margin-top:clamp(20px,2.6vw,34px);max-width:64ch}
@media (max-width:700px){
  .cmp th:nth-child(n+2),.cmp td:nth-child(n+2){padding-left:8px;padding-right:8px}
  .cmp .ok,.cmp .no{font-size:0;gap:0}
  .cmp .ok::before,.cmp .no::before{font-size:14px}
}

/* ── three layers: a sticky diagram that fills in as you scroll ── */
.layers-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--l-gap);align-items:start}
@media (max-width:900px){.layers-grid{grid-template-columns:minmax(0,1fr)}}
.diagram{position:sticky;top:96px;display:flex;flex-direction:column-reverse;gap:12px}
@media (max-width:900px){.diagram{position:static;flex-direction:column-reverse;margin-bottom:24px}}
.lay{border:1px solid var(--line);border-radius:var(--r);padding:clamp(16px,2vw,26px);background:var(--panel);
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;
  transition:border-color .5s ease,background .5s ease,opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);opacity:.42}
.lay .n{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--dim);letter-spacing:.06em}
.lay .t{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:700;font-size:clamp(17px,1.6vw,22px);letter-spacing:.01em}
.lay .s{font-family:"IBM Plex Sans",sans-serif;font-size:13px;color:var(--muted);margin-top:2px}
.lay .st{font-family:"IBM Plex Sans Condensed",sans-serif;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  padding:4px 8px;border-radius:2px;border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.diagram[data-step="1"] .lay[data-l="1"],.diagram[data-step="2"] .lay[data-l="1"],.diagram[data-step="3"] .lay[data-l="1"]{
  opacity:1;border-color:var(--real);background:var(--real-bg);transform:translateX(0)}
.diagram[data-step="1"] .lay[data-l="1"] .st,.diagram[data-step="2"] .lay[data-l="1"] .st,.diagram[data-step="3"] .lay[data-l="1"] .st{color:var(--real);border-color:var(--real)}
.diagram[data-step="2"] .lay[data-l="2"],.diagram[data-step="3"] .lay[data-l="2"]{opacity:1;border-color:var(--sim);background:var(--sim-bg)}
.diagram[data-step="2"] .lay[data-l="2"] .st,.diagram[data-step="3"] .lay[data-l="2"] .st{color:var(--sim);border-color:var(--sim)}
.diagram[data-step="3"] .lay[data-l="3"]{opacity:1;border-style:dashed;border-color:var(--dim);
  background:repeating-linear-gradient(-45deg,transparent 0 8px,var(--line-soft) 8px 9px)}
.diagram[data-step="3"] .lay[data-l="3"] .st{color:var(--text);border-color:var(--dim)}
.steps{display:flex;flex-direction:column}
.step{min-height:clamp(320px,62vh,560px);display:flex;flex-direction:column;justify-content:center;gap:14px;padding:24px 0}
@media (max-width:900px){.step{min-height:0;padding:22px 0;border-top:1px solid var(--line-soft)}}
.step .lbl{color:var(--real)}
.step[data-step="2"] .lbl{color:var(--sim)}
.step[data-step="3"] .lbl{color:var(--dim)}
.step p{max-width:52ch}
.step a{font-family:"IBM Plex Sans Condensed",sans-serif;font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}

/* ── live markets ── */
.stripL{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:clamp(20px,2.6vw,34px)}
.stripL>div{background:var(--panel);padding:clamp(16px,1.8vw,24px);display:flex;flex-direction:column;gap:6px}
.stripL .v{font-family:"IBM Plex Mono",monospace;font-size:clamp(26px,2.6vw,38px);font-weight:600;line-height:1.05;letter-spacing:-.02em}
.stripL .s{font-size:12.5px;color:var(--dim)}
.tblL{width:100%;border-collapse:collapse;font-family:"IBM Plex Mono",monospace;font-size:14.5px}
.tblL th{text-align:left;padding:10px 16px;border-bottom:1px solid var(--line-soft);white-space:nowrap;
  font-family:"IBM Plex Sans Condensed",sans-serif;text-transform:uppercase;letter-spacing:.1em;font-size:11px;color:var(--muted);font-weight:600}
.tblL td{padding:15px 16px;border-bottom:1px solid var(--line-soft);white-space:nowrap}
.tblL tr:last-child td{border-bottom:none}
.tblL td b{font-family:"IBM Plex Sans Condensed",sans-serif;font-size:16px;letter-spacing:.02em}
.tblL .num{text-align:right}
.tblL td.muted{font-family:"IBM Plex Sans",sans-serif;font-size:13.5px}
.tblL .empty{padding:28px;text-align:center;color:var(--dim);font-family:"IBM Plex Sans",sans-serif}
.tblL a{font-family:"IBM Plex Sans Condensed",sans-serif;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600}
.tblL tr.rv{--d:0ms}

/* ── token ── */
.tok{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--l-gap);align-items:start}
@media (max-width:900px){.tok{grid-template-columns:minmax(0,1fr)}}
.tok .list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.tok .list div{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft);align-items:start;font-size:var(--l-body);color:var(--muted)}
.tok .list b{color:var(--text);font-weight:600}
.tok .mk{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:15px;width:24px;height:24px;border-radius:2px;display:grid;place-items:center;margin-top:2px}
.tok .mk.y{color:var(--bid);background:var(--bid-bg)} .tok .mk.n{color:var(--ask);background:var(--ask-bg)}

/* ── closing ── */
.close{text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.close h2{max-width:22ch}
.close .cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.close .fine{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--dim)}

/* ── v3: the whole hero is a stage; the copy and the measured readout sit on it ── */
.hero{position:relative;min-height:calc(100vh - 56px);display:flex;flex-direction:column;justify-content:center}
.hero>.tape,.hero>.hero-grid{min-width:0;max-width:100%;position:relative;z-index:1}
.hero>.tape{background:var(--ground)}
/* the stage is the first screen, not the whole hero: when the copy runs taller than the window the
   sculpture still frames itself inside the viewport instead of stretching below the fold */
.stage{position:absolute;top:0;left:-16px;right:-16px;height:min(100%,calc(100vh - 56px));z-index:0;overflow:hidden}
.stage canvas{display:block;width:100%!important;height:100%!important}
.stage::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--ground) 0%,color-mix(in srgb,var(--ground) 70%,transparent) 34%,transparent 58%),
             linear-gradient(180deg,transparent 70%,var(--ground) 100%)}
.stage.off{background:linear-gradient(180deg,transparent,var(--panel-2))}
.stage.off::before{content:"the index as pillars needs WebGL; the numbers on this page are the same data";position:absolute;right:24px;top:24px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dim)}
.hero-grid{align-items:center;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.hero-right{min-height:clamp(420px,62vh,680px)}
/* the readout sits under the call to action, off the stage, so nothing covers the object */
.hero-num.compact{position:relative;max-width:min(100%,540px);--l-num:clamp(48px,4.6vw,72px);margin-top:clamp(22px,3vw,40px);
  gap:8px;padding:clamp(14px,1.6vw,20px);background:color-mix(in srgb,var(--panel) 86%,transparent);backdrop-filter:blur(8px)}
.hero-num.compact .pick button{padding:5px 8px;font-size:10.5px}
.hero-num.compact .pick button .p{font-size:11px}
/* the headline arrives word by word: each word clips its own rise */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;margin-bottom:-.06em}
.hero h1 .wi{display:inline-block}
@media (max-width:1000px){
  .hero{min-height:0;display:flex;flex-direction:column}
  .hero-grid{display:contents}
  .hero-copy{order:1}
  .stage{order:2;position:relative;inset:auto;height:min(92vw,460px);margin:8px -16px 0}
  .plabels{display:none}   /* the readout above lists every price; labels only clutter a phone stage */
  .stage::after{background:linear-gradient(180deg,transparent 75%,var(--ground) 100%)}
  .hero-right{display:none}
  .hero-num.compact{max-width:none;backdrop-filter:none;background:var(--panel);margin-top:18px}
  .hero>.tape{order:4}
}
/* pinned by ScrollTrigger: the pin-spacer must not inherit the flex centring */
.pin-spacer>.hero{margin:0}

/* ── closing: the index, at the size it deserves ── */
.close .giant{display:flex;align-items:baseline;justify-content:center;gap:.08em;flex-wrap:wrap;
  font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:clamp(96px,19vw,300px);line-height:.95;letter-spacing:-.04em;
  color:var(--real);font-variant-numeric:tabular-nums;transform-origin:50% 60%}
.close .giant .cur{font-size:.36em;color:var(--dim);font-weight:500;letter-spacing:0;align-self:flex-start;margin-top:.25em}
.close .giant .u{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:600;font-size:.08em;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);flex-basis:100%;text-align:center;margin-top:.3em}
.close .giant .u b{color:var(--text)}

/* ── pillar labels: HTML over the stage, projected from the 3D tops each frame ── */
.plabels{position:absolute;inset:0;pointer-events:none;z-index:2}
.plabel{position:absolute;left:0;top:0;display:flex;flex-direction:row;align-items:baseline;gap:8px;
  padding:4px 9px 5px;border-radius:2px;background:color-mix(in srgb,var(--ground) 72%,transparent);
  border:1px solid color-mix(in srgb,var(--real) 30%,transparent);white-space:nowrap;text-align:center;
  will-change:transform;opacity:0;transition:opacity .4s ease}
.plabel b{font-family:"IBM Plex Sans Condensed",sans-serif;font-weight:700;font-size:12px;letter-spacing:.08em;color:var(--text)}
.plabel i,.plabel em{display:none}
.plabel .px{font-family:"IBM Plex Mono",monospace;font-weight:600;font-size:15px;color:var(--real);letter-spacing:-.01em}
.plabel.stale{border-color:color-mix(in srgb,var(--sim) 40%,transparent)}
.plabel.stale .px,.plabel.stale em{color:var(--sim)}
.plabel.none{border-style:dashed;border-color:var(--line)}
.plabel.none .px{color:var(--dim);font-size:13px}
@media (max-width:1000px){
  .plabel{padding:4px 7px 5px}
  .plabel b{font-size:10.5px} .plabel .px{font-size:13px}
}

/* short or zoomed-in desktop windows: the copy column must still fit one screen */
@media (min-width:1001px) and (max-height:840px){
  .hero{min-height:0;padding-top:28px;padding-bottom:20px}
  .hero h1{font-size:clamp(38px,5vw,72px)}
  .hero .lede{font-size:16px;margin-bottom:22px}
  .hero .kicker{margin-bottom:16px}
  .hero-num.compact{--l-num:clamp(40px,3.8vw,56px);margin-top:18px;padding:12px 14px;gap:6px}
  .hero-num.compact .pick{display:none}
  .hero-right{min-height:clamp(360px,70vh,640px)}
}

/* live markets: the last price moves, flashes on each change, and draws its own short trend */
.tblL td.last{color:var(--sim);transition:background .6s ease}
.tblL td.last.fu{animation:flashU .7s ease-out} .tblL td.last.fd{animation:flashD .7s ease-out}
.tblL td.chg.up{color:var(--bid)} .tblL td.chg.dn{color:var(--ask)}
.tblL td.spark{padding-top:6px;padding-bottom:6px}
.tblL td.spark svg{display:block;width:120px;height:30px}
.tblL tbody tr{transition:background .25s ease}
.tblL tbody tr:hover{background:var(--panel-2)}