/* Fairvalue Radar — shared design system. Tokens and usage are specified in /DESIGN.md.
   Change the token, never the usage. */

:root{
  color-scheme:dark;
  --ink-950:#070B14; --ink-900:#0C1220; --ink-800:#131B2E; --ink-700:#1B2540;
  --line:#26314F; --line-strong:#38466C;
  --fg:#EEF1F8; --fg-2:#A6AFC9; --fg-3:#7B85A2;
  --signal:#FF8C3F; --signal-hi:#FFB273; --signal-dim:#8A4A1C;
  --up:#4FE0A0; --down:#FF6B6B;
  --f-business:#B49BFF; --f-cash:#7DEBA6; --f-market:#59D8E8; --f-price:#FF8C3F;
  --scrim:rgba(12,18,32,.92);
  --shadow:0 22px 54px -32px #000;
  --wrap:1140px;
}
@supports (color: oklch(70% 0.2 50)){
  :root{
    --ink-950:oklch(12% 0.028 265); --ink-900:oklch(16% 0.032 265);
    --ink-800:oklch(21% 0.038 265); --ink-700:oklch(26% 0.044 265);
    --line:oklch(32% 0.042 265); --line-strong:oklch(43% 0.05 265);
    --fg:oklch(96% 0.012 265); --fg-2:oklch(76% 0.032 265); --fg-3:oklch(64% 0.035 265);
    --signal:oklch(78% 0.190 55); --signal-hi:oklch(85% 0.150 68); --signal-dim:oklch(48% 0.130 50);
    --up:oklch(84% 0.170 158); --down:oklch(71% 0.190 22);
    --f-business:oklch(77% 0.165 292); --f-cash:oklch(87% 0.180 148);
    --f-market:oklch(85% 0.135 205); --f-price:oklch(78% 0.190 55);
    --scrim:color-mix(in oklab, oklch(16% 0.032 265) 92%, transparent);
  }
}

/* ---------- light theme ----------
   Dark is the committed default; light is the same instrument under daylight, not a
   second design. Only tokens are redefined here — never a usage — so every page,
   including the canvas ground in market.js, follows without knowing light exists.

   Two things change beyond the obvious inversion:
   - --signal darkens. #FF8C3F is legible on near-black and illegible on near-white;
     the orange has to lose lightness to keep carrying decisions rather than decoration.
   - --btn-fg exists because the primary button's text flips: near-black on the bright
     dark-mode orange, white on the darker light-mode one.

   The gradient tokens are the wash behind the page. Light keeps a faint blue-grey
   bloom on the right and almost nothing on the left, so the ground reads as paper
   with light falling across it rather than as a coloured panel. */

:root{
  --btn-fg:#160B02; --glow-1:rgba(255,145,71,.13); --glow-2:rgba(180,155,255,.11);
  /* the canvas ground reads these too — see market.js */
  --canvas-fill:rgba(255,140,63,.30); --canvas-fill-2:rgba(255,140,63,.02);
  --canvas-fade:rgba(7,11,20,0); --canvas-fade-2:rgba(7,11,20,.72);
}

:root[data-theme="light"]{
  color-scheme:light;
  --ink-950:#F6F8FC; --ink-900:#FFFFFF; --ink-800:#FFFFFF; --ink-700:#EDF1F8;
  --line:#DFE5F0; --line-strong:#C3CCDE;
  --fg:#0F1626; --fg-2:#4C5670; --fg-3:#6B7590;
  --signal:#B85C10; --signal-hi:#8F440A; --signal-dim:#E8C9A8;
  --up:#0B8F5E; --down:#C8352C;
  --f-business:#6244C9; --f-cash:#12855A; --f-market:#0F7B92; --f-price:#B85C10;
  --scrim:rgba(255,255,255,.90);
  --shadow:0 20px 48px -32px rgba(22,34,64,.35);
  --btn-fg:#FFFFFF;
  --glow-1:rgba(126,158,214,.26); --glow-2:rgba(196,208,228,.30);
  /* the discount fill has to darken with the signal or it glares on white; the
     vignette inverts entirely — on paper the edges lighten, they do not blacken */
  --canvas-fill:rgba(184,92,16,.18); --canvas-fill-2:rgba(184,92,16,.02);
  --canvas-fade:rgba(246,248,252,0); --canvas-fade-2:rgba(246,248,252,.80);
}
@supports (color: oklch(70% 0.2 50)){
  :root[data-theme="light"]{
    --ink-950:oklch(97.5% 0.006 258); --ink-900:oklch(100% 0 0);
    --ink-800:oklch(100% 0 0); --ink-700:oklch(95% 0.008 258);
    --line:oklch(91% 0.012 258); --line-strong:oklch(83% 0.018 258);
    --fg:oklch(19% 0.024 265); --fg-2:oklch(45% 0.028 265); --fg-3:oklch(56% 0.028 265);
    --signal:oklch(53% 0.135 52); --signal-hi:oklch(43% 0.115 50); --signal-dim:oklch(86% 0.05 62);
    --up:oklch(53% 0.135 158); --down:oklch(52% 0.175 25);
    --f-business:oklch(46% 0.185 292); --f-cash:oklch(52% 0.125 158);
    --f-market:oklch(52% 0.105 220); --f-price:oklch(53% 0.135 52);
    --scrim:color-mix(in oklab, oklch(100% 0 0) 90%, transparent);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* ---------- theme toggle ---------- */
.themeb{display:inline-grid;place-items:center;width:34px;height:34px;flex:0 0 auto;
  border-radius:9px;border:1px solid var(--line-strong);background:transparent;
  color:var(--fg-2);cursor:pointer;padding:0;transition:color .15s,border-color .15s}
.themeb:hover{color:var(--fg);border-color:var(--fg-3)}
.themeb svg{width:16px;height:16px;display:block}
.themeb .sun{display:none}
:root[data-theme="light"] .themeb .sun{display:block}
:root[data-theme="light"] .themeb .moon{display:none}
body{
  margin:0;background:var(--ink-950);color:var(--fg);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 30px;position:relative}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- the chart ground ---------- */
#market{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block;background:var(--ink-950)}
.page{position:relative;z-index:1}
.band{padding:92px 0;position:relative;background:var(--scrim);border-top:1px solid var(--line)}
.band.clear{background:transparent;border-top:0}
@media(max-width:720px){.band{padding:64px 0}}

/* ---------- type ---------- */
h1,h2,h3,.display,.figure,.brand b,.amount{
  font-family:"Archivo","Public Sans",sans-serif;font-variation-settings:"wdth" 118}
h1{font-weight:600;font-size:clamp(2.3rem,5.4vw,4.1rem);line-height:1;letter-spacing:-.042em;
  margin:0 0 20px;max-width:16ch;text-wrap:balance;font-variation-settings:"wdth" 122}
h2{font-weight:600;font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.05;letter-spacing:-.032em;
  margin:0 0 14px;max-width:20ch;text-wrap:balance}
h3{font-weight:600;font-size:1.02rem;letter-spacing:-.012em;margin:0 0 8px;
  font-variation-settings:"wdth" 108}
p{margin:0 0 14px}
.lede{color:var(--fg-2);font-size:1.06rem;max-width:52ch}
.sub{color:var(--fg-2);max-width:58ch;margin:0 0 36px;font-size:1.02rem}
.label,.kicker{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3);margin:0 0 16px}
.kicker{color:var(--signal)}
.mono,.num{font-family:"JetBrains Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.note{color:var(--fg-3);font-size:13px;max-width:66ch;margin:20px 0 0;line-height:1.6}
.note a{color:var(--signal)}

/* ---------- buttons ---------- */
.btn{font-size:14px;font-weight:600;font-family:inherit;padding:12px 21px;border-radius:2px;
  border:1px solid transparent;cursor:pointer;text-decoration:none;display:inline-block;
  transition:transform .18s ease,background .18s ease,border-color .18s ease,
             box-shadow .18s ease,color .18s ease}
.btn.primary{background:var(--signal);color:var(--btn-fg)}
.btn.primary:hover{transform:translateY(-2px);background:var(--signal-hi);
  box-shadow:0 12px 30px -10px var(--signal)}
.btn.ghost{border-color:var(--line-strong);color:var(--fg);background:transparent}
.btn.ghost:hover{border-color:var(--signal);color:var(--signal);transform:translateY(-2px)}
.btn.sm{padding:8px 15px;font-size:13px}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

/* ---------- nav ---------- */
nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--ink-950) 84%,transparent);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:62px;gap:20px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.brand b{font-weight:700;font-size:15.5px;letter-spacing:-.02em}
.navlinks{display:flex;gap:24px;font-size:13.5px;color:var(--fg-2)}
.navlinks a{text-decoration:none;position:relative;padding-bottom:3px}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--signal);transform:scaleX(0);transform-origin:0 50%;
  transition:transform .22s cubic-bezier(.22,1,.36,1)}
.navlinks a:hover{color:var(--fg)}
.navlinks a:hover::after{transform:scaleX(1)}
@media(max-width:920px){.navlinks{display:none}}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink-700);color:var(--fg);
  border:1px solid var(--signal);border-radius:2px;padding:11px 18px;text-decoration:none}
.skip:focus{left:14px;top:14px}
.prog{position:fixed;top:0;left:0;height:2px;width:100%;z-index:60;transform:scaleX(0);
  transform-origin:0 50%;background:linear-gradient(90deg,var(--signal),var(--f-business),var(--f-market))}
@supports (animation-timeline: scroll(root)){
  .prog{animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
}
.crumb{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);padding:22px 0 0}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--signal)}

/* ---------- panels ---------- */
.panel{border:1px solid var(--line);border-radius:4px;background:var(--ink-800);padding:22px;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.panel.lift:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}
@media(max-width:900px) and (min-width:560px){.grid-4{grid-template-columns:1fr 1fr}}
.rail{border-left:3px solid var(--signal);padding:2px 0 2px 17px;max-width:64ch}
.rail p{margin:0;font-size:1.02rem}

/* ---------- numeric readouts ---------- */
.figure{font-weight:600;letter-spacing:-.038em;line-height:1;color:var(--signal);
  font-variant-numeric:tabular-nums;font-size:clamp(2rem,5vw,2.9rem);margin:0 0 6px}
.figure small{font-size:.42em;color:var(--fg-3);font-weight:400;margin:0 7px}
.delta{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 116;font-weight:600;
  font-size:1.5rem;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.delta.up{color:var(--up)} .delta.down{color:var(--down)}
.stat{border:1px solid var(--line);border-radius:3px;background:var(--ink-800);padding:18px}
.stat b{display:block;font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 116;
  font-weight:600;font-size:1.7rem;letter-spacing:-.03em;color:var(--signal);line-height:1;
  margin-bottom:7px;font-variant-numeric:tabular-nums}
.stat span{display:block;font-size:12.8px;color:var(--fg-2);line-height:1.45}

/* ---------- tables ---------- */
.tw{position:relative;border:1px solid var(--line);border-radius:4px;background:var(--ink-800)}
.tw-scroll{overflow-x:auto}
.tw::after{content:"";position:absolute;top:1px;bottom:1px;right:1px;width:38px;pointer-events:none;
  border-radius:0 4px 4px 0;background:linear-gradient(90deg,transparent,var(--ink-800))}
@media(min-width:1000px){.tw::after{display:none}}
table.data{border-collapse:collapse;width:100%;font-size:13.4px}
table.data caption{text-align:left;padding:16px 18px 2px;color:var(--fg-3);
  font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase}
table.data th,table.data td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line);
  vertical-align:top}
table.data thead th{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);font-weight:400;white-space:nowrap;
  position:sticky;top:0;background:var(--ink-800);z-index:1}
table.data tbody th{font-weight:600;color:var(--fg);white-space:nowrap}
table.data td{color:var(--fg-2)}
table.data td.n,table.data th.n{text-align:right;font-family:"JetBrains Mono",monospace;
  font-variant-numeric:tabular-nums;white-space:nowrap}
table.data tbody tr:last-child th,table.data tbody tr:last-child td{border-bottom:0}
table.data tbody tr:hover th,table.data tbody tr:hover td{background:color-mix(in oklab,var(--signal) 5%,transparent)}
table.data tr.self th,table.data tr.self td{background:color-mix(in oklab,var(--signal) 9%,transparent)}
table.data tr.self:hover th,table.data tr.self:hover td{background:color-mix(in oklab,var(--signal) 13%,transparent)}
table.data tr.self th{color:var(--signal)}
.tag{display:inline-block;font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 8px;border-radius:2px;white-space:nowrap}
.tag.ok{background:color-mix(in oklab,var(--up) 16%,transparent);color:var(--up)}
.tag.no{background:color-mix(in oklab,var(--down) 14%,transparent);color:var(--down)}
.tag.sig{background:color-mix(in oklab,var(--signal) 16%,transparent);color:var(--signal)}
.tag.mut{background:color-mix(in oklab,var(--fg-3) 18%,transparent);color:var(--fg-3)}
.tag.biz{background:color-mix(in oklab,var(--f-business) 16%,transparent);color:var(--f-business)}
.tag.mkt{background:color-mix(in oklab,var(--f-market) 16%,transparent);color:var(--f-market)}
.tag.cash{background:color-mix(in oklab,var(--f-cash) 16%,transparent);color:var(--f-cash)}

/* ---------- criteria families ---------- */
.f-biz{--c:var(--f-business)} .f-cash{--c:var(--f-cash)}
.f-mkt{--c:var(--f-market)} .f-val{--c:var(--f-price)}
.legend{display:flex;gap:24px;flex-wrap:wrap;margin:0 0 22px;
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;color:var(--fg-3)}
.legend span{display:flex;align-items:center;gap:8px}
.legend i{width:16px;height:3px;border-radius:2px;background:var(--c);display:block}

/* ---------- glossary terms ---------- */
.term{font:inherit;color:inherit;background:none;border:0;padding:1px 2px;cursor:pointer;
  border-bottom:1px dashed var(--fg-3);border-radius:2px;
  transition:background .16s ease,border-color .16s ease}
.term:hover{border-bottom-color:var(--signal);background:color-mix(in oklab,var(--signal) 16%,transparent)}
.ic{display:inline-flex;align-items:center;justify-content:center;width:13px;height:13px;
  margin-left:4px;border-radius:50%;background:var(--signal);color:#20100A;
  font-family:"JetBrains Mono",monospace;font-size:8.5px;line-height:1;vertical-align:2px}
#pop{position:fixed;z-index:80;width:min(352px,calc(100vw - 28px));background:var(--ink-700);
  border:1px solid var(--line-strong);border-radius:3px;padding:17px 18px 16px;
  box-shadow:0 26px 64px rgba(2,4,10,.72);opacity:0;visibility:hidden;transform:translateY(7px);
  pointer-events:none;transition:opacity .16s ease,transform .16s ease,visibility .16s}
#pop.on{opacity:1;visibility:visible;transform:none}
.p-abbr{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--signal);margin:0 0 3px}
.p-name{font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 110;font-weight:600;
  font-size:1.05rem;letter-spacing:-.018em;margin:0 0 9px}
.p-what{margin:0 0 12px;font-size:13.6px;line-height:1.55}
.p-lbl{font-family:"JetBrains Mono",monospace;font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fg-3);margin:0 0 4px}
.p-why{margin:0 0 13px;font-size:13px;line-height:1.52;color:var(--fg-2)}
.p-calc{font-family:"JetBrains Mono",monospace;font-size:11.5px;line-height:1.6;color:var(--signal-hi);
  background:color-mix(in oklab,var(--signal) 9%,transparent);
  border:1px solid color-mix(in oklab,var(--signal) 26%,transparent);border-radius:2px;padding:9px 11px}

/* ---------- glossary marquee ---------- */
.strip{position:relative;overflow:hidden;background:var(--ink-900);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.strip-head{position:absolute;left:0;top:0;bottom:0;z-index:3;display:flex;align-items:center;
  padding:0 130px 0 30px;background:linear-gradient(90deg,var(--ink-900) 68%,transparent);
  font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fg-3);pointer-events:none;white-space:nowrap}
.strip-head b{color:var(--signal);font-weight:500}
.track{display:flex;gap:10px;padding:14px 0;width:max-content;animation:slide 78s linear infinite}
.strip:hover .track,.strip:focus-within .track,.track.hold{animation-play-state:paused}
@keyframes slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.chip{background:var(--ink-800);border:1px solid var(--line);border-radius:2px;padding:7px 13px;
  display:inline-flex;gap:9px;align-items:baseline;font-family:"JetBrains Mono",monospace;
  font-size:11.5px;color:var(--fg-2);cursor:pointer;white-space:nowrap;
  transition:border-color .16s ease,color .16s ease,transform .16s ease,box-shadow .16s ease}
.chip b{color:var(--signal);font-weight:500;letter-spacing:.05em;font-size:12px}
.chip:hover,.chip:focus-visible{border-color:var(--signal);color:var(--fg);transform:translateY(-2px);
  box-shadow:0 8px 20px -12px var(--signal)}
@media(max-width:680px){.strip-head{display:none}}

/* ---------- disclosure ---------- */
.faq{display:grid;gap:9px;max-width:860px}
.faq details{border:1px solid var(--line);border-radius:3px;background:var(--ink-800)}
.faq details[open]{border-color:var(--signal)}
.faq summary{cursor:pointer;list-style:none;padding:15px 44px 15px 20px;position:relative;
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 108;font-weight:600;font-size:.98rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;
  border-right:1.6px solid var(--signal);border-bottom:1.6px solid var(--signal);
  transform:translateY(-60%) rotate(45deg);transition:transform .24s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--signal)}
.faq .a{padding:0 20px 17px;color:var(--fg-2);font-size:14px;line-height:1.6;margin:0;max-width:70ch}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:50px 0 60px;background:var(--ink-950);
  position:relative;z-index:1;color:var(--fg-3);font-size:12.8px}
.foot{display:flex;justify-content:space-between;gap:36px;flex-wrap:wrap}
.foot p{max-width:52ch;line-height:1.65;margin:0 0 11px}
.foot .cols{display:flex;gap:48px;flex-wrap:wrap}
.foot h3{font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--fg-3);margin:0 0 11px;font-weight:400}
.foot ul{list-style:none;margin:0;padding:0;font-size:13px;color:var(--fg-2)}
.foot li{margin-bottom:6px}
.foot a{text-decoration:none}
.foot a:hover{color:var(--signal)}

/* ---------- reveal ---------- */
@supports (animation-timeline: view()){
  .rv{animation:rise linear both;animation-timeline:view();animation-range:entry 4% entry 52%}
  @keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
}
.rv.js-hidden{opacity:0;transform:translateY(26px)}
.rv.js-in{opacity:1;transform:none;
  transition:opacity .75s cubic-bezier(.22,1,.36,1),transform .75s cubic-bezier(.22,1,.36,1)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.prog,.track{animation:none!important;opacity:1!important;transform:none!important}
  *{transition-duration:.01ms!important}
}