:root{
  --paper:#faf9f6; --card:#fff; --paper2:#f2efe9;
  --ink:#0c0d10; --ink2:#3a3e47; --dim:#5b606b; --faint:#8b8f99;
  --line:rgba(12,13,16,.13); --line2:rgba(12,13,16,.06);
  --acc:#c2410c; --hot:#ff4d00; --soft:rgba(255,77,0,.08);
  --live:#0c7a3a;
  --disp:"Sora",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--hot);outline-offset:3px;border-radius:4px}
.w{max-width:1240px;margin:0 auto;padding:0 18px}
@media(min-width:800px){.w{padding:0 34px}}

/* --- page chrome shared by every option --- */
.optbar{position:sticky;top:0;z-index:80;background:rgba(250,249,246,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line2)}
.optbar .in{display:flex;align-items:center;gap:8px;height:52px;overflow-x:auto;
  scrollbar-width:none}
.optbar .in::-webkit-scrollbar{display:none}
.optbar b{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:-.02em;
  white-space:nowrap;margin-right:6px}
.optbar a{font-family:var(--mono);font-size:11px;padding:6px 11px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;
  border:1px solid var(--line);color:var(--dim);white-space:nowrap}
.optbar a.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}

.shead{padding:34px 0 8px}
.slab{font-family:var(--mono);font-size:10px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--acc);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.slab::before{content:"";width:20px;height:1px;background:var(--acc)}
h1{font-family:var(--disp);font-weight:800;font-size:clamp(26px,5.2vw,42px);line-height:1.04;
  letter-spacing:-.035em;margin:0;max-width:20ch;text-wrap:balance}
h1 em{font-style:normal;color:var(--acc)}
.sdesc{color:var(--dim);max-width:60ch;margin:12px 0 0;font-size:15px}
.mech{font-family:var(--mono);font-size:11px;color:var(--faint);margin:10px 0 0}

/* --- the card, shared across all four mechanics --- */
.pcard{background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:20px;display:flex;flex-direction:column;text-align:left;cursor:pointer;
  transition:border-color .3s,box-shadow .4s,transform .4s;position:relative;overflow:hidden;
  font-family:var(--body);color:var(--ink);width:100%;height:100%}
.pcard:hover{border-color:rgba(255,77,0,.4);box-shadow:0 30px 60px -46px rgba(12,13,16,.45)}
.pc-top{display:flex;align-items:center;gap:8px;margin:0 0 auto}
.pc-logo{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:-.02em}
.pc-live{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--live);display:flex;align-items:center;gap:5px}
.pc-live i{width:6px;height:6px;border-radius:50%;background:var(--live);display:block}
.pc-live.off{color:var(--faint)} .pc-live.off i{background:var(--faint)}
.pc-title{font-family:var(--disp);font-weight:600;font-size:16px;line-height:1.3;
  letter-spacing:-.02em;margin:16px 0 0}
.pc-sector{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);margin:10px 0 0}
.pc-metric{display:flex;align-items:baseline;gap:7px;margin:12px 0 0}
.pc-metric b{font-family:var(--disp);font-weight:800;font-size:24px;letter-spacing:-.03em;
  color:var(--hot);line-height:1;font-variant-numeric:tabular-nums}
.pc-metric span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint)}
.pc-cue{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--acc);margin:14px 0 0;opacity:0;transition:opacity .3s}
.pcard:hover .pc-cue{opacity:1}

/* --- the morph detail (shared) --- */
.scrim{position:fixed;inset:0;background:rgba(12,13,16,.45);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .35s;z-index:90}
.scrim.on{opacity:1;pointer-events:auto}
.detail{position:fixed;z-index:95;background:var(--card);border:1px solid var(--line);
  border-radius:18px;overflow:hidden auto;opacity:0;pointer-events:none;
  box-shadow:0 60px 120px -50px rgba(12,13,16,.55)}
.detail.on{opacity:1;pointer-events:auto}
.dt-in{padding:24px}
@media(min-width:700px){.dt-in{padding:32px}}
.dt-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);background:var(--card);cursor:pointer;font-size:16px;
  display:grid;place-items:center;color:var(--dim);z-index:2}
.dt-close:hover{border-color:var(--ink);color:var(--ink)}
.dt-eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--acc);margin:0 0 10px}
.dt-h{font-family:var(--disp);font-weight:800;font-size:clamp(21px,4vw,30px);line-height:1.12;
  letter-spacing:-.03em;margin:0 0 12px;max-width:22ch}
.dt-lead{color:var(--dim);font-size:15px;margin:0 0 20px;max-width:58ch}
.dt-grid{display:grid;grid-template-columns:1fr;gap:18px;margin:0 0 20px}
@media(min-width:620px){.dt-grid{grid-template-columns:1.15fr .85fr;gap:26px}}
.dt-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin:0 0 8px}
.dt-list{margin:0;padding-left:17px;font-size:14px;color:var(--ink2)}
.dt-list li{margin:0 0 7px}.dt-list li::marker{color:var(--hot)}
.dt-stats{display:flex;flex-direction:column;gap:10px}
.dt-stat{border:1px solid var(--line2);border-radius:10px;padding:12px 14px;background:var(--paper)}
.dt-stat b{font-family:var(--disp);font-weight:800;font-size:22px;letter-spacing:-.03em;
  color:var(--hot);display:block;line-height:1;font-variant-numeric:tabular-nums}
.dt-stat span{font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);display:block;margin:5px 0 0}
.dt-stack{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 22px}
.dt-tag{font-family:var(--mono);font-size:10.5px;color:var(--dim);background:var(--paper2);
  padding:4px 9px;border-radius:4px}
.dt-cta{display:flex;flex-wrap:wrap;gap:10px;padding:18px 0 0;border-top:1px solid var(--line2)}
.b{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:46px;
  padding:0 20px;border-radius:999px;font-weight:600;font-size:14.5px;cursor:pointer;
  border:1px solid transparent;font-family:var(--body)}
.b.p{background:var(--hot);color:#fff}
.b.s{border-color:var(--line);color:var(--ink)}
.b.s:hover{border-color:var(--ink)}
.note{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin:26px 0 0;line-height:1.9}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}