/* The public landing page at `/`, the marketing front door. It loads style.css for the tokens, fonts
   and brand and adds only the page's own layout. It still ships no script and reads no data: every
   figure on it is an illustration the copy says is one, and it never makes a claim the terminal
   does not. The imagery is inline SVG painted here by class from the shared tokens (var() is not
   valid in SVG presentation attributes, so the markup carries geometry only). Motion is one
   orchestrated load on the hero and a scroll-linked draw on the rows; every keyframe animates FROM
   the hidden state, so the reduced-motion kill switch in style.css leaves the finished drawing.
   Copy rules (DESIGN.md § Landing): never "real-time", never a target, signal or forecast, the feed
   delay disclosed, and the investment-advice line in the footer. */

/* ---------- page tokens ---------- */
body.landing{
 --l-max:1160px;--l-gutter:clamp(16px,4vw,40px);--l-cta:44px;
 --l-fs-hero:clamp(40px,1.4rem + 4.2vw,72px);--l-fs-h2:clamp(28px,1rem + 2.2vw,44px);--l-fs-h3:clamp(21px,1rem + .55vw,25px);
 --l-fs-q:clamp(17px,.95rem + .4vw,20px);--l-fs-lede:clamp(16px,.9rem + .35vw,19px);--l-fs-body:16px;
 --l-section:clamp(80px,4rem + 6vw,160px);
 display:block;min-height:100dvh;font-size:var(--l-fs-body)}
html:has(body.landing){scroll-padding-top:calc(var(--topbar) + 24px);scroll-behavior:smooth}
.landing-main{position:relative;isolation:isolate}
.landing-main:focus{outline:none}
.l-wrap{width:100%;max-width:var(--l-max);margin-inline:auto;padding-inline:var(--l-gutter)}
:where(body.landing) :where(dl,dd,ul,h4){margin:0;padding:0}
:where(body.landing) :where(ul){list-style:none}
body.landing code{font:500 .92em var(--font-mono);color:var(--text)}

/* Section links in the bar; the sign-in link keeps the shared .top-actions style. */
.l-topnav{display:flex;align-items:center;gap:2px;margin-right:6px;padding-right:8px;border-right:1px solid var(--line)}

/* ---------- actions ---------- */
/* One filled button per view: cobalt is the request, the sign-in beside it is a bordered ghost. */
.l-actions{display:flex;flex-wrap:wrap;gap:var(--space-3);margin-top:32px}
.l-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:var(--l-cta);padding:0 22px;border:1px solid var(--line-strong);border-radius:var(--radius);color:var(--text);font:600 15px/1 var(--font-sans);text-decoration:none;transition:background-color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.l-btn:hover{text-decoration:none;background:var(--surface-2);border-color:var(--text-3)}
.l-btn.is-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink)}
.l-btn.is-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.l-arrow{display:inline-block;transition:translate var(--dur-2) var(--ease)}
.l-btn:hover .l-arrow{translate:3px 0}

/* ---------- hero ---------- */
/* The only light on the page falls on the instrument: a neutral lamp, no hue. */
.l-hero{position:relative;padding:clamp(48px,6vw,96px) 0 clamp(56px,6vw,96px)}
.l-hero::before{content:'';position:absolute;z-index:-1;inset:0 0 auto;height:min(1100px,130vw);background:radial-gradient(70% 60% at 50% 0%,color-mix(in oklch,var(--surface-2) 70%,var(--bg)),transparent 72%);pointer-events:none}
.l-hero-copy{display:grid;max-width:780px}
/* Wide screens set the headline beside its paragraph, bottoms aligned, so the instrument rises into the first screen. */
@media(min-width:1080px){.l-hero-copy{max-width:none;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(48px,6vw,104px);align-items:end}.l-hero-aside .l-lede{margin-top:0}}
.l-kicker{display:flex;align-items:center;gap:12px;font:500 12px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.l-kicker::before{content:'';width:28px;height:1px;background:var(--line-strong)}
.l-hero h1{margin-top:22px;font:600 var(--l-fs-hero)/1.02 var(--font-sans);letter-spacing:-.035em;max-width:13ch}
.l-lede{margin-top:26px;max-width:60ch;font-size:var(--l-fs-lede);line-height:1.62;color:var(--text-2);text-wrap:pretty}
.l-note{margin-top:18px;font:13px/1.5 var(--font-mono);color:var(--text-3)}

/* ---------- instrument panels: the hero chart and each system's view ---------- */
.l-panel{margin:0;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);overflow:hidden;box-shadow:var(--shadow-2),inset 0 1px 0 color-mix(in oklch,var(--text) 4.5%,transparent)}
.l-panel-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px var(--space-3);min-height:40px;padding:6px var(--space-3);border-bottom:1px solid var(--line);background:var(--surface-2)}
/* A title that does not fit beside its states pushes them to a second line; it is never cut. */
.l-panel-id{font:500 12px/1.2 var(--font-mono);letter-spacing:.08em;color:var(--text-2)}
.l-panel-id i{font-style:normal;color:var(--text-3);padding:0 7px}
.l-panel-states{display:flex;align-items:center;gap:6px;flex:none}
.l-hero-panel{margin-top:clamp(44px,6vw,80px);box-shadow:var(--shadow-3),inset 0 1px 0 color-mix(in oklch,var(--text) 5%,transparent)}
.l-hero-panel figcaption{padding:12px var(--space-4);border-top:1px solid var(--line);font:12px/1.55 var(--font-mono);color:var(--text-3);text-wrap:pretty}

/* A state is a mono word in a hairline box; the tone agrees with the word (workspace .wbadge). */
.l-state{display:inline-flex;align-items:center;gap:6px;padding:3px 7px;border:1px solid var(--line-strong);border-radius:var(--radius);font:500 11px/1.2 var(--font-mono);letter-spacing:.07em;color:var(--text-2);white-space:nowrap}
.l-state.is-live{color:var(--signal);border-color:var(--signal-deep)}
.l-state.is-ok{color:var(--ok)}
.l-state.is-warn{color:var(--warn)}
.l-state.is-bad{color:var(--bad);border-color:var(--bad)}
.l-state.is-est{color:var(--warn);border-style:dashed;background:repeating-linear-gradient(135deg,transparent 0 4px,var(--warn-bg) 4px 6px)}

/* What three of the hero's plates mean, in words. */
.l-legend{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5) clamp(24px,3vw,48px);margin-top:36px}
.l-legend>div{padding-top:var(--space-4);border-top:1px solid var(--line)}
.l-legend dt{font:500 12px/1.4 var(--font-mono);letter-spacing:.06em}
.l-legend dd{margin-top:10px;font-size:15px;line-height:1.6;color:var(--text-2)}
.lg-pm{color:var(--lvl-price-map)}.lg-iv{color:var(--lvl-iv)}.lg-warn{color:var(--warn)}

/* ---------- sections ---------- */
.l-section{padding-block:var(--l-section);border-top:1px solid var(--line)}
.l-head h2,.l-access h2{font:600 var(--l-fs-h2)/1.08 var(--font-sans);letter-spacing:-.03em;max-width:20ch}
.l-head p{margin-top:20px;max-width:58ch;font-size:var(--l-fs-lede);line-height:1.62;color:var(--text-2);text-wrap:pretty}

/* Systems: rows, not cards. Text carries no box; only the instrument view is framed. */
.l-rows{display:grid;gap:clamp(72px,8vw,128px);margin-top:clamp(56px,6vw,96px)}
.l-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,80px);align-items:center}
.l-row:nth-child(even){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.l-row:nth-child(even) .l-row-copy{order:2}
.l-row h3{font:600 var(--l-fs-h3)/1.2 var(--font-sans);letter-spacing:-.015em}
.l-q{margin-top:14px;font-size:var(--l-fs-q);line-height:1.45;color:var(--text);text-wrap:pretty}
.l-row-copy p:not(.l-q){margin-top:16px;max-width:52ch;line-height:1.68;color:var(--text-2);text-wrap:pretty}

/* The full desk: the terminal's own navigation groups and what sits in each. */
.l-desk{margin-top:clamp(88px,10vw,152px);padding-top:var(--space-6);border-top:1px solid var(--line)}
.l-desk h3{font:600 var(--l-fs-h3)/1.2 var(--font-sans);letter-spacing:-.015em}
.l-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px clamp(24px,4vw,56px);margin-top:40px}
.l-groups h4{font:600 16px/1.3 var(--font-sans)}
.l-groups p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--text-2)}
.l-groups .l-sys{margin-top:12px;font:13px/1.7 var(--font-mono);color:var(--text-3)}
.l-instruments{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 32px;margin-top:48px;padding-top:var(--space-4);border-top:1px solid var(--line);font:13px/1.6 var(--font-mono);color:var(--text-2)}
/* A label and its values never part across a line break. */
.l-inst{display:inline-flex;align-items:baseline;gap:12px;white-space:nowrap}
.l-inst b{font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3)}
.l-nowrap{white-space:nowrap}

/* Method: the state vocabulary as a glossary. */
.l-glossary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,5vw,72px);margin-top:clamp(48px,5vw,72px)}
.l-glossary>div{display:grid;grid-template-columns:152px minmax(0,1fr);gap:var(--space-4);align-items:baseline;padding:20px 0;border-top:1px solid var(--line)}
.l-glossary dd{font-size:15px;line-height:1.6;color:var(--text-2)}
.l-stance{margin-top:clamp(56px,6vw,96px);max-width:28ch;font:500 clamp(22px,1rem + 1.2vw,32px)/1.3 var(--font-sans);letter-spacing:-.02em;color:var(--text-2);text-wrap:balance}
.l-stance span{color:var(--text)}

/* Workflow: four short points about working in the terminal, unboxed. */
.l-features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,72px);margin-top:clamp(48px,5vw,72px)}
.l-features li{padding:24px 0 28px;border-top:1px solid var(--line)}
.l-features h3{font:600 18px/1.3 var(--font-sans);letter-spacing:-.01em}
.l-features p{margin-top:10px;max-width:46ch;line-height:1.65;color:var(--text-2);text-wrap:pretty}

/* Access: the close. */
/* The close mirrors the hero: headline left, the request beside it on wide screens. */
@media(min-width:1080px){.l-access .l-wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:clamp(48px,6vw,104px);align-items:end}.l-access-aside>p:first-child{margin-top:0}}
.l-access p{margin-top:22px;max-width:58ch;font-size:var(--l-fs-lede);line-height:1.62;color:var(--text-2)}
.l-access .l-mail{margin-top:20px;font:13px/1.5 var(--font-mono);color:var(--text-3)}

/* ---------- footer ---------- */
.l-foot{padding:48px 0 40px;border-top:1px solid var(--line);background:var(--surface)}
.l-foot .l-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:center}
.l-foot-brand{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;letter-spacing:.12em}
.l-foot-nav{display:flex;flex-wrap:wrap;gap:4px 20px;font-size:14px}
.l-foot-nav a{color:var(--text-2)}
.l-foot-nav a:hover{color:var(--text)}
.l-legal{grid-column:1/-1;max-width:88ch;padding-top:20px;border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--text-3)}
.l-copy{grid-column:1/-1;font:12px/1.5 var(--font-mono);color:var(--text-3)}

/* ---------- vignettes: inline SVG painted from the tokens ---------- */
.vg{display:block;width:100%;height:auto}
.vg-t{font-family:var(--font-mono);font-size:12px;fill:currentColor}
.vg-grid{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.vg-axisline{fill:none;stroke:var(--line-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.vg-axis{color:var(--text-3)}
.vg-note{color:var(--text-3);font-size:11px;letter-spacing:.05em}
.vg-cycle{fill:none;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:2 4}
.vg-c{color:var(--ok)}.vg-c.dn{color:var(--bad)}
.vg-c path{fill:none;stroke:currentColor;stroke-width:1.3}
.vg-c rect{fill:currentColor}
.vg-lv{fill:none;stroke:currentColor;stroke-width:1.5}
.vg-lv.is-thick{stroke-width:2.2}
.vg-lv.is-dash{stroke-dasharray:6 5}
.lv-iv,.pl-iv,.vg-iv-t{color:var(--lvl-iv)}
.lv-pm,.pl-pm,.vg-pm-t{color:var(--lvl-price-map)}
.lv-ref,.pl-ref{color:var(--lvl-reference)}
.lv-price{color:var(--text-2)}.lv-real{color:var(--text)}
.pl-now{color:var(--signal)}
.vg-plate rect{fill:var(--surface);stroke:currentColor;stroke-width:1;stroke-opacity:.6}
.vg-plate-t{font-size:13px;font-weight:500}
.vg-row .vg-plate-t{font-size:12px}
.vg-band{fill:var(--lvl-price-map)}.vg-band.b1{fill-opacity:.08}.vg-band.b2{fill-opacity:.045}
.vg-band.iv{fill:var(--lvl-iv);fill-opacity:.075}
.vg-trackline,.vg-nowline{fill:none;stroke:var(--signal);stroke-width:1.2;stroke-dasharray:3 3}
.vg-tag{fill:var(--signal)}
.vg-tag-t{fill:var(--primary-ink);font-size:13px;font-weight:600}
.vg-tag-t.is-small{font-size:11px}
.vg-area{fill:var(--lvl-price-map);fill-opacity:.07}
.vg-rug{fill:none;stroke:var(--lvl-price-map);stroke-opacity:.5;stroke-width:1}
.vg-dot{fill:var(--lvl-price-map);stroke:var(--surface);stroke-width:2}
.vg-dot.is-now{fill:var(--signal)}
.vg-bar{fill-opacity:.9}.vg-bar.pos{fill:var(--exp-pos)}.vg-bar.neg{fill:var(--exp-neg)}
.vg-p1{color:var(--path-1)}.vg-p2{color:var(--path-2)}.vg-p3{color:var(--path-3)}
.vg-pband{fill:currentColor;fill-opacity:.1}
.vg-path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-dasharray:5 4}
.vg-zone.res{fill:var(--sr-resistance);fill-opacity:.17}.vg-zone.sup{fill:var(--sr-support);fill-opacity:.17}.vg-zone.is-weak{fill-opacity:.07}
.vg-sr-t.res{color:var(--sr-resistance)}.vg-sr-t.sup{color:var(--sr-support)}
.vg-sr-sub{color:var(--text-3);font-size:10px;letter-spacing:.04em}

/* ---------- motion ---------- */
/* The hero powers on once: copy, then the frame, grid, candles left to right, the levels drawing in,
   their plates, the tracking price, and last the feed's own state word. Nothing loops. */
@keyframes l-rise{from{opacity:0;translate:0 14px}}
@keyframes l-fade{from{opacity:0}}
@keyframes vg-grow{from{opacity:0;transform:scaleY(.15)}}
@keyframes vg-in{from{opacity:0;translate:8px 0}}
@keyframes vg-draw{from{stroke-dashoffset:1}}
.l-kicker,.l-hero h1,.l-hero-aside>*{animation:l-rise .7s var(--ease-out) backwards}
.l-hero h1{animation-delay:.06s}
.l-hero-aside>:nth-child(1){animation-delay:.12s}
.l-hero-aside>:nth-child(2){animation-delay:.18s}
.l-hero-aside>:nth-child(3){animation-delay:.24s}
.l-hero-panel{animation:l-rise .8s var(--ease-out) .28s backwards}
.vg-anim .vg-grid,.vg-anim .vg-axis,.vg-anim .vg-band,.vg-anim .vg-cycle{animation:l-fade .6s var(--ease-out) .4s backwards}
.vg-anim .vg-c{transform-box:fill-box;transform-origin:50% 50%;animation:vg-grow .45s var(--ease-out) backwards;animation-delay:calc(.5s + var(--i) * 26ms)}
.vg-anim .vg-draw{stroke-dasharray:1;animation:vg-draw .9s var(--ease-in-out) backwards;animation-delay:calc(1.1s + var(--i) * 90ms)}
.vg-anim .vg-fade{animation:l-fade .5s var(--ease-out) 1.5s backwards}
.vg-anim .vg-plate{animation:vg-in .35s var(--ease-out) backwards;animation-delay:calc(1.5s + var(--i) * 70ms)}
.vg-anim .vg-track{animation:l-fade .4s var(--ease-out) 2.05s backwards}
.l-hero-panel .l-feed{animation:l-fade .4s var(--ease-out) 2.3s backwards}
.l-legend{animation:l-fade .6s var(--ease-out) 1.9s backwards}
/* The systems' views are drawn at rest: no scroll-linked reveal, so a capture, a preview or a print
   never shows an empty chart. */

/* ---------- responsive ---------- */
@media(pointer:coarse){.l-foot-nav a{display:inline-flex;align-items:center;min-height:40px}}
@media(max-width:1024px){
 .l-groups{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Narrow screens crop the hero to its right-hand side, where the latest bars, the plates and the
   price axis are, so its labels keep a legible size instead of shrinking with the width. */
@media(max-width:960px){
 .l-glossary{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:860px){
 .vg-hero{height:clamp(300px,52vw,400px)}
 .vg-cyclelab{display:none}
 .l-row .l-panel{max-width:600px}
 .l-legend{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}
 .l-row,.l-row:nth-child(even){grid-template-columns:minmax(0,1fr)}
 .l-row:nth-child(even) .l-row-copy{order:0}
}
@media(max-width:760px){
 .l-topnav{display:none}
 .l-features{grid-template-columns:minmax(0,1fr)}
 .l-foot .l-wrap{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
 .vg-fine,.vg-note{display:none}
 .l-groups{grid-template-columns:minmax(0,1fr)}
 .l-glossary>div{grid-template-columns:minmax(0,1fr);gap:10px}
 .l-actions .l-btn{flex:1 1 100%}
 .l-panel-bar{padding:6px 10px}
 .l-panel-id i{padding:0 4px}
}