/* Thorio placeholder · brand: BRAND_RULES v1.1 · tokens from Brand_System/tokens/tokens.css */
@font-face{font-family:"Archivo";font-style:normal;font-weight:300 700;font-stretch:100% 112.5%;font-display:swap;src:url(/fonts/Archivo-latin-w300-700-wdth100-112.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/JetBrainsMono-400.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/JetBrainsMono-500.woff2) format("woff2")}

:root{
  --bg:#F3F1EC;--bg-2:#E8E5DD;--fg:#0A0B0D;--muted:#62646B;
  --accent:#4FA3AC;--accent-ink:#2E7880;--leak:#B8672F;--leak-ink:#8F4E20;
  --line:rgba(10,11,13,.13);--border-strong:rgba(10,11,13,.38);
  --plate:#0A0B0D;--plate-fg:#F3F1EC;
  --f-display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",Consolas,"Courier New",monospace;
  --gut:clamp(16px,4vw,56px);--max:1440px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0A0B0D;--bg-2:#15171A;--fg:#F3F1EC;--muted:#9A9CA3;
  --accent:#4FA3AC;--accent-ink:#6FBAC3;--leak:#D98A55;--leak-ink:#D98A55;
  --line:rgba(243,241,236,.16);--border-strong:rgba(243,241,236,.4);
  --plate:#15171A;--plate-fg:#F3F1EC;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0A0B0D;--bg-2:#15171A;--fg:#F3F1EC;--muted:#9A9CA3;
  --accent:#4FA3AC;--accent-ink:#6FBAC3;--leak:#D98A55;--leak-ink:#D98A55;
  --line:rgba(243,241,236,.16);--border-strong:rgba(243,241,236,.4);
  --plate:#15171A;--plate-fg:#F3F1EC;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:var(--bg);color:var(--fg);font:400 18px/1.55 var(--f-display);font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding-inline:var(--gut)}
.mono{font-family:var(--f-mono);font-size:12px;line-height:1.5;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
a{color:inherit}
a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}

/* header */
.top{border-bottom:1px solid var(--line)}
.top .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{display:inline-flex;color:var(--fg)}
.logo svg{height:22px;width:auto;display:block}

/* main */
.stage{flex:1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(40px,6vw,104px);align-items:center;padding-block:clamp(48px,8vw,120px)}
.display{margin:0;font-weight:500;font-variation-settings:"wdth" 112;font-size:clamp(2.6rem,5.4vw,5.9rem);line-height:.98;letter-spacing:-.04em;text-wrap:balance}
.display em{font-style:normal}
.display .loss{color:var(--leak)}
.display .gain{color:var(--accent-ink)}
.lead{margin:clamp(24px,3vw,36px) 0 0;max-width:46ch;font-size:clamp(17px,1.4vw,20px);color:var(--muted)}
.cta{margin-top:32px;display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;min-height:56px;padding:0 24px;background:var(--accent);color:#0A0B0D;font:500 16px/1 var(--f-display);text-decoration:none;transition:background .2s,color .2s}
.btn:hover{background:#2E7880;color:#F3F1EC}
.facts{margin:28px 0 0}

/* the card: one deal, cause to effect (kit: deal card 4 states, verdict tags, plate) */
.demo{margin:0;justify-self:end;width:min(500px,100%)}
.card{position:relative;border:1px solid var(--fg);background:var(--bg);padding:24px}
.tint{position:absolute;inset:-1px;pointer-events:none}
.t-rust{border:1.5px solid var(--leak);background:color-mix(in srgb,var(--leak) 9%,transparent);opacity:0}
.t-teal{border:1.5px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);opacity:1}
.lift{position:relative}
.head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.head b{font-weight:500;font-size:18px}
.av{position:relative;width:30px;height:30px;border:1px solid var(--fg);border-radius:50%;flex:none}
.av i{position:absolute;inset:0;display:grid;place-items:center;font:500 13px/1 var(--f-display);font-style:normal}
.av .a1{opacity:0}
.amt{margin:14px 0 0;font-weight:500;font-variation-settings:"wdth" 112;font-size:clamp(36px,4vw,46px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.meta{margin:10px 0 0;font-size:12px}
.row{margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}
.tags,.sums{position:relative;display:grid}
.tags>*,.sums>*{grid-area:1/1}
.tag{justify-self:start;align-self:center;font-size:11px;font-weight:500;padding:6px 8px;border:1px solid currentColor;white-space:nowrap}
.tg-ok{color:var(--muted);opacity:0}
.tg-rust{color:var(--leak-ink);opacity:0}
.tg-teal{color:var(--accent-ink)}
.sums{justify-items:end}
.sum{display:inline-flex;align-items:baseline;gap:8px;white-space:nowrap}
.sum b{font-weight:500;font-variation-settings:"wdth" 112;font-size:30px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sum small{font-size:12px;letter-spacing:.08em}
.arr{width:26px;height:23px;align-self:center;flex:none}
.loss{color:var(--leak)}.loss small{color:var(--leak-ink)}
.gain{color:var(--accent)}.gain b,.gain small{color:var(--accent-ink)}
.sum.loss{opacity:0}
.ev{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.ev li{display:flex;align-items:center;gap:12px;min-height:38px;border-bottom:1px solid var(--line);opacity:.42}
.ev svg{width:22px;height:18px;flex:none;fill:none;stroke:var(--leak);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ev .dsh rect,.ev .dsh path:not(.sl){stroke-dasharray:3 3}
.ev .mono{font-size:12px;color:var(--leak-ink)}
.plate{margin-top:16px;display:flex;align-items:center;gap:10px;min-height:38px;padding:0 12px;background:var(--plate);color:var(--plate-fg);font-size:12px;border:1px solid var(--border-strong)}
.plate .mk{width:13px;height:14px;flex:none;color:var(--plate-fg)}
.demo figcaption{margin-top:12px;font-size:12px}

/* footer */
.foot{border-top:1px solid var(--line)}
.foot .wrap{padding-block:22px 28px;display:flex;justify-content:space-between;align-items:baseline;gap:8px 32px;flex-wrap:wrap}
.tag-line{margin:0;font-size:14px;color:var(--muted)}
.legal{margin:0;font-size:12px;letter-spacing:.04em;text-transform:none}

@media (max-width:860px){
  .stage{grid-template-columns:minmax(0,1fr);align-items:start}
  .demo{justify-self:start}
  .soon{display:none}
}
@media (max-width:420px){
  .card{padding:18px}
  .sum b{font-size:26px}
  .row{flex-wrap:wrap}
  .sums{justify-items:start}
  .ev .mono,.plate{letter-spacing:.03em}
}

/* motion: 12 s loop. Static frame (reduced motion, no animation support) = end state: back in play */
@media (prefers-reduced-motion:no-preference){
  .t-rust{animation:kRust 12s linear infinite both}
  .t-teal{animation:kTeal 12s linear infinite both}
  .tg-ok{animation:kOk 12s linear infinite both}
  .tg-rust{animation:kTagRust 12s linear infinite both}
  .tg-teal{animation:kTagTeal 12s linear infinite both}
  .sum.loss{animation:kLoss 12s linear infinite both}
  .sum.gain{animation:kGain 12s linear infinite both}
  .ev .e1{animation:kE1 12s linear infinite both}
  .ev .e2{animation:kE2 12s linear infinite both}
  .ev .e3{animation:kE3 12s linear infinite both}
  .plate{animation:kPlate 12s linear infinite both}
  .av .a1{animation:kA1 12s linear infinite both}
  .av .a2{animation:kA2 12s linear infinite both}
  .lift{animation:kLift 12s linear infinite both}
}
/* 1% = 0.12 s. 0-1.4 s at rest · 1.6 s goes rust, the down arrow sinks 1.1 s · evidence rows 0.45 s each · 5.4 s Thorio plate · 6.8 s jump, up arrow 0.3 s with 5% overshoot · hold · reset */
@keyframes kRust{0%,12%{opacity:0}15%,56%{opacity:1}59%,100%{opacity:0}}
@keyframes kTeal{0%,57%{opacity:0}60%,90%{opacity:1}95%,100%{opacity:0}}
@keyframes kOk{0%,12%{opacity:1}14%,92%{opacity:0}96%,100%{opacity:1}}
@keyframes kTagRust{0%,13%{opacity:0}16%,55%{opacity:1}58%,100%{opacity:0}}
@keyframes kTagTeal{0%,58%{opacity:0}61%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes kLoss{
  0%,13%{opacity:0;transform:translateY(-18px);animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  20.5%{opacity:1;transform:translateY(2px)}
  22%,55%{opacity:1;transform:none}
  58%,100%{opacity:0;transform:none}
}
@keyframes kGain{
  0%,58%{opacity:0;transform:translateY(16px);animation-timing-function:cubic-bezier(.2,.9,.3,1)}
  60.5%{opacity:1;transform:translateY(-1px)}
  61.5%,90%{opacity:1;transform:none}
  94%,100%{opacity:0;transform:none}
}
@keyframes kE1{0%,24%{opacity:0;transform:translateX(-14px)}28%,58%{opacity:1;transform:none}62%,90%{opacity:.42;transform:none}94%,100%{opacity:0;transform:none}}
@keyframes kE2{0%,30%{opacity:0;transform:translateX(-14px)}34%,58%{opacity:1;transform:none}62%,90%{opacity:.42;transform:none}94%,100%{opacity:0;transform:none}}
@keyframes kE3{0%,36%{opacity:0;transform:translateX(-14px)}40%,58%{opacity:1;transform:none}62%,90%{opacity:.42;transform:none}94%,100%{opacity:0;transform:none}}
@keyframes kPlate{0%,45%{opacity:0;transform:translateY(8px)}49%,90%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
@keyframes kA1{0%,49%{opacity:1}51%,92%{opacity:0}96%,100%{opacity:1}}
@keyframes kA2{0%,49%{opacity:0}51%,90%{opacity:1}94%,100%{opacity:0}}
@keyframes kLift{0%,56.5%{transform:none}60%{transform:translateY(-8px)}63%,100%{transform:none}}