/* ============================================================
   briefOS — design system v3 "light-table"
   The page behaves like the instrument: ads get placed on a
   lit surface, pulled apart into labeled layers, and read.
   Depth everywhere, one warm key light, zero flat washes.
   ============================================================ */

@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;700&display=swap');

:root {
  /* ---- ink ---- */
  --ink:#1D1812; --ink-soft:#2C251D; --ink-2:#3D352C; --ink-3:#7E7566; --ink-muted:#A69C8E;
  /* ---- dark lab surfaces ---- */
  --noir:#2A2118; --noir-2:#211A12; --noir-3:#181209;
  /* ---- warm paper ---- */
  --paper:#F4EFE6; --paper-2:#FBF8F2; --paper-card:#FFFFFF; --paper-subtle:#ECE6DA; --canvas:#F4EFE6;
  /* ---- rules ---- */
  --rule:#E6DFD3; --rule-2:#D3CABA; --rule-strong:#C4BAA8;
  /* ---- signal amber ---- */
  --signal:#C4923A; --signal-2:#D8A85A; --signal-3:#EBC488; --signal-ink:#96691E; --signal-glow:rgba(196,146,58,0.32);
  /* ---- structural taxonomy ---- */
  --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-line:rgba(244,239,230,0.09); --ink-line-2:rgba(244,239,230,0.17);
  --paper-on-ink:rgba(244,239,230,0.76); --paper-on-ink-dim:rgba(244,239,230,0.46);
  --glass:linear-gradient(180deg,rgba(244,239,230,0.085),rgba(244,239,230,0.04));
  --glass-edge:rgba(244,239,230,0.16);
  /* ---- type ---- */
  --display:'Space Grotesk',system-ui,sans-serif; --body:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace;
  /* ---- elevation ---- */
  --sh-1:0 1px 2px rgba(29,24,18,0.05),0 3px 10px rgba(29,24,18,0.06);
  --sh-2:0 2px 5px rgba(29,24,18,0.06),0 12px 32px rgba(29,24,18,0.10);
  --sh-3:0 8px 18px rgba(29,24,18,0.08),0 28px 64px rgba(29,24,18,0.15);
  --sh-float:0 40px 100px rgba(29,24,18,0.24);
  --lift:inset 0 1px 0 rgba(255,255,255,0.65);
  --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;}
a{color:inherit;} img{max-width:100%;display:block;}
::selection{background:rgba(196,146,58,.28);color:var(--ink);}
.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);}
section{position:relative;}
section[id]{scroll-margin-top:84px;}
.section-pad{padding:118px 0;}
@media (max-width:760px){.section-pad{padding:76px 0;}}
.rule-top{border-top:1px solid var(--rule);}

/* film grain, one global pass so every surface has tooth */
.grain{position:fixed;inset:-8%;z-index:90;pointer-events:none;opacity:.05;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:180px 180px;}

/* ---------------- eyebrows / wordmark ---------------- */
.eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-3);display:inline-flex;align-items:center;gap:11px;}
.eyebrow .tick{display:inline-block;width:7px;height:7px;background:var(--signal);transform:rotate(45deg);box-shadow:0 0 0 3px rgba(196,146,58,.14);}
.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;}

/* ---------------- buttons ---------------- */
.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:10px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .18s var(--ease),box-shadow .22s var(--ease),background .18s,color .18s,border-color .18s;will-change:transform;overflow:hidden;}
.btn-primary{background:linear-gradient(180deg,var(--ink-soft),var(--ink));color:var(--paper);box-shadow:var(--sh-2),inset 0 1px 0 rgba(244,239,230,.14);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--sh-3),inset 0 1px 0 rgba(244,239,230,.18);}
.btn-primary:active{transform:translateY(0);box-shadow:var(--sh-1);}
.btn-ghost{background:rgba(255,255,255,.4);color:var(--ink);border-color:var(--rule-2);backdrop-filter:blur(4px);}
.btn-ghost:hover{background:#fff;transform:translateY(-2px);box-shadow:var(--sh-1);border-color:var(--rule-strong);}
.btn-ghost:active{transform:translateY(0);}
.btn .arr{transition:transform .22s var(--ease);} .btn:hover .arr{transform:translateX(4px);}
.btn-lg{padding:17px 30px;font-size:14.5px;border-radius:12px;}
.btn-amber{background:linear-gradient(180deg,var(--signal-2),var(--signal));border:1px solid var(--signal);color:#231a0e;font-weight:600;box-shadow:0 12px 30px -10px rgba(196,146,58,.55),inset 0 1px 0 rgba(255,255,255,.35);}
.btn-amber:hover{background:linear-gradient(180deg,var(--signal-3),var(--signal-2));transform:translateY(-2px);box-shadow:0 18px 38px -12px rgba(196,146,58,.6),inset 0 1px 0 rgba(255,255,255,.4);}
.btn-amber:active{transform:translateY(0);}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2.5px solid var(--signal);outline-offset:3px;border-radius:6px;}
.btn-primary::after,.btn-amber::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,0.22) 50%,transparent 68%);background-size:220% 100%;background-position:220% 0;pointer-events:none;}
.btn-primary:hover::after,.btn-amber:hover::after{animation:sweep .9s var(--ease);}
@keyframes sweep{to{background-position:-120% 0;}}

/* ---------------- reveal system ---------------- */
.reveal{opacity:0;transform:translateY(26px);filter:blur(6px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease);}
.reveal.in{opacity:1;transform:none;filter:none;}
.reveal.d1{transition-delay:.09s;} .reveal.d2{transition-delay:.18s;} .reveal.d3{transition-delay:.27s;} .reveal.d4{transition-delay:.36s;}

/* ---------------- header ---------------- */
.site-header{position:sticky;top:0;z-index:80;transition:background .3s,border-color .3s,box-shadow .3s;border-bottom:1px solid transparent;}
.site-header.scrolled{background:rgba(244,239,230,0.72);backdrop-filter:blur(16px) saturate(1.5);border-bottom:1px solid var(--rule);box-shadow:0 8px 30px -18px rgba(29,24,18,.18);}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;height:72px;}
.scroll-progress{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--signal),var(--signal-2));z-index:81;box-shadow:0 0 10px rgba(196,146,58,.5);transition:width .1s linear;}
.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.07em;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 headers ---------------- */
.sec-head{max-width:800px;margin-left:auto;margin-right:auto;text-align:center;}
.sec-head .eyebrow{justify-content:center;}
.sec-head h2{font-family:var(--display);font-weight:700;font-size:clamp(32px,4.7vw,52px);line-height:1.04;letter-spacing:-0.034em;color:var(--ink);margin:18px 0 0;text-wrap:balance;}
.sec-head p.lead{font-size:18px;line-height:1.62;color:var(--ink-2);margin:22px auto 0;max-width:640px;}
.sec-index{position:absolute;top:40px;left:32px;display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-muted);z-index:3;}
.sec-index::before{content:"";width:26px;height:1px;background:var(--rule-strong);}
.sec-index.light{color:var(--paper-on-ink-dim);} .sec-index.light::before{background:var(--ink-line-2);}
@media (max-width:900px){.sec-index{display:none;}}

/* text emphasis */
.hl{position:relative;white-space:nowrap;}
.hl::before{content:"";position:absolute;left:-3px;right:-3px;bottom:1px;height:44%;background:linear-gradient(90deg,rgba(216,168,90,.38),rgba(216,168,90,.24));z-index:-1;border-radius:3px;}
.hl.hl-tall::before{height:62%;}
.on-dark-h .hl::before{background:linear-gradient(90deg,rgba(216,168,90,.5),rgba(216,168,90,.3));}
.kw{font-weight:600;color:var(--ink);}
h2.on-dark-h{color:var(--paper)!important;}
.lead.on-dark-p{color:rgba(244,239,230,.9)!important;}
.eyebrow.on-dark{color:var(--paper-on-ink-dim);}
.center-head{text-align:center;max-width:700px;margin-left:auto;margin-right:auto;}
.center-head .eyebrow{justify-content:center;}

/* ============================================================
   HERO — light table with exploded teardown of a real ad
   ============================================================ */
.hero{position:relative;overflow:hidden;display:flex;align-items:center;min-height:min(88vh,820px);padding:56px 0 96px;}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.hero-wash{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% -14%,#FFFDF9 0%,rgba(255,253,249,0) 55%),
  linear-gradient(180deg,#FAF6EF 0%,var(--paper) 60%,#EFE9DD 100%);}
.hero-aurora{position:absolute;width:900px;height:700px;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform;}
.hero-aurora.a{left:-16%;top:-24%;background:radial-gradient(circle at 40% 40%,rgba(216,168,90,.30),rgba(216,168,90,.05) 58%,transparent 72%);animation:auroraA 26s ease-in-out infinite alternate;}
.hero-aurora.b{right:-20%;bottom:-38%;background:radial-gradient(circle at 55% 45%,rgba(90,122,154,.16),rgba(90,122,154,.04) 55%,transparent 72%);animation:auroraB 32s ease-in-out infinite alternate;}
@keyframes auroraA{from{transform:translate(0,0) scale(1);}to{transform:translate(70px,46px) scale(1.1);}}
@keyframes auroraB{from{transform:translate(0,0) scale(1.06);}to{transform:translate(-64px,-40px) scale(1);}}
.hero-dots{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(29,24,18,.09) 1.1px,transparent 1.5px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 90% 78% at 50% 42%,#000 0%,rgba(0,0,0,.4) 55%,transparent 84%);mask-image:radial-gradient(ellipse 90% 78% at 50% 42%,#000 0%,rgba(0,0,0,.4) 55%,transparent 84%);}
.hero-vignette{position:absolute;inset:0;background:radial-gradient(140% 120% at 50% 34%,transparent 52%,rgba(29,24,18,.08) 100%);}

.hero-inner{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,520px) minmax(0,440px);justify-content:space-between;gap:48px;align-items:center;width:100%;}
.hero-text{min-width:0;}
.hero .eyebrow{justify-content:flex-start;}
.hero h1{font-family:var(--display);font-weight:700;font-size:clamp(36px,4.1vw,58px);line-height:1.03;letter-spacing:-0.042em;color:var(--ink);margin:20px 0 0;max-width:540px;text-wrap:balance;}
.hero h1 .h1-s{display:block;}
.hero h1 .h1-s+.h1-s{margin-top:0.22em;}
.hero h1 .em{position:relative;white-space:nowrap;}
.hero h1 .em::after{content:"";position:absolute;left:-4px;right:-4px;bottom:0.06em;height:0.38em;background:linear-gradient(90deg,rgba(216,168,90,.42),rgba(216,168,90,.26));z-index:-1;border-radius:3px;transform:scaleX(0);transform-origin:left;animation:ulin .9s var(--ease) 1s forwards;}
@keyframes ulin{to{transform:scaleX(1);}}
.hero-sub{font-size:clamp(16.5px,1.75vw,19px);line-height:1.62;color:var(--ink-2);margin:22px 0 0;max-width:500px;text-wrap:pretty;}
.hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.hero-maker{display:flex;align-items:center;gap:13px;margin:26px 0 0;max-width:470px;font-family:var(--body);font-size:14px;line-height:1.5;color:var(--ink-3);text-align:left;}
.hero-maker .hm-badge{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:linear-gradient(180deg,var(--ink-soft),var(--ink));display:flex;align-items:center;justify-content:center;box-shadow:0 10px 22px -9px rgba(29,24,18,.5),0 0 0 4px rgba(196,146,58,.12),inset 0 1px 0 rgba(244,239,230,.15);}
.hero-maker .hm-badge svg{width:21px;height:21px;}
.hero-maker b{color:var(--ink);font-weight:600;}

/* --- the exploded teardown (signature) --- */
.hero-vis{min-width:0;display:flex;justify-content:center;perspective:1400px;}
.hx{position:relative;width:min(100%,400px);opacity:0;transform:translateY(30px);animation:hxIn .9s var(--ease) .25s forwards;}
@keyframes hxIn{to{opacity:1;transform:none;}}
.hx-scene{position:relative;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .35s var(--ease);animation:hxFloat 8s ease-in-out 2.6s infinite;cursor:default;}
@keyframes hxFloat{0%,100%{translate:0 0;}50%{translate:0 -9px;}}
.hx-card{position:relative;width:min(100%,330px);margin:0 auto;transform-style:preserve-3d;}
.hx-slice{position:relative;width:100%;background-image:url("example-ad-sneaker.png");background-size:100% auto;background-repeat:no-repeat;border:1px solid rgba(29,24,18,.16);border-radius:5px;box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 14px 30px -14px rgba(29,24,18,.4);margin-top:0;transition:margin-top .75s var(--ease),border-radius .6s var(--ease),box-shadow .5s var(--ease);}
.hx-slice.s1{aspect-ratio:1092/453.6;background-position:50% 0%;border-radius:14px 14px 5px 5px;transform:translateZ(56px);}
.hx-slice.s2{aspect-ratio:1092/129.6;background-position:50% 34.62%;transform:translateZ(42px);}
.hx-slice.s3{aspect-ratio:1092/453.6;background-position:50% 59.13%;transform:translateZ(28px);}
.hx-slice.s4{aspect-ratio:1092/302.4;background-position:50% 91.14%;transform:translateZ(14px);}
.hx-slice.s5{aspect-ratio:1092/100.8;background-position:50% 100%;border-radius:5px 5px 14px 14px;transform:translateZ(0);}
.hx.is-exploded .hx-slice+.hx-slice{margin-top:15px;}
.hx.is-exploded .hx-slice{box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 22px 34px -16px rgba(29,24,18,.45);}

/* labels: mono chips with hairline connectors */
.hx-tag{position:absolute;top:50%;left:calc(100% + 34px);transform:translateY(-50%) translateX(-10px);display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);background:rgba(255,255,255,.85);backdrop-filter:blur(3px);border:1px solid var(--rule-2);border-radius:6px;padding:5px 9px;white-space:nowrap;box-shadow:var(--sh-1);opacity:0;transition:opacity .5s var(--ease),transform .5s var(--ease);transition-delay:calc(.06s * var(--n,0));}
.hx-tag::before{content:"";position:absolute;right:100%;top:50%;width:34px;height:1px;background:linear-gradient(90deg,var(--c,var(--rule-strong)),rgba(196,146,58,0));transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);transition-delay:calc(.06s * var(--n,0));}
.hx-tag i{width:7px;height:7px;border-radius:2px;background:var(--c,var(--signal));flex:0 0 auto;}
.hx.is-exploded .hx-tag{opacity:1;transform:translateY(-50%) translateX(0);}
.hx.is-exploded .hx-tag::before{transform:scaleX(1);}

/* live scanline sweeping the card */
.hx-scan{position:absolute;left:-6px;right:-6px;top:0;height:52px;z-index:5;pointer-events:none;border-radius:8px;background:linear-gradient(180deg,transparent,rgba(216,168,90,.24) 45%,rgba(216,168,90,.5) 50%,rgba(216,168,90,.24) 55%,transparent);mix-blend-mode:multiply;opacity:0;animation:hxScan 5.6s var(--ease) 1s infinite;}
@keyframes hxScan{0%{top:-8%;opacity:0;}6%{opacity:1;}42%{top:96%;opacity:1;}50%{top:104%;opacity:0;}100%{top:104%;opacity:0;}}

/* soft contact shadow under the whole assembly */
.hx-shadow{position:absolute;left:8%;right:8%;bottom:-34px;height:44px;border-radius:50%;background:radial-gradient(ellipse at center,rgba(29,24,18,.3),transparent 68%);filter:blur(8px);z-index:-1;animation:hxShadow 8s ease-in-out 2.6s infinite;}
@keyframes hxShadow{0%,100%{transform:scaleX(1);opacity:.9;}50%{transform:scaleX(.94);opacity:.7;}}

/* console caption */
.hx-cap{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:44px;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-3);}
.hx-cap .dot{width:7px;height:7px;border-radius:50%;background:var(--s-proof);animation:livePulse 1.9s ease-in-out infinite;}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(74,124,89,.5);}55%{box-shadow:0 0 0 6px rgba(74,124,89,0);}}

/* hover = rebuild: slices seal back together */
@media (hover:hover) and (pointer:fine){
  .hx.is-exploded .hx-scene:hover .hx-slice+.hx-slice{margin-top:2px;}
  .hx.is-exploded .hx-scene:hover .hx-slice{border-radius:5px;}
  .hx.is-exploded .hx-scene:hover .hx-slice.s1{border-radius:14px 14px 5px 5px;}
  .hx.is-exploded .hx-scene:hover .hx-slice.s5{border-radius:5px 5px 14px 14px;}
  .hx.is-exploded .hx-scene:hover .hx-tag{opacity:0;transform:translateY(-50%) translateX(-8px);transition-delay:0s;}
  .hx.is-exploded .hx-scene:hover .hx-tag::before{transform:scaleX(0);transition-delay:0s;}
  .hx.is-exploded:has(.hx-scene:hover) .hx-hint{opacity:0;}
}
.hx-hint{display:block;text-align:center;margin-top:11px;font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-muted);white-space:nowrap;transition:opacity .3s;opacity:0;}
.hx.is-exploded .hx-hint{opacity:1;transition-delay:.9s;}

.hero-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;display:flex;width:30px;height:30px;align-items:center;justify-content:center;}
.hero-scroll .hs-chev{width:13px;height:13px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);animation:scrollBob 2.1s ease-in-out infinite;}
@keyframes scrollBob{0%,100%{transform:rotate(45deg) translate(-2px,-2px);opacity:.35;}50%{transform:rotate(45deg) translate(2px,2px);opacity:.95;}}
@media (max-width:980px){.hero-scroll{display:none;}}

@media (max-width:1279px){
  .hx-card{width:min(100%,300px);}
  .hx-tag{left:calc(100% + 24px);font-size:9px;padding:4px 8px;}
  .hx-tag::before{width:24px;}
}
@media (max-width:1060px){
  .hero-inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:64px;}
  .hero .eyebrow{justify-content:center;}
  .hero h1{margin-left:auto;margin-right:auto;}
  .hero-sub{margin-left:auto;margin-right:auto;}
  .hero-actions{justify-content:center;}
  .hero-maker{justify-content:center;margin-left:auto;margin-right:auto;}
  .hero{padding-bottom:120px;min-height:0;}
}
@media (max-width:560px){
  .hx{width:min(100%,300px);}
  .hx-card{width:min(100%,262px);}
  .hx-tag{left:auto;right:8px;top:8px;transform:none;padding:4px 7px;font-size:8.5px;box-shadow:none;}
  .hx-tag::before{display:none;}
  .hx.is-exploded .hx-tag{transform:none;}
  .hx.is-exploded .hx-slice+.hx-slice{margin-top:10px;}
  .hx-hint{display:none;}
  .hx-cap{margin-top:30px;}
  .hero-maker{flex-direction:row;text-align:left;}
}

/* ============================================================
   SIGNAL TAPE — the taxonomy runs into the lab
   ============================================================ */
.tape{position:relative;background:linear-gradient(180deg,var(--noir-3),var(--noir-2));border-top:1px solid rgba(29,24,18,.5);border-bottom:1px solid var(--ink-line);overflow:hidden;padding:0;z-index:4;}
.tape::before,.tape::after{content:"";position:absolute;top:0;bottom:0;width:120px;z-index:2;pointer-events:none;}
.tape::before{left:0;background:linear-gradient(90deg,var(--noir-3),transparent);}
.tape::after{right:0;background:linear-gradient(270deg,var(--noir-3),transparent);}
.tape-track{display:flex;width:max-content;animation:tapeRun 38s linear infinite;}
.tape:hover .tape-track{animation-play-state:paused;}
@keyframes tapeRun{to{transform:translateX(-50%);}}
.tape-item{display:inline-flex;align-items:center;gap:12px;padding:17px 30px;border-right:1px solid var(--ink-line);font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--paper-on-ink);white-space:nowrap;}
.tape-item i{width:8px;height:8px;border-radius:2px;background:var(--c,var(--signal));box-shadow:0 0 10px color-mix(in srgb,var(--c,var(--signal)) 60%,transparent);flex:0 0 auto;}
.tape-item .n{color:var(--paper-on-ink-dim);font-size:10px;letter-spacing:.1em;}

/* ============================================================
   PROCESS — dark lab, three steps
   ============================================================ */
.steps-section{background:
  radial-gradient(circle,rgba(244,239,230,.032) 1px,transparent 1.4px) 0 0/30px 30px,
  radial-gradient(110% 75% at 50% -10%,rgba(216,168,90,.13),transparent 52%),
  radial-gradient(80% 60% at 6% 100%,rgba(90,122,154,.07),transparent 58%),
  linear-gradient(180deg,var(--noir-2) 0%,#251D14 55%,var(--noir-2) 100%);
  color:var(--paper);overflow:hidden;}
.steps-section::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(130% 100% at 50% 40%,transparent 58%,rgba(0,0,0,.3) 100%);}
.steps-section .container{position:relative;z-index:2;}
.steps-section .eyebrow{color:rgba(244,239,230,.6);}
.steps-section h2{color:var(--paper);}
.steps-section .lead{color:rgba(244,239,230,.92);font-weight:450;}
.steps-section .hl::before{background:linear-gradient(90deg,rgba(216,168,90,.5),rgba(216,168,90,.3));}

.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:56px;position:relative;}
/* connective dashed line running behind the three cards */
.steps-grid::before{content:"";position:absolute;left:4%;right:4%;top:50%;height:0;border-top:1.5px dashed rgba(216,168,90,.28);z-index:0;}
.step-card{position:relative;z-index:1;display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--glass-edge);border-radius:20px;padding:26px 24px 30px;box-shadow:0 26px 54px -28px rgba(0,0,0,.55),inset 0 1px 0 rgba(244,239,230,.09);backdrop-filter:blur(6px);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s,background .35s;}
.step-card:hover{transform:translateY(-6px);background:linear-gradient(180deg,rgba(244,239,230,0.12),rgba(244,239,230,0.055));border-color:rgba(216,168,90,.4);box-shadow:0 36px 70px -30px rgba(0,0,0,.65),0 0 0 1px rgba(216,168,90,.12),inset 0 1px 0 rgba(244,239,230,.12);}
.step-top{display:flex;align-items:center;gap:13px;margin-bottom:18px;}
.step-num{font-family:var(--display);font-size:17px;font-weight:700;color:var(--signal-2);width:42px;height:42px;border-radius:12px;border:1px solid rgba(196,146,58,.5);background:radial-gradient(120% 120% at 30% 20%,rgba(216,168,90,.3),rgba(196,146,58,.12));display:flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:inset 0 1px 0 rgba(244,239,230,.15),0 8px 18px -10px rgba(196,146,58,.5);}
.step-label{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--signal-2);}
.step-viz{position:relative;width:100%;height:148px;border-radius:14px;background:
  radial-gradient(90% 90% at 50% 0%,rgba(216,168,90,.12),transparent 60%),
  linear-gradient(165deg,rgba(244,239,230,.06),rgba(244,239,230,.02));
  border:1px solid var(--ink-line-2);display:flex;align-items:center;justify-content:center;padding:16px 18px;margin-bottom:20px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(244,239,230,.07);}
.step-viz svg{width:100%;height:100%;max-width:200px;}
.step-card h3{font-family:var(--display);font-weight:700;font-size:19.5px;line-height:1.24;letter-spacing:-0.016em;color:var(--paper);margin:0 0 9px;}
.step-card p{font-family:var(--body);font-size:14.5px;line-height:1.56;color:rgba(244,239,230,.78);margin:0;}
@media (max-width:820px){.steps-grid{grid-template-columns:1fr;gap:18px;}.steps-grid::before{display:none;}}

/* chevrons between step cards */
.steps-grid .step-card:not(:last-child)::after{content:"";position:absolute;top:50%;right:-17px;width:11px;height:11px;border-top:2px solid var(--signal-2);border-right:2px solid var(--signal-2);transform:translateY(-50%) rotate(45deg);z-index:3;filter:drop-shadow(0 0 6px rgba(216,168,90,.6));}
@media (max-width:820px){.steps-grid .step-card:not(:last-child)::after{display:none;}}

/* step viz line-art: draws itself in when revealed */
.sviz .ln{fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset 1.2s var(--ease);}
.sviz .fl{opacity:0;transition:opacity .7s var(--ease) .5s;}
.steps-grid.in .sviz .ln{stroke-dashoffset:0;}
.steps-grid.in .sviz .fl{opacity:1;}
.sviz .c-paper{stroke:rgba(244,239,230,.7);}
.sviz .c-dim{stroke:rgba(244,239,230,.3);}
.sviz .c-hook{stroke:#8FAECB;} .sviz .c-angle{stroke:var(--signal-2);} .sviz .c-proof{stroke:#7FB08F;} .sviz .c-offer{stroke:#D98A8A;}
.sviz .f-hook{fill:rgba(90,122,154,.4);} .sviz .f-angle{fill:rgba(216,168,90,.45);} .sviz .f-proof{fill:rgba(74,124,89,.45);} .sviz .f-offer{fill:rgba(181,77,77,.4);} .sviz .f-paper{fill:rgba(244,239,230,.75);} .sviz .f-dim{fill:rgba(244,239,230,.2);}

.engine-cta{margin-top:52px;display:flex;flex-direction:column;align-items:center;gap:15px;text-align:center;}

/* ============================================================
   FEATURES — tinted band, spotlight cards
   ============================================================ */
.band-features{padding:96px 0;background:
  radial-gradient(70% 60% at 88% 0%,rgba(216,168,90,.14),transparent 58%),
  radial-gradient(circle,rgba(29,24,18,.05) 1px,transparent 1.4px) 0 0/24px 24px,
  linear-gradient(180deg,#EFE9DD,var(--paper) 70%);
  border-bottom:1px solid var(--rule);}
.band-features .sec-head{margin-bottom:44px;}
.feat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.feat-card{position:relative;background:linear-gradient(180deg,#FFFFFF,#FDFAF4);border:1px solid var(--rule);border-radius:18px;padding:26px 24px 28px;box-shadow:var(--lift),0 14px 32px -24px rgba(29,24,18,.2);overflow:hidden;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s;}
.feat-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--signal),var(--signal-2));transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);}
.feat-card::after{content:"";position:absolute;inset:0;background:radial-gradient(340px circle at var(--mx,50%) var(--my,-40%),rgba(216,168,90,.13),transparent 62%);opacity:0;transition:opacity .35s;pointer-events:none;}
.feat-card:hover{border-color:var(--rule-strong);transform:translateY(-4px);box-shadow:var(--lift),0 28px 52px -26px rgba(29,24,18,.3);}
.feat-card:hover::before{transform:scaleX(1);}
.feat-card:hover::after{opacity:1;}
.feat-card:hover .feat-ic{background:linear-gradient(180deg,rgba(216,168,90,.3),rgba(196,146,58,.16));transform:scale(1.06) rotate(-3deg);}
.feat-ic{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:14px;background:linear-gradient(180deg,rgba(216,168,90,.22),rgba(196,146,58,.1));border:1px solid rgba(196,146,58,.36);color:var(--signal-ink);margin-bottom:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 16px -10px rgba(196,146,58,.45);transition:background .3s,transform .3s var(--ease);}
.feat-ic svg{width:21px;height:21px;}
.feat-card h3{position:relative;z-index:1;font-family:var(--display);font-weight:700;font-size:18px;line-height:1.27;letter-spacing:-0.013em;color:var(--ink);margin:0 0 9px;}
.feat-card p{position:relative;z-index:1;font-family:var(--body);font-size:13.5px;line-height:1.52;color:var(--ink-3);margin:0;}
@media (max-width:920px){.feat-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:520px){.feat-grid{grid-template-columns:1fr;}.band-features{padding:64px 0;}}

/* flow connector between sections */
.flow-arrow{display:flex;flex-direction:column;align-items:center;margin:44px auto 0;}
.fa-line{width:1.5px;height:44px;background:linear-gradient(var(--rule-strong),transparent);}
.fa-chev{width:10px;height:10px;border-right:2px solid var(--rule-strong);border-bottom:2px solid var(--rule-strong);transform:rotate(45deg);margin-top:-6px;}
.steps-section .fa-line{background:linear-gradient(rgba(216,168,90,.5),transparent);}
.steps-section .fa-chev{border-color:rgba(216,168,90,.55);}

/* ============================================================
   TEARDOWN DEMO — darkest room, the centerpiece
   ============================================================ */
.demo-section{position:relative;background:
  radial-gradient(circle,rgba(244,239,230,.028) 1px,transparent 1.4px) 0 0/30px 30px,
  radial-gradient(100% 62% at 50% 0%,rgba(216,168,90,.09),transparent 55%),
  linear-gradient(180deg,#241C13,var(--noir-3) 70%,#1B1409 100%);overflow:hidden;}
.demo-ambient{position:absolute;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(ellipse 58% 46% at 84% 10%, rgba(196,146,58,.13), transparent 60%),
  radial-gradient(ellipse 50% 42% at 10% 92%, rgba(90,122,154,.12), transparent 62%);}
.demo-ambient::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(244,239,230,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(244,239,230,.035) 1px,transparent 1px);background-size:52px 52px;-webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 38%,#000,transparent 78%);mask-image:radial-gradient(ellipse 78% 72% at 50% 38%,#000,transparent 78%);}
.demo-ambient::after{content:"";position:absolute;inset:0;background:radial-gradient(130% 110% at 50% 42%,transparent 55%,rgba(0,0,0,.36) 100%);}

.demo-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:48px;align-items:stretch;}
.td-col{display:flex;flex-direction:column;background:var(--glass);border:1px solid var(--glass-edge);border-radius:22px;padding:22px;box-shadow:0 34px 74px -36px rgba(0,0,0,.8),inset 0 1px 0 rgba(244,239,230,.1);backdrop-filter:blur(7px);}
.td-col-head{display:flex;align-items:center;gap:11px;margin-bottom:18px;}
.tdc-ic{flex:0 0 auto;width:36px;height:36px;border-radius:10px;background:rgba(244,239,230,0.06);border:1px solid var(--ink-line-2);display:flex;align-items:center;justify-content:center;color:var(--signal-2);box-shadow:inset 0 1px 0 rgba(244,239,230,.08);}
.tdc-ic svg{width:19px;height:19px;}
.tdc-name{font-family:var(--display);font-weight:600;font-size:16.5px;color:var(--paper);letter-spacing:-0.01em;}
.tdc-tag{margin-left:auto;font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--signal-2);background:rgba(216,168,90,.1);border:1px solid rgba(216,168,90,.3);border-radius:6px;padding:4px 10px;}
@media (max-width:880px){.demo-duo{grid-template-columns:1fr;}}

/* image ad on the light table */
.demo-canvas{position:relative;background:
  radial-gradient(85% 80% at 50% 20%,rgba(216,168,90,.12),transparent 62%),
  linear-gradient(165deg,#171209,#0D0A06);display:flex;align-items:center;justify-content:center;padding:26px 24px 30px;border-radius:14px;border:1px solid var(--ink-line);box-shadow:inset 0 0 60px rgba(0,0,0,.5);}
.demo-ad{position:relative;width:min(330px,86%);aspect-ratio:1092/1440;border-radius:10px;overflow:hidden;box-shadow:0 34px 70px rgba(0,0,0,.65),0 0 0 1px rgba(244,239,230,.09);container-type:inline-size;}
.demo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.demo-scan{position:absolute;left:0;right:0;top:-10%;height:16%;z-index:6;pointer-events:none;background:linear-gradient(180deg,transparent,rgba(216,168,90,.2) 45%,rgba(216,168,90,.46) 50%,rgba(216,168,90,.2) 55%,transparent);mix-blend-mode:screen;animation:demoScan 7s var(--ease) infinite;}
@keyframes demoScan{0%{top:-16%;opacity:0;}8%{opacity:.9;}46%{top:100%;opacity:.9;}54%{top:108%;opacity:0;}100%{top:108%;opacity:0;}}
.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:.14em;text-transform:uppercase;color:#fff;background:rgba(20,15,9,.75);backdrop-filter:blur(5px);padding:5px 9px;border-radius:6px;border:1px solid rgba(244,239,230,.14);}
.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;}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.8);}}

/* annotation regions */
.anno{position:absolute;border:1.5px solid transparent;transition:opacity .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease);opacity:0;border-radius:6px;z-index:5;}
.anno.on{opacity:1;}
.anno.hook.on{border-color:var(--s-hook);background:rgba(90,122,154,.14);box-shadow:0 0 0 1px rgba(90,122,154,.7),0 0 26px rgba(90,122,154,.35);}
.anno.angle.on{border-color:var(--s-angle);background:rgba(196,146,58,.14);box-shadow:0 0 0 1px rgba(196,146,58,.7),0 0 26px rgba(196,146,58,.35);}
.anno.proof.on{border-color:var(--s-proof);background:rgba(74,124,89,.16);box-shadow:0 0 0 1px rgba(74,124,89,.7),0 0 26px rgba(74,124,89,.38);}
.anno.mech.on{border-color:var(--s-offer);background:rgba(181,77,77,.14);box-shadow:0 0 0 1px rgba(181,77,77,.7),0 0 26px rgba(181,77,77,.35);}
.anno .albl{position:absolute;top:-1px;left:-1px;color:#fff;font-family:var(--mono);font-size:9px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;white-space:nowrap;transform:translateY(-100%);border-radius:4px 4px 0 0;}
.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);}

/* step list under / beside the ad */
.demo-steps{list-style:none;margin:18px 0 0;padding:0;flex:1;}
.demo-step{position:relative;padding:14px 12px 14px 32px;border-bottom:1px solid var(--ink-line);cursor:pointer;border-radius:8px;transition:background .25s;}
.demo-step:hover{background:rgba(244,239,230,.05);}
.demo-step::before{content:"";position:absolute;left:2px;top:17px;width:11px;height:11px;border:1.5px solid var(--ink-line-2);border-radius:50%;background:var(--noir-2);transition:all .3s;z-index:2;}
.demo-step.active{background:rgba(244,239,230,.06);}
.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:7px;top:28px;bottom:-1px;width:1.5px;background:var(--ink-line);}
.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(--paper-on-ink);background:rgba(244,239,230,.1);padding:2px 6px;border-radius:4px;transition:all .3s;}
.demo-step.active .ds-tc{color:var(--noir);background:var(--signal-2);}
.demo-step .ds-name{font-family:var(--display);font-weight:600;font-size:15px;color:var(--paper);}
.demo-step .ds-desc{font-size:13px;line-height:1.52;color:rgba(244,239,230,.78);margin-top:7px;}

/* video teardown: crafted storyboard frames */
.vid-player{position:relative;aspect-ratio:9/13;max-height:470px;border-radius:14px;overflow:hidden;background:#0B0805;border:1px solid var(--ink-line-2);margin:0 auto;width:100%;max-width:330px;box-shadow:0 30px 64px rgba(0,0,0,.6),inset 0 0 0 1px rgba(244,239,230,.04);}
.vp-frames{position:absolute;inset:0;}
.vp-frame{position:absolute;inset:0;opacity:0;transition:opacity .7s var(--ease);}
.vp-frame.on{opacity:1;}
.vp-frame .vpf-scene{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:14% 12% 22%;}
.vp-frame.on .vpf-scene{animation:kenburns 5s var(--ease) forwards;}
@keyframes kenburns{from{transform:scale(1) translateY(4px);}to{transform:scale(1.06) translateY(-4px);}}
.vpf-scene svg{width:100%;height:100%;}
.vpf-cap{position:absolute;left:0;right:0;bottom:16%;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-on-ink-dim);}
/* per-frame scene lighting */
.vp-frame.f0{background:radial-gradient(90% 60% at 50% 22%,rgba(120,150,180,.2),transparent 62%),linear-gradient(170deg,#1B2028,#0C0E12);}
.vp-frame.f1{background:radial-gradient(90% 60% at 50% 30%,rgba(181,77,77,.16),transparent 62%),linear-gradient(170deg,#241A17,#100B0A);}
.vp-frame.f2{background:radial-gradient(90% 66% at 50% 32%,rgba(216,168,90,.24),transparent 64%),linear-gradient(170deg,#26200F,#12100A);}
.vp-frame.f3{background:linear-gradient(90deg,#1F1B16 50%,#2A2317 50%),radial-gradient(80% 60% at 72% 30%,rgba(216,168,90,.16),transparent 60%);}
.vp-frame.f4{background:radial-gradient(90% 60% at 50% 26%,rgba(74,124,89,.18),transparent 62%),linear-gradient(170deg,#17201A,#0B100D);}
.vp-frame.f5{background:radial-gradient(90% 64% at 50% 30%,rgba(216,168,90,.26),transparent 64%),linear-gradient(170deg,#282011,#141009);}
/* storyboard line-art palette */
.sb .ln{fill:none;stroke:rgba(244,239,230,.8);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sb .ln.dim{stroke:rgba(244,239,230,.34);}
.sb .ln.am{stroke:var(--signal-2);} .sb .ln.rd{stroke:#D98A8A;} .sb .ln.gr{stroke:#7FB08F;} .sb .ln.bl{stroke:#8FAECB;} .sb .ln.dk{stroke:#211A12;}
.sb .fl{fill:rgba(244,239,230,.14);} .sb .fl.am{fill:rgba(216,168,90,.4);} .sb .fl.gr{fill:rgba(74,124,89,.4);} .sb .fl.rd{fill:rgba(181,77,77,.38);} .sb .fl.bl{fill:rgba(90,122,154,.35);} .sb .fl.pp{fill:rgba(244,239,230,.8);}
.vp-grain{position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:radial-gradient(rgba(244,239,230,0.045) 1px,transparent 1px);background-size:4px 4px;z-index:2;}
.vp-chrome{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:12px 14px;z-index:3;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent);}
.vp-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:#fff;}
.vpl-dot{width:7px;height:7px;border-radius:50%;background:#ff5a5a;box-shadow:0 0 8px #ff5a5a;animation:pulse 1.4s infinite;}
.vp-time{font-family:var(--mono);font-size:11px;color:#fff;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:4px;}
.vp-waveform{position:absolute;bottom:20px;left:14px;right:14px;height:32px;display:flex;align-items:center;gap:3px;z-index:3;}
.vp-waveform span{flex:1;background:var(--signal-2);border-radius:2px;height:20%;opacity:.7;animation:wave 1.1s ease-in-out infinite;}
.vp-waveform span:nth-child(2n){animation-delay:.15s;} .vp-waveform span:nth-child(3n){animation-delay:.3s;} .vp-waveform span:nth-child(4n){animation-delay:.45s;} .vp-waveform span:nth-child(5n){animation-delay:.6s;}
@keyframes wave{0%,100%{height:16%;}50%{height:82%;}}
.vp-scrub{position:absolute;bottom:0;left:0;right:0;height:4px;background:rgba(244,239,230,.12);z-index:3;}
.vp-scrub-fill{height:100%;width:0;background:linear-gradient(90deg,var(--signal),var(--signal-2));transition:width .25s linear;box-shadow:0 0 8px rgba(216,168,90,.6);}
.vid-meta{display:flex;flex-direction:column;gap:3px;margin-top:16px;padding:0 2px;}
.vm-k{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-on-ink-dim);}
.vm-v{font-size:12.5px;line-height:1.45;color:var(--paper-on-ink);}

/* transcript track */
.vid-track{display:flex;flex-direction:column;margin-top:16px;flex:1;}
.vtrow{position:relative;padding:12px 14px 12px 16px;border-left:3px solid var(--ink-line-2);border-radius:8px;cursor:pointer;transition:background .3s,border-color .3s;}
.vtrow:hover{background:rgba(244,239,230,.04);}
.vtrow.on{background:rgba(244,239,230,.07);}
.vtrow.b-hook.on{border-left-color:var(--s-hook);} .vtrow.b-angle.on{border-left-color:var(--s-angle);} .vtrow.b-mech.on{border-left-color:var(--signal-2);} .vtrow.b-proof.on{border-left-color:var(--s-proof);} .vtrow.b-social.on{border-left-color:#8FAECB;} .vtrow.b-offer.on{border-left-color:var(--s-offer);}
.vtr-line{display:flex;gap:10px;align-items:baseline;margin-bottom:5px;}
.vtr-tc{font-family:var(--mono);font-size:10px;color:var(--paper-on-ink-dim);flex-shrink:0;}
.vtr-quote{font-size:13.5px;line-height:1.42;color:var(--paper);font-style:italic;}
.vtr-an{display:flex;flex-direction:column;gap:3px;padding-left:30px;}
.vtr-tag{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;}
.vtrow.b-hook .vtr-tag{color:#8FAECB;} .vtrow.b-angle .vtr-tag{color:var(--signal-2);} .vtrow.b-mech .vtr-tag{color:var(--signal-3);} .vtrow.b-proof .vtr-tag{color:#7FB08F;} .vtrow.b-social .vtr-tag{color:#8FAECB;} .vtrow.b-offer .vtr-tag{color:#D98A8A;}
.vtr-an p{font-size:12.5px;line-height:1.5;color:rgba(244,239,230,.8);margin:0;}
.vtr-an b{color:var(--paper);font-weight:600;}
@media (max-width:480px){.vtr-an{padding-left:0;}}

.demo-cta{margin-top:44px;text-align:center;}

/* ============================================================
   BRIEF OUTPUT — paper desk with watermark
   ============================================================ */
.brief-section{background:
  radial-gradient(60% 55% at 100% 0%,rgba(216,168,90,.12),transparent 60%),
  linear-gradient(180deg,var(--paper) 0%,#EFE9DC 100%);overflow:hidden;}
.brief-wm{position:absolute;right:-140px;top:50%;transform:translateY(-50%) rotate(14deg);width:560px;height:560px;opacity:.045;pointer-events:none;z-index:0;}
.brief-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 0.92fr;gap:60px;align-items:center;}
@media (max-width:880px){.brief-grid{grid-template-columns:1fr;gap:44px;}}
.brief-copy h2{font-family:var(--display);font-weight:700;font-size:clamp(29px,3.7vw,46px);line-height:1.05;letter-spacing:-0.032em;color:var(--ink);margin:18px 0 0;}
.brief-copy > p{font-size:16.5px;line-height:1.62;color:var(--ink-2);margin:20px 0 0;max-width:520px;}
.brief-points{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:13px;}
.brief-points li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.5;color:var(--ink-2);}
.brief-points b{color:var(--ink);font-weight:600;}
.bp-ic{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg,var(--signal-2),var(--signal));color:#231a0e;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;margin-top:1px;box-shadow:0 6px 12px -6px rgba(196,146,58,.6),inset 0 1px 0 rgba(255,255,255,.4);}

/* the brief document, with two sheets behind it */
.brief-doc{position:relative;display:flex;justify-content:center;}
.bd-window{position:relative;width:100%;max-width:400px;background:var(--paper-card);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--sh-float);overflow:hidden;transform:rotate(1.4deg);transition:transform .45s var(--ease),box-shadow .45s;z-index:2;}
.brief-doc:hover .bd-window{transform:rotate(0) translateY(-4px);}
.bd-sheet{position:absolute;top:14px;bottom:-14px;border-radius:16px;background:#FDFAF4;border:1px solid var(--rule);z-index:1;transition:transform .45s var(--ease);}
.bd-sheet.p1{left:8%;right:-3.5%;transform:rotate(3.6deg);box-shadow:var(--sh-2);}
.bd-sheet.p2{left:12%;right:-1%;transform:rotate(-2.4deg);box-shadow:var(--sh-1);}
.brief-doc:hover .bd-sheet.p1{transform:rotate(5.4deg) translateX(8px);}
.brief-doc:hover .bd-sheet.p2{transform:rotate(-4deg) translateX(-8px);}
.bd-bar{display:flex;align-items:center;gap:7px;padding:12px 15px;border-bottom:1px solid var(--rule);background:var(--paper-2);}
.bd-dot{width:9px;height:9px;border-radius:50%;background:var(--rule-strong);}
.bd-name{font-family:var(--mono);font-size:11px;color:var(--ink-muted);margin-left:6px;}
.bd-body{padding:22px 24px 24px;}
.bd-h{font-family:var(--display);font-weight:600;font-size:20px;color:var(--ink);letter-spacing:-0.01em;}
.bd-sub{font-family:var(--mono);font-size:10.5px;color:var(--ink-muted);letter-spacing:.02em;margin-top:4px;margin-bottom:18px;}
.bd-block{position:relative;padding:11px 0 11px 14px;border-left:3px solid var(--rule-2);margin-bottom:13px;}
.bd-block.b-hook{border-left-color:var(--s-hook);} .bd-block.b-angle{border-left-color:var(--s-angle);} .bd-block.b-proof{border-left-color:var(--s-proof);} .bd-block.b-offer{border-left-color:var(--s-offer);}
.bd-tag{font-family:var(--mono);font-size:9.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px;}
.bd-block.b-hook .bd-tag{color:var(--s-hook);} .bd-block.b-angle .bd-tag{color:var(--s-angle);} .bd-block.b-proof .bd-tag{color:var(--s-proof);} .bd-block.b-offer .bd-tag{color:var(--s-offer);}
.bd-line{height:5px;border-radius:3px;background:linear-gradient(90deg,var(--rule-2),var(--rule));margin-bottom:6px;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--ease);}
.brief-grid.in .bd-line{transform:scaleX(1);}
.brief-grid.in .bd-block:nth-child(3) .bd-line{transition-delay:.15s;}
.brief-grid.in .bd-block:nth-child(4) .bd-line{transition-delay:.3s;}
.brief-grid.in .bd-block:nth-child(5) .bd-line{transition-delay:.45s;}
.bd-line.w90{width:90%;} .bd-line.w80{width:80%;} .bd-line.w70{width:70%;} .bd-line.w60{width:60%;} .bd-line.w50{width:50%;}
.bd-foot{display:flex;gap:8px;margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);}
.bd-chip{font-family:var(--mono);font-size:10px;color:var(--ink-3);background:var(--paper-subtle);border:1px solid var(--rule-2);border-radius:6px;padding:5px 10px;}

/* ============================================================
   CONVERT — dark instrument panel
   ============================================================ */
.convert-section{background:linear-gradient(180deg,#EFE9DC,var(--paper));}
.convert{position:relative;border:1px solid rgba(29,24,18,.4);border-radius:24px;overflow:hidden;background:
  radial-gradient(circle,rgba(244,239,230,.03) 1px,transparent 1.4px) 0 0/28px 28px,
  radial-gradient(110% 90% at 50% -20%,rgba(216,168,90,.16),transparent 55%),
  linear-gradient(180deg,var(--noir),var(--noir-2));color:var(--paper);box-shadow:var(--sh-float),inset 0 1px 0 rgba(244,239,230,.1);}
.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(244,239,230,0.05) 1px,transparent 1px),linear-gradient(90deg,rgba(244,239,230,0.05) 1px,transparent 1px);background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 20%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 80% 80% at 50% 20%,#000 20%,transparent 75%);}
.convert-bg .cv-glow{position:absolute;width:640px;height:640px;left:50%;bottom:-380px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,var(--signal-glow),transparent 62%);opacity:.5;filter:blur(30px);}
.convert-center{position:relative;z-index:2;text-align:center;padding:62px 40px 58px;}
@media (max-width:640px){.convert-center{padding:44px 22px 46px;}}
.convert-center .eyebrow{color:var(--paper-on-ink-dim);justify-content:center;}
.convert-center h2{font-family:var(--display);font-weight:700;font-size:clamp(28px,3.7vw,44px);line-height:1.06;letter-spacing:-0.032em;color:var(--paper);margin:18px auto 0;max-width:640px;}
.convert-center > p{font-size:16.5px;line-height:1.62;color:var(--paper-on-ink);margin:20px auto 0;max-width:560px;}
.convert-actions{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:32px;flex-wrap:wrap;}
.convert-actions .btn-ghost{color:var(--paper);border-color:var(--ink-line-2);background:rgba(244,239,230,.04);}
.convert-actions .btn-ghost:hover{background:rgba(244,239,230,.1);color:var(--paper);}

/* pipeline visual: ad -> mark -> brief */
.cv-visual{display:flex;align-items:center;justify-content:center;gap:8px;margin:34px 0 4px;flex-wrap:wrap;}
.cvv-step{display:flex;flex-direction:column;align-items:center;gap:10px;}
.cvv-ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:76px;border-radius:13px;background:linear-gradient(180deg,rgba(244,239,230,.1),rgba(244,239,230,.05));border:1px solid var(--ink-line-2);box-shadow:0 14px 30px -14px rgba(0,0,0,.6),inset 0 1px 0 rgba(244,239,230,.1);}
.cvv-ic svg{width:40px;height:50px;}
.cvv-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--paper-on-ink-dim);}
.cvv-flow{width:64px;height:14px;margin:0 2px 28px;flex:0 0 auto;}
.cvv-flow line{stroke:var(--signal-2);stroke-width:2;stroke-dasharray:5 6;animation:dashflow 1.4s linear infinite;}
.cvv-flow polyline{stroke:var(--signal-2);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
@keyframes dashflow{to{stroke-dashoffset:-22;}}
.cvv-brand{position:relative;flex:0 0 auto;width:82px;height:82px;border-radius:50%;background:linear-gradient(180deg,var(--ink-soft),var(--noir-3));display:flex;align-items:center;justify-content:center;box-shadow:0 20px 44px -14px rgba(0,0,0,.7),0 0 0 1px rgba(216,168,90,.28),inset 0 1px 0 rgba(244,239,230,.12);margin-bottom:28px;}
.cvv-brand svg{width:42px;height:42px;}
.cvv-brand::before{content:"";position:absolute;inset:-11px;border-radius:50%;border:1.5px dashed rgba(216,168,90,.4);animation:orbit 24s linear infinite;}
@keyframes orbit{to{transform:rotate(360deg);}}
@media (max-width:480px){.cvv-flow{width:34px;}.cvv-brand{width:68px;height:68px;}.cvv-brand svg{width:34px;height:34px;}.cvv-ic{width:56px;height:66px;}}

/* ============================================================
   FAQ
   ============================================================ */
.faq-section{background:var(--paper);}
.faq-list{margin:48px auto 0;max-width:860px;display:flex;flex-direction:column;gap:12px;}
.faq-item{border:1px solid var(--rule);border-radius:14px;background:linear-gradient(180deg,#FFFFFF,#FDFAF4);box-shadow:var(--lift),0 10px 24px -20px rgba(29,24,18,.18);transition:border-color .3s,box-shadow .3s,transform .3s var(--ease);overflow:hidden;}
.faq-item:hover{border-color:var(--rule-strong);}
.faq-item[open]{border-color:rgba(196,146,58,.5);box-shadow:var(--lift),0 20px 40px -22px rgba(29,24,18,.24);transform:translateY(-1px);}
.faq-q{width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:22px 24px;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;font-family:var(--display);font-weight:500;font-size:18.5px;color:var(--ink);letter-spacing:-0.01em;transition:color .2s;list-style:none;}
.faq-q::-webkit-details-marker{display:none;}
.faq-q .qnum{font-family:var(--mono);font-size:11.5px;color:var(--ink-muted);flex:0 0 auto;padding-top:5px;width:32px;transition:color .25s;}
.faq-item[open] .qnum{color:var(--signal-ink);font-weight:600;}
.faq-q .qtext{flex:1;}
.faq-q .plus{position:relative;width:18px;height:18px;flex:0 0 auto;margin-top:4px;}
.faq-q .plus::before,.faq-q .plus::after{content:"";position:absolute;background:var(--ink-3);transition:transform .3s var(--ease),background .2s;border-radius:1px;}
.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) scaleY(0);}
.faq-item[open] .plus::before{background:var(--signal);}
.faq-a{padding:0 24px 24px 56px;max-width:760px;animation:faqin .4s 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;}
@media (max-width:560px){.faq-a{padding-left:24px;}}

/* ============================================================
   FINAL CTA — spotlight
   ============================================================ */
.final{background:
  radial-gradient(circle,rgba(244,239,230,.03) 1px,transparent 1.4px) 0 0/30px 30px,
  linear-gradient(180deg,#251D13,var(--noir-3));color:var(--paper);position:relative;overflow:hidden;}
.final .fspot{position:absolute;left:50%;top:-46%;transform:translateX(-50%);width:1100px;height:820px;background:radial-gradient(ellipse 50% 58% at 50% 30%,rgba(216,168,90,.24),rgba(216,168,90,.06) 55%,transparent 72%);pointer-events:none;animation:breathe 9s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:.8;transform:translateX(-50%) scale(1);}50%{opacity:1;transform:translateX(-50%) scale(1.05);}}
.final .fgrid{position:absolute;inset:0;z-index:0;background-image:linear-gradient(rgba(244,239,230,0.045) 1px,transparent 1px),linear-gradient(90deg,rgba(244,239,230,0.045) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 66% 86% at 50% 42%,#000 22%,transparent 78%);mask-image:radial-gradient(ellipse 66% 86% at 50% 42%,#000 22%,transparent 78%);}
.final .container{position:relative;z-index:2;text-align:center;}
.final .eyebrow{color:rgba(244,239,230,.62);justify-content:center;}
.final h2{color:var(--paper);font-family:var(--display);font-weight:700;font-size:clamp(34px,5.2vw,60px);line-height:1.02;letter-spacing:-0.038em;margin:20px auto 0;max-width:820px;text-wrap:balance;}
.final p{color:rgba(244,239,230,.88);font-size:18px;line-height:1.58;margin:22px auto 0;max-width:560px;}
.final .btn-amber{margin-top:38px;}
.final-maker{margin:26px auto 0;max-width:540px;text-align:center;font-family:var(--body);font-size:13.5px;line-height:1.5;color:var(--paper-on-ink-dim);}
.final-maker::before{content:"";display:block;width:26px;height:2px;border-radius:2px;background:var(--signal);margin:0 auto 12px;opacity:.8;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:linear-gradient(180deg,var(--noir-3),#120D06);color:var(--paper-on-ink);padding:64px 0 34px;position:relative;}
.site-footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(216,168,90,.45),transparent);}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start;}
.site-footer .wordmark{color:var(--paper);}
.foot-desc{font-size:14.5px;line-height:1.6;max-width:360px;margin:18px 0 0;color:var(--paper-on-ink);}
.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:.16em;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;}
.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 PAGES (terms / privacy / cookies / DSAR)
   ============================================================ */
.legal-main{background:
  radial-gradient(80% 40% at 50% 0%,#FBF7F0,transparent 70%),
  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:34px 0 14px;letter-spacing:-0.01em;padding-top:20px;border-top:1px solid var(--rule);}
.legal-body > h2:first-child{margin-top:0;padding-top:0;border-top:0;}
.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);}
.termly-embed-wrap{min-height:60vh;}
.termly-embed-wrap [name="termly-embed"]{font-family:var(--body);color:var(--ink-2);}
.dsar-embed{margin-top:8px;border:1px solid var(--rule);border-radius:14px;background:var(--paper-card);box-shadow:var(--sh-1);overflow:hidden;}
.dsar-embed iframe{width:100%;min-height:900px;border:0;display:block;background:var(--paper-card);}
@media (max-width:640px){.dsar-embed iframe{min-height:1100px;}}
a.termly-display-preferences{cursor:pointer;}

/* ============================================================
   REDUCED MOTION — everything settles into its final state
   ============================================================ */
@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;filter:none!important;}
  .hx{opacity:1;transform:none;}
  .hx-tag{opacity:1;transform:translateY(-50%);}
  .hx-tag::before{transform:scaleX(1);}
  .hx.is-exploded .hx-slice+.hx-slice{margin-top:15px;}
  .hx-scan,.demo-scan{display:none;}
  .bd-line{transform:scaleX(1)!important;}
  .sviz .ln{stroke-dashoffset:0!important;} .sviz .fl{opacity:1!important;}
  .tape-track{animation:none;transform:none;}
}