/* ============================================================
   AngrySheep.ai — premium design system (app.css)
   Used by: index.html only (the for-* pages use uc.css)
   No build step. No external scripts. No external images.
   All SVG paint is plain HEX (oklch breaks SVG fill in Safari).
   ============================================================ */

:root{
  /* --- surfaces: pure obsidian (cyber-brutalist) --- */
  --bg:        #080808;   /* page canvas */
  --bg-1:      #0D0D0E;   /* raised band */
  --bg-2:      #121214;   /* card */
  --bg-3:      #1B1B1E;   /* lifted / inner */
  --glass:     rgba(16,16,18,.66);

  /* --- hairlines & borders (white at low alpha) --- */
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.14);   /* hover */
  --line-soft: rgba(255,255,255,.05);

  /* --- ink (zinc ramp) --- */
  --ink:       #F4F4F5;
  --ink-dim:   #A8A8B0;
  --ink-faint: #909099;   /* AA-safe (>=5.2:1 on every surface) — dimmest text tier */

  /* --- accent: hazard / electric orange --- */
  --accent:      #FF4500;
  --accent-2:    #FF6A38;   /* hover / gradient top */
  --accent-deep: #D63A12;   /* pressed */
  --accent-ink:  #160800;   /* text on accent */
  --glow:        rgba(255,69,0,.5);
  --glow-soft:   rgba(255,69,0,.15);

  /* --- status (disciplined: orange / amber / zinc) --- */
  --st-active: #FF4500;
  --st-test:   #F5B544;
  --st-queue:  #909099;
  --ok:        #4ADE80;   /* sparing: "covered/healthy" ticks */

  /* hex mirrors for SVG paint (NEVER use oklch/var-to-oklch in SVG) */
  --svg-accent: #FF4500;
  --svg-accent-2: #FF6A38;
  --svg-dim:    #5A5A63;
  --svg-line:   #2A2A30;
  --svg-ink:    #C9C9D0;
  --svg-faint:  #76767F;
  --svg-bg:     #0B0B0C;
  --svg-bg2:    #161619;

  --maxw: 1280px;
  --pad: clamp(1.15rem, 4vw, 3rem);
  --band: clamp(4.5rem, 9vw, 8.5rem);
  --r:    18px;   /* big cards */
  --r-2:  13px;   /* inner */
  --r-pill: 999px;
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);

  --z-nav: 100;

  --font-display:"Anton", system-ui, sans-serif;          /* big mastheads only */
  --font-body:"Plus Jakarta Sans", system-ui, sans-serif; /* everything else */
  --font-mono:"JetBrains Mono", ui-monospace, monospace;   /* labels + terminal */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body);
  font-size:clamp(1rem,.97rem + .2vw,1.08rem);
  line-height:1.62; font-weight:400; letter-spacing:-0.011em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ambient depth: fixed radial glows + grain (cheap, premium) */
body::before{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 82% -6%, rgba(255,87,34,.13), transparent 60%),
    radial-gradient(55% 45% at 8% 4%, rgba(255,122,69,.06), transparent 55%),
    radial-gradient(80% 60% at 50% 120%, rgba(255,87,34,.05), transparent 60%);
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}

img,svg{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; color:inherit}
::selection{background:var(--accent); color:var(--accent-ink)}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px; border-radius:6px}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--pad); position:relative}
main,section,header,footer{position:relative; z-index:1}

/* ---------- type ---------- */
/* visually-hidden but readable by screen readers */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.72rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
}
.eyebrow::before{content:""; width:18px; height:1px; background:var(--accent); opacity:.7}

/* display headlines = Anton (the signature) */
h1,h2,.display{
  font-family:var(--font-display); font-weight:400; line-height:.94;
  letter-spacing:-0.01em; text-transform:uppercase; text-wrap:balance; margin:0;
}
h1{font-size:clamp(2.6rem,1.2rem + 6vw,5rem); letter-spacing:-0.02em}
h2{font-size:clamp(2.2rem,1.5rem + 3.6vw,4.4rem)}
.hit{color:var(--accent)}

/* sub-headers / card titles = Plus Jakarta extrabold (the clean voice) */
h3,.h-sub{
  font-family:var(--font-body); font-weight:800; line-height:1.12;
  letter-spacing:-0.02em; margin:0; color:var(--ink);
  font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);
}
p{text-wrap:pretty; margin:0}
.lead{font-size:clamp(1.08rem,1rem + .55vw,1.35rem); color:var(--ink-dim); line-height:1.55; max-width:60ch; font-weight:400}

/* ---------- buttons ---------- */
.btn{
  --by:.95rem; --bx:1.5rem;
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:var(--by) var(--bx); font-family:var(--font-body); font-weight:700;
  font-size:1rem; letter-spacing:-0.01em; line-height:1;
  border-radius:var(--r-pill); border:1px solid transparent;
  transition:transform .22s var(--ease), background .22s var(--ease),
             box-shadow .3s var(--ease), border-color .22s var(--ease);
  will-change:transform;
}
.btn-lg{--by:1.12rem; --bx:2rem; font-size:1.08rem}
.btn-primary{
  background:linear-gradient(180deg,var(--accent-2),var(--accent));
  color:var(--accent-ink);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset, 0 10px 30px -10px var(--glow);
}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,255,255,.1) inset, 0 18px 44px -12px var(--glow)}
.btn-ghost{background:rgba(255,255,255,.02); color:var(--ink); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--line-2); transform:translateY(-2px); background:rgba(255,255,255,.04)}
.btn:disabled,.btn:disabled:hover{opacity:.7; cursor:progress; transform:none}
.btn .arr{transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.link-arrow{display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:var(--ink-dim); transition:color .2s}
.link-arrow:hover{color:var(--ink)}
.link-arrow .arr{transition:transform .25s var(--ease)}
.link-arrow:hover .arr{transform:translateX(4px)}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:var(--z-nav);
  -webkit-backdrop-filter:saturate(1.3) blur(14px); backdrop-filter:saturate(1.3) blur(14px);
  background:color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom:1px solid var(--line-soft)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:70px; gap:1rem}
.brand{display:flex; align-items:center; gap:.55rem; font-family:var(--font-display);
  font-size:1.4rem; letter-spacing:.01em; text-transform:uppercase}
.brand .dot{color:var(--accent)}
.brand svg{width:32px; height:32px}
.nav-links{display:flex; align-items:center; gap:1.7rem; font-weight:600; font-size:.95rem; color:var(--ink-dim)}
.nav-links a{transition:color .2s}
.nav-links a:hover{color:var(--ink)}
.nav .btn{--by:.6rem; --bx:1.15rem; font-size:.9rem}
@media(max-width:780px){ .nav-links{display:none} }

/* ---------- section shell ---------- */
.band{padding:var(--band) 0}
.sec-head{max-width:62ch; margin-bottom:clamp(2rem,4vw,3.4rem)}
.sec-head .eyebrow{margin-bottom:1.1rem}
.sec-head h2{margin:0}
.sec-head p{margin:1.25rem 0 0; color:var(--ink-dim); font-size:clamp(1.02rem,.98rem+.3vw,1.18rem); max-width:60ch}
.sec-head.center{margin-inline:auto; text-align:center}
.sec-head.center p{margin-inline:auto}
.sec-head p b,.decay-copy p b{color:var(--ink); font-weight:700}
section[id]{scroll-margin-top:88px}

/* generic premium card */
.card{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 24px 50px -34px rgba(0,0,0,.9);
}
.card.lift{transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease)}
.card.lift:hover{transform:translateY(-4px); border-color:var(--line-2);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 30px 60px -34px rgba(0,0,0,.95)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:clamp(1.3rem,2.5vw,2.6rem) 0 clamp(2.5rem,5vw,4rem); overflow:visible}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2.4rem,4vw,4rem); align-items:center}
@media(min-width:921px){ .hero{min-height:calc(100vh - 70px); display:flex; flex-direction:column; justify-content:center; padding-block:clamp(1rem,2vh,2rem)} }
@media(max-width:920px){ .hero-grid{grid-template-columns:1fr; gap:2.6rem} }
.hero h1{margin:.55rem 0 0}
.cta-row{display:flex; flex-wrap:wrap; gap:.9rem 1.2rem; align-items:center}

/* ---------- HERO: Next-In-Line Creative Queue ---------- */
.queue{position:relative; padding:1.15rem; border-radius:calc(var(--r) + 4px);
  background:var(--glass); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid var(--line); box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 40px 80px -40px rgba(0,0,0,1)}
.queue::before{content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,122,69,.5), transparent 38%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude}
.queue-head{display:flex; align-items:center; justify-content:space-between; padding:.3rem .55rem .85rem}
.queue-title{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim)}
.queue-live{display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-mono); font-size:.66rem; color:var(--ink-faint)}
.queue-live .d{width:6px; height:6px; border-radius:50%; background:var(--st-active); box-shadow:0 0 0 0 var(--glow); animation:pulse 1.8s var(--ease) infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--glow)}50%{box-shadow:0 0 0 6px transparent}}
.q-list{display:flex; flex-direction:column; gap:.7rem}
.qcard{display:grid; grid-template-columns:46px 1fr auto; gap:.85rem; align-items:center;
  padding:.8rem .9rem; border-radius:var(--r-2); background:rgba(255,255,255,.025);
  border:1px solid var(--line); transition:border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease)}
.qcard:hover{border-color:var(--line-2); background:rgba(255,255,255,.05); transform:translateX(2px)}
.q-thumb{width:46px; height:58px; border-radius:9px; position:relative; overflow:hidden; flex:none;
  display:flex; align-items:flex-end; padding:5px}
.q-thumb.a{background:linear-gradient(155deg,#FF6A38,#B5360F)}
.q-thumb.b{background:linear-gradient(155deg,#3D6CE0,#1A2B6B)}
.q-thumb.c{background:linear-gradient(155deg,#2BB673,#125438)}
.q-thumb.d{background:linear-gradient(155deg,#8A5BD6,#3A1F6B)}
.q-thumb span{font-family:var(--font-mono); font-size:.5rem; font-weight:700; color:rgba(255,255,255,.92); letter-spacing:.04em}
.q-body{min-width:0}
.q-name{font-weight:700; font-size:.92rem; letter-spacing:-0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
@media(max-width:480px){ .q-name{white-space:normal; overflow:visible; text-overflow:clip; line-height:1.25} }
.q-sub{font-family:var(--font-mono); font-size:.66rem; color:var(--ink-faint); margin-top:.15rem}
.q-bar{height:5px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; margin-top:.5rem}
.q-bar i{display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent-2),var(--accent)); width:var(--w,60%)}
.js .q-bar i{width:0}   /* JS-on: start empty, grow on reveal; JS-off: bars render filled */
.q-side{display:flex; flex-direction:column; align-items:flex-end; gap:.4rem; flex:none}
.q-tag{font-family:var(--font-mono); font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:.24rem .5rem; border-radius:var(--r-pill); border:1px solid currentColor; display:inline-flex; align-items:center; gap:.35rem}
.q-tag .d{width:5px; height:5px; border-radius:50%; background:currentColor}
.q-tag.active{color:var(--st-active)}
.q-tag.active .d{animation:pulse 1.8s var(--ease) infinite}
.q-tag.testing{color:var(--st-test)}
.q-tag.queued{color:var(--st-queue)}
.q-roas{font-family:var(--font-mono); font-size:.74rem; font-weight:700; color:var(--ink); white-space:nowrap}
.q-roas span{color:var(--ink-faint); font-weight:500}
.queue-foot{margin-top:.85rem; padding:.55rem; text-align:center; font-family:var(--font-mono); font-size:.62rem; color:var(--ink-faint); letter-spacing:.03em}

/* ============================================================
   MECHANISM STRIP (honest trust bar)
   ============================================================ */
.mech{border-block:1px solid var(--line-soft); background:var(--bg-1); padding:clamp(2.2rem,4.5vw,3.4rem) 0}
.mech-head{text-align:center; margin-bottom:clamp(1.3rem,2.6vw,2rem)}
.mech-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(.9rem,1.8vw,1.4rem)}
.mfn{display:flex; gap:.8rem; align-items:flex-start; padding:1.05rem 1.15rem;
  border:1px solid var(--line); border-radius:var(--r-2); background:var(--bg-2);
  transition:border-color .2s var(--ease), transform .2s var(--ease)}
.mfn:hover{border-color:color-mix(in srgb,var(--accent) 30%, var(--line)); transform:translateY(-2px)}
.mfn-ico{flex:none; width:36px; height:36px; display:grid; place-items:center;
  border:1px solid color-mix(in srgb,var(--accent) 28%, var(--line)); border-radius:10px;
  background:rgba(255,69,0,.06); box-shadow:0 0 12px -6px var(--glow)}
.mfn-ico svg{width:18px; height:18px}
.mfn-tx{min-width:0}
.mfn h3{font-size:.94rem; font-weight:700; letter-spacing:-0.01em; color:var(--ink); margin:.1rem 0 .3rem}
.mfn p{font-size:.82rem; line-height:1.45; color:var(--ink-dim)}
@media(max-width:960px){ .mech-grid{grid-template-columns:repeat(2,1fr)} }
@media(max-width:540px){ .mech-grid{grid-template-columns:1fr} }

/* ============================================================
   DECAY (the decline) — split + glowing chart + auto overlay
   ============================================================ */
.split{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(1.6rem,4vw,3.2rem); align-items:center}
.split.rev{grid-template-columns:1.15fr 1fr}
@media(max-width:880px){ .split,.split.rev{grid-template-columns:1fr; gap:2rem} }
.metric-chips{display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.7rem}
.mchip{border:1px solid var(--line); border-radius:var(--r-2); padding:.7rem .95rem; background:var(--bg-2); min-width:96px}
.mchip b{display:block; font-family:var(--font-display); font-size:1.7rem; color:var(--accent); line-height:.9; letter-spacing:-0.01em}
.mchip span{font-family:var(--font-mono); font-size:.66rem; color:var(--ink-dim); letter-spacing:.01em; display:block; margin-top:.35rem}
.mchip-note{display:block; margin-top:.85rem; font-family:var(--font-mono); font-size:.66rem; color:var(--ink-dim); letter-spacing:.02em}

.viz-card{position:relative; padding:clamp(1.2rem,3vw,1.8rem); border-radius:var(--r);
  background:linear-gradient(180deg, var(--bg-2), #0F0F11); border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -40px rgba(0,0,0,1); overflow:hidden}
.viz-card::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 50% at 30% 0%, rgba(255,87,34,.10), transparent 60%)}
.viz-tag{position:absolute; top:1rem; right:1.1rem; z-index:2; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.viz-cap{display:block; margin-top:.7rem; font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint); letter-spacing:.02em; position:relative; z-index:2}
.viz-card svg{width:100%; max-width:520px; height:auto; display:block; margin-inline:auto; position:relative; z-index:1}

/* SVG decay chart — HEX ONLY */
.dc-axis{stroke:#2A2A30; stroke-width:1}
.dc-grid{stroke:#1C1C22; stroke-width:1; stroke-dasharray:2 4}
.dc-area{fill:#FF4500; opacity:.13}
.dc-line{fill:none; stroke:#FF4500; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 5px rgba(255,87,34,.55))}
.dc-next{fill:none; stroke:#FF6A38; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:4 4}
.dc-dot{fill:#FF4500}
.dc-dot-ring{fill:none; stroke:#FF6A38; stroke-width:1.5; opacity:.6}
.dc-lbl-hi{fill:#FF4500; font-family:var(--font-mono); font-size:10px; font-weight:700}
.dc-lbl-ink{fill:#C9C9D0; font-family:var(--font-mono); font-size:10px; font-weight:700}

/* the "automation fires" overlay card sitting on the chart */
.decay-overlay{position:absolute; left:clamp(.9rem,3vw,1.6rem); bottom:clamp(.9rem,3vw,1.6rem); z-index:3;
  max-width:230px; padding:.75rem .85rem; border-radius:var(--r-2);
  background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border:1px solid var(--line-2); box-shadow:0 20px 40px -22px rgba(0,0,0,1)}
.decay-overlay .ov-k{display:flex; align-items:center; gap:.45rem; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:.4rem}
.decay-overlay .ov-k .d{width:6px; height:6px; border-radius:50%; background:var(--accent); animation:pulse 1.8s var(--ease) infinite}
.decay-overlay p{font-size:.82rem; color:var(--ink); line-height:1.4}
.decay-overlay p b{color:var(--accent); font-weight:700}
/* below 1200 the chart column is too small for the floating overlay: dock it in flow under the SVG */
@media(max-width:1199px){ .decay-overlay{position:static; margin-top:.85rem; max-width:none} }

/* ============================================================
   PIPELINE diagram (the infrastructure)
   ============================================================ */
.pipe{position:relative; margin-top:clamp(1.5rem,4vw,2.5rem)}
.pnode{position:relative; padding:clamp(1.3rem,2.6vw,1.7rem); border-radius:var(--r); background:var(--bg-2);
  border:1px solid var(--line); box-shadow:0 24px 50px -36px rgba(0,0,0,.9);
  transition:border-color .3s var(--ease), transform .3s var(--ease)}
.pnode:hover{border-color:var(--line-2); transform:translateY(-4px)}
.pnode .pn-ico{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; margin-bottom:1rem;
  background:var(--glow-soft); border:1px solid color-mix(in srgb,var(--accent) 35%, transparent)}
.pnode .pn-ico svg{width:20px; height:20px}
.pnode .pn-step{font-family:var(--font-mono); font-size:.64rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}
.pnode h3{margin:.35rem 0 .55rem; font-size:1.3rem}
.pnode p{color:var(--ink-dim); font-size:.95rem; line-height:1.5}
.pnode .pn-tag{display:inline-block; margin-top:1rem; font-family:var(--font-mono); font-size:.66rem; color:var(--ink-faint);
  border:1px solid var(--line); border-radius:var(--r-pill); padding:.3rem .65rem}
/* ============================================================
   STRATEGIST DASHBOARD — bento
   ============================================================ */
.bento{display:grid; grid-template-columns:repeat(6,1fr); gap:clamp(.9rem,2vw,1.3rem); grid-auto-flow:dense}
.bento-card{background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r); padding:clamp(1.2rem,2.6vw,1.7rem);
  box-shadow:0 1px 0 rgba(255,255,255,.03) inset, 0 24px 50px -36px rgba(0,0,0,.9);
  transition:border-color .3s var(--ease); position:relative; overflow:hidden; display:flex; flex-direction:column}
.bento-card:hover{border-color:var(--line-2)}
.col-2{grid-column:span 2}.col-3{grid-column:span 3}.col-4{grid-column:span 4}.col-6{grid-column:span 6}
@media(max-width:920px){ .bento{grid-template-columns:repeat(2,1fr)} .col-2,.col-3,.col-4{grid-column:span 1} .col-6{grid-column:span 2} }
@media(max-width:560px){ .bento{grid-template-columns:1fr} .col-2,.col-3,.col-4,.col-6{grid-column:span 1} }
.b-eyebrow{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.9rem; display:flex; align-items:center; gap:.5rem}
.b-eyebrow .d{width:6px; height:6px; border-radius:50%; background:var(--accent)}

/* metrics card */
.statline{display:flex; align-items:baseline; gap:.4rem}
.statline b{font-family:var(--font-display); font-size:clamp(2.4rem,1.8rem+2vw,3.4rem); line-height:.85; color:var(--ink); letter-spacing:-0.01em}
.statline .u{font-family:var(--font-mono); font-size:.8rem; color:var(--accent); font-weight:700}
.statsub{font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint); margin-top:.5rem}
.sp-line{fill:none; stroke:#FF4500; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; filter:drop-shadow(0 0 4px rgba(255,87,34,.5))}
.ministat b{display:block; font-family:var(--font-display); font-size:1.7rem; line-height:.9; color:var(--ink)}
.ministat span{font-family:var(--font-mono); font-size:.66rem; color:var(--ink-faint)}

/* creative matrix */
.matrix{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; margin-top:.2rem}
.mtile{border:1px solid var(--line); border-radius:var(--r-2); padding:.75rem .8rem; background:rgba(255,255,255,.02);
  display:flex; flex-direction:column; gap:.55rem; transition:border-color .2s}
.mtile:hover{border-color:var(--line-2)}
.mtile-top{display:flex; align-items:center; justify-content:space-between; gap:.5rem}
.mtile .mt-name{font-size:.78rem; font-weight:700; letter-spacing:-0.02em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0}
.mt-bars{display:flex; align-items:flex-end; gap:3px; height:26px}
.mt-bars i{flex:1; border-radius:2px 2px 0 0; background:#3A3A42; min-height:3px}
.mtile.on .mt-bars i{background:#FF4500}
.mt-meta{font-family:var(--font-mono); font-size:.62rem; color:var(--ink-faint)}
/* toggle switch (illustrative) */
.toggle{width:30px; height:17px; border-radius:99px; background:#2C2C33; border:1px solid var(--line); position:relative; flex:none; cursor:pointer; transition:background .25s var(--ease)}
.toggle::before{content:""; position:absolute; inset:-14px -8px}   /* invisible 44px-tall touch target */
.toggle::after{content:""; position:absolute; top:1px; left:1px; width:13px; height:13px; border-radius:50%; background:#76767F; transition:transform .25s var(--ease), background .25s var(--ease)}
.toggle.on{background:color-mix(in srgb,var(--accent) 32%, #2C2C33)}
.toggle.on::after{transform:translateX(13px); background:var(--accent)}

/* terminal / automation log */
.term{font-family:var(--font-mono); display:flex; flex-direction:column; min-height:0}
.term-head{display:flex; align-items:center; gap:.5rem; padding-bottom:.85rem; border-bottom:1px solid var(--line-soft); margin-bottom:.85rem}
.term-dots{display:flex; gap:.35rem}
.term-dots i{width:9px; height:9px; border-radius:50%; background:#2C2C33}
.term-dots i:first-child{background:#E8431A}
.term-title{font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); margin-left:.3rem}
.term-body{font-size:.76rem; line-height:1.75; color:var(--ink-dim); flex:1; min-height:120px; overflow:hidden}
.term-line{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.term-line .tt{color:var(--ink-faint)}
.term-line .lv{font-weight:700}
.term-line .lv.sys{color:var(--accent)}
.term-line .lv.ok{color:var(--ok)}
.term-line .lv.scan{color:var(--st-test)}
.term-cursor{display:inline-block; width:7px; height:1em; background:var(--accent); vertical-align:-2px; animation:blink 1s steps(2) infinite}
@keyframes blink{0%,50%{opacity:1}51%,100%{opacity:0}}

.bento-note{margin-top:clamp(1.1rem,2.5vw,1.6rem); text-align:center; font-family:var(--font-mono); font-size:.72rem; color:var(--ink-faint)}
.bento-note em{font-style:normal; color:var(--ink-dim)}

/* ============================================================
   FUNNEL coverage (kept, restyled) — small honest scorecard
   ============================================================ */
.funnel{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,2vw,1.1rem)}
@media(max-width:920px){ .funnel{grid-template-columns:1fr} }
.fstage{border:1px solid var(--line); border-radius:var(--r-2); background:var(--bg-2); padding:clamp(1.1rem,2.4vw,1.5rem); display:flex; flex-direction:column; gap:.5rem; position:relative; overflow:hidden; transition:transform .25s var(--ease), border-color .25s var(--ease)}
.fstage:hover{transform:translateY(-2px)}
.fstage:not(.gap):hover{border-color:var(--line-2)}
.fstage .fkick{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.fstage h3{font-size:1.2rem}
.fstage .frole{color:var(--ink-faint); font-size:.84rem}
@media(min-width:921px){ .fstage .frole{min-height:4.86em} }
.fscore{display:flex; align-items:baseline; gap:.3rem}
.fscore b{font-family:var(--font-display); font-size:2.3rem; line-height:.85}
.fscore span{font-family:var(--font-mono); font-size:.7rem; color:var(--ink-faint)}
.fgauge{height:7px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden}
.fgauge i{display:block; height:100%; border-radius:99px; width:var(--w,50%)}
.fstatus{font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.06em; align-self:flex-start; padding:.22rem .55rem; border-radius:var(--r-pill)}
.fdiag{color:var(--ink-dim); font-size:.88rem; line-height:1.45}
.fstage.gap{border-color:color-mix(in srgb,var(--accent) 40%, var(--line))}
.fstage.gap::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent)}
.fstage.gap .fscore b{color:var(--accent)}
.fstage.gap .fstatus{color:var(--accent); background:var(--glow-soft)}
.fstage.healthy .fscore b{color:var(--ink)}
.fstage.healthy .fstatus{color:var(--ok); background:rgba(74,222,128,.1)}

/* ============================================================
   PRICING (kept, restyled premium)
   ============================================================ */
.assets{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.1rem}
.asset{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-2); padding:1.5rem; background:var(--bg-2); transition:transform .2s var(--ease), border-color .2s var(--ease)}
.asset:hover{transform:translateY(-3px); border-color:var(--line-2)}
.asset .t{font-family:var(--font-body); font-weight:800; font-size:1.25rem; letter-spacing:-0.02em}
.asset .d{color:var(--ink-dim); font-size:.92rem; margin:.5rem 0 1.1rem; min-height:2.6em}
.asset .pr{font-family:var(--font-mono); font-weight:700; font-size:1.5rem; color:var(--accent); margin-top:auto}
.asset .pr small{font-size:.78rem; color:var(--ink-faint); font-weight:500}
.price-note{margin-top:1.4rem; font-family:var(--font-mono); font-size:.8rem; color:var(--ink-faint); line-height:1.6}

/* ============================================================
   GUARANTEE (kept)
   ============================================================ */
.guarantee-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(.8rem,2vw,1.1rem); margin-bottom:clamp(1.4rem,3vw,2rem)}
@media(max-width:760px){ .guarantee-grid{grid-template-columns:1fr} }
.gstep{border:1px solid var(--line); border-radius:var(--r-2); background:var(--bg-2); padding:clamp(1.1rem,2.4vw,1.5rem); display:flex; flex-direction:column; gap:.5rem; transition:border-color .25s var(--ease), transform .25s var(--ease)}
.gstep:hover{border-color:var(--line-2); transform:translateY(-2px)}
.gstep .gnum{font-family:var(--font-mono); font-weight:700; color:var(--accent); font-size:.78rem; letter-spacing:.1em}
.gstep h3{font-size:1.12rem}
.gstep p{color:var(--ink-dim); font-size:.92rem; line-height:1.5}
.seal{border:1px dashed color-mix(in srgb,var(--accent) 50%, var(--line)); background:var(--glow-soft); border-radius:var(--r);
  padding:clamp(1.2rem,3vw,1.7rem); display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.4rem}
.seal .stamp{font-family:var(--font-mono); font-weight:700; font-size:.7rem; letter-spacing:.1em; color:var(--accent);
  border:1px dashed color-mix(in srgb,var(--accent) 55%, var(--line)); border-radius:var(--r-pill); padding:.5rem .85rem; flex:none}
.seal .gbig{display:block; font-family:var(--font-body); font-weight:800; font-size:clamp(1.05rem,.95rem+.6vw,1.4rem); line-height:1.15; letter-spacing:-0.02em; color:var(--ink)}
.seal .gsub{display:block; margin-top:.5rem; color:var(--ink-dim); font-size:.92rem; line-height:1.5}
.seal .gtext{flex:1; min-width:260px}

/* ============================================================
   WONT / TRUST (kept)
   ============================================================ */
.wont{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
@media(max-width:680px){ .wont{grid-template-columns:1fr} }
.wont li{background:var(--bg-2); padding:clamp(1.3rem,2.6vw,1.8rem); display:flex; gap:1rem; align-items:flex-start}
.wont .mk{flex:none; width:26px; height:26px; border-radius:50%; background:var(--glow-soft); color:var(--accent); display:grid; place-items:center; font-weight:800; font-size:.85rem; margin-top:.1rem; border:1px solid color-mix(in srgb,var(--accent) 35%, transparent)}
.wont b{display:block; font-family:var(--font-body); font-weight:800; font-size:1.08rem; letter-spacing:-0.01em; margin-bottom:.3rem; color:var(--ink)}
.wont .t{color:var(--ink-dim); font-size:.95rem; line-height:1.5}

/* ============================================================
   FINAL CTA + form
   ============================================================ */
.final{text-align:center; padding:var(--band) 0; position:relative; overflow:hidden}
.cta-shell{position:relative; max-width:680px; margin-inline:auto; padding:clamp(2.2rem,5vw,3.6rem) clamp(1.4rem,4vw,3rem);
  border:1px solid color-mix(in srgb,var(--accent) 30%, var(--line)); border-radius:calc(var(--r) + 6px);
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); overflow:hidden}
.cta-shell::before{content:""; position:absolute; left:50%; top:-30%; width:120%; height:120%; transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%, var(--glow), transparent 62%); opacity:.5; pointer-events:none}
.cta-shell > *{position:relative; z-index:1}
.final h2{margin-bottom:1rem}
.final .lead{margin:0 auto 2rem}
.signup{max-width:520px; margin-inline:auto}
.field{display:flex; gap:.6rem; flex-wrap:wrap}
.field input{flex:1 1 240px; background:rgba(255,255,255,.04); border:1px solid var(--line-2); color:var(--ink); border-radius:var(--r-pill); padding:1.05rem 1.3rem; font:inherit; font-size:1rem}
.field input::placeholder{color:var(--ink-dim)}
.field input:focus{border-color:var(--accent); outline:none; background:rgba(255,255,255,.06)}
.signup .opt{margin-top:.6rem}
.signup .opt input{width:100%; background:rgba(255,255,255,.04); border:1px solid var(--line-2); color:var(--ink); border-radius:var(--r-pill); padding:1.05rem 1.3rem; font:inherit; font-size:1rem}
.signup .opt input::placeholder{color:var(--ink-dim)}
.signup .opt input:focus{border-color:var(--accent); outline:none; background:rgba(255,255,255,.06)}
.form-note{margin-top:.9rem; font-family:var(--font-mono); font-size:.76rem; color:var(--ink-faint)}
.form-note.is-error{color:var(--accent-2)}
.success{display:none; border:1px solid var(--accent); border-radius:var(--r); padding:1.6rem; background:var(--glow-soft)}
.success.show{display:block; animation:pop .4s var(--ease)}
@keyframes pop{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.success h3{font-size:1.4rem; color:var(--accent)}
.success p{color:var(--ink-dim); margin-top:.6rem}

/* ============================================================
   FOOTER
   ============================================================ */
footer{border-top:1px solid var(--line-soft); padding:2.6rem 0}
footer .wrap{display:flex; flex-wrap:wrap; gap:1rem; justify-content:space-between; align-items:center; color:var(--ink-faint); font-size:.86rem}
footer .brand{font-size:1.15rem}
footer a{transition:color .2s} footer a:hover{color:var(--ink-dim)}
/* touch devices: pad footer links to a >=44px hit area without shifting the visual rhythm */
@media(pointer:coarse){
  footer .wrap a{display:inline-block; padding:.85rem .4rem; margin:-.72rem -.28rem}
}
.disclaimer{flex-basis:100%; min-width:100%; margin:.7rem 0 0; font-size:.74rem; line-height:1.5; max-width:82ch; color:var(--ink-faint)}

/* ============================================================
   REVEAL + reduced motion
   ============================================================ */
.js [data-reveal]{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.js [data-reveal].in{opacity:1; transform:none}
.js .hero [data-reveal]{transition-delay:calc(var(--i,0)*70ms)}

/* queue cards stagger in */
.js .q-list .qcard{opacity:0; transform:translateY(14px)}
.js .queue.in .qcard{opacity:1; transform:none; transition:opacity .55s var(--ease), transform .55s var(--ease)}
.js .queue.in .qcard:nth-child(2){transition-delay:.1s}
.js .queue.in .qcard:nth-child(3){transition-delay:.2s}
.js .queue.in .qcard:nth-child(4){transition-delay:.3s}
/* progress bars + gauges grow when section reveals (width set inline via --w) */
.js .queue.in .q-bar i{width:var(--w,60%); transition:width 1s var(--ease) .3s}
.js .funnel .fgauge i{width:0}
.js .funnel.in .fgauge i{width:var(--w,50%); transition:width .9s var(--ease)}
.js .bento-card.in .sp-line{stroke-dashoffset:0; transition:stroke-dashoffset 1.6s var(--ease) .2s}
/* decay chart draws in */
.js .dc-line{stroke-dasharray:1; stroke-dashoffset:1}
.js .viz-card.in .dc-line{stroke-dashoffset:0; transition:stroke-dashoffset 1.8s var(--ease) .15s}
.js .dc-area,.js .dc-dot,.js .dc-dot-ring,.js .dc-next,.js .dc-lbl-hi,.js .dc-lbl-ink{opacity:0}
.js .viz-card.in .dc-area{opacity:.13; transition:opacity .7s ease 1s}
.js .viz-card.in .dc-dot,.js .viz-card.in .dc-dot-ring,.js .viz-card.in .dc-lbl-hi,.js .viz-card.in .dc-lbl-ink{opacity:1; transition:opacity .6s ease 1.3s}
.js .viz-card.in .dc-next{opacity:1; transition:opacity .6s ease 1.5s}
.js .decay-overlay{opacity:0; transform:translateY(10px)}
.js .viz-card.in .decay-overlay{opacity:1; transform:none; transition:opacity .6s var(--ease) 1.6s, transform .6s var(--ease) 1.6s}
.js .btn.magnetic{transition:transform .25s var(--ease), background .22s var(--ease), box-shadow .3s var(--ease)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .js [data-reveal]{opacity:1 !important; transform:none !important}
  .js .q-list .qcard,.js .decay-overlay{opacity:1 !important; transform:none !important}
  .js .queue.in .q-bar i,.js .funnel.in .fgauge i{width:var(--w,60%) !important}
  .js .dc-line{stroke-dasharray:none !important; stroke-dashoffset:0 !important}
  .js .dc-area{opacity:.13 !important}
  .js .dc-dot,.js .dc-dot-ring,.js .dc-next,.js .dc-lbl-hi,.js .dc-lbl-ink{opacity:1 !important}
  .term-cursor,.queue-live .d,.q-tag.active .d,.decay-overlay .ov-k .d{animation:none !important}
}

/* ============================================================
   MOBILE pass
   ============================================================ */
@media(max-width:640px){
  .hero-copy{text-align:left}
  .cta-row{flex-direction:column; align-items:stretch}
  .cta-row .btn{width:100%}
  /* left-align section heads on mobile: a clean reading edge scans far better
     than centered multi-line body copy (headline + body share one left axis) */
  .sec-head,.sec-head.center{text-align:left; margin-inline:0}
  .sec-head .eyebrow{justify-content:flex-start}
  .sec-head p,.sec-head.center p{margin-inline:0}
  .mech-head{text-align:left}
  .mech-head .eyebrow{justify-content:flex-start}
  .metric-chips{justify-content:flex-start}
  /* the closing CTA also left-anchors on mobile (form button stays full-width) */
  .final{text-align:left}
  .final .eyebrow{justify-content:flex-start}
  .field{flex-direction:column}
  .field input{width:100%; flex:none}
  .signup button{width:100%}
  .nav .btn-primary{min-height:48px}
  footer .wrap{justify-content:flex-start; text-align:left}
}

/* ============================================================
   CYBER-BRUTALIST LAYER  (attitude, mascot, HUD, hazard)
   ============================================================ */

/* --- glow + alive-ness --- */
@keyframes glowpulse{0%,100%{filter:drop-shadow(0 0 9px rgba(255,69,0,.35))}50%{filter:drop-shadow(0 0 24px rgba(255,69,0,.7))}}
@keyframes scan{0%{transform:translateY(-120%)}100%{transform:translateY(120%)}}

/* --- HUD corner brackets --- */
.hud::before,.hud::after{content:""; position:absolute; width:16px; height:16px; pointer-events:none; z-index:5; border:2px solid var(--accent); opacity:.85}
.hud::before{top:9px; left:9px; border-right:0; border-bottom:0}
.hud::after{bottom:9px; right:9px; border-left:0; border-top:0}

/* --- tactical targeting grid (charts/monitors) --- */
.tac-grid::before{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:inherit;
  background-image:
    linear-gradient(rgba(255,69,0,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,69,0,.07) 1px, transparent 1px);
  background-size:32px 32px;
  -webkit-mask:radial-gradient(115% 90% at 50% 42%, #000 50%, transparent 100%);
  mask:radial-gradient(115% 90% at 50% 42%, #000 50%, transparent 100%)}
.tac-grid > *{position:relative; z-index:1}

/* --- hazard stripe divider --- */
.hazard-bar{height:9px; background:repeating-linear-gradient(-45deg, var(--accent) 0 13px, #080808 13px 26px); opacity:.92}

/* ============================================================
   HERO: ram-stamped command panel
   ============================================================ */
.hero-panel{position:relative; border-radius:calc(var(--r) + 4px); background:var(--glass);
  -webkit-backdrop-filter:blur(13px); backdrop-filter:blur(13px); border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 40px 90px -40px #000; padding:1.15rem; overflow:hidden}
.hero-panel.tac-grid::before{opacity:.6}
/* strip the inner queue's own chrome — the panel IS the frame now */
.hero-panel .queue{background:transparent; border:0; box-shadow:none; padding:0; -webkit-backdrop-filter:none; backdrop-filter:none}
.hero-panel .queue::before{content:none}
/* ============================================================
   BENTO edge-cards + ram indicator
   ============================================================ */
.ram-ind{width:15px; height:15px; flex:none; filter:drop-shadow(0 0 5px var(--glow))}
.edge-card{position:relative}
.edge-card::after{content:""; position:absolute; left:0; right:0; top:0; height:2px; z-index:2;
  background:linear-gradient(90deg, var(--accent), transparent 70%); box-shadow:0 0 10px var(--glow)}

/* ============================================================
   FINAL CTA: tactical console
   ============================================================ */
.cta-shell.console{border-color:color-mix(in srgb,var(--accent) 36%, var(--line))}
.console .prompt{display:block; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; color:var(--accent);
  text-align:left; margin:0 auto 1rem; max-width:520px}
.console .prompt::before{content:"> "; opacity:.7}
.console .field input,.console .opt input{border-radius:7px; background:#0B0B0C;
  border:2px solid transparent; border-image:repeating-linear-gradient(45deg, var(--accent) 0 5px, #0B0B0C 5px 11px) 2}
.console .field input:focus,.console .opt input:focus{border-image:none; border:2px solid var(--accent); background:#0E0E0F}
.console .field input::placeholder,.console .opt input::placeholder{color:var(--ink-dim)}
.console .field input:focus-visible,.console .opt input:focus-visible{outline:2.5px solid var(--accent); outline-offset:3px}

/* ============================================================
   HOLOGRAPHIC RAM PROJECTION (hero centerpiece)
   ============================================================ */
.holo-stage{position:relative; aspect-ratio:1/1; width:100%; max-width:min(400px, 40vh); margin:0 auto .4rem;
  display:grid; place-items:center; isolation:isolate}
.holo-ram{width:76%; height:auto; position:relative; z-index:2;
  filter:drop-shadow(0 0 16px var(--glow)) drop-shadow(0 0 3px rgba(255,69,0,.9));
  animation:glowpulse 4.6s var(--ease) infinite}
/* rotating HUD rings */
.holo-ring{position:absolute; border-radius:50%; pointer-events:none}
.holo-ring.r1{inset:7%; border:1px dashed rgba(255,69,0,.40); z-index:1; animation:spin 26s linear infinite}
.holo-ring.r2{inset:-1%; border:1px solid rgba(255,69,0,.12); z-index:1; animation:spin 64s linear infinite reverse}
.holo-ring.r1::before,.holo-ring.r1::after{content:""; position:absolute; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 7px var(--glow)}
.holo-ring.r1::before{top:-3px; left:calc(50% - 3px)} .holo-ring.r1::after{bottom:-3px; left:calc(50% - 3px)}
/* scanline sweep + static scanlines */
.holo-stage::before{content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:repeating-linear-gradient(0deg, rgba(255,69,0,.045) 0 1px, transparent 1px 4px)}
.holo-scan{position:absolute; left:6%; right:6%; height:24%; z-index:3; pointer-events:none; border-radius:50%;
  background:linear-gradient(180deg, rgba(255,69,0,.14), transparent); filter:blur(2px); animation:scan 4.4s linear infinite}
/* faint ghost herd behind */
.holo-ghost{position:absolute; z-index:0; pointer-events:none; opacity:.06; filter:grayscale(1) brightness(2.6)}
.holo-ghost.g1{width:30%; top:7%; left:3%} .holo-ghost.g2{width:24%; bottom:9%; right:4%}
/* projected data panels */
.holo-panel{position:absolute; z-index:4; background:var(--glass); -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
  border:1px solid var(--line-2); border-radius:9px; padding:.5rem .6rem; box-shadow:0 16px 32px -20px #000, 0 0 0 1px rgba(255,69,0,.08)}
.holo-panel .hp-k{display:block; font-family:var(--font-mono); font-size:.52rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-dim); margin-bottom:.4rem}
.holo-panel.tr{top:3%; right:1%} .holo-panel.bl{bottom:9%; left:0}
.matrix-mini{display:grid; grid-template-columns:repeat(4,1fr); gap:3px}
.matrix-mini i{width:8px; height:8px; border-radius:2px; background:#2A2A30}
.matrix-mini i.on{background:#FF4500; box-shadow:0 0 5px var(--glow)}
.holo-readout svg{display:block; width:80px; height:30px}
.holo-tag{display:inline-flex; align-items:center; gap:.45rem; justify-self:center; margin:.2rem auto .9rem;
  font-family:var(--font-mono); font-size:.62rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 50%, var(--line)); border-radius:var(--r-pill); padding:.4rem .8rem; background:var(--bg-1)}
.holo-tag i{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 7px var(--glow); animation:pulse 1.8s var(--ease) infinite; flex:none}
.holo-block{display:flex; flex-direction:column; align-items:center}

@media (prefers-reduced-motion:reduce){
  .holo-ram,.holo-ring,.holo-scan{animation:none !important}
  .holo-scan{display:none}
}
@media(max-width:480px){
  .holo-panel{transform:scale(.9)}
  .holo-panel.tr{right:-1%} .holo-panel.bl{left:-1%}
}

/* ============================================================
   HERO LEFT — hook + tactical bullets (CRO pass)
   ============================================================ */
.hero-hook{margin:2rem 0 0; font-size:clamp(1.1rem,1rem + .55vw,1.32rem); line-height:1.5; font-weight:400; color:var(--ink-dim); max-width:46ch}
.hero-hook b{color:var(--ink); font-weight:700}
.hero-points{list-style:none; margin:1.85rem 0 0; padding:0; display:flex; flex-direction:column; gap:.8rem; max-width:52ch}
.hero-points li{display:flex; gap:.7rem; align-items:flex-start; color:var(--ink-dim); font-size:1rem; line-height:1.45}
.hero-points li b{color:var(--ink); font-weight:700}
.bchev{width:13px; height:14px; flex:none; margin-top:.16em; filter:drop-shadow(0 0 5px var(--glow))}
.bchev path{fill:none; stroke:#FF4500; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.hero .cta-row{margin-top:1.85rem}
.cta-sub{display:block; margin-top:.95rem; font-family:var(--font-mono); font-size:.74rem; letter-spacing:.02em; color:var(--ink-faint)}
@media(max-width:640px){
  .hero-hook,.hero-points{margin-inline:0}
  .cta-sub{text-align:left}
}

/* ============================================================
   HERO VIEWPORT CONTAINMENT (desktop: cap panel, scroll queue)
   ============================================================ */
@media(min-width:921px){
  .hero-panel{display:flex; flex-direction:column; max-height:calc(100vh - 70px - 5rem)}
  .hero-panel .holo-block{flex:none}
  .hero-panel .queue{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
  .hero-panel .queue-head{flex:none}
  .hero-panel .q-list{flex:1 1 auto; min-height:0; overflow-y:auto; padding:4px 7px 2px 0;
    scrollbar-width:thin; scrollbar-color:var(--line-2) transparent;
    -webkit-mask:linear-gradient(180deg, #000 calc(100% - 24px), transparent);
    mask:linear-gradient(180deg, #000 calc(100% - 24px), transparent)}
  .hero-panel .q-list::-webkit-scrollbar{width:5px}
  .hero-panel .q-list::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px}
  .hero-panel .q-list::-webkit-scrollbar-track{background:transparent}
  .hero-panel .queue-foot{flex:none; margin-top:.55rem}
}


/* ===== BELOW-HERO REDESIGN (integrated) ===== */

/* --- decay --- */
/* ============================================================
   DECAY section — tactical monitor upgrade (#decay)
   Reuses: .viz-card, .tac-grid, .hud, .dc-* chart, .decay-overlay,
   keyframes pulse / glowpulse / scan. New paint is HEX-only in SVG.
   ============================================================ */

/* --- glowing axis labels: lift dc-lbl contrast on the monitor --- */
.dc-lbl-mon{fill:#E4E4EA; font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; paint-order:stroke;
  stroke:#080808; stroke-width:2.4px;
  filter:drop-shadow(0 0 4px rgba(255,69,0,.32))}

/* --- orange targeting crosshair locked on the hand-off --- */
.dc-reticle-v,.dc-reticle-h{stroke:#FF4500; stroke-width:1; opacity:.55; stroke-dasharray:5 5}
.dc-reticle-ring{fill:none; stroke:#FF6A38; stroke-width:1.6;
  filter:drop-shadow(0 0 5px rgba(255,69,0,.65)); transform-box:fill-box; transform-origin:center;
  animation:decay-lock 2.6s var(--ease) infinite}
.dc-reticle-core{fill:#FF4500; filter:drop-shadow(0 0 4px rgba(255,69,0,.8))}
.dc-reticle-tick{stroke:#FF6A38; stroke-width:1.5; stroke-linecap:round; fill:none}
@keyframes decay-lock{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.7; transform:scale(1.12)}}

/* --- the monitor frame: glassmorphic HUD shell wrapping the chart --- */
.decay-mon{position:relative; border-radius:calc(var(--r) + 5px); padding:.85rem;
  background:var(--glass); -webkit-backdrop-filter:blur(13px); backdrop-filter:blur(13px);
  border:1px solid var(--line-2);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 40px 90px -42px #000, 0 0 0 1px rgba(255,69,0,.05);
  overflow:hidden}
.decay-scan{position:absolute; left:0; right:0; top:0; height:38%; pointer-events:none; z-index:4;
  background:linear-gradient(180deg, rgba(255,69,0,.07), transparent); animation:scan 6s linear infinite}

/* status row: MONITOR // LIVE + pulsing dot + coord readout */
.decay-mon-top{display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.15rem .35rem .75rem; margin-bottom:.7rem; border-bottom:1px solid var(--line-soft); position:relative; z-index:5}
.decay-mon-id{display:inline-flex; align-items:center; gap:.5rem; font-family:var(--font-mono);
  font-weight:700; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent)}
.decay-mon-dot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 9px var(--glow); animation:pulse 1.8s var(--ease) infinite}
.decay-mon-coord{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-dim)}

/* let the inner chart sit flush inside the monitor — frame owns the chrome */
.decay-mon .viz-card{border-radius:var(--r); border:1px solid var(--line); box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.decay-mon .viz-card.tac-grid::before{opacity:.85}

/* --- segmented console toggles: Scale / Fatigue / Decay --- */
.decay-console{border:0; margin:1.7rem 0 0; padding:0; min-width:0}
.decay-console-lead{display:inline-flex; align-items:center; gap:.45rem; padding:0; margin-bottom:.7rem;
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-dim)}
.decay-console-lead .d{width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 7px var(--glow); animation:pulse 1.8s var(--ease) infinite; flex:none}
.decay-seg{display:inline-flex; flex-wrap:wrap; gap:6px; padding:5px; border-radius:var(--r-2);
  background:#0B0B0C; border:1px solid var(--line); box-shadow:0 1px 0 rgba(255,255,255,.03) inset}
.decay-seg-btn{display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--font-mono); font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim); background:transparent; border:1px solid transparent; border-radius:calc(var(--r-2) - 4px);
  padding:.5rem .85rem}
.decay-seg-btn .dot{width:7px; height:7px; border-radius:50%; flex:none; background:#3A3A40; box-shadow:none}
.decay-seg-btn.is-on{color:var(--accent); background:var(--bg-2);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow:0 0 0 1px rgba(255,69,0,.12), 0 0 14px -4px var(--glow)}
.decay-seg-btn.is-on .dot{background:var(--accent); box-shadow:0 0 8px var(--glow);
  animation:pulse 1.8s var(--ease) infinite}

/* --- reveal: new monitor bits fade in with the chart draw --- */
.js .dc-reticle,.js .dc-lbl-mon{opacity:0}
.js .viz-card.in .dc-reticle{opacity:1; transition:opacity .6s ease 1.45s}
.js .viz-card.in .dc-lbl-mon{opacity:1; transition:opacity .6s ease 1.3s}

@media (prefers-reduced-motion:reduce){
  .decay-scan{display:none}
  .dc-reticle-ring,.decay-mon-dot,.decay-console-lead .d,.decay-seg-btn.is-on .dot{animation:none !important}
  .js .dc-reticle,.js .dc-lbl-mon{opacity:1 !important}
}

/* --- responsive: single clean column, no horizontal overflow --- */
@media(max-width:880px){
  .decay-mon{padding:.7rem}
}
@media(max-width:640px){
  .decay-seg{display:flex; width:100%; gap:5px}
  .decay-seg-btn{flex:1 1 0; min-width:0; justify-content:center; padding:.55rem .4rem; letter-spacing:.05em}
  .decay-mon-top{flex-wrap:wrap; gap:.4rem}
}
/* --- pipeline --- */
/* ============================================================
   PIPELINE — active angle pipeline (#pipeline) redesign
   Glowing gradient pipe segments with a traveling data pulse,
   three console steps each with a unique micro-layout.
   Reuses: .band .wrap .sec-head .eyebrow .hit .hud + :root tokens.
   ============================================================ */

/* railhead status strip above the flow */
.pipe-railhead{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:760px; margin:0 auto clamp(1.1rem,2.6vw,1.6rem); padding:0 .2rem;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.12em; text-transform:uppercase}
.prh-k{color:var(--ink-faint)}
.prh-live{display:inline-flex; align-items:center; gap:.5rem; color:var(--accent); font-weight:700}
.prh-live i{width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px var(--glow); animation:pulse 1.8s var(--ease) infinite; flex:none}

/* rail grid — 3-up on desktop */
.pipe-rail{display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,3vw,2.4rem); position:relative; z-index:1}

/* console-step number watermark in each node corner */
.pnode .pn-no{position:absolute; top:.85rem; right:1rem; z-index:2;
  font-family:var(--font-mono); font-weight:800; font-size:1.5rem; line-height:1;
  letter-spacing:-.02em; color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb,var(--accent) 42%, transparent);
  opacity:.85; pointer-events:none}

/* node uses the shared .hud brackets; nudge them inside the rounded card */
.pnode.hud::before{top:11px; left:11px}
.pnode.hud::after{bottom:11px; right:11px}

/* faint accent top-edge so each node reads as a console module */
.pnode > .pn-no + .pn-ico{margin-top:.2rem}
.pnode .pn-topedge{position:absolute; left:0; top:0; height:2px; width:100%;
  border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg, var(--accent), transparent 72%);
  box-shadow:0 0 9px var(--glow); opacity:.55; z-index:2}

/* shared micro-viz frame */
.pn-viz{position:relative; margin-top:1.1rem; padding:.7rem .75rem .65rem;
  border:1px solid var(--line); border-radius:var(--r-2); background:rgba(255,255,255,.025);
  overflow:hidden}
.pn-viz [class$="-lbl"]{display:block; font-family:var(--font-mono); font-size:.56rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:.5rem}

/* node 1 — supply stack (queued angles building up) */
.pv-stack{display:flex; flex-direction:column; gap:.32rem}
.pv-stack .pv-stack-lbl{margin-bottom:.42rem}
.pv-bar{display:block; height:7px; border-radius:99px; background:rgba(255,255,255,.07); overflow:hidden}
.pv-bar b{display:block; height:100%; width:var(--w,60%); border-radius:99px;
  background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.pv-bar:nth-child(3) b{opacity:.78}
.pv-bar:nth-child(4) b{opacity:.55}
.pv-bar:nth-child(5) b{opacity:.34}

/* node 2 — allocation gauge + funnel-stage legend */
.pv-alloc{display:flex; flex-direction:column; gap:.55rem}
.pv-gauge{display:block; height:9px; border-radius:99px; position:relative;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 22%, transparent) 0 33%,
    color-mix(in srgb,var(--accent) 46%, transparent) 33% 66%,
    color-mix(in srgb,var(--accent) 80%, transparent) 66% 100%)}
.pv-gauge i{position:absolute; top:50%; left:var(--w,46%); width:3px; height:17px;
  transform:translate(-50%,-50%); border-radius:99px; background:var(--ink);
  box-shadow:0 0 8px var(--glow)}
.pv-legend{display:flex; gap:.85rem; font-family:var(--font-mono); font-size:.58rem;
  letter-spacing:.08em; color:var(--ink-dim)}
.pv-legend span{display:inline-flex; align-items:center; gap:.32rem}
.pv-legend i{width:7px; height:7px; border-radius:2px; flex:none}
.pv-legend i.g1{background:#FF6A38; opacity:.45}
.pv-legend i.g2{background:#FF6A38; opacity:.72}
.pv-legend i.g3{background:#FF4500}

/* node 3 — scale steps climbing */
.pv-scale{display:flex; flex-direction:column; gap:.5rem}
.pv-steps{display:flex; align-items:flex-end; gap:.45rem; height:40px}
.pv-steps i{flex:1; height:var(--h,50%); border-radius:5px 5px 2px 2px;
  background:linear-gradient(180deg,var(--accent-2),var(--accent-deep));
  box-shadow:0 0 10px -2px var(--glow); opacity:.9}
.pv-steps i:last-child{opacity:1; box-shadow:0 0 14px -1px var(--glow)}

/* ---- glowing pipe segment between nodes (supersedes flat .pwire) ---- */
.pipe-rail .pwire{position:absolute; top:50%; left:100%; width:clamp(1rem,3vw,2.4rem); height:3px;
  transform:translateY(-50%); z-index:4; overflow:visible; border-radius:99px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--accent) 55%, transparent),
    color-mix(in srgb,var(--accent) 12%, transparent));
  box-shadow:0 0 9px -1px var(--glow); animation:none}
.pipe-rail .pwire::before{content:none}
/* traveling data pulse riding the segment */
.pipe-rail .pwire i{position:absolute; top:50%; left:0; width:8px; height:8px; border-radius:50%;
  transform:translate(-50%,-50%); background:var(--accent);
  box-shadow:0 0 10px 2px var(--glow); animation:pipeflow 2.2s linear infinite}
.pipe-rail .pnode[data-stage="2"] .pwire i{animation-delay:.55s}
@keyframes pipeflow{0%{left:0; opacity:0}12%{opacity:1}88%{opacity:1}100%{left:100%; opacity:0}}

/* ============================================================
   PIPELINE — mobile: single column, wires become vertical
   ============================================================ */
@media(max-width:820px){
  .pipe-rail{grid-template-columns:1fr; gap:2.9rem}
  /* re-show the connector, rotated to run down into the next stacked card */
  .pipe-rail .pwire{display:block; top:100%; left:50%; width:3px;
    height:2.9rem; transform:translate(-50%,0);
    background:linear-gradient(180deg,
      color-mix(in srgb,var(--accent) 55%, transparent),
      color-mix(in srgb,var(--accent) 12%, transparent))}
  .pipe-rail .pwire i{top:0; left:50%; transform:translate(-50%,-50%); animation:pipeflowv 2.2s linear infinite}
  .pipe-rail .pnode[data-stage="2"] .pwire i{animation-delay:.55s}
  @keyframes pipeflowv{0%{top:0; opacity:0}12%{opacity:1}88%{opacity:1}100%{top:100%; opacity:0}}
  .pipe-railhead{max-width:none}
}

@media(max-width:480px){
  .pnode .pn-no{font-size:1.3rem; top:.7rem; right:.85rem}
  .pn-viz{padding:.65rem .65rem .6rem}
}

/* ---- motion safety (mirrors the global reduce block) ---- */
@media (prefers-reduced-motion:reduce){
  .pipe-rail .pwire i,.prh-live i{animation:none !important}
  .pipe-rail .pwire i{left:50%; opacity:.9}
}
/* --- herd --- */
/* ============================================================
   HERD vs WEAPON — full-bleed immersive thematic peak (#herd)
   Reuses tokens (--accent/--glow/--ink-dim/--line/--r/--ease),
   .eyebrow / .hit / h2. All SVG paint is plain HEX.
   ============================================================ */

/* break the stage out toward near-full width inside .wrap, but never
   wider than the viewport (clamp keeps the negative margin small on phones) */
.herd-wrap{padding-inline:0}
.herd-stage{
  position:relative; overflow:hidden;
  width:100vw; max-width:100vw;
  margin-inline:calc(50% - 50vw);
  padding:clamp(3.4rem,9vw,7rem) clamp(1.15rem,4vw,3rem);
  border-block:1px solid color-mix(in srgb,var(--accent) 22%, var(--line));
  isolation:isolate;
}
/* distinct, darker radial backdrop — the section visibly shifts mood */
.herd-stage::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(46% 70% at 50% 50%, rgba(255,69,0,.10), transparent 60%),
    radial-gradient(120% 120% at 50% 0%, #0B0B0C, #050505 72%);
}
/* fine grain over the whole band */
.herd-stage::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.07;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='hn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hn)'/%3E%3C/svg%3E");
}

/* hazard ticks framing the band top & bottom (in addition to the sibling .hazard-bar dividers) */
.herd-stage > .herd-core{position:relative; z-index:2}

/* --- flanking columns of the faded generic herd --- */
.herd-flank{
  position:absolute; top:0; bottom:0; z-index:1; width:clamp(120px,17vw,230px);
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px 14px;
  align-content:center; padding:clamp(1rem,3vw,2.4rem) clamp(.6rem,1.6vw,1.4rem);
  pointer-events:none;
}
.herd-flank.left{left:0}
.herd-flank.right{right:0}
/* fade the herd out toward the center so the message reads cleanly */
.herd-flank.left{
  -webkit-mask:linear-gradient(90deg, #000 6%, transparent 96%);
  mask:linear-gradient(90deg, #000 6%, transparent 96%);
}
.herd-flank.right{
  -webkit-mask:linear-gradient(270deg, #000 6%, transparent 96%);
  mask:linear-gradient(270deg, #000 6%, transparent 96%);
}
.herd-flank svg{
  width:100%; height:auto;
  filter:grayscale(1) brightness(2.4); opacity:.085;
}
.herd-flank svg:nth-child(2n){opacity:.06}

/* --- dead-center core: the headline + the commanding ram --- */
.herd-core{
  position:relative; z-index:2; max-width:62ch; margin-inline:auto;
  display:grid; place-items:center; gap:1.25rem; text-align:center;
}
.herd-core .eyebrow{justify-content:center}
.herd-core h2{max-width:19ch; margin-inline:auto}
.herd-core p{
  max-width:54ch; margin:0 auto; color:var(--ink-dim);
  font-size:clamp(1.05rem,1rem + .4vw,1.22rem);
}

/* --- holographic glowing ram, the anchor --- */
.herd-orb{
  position:relative; width:clamp(150px,26vw,250px); aspect-ratio:1/1;
  display:grid; place-items:center; margin-bottom:.3rem; isolation:isolate;
}
/* soft volumetric halo behind the ram */
.herd-orb::before{
  content:""; position:absolute; inset:-12%; z-index:0; border-radius:50%; pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,69,0,.30), rgba(255,69,0,.07) 55%, transparent 72%);
  filter:blur(6px);
}
.herd-ram{
  position:relative; z-index:2; width:62%; height:auto;
  filter:drop-shadow(0 0 18px var(--glow)) drop-shadow(0 0 4px rgba(255,69,0,.9));
  animation:glowpulse 4.4s var(--ease) infinite;
}
/* rotating HUD rings around the ram */
.herd-ring{position:absolute; border-radius:50%; pointer-events:none; z-index:1}
.herd-ring.r1{
  inset:6%; border:1px dashed rgba(255,69,0,.42);
  animation:herd-spin 24s linear infinite;
}
.herd-ring.r2{
  inset:-6%; border:1px solid rgba(255,69,0,.14);
  animation:herd-spin 60s linear infinite reverse;
}
.herd-ring.r1::before,.herd-ring.r1::after{
  content:""; position:absolute; width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 7px var(--glow);
}
.herd-ring.r1::before{top:-3.5px; left:calc(50% - 3.5px)}
.herd-ring.r1::after{bottom:-3.5px; left:calc(50% - 3.5px)}
/* scanline sweep across the ram */
.herd-scan{
  position:absolute; left:10%; right:10%; top:0; height:26%; z-index:3; pointer-events:none;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(255,69,0,.16), transparent);
  filter:blur(2px); animation:herd-sweep 4.6s linear infinite;
}
@keyframes herd-spin{to{transform:rotate(360deg)}}
@keyframes herd-sweep{0%{transform:translateY(-30%)}100%{transform:translateY(290%)}}

/* --- the two contrast chips (herd vs you) --- */
.herd-tags{display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; margin-top:.35rem}
.herd-tags span{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-dim); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:.4rem .8rem;
}
.herd-tags span.hot{
  color:var(--accent); border-color:color-mix(in srgb,var(--accent) 50%, var(--line));
  box-shadow:0 0 18px -6px var(--glow);
}

/* --- reveal: ram + rings settle in once the band scrolls into view --- */
.js .herd-orb{opacity:0; transform:scale(.92); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.js .herd-stage.in .herd-orb{opacity:1; transform:none}
.js .herd-flank{opacity:0; transition:opacity 1s var(--ease) .15s}
.js .herd-stage.in .herd-flank{opacity:1}

/* --- responsive: thin the flanks, then drop them; ram + headline stay --- */
@media(max-width:860px){
  .herd-flank{width:clamp(96px,13vw,150px); grid-template-columns:1fr}
}
@media(max-width:640px){
  .herd-flank{display:none}              /* clean single column, no overflow */
  .herd-stage{padding-inline:1.15rem}
  .herd-core{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  .herd-ram,.herd-ring,.herd-scan{animation:none !important}
  .herd-scan{display:none}
  .js .herd-orb,.js .herd-flank{opacity:1 !important; transform:none !important}
}
/* --- built+pricing --- */
/* ============================================================
   BUILT BY OPERATORS — credibility readout console
   ============================================================ */
.built-console{position:relative; margin-top:clamp(1.6rem,4vw,2.6rem); border:1px solid var(--line);
  border-radius:var(--r); background:linear-gradient(180deg, var(--bg-2), #0F0F11); overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -40px rgba(0,0,0,1)}
.built-console.tac-grid::before{opacity:.5}
.built-bar{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.7rem clamp(1rem,2.5vw,1.5rem); border-bottom:1px solid var(--line-soft);
  background:rgba(255,255,255,.02)}
.built-bar-id{font-family:var(--font-mono); font-size:.64rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint)}
.built-bar-status{display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-mono);
  font-size:.64rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.built-bar-status i{width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px var(--glow); animation:pulse 1.8s var(--ease) infinite; flex:none}
.built-body{display:grid; grid-template-columns:1.35fr auto 1fr; gap:clamp(1rem,2.5vw,1.8rem);
  align-items:center; padding:clamp(1.3rem,3vw,2rem) clamp(1.1rem,2.5vw,1.7rem)}
.built-roles-k{display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em;
  color:var(--ink-faint); margin-bottom:.9rem}
.built-merge{display:flex; flex-direction:column; gap:.7rem}
.brole{position:relative; display:flex; align-items:center; gap:.9rem; padding:.85rem 1.05rem;
  border:1px solid var(--line); border-radius:var(--r-2); background:rgba(255,255,255,.02);
  transition:border-color .25s var(--ease), transform .25s var(--ease), background .25s var(--ease)}
.brole:hover{border-color:var(--line-2); background:rgba(255,255,255,.045); transform:translateX(3px)}
.brole-no{font-family:var(--font-mono); font-size:.74rem; font-weight:700; color:var(--accent);
  letter-spacing:.04em; flex:none; width:1.6em}
.brole-txt{display:flex; flex-direction:column; gap:.12rem; min-width:0; flex:1}
.brole-txt b{font-family:var(--font-mono); font-size:.78rem; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--ink)}
.brole-txt i{font-style:normal; font-size:.86rem; color:var(--ink-dim)}
.brole-ic{width:20px; height:20px; flex:none; opacity:.9}
.built-merge-wire{display:grid; place-items:center; align-self:center; justify-self:center}
.bmw-line{display:block; width:2px; height:46px;
  background:linear-gradient(180deg, transparent, var(--accent), transparent); opacity:.7}
.bmw-arrow{font-family:var(--font-display); color:var(--accent); font-size:1.6rem; line-height:1;
  filter:drop-shadow(0 0 8px var(--glow)); margin-top:.1rem}
.built-out{position:relative; display:flex; flex-direction:column; gap:.7rem; padding:clamp(1.2rem,2.6vw,1.6rem);
  border:1px solid color-mix(in srgb,var(--accent) 40%, var(--line)); border-radius:var(--r-2);
  background:linear-gradient(160deg, var(--glow-soft), var(--bg-2))}
.built-out-k{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.08em; color:var(--accent)}
.built-out-ram{width:54px; height:54px; filter:drop-shadow(0 0 13px var(--glow)); animation:glowpulse 4.2s var(--ease) infinite}
.built-out-txt{font-size:1.05rem; line-height:1.32; color:var(--ink-dim)}
.built-out-txt b{color:var(--ink); font-family:var(--font-body); font-weight:800; letter-spacing:-0.01em}
.built-out-tag{display:inline-flex; align-items:center; gap:.45rem; align-self:flex-start;
  font-family:var(--font-mono); font-size:.6rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%, var(--line));
  border-radius:var(--r-pill); padding:.34rem .7rem; margin-top:.1rem}
.built-out-tag i{width:5px; height:5px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 6px var(--glow); flex:none}
@media(max-width:860px){
  .built-body{grid-template-columns:1fr; gap:1.1rem}
  .built-merge-wire{justify-self:start}
  .bmw-line{display:none}
  .bmw-arrow{transform:rotate(90deg); margin:0 0 0 .9rem}
}

/* ============================================================
   PRICING — technical deployment / pricing console
   ============================================================ */
.price-console{display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(1rem,2.5vw,1.5rem);
  align-items:stretch; margin-bottom:clamp(1.3rem,3vw,1.8rem)}
@media(max-width:860px){ .price-console{grid-template-columns:1fr} }

/* primary action container — commands conversion */
.price-primary{position:relative; display:flex; flex-direction:column; gap:.55rem;
  padding:clamp(1.5rem,3.5vw,2.2rem); border-radius:var(--r); overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 45%, var(--line));
  background:linear-gradient(155deg, var(--glow-soft), var(--bg-2))}
.price-primary::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 110% at 90% 0%, var(--glow-soft), transparent 60%)}
.price-primary > *{position:relative; z-index:1}
.pp-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.4rem}
.pp-k{display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font-mono); font-size:.64rem;
  font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.pp-k i{width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px var(--glow); animation:pulse 1.8s var(--ease) infinite; flex:none}
.pp-zero{font-family:var(--font-display); font-size:2.1rem; line-height:.8; color:var(--accent); letter-spacing:-0.01em}
.pp-zero small{font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.02em; margin-left:.15rem}
.price-primary h3{font-size:clamp(1.45rem,1.2rem+1.3vw,2rem)}
.price-primary p{color:var(--ink-dim); max-width:42ch; line-height:1.55}
.price-primary .btn{margin-top:.85rem; align-self:flex-start}
.pp-sub{font-family:var(--font-mono); font-size:.68rem; color:var(--ink-faint); letter-spacing:.01em; margin-top:.55rem; line-height:1.5}

/* the volume estimator — "buy outcomes, not seats" */
.price-meter{position:relative; display:flex; flex-direction:column;
  padding:clamp(1.4rem,3vw,1.9rem); border-radius:var(--r); overflow:hidden;
  border:1px solid var(--line); background:linear-gradient(180deg, var(--bg-2), #0F0F11);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 30px 60px -42px rgba(0,0,0,1)}
.price-meter.tac-grid::before{opacity:.5}
.pm-head{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.pm-k{font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint)}
.pm-ex{font-family:var(--font-mono); font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); border:1px solid color-mix(in srgb,var(--accent) 45%, var(--line));
  border-radius:var(--r-pill); padding:.22rem .55rem}
.pm-lead{margin-top:.7rem; color:var(--ink-dim); font-size:.9rem; line-height:1.5; max-width:40ch}
.pm-readout{display:flex; flex-wrap:wrap; align-items:baseline; gap:.4rem .9rem; margin-top:1.1rem}
.pm-credits{display:flex; align-items:baseline; gap:.4rem}
.pm-amt{font-family:var(--font-display); font-size:clamp(2.4rem,1.8rem+2.4vw,3.4rem); line-height:.82;
  color:var(--ink); letter-spacing:-0.01em; font-variant-numeric:tabular-nums}
.pm-unit{font-family:var(--font-mono); font-size:.78rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--accent)}
.pm-dollars{font-family:var(--font-mono); font-size:.78rem; color:var(--ink-faint); letter-spacing:.02em}
.pm-dollars b{color:var(--ink-dim); font-weight:700}
.pm-dollars span{color:var(--ink-faint)}

/* the slider: custom geometric orange handle, glowing fill track */
.pm-slider{margin-top:1.3rem}
.pm-slider input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:26px; background:transparent;
  cursor:pointer; margin:0; --fill:15.78%}
@media(pointer:coarse){ .pm-slider input[type=range]{height:44px} }
/* WebKit track + fill (driven by --fill set inline via oninput) */
.pm-slider input[type=range]::-webkit-slider-runnable-track{
  height:6px; border-radius:99px;
  background:
    linear-gradient(90deg, var(--accent), var(--accent-2)) 0/var(--fill) 100% no-repeat,
    rgba(255,255,255,.08)}
.pm-slider input[type=range]::-moz-range-track{height:6px; border-radius:99px; background:rgba(255,255,255,.08)}
.pm-slider input[type=range]::-moz-range-progress{height:6px; border-radius:99px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2))}
/* WebKit thumb — geometric orange blade (rotated square) */
.pm-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; margin-top:-6px;
  background:linear-gradient(160deg, var(--accent-2), var(--accent)); border:1px solid #FFCBB0;
  border-radius:3px; transform:rotate(45deg); box-shadow:0 0 0 4px rgba(255,69,0,.16), 0 0 12px var(--glow);
  transition:box-shadow .2s var(--ease)}
.pm-slider input[type=range]::-moz-range-thumb{
  width:18px; height:18px; background:linear-gradient(160deg, var(--accent-2), var(--accent));
  border:1px solid #FFCBB0; border-radius:3px; box-shadow:0 0 0 4px rgba(255,69,0,.16), 0 0 12px var(--glow)}
.pm-slider input[type=range]:hover::-webkit-slider-thumb{box-shadow:0 0 0 5px rgba(255,69,0,.22), 0 0 16px var(--glow)}
.pm-slider input[type=range]:focus-visible{outline:none}
.pm-slider input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--accent), 0 0 14px var(--glow)}
.pm-slider input[type=range]:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px var(--bg), 0 0 0 5px var(--accent), 0 0 14px var(--glow)}
.pm-ticks{display:flex; justify-content:space-between; margin-top:.55rem;
  font-family:var(--font-mono); font-size:.62rem; color:var(--ink-faint); letter-spacing:.04em}

.pm-yield{margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--line-soft)}
.pm-yield-k{display:block; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:.5rem}
.pm-yield-row{display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.3rem .9rem}
.pm-concepts{font-size:1.02rem; color:var(--ink-dim)}
.pm-concepts b{font-family:var(--font-display); font-size:1.7rem; line-height:.85; color:var(--accent);
  letter-spacing:-0.01em; margin-right:.15rem; font-variant-numeric:tabular-nums}
.pm-formula{font-family:var(--font-mono); font-size:.66rem; color:var(--ink-faint); letter-spacing:.02em}
.pm-foot{margin-top:auto; padding-top:1rem; font-family:var(--font-mono); font-size:.64rem;
  color:var(--ink-faint); letter-spacing:.02em; line-height:1.5}

/* per-asset pricing tiles — mono-labelled deployment rows */
.asset .asset-top{display:flex; align-items:baseline; justify-content:space-between; gap:.6rem}
.asset .asset-no{font-family:var(--font-mono); font-size:.64rem; font-weight:700; letter-spacing:.06em; color:var(--ink-faint)}
.asset .t{font-family:var(--font-body); font-weight:800; font-size:1.25rem; letter-spacing:-0.02em}

@media (prefers-reduced-motion:reduce){
  .built-bar-status i,.pp-k i,.built-out-ram{animation:none !important}
}
@media(max-width:640px){
  .built-out{align-items:flex-start}
  .price-primary .btn{align-self:stretch; width:100%}
  .pm-readout{justify-content:flex-start}
}
/* --- faq --- */
/* ============================================================
   FAQ — console knowledge-base accordion (#faq)
   ============================================================ */
.faq2{position:relative; border:1px solid var(--line); border-radius:var(--r);
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 40px 90px -50px #000}

/* console header tab */
.faq2-head{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.95rem clamp(1rem,2.6vw,1.6rem); border-bottom:1px solid var(--line)}
.faq2-tab{display:inline-flex; align-items:center; gap:.55rem; font-family:var(--font-mono);
  font-size:.66rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-dim)}
.faq2-tab .ram-ind{width:16px; height:16px}
.faq2-count{font-family:var(--font-mono); font-size:.62rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint)}

/* item rows divided by ultra-clean hairlines */
.faq2-list{display:flex; flex-direction:column}
.faq2-item{position:relative; border-top:1px solid var(--line);
  transition:background .3s var(--ease)}
.faq2-item:first-child{border-top:0}
/* left accent rail — appears + glows when open */
.faq2-item::before{content:""; position:absolute; left:0; top:0; bottom:0; width:2px; z-index:2;
  background:var(--accent); box-shadow:0 0 12px var(--glow); opacity:0;
  transform:scaleY(.2); transform-origin:center; transition:opacity .3s var(--ease), transform .35s var(--ease)}
.faq2-item[open]{background:linear-gradient(90deg, var(--glow-soft), transparent 42%)}
.faq2-item[open]::before{opacity:1; transform:scaleY(1)}
.faq2-item:hover:not([open]){background:var(--line-soft)}

/* summary row */
.faq2-item > summary{display:grid; grid-template-columns:auto 1fr auto; align-items:center;
  gap:clamp(.7rem,2vw,1.15rem); min-height:66px; padding:.45rem clamp(1rem,2.6vw,1.6rem);
  cursor:pointer; list-style:none; outline:none}
.faq2-item > summary::-webkit-details-marker{display:none}
.faq2-item > summary:focus-visible{outline:2px dashed var(--accent); outline-offset:-3px; border-radius:6px}
.faq2-idx{font-family:var(--font-mono); font-size:.7rem; font-weight:700; letter-spacing:.06em;
  color:var(--ink-faint); transition:color .25s var(--ease)}
.faq2-item[open] .faq2-idx{color:var(--accent)}
.faq2-q{font-family:var(--font-body); font-weight:700; font-size:clamp(1rem,.95rem+.4vw,1.16rem);
  letter-spacing:-0.01em; color:var(--ink); line-height:1.3}

/* technical orange PLUS -> MINUS marker (CSS only) */
.faq2-mark{position:relative; flex:none; width:26px; height:26px; border-radius:7px;
  border:1px solid var(--line-2); display:block;
  transition:border-color .25s var(--ease), background .25s var(--ease), box-shadow .3s var(--ease)}
.faq2-mark::before,.faq2-mark::after{content:""; position:absolute; left:50%; top:50%; background:var(--accent);
  border-radius:2px; transition:transform .32s var(--ease), opacity .25s var(--ease), background .25s var(--ease)}
.faq2-mark::before{width:11px; height:2px; transform:translate(-50%,-50%)}           /* horizontal bar */
.faq2-mark::after{width:2px; height:11px; transform:translate(-50%,-50%)}            /* vertical bar */
.faq2-item > summary:hover .faq2-mark{border-color:color-mix(in srgb,var(--accent) 45%, var(--line)); box-shadow:0 0 9px var(--glow-soft)}
.faq2-item[open] .faq2-mark{background:var(--accent); border-color:var(--accent); box-shadow:0 0 12px var(--glow)}
.faq2-item[open] .faq2-mark::before,
.faq2-item[open] .faq2-mark::after{background:var(--accent-ink)}
.faq2-item[open] .faq2-mark::after{transform:translate(-50%,-50%) scaleY(0); opacity:0}  /* vertical bar collapses -> minus */

/* smooth vertical expansion via grid-rows (keeps native details a11y) */
.faq2-reveal{display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease)}
.faq2-item[open] .faq2-reveal{grid-template-rows:1fr}
.faq2-a{overflow:hidden; min-height:0}
.faq2-a p{color:var(--ink-dim); line-height:1.62; max-width:74ch;
  margin:0 clamp(1rem,2.6vw,1.6rem) 1.35rem calc(26px + clamp(.7rem,2vw,1.15rem) + clamp(1rem,2.6vw,1.6rem))}
.faq2-a em{color:var(--ink); font-style:normal; font-weight:700;
  text-decoration:underline; text-decoration-color:var(--accent); text-underline-offset:3px}

/* read-only honesty footer */
.faq2-foot{display:flex; align-items:center; gap:.55rem; flex-wrap:wrap;
  padding:.85rem clamp(1rem,2.6vw,1.6rem); border-top:1px solid var(--line);
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.04em; color:var(--ink-dim);
  background:rgba(255,69,0,.04)}
.faq2-foot-dot{width:7px; height:7px; flex:none; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px var(--glow); animation:pulse 2.2s var(--ease) infinite}

/* reduced motion: no height/scale animation, instant reveal */
@media(prefers-reduced-motion:reduce){
  .faq2-reveal{transition:none}
  .faq2-item::before,.faq2-mark,.faq2-mark::before,.faq2-mark::after{transition:none}
  .faq2-foot-dot{animation:none}
}

@media(max-width:640px){
  .faq2-head{flex-wrap:wrap; gap:.4rem .8rem}
  .faq2-item > summary{grid-template-columns:1fr auto; gap:.7rem; padding-block:.7rem; min-height:0}
  .faq2-idx{grid-column:1; font-size:.62rem; margin-bottom:-.1rem}
  .faq2-q{grid-column:1; grid-row:2}
  .faq2-mark{grid-column:2; grid-row:1 / span 2; align-self:center}
  .faq2-a p{margin-left:clamp(1rem,2.6vw,1.6rem)}
}
/* --- compare --- */
/* ============================================================
   COMPARISON MATRIX CONSOLE (#compare) — static vs dynamic
   Glassmorphic HUD panel. Static column muted; dynamic column wins.
   New selectors only (.cmp2-*). Reuses .hud / .tac-grid / .eyebrow
   / .sec-head / .ram-ind already defined in app.css.
   All SVG paint inline in markup is plain HEX (#FF4500) — no oklch.
   ============================================================ */

/* --- the panel shell ---------------------------------------- */
/* .cmp2 also carries .hud .tac-grid, so it must establish a
   positioning + clipping context for those pseudo-elements. */
.cmp2{
  position:relative;
  overflow:hidden;
  margin-top:clamp(.5rem,2vw,1rem);
  padding:clamp(.4rem,1.4vw,.9rem);
  border-radius:calc(var(--r) + 4px);
  background:var(--glass);
  -webkit-backdrop-filter:blur(13px);
  backdrop-filter:blur(13px);
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 40px 90px -42px #000;
}
/* tame the tactical grid so it stays a whisper behind the matrix */
.cmp2.tac-grid::before{opacity:.5}

/* hairline "winner" edge: a soft orange glow + crisp rule running
   down the left side of the dynamic column. Positioned to land on
   the divider between the static and dynamic columns. */
.cmp2-edge{
  position:absolute;
  top:0; bottom:0;
  left:calc(clamp(.4rem,1.4vw,.9rem) + (100% - 2*clamp(.4rem,1.4vw,.9rem)) * 0.6774);   /* padding + content-width x 2.1/3.1 = the static/dynamic divider */
  width:1px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(180deg, transparent, color-mix(in srgb,var(--accent) 55%, transparent) 18% 82%, transparent);
  box-shadow:0 0 18px 1px var(--glow-soft);
}
/* the edge is a desktop affordance only — geometry breaks on stack */
@media(max-width:640px){ .cmp2-edge{display:none} }

/* --- the row grid ------------------------------------------- */
/* axis label | static approach | dynamic approach */
.cmp2-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr;
  align-items:stretch;
  border-top:1px solid var(--line);
  transition:background .15s var(--ease);
}
/* row hover: light the whole row so the eye can track it across */
.cmp2-grid:not(.cmp2-head):hover{background:rgba(255,255,255,.022)}

/* row header / axis label (left rail) */
.cmp2-axis{
  display:flex;
  align-items:center;
  padding:1.05rem clamp(.9rem,2vw,1.4rem);
  font-family:var(--font-body);
  font-weight:700;
  font-size:.98rem;
  letter-spacing:-0.01em;
  color:var(--ink);
  line-height:1.35;
  min-width:0;
}

/* --- shared cell geometry ----------------------------------- */
.cmp2-cell,
.cmp2-col{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  padding:1.05rem clamp(1rem,2.2vw,1.5rem);
  min-width:0;
}
.cmp2-cell span:last-child{ line-height:1.45 }

/* --- STATIC column: muted, neutral, recessed ---------------- */
.cmp2-static{
  color:var(--ink-dim);
  font-size:.94rem;
  background:rgba(255,255,255,.012);
}
/* muted cross — marks the static column as the losing way */
.cmp2-x{
  flex:none;
  width:15px; height:15px;
  margin-top:.16em;
  opacity:.7;
}

/* --- DYNAMIC column: the winner — sharp, lit, orange --------- */
.cmp2-dyn{
  color:var(--ink);
  font-size:.96rem;
  font-weight:600;
  letter-spacing:-0.01em;
  background:linear-gradient(180deg, rgba(255,69,0,.09), rgba(255,69,0,.045));
  border-inline:1px solid color-mix(in srgb,var(--accent) 30%, transparent);
}
/* vibrant orange geometric tick (chevron from the inline SVG) */
.cmp2-tick{
  flex:none;
  width:16px; height:16px;
  margin-top:.18em;
  filter:drop-shadow(0 0 5px var(--glow-soft));
}

/* --- column headers ----------------------------------------- */
.cmp2-head{
  border-top:0;
  margin-bottom:.1rem;
}
.cmp2-head .cmp2-axis{
  font-family:var(--font-mono);
  font-weight:500;
  font-size:.66rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-faint);
  align-items:flex-end;
  padding-bottom:1.1rem;
}
.cmp2-col{
  flex-direction:column;
  align-items:flex-start;
  gap:.35rem;
  padding-block:1.05rem 1.1rem;
}
.cmp2-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-family:var(--font-mono);
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.cmp2-title{
  font-family:var(--font-body);
  font-weight:800;
  letter-spacing:-0.02em;
  line-height:1.15;
  font-size:1.06rem;
}
/* static header: dim and quiet */
.cmp2-col.cmp2-static .cmp2-kicker{ color:var(--ink-faint) }
.cmp2-col.cmp2-static .cmp2-title{ color:var(--ink-dim) }
/* dynamic header: the hero of the table */
.cmp2-col.cmp2-dyn{ border-inline-color:color-mix(in srgb,var(--accent) 26%, transparent) }
.cmp2-col.cmp2-dyn .cmp2-kicker{ color:var(--accent) }
.cmp2-col.cmp2-dyn .cmp2-title{ color:var(--ink) }
/* .ram-ind is defined in app.css — just make sure it sits inline cleanly */
.cmp2-kicker .ram-ind{ margin-top:-1px }

/* --- footer rail -------------------------------------------- */
.cmp2-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.6rem 1.2rem;
  padding:.95rem clamp(1rem,2.2vw,1.4rem);
  border-top:1px solid var(--line-soft);
  background:rgba(255,69,0,.03);
}
.cmp2-readonly{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-family:var(--font-mono);
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--accent);
}
.cmp2-rd-dot{
  flex:none;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 8px var(--glow);
  animation:pulse 1.8s var(--ease) infinite;
}
.cmp2-note{
  font-family:var(--font-mono);
  font-size:.66rem;
  letter-spacing:.02em;
  color:var(--ink-faint);
}

/* ============================================================
   MOBILE — collapse to a clean single-column stack, no overflow
   Each row becomes: axis label (full width) → Static block →
   Dynamic block, each labelled inline so it reads without columns.
   ============================================================ */
@media(max-width:640px){
  .cmp2{ padding:.35rem }
  .cmp2.tac-grid::before{opacity:.4}

  /* every grid row stacks vertically */
  .cmp2-grid{
    grid-template-columns:1fr;
    padding:.2rem 0 .55rem;
  }

  /* axis label becomes the row's section heading */
  .cmp2-axis{
    padding:.85rem clamp(.85rem,4vw,1.1rem) .55rem;
    font-size:.8rem;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--ink);
  }

  /* both approach cells: full width, no label rail — the ✗/✓ icons carry
     the mapping (the legend above defines them once) */
  .cmp2-cell{
    align-items:flex-start;
    padding:.45rem clamp(.85rem,4vw,1.1rem);
  }
  .cmp2-cell.cmp2-static,
  .cmp2-cell.cmp2-dyn{
    border-inline:0;
    background:transparent;
  }
  .cmp2-cell::before{ content:none }
  /* the winning answer stays a fully-bordered tinted chip */
  .cmp2-cell.cmp2-dyn{
    background:linear-gradient(180deg, rgba(255,69,0,.10), rgba(255,69,0,.04));
    border:1px solid color-mix(in srgb,var(--accent) 28%, var(--line));
    border-radius:var(--r-2);
    margin:.2rem clamp(.85rem,4vw,1.1rem) .4rem;
    padding:.6rem .85rem;
  }

  /* header rows -> one compact legend: ✕ static way / ✓ pipeline */
  .cmp2-head .cmp2-axis{ display:none }
  .cmp2-head{ gap:0; padding:.35rem 0 .45rem }
  .cmp2-kicker{ display:none }
  .cmp2-col{
    flex-direction:row;
    align-items:center;
    gap:.5rem;
    padding:.3rem clamp(.85rem,4vw,1.1rem);
  }
  .cmp2-col.cmp2-dyn{ border:0; background:transparent }
  .cmp2-title{ font-size:.88rem; font-weight:600 }
  .cmp2-col .cmp2-title::before{ font-weight:800; margin-right:.5rem }
  .cmp2-col.cmp2-static .cmp2-title::before{ content:"✕"; color:#8A8A92 }
  .cmp2-col.cmp2-dyn .cmp2-title::before{ content:"✓"; color:var(--accent) }

  .cmp2-foot{
    flex-direction:column;
    align-items:flex-start;
    gap:.45rem;
    padding:.85rem clamp(.85rem,4vw,1.1rem);
  }
}

/* ============================================================
   MOTION — honor reduced-motion (only the live foot dot animates)
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .cmp2-rd-dot{ animation:none !important }
}

/* --- dashboard --- */
/* ============================================================
   STRATEGIST DASHBOARD — interlocking asymmetric bento (DELTA)
   New markup: #dashboard .dash-bento
   Layout on the existing 6-track .bento grid:
     row 1  →  .col-3 (scale velocity)  +  .col-3 (angle matrix)   = 6
     row 2  →  .col-2 (automation log)   +  .col-4 (funnel)         = 6
   Both rows fill all 6 tracks → no empty cells on desktop.
   .col-2/.col-3/.col-4/.col-6 and the <=900 / <=560 collapse rules
   already exist in app.css and resolve this with NO horizontal
   overflow; nothing in the base grid needs to change.
   Only additive styling below. All SVG paint is plain HEX.
   ============================================================ */

/* the dash bento can sit on tighter rows since two cards are tall */
.dash-bento{align-items:stretch}

/* ---- SCALE VELOCITY (wide, glowing vector chart) ---- */
.dash-velocity{gap:.2rem; justify-content:flex-start}
.dash-velocity .b-eyebrow{margin-bottom:1rem}

.dash-vhead{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}
.dash-vhead .statline b{font-size:clamp(2.6rem,2rem+2.2vw,3.6rem)}

.dash-trend{display:inline-flex; align-items:center; gap:.4rem; flex:none;
  font-family:var(--font-mono); font-size:.66rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%, var(--line));
  background:var(--glow-soft); border-radius:var(--r-pill); padding:.32rem .6rem;
  box-shadow:0 0 14px -4px var(--glow)}
.dash-trend svg{width:14px; height:14px; flex:none}

/* the vector area chart fills the remaining height of the wide card */
.dash-chart{position:relative; margin-top:1.1rem; min-height:0; flex:1 1 auto}
.dash-chart svg{display:block; width:100%; height:100%; min-height:130px; max-height:190px}

/* SVG paint — HEX ONLY (oklch breaks fill/stroke in Safari) */
.dash-grid{stroke:#1C1C22; stroke-width:1; stroke-dasharray:2 5}
.dash-area{fill:url(#dashVelFill)}
.dash-line{fill:none; stroke:#FF4500; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 5px rgba(255,87,34,.55))}
.dash-pt{fill:#FF4500; filter:drop-shadow(0 0 6px rgba(255,87,34,.8))}
.dash-pt-ring{fill:none; stroke:#FF6A38; stroke-width:1.5; opacity:.55; animation:dashPtPulse 2s var(--ease) infinite}
@keyframes dashPtPulse{0%,100%{opacity:.55; r:9}50%{opacity:.15; r:12}}

.dash-foot{display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:.8rem; margin-top:1.1rem;
  padding-top:1rem; border-top:1px solid var(--line-soft)}
.dash-foot .ministat b{font-size:1.55rem}

/* ---- ANGLE MATRIX card ---- */
.dash-matrix-card{justify-content:flex-start}
.dash-matrix-card .matrix{margin-top:.3rem; flex:1 1 auto; align-content:space-between}

/* ---- AUTOMATION LOG (live terminal) ---- */
.dash-term-card{justify-content:flex-start}
.dash-term{flex:1 1 auto}

/* running header pinned to the right of the term chrome */
.dash-term .term-head{flex-wrap:wrap}
.dash-run{margin-left:auto; display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.6rem; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); white-space:nowrap}
.dash-run > i{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;
  box-shadow:0 0 8px var(--glow); animation:pulse 1.6s var(--ease) infinite}

/* blinking caret after the last log line (reuses existing `blink` keyframes) */
.dash-term .term-body:not(.term-js) .term-line:last-child::after{
  content:""; display:inline-block; width:7px; height:1.05em; margin-left:.35rem;
  background:var(--accent); vertical-align:-2px; animation:blink 1s steps(2) infinite}

.dash-term-foot{margin-top:.85rem; padding-top:.7rem; border-top:1px solid var(--line-soft);
  font-family:var(--font-mono); font-size:.66rem; color:var(--ink-faint); line-height:1.5}
.dash-term-foot .lv{margin-right:.35rem}

/* ---- FUNNEL gauge fills (base .fgauge i has width but no paint) ---- */
.fstage.gap .fgauge i{background:linear-gradient(90deg,var(--accent-2),var(--accent))}
.fstage.healthy .fgauge i{background:#4ADE80}

/* ============================================================
   REVEAL hooks for the new vector chart (mirror existing sp-line)
   ============================================================ */
.js .dash-line{stroke-dasharray:1; stroke-dashoffset:1}
.js .dash-velocity.in .dash-line{stroke-dashoffset:0; transition:stroke-dashoffset 1.7s var(--ease) .2s}
.js .dash-area,.js .dash-pt,.js .dash-pt-ring{opacity:0}
.js .dash-velocity.in .dash-area{opacity:1; transition:opacity .7s ease 1s}
.js .dash-velocity.in .dash-pt,.js .dash-velocity.in .dash-pt-ring{opacity:1; transition:opacity .6s ease 1.4s}

/* ============================================================
   REDUCED MOTION — freeze caret, chart draw, running dot, point pulse
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .dash-run > i,
  .dash-pt-ring,
  .dash-term .term-body .term-line:last-child::after{animation:none !important}
  .js .dash-line{stroke-dasharray:none !important; stroke-dashoffset:0 !important}
  .js .dash-area,.js .dash-pt,.js .dash-pt-ring{opacity:1 !important}
}

/* ============================================================
   MOBILE — single column, no horizontal overflow
   (base .bento collapses to 1fr at <=560; reinforce <=640)
   ============================================================ */
@media(max-width:640px){
  .dash-vhead{flex-direction:column; gap:.8rem}
  .dash-trend{align-self:flex-start}
  .dash-foot{gap:.55rem}
  .dash-foot .ministat b{font-size:1.3rem}
  .dash-run{margin-left:0}
  .dash-term .term-head{row-gap:.4rem}
}