/* ================================================================
   LIGHTING PASS — loaded after styles.css.
   Key light: high, top-centre/right. Fill: accent smoke from below.
   ================================================================ */
html[data-accent="mono"]{--smoke-a:rgba(255,255,255,.17);--smoke-b:rgba(190,196,206,.24);--smoke-c:rgba(120,124,134,.32);--beam:rgba(255,255,255,.16)}
html[data-accent="red"] {--smoke-a:rgba(255,46,59,.50); --smoke-b:rgba(255,140,128,.30);--smoke-c:rgba(140,20,30,.55);  --beam:rgba(255,190,190,.14)}
html[data-accent="blue"]{--smoke-a:rgba(47,107,255,.52);--smoke-b:rgba(150,185,255,.30);--smoke-c:rgba(20,50,140,.6);   --beam:rgba(190,210,255,.15)}

:root{
  --tile:linear-gradient(162deg,#202020 0%,#121212 38%,#090909 100%);
  --rim:linear-gradient(160deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.07) 30%,rgba(255,255,255,0) 58%,rgba(255,255,255,.10) 100%);
  --drop:0 1px 0 rgba(255,255,255,.04) inset,0 40px 80px -40px rgba(0,0,0,.95),0 12px 24px -12px rgba(0,0,0,.8);
}

/* film grain over everything (kills banding, adds richness) */
body::after{content:"";position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* metallic chrome text with a highlight band */
.chrome-text{background:linear-gradient(180deg,#FFFFFF 0%,#F4F4F4 30%,#A9A9A9 55%,#E2E2E2 72%,#8E8E8E 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 18px rgba(255,255,255,.08))}
.dim{background:linear-gradient(180deg,#9A9A9A 0%,#5E5E5E 60%,#7C7C7C 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- BRUSHED-SILVER CTA (Fundora) ---------- */
.btn--primary{position:relative;overflow:hidden;isolation:isolate;color:#121212;border-radius:12px;
  font:600 12.5px/1 var(--font-ui);letter-spacing:.045em;text-transform:uppercase;padding:15px 16px 15px 20px;
  border:1px solid rgba(255,255,255,.75);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.035) 1px 2px,transparent 2px 4px),
    linear-gradient(180deg,#FBFBFB 0%,#DADADA 30%,#A7A7A7 50%,#C4C4C4 66%,#ECECEC 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.25),
    0 1px 0 rgba(0,0,0,.9),0 14px 30px -10px rgba(0,0,0,.95),0 0 34px -8px var(--accent-glow);
  text-shadow:0 1px 0 rgba(255,255,255,.65)}
.btn--primary::after{content:"";position:absolute;inset:-2px;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.85) 48%,transparent 62%);transform:translateX(-120%)}
.btn--primary:hover{background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,rgba(0,0,0,.035) 1px 2px,transparent 2px 4px),
    linear-gradient(180deg,#FFFFFF 0%,#E4E4E4 30%,#B4B4B4 50%,#CFCFCF 66%,#F4F4F4 100%)}
.btn--primary:hover::after{transform:translateX(120%);transition:transform 900ms var(--ease)}
.btn--primary:active{box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 1px 0 rgba(0,0,0,.9)}
.btn--primary .arr{background:linear-gradient(180deg,#2a2a2a,#050505);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.2)}
.btn--primary:disabled{opacity:.45}
.btn--sm.btn--primary{padding:11px 10px 11px 15px;font-size:11.5px;border-radius:10px}
/* gunmetal secondary */
.btn--ghost,.btn--glass{border-radius:12px;font:600 12.5px/1 var(--font-ui);letter-spacing:.045em;text-transform:uppercase;padding:15px 16px 15px 20px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),linear-gradient(180deg,#2C2C2C 0%,#171717 50%,#0E0E0E 100%);
  border-color:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 0 #000,0 12px 26px -12px #000}
.btn--ghost:hover,.btn--glass:hover{border-color:rgba(255,255,255,.3);background:repeating-linear-gradient(90deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),linear-gradient(180deg,#363636,#1a1a1a 50%,#101010)}
.btn--sm.btn--ghost{padding:11px 14px;font-size:11.5px;border-radius:10px}
.btn--dark{border-radius:12px;font:600 12.5px/1 var(--font-ui);letter-spacing:.045em;text-transform:uppercase;padding:15px 16px 15px 20px;
  background:linear-gradient(180deg,#2a2a2a,#050505);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 12px 24px -10px rgba(0,0,0,.7)}
.pc-tag,.badge b{background:linear-gradient(180deg,#fff,#bdbdbd 55%,#e6e6e6);color:#111;box-shadow:inset 0 1px 0 #fff,0 2px 6px -2px #000}
html:not([data-accent="mono"]) .pc-tag{background:var(--accent);color:#fff;box-shadow:0 0 18px -2px var(--accent-glow)}

/* ---------- every card gets a lit rim + real shadow ---------- */
.tile,.price-card,.q,.faq details,.panel,.final-card,.tt,.modal-card,.chart-screen{position:relative}
.tt{position:absolute}
.tile::after,.price-card::after,.q::after,.faq details::after,.panel::after,.final-card::after,.tt::after,.modal-card::after,.chart-screen::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tile,.price-card,.q,.faq details,.panel,.final-card{border-color:rgba(255,255,255,.05);box-shadow:var(--drop)}

/* ---------- section light: a soft key light from above each block ---------- */
.section,.statrow,.final{position:relative;isolation:isolate}
.section::before{content:"";position:absolute;z-index:-1;left:50%;top:40px;width:min(1100px,120%);height:620px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 45% at 50% 0%,var(--beam) 0%,transparent 70%)}

/* ---------- HERO: beam + smoke + lit stars ---------- */
.hero{isolation:isolate}
.hero::before{content:"";position:absolute;z-index:-2;left:30%;right:-30vw;top:-140px;height:820px;pointer-events:none;
  background:
    conic-gradient(from 180deg at 62% 0%,transparent 0deg,rgba(255,255,255,.10) 18deg,rgba(255,255,255,.02) 34deg,transparent 52deg,transparent 308deg,rgba(255,255,255,.02) 326deg,rgba(255,255,255,.09) 342deg,transparent 360deg),
    radial-gradient(28% 32% at 64% 44%,var(--smoke-a) 0%,transparent 70%),
    radial-gradient(30% 30% at 80% 70%,var(--smoke-c) 0%,transparent 70%),
    radial-gradient(35% 25% at 45% 20%,var(--smoke-b) 0%,transparent 70%);
  filter:blur(8px);-webkit-mask:linear-gradient(180deg,#000 70%,transparent);mask:linear-gradient(180deg,#000 70%,transparent)}
.hero::after{content:"";position:absolute;z-index:-1;left:-20vw;right:-20vw;bottom:0;height:200px;pointer-events:none;background:linear-gradient(180deg,transparent,var(--canvas))}
.star-glow{width:460px;height:460px;background:radial-gradient(circle,var(--smoke-a) 0%,var(--smoke-c) 30%,transparent 62%);filter:blur(30px);opacity:.85}
.s{filter:drop-shadow(0 30px 40px rgba(0,0,0,.85)) drop-shadow(0 0 24px rgba(255,255,255,.22)) drop-shadow(0 0 60px var(--accent-glow))}
.stars-3d::after{content:"";position:absolute;left:18%;right:8%;bottom:-10px;height:60px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.14),transparent 70%);filter:blur(6px)}
.grid-bg{background-image:linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px)}
.hero-sub{color:rgba(242,242,242,.66)}

/* ---------- marquee + stat row ---------- */
.marquee{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.statrow::before{content:"";position:absolute;inset:20px 0 -40px;z-index:-1;background:radial-gradient(60% 80% at 50% 50%,rgba(255,255,255,.04),transparent 70%)}

/* ---------- bento: each tile lit differently ---------- */
.bento .tile:nth-child(1){background:radial-gradient(70% 90% at 100% 110%,var(--smoke-a),transparent 60%),radial-gradient(50% 60% at 0% 0%,rgba(255,255,255,.08),transparent 70%),var(--tile)}
.bento .tile:nth-child(2){background:radial-gradient(70% 70% at 50% 35%,var(--smoke-b),transparent 65%),var(--tile)}
.bento .tile:nth-child(3){background:radial-gradient(80% 70% at 50% 40%,rgba(255,255,255,.10),transparent 65%),radial-gradient(60% 60% at 0% 100%,var(--smoke-c),transparent 70%),var(--tile)}
.bento .tile:nth-child(4){background:radial-gradient(70% 80% at 80% 20%,var(--smoke-a),transparent 60%),var(--tile)}
.chip{background:linear-gradient(180deg,#333 0%,#1a1a1a 55%,#101010 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 22px -8px #000,0 0 0 1px rgba(0,0,0,.5)}
.chart-screen{background:linear-gradient(170deg,#262626,#0c0c0c 70%);box-shadow:0 30px 50px -20px #000,inset 0 1px 0 rgba(255,255,255,.12)}
.chart-line{stroke:#f0f0f0;filter:drop-shadow(0 0 6px rgba(255,255,255,.5))}
.sc{background:linear-gradient(180deg,#fff 0%,#e6e6e6 45%,#bdbdbd 100%);box-shadow:inset 0 1px 0 #fff,0 18px 34px -10px #000}

/* ---------- proof tiles: lit from the key light ---------- */
.proof{background:radial-gradient(45% 70% at 75% 45%,var(--smoke-a),transparent 70%),radial-gradient(40% 60% at 20% 0%,rgba(255,255,255,.06),transparent 70%),linear-gradient(180deg,#0b0b0b,#070707)}
.tt{background:linear-gradient(155deg,#3a3a3a 0%,#1c1c1c 35%,#0b0b0b 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 40px 60px -20px #000,0 0 50px -20px var(--accent-glow)}

/* ---------- orbit: glowing rings + lit stack ---------- */
.r1{border-color:rgba(255,255,255,.08);box-shadow:0 0 120px -30px var(--smoke-b) inset}
.r2{border-color:rgba(255,255,255,.18);box-shadow:0 0 0 1px rgba(0,0,0,.6),0 0 60px -10px var(--smoke-b),inset 0 0 60px -10px rgba(255,255,255,.08)}
.r3{width:56%;height:56%;background:radial-gradient(circle,var(--smoke-a) 0%,var(--smoke-c) 40%,transparent 70%);filter:blur(10px)}
.layers i{background:linear-gradient(135deg,#ffffff 0%,#e2e2e2 25%,#8a8a8a 60%,#3a3a3a 100%);box-shadow:inset 0 1px 0 #fff,0 14px 24px -6px rgba(0,0,0,.9),0 0 30px -8px rgba(255,255,255,.35)}
.node span{box-shadow:inset 0 1px 0 #fff,0 0 0 6px rgba(255,255,255,.05),0 0 30px -4px var(--accent-glow),0 14px 26px -6px #000}

/* ---------- Fey panels: smoke in every column ---------- */
.panel{background:linear-gradient(180deg,#151515 0%,#0b0b0b 100%)}
.panel::before{inset:auto -120% -12% -120%;height:75%;opacity:1;filter:blur(10px);
  background:radial-gradient(38% 75% at 50% 100%,var(--smoke-a),transparent 72%)}
.panel:nth-child(2)::before{background:radial-gradient(38% 80% at 50% 100%,var(--smoke-b),transparent 72%)}
.panel:nth-child(3)::before{background:radial-gradient(38% 75% at 50% 100%,var(--smoke-c),transparent 72%)}
.panel:nth-child(4)::before{background:radial-gradient(38% 90% at 50% 100%,rgba(255,255,255,.22),transparent 72%)}
.panel:nth-child(5)::before{background:radial-gradient(38% 80% at 50% 100%,var(--smoke-a),transparent 72%)}
.panel:nth-child(6)::before{background:radial-gradient(38% 75% at 50% 100%,var(--smoke-b),transparent 72%)}
.panel:nth-child(7)::before{background:radial-gradient(38% 75% at 50% 100%,var(--smoke-c),transparent 72%)}
.panel.is-open{background:linear-gradient(180deg,#1b1b1b,#0b0b0b)}
.panel.is-open::before{opacity:1;inset:-10%;height:auto;
  background:radial-gradient(40% 35% at 55% 45%,rgba(255,255,255,.20),transparent 70%),radial-gradient(50% 45% at 50% 100%,var(--smoke-a),transparent 75%)}
.p-ico{background:linear-gradient(180deg,#2e2e2e,#121212);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 6px 12px -4px #000}

/* ---------- pricing: silver hero card ---------- */
.price-card{background:radial-gradient(80% 50% at 50% 0%,rgba(255,255,255,.07),transparent 70%),var(--tile)}
.price-card--hi{color:#0c0c0c;border-color:rgba(255,255,255,.8);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,rgba(0,0,0,.02) 1px 2px,transparent 2px 4px),
    linear-gradient(175deg,#FFFFFF 0%,#E9E9E9 30%,#BDBDBD 62%,#DCDCDC 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.25),0 50px 90px -30px var(--accent-glow),0 30px 60px -30px #000,0 0 80px -30px rgba(255,255,255,.35)}
.price-card--hi::after{background:linear-gradient(160deg,#fff,rgba(255,255,255,.2) 40%,transparent 60%,rgba(255,255,255,.6))}

/* ---------- reviews / faq ---------- */
.q{background:radial-gradient(70% 50% at 0% 0%,rgba(255,255,255,.07),transparent 70%),var(--tile)}
.q:nth-child(3n+2){background:radial-gradient(70% 60% at 100% 100%,var(--smoke-c),transparent 70%),var(--tile)}
.av{background:linear-gradient(145deg,#fff,#bdbdbd 45%,#6d6d6d);box-shadow:inset 0 1px 0 #fff,0 4px 10px -2px #000}
.faq details[open]{background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px),linear-gradient(180deg,#FAFAFA,#D2D2D2);
  box-shadow:inset 0 1px 0 #fff,0 24px 50px -20px #000,0 0 50px -24px rgba(255,255,255,.4)}

/* ---------- about / results placeholders get depth ---------- */
.about-photo{background:radial-gradient(55% 45% at 50% 35%,rgba(255,255,255,.14),transparent 70%),radial-gradient(60% 50% at 50% 110%,var(--smoke-a),transparent 70%),var(--tile)}
.ba-split span{background:radial-gradient(70% 60% at 30% 20%,rgba(255,255,255,.08),transparent 70%),linear-gradient(160deg,#1e1e1e,#0b0b0b)}
.ba-split span:last-child{background:radial-gradient(70% 60% at 70% 100%,var(--smoke-a),transparent 70%),linear-gradient(160deg,#262626,#0e0e0e)}

/* ---------- final CTA + footer ---------- */
.final-card{background:radial-gradient(55% 75% at 50% -10%,var(--smoke-a),transparent 70%),radial-gradient(40% 40% at 50% 0%,rgba(255,255,255,.14),transparent 70%),radial-gradient(40% 50% at 100% 100%,var(--smoke-c),transparent 70%),linear-gradient(180deg,#141414,#080808)}
.footer{position:relative;isolation:isolate}
.footer::before{content:"";position:absolute;z-index:-1;left:-20%;right:-20%;bottom:-40px;height:340px;pointer-events:none;
  background:radial-gradient(38% 80% at 50% 100%,var(--smoke-a),transparent 70%)}
.wordmark{background:linear-gradient(180deg,#FFFFFF 0%,#D8D8D8 28%,#7A7A7A 52%,#2A2A2A 80%,#111 100%);-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 -2px 20px rgba(255,255,255,.08))}

/* nav: lit edge */
.nav{background:linear-gradient(180deg,rgba(30,30,30,.72),rgba(10,10,10,.72));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 20px 40px -20px #000}
.mark{background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 1px,transparent 1px 3px),linear-gradient(160deg,#fff,#a9a9a9 50%,#e6e6e6);box-shadow:inset 0 1px 0 #fff,0 4px 10px -3px #000}

@media (max-width:640px){
  .hero::before{left:-10vw;top:-80px;height:640px}
  .btn--primary,.btn--ghost{padding:15px 16px}
  .btn--sm.btn--primary{padding:10px 14px}
}
@media (prefers-reduced-motion:reduce){.btn--primary:hover::after{transition:none}}


/* ================================================================
   RESULTS — drag-to-compare before/after
   ================================================================ */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:980px;margin:0 auto}
.ba-card{margin:0;padding:10px;display:flex;flex-direction:column}
.compare{position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;background:#0b0b0b;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 30px 60px -30px #000;touch-action:pan-y}
.c-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.c-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0);filter:saturate(.8) brightness(.95)}
.compare::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55) 100%),radial-gradient(120% 80% at 50% 0%,transparent 60%,rgba(0,0,0,.35))}
.c-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;transform:translateX(-1px);z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff 20%,#fff 80%,rgba(255,255,255,0));box-shadow:0 0 18px rgba(255,255,255,.6)}
.c-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font:600 13px/1 var(--font-ui);letter-spacing:-.05em;color:#111;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 3px),linear-gradient(180deg,#fff,#c9c9c9 50%,#ececec);
  box-shadow:inset 0 1px 0 #fff,0 10px 24px -6px #000,0 0 30px -6px var(--accent-glow)}
.c-tag{position:absolute;bottom:14px;z-index:2;pointer-events:none;font:600 10.5px/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;
  padding:7px 10px;border-radius:8px;background:rgba(10,10,10,.6);border:1px solid rgba(255,255,255,.14);color:#e9e9e9;backdrop-filter:blur(8px)}
.c-tag--l{left:14px}
.c-tag--r{right:14px;background:linear-gradient(180deg,#fff,#cfcfcf);color:#111;border-color:#fff}
.c-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:3;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.c-range:focus-visible + *{outline:none}
.compare:focus-within .c-knob{outline:2px solid var(--accent);outline-offset:3px}
.ba-card figcaption{display:flex;flex-direction:column;gap:6px;padding:18px 10px 10px}
.ba-card figcaption .label{color:var(--accent-text)}
.ba-card figcaption b{font:500 20px/1.2 var(--font-display);letter-spacing:-.02em}
.ba-card figcaption .muted{font-size:14px}

/* About photo */
.about-photo{position:relative;padding:0;overflow:hidden}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.about-photo::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.75)),radial-gradient(70% 60% at 50% 110%,var(--smoke-a),transparent 70%)}
.about-photo .label{position:absolute;left:20px;bottom:20px;z-index:2;color:#eee}

/* ================================================================
   SEAMLESS — no light ever ends on a hard edge.
   Every glow is a free-floating ellipse that fades to 0 inside its box.
   ================================================================ */
.section::before{top:-60px;height:760px;width:min(1400px,140%);
  background:radial-gradient(closest-side ellipse at 50% 42%,var(--beam) 0%,transparent 100%);opacity:.9}
.statrow::before{inset:-60px -10%;background:radial-gradient(closest-side ellipse at 50% 50%,rgba(255,255,255,.045),transparent)}
.proof{background:none;border:0;overflow:visible;isolation:isolate}
.proof::before{content:"";position:absolute;z-index:-1;inset:-220px 0;pointer-events:none;
  background:radial-gradient(ellipse 460px 380px at 72% 50%,var(--smoke-a) 0%,transparent 100%),
             radial-gradient(ellipse 520px 340px at 20% 40%,rgba(255,255,255,.05),transparent 100%)}
@media (max-width:960px){.proof::before{background:radial-gradient(ellipse 340px 300px at 60% 68%,var(--smoke-a) 0%,transparent 100%)}}
.marquee{background:none;box-shadow:none;border:0;position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.1) 30%,rgba(255,255,255,.1) 70%,transparent)}
.marquee::before{top:0}.marquee::after{bottom:0}
.footer{border-top:0}
.footer::after{content:"";position:absolute;top:0;left:10%;right:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent)}
.hero::after{display:none}
.hero::before{-webkit-mask:radial-gradient(closest-side ellipse at 50% 45%,#000 55%,transparent);mask:radial-gradient(closest-side ellipse at 50% 45%,#000 55%,transparent)}
.footer::before{background:radial-gradient(closest-side ellipse at 50% 100%,var(--smoke-a),transparent)}

@media (max-width:760px){
  .ba-grid{grid-template-columns:1fr}
  .about-photo{min-height:420px}
}


/* ================================================================
   HERO = PROOF — Road's transformation is the hero visual.
   Phone order: headline → slider → copy/CTAs (proof inside first screen).
   ================================================================ */
.hero--proof{grid-template-columns:1.08fr .92fr;grid-template-areas:"head proof" "body proof";column-gap:56px;row-gap:26px;
  min-height:0;padding:84px 16px 72px;align-items:center}
.hero--proof .hero-head{grid-area:head;align-self:end;display:flex;flex-direction:column;align-items:flex-start}
.hero--proof .hero-body{grid-area:body;align-self:start}
.hero--proof .hero-title{font-size:clamp(44px,6.2vw,90px);margin:20px 0 0}
.hero--proof .hero-sub{max-width:470px}
.hero--proof .hero-ctas{margin-top:28px}
.hero-proof{grid-area:proof;position:relative;width:100%;max-width:460px;justify-self:end;display:flex;flex-direction:column;gap:14px}
.proof-glow{position:absolute;inset:-14% -18% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side ellipse at 50% 55%,var(--smoke-a),transparent),radial-gradient(closest-side ellipse at 30% 20%,rgba(255,255,255,.12),transparent);filter:blur(10px)}
.proof-tabs{align-self:flex-start;display:flex;gap:4px;padding:4px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--border-lit);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.proof-tabs button{border:0;cursor:pointer;padding:9px 16px;border-radius:9px;background:transparent;color:var(--text-muted);
  font:600 11.5px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase;transition:color var(--t-fast),background var(--t-fast)}
.proof-tabs button[aria-selected="true"]{color:#111;background:linear-gradient(180deg,#fff,#cfcfcf 55%,#ececec);box-shadow:inset 0 1px 0 #fff,0 4px 10px -4px #000}
.proof-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.compare--hero{border-radius:22px;box-shadow:0 0 0 1px rgba(255,255,255,.1),0 50px 90px -30px #000,0 0 80px -30px var(--accent-glow)}
.compare--hero::before{content:"";position:absolute;inset:0;z-index:4;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.55),rgba(255,255,255,.06) 35%,transparent 60%,rgba(255,255,255,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.compare .c-img{transition:opacity 260ms var(--ease)}
.compare.is-swapping .c-img{opacity:0}
.c-hint{position:absolute;left:var(--pos);top:calc(50% + 34px);transform:translateX(-50%);z-index:2;pointer-events:none;
  font:600 10px/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:#fff;padding:5px 8px;border-radius:6px;background:rgba(0,0,0,.55);
  animation:hint 2.4s var(--ease) 1.2s 2 both;transition:opacity 300ms}
.compare.touched .c-hint{opacity:0}
@keyframes hint{0%,100%{opacity:.9}50%{opacity:.35}}
.compare--hero .c-knob{width:52px;height:52px}
.rating-chip{position:absolute;left:-28px;bottom:58px;z-index:5;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;font-size:13px;color:var(--text-muted);
  background:linear-gradient(180deg,rgba(40,40,40,.75),rgba(14,14,14,.75));border:1px solid var(--border-lit);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 20px 40px -14px #000}
.rating-chip b{color:#fff;font-weight:600}
.rating-chip .stars{color:var(--accent-text);letter-spacing:1px;font-size:12px}
html[data-accent="mono"] .rating-chip .stars{color:#fff}

@media (max-width:960px){
  .hero--proof{grid-template-columns:1fr 1fr;column-gap:28px}
  .rating-chip{left:12px;bottom:56px}
}
@media (max-width:760px){
  .hero--proof{grid-template-columns:1fr;grid-template-areas:"head" "proof" "body";padding:22px 16px 56px;row-gap:16px}
  .hero--proof .hero-head .badge{display:none}
  .hero--proof .hero-title{font-size:clamp(34px,10vw,44px);margin:0;letter-spacing:-.045em}
  .hero-proof{max-width:none;justify-self:stretch;gap:10px}
  .proof-tabs{position:absolute;top:10px;left:10px;z-index:6;background:rgba(10,10,10,.55);backdrop-filter:blur(10px)}
  .compare--hero{aspect-ratio:4/4.6}
  .rating-chip{position:static;align-self:flex-start;padding:8px 12px;font-size:12.5px}
  .hero--proof .hero-ctas{margin-top:20px}
}


/* ================================================================
   CLIENT RESULTS WALL — small side-by-side pairs (source photos are low-res)
   ================================================================ */
.cw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cw-card{margin:0;padding:8px;border-radius:20px;position:relative;
  background:radial-gradient(80% 60% at 50% 0%,rgba(255,255,255,.06),transparent 70%),var(--tile);border:1px solid rgba(255,255,255,.05);box-shadow:var(--drop)}
.cw-card::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:var(--rim);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.cw-pair{display:grid;grid-template-columns:1fr 1fr;gap:4px;border-radius:14px;overflow:hidden}
.cw-ph{position:relative;aspect-ratio:4/5;overflow:hidden;background:#111}
.cw-ph img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 700ms var(--ease)}
.cw-ph:first-child img{filter:saturate(.75) brightness(.92)}
.cw-card:hover .cw-ph img{transform:scale(1.03)}
.cw-ph .c-tag{bottom:8px;font-size:9px;padding:5px 7px}
.cw-ph .c-tag--l{left:8px}.cw-ph .c-tag--r{right:8px}
.cw-card figcaption{display:flex;justify-content:space-between;align-items:center;padding:12px 8px 6px}
.cw-kind{font-size:13px;color:var(--text-muted)}
.cw-cta{display:flex;justify-content:center;margin-top:32px}
@media (max-width:960px){.cw-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cw-grid{grid-template-columns:1fr}}


/* ================================================================
   CONVERSION LAYER — Club-first CTAs, sticky phone bar, swipe results
   ================================================================ */
.hero-note{margin:14px 0 0;font-size:12.5px;color:var(--text-faint)}
.pc-tag--soft{background:rgba(255,255,255,.1)!important;color:#e9e9e9!important;box-shadow:none!important}

/* sticky bar: phones only, appears after the hero CTAs scroll away */
.mbar{display:none}
@media (max-width:760px){
  .mbar{display:grid;grid-template-columns:1.25fr 1fr;gap:8px;position:fixed;left:10px;right:10px;bottom:10px;z-index:90;padding:8px;border-radius:16px;
    background:linear-gradient(180deg,rgba(28,28,28,.82),rgba(8,8,8,.9));border:1px solid var(--border-lit);
    backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 20px 40px -10px #000;
    transform:translateY(140%);transition:transform 420ms var(--ease)}
  .mbar.show{transform:none}
  .mbar .btn{padding:14px 10px;font-size:11.5px;justify-content:center}
  body{padding-bottom:env(safe-area-inset-bottom)}
  .footer{padding-bottom:96px}

  /* client results: horizontal swipe instead of a long stack */
  .cw-grid{display:grid;grid-auto-flow:column;grid-auto-columns:84%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px;margin:0 -16px;padding:0 16px 6px;scrollbar-width:none}
  .cw-grid::-webkit-scrollbar{display:none}
  .cw-card{scroll-snap-align:center}
}


/* ================================================================
   HERO B — monochrome portrait (toggle via html[data-hero])
   Layers: wordmark (back) → accent smoke → transparent cutout → copy/cards
   ================================================================ */
.hero--portrait{display:none}
html[data-hero="portrait"] .hero--proof{display:none}
html[data-hero="portrait"] .hero--portrait{display:block}
.hero--portrait{position:relative;max-width:none;margin:-74px 0 0;padding:0;min-height:min(100svh,940px);overflow:hidden;isolation:isolate}
.hero--portrait::before,.hero--portrait::after{display:none}
.hp-word{position:absolute;z-index:0;left:50%;top:15%;transform:translateX(-50%);white-space:nowrap;pointer-events:none;
  font:700 clamp(90px,19vw,300px)/.8 var(--font-display);letter-spacing:-.065em;
  background:linear-gradient(180deg,#FFFFFF 0%,#BDBDBD 30%,#4A4A4A 70%,#0B0B0B 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  opacity:.9;filter:drop-shadow(0 0 40px rgba(255,255,255,.06))}
.hp-glow{position:absolute;z-index:1;pointer-events:none;right:6%;top:6%;width:min(900px,80vw);height:100%;
  background:radial-gradient(closest-side ellipse at 55% 38%,var(--smoke-a),transparent),radial-gradient(closest-side ellipse at 60% 20%,rgba(255,255,255,.10),transparent);filter:blur(10px)}
.hp-img{position:absolute;z-index:2;bottom:0;right:max(0px,calc((100vw - 1180px)/2 - 20px));height:min(100%,940px);width:auto;max-width:none;
  pointer-events:none;user-select:none;filter:drop-shadow(0 0 60px rgba(0,0,0,.6))}
.hp-copy{position:relative;z-index:3;max-width:var(--wrap);margin:0 auto;padding:clamp(150px,22vh,230px) 16px 120px;
  display:flex;flex-direction:column;align-items:flex-start;gap:0}
.hp-copy > *{max-width:520px}
.hp-copy .hero-title{font-size:clamp(56px,8.4vw,128px);line-height:.88;margin:20px 0 22px}
.hp-copy .hero-sub{max-width:440px;text-shadow:0 2px 20px #000}
.hp-copy .hero-ctas{margin-top:30px}
.hp-meta{margin-top:22px}
.hp-rating{position:static}
.hp-before{position:absolute;z-index:4;right:max(16px,calc((100vw - 1180px)/2 + 16px));bottom:110px;display:flex;align-items:center;gap:12px;padding:8px 16px 8px 8px;border-radius:16px;
  background:linear-gradient(180deg,rgba(40,40,40,.7),rgba(12,12,12,.75));border:1px solid var(--border-lit);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 24px 40px -14px #000}
.hp-before img{width:52px;height:64px;object-fit:cover;border-radius:10px;filter:grayscale(1) contrast(1.1)}
.hp-before > span{display:flex;flex-direction:column;gap:4px}
.hp-before b{font-weight:500;font-size:14px}
/* fade the whole hero into the page — no edge */
.hero--portrait .hp-fade{display:none}
.hero--portrait{-webkit-mask:linear-gradient(180deg,#000 82%,transparent);mask:linear-gradient(180deg,#000 82%,transparent)}

@media (max-width:960px){
  .hp-img{right:-12%;height:88%}
  .hp-copy .hero-title{font-size:clamp(52px,9vw,96px)}
}
@media (max-width:760px){
  .hero--portrait{min-height:0;margin-top:-74px}
  .hp-word{top:96px;font-size:23vw;opacity:.75}
  .hp-glow{right:-20%;top:0;width:130vw;height:620px}
  .hp-img{position:relative;display:block;right:auto;margin:40px auto 0;width:min(100%,460px);height:auto;max-height:560px;object-fit:contain;object-position:bottom}
  .hp-copy{margin-top:-170px;padding:0 16px 64px}
  .hp-copy .badge{display:none}
  .hp-copy .hero-title{font-size:clamp(46px,14vw,64px);margin:0 0 14px}
  .hp-copy .hero-sub{font-size:15px}
  .hp-copy .hero-ctas{margin-top:20px;width:100%}
  .hp-before{top:150px;bottom:auto;right:12px;padding:6px 12px 6px 6px}
  .hp-before img{width:40px;height:50px}
}

/* hero switcher — a design-preview control for the owner */
.hero-switch{position:fixed;left:14px;bottom:14px;z-index:95;display:flex;align-items:center;gap:4px;padding:4px 4px 4px 12px;border-radius:12px;
  background:linear-gradient(180deg,rgba(32,32,32,.85),rgba(10,10,10,.9));border:1px solid var(--border-lit);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 30px -10px #000}
.hero-switch .label{margin-right:6px}
.hero-switch button{border:0;cursor:pointer;padding:8px 12px;border-radius:9px;background:transparent;color:var(--text-muted);
  font:600 11px/1 var(--font-ui);letter-spacing:.06em;text-transform:uppercase}
.hero-switch button[aria-checked="true"]{color:#111;background:linear-gradient(180deg,#fff,#cfcfcf 55%,#ececec);box-shadow:inset 0 1px 0 #fff}
.hero-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:760px){.hero-switch{bottom:auto;top:76px;left:auto;right:12px;padding:3px 3px 3px 10px}.hero-switch button{padding:7px 9px;font-size:10px}}

/* portrait hero: wordmark sits in its own band above the copy */
.hp-word{top:96px}
.hp-copy{padding-top:calc(96px + clamp(90px,19vw,300px) * .8 + 26px)}
.hp-copy .hero-title{margin-top:14px}
@media (max-width:760px){
  .hp-word{top:92px}
  .hp-copy{padding-top:0}
}
@media (max-width:760px){
  .hp-word{top:118px}
  .hp-img{margin-top:132px;max-height:520px}
  .hp-before{bottom:auto;top:350px;right:10px}
}


/* ================================================================
   PORTRAIT — portfolio lighting: cast shadow, soft glow, key light, gel, beam
   Key light: top-right. Shadow falls down-left onto the backdrop.
   ================================================================ */
.hp-figure{position:absolute;z-index:2;bottom:0;right:max(0px,calc((100vw - 1180px)/2 - 20px));height:min(100%,940px);aspect-ratio:1086/1448;pointer-events:none}
.hp-figure .hp-img,.hp-figure .hp-shadow{position:absolute;inset:0;width:100%;height:100%;max-height:none;margin:0;right:auto;bottom:auto;user-select:none}
.hp-figure .hp-img{z-index:2;filter:drop-shadow(0 0 36px rgba(255,255,255,.09)) drop-shadow(0 0 90px var(--accent-glow))}
/* cast shadow on the backdrop (falls on the wordmark) */
.hp-shadow{z-index:1;filter:brightness(0) blur(16px);opacity:.75;transform-origin:50% 100%;transform:translate(-9%,1%) skewX(10deg) scale(1.02)}
/* key light + coloured gel, painted only onto the body via the cutout's alpha */
.hp-light{position:absolute;inset:0;z-index:3;mix-blend-mode:soft-light;
  -webkit-mask:url(img/road-portrait-cut.webp) center/100% 100% no-repeat;mask:url(img/road-portrait-cut.webp) center/100% 100% no-repeat;
  background:
    radial-gradient(38% 26% at 66% 20%,rgba(255,255,255,.75),transparent 70%),
    radial-gradient(60% 40% at 80% 46%,rgba(255,255,255,.35),transparent 70%),
    radial-gradient(45% 45% at 8% 62%,var(--smoke-a),transparent 72%),
    linear-gradient(250deg,rgba(255,255,255,.18),transparent 45%)}
html[data-accent="mono"] .hp-light{background:
    radial-gradient(38% 26% at 66% 20%,rgba(255,255,255,.75),transparent 70%),
    radial-gradient(60% 40% at 80% 46%,rgba(255,255,255,.35),transparent 70%),
    radial-gradient(45% 45% at 8% 62%,rgba(0,0,0,.45),transparent 72%),
    linear-gradient(250deg,rgba(255,255,255,.18),transparent 45%)}
/* spotlight beam from top-right onto the subject */
.hp-beam{position:absolute;z-index:1;pointer-events:none;top:-80px;right:max(-120px,calc((100vw - 1180px)/2 - 160px));width:min(820px,70vw);height:110%;
  background:conic-gradient(from 200deg at 78% 0%,transparent 0deg,rgba(255,255,255,.11) 16deg,rgba(255,255,255,.04) 30deg,transparent 44deg);
  filter:blur(14px);mix-blend-mode:screen;
  -webkit-mask:linear-gradient(180deg,#000 40%,transparent 92%);mask:linear-gradient(180deg,#000 40%,transparent 92%)}

@media (max-width:960px){.hp-figure{right:-10%;height:88%}}
@media (max-width:760px){
  .hp-figure{position:relative;right:auto;bottom:auto;display:block;margin:132px auto 0;height:auto;width:min(100%,390px)}
  .hp-shadow{transform:translate(-7%,1%) skewX(8deg) scale(1.02);filter:brightness(0) blur(10px)}
  .hp-beam{right:-40px;width:100vw;height:640px}
}


/* ================================================================
   STORY — hero recedes, BEFORE slides over it, AFTER wipes over BEFORE.
   Without JS (or with reduced motion) the chapters simply stack.
   ================================================================ */
.story{position:relative;z-index:3}
.story-pin{position:relative}
.st-panel{position:relative;min-height:100svh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:56px;
  padding:110px max(16px,calc((100vw - 1180px)/2 + 16px)) 64px;overflow:hidden;isolation:isolate;background:var(--canvas)}
.st-before{background:
  radial-gradient(50% 55% at 25% 50%,rgba(150,160,175,.10),transparent 70%),
  radial-gradient(40% 40% at 85% 10%,rgba(255,255,255,.04),transparent 70%),#060606}
.st-after{background:
  radial-gradient(55% 60% at 26% 50%,var(--smoke-a),transparent 70%),
  radial-gradient(45% 45% at 90% 0%,rgba(255,255,255,.10),transparent 70%),#070707}
.st-num{position:absolute;z-index:-1;right:max(0px,calc((100vw - 1180px)/2 - 40px));bottom:-6%;pointer-events:none;
  font:700 clamp(200px,34vw,520px)/.8 var(--font-display);letter-spacing:-.07em;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 80%);-webkit-background-clip:text;background-clip:text;color:transparent}

.st-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;position:relative}
.st-ph{position:relative;margin:0;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:#111;
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px #000}
.st-ph:nth-child(2){transform:translateY(34px)}
.st-ph img{width:100%;height:100%;object-fit:cover;display:block}
.st-ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.6)),radial-gradient(120% 80% at 50% 0%,transparent 55%,rgba(0,0,0,.35))}
.st-ph .c-tag{z-index:2}
.st-before .st-ph img{filter:grayscale(1) contrast(.95) brightness(.78)}
.st-after .st-ph{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 40px 80px -30px #000,0 0 90px -20px var(--accent-glow)}
.st-after .st-ph img{filter:saturate(.9) contrast(1.04)}

.st-copy{display:flex;flex-direction:column;gap:18px;align-items:flex-start}
.st-chapter{color:var(--text-muted)}
.st-after .st-chapter{color:var(--accent-text)}
.st-copy .display{font-size:clamp(40px,5vw,68px)}
.st-list{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px;width:100%}
.st-item{display:flex;align-items:center;gap:14px;font:500 clamp(18px,1.9vw,24px)/1.2 var(--font-display);letter-spacing:-.02em;
  padding:12px 16px 12px 12px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.06)}
.st-ico{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:14px;font-weight:700}
.st-list--bad .st-item{color:rgba(242,242,242,.62)}
.st-list--bad .st-ico{background:rgba(255,255,255,.06);color:#8a8a8a;border:1px solid rgba(255,255,255,.08)}
.st-list--good .st-item{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border-color:rgba(255,255,255,.1)}
.st-list--good .st-ico{color:#111;background:linear-gradient(180deg,#fff,#c9c9c9 55%,#ececec);box-shadow:inset 0 1px 0 #fff,0 0 18px -4px var(--accent-glow)}
.st-next{margin-top:8px;font-size:14px;color:var(--text-muted);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.st-next:hover{color:#fff}

/* ---- animated mode (JS adds .story--anim when motion is allowed) ---- */
.story--anim{height:330vh}
.story--anim .story-pin{position:sticky;top:0;height:100svh;overflow:hidden;
  border-radius:32px 32px 0 0;box-shadow:0 -40px 90px -20px rgba(0,0,0,.95)}
.story--anim .st-panel{position:absolute;inset:0;min-height:0;height:100%}
.story--anim .st-after{clip-path:inset(calc(var(--wipe,1) * 100%) 0 0 0 round 32px 32px 0 0);will-change:clip-path}
.story--anim .st-before{transform:scale(var(--bscale,1));filter:brightness(var(--bdim,1));transform-origin:50% 0}
.story--anim .st-item{opacity:var(--o,0);transform:translateX(calc((1 - var(--o,0)) * 28px))}
.story--anim .st-ph{opacity:var(--po,1);transform:translateY(calc((1 - var(--po,1)) * 40px + var(--lift,0px))) scale(calc(.96 + var(--po,1) * .04))}
.story--anim .st-ph:nth-child(2){--lift:34px}
/* hero recedes as the story slides over it */
.hero.is-receding{position:sticky;z-index:0;transform-origin:50% 30%}

@media (max-width:860px){
  .st-panel{grid-template-columns:1fr;gap:18px;align-content:center;padding:84px 16px 28px}
  .st-photos{gap:10px;max-width:440px}
  .st-ph:nth-child(2),.story--anim .st-ph:nth-child(2){--lift:18px}
  .st-ph:nth-child(2){transform:translateY(18px)}
  .st-copy{gap:10px}
  .st-copy .display{font-size:clamp(30px,8.5vw,44px)}
  .st-copy .display br{display:none}
  .st-list{grid-template-columns:1fr 1fr;gap:6px}
  .st-item{font-size:14px;padding:8px 10px 8px 8px;gap:8px;border-radius:11px}
  .st-ico{width:22px;height:22px;font-size:11px;border-radius:7px}
  .st-num{font-size:46vw;bottom:auto;top:60px}
  .st-next{display:none}
  .story--anim .story-pin{border-radius:24px 24px 0 0}
}
@media (max-width:860px) and (max-height:700px){.st-photos{max-width:300px}}
@media (prefers-reduced-motion:reduce){.story--anim{height:auto}}

/* glowing scan-line riding the AFTER wipe edge */
.story--anim .st-after::before{content:"";position:absolute;z-index:5;left:0;right:0;top:calc(var(--wipe,1) * 100%);height:2px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9) 30%,#fff 50%,rgba(255,255,255,.9) 70%,transparent);
  box-shadow:0 0 24px 4px var(--accent-glow),0 0 60px 10px rgba(255,255,255,.12);opacity:calc((1 - var(--wipe,1)) * 40 * var(--wipe,1))}
.story--anim .st-after::after{content:"";position:absolute;z-index:4;left:0;right:0;top:calc(var(--wipe,1) * 100%);height:140px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.08),transparent);opacity:calc((1 - var(--wipe,1)) * 30 * var(--wipe,1))}

/* Gumroad 5-star badge (hero chips) */
.rating-chip{gap:9px}
.gr-logo{width:20px;height:20px;flex:none;fill:#FF90E8;filter:drop-shadow(0 0 10px rgba(255,144,232,.35))}
.rating-chip b{font-weight:600;color:#fff}
.rating-chip .stars{font-size:12.5px;letter-spacing:1.5px;color:#FFC900}
html[data-accent="mono"] .rating-chip .stars{color:#FFC900}

/* dating app logos in the Dating tile */
.apps{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;font:inherit}
.app{display:inline-flex;align-items:center;gap:9px;padding:10px 16px 10px 12px;border-radius:14px;
  background:linear-gradient(180deg,#2a2a2a,#121212);border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 24px -10px #000}
.app b{font:600 16px/1 var(--font-display);letter-spacing:-.02em;color:#fff;background:none;-webkit-text-fill-color:#fff}
.app svg{width:22px;height:22px;flex:none}
.app--tinder svg{color:#FF5864;filter:drop-shadow(0 0 8px rgba(255,88,100,.45))}
.app--bumble svg{color:#FFC629;filter:drop-shadow(0 0 8px rgba(255,198,41,.4))}
.h-mono{width:22px;height:22px;flex:none;display:grid;place-items:center;border-radius:6px;background:#fff;color:#111;
  font:700 14px/1 Georgia,"Times New Roman",serif;box-shadow:0 0 10px rgba(255,255,255,.25)}
@media (max-width:760px){.app{padding:8px 12px 8px 10px}.app b{font-size:14px}}

/* portrait blend v3: no silhouette glow at all (it read as a white outline);
   the scene's smoke behind + soft-light key on the body do the lighting */
.hp-figure .hp-img{filter:none}
.hp-light{opacity:.85}
/* atmospheric haze in front of the lower body so he sits *inside* the scene */
.hp-figure::after{content:"";position:absolute;inset:auto -10% 0 -10%;height:38%;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(5,5,5,.55) 60%,var(--canvas))}

/* ================================================================
   THEME LOCK — the site is monochrome; the AFTER chapter is the one
   moment of colour (red), so the transformation lands harder.
   ================================================================ */
.st-after{
  --accent:#FF2E3B; --accent-ink:#FFFFFF; --accent-hover:#E5202D;
  --accent-soft:rgba(255,46,59,.14); --accent-glow:rgba(255,46,59,.42); --accent-text:#FF6B74;
  --smoke-a:rgba(255,46,59,.50); --smoke-b:rgba(255,140,128,.30); --smoke-c:rgba(140,20,30,.55)}