/* ============================================================
   briefOS — design system v2
   Engineering / teardown instrument. Depth, motion, precision.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- ink (brand text + primary dark) ---- */
  --ink:#1F1A16; --ink-soft:#2E2720; --ink-2:#3D362F; --ink-3:#827969; --ink-muted:#A89F93;
  /* deep surface used for dark sections / instrument, derived from warm ink */
  --noir:#181410; --noir-2:#211C17;
  /* ---- warm paper system ---- */
  --paper:#F5F1EA; --paper-2:#FDFAF6; --paper-card:#FFFFFF; --paper-subtle:#EDE8E0; --canvas:#F5F1EA;
  /* ---- borders ---- */
  --rule:#E8E2D9; --rule-2:#D4CCC0; --rule-strong:#C9C0B2;
  /* ---- accent: warm amber, drawn from brand warning, used sparingly for focus/active ---- */
  --signal:#C4923A; --signal-2:#D8A85A; --signal-ink:#9A6E22; --signal-glow:rgba(196,146,58,0.30);
  /* ---- semantic (structural-layer language) ---- */
  --s-hook:#5A7A9A;  --s-hook-bg:#E8EEF3;
  --s-angle:#C4923A; --s-angle-bg:#F7F0E3;
  --s-proof:#4A7C59; --s-proof-bg:#E8F0E8;
  --s-offer:#B54D4D; --s-offer-bg:#F5E8E8;
  --success:#4A7C59; --error:#B54D4D; --warning:#C4923A; --info:#5A7A9A;
  /* ---- on-dark ---- */
  --ink-surface:#211C17; --ink-surface-2:#2A241D; --ink-line:rgba(245,241,234,0.08); --ink-line-2:rgba(245,241,234,0.16);
  --paper-on-ink:rgba(245,241,234,0.74); --paper-on-ink-dim:rgba(245,241,234,0.46);
  --display:'Space Grotesk',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  --sh-1:0 1px 2px rgba(31,26,22,0.04),0 2px 8px rgba(31,26,22,0.05);
  --sh-2:0 2px 4px rgba(31,26,22,0.05),0 10px 28px rgba(31,26,22,0.09);
  --sh-3:0 6px 14px rgba(31,26,22,0.07),0 22px 56px rgba(31,26,22,0.13);
  --sh-float:0 34px 90px rgba(31,26,22,0.20);
  --maxw:1200px; --ease:cubic-bezier(0.22,1,0.36,1);
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background:var(--canvas);color:var(--ink-2);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}.reveal{opacity:1!important;transform:none!important;}}
a{color:inherit;} img{max-width:100%;display:block;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 32px;}
@media (max-width:640px){.container{padding:0 20px;}}
.display{font-family:var(--display);} .mono{font-family:var(--mono);} .ink,.text-ink{color:var(--ink);}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:0.18em;text-transform:uppercase;color:var(--ink-muted);display:inline-flex;align-items:center;gap:11px;}
.eyebrow .tick{display:inline-block;width:7px;height:7px;background:var(--ink);transform:rotate(45deg);}
.eyebrow .idx{color:var(--ink-3);}
.wordmark{display:inline-flex;align-items:center;gap:11px;font-family:var(--display);font-weight:600;letter-spacing:-0.01em;font-size:21px;color:var(--ink);text-decoration:none;}
.wordmark .mark{width:30px;height:30px;} .wordmark b{font-weight:600;}

.btn{position:relative;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:13.5px;font-weight:500;letter-spacing:0.02em;padding:15px 24px;border:1px solid transparent;border-radius:8px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .2s var(--ease),background .18s,color .18s,border-color .18s;will-change:transform;overflow:hidden;}
.btn-primary{background:var(--ink);color:var(--paper);box-shadow:var(--sh-2);}
.btn-primary:hover{background:var(--ink-soft);transform:translateY(-2px);box-shadow:var(--sh-3);}
.btn-primary:active{background:#151210;transform:translateY(0);box-shadow:var(--sh-1);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--rule-2);}
.btn-ghost:hover{background:var(--paper-subtle);transform:translateY(-2px);box-shadow:var(--sh-1);}
.btn-ghost:active{background:#E4DED5;transform:translateY(0);}
.btn .arr{transition:transform .2s var(--ease);} .btn:hover .arr{transform:translateX(4px);}
.btn-lg{padding:17px 30px;font-size:14.5px;}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2.5px solid var(--ink);outline-offset:3px;}
.btn-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(245,241,234,0.14) 50%,transparent 70%);background-size:220% 100%;background-position:220% 0;pointer-events:none;}
.btn-primary:hover::after{animation:sweep .9s var(--ease);}
@keyframes sweep{to{background-position:-120% 0;}}

.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;} .reveal.d2{transition-delay:.16s;} .reveal.d3{transition-delay:.24s;} .reveal.d4{transition-delay:.32s;}

.site-header{position:sticky;top:0;z-index:80;transition:background .3s,border-color .3s,backdrop-filter .3s;border-bottom:1px solid transparent;}
.site-header.scrolled{background:rgba(244,242,236,0.78);backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--rule);}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:72px;}
.nav-links{display:flex;align-items:center;gap:32px;}
.nav-links a{position:relative;font-family:var(--mono);font-size:12.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;transition:color .15s;padding:4px 0;}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-2px;height:1.5px;width:0;background:var(--signal);transition:width .25s var(--ease);}
.nav-links a:hover{color:var(--ink);} .nav-links a:hover::after{width:100%;}
.header-cta{display:flex;align-items:center;gap:18px;}
@media (max-width:860px){.nav-links{display:none;}}
@media (max-width:560px){.site-header .bar{height:62px;}.header-cta .btn{padding:11px 16px;font-size:12.5px;}.wordmark{font-size:18px;}.wordmark .mark{width:26px;height:26px;}}

section{position:relative;}
.section-pad{padding:110px 0;}
@media (max-width:760px){.section-pad{padding:72px 0;}}
.rule-top{border-top:1px solid var(--rule);}
.sec-head{max-width:780px;}
.sec-head h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.4vw,48px);line-height:1.06;letter-spacing:-0.03em;color:var(--ink);margin:18px 0 0;}
.sec-head p.lead{font-size:18px;line-height:1.62;color:var(--ink-2);margin:22px 0 0;max-width:660px;}
.sec-index{position:absolute;top:32px;right:32px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--ink-muted);opacity:.7;}
@media (max-width:760px){.sec-index{display:none;}}

.hero{position:relative;overflow:hidden;padding:72px 0 96px;}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(10,10,12,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(10,10,12,0.05) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 30% 35%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse 75% 70% at 30% 35%,#000 30%,transparent 78%);}
.hero-glow{position:absolute;width:620px;height:620px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(circle,var(--signal-glow),transparent 62%);filter:blur(24px);opacity:.32;}
.hero-inner{position:relative;z-index:3;display:grid;grid-template-columns:1.04fr 0.96fr;gap:52px;align-items:center;}
@media (max-width:960px){.hero-inner{grid-template-columns:1fr;gap:44px;}}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(36px,5.6vw,64px);line-height:1.0;letter-spacing:-0.038em;color:var(--ink);margin:22px 0 0;}
.hero h1 .em{position:relative;white-space:nowrap;}
.hero h1 .em::after{content:"";position:absolute;left:-2px;right:-2px;bottom:0.06em;height:0.16em;background:var(--signal);z-index:-1;opacity:.85;transform:scaleX(0);transform-origin:left;animation:ulin 1s var(--ease) .8s forwards;}
@keyframes ulin{to{transform:scaleX(1);}}
.hero-sub{font-size:clamp(16.5px,1.9vw,19px);line-height:1.58;color:var(--ink-2);margin:26px 0 0;max-width:560px;}
.hero-actions{display:flex;align-items:center;gap:16px;margin-top:32px;flex-wrap:wrap;}
.hero-microline{font-family:var(--mono);font-size:12px;color:var(--ink-muted);margin-top:16px;letter-spacing:.01em;display:flex;align-items:center;gap:8px;}
.hero-microline .dot{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 8px rgba(74,124,89,.5);animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
.hero-qual{margin-top:38px;padding-top:22px;border-top:1px solid var(--rule);font-family:var(--mono);font-size:12px;letter-spacing:.03em;color:var(--ink-muted);text-transform:uppercase;max-width:560px;line-height:1.7;}

.teardown-stage{position:relative;z-index:3;}
.td-frame{position:relative;background:var(--paper-2);border:1px solid var(--rule-2);border-radius:14px;padding:13px;box-shadow:0 30px 70px -20px rgba(31,26,22,.32),0 4px 14px rgba(31,26,22,.08);transform:perspective(1500px) rotateY(-8deg) rotateX(2.5deg);transform-style:preserve-3d;transition:transform .5s var(--ease);}
.tear-tilt:hover .td-frame{transform:perspective(1400px) rotateY(-5deg) rotateX(2deg);}
.td-bar{display:flex;align-items:center;gap:8px;padding:3px 4px 13px;}
.td-dot{width:10px;height:10px;border-radius:50%;}
.td-dot.r{background:#E5A0A0;} .td-dot.y{background:#E8C77A;} .td-dot.g{background:#9FCBA8;}
.td-filename{font-family:var(--mono);font-size:10.5px;color:var(--ink-muted);letter-spacing:.02em;margin-left:4px;}
.td-label{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--signal-ink);text-transform:uppercase;display:flex;align-items:center;gap:6px;background:rgba(196,146,58,.10);padding:4px 9px;border-radius:20px;}
.td-label .live{width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal);animation:pulse 1.4s infinite;}
.td-screen{position:relative;background:transparent;border-radius:8px;overflow:visible;}
.td-screen.td-split{display:grid;grid-template-columns:0.78fr 1fr;gap:13px;padding:0;aspect-ratio:auto;}
.td-advert{position:relative;border-radius:9px;overflow:hidden;align-self:start;background:var(--paper-card);border:1px solid var(--rule);box-shadow:0 8px 20px rgba(31,26,22,.10);}
.td-advert-img{display:block;width:100%;height:auto;}
.td-scanline{position:absolute;left:0;right:0;height:90px;z-index:4;pointer-events:none;background:linear-gradient(to bottom,transparent,rgba(216,168,90,0.22) 50%,transparent);border-top:1px solid rgba(216,168,90,.6);animation:scanv 4.2s var(--ease) infinite;}
@keyframes scanv{0%{top:-15%;}100%{top:100%;}}
.td-zone{position:absolute;left:3%;right:3%;border:1.5px solid transparent;border-radius:5px;z-index:3;transition:all .35s var(--ease);opacity:0;}
.td-zone.on{opacity:1;}
.td-zone[data-i='0'].on{border-color:var(--s-hook);background:rgba(90,122,154,.16);box-shadow:0 0 0 1px var(--s-hook);}
.td-zone[data-i='1'].on{border-color:var(--s-angle);background:rgba(196,146,58,.16);box-shadow:0 0 0 1px var(--s-angle);}
.td-zone[data-i='2'].on{border-color:var(--s-proof);background:rgba(74,124,89,.16);box-shadow:0 0 0 1px var(--s-proof);}
.td-zone[data-i='3'].on{border-color:var(--s-offer);background:rgba(181,77,77,.16);box-shadow:0 0 0 1px var(--s-offer);}
.td-findings{display:flex;flex-direction:column;gap:9px;justify-content:center;}
.tdf{position:relative;display:flex;gap:0;border:1px solid var(--rule);border-radius:9px;background:var(--paper-card);overflow:hidden;opacity:0;transform:translateX(14px);transition:opacity .4s,transform .4s,border-color .4s,box-shadow .4s;}
.tdf .tdf-bar{flex:0 0 3px;background:var(--rule-2);transition:background .4s,box-shadow .4s;}
.tdf .tdf-body{flex:1;padding:11px 14px;}
.tdf.hook .tdf-bar{background:var(--s-hook);} .tdf.angle .tdf-bar{background:var(--s-angle);} .tdf.proof .tdf-bar{background:var(--s-proof);} .tdf.mech .tdf-bar{background:var(--s-offer);}
.tdf-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;}
.tdf-tag{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;}
.tdf.hook .tdf-tag{color:var(--s-hook);} .tdf.angle .tdf-tag{color:var(--s-angle);} .tdf.proof .tdf-tag{color:var(--s-proof);} .tdf.mech .tdf-tag{color:var(--s-offer);}
.tdf-check{font-size:11px;color:var(--ink-muted);opacity:0;transform:scale(.5);transition:all .3s var(--ease);}
.tdf.lit .tdf-check{opacity:1;transform:scale(1);}
.tdf.hook.lit .tdf-check{color:var(--s-hook);} .tdf.angle.lit .tdf-check{color:var(--s-angle);} .tdf.proof.lit .tdf-check{color:var(--s-proof);} .tdf.mech.lit .tdf-check{color:var(--s-offer);}
.tdf-line{font-family:var(--display);font-weight:600;font-size:14.5px;line-height:1.25;color:var(--ink);letter-spacing:-0.005em;}
.tdf-note{font-family:var(--body);font-size:11.5px;line-height:1.4;color:var(--ink-3);margin-top:4px;}
/* inactive cards recede; lit card lifts and glows in its color */
.tdf:not(.lit){opacity:.62;}
.tdf.in:not(.lit){opacity:.62;}
.tdf.lit{opacity:1;background:var(--paper-card);transform:translateX(0) scale(1.015);}
.tdf.hook.lit{border-color:var(--s-hook);box-shadow:0 10px 26px -8px rgba(90,122,154,.4);}
.tdf.angle.lit{border-color:var(--s-angle);box-shadow:0 10px 26px -8px rgba(196,146,58,.4);}
.tdf.proof.lit{border-color:var(--s-proof);box-shadow:0 10px 26px -8px rgba(74,124,89,.4);}
.tdf.mech.lit{border-color:var(--s-offer);box-shadow:0 10px 26px -8px rgba(181,77,77,.4);}
.tdf.lit .tdf-bar{box-shadow:0 0 10px currentColor;}
.tdf.hook.lit .tdf-bar{color:var(--s-hook);} .tdf.angle.lit .tdf-bar{color:var(--s-angle);} .tdf.proof.lit .tdf-bar{color:var(--s-proof);} .tdf.mech.lit .tdf-bar{color:var(--s-offer);}
/* legend strip under the instrument */
.td-legend{margin-top:13px;display:flex;align-items:center;gap:14px;padding:0 4px;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--ink-muted);}
.tdl-item{display:flex;align-items:center;gap:6px;text-transform:uppercase;transition:color .3s;}
.tdl-item.on{color:var(--ink);font-weight:600;}
.tdl-dot{width:8px;height:8px;border-radius:50%;opacity:.4;transition:opacity .3s,box-shadow .3s;}
.tdl-item.on .tdl-dot{opacity:1;box-shadow:0 0 7px currentColor;}
.tdl-dot.hook{background:var(--s-hook);color:var(--s-hook);} .tdl-dot.angle{background:var(--s-angle);color:var(--s-angle);} .tdl-dot.proof{background:var(--s-proof);color:var(--s-proof);} .tdl-dot.mech{background:var(--s-offer);color:var(--s-offer);}
.tdl-tail{margin-left:auto;color:var(--ink-muted);text-transform:none;letter-spacing:.02em;}
.stage-reg{position:absolute;width:16px;height:16px;z-index:5;opacity:.6;}
.stage-reg::before,.stage-reg::after{content:"";position:absolute;background:var(--signal);}
.stage-reg::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%);}
.stage-reg::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%);}

.band{background:var(--noir);color:var(--paper);position:relative;overflow:hidden;}
.band .container{padding-top:64px;padding-bottom:64px;position:relative;z-index:2;}
.band-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;}
.band-cell{padding:8px 28px;border-left:1px solid var(--ink-line);}
.band-cell:first-child{border-left:0;padding-left:0;}
.band-ic{width:30px;height:30px;color:var(--signal-2);margin-bottom:14px;opacity:.9;}
.band-ic svg{width:100%;height:100%;}
.band-stat{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.2vw,48px);letter-spacing:-0.03em;line-height:1;color:var(--paper);}
.band-stat .u{font-size:.5em;}
.band-stat .u{color:var(--signal);}
.band-label{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--paper-on-ink-dim);margin-top:10px;line-height:1.5;}
@media (max-width:760px){.band-grid{grid-template-columns:1fr 1fr;gap:32px 0;}.band-cell:nth-child(odd){border-left:0;padding-left:0;}.band-cell{padding:8px 22px;}}
.marquee{border-top:1px solid var(--ink-line);overflow:hidden;background:var(--ink-soft);}
.marquee-track{display:flex;gap:0;width:max-content;animation:marq 32s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
.marq-item{display:flex;align-items:center;gap:14px;padding:16px 28px;border-right:1px solid var(--ink-line);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--paper-on-ink);}
.marq-item .k{color:var(--signal-2);}
@keyframes marq{to{transform:translateX(-50%);}}

.svs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:48px;border:1px solid var(--rule);background:var(--paper-card);box-shadow:var(--sh-2);border-radius:12px;overflow:hidden;}
.svs-pane{padding:30px;position:relative;min-height:280px;}
.svs-pane:first-child{border-right:1px solid var(--rule);}
.svs-tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:18px;display:block;}
.svs-pane.structure .svs-tag{color:var(--ink);}
.svs-mock{display:flex;flex-direction:column;gap:9px;}
.svs-line{height:12px;border-radius:3px;background:var(--rule-2);}
.svs-line.s{width:55%;} .svs-line.m{width:78%;} .svs-line.l{width:92%;}
.svs-pane.structure .svs-block{position:relative;border:1px solid var(--rule-2);border-radius:5px;padding:11px 12px 11px 14px;margin-bottom:9px;background:var(--paper-2);transition:border-color .3s,box-shadow .3s,transform .3s;}
.svs-pane.structure .svs-block::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ink);}
.svs-pane.structure .svs-block .bt{font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.svs-pane.structure .svs-block .bl{height:8px;border-radius:2px;background:var(--rule-2);margin-top:7px;}
.svs-pane.structure:hover .svs-block{box-shadow:var(--sh-1);transform:translateX(3px);}
@media (max-width:680px){.svs{grid-template-columns:1fr;}.svs-pane:first-child{border-right:0;border-bottom:1px solid var(--rule);}}

.differ{margin-top:40px;border:1px solid var(--noir);background:var(--noir);color:var(--paper);padding:28px 30px;display:flex;gap:20px;align-items:flex-start;max-width:760px;box-shadow:var(--sh-2);position:relative;overflow:hidden;border-radius:10px;}
.differ::before{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;background:radial-gradient(circle,var(--signal-glow),transparent 65%);}
.differ .num{font-family:var(--mono);font-size:12px;color:var(--signal);letter-spacing:.1em;padding-top:4px;position:relative;}
.differ p{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(18px,2.4vw,24px);line-height:1.3;letter-spacing:-0.01em;position:relative;}
.differ p b{color:var(--signal);font-weight:600;}

.demo-shell{margin-top:52px;display:grid;grid-template-columns:1fr 360px;gap:0;border:1px solid var(--rule);background:var(--paper-card);box-shadow:var(--sh-3);border-radius:12px;overflow:hidden;}
@media (max-width:920px){.demo-shell{grid-template-columns:1fr;}}
.demo-canvas{position:relative;background:linear-gradient(160deg,#211C17,#13100C);min-height:540px;display:flex;align-items:center;justify-content:center;padding:40px;}
.demo-ad{position:relative;width:min(380px,86%);aspect-ratio:1092/1440;border-radius:10px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.5);}
.demo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.demo-runtag{position:absolute;top:10px;left:10px;z-index:7;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(24,20,16,.72);backdrop-filter:blur(4px);padding:4px 8px;border-radius:5px;}
.demo-runtag .live{width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal);animation:pulse 1.4s infinite;}
.demo-slot{position:absolute;inset:0;background:repeating-linear-gradient(135deg,rgba(255,255,255,0.04) 0 14px,rgba(255,255,255,0.015) 14px 15px),#26201A;display:flex;align-items:center;justify-content:center;text-align:center;}
.demo-slot .si{padding:22px;}
.demo-slot .stag{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--signal-2);border:1px solid var(--signal);padding:4px 9px;display:inline-block;margin-bottom:12px;}
.demo-slot .stitle{font-family:var(--display);font-weight:500;font-size:14px;color:var(--paper-on-ink);line-height:1.4;}
.demo-slot .snote{font-family:var(--mono);font-size:10.5px;color:var(--paper-on-ink-dim);margin-top:8px;}
.anno{position:absolute;border:1.5px solid transparent;transition:opacity .4s var(--ease),box-shadow .4s var(--ease),background .4s var(--ease);opacity:0;border-radius:5px;}
.anno.on{opacity:1;}
.anno.hook.on{border-color:var(--s-hook);background:rgba(90,122,154,.18);box-shadow:0 0 0 1px var(--s-hook),0 0 22px rgba(90,122,154,.25);}
.anno.angle.on{border-color:var(--s-angle);background:rgba(196,146,58,.18);box-shadow:0 0 0 1px var(--s-angle),0 0 22px rgba(196,146,58,.25);}
.anno.proof.on{border-color:var(--s-proof);background:rgba(74,124,89,.20);box-shadow:0 0 0 1px var(--s-proof),0 0 22px rgba(74,124,89,.28);}
.anno.mech.on{border-color:var(--s-offer);background:rgba(181,77,77,.18);box-shadow:0 0 0 1px var(--s-offer),0 0 22px rgba(181,77,77,.25);}
.anno.hook.on{border-color:var(--s-hook);background:rgba(90,122,154,0.10);} .anno.angle.on{border-color:var(--s-angle);background:rgba(196,146,58,0.10);} .anno.proof.on{border-color:var(--s-proof);background:rgba(74,124,89,0.10);} .anno.mech.on{border-color:var(--s-offer);background:rgba(181,77,77,0.10);}
.anno .albl{position:absolute;top:-1px;left:-1px;color:#fff;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;white-space:nowrap;transform:translateY(-100%);}
.anno.hook .albl{background:var(--s-hook);} .anno.angle .albl{background:var(--s-angle);} .anno.proof .albl{background:var(--s-proof);} .anno.mech .albl{background:var(--s-offer);}
.demo-side{background:var(--paper-card);padding:26px 24px;display:flex;flex-direction:column;justify-content:center;}
.demo-side h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);margin:0 0 6px;}
.demo-side .dh-title{font-family:var(--display);font-weight:600;font-size:18px;color:var(--ink);letter-spacing:-0.01em;}
.demo-steps{list-style:none;margin:16px 0 0;padding:0;}
.demo-step{position:relative;padding:16px 10px 16px 30px;border-bottom:1px solid var(--rule);cursor:pointer;border-radius:6px;transition:background .25s;}
.demo-step:hover{background:var(--paper-2);}
.demo-step::before{content:"";position:absolute;left:0;top:19px;width:11px;height:11px;border:1.5px solid var(--rule-strong);border-radius:50%;background:var(--paper-card);transition:all .3s;z-index:2;}
.demo-step.active::before{border-color:var(--signal);background:var(--signal);box-shadow:0 0 0 4px var(--signal-glow);}
.demo-step::after{content:"";position:absolute;left:5px;top:30px;bottom:-1px;width:1.5px;background:var(--rule);}
.demo-step:last-child::after{display:none;}
.demo-step .ds-head{display:flex;align-items:center;gap:10px;}
.demo-step .ds-tc{font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-muted);background:var(--paper-subtle);padding:2px 6px;border-radius:4px;transition:all .3s;}
.demo-step.active .ds-tc{color:#fff;background:var(--ink);}
.demo-step .ds-name{font-family:var(--display);font-weight:600;font-size:15px;color:var(--ink-3);transition:color .3s;}
.demo-step.active .ds-name{color:var(--ink);}
.demo-step .ds-desc{font-size:13px;line-height:1.5;color:var(--ink-muted);margin-top:0;max-height:0;overflow:hidden;transition:max-height .4s var(--ease),margin .3s,opacity .3s;opacity:0;}
.demo-step.active .ds-desc{max-height:90px;margin-top:8px;opacity:1;}
.demo-foot{margin-top:18px;padding-top:18px;border-top:1px solid var(--rule);display:flex;align-items:center;gap:12px;}
.demo-foot button.pc{font-family:var(--mono);font-size:11px;border:1px solid var(--rule-strong);background:var(--paper-2);padding:8px 13px;cursor:pointer;transition:all .2s;color:var(--ink-3);border-radius:5px;}
.demo-foot button.pc:hover{border-color:var(--ink);color:var(--ink);}
.demo-foot .dstat{margin-left:auto;font-family:var(--mono);font-size:10.5px;color:var(--ink-muted);letter-spacing:.06em;}

.pipe{margin-top:56px;position:relative;}
.pipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative;z-index:2;}
@media (max-width:820px){.pipe-grid{grid-template-columns:1fr;gap:16px;}}
.pipe-card{background:var(--paper-card);border:1px solid var(--rule);border-radius:10px;padding:30px 26px;position:relative;box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s;overflow:hidden;}
.pipe-card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);}
.pipe-card::before{content:"";position:absolute;top:0;left:0;height:3px;width:100%;background:linear-gradient(90deg,var(--signal),var(--signal-2));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);}
.pipe-card:hover::before{transform:scaleX(1);}
.pipe-ic{width:46px;height:46px;border:1px solid var(--rule-strong);border-radius:9px;display:flex;align-items:center;justify-content:center;margin-bottom:20px;background:var(--paper-2);transition:all .3s;}
.pipe-card:hover .pipe-ic{border-color:var(--signal);background:#fff;}
.pipe-ic svg{width:22px;height:22px;}
.pipe-idx{position:absolute;top:24px;right:26px;font-family:var(--mono);font-size:12px;color:var(--ink-muted);letter-spacing:.1em;}
.pipe-card h3{font-family:var(--display);font-weight:600;font-size:19px;color:var(--ink);margin:0 0 10px;letter-spacing:-0.01em;}
.pipe-card p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0;}
.pipe-flow{position:absolute;top:54px;left:0;right:0;height:2px;z-index:1;display:none;}
@media (min-width:821px){.pipe-flow{display:block;}}
.pipe-flow .pf-line{position:absolute;top:0;left:16%;right:16%;height:2px;background:repeating-linear-gradient(90deg,var(--rule-2) 0 6px,transparent 6px 12px);}
.pipe-flow .pf-dot{position:absolute;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--signal);box-shadow:0 0 10px var(--signal-glow);left:16%;animation:pfmove 3.4s var(--ease) infinite;}
@keyframes pfmove{0%{left:16%;opacity:0;}10%{opacity:1;}90%{opacity:1;}100%{left:84%;opacity:0;}}
.pipe-close{margin-top:28px;font-family:var(--mono);font-size:13px;color:var(--ink-muted);letter-spacing:.01em;display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.engine-flow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;color:var(--ink-muted);letter-spacing:.04em;}

.decode{position:relative;margin-top:48px;border:1px solid var(--rule);border-radius:12px;overflow:hidden;box-shadow:var(--sh-3);user-select:none;background:var(--noir);aspect-ratio:16/10;max-height:620px;}
@media (max-width:640px){.decode{aspect-ratio:4/5;}}
.dc-layer{position:absolute;inset:0;}
.dc-before{background:linear-gradient(160deg,#211C17,#15110D);display:flex;align-items:center;justify-content:center;}
.dc-after{background:linear-gradient(160deg,#1B1712,#100D09);clip-path:inset(0 0 0 50%);}
.dc-tag{position:absolute;top:18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;padding:6px 11px;border:1px solid var(--ink-line-2);color:var(--paper-on-ink);border-radius:4px;background:rgba(0,0,0,.3);z-index:4;}
.dc-before .dc-tag{left:18px;} .dc-after .dc-tag{right:18px;color:#fff;border-color:var(--signal);}
.dc-surface{width:min(260px,40%);aspect-ratio:2/3;border-radius:8px;overflow:hidden;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 50px rgba(0,0,0,.5);}
.dc-img{width:100%;height:100%;object-fit:cover;display:block;}
.dc-img.dimmed{filter:brightness(.62) saturate(.85);}
.dc-surface .dc-slot-note{font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--paper-on-ink-dim);text-transform:uppercase;padding:0 16px;text-align:center;}
.dc-annoset{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;}
.dc-annobox{width:min(260px,40%);aspect-ratio:2/3;position:relative;border-radius:8px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,.5);}
.dc-region{position:absolute;left:0;right:0;border:1.5px solid var(--rule-2);border-radius:4px;}
.dc-region.r-hook{border-color:var(--s-hook);background:rgba(90,122,154,.10);} .dc-region.r-angle{border-color:var(--s-angle);background:rgba(196,146,58,.10);} .dc-region.r-proof{border-color:var(--s-proof);background:rgba(74,124,89,.10);} .dc-region.r-offer{border-color:var(--s-offer);background:rgba(181,77,77,.10);}
.dc-region .rl{position:absolute;top:-1px;left:-1px;transform:translateY(-100%);color:#fff;font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;white-space:nowrap;}
.dc-handle{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--signal);z-index:6;cursor:ew-resize;box-shadow:0 0 16px var(--signal-glow);}
.dc-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:var(--signal);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.4);color:#fff;font-size:16px;}
.dc-hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper-on-ink-dim);z-index:6;pointer-events:none;}

.teams-wrap{display:grid;grid-template-columns:1.02fr 0.98fr;gap:56px;align-items:center;}
@media (max-width:880px){.teams-wrap{grid-template-columns:1fr;gap:40px;}}
.ws-stack{position:relative;height:420px;}
.ws-card{position:absolute;left:0;right:0;background:var(--paper-card);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--sh-2);padding:20px 22px;transition:transform .4s var(--ease),box-shadow .4s;}
.ws-card .wc-top{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.ws-card .wc-mark{width:26px;height:26px;border-radius:6px;background:var(--ink);display:flex;align-items:center;justify-content:center;}
.ws-card .wc-mark svg{width:16px;height:16px;}
.ws-card .wc-name{font-family:var(--display);font-weight:600;font-size:14px;color:var(--ink);}
.ws-card .wc-meta{margin-left:auto;font-family:var(--mono);font-size:10px;color:var(--ink-muted);letter-spacing:.06em;}
.ws-card .wc-row{display:flex;gap:8px;align-items:center;padding:8px 0;border-top:1px solid var(--rule);}
.ws-card .wc-chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:3px;background:var(--paper-2);border:1px solid var(--rule);color:var(--ink-3);}
.ws-card .wc-chip.lit{background:var(--signal);color:#fff;border-color:var(--signal);}
.ws-card .wc-bar{flex:1;height:6px;border-radius:3px;background:var(--rule-2);overflow:hidden;}
.ws-card .wc-bar i{display:block;height:100%;background:var(--signal);}
.ws-card.c1{top:0;transform:translateY(0) scale(1);z-index:3;}
.ws-card.c2{top:28px;transform:translateX(28px) scale(.96);z-index:2;opacity:.85;}
.ws-card.c3{top:56px;transform:translateX(56px) scale(.92);z-index:1;opacity:.65;}
.ws-stack:hover .ws-card.c1{transform:translateY(-6px) scale(1);}
.ws-stack:hover .ws-card.c2{transform:translate(40px,18px) scale(.96);opacity:.95;}
.ws-stack:hover .ws-card.c3{transform:translate(80px,40px) scale(.92);opacity:.8;}
@media (max-width:480px){.ws-card.c2{transform:translateX(16px) scale(.96);}.ws-card.c3{transform:translateX(32px) scale(.92);}}

.who{background:var(--noir);color:var(--paper);overflow:hidden;}
.who .eyebrow{color:var(--paper-on-ink-dim);} .who h2{color:var(--paper);} .who p.lead{color:var(--paper-on-ink);}
.who .mark-spin{position:absolute;right:-90px;top:50%;transform:translateY(-50%);width:440px;height:440px;opacity:.05;pointer-events:none;animation:spin 60s linear infinite;}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg);}}

.price-gloss{font-family:var(--mono);font-size:12.5px;color:var(--ink-muted);line-height:1.7;margin:22px 0 0;max-width:840px;}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:46px;}
.tier{padding:30px 24px 28px;border:1px solid var(--rule);border-radius:12px;background:var(--paper-card);position:relative;display:flex;flex-direction:column;box-shadow:var(--sh-1);transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;}
.tier:hover{transform:translateY(-6px);box-shadow:var(--sh-3);border-color:var(--rule-strong);}
.tier.feat{background:var(--noir);color:var(--paper);border-color:var(--noir);box-shadow:var(--sh-3);transform:translateY(-10px);}
.tier.feat:hover{transform:translateY(-16px);box-shadow:var(--sh-float);}
.tier .t-name{font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.01em;}
.tier .t-price{font-family:var(--display);font-weight:700;font-size:38px;letter-spacing:-0.03em;margin:14px 0 2px;}
.tier .t-price span{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:0;color:var(--ink-muted);}
.tier.feat .t-price span{color:var(--paper-on-ink-dim);}
.tier .t-desc{font-size:13.5px;line-height:1.5;min-height:54px;margin-top:8px;color:var(--ink-3);}
.tier.feat .t-desc{color:var(--paper-on-ink);}
.tier .t-list{list-style:none;padding:0;margin:18px 0 22px;flex:1;}
.tier .t-list li{font-family:var(--mono);font-size:12px;color:var(--ink-2);padding:7px 0;border-bottom:1px dotted var(--rule);display:flex;gap:8px;align-items:center;}
.tier.feat .t-list li{color:var(--paper-on-ink);border-color:var(--ink-line);}
.tier .t-list li .k{color:var(--ink);font-weight:600;min-width:30px;}
.tier.feat .t-list li .k{color:var(--signal);}
.tier .badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--signal);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;border-radius:4px;box-shadow:var(--sh-1);}
.tier .btn{width:100%;justify-content:center;}
.tier.feat .btn-primary{background:var(--signal);border-color:var(--signal);box-shadow:4px 4px 0 rgba(244,242,236,0.22);color:#fff;}
.tier.feat .btn-primary:hover{box-shadow:7px 7px 0 rgba(244,242,236,0.22);}
.risk{margin-top:30px;font-family:var(--mono);font-size:12.5px;color:var(--ink-muted);letter-spacing:.01em;display:flex;align-items:center;gap:10px;}
.risk .ok{color:var(--success);}
@media (max-width:1000px){.tiers{grid-template-columns:1fr 1fr;}.tier.feat{transform:none;}.tier.feat:hover{transform:translateY(-6px);}}
@media (max-width:560px){.tiers{grid-template-columns:1fr;}}

.faq-list{margin-top:46px;border-top:1px solid var(--rule);max-width:900px;}
.faq-item{border-bottom:1px solid var(--rule);}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:26px 0;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;font-family:var(--display);font-weight:500;font-size:19px;color:var(--ink);letter-spacing:-0.01em;transition:color .2s;}
.faq-q:hover{color:var(--ink-3);}
.faq-q::-webkit-details-marker{display:none;}
.faq-q .qnum{font-family:var(--mono);font-size:12px;color:var(--ink-muted);flex:0 0 auto;padding-top:5px;width:34px;}
.faq-q .qtext{flex:1;}
.faq-q .plus{position:relative;width:18px;height:18px;flex:0 0 auto;margin-top:3px;}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--ink-3);transition:transform .25s var(--ease),background .2s;}
.faq-q .plus::before{left:0;right:0;top:8px;height:2px;}
.faq-q .plus::after{top:0;bottom:0;left:8px;width:2px;}
.faq-item[open] .plus::after{transform:rotate(90deg);}
.faq-item[open] .plus::before,.faq-item[open] .plus::after{background:var(--signal);}
.faq-a{padding:0 0 28px 34px;max-width:740px;animation:faqin .35s var(--ease);}
@keyframes faqin{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.faq-a p{margin:0;font-size:15.5px;line-height:1.66;color:var(--ink-2);}
.faq-a a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}

.final{background:var(--noir);color:var(--paper);position:relative;overflow:hidden;}
.final .fgrid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(244,242,236,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(244,242,236,0.05) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 70% 90% at 50% 50%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse 70% 90% at 50% 50%,#000 25%,transparent 80%);opacity:.6;}
.final .fglow{position:absolute;width:700px;height:700px;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,var(--signal-glow),transparent 60%);opacity:.4;filter:blur(30px);}
.final .container{position:relative;z-index:2;text-align:center;}
.final .eyebrow{color:var(--paper-on-ink-dim);justify-content:center;}
.final h2{color:var(--paper);font-family:var(--display);font-weight:600;font-size:clamp(32px,5.4vw,58px);line-height:1.03;letter-spacing:-0.035em;margin:20px auto 0;max-width:780px;}
.final p{color:var(--paper-on-ink);font-size:18px;margin:22px auto 0;max-width:560px;}
.final .btn-primary{background:var(--signal);border-color:var(--signal);color:#fff;box-shadow:5px 5px 0 rgba(244,242,236,0.22);margin-top:36px;}
.final .btn-primary:hover{box-shadow:8px 8px 0 rgba(244,242,236,0.22);}

.site-footer{background:var(--noir);color:var(--paper-on-ink);border-top:1px solid var(--ink-line);}
.site-footer .container{padding-top:60px;padding-bottom:42px;}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start;}
.foot-desc{font-size:14.5px;line-height:1.6;max-width:360px;margin:18px 0 0;}
.foot-links{display:flex;gap:56px;justify-content:flex-end;flex-wrap:wrap;}
.foot-col h4{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-on-ink-dim);margin:0 0 14px;}
.foot-col a{display:block;font-size:14px;color:var(--paper-on-ink);text-decoration:none;padding:5px 0;transition:color .15s,padding-left .15s;}
.foot-col a:hover{color:var(--paper);padding-left:4px;}
.site-footer .wordmark{color:var(--paper);}
.foot-bottom{margin-top:46px;padding-top:24px;border-top:1px solid var(--ink-line);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:11.5px;color:var(--paper-on-ink-dim);letter-spacing:.02em;}
@media (max-width:760px){.foot-top{grid-template-columns:1fr;}.foot-links{justify-content:flex-start;gap:40px;}}

.legal-main{background:var(--canvas);}
.legal-wrap{max-width:760px;margin:0 auto;padding:80px 28px 96px;}
.legal-back{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted);text-decoration:none;display:inline-flex;gap:8px;margin-bottom:44px;transition:color .15s;}
.legal-back:hover{color:var(--ink);}
.legal-wrap > .eyebrow{display:inline-flex;align-items:center;}
.legal-wrap h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,5vw,46px);line-height:1.06;letter-spacing:-0.025em;color:var(--ink);margin:12px 0 0;}
.legal-meta{font-family:var(--mono);font-size:12px;color:var(--ink-muted);margin-top:16px;}
.legal-intro{font-size:15.5px;line-height:1.7;color:var(--ink-2);margin-top:18px;}
.legal-body{margin-top:40px;}
.legal-body section{margin-bottom:40px;scroll-margin-top:90px;}
.legal-body h2{font-family:var(--display);font-size:21px;font-weight:600;color:var(--ink);margin:0 0 14px;letter-spacing:-0.01em;}
.legal-body h3{font-size:15.5px;font-weight:600;color:var(--ink);margin:20px 0 8px;}
.legal-body p{font-size:15px;line-height:1.72;color:var(--ink-2);margin:0 0 12px;}
.legal-body ul{padding-left:20px;margin:0 0 12px;}
.legal-body li{font-size:15px;line-height:1.72;color:var(--ink-2);margin-bottom:6px;}
.legal-body a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.legal-body a:hover{color:var(--ink-3);}
.legal-card{border:1px solid var(--rule);background:var(--paper-card);padding:20px 22px;margin-bottom:16px;border-radius:10px;box-shadow:var(--sh-1);}
.legal-card h3{margin-top:0;}
.legal-body strong{color:var(--ink);}

/* decode refinements */
.dc-surface-bg{position:absolute;inset:0;border-radius:8px;background:repeating-linear-gradient(135deg,rgba(255,255,255,0.04) 0 14px,rgba(255,255,255,.015) 14px 15px),#241E18;}
.dc-region.r-hook .rl{background:var(--s-hook);} .dc-region.r-angle .rl{background:var(--s-angle);} .dc-region.r-proof .rl{background:var(--s-proof);} .dc-region.r-offer .rl{background:var(--s-offer);}
.dc-region .rl{left:auto;right:-1px;}
.dc-region.r-hook .rl,.dc-region.r-proof .rl{right:auto;left:-1px;}

/* pipeline mini-graphics */
.pipe-viz{position:relative;height:120px;margin:-4px -4px 20px;border-radius:9px;background:var(--paper-2);border:1px solid var(--rule);overflow:hidden;transition:border-color .3s,background .3s;}
.pipe-card:hover .pipe-viz{border-color:var(--rule-strong);background:#fff;}
.pipe-viz .pv{width:100%;height:100%;display:block;}
.pv-card{fill:#fff;stroke:var(--rule-2);stroke-width:1.5;}
.pv-soft{fill:var(--rule-2);}
.pv-accent{fill:var(--ink);}
.pv-accent2{fill:var(--s-proof);}
.pv-chip{fill:var(--signal);}
.pv-scope{fill:none;stroke:var(--ink);stroke-width:2;}
.pv-hit{fill:var(--signal);}
.pv-axis{stroke:var(--rule-2);stroke-width:1.5;}
.pv-star{fill:var(--signal);}
.pv-tag{font-family:var(--mono);font-size:8px;letter-spacing:.08em;text-transform:uppercase;fill:var(--ink-muted);}
@media (prefers-reduced-motion:no-preference){
  .pipe-card:hover .pv-hit{animation:pvblink 1s var(--ease) infinite;}
}
@keyframes pvblink{0%,100%{opacity:1;}50%{opacity:.35;}}

/* teams: clearer points + solid workspace panel */

.ws-panel{background:var(--paper-card);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--sh-3);overflow:hidden;}
.wsp-head{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--rule);background:var(--paper-2);}
.wsp-dot{width:9px;height:9px;border-radius:50%;background:var(--rule-2);}
.wsp-title{margin-left:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);}
.wsp-tabs{display:flex;gap:6px;padding:12px 14px;border-bottom:1px solid var(--rule);flex-wrap:wrap;}
.wsp-tab{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;color:var(--ink-3);padding:7px 12px;border:1px solid var(--rule);border-radius:7px;background:var(--paper-2);}
.wsp-tab.active{color:var(--paper);background:var(--ink);border-color:var(--ink);}
.wsp-tab.add{color:var(--ink-muted);padding:7px 11px;font-weight:600;}
.wsp-mk{width:14px;height:14px;border-radius:4px;background:var(--rule-strong);}
.wsp-tab.active .wsp-mk{background:var(--signal);}
.wsp-body{padding:16px 16px 18px;}
.wsp-row.head{display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);margin-bottom:12px;}
.wsp-meta{color:var(--signal-ink);}
.wsp-item{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--rule);}
.wsp-thumb{flex:0 0 auto;width:34px;height:44px;border-radius:5px;background:linear-gradient(150deg,#C9C0B2,#EDE8E0);}
.wsp-thumb.t2{background:linear-gradient(150deg,#B7C0C8,#E8EEF3);}
.wsp-thumb.t3{background:linear-gradient(150deg,#C8BBA0,#F7F0E3);}
.wsp-lines{flex:0 0 80px;display:flex;flex-direction:column;gap:6px;}
.wsp-l1{height:7px;width:80px;border-radius:3px;background:var(--rule-2);}
.wsp-l1.s{width:54px;}
.wsp-l2{height:6px;width:60px;border-radius:3px;background:var(--rule);}
.wsp-l2.s{width:40px;}
.wsp-chips{margin-left:auto;display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end;}
.wsp-bar{width:80px;height:6px;border-radius:3px;background:var(--rule-2);overflow:hidden;display:inline-block;}
.wsp-bar i{display:block;height:100%;background:var(--signal);}
@media (max-width:880px){.wsp-chips{display:none;}.wsp-lines{flex:1;}}

/* who: persona icons */

/* convert section */
.convert{position:relative;border:1px solid var(--rule);border-radius:16px;overflow:hidden;background:var(--noir);color:var(--paper);box-shadow:var(--sh-float);}
.convert-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.convert-bg .cv-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(245,241,234,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(245,241,234,0.05) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 25% 30%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 80% at 25% 30%,#000 20%,transparent 75%);}
.convert-bg .cv-glow{position:absolute;width:560px;height:560px;right:-160px;bottom:-200px;border-radius:50%;background:radial-gradient(circle,var(--signal-glow),transparent 62%);opacity:.4;filter:blur(26px);}
.convert-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr 0.85fr;gap:48px;padding:54px 52px;align-items:center;}
@media (max-width:880px){.convert-inner{grid-template-columns:1fr;gap:36px;padding:38px 26px;}}
.convert-lead .eyebrow{color:var(--paper-on-ink-dim);}
.convert-lead .eyebrow .tick{background:var(--signal);}
.convert-lead h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.6vw,42px);line-height:1.06;letter-spacing:-0.03em;color:var(--paper);margin:18px 0 0;}
.convert-lead p{font-size:16.5px;line-height:1.6;color:var(--paper-on-ink);margin:20px 0 0;max-width:560px;}
.convert-actions{display:flex;align-items:center;gap:14px;margin-top:30px;flex-wrap:wrap;}
.convert-actions .btn-primary{background:var(--signal);border-color:var(--signal);color:#231a0e;font-weight:600;}
.convert-actions .btn-primary:hover{background:var(--signal-2);}
.convert-actions .btn-ghost{color:var(--paper);border-color:var(--ink-line-2);}
.convert-actions .btn-ghost:hover{background:var(--ink-surface-2);color:var(--paper);}
.convert-micro{font-family:var(--mono);font-size:12px;color:var(--paper-on-ink-dim);margin-top:16px;display:flex;align-items:center;gap:8px;}
.convert-micro .dot{width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 8px rgba(74,124,89,.5);}
.convert-points{display:flex;flex-direction:column;gap:18px;}
.cp{display:flex;gap:14px;align-items:flex-start;}
.cp-ic{flex:0 0 auto;width:38px;height:38px;border-radius:9px;border:1px solid var(--ink-line-2);display:flex;align-items:center;justify-content:center;color:var(--signal-2);background:rgba(245,241,234,0.03);}
.cp-ic svg{width:19px;height:19px;}
.cp-t{font-family:var(--display);font-weight:600;font-size:15.5px;color:var(--paper);line-height:1.3;}
.cp-d{font-size:13.5px;line-height:1.5;color:var(--paper-on-ink-dim);margin-top:4px;}
.convert-team{margin-top:6px;padding-top:20px;border-top:1px solid var(--ink-line);display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.convert-team .ct-label{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--paper-on-ink-dim);}
.convert-team .ct-btn{padding:10px 16px;font-size:12px;color:var(--paper);border-color:var(--ink-line-2);}
.convert-team .ct-btn:hover{background:var(--ink-surface-2);color:var(--paper);}
.convert-team .ct-mail{font-family:var(--mono);font-size:12px;color:var(--paper-on-ink);text-decoration:underline;text-underline-offset:3px;}
.convert-team .ct-mail:hover{color:var(--paper);}

/* workspace panel chips (generalized; old stack rule was scoped to .ws-card) */
.wsp-chips .wc-chip{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:4px;background:var(--paper-2);border:1px solid var(--rule);color:var(--ink-3);}
.wsp-chips .wc-chip.lit{background:var(--ink);border-color:var(--ink);color:var(--paper);}
/* demo runtag clear of headline */
.demo-runtag{top:auto;bottom:10px;left:10px;}

/* band value props */
.band-grid.vprops{align-items:start;}
.band-grid.vprops .band-cell{padding:6px 26px;}
.band-grid.vprops .band-cell:first-child{padding-left:0;}
.vp-title{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.22;letter-spacing:-0.01em;color:var(--paper);margin-top:2px;}
.vp-desc{font-family:var(--body);font-size:13px;line-height:1.5;color:var(--paper-on-ink-dim);margin-top:9px;}
@media (max-width:760px){.band-grid.vprops .band-cell{padding:4px 0;}}

/* ============================================================
   SCRIPT TEARDOWN (transcript vs structure)
   ============================================================ */
.script-rows{margin-top:46px;border:1px solid var(--rule);border-radius:14px;overflow:hidden;background:var(--paper-card);box-shadow:var(--sh-2);}
.sr-head{display:grid;grid-template-columns:1fr 1fr;background:var(--paper-2);border-bottom:1px solid var(--rule);}
.srh-left,.srh-right{display:flex;align-items:center;gap:9px;padding:14px 22px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);}
.srh-right{border-left:1px solid var(--rule);}
.sg-dot{width:8px;height:8px;border-radius:50%;background:var(--rule-strong);flex:0 0 auto;}
.sg-dot.lit{background:var(--signal);box-shadow:0 0 8px var(--signal-glow);}
.sr-row{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule);}
.sr-row:last-child{border-bottom:0;}
.sr-script{padding:20px 22px;position:relative;border-left:3px solid transparent;}
.sr-script .sr-tc{font-family:var(--mono);font-size:10.5px;color:var(--ink-muted);letter-spacing:.04em;display:block;margin-bottom:8px;}
.sr-script p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2);font-style:italic;}
.sr-analysis{padding:20px 22px;border-left:1px solid var(--rule);background:var(--paper-2);}
.sra-top{margin-bottom:9px;}
.sra-tag{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;}
.sr-analysis p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-2);}
.sr-analysis p b{color:var(--ink);font-weight:600;}
/* beat colors on the left rail + tag */
.sr-row.b-hook .sr-script{border-left-color:var(--s-hook);} .sr-row.b-hook .sra-tag{color:var(--s-hook);}
.sr-row.b-angle .sr-script{border-left-color:var(--s-angle);} .sr-row.b-angle .sra-tag{color:var(--s-angle);}
.sr-row.b-mech .sr-script{border-left-color:var(--ink);} .sr-row.b-mech .sra-tag{color:var(--ink);}
.sr-row.b-proof .sr-script{border-left-color:var(--s-proof);} .sr-row.b-proof .sra-tag{color:var(--s-proof);}
.sr-row.b-social .sr-script{border-left-color:var(--info);} .sr-row.b-social .sra-tag{color:var(--info);}
.sr-row.b-offer .sr-script{border-left-color:var(--s-offer);} .sr-row.b-offer .sra-tag{color:var(--s-offer);}
@media (max-width:760px){
  .sr-head{display:none;}
  .sr-row{grid-template-columns:1fr;}
  .sr-analysis{border-left:0;border-top:1px solid var(--rule);}
}

/* convert: clean centered */
.convert-center{position:relative;z-index:2;text-align:center;max-width:680px;margin:0 auto;padding:58px 40px 60px;}
@media (max-width:680px){.convert-center{padding:42px 24px;}}
.convert-center .eyebrow{justify-content:center;color:var(--paper-on-ink-dim);}
.convert-center .eyebrow .tick{background:var(--signal);}
.convert-center h2{font-family:var(--display);font-weight:600;font-size:clamp(28px,3.8vw,44px);line-height:1.06;letter-spacing:-0.03em;color:var(--paper);margin:18px 0 0;}
.convert-center p{font-size:17px;line-height:1.6;color:var(--paper-on-ink);margin:20px auto 0;max-width:540px;}
.convert-center .convert-actions{justify-content:center;margin-top:30px;}
.convert-center .convert-actions .btn-primary{background:var(--signal);border-color:var(--signal);color:#231a0e;font-weight:600;}
.convert-center .convert-actions .btn-primary:hover{background:var(--signal-2);}
.convert-center .convert-actions .btn-ghost{color:var(--paper);border-color:var(--ink-line-2);}
.convert-center .convert-actions .btn-ghost:hover{background:var(--ink-surface-2);color:var(--paper);}
.convert-team-line{font-family:var(--mono);font-size:12.5px;color:var(--paper-on-ink-dim);margin-top:26px;letter-spacing:.02em;}
.convert-team-line a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;}
.convert-team-line a:hover{color:var(--signal-2);}

/* hero instrument responsive */
@media (max-width:560px){
  .td-screen.td-split{grid-template-columns:1fr;gap:10px;}
  .td-advert{min-height:0;}
  .tdf-note{display:none;}
  .tdf .tdf-body{padding:9px 11px;}
}


/* ============================================================
   WHO (light statement)
   ============================================================ */
.who-light{position:relative;background:var(--paper);overflow:hidden;border-top:1px solid var(--rule);}
.who-light .mark-spin.light{position:absolute;width:560px;height:560px;right:-150px;top:50%;transform:translateY(-50%);opacity:0.04;animation:spin 60s linear infinite;z-index:0;}
.who-head{text-align:center;max-width:760px;margin:0 auto 8px;}
.who-head .eyebrow{justify-content:center;}
.who-head h2{font-family:var(--display);font-weight:600;font-size:clamp(30px,4.6vw,52px);line-height:1.04;letter-spacing:-0.035em;color:var(--ink);margin:18px 0 0;}

/* ============================================================
   SECTION VARIETY: dark demo "lab", header variants, helpers
   ============================================================ */
/* dark demo section (signature centerpiece) */
.demo-section{position:relative;background:var(--noir);overflow:hidden;}
.demo-section .demo-ambient{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 50% at 80% 12%, rgba(196,146,58,.10), transparent 60%),
    radial-gradient(ellipse 50% 40% at 12% 88%, rgba(90,122,154,.10), transparent 62%);}
.demo-section .demo-ambient::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(245,241,234,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(245,241,234,.035) 1px,transparent 1px);
  background-size:52px 52px;-webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 40%,#000,transparent 78%);mask-image:radial-gradient(ellipse 75% 70% at 50% 40%,#000,transparent 78%);}
/* the player shell pops on dark */
.demo-section .demo-shell{border-color:var(--ink-line-2);box-shadow:0 40px 90px rgba(0,0,0,.55);}

/* on-dark header helpers */
.sec-index.light{color:var(--paper-on-ink-dim);}
.center-head{text-align:center;max-width:680px;margin-left:auto;margin-right:auto;}
.center-head .eyebrow{justify-content:center;}
.eyebrow.on-dark{color:var(--paper-on-ink-dim);}
.eyebrow.on-dark .tick{background:var(--signal);}
h2.on-dark-h{color:var(--paper)!important;}
.lead.on-dark-p{color:var(--paper-on-ink)!important;}

/* amber button variant for dark sections */
.btn-amber{background:var(--signal);border:1px solid var(--signal);color:#231a0e;font-weight:600;}
.btn-amber:hover{background:var(--signal-2);border-color:var(--signal-2);color:#1a1206;transform:translateY(-1px);}

/* teams: tinted variant to break the paper run */
.teams-section{position:relative;background:var(--paper-subtle);border-top:1px solid var(--rule);}
.teams-section .ws-panel{box-shadow:0 30px 70px rgba(31,26,22,.10);}

/* who: quick subtle persona tags (light bg) */
.who-tags{display:flex;align-items:center;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:30px;}
.who-tag{font-family:var(--body);font-size:15px;color:var(--ink-3);letter-spacing:.005em;}
.who-tag .wt-k{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-ink);margin-right:7px;}
.who-sep{width:5px;height:5px;border-radius:50%;background:var(--rule-strong);flex:0 0 auto;}
@media (max-width:620px){.who-tags{flex-direction:column;gap:12px;}.who-sep{display:none;}}

.demo-ad{container-type:inline-size;}

/* keyword emphasis in prose */
.kw{font-weight:600;color:var(--ink);}
/* semantic-tinted keywords in the hero sub (subtle) */
.hero-sub .kw:nth-of-type(1){color:var(--s-hook);}
.hero-sub .kw:nth-of-type(2){color:var(--s-angle);}
.hero-sub .kw:nth-of-type(3){color:var(--s-proof);}
.hero-sub .kw:nth-of-type(4){color:var(--s-offer);}

/* teams: compact slim band */
.teams-compact{display:grid;grid-template-columns:1fr 0.85fr;gap:48px;align-items:center;}
@media (max-width:820px){.teams-compact{grid-template-columns:1fr;gap:28px;}}
.tc-h{font-family:var(--display);font-weight:600;font-size:clamp(26px,3.4vw,38px);line-height:1.05;letter-spacing:-0.03em;color:var(--ink);margin:16px 0 0;}
.tc-p{font-size:16px;line-height:1.58;color:var(--ink-2);margin-top:16px;max-width:460px;}
.tc-right{background:var(--paper-card);border:1px solid var(--rule);border-radius:12px;box-shadow:var(--sh-2);padding:16px;}
.tc-tabs{display:flex;gap:7px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--rule);}
.tc-tab{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;color:var(--ink-3);padding:6px 11px;border:1px solid var(--rule);border-radius:7px;background:var(--paper-2);}
.tc-tab.active{color:var(--paper);background:var(--ink);border-color:var(--ink);}
.tc-tab.add{color:var(--ink-muted);font-weight:600;}
.tc-mk{width:13px;height:13px;border-radius:4px;background:var(--rule-strong);}
.tc-tab.active .tc-mk{background:var(--signal);}
.tc-rows{display:flex;flex-direction:column;gap:11px;padding-top:14px;}
.tc-row{display:flex;align-items:center;gap:12px;}
.tc-thumb{flex:0 0 auto;width:30px;height:38px;border-radius:5px;background:linear-gradient(150deg,#C9C0B2,#EDE8E0);}
.tc-thumb.t2{background:linear-gradient(150deg,#B7C0C8,#E8EEF3);}
.tc-thumb.t3{background:linear-gradient(150deg,#C8BBA0,#F7F0E3);}
.tc-bar{flex:1;height:7px;border-radius:4px;background:var(--rule-2);overflow:hidden;}
.tc-bar i{display:block;height:100%;background:var(--signal);}

/* ============================================================
   INTERSTITIAL CTA (mid-flow, dark, with ad->structure visual)
   ============================================================ */
.interstitial{position:relative;background:var(--noir);overflow:hidden;padding:82px 24px;text-align:center;}
/* simple repeating dot pattern, faded at edges */
.ist-pattern{position:absolute;inset:0;z-index:0;
  background-image:radial-gradient(rgba(245,241,234,0.10) 1.3px, transparent 1.3px);
  background-size:26px 26px;background-position:center;
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 35%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,#000 35%,transparent 78%);}
.ist-inner{position:relative;z-index:2;max-width:760px;margin:0 auto;}
.ist-eyebrow{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--signal-2);padding:7px 16px;border:1px solid rgba(216,168,90,.35);border-radius:30px;background:rgba(216,168,90,.08);}
.ist-inner h2{font-family:var(--display);font-weight:600;font-size:clamp(27px,3.7vw,42px);line-height:1.08;letter-spacing:-0.03em;color:var(--paper);margin:22px 0 0;}
.ist-inner .btn{margin-top:30px;}

/* ============================================================
   TEXT EMPHASIS UTILITIES (highlight / underline / pop-box)
   ============================================================ */
/* highlighter swipe behind key words */
.hl{position:relative;white-space:nowrap;}
.hl::before{content:"";position:absolute;left:-3px;right:-3px;bottom:1px;height:42%;background:rgba(216,168,90,.30);z-index:-1;border-radius:2px;transition:height .3s var(--ease);}
.hl.hl-tall::before{height:64%;}
/* hand-drawn style underline accent */
.uline{background-image:linear-gradient(var(--signal),var(--signal));background-repeat:no-repeat;background-position:0 100%;background-size:100% 3px;padding-bottom:1px;}
.uline-ink{background-image:linear-gradient(var(--ink),var(--ink));background-repeat:no-repeat;background-position:0 100%;background-size:100% 2px;}
/* on dark sections */
.on-dark-h .hl::before,.ist-inner .hl::before{background:rgba(216,168,90,.42);}
/* popped-out callout box for an important line */
.pop-box{position:relative;display:block;margin:30px auto 0;max-width:680px;border:1px solid var(--rule-2);border-left:4px solid var(--signal);border-radius:10px;background:var(--paper-2);padding:20px 24px;box-shadow:var(--sh-1);}
.pop-box p{margin:0;font-family:var(--display);font-weight:500;font-size:clamp(16px,1.8vw,19px);line-height:1.45;color:var(--ink);letter-spacing:-0.01em;}
.pop-box .pb-k{color:var(--signal-ink);font-weight:600;}
/* small inline keyword chip */
.kchip{display:inline-block;font-family:var(--mono);font-size:.82em;font-weight:600;letter-spacing:.02em;padding:1px 7px;border-radius:5px;background:var(--paper-subtle);border:1px solid var(--rule-2);color:var(--ink-2);}