/* Reelsite sales page (site.reelzign.com).
   Same bands, components and behaviours as Reelshop's page (public/reelshop/sales.css), told as a film:
   the page starts at dusk (night bands) and the story section brightens to dawn, so everything after
   "Until finally" sits in morning light. The end credits (footer) go back to night.
   Reelsite "Orchid" (big-plan/logos/final/palette.json): brand #2148C8, brandDark #17328C for buttons
   (white text passes AA), tint #E9EDF9. The gradient #3A60DC -> #0731BC is used in the logo and as soft sky glow only. */
:root{
  --night:#090C18;--night-2:#0F1527;--night-3:#151D35;--night-line:rgba(255,255,255,.1);
  --moon:#F3F5FC;--moon-muted:#BFC6DD;--moon-faint:#9098B1;
  --day:#FFFBFA;--day-2:#F5F7FD;--tint:#E9EDF9;--day-line:#E4E7F1;--day-line-strong:#CFD5E8;
  --ink:#131726;--ink-muted:#515971;--ink-faint:#798097;
  --orchid:#2B50D6;--orchid-dark:#2442B3;--orchid-deeper:#1C348C;--orchid-light:#8FA6F0;--orchid-deep:#3A5DDB;--orchid-rgb:43 80 214;
  --peach:#FFC6A8;
  --font-text:"Geist",-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --radius:12px;--radius-lg:20px;--radius-xl:28px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;min-width:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;background:var(--night)}
body{margin:0;background:var(--day);color:var(--ink);font:17px/1.6 var(--font-text);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 16px}
h1,h2,h3,h4{margin:0;font-family:var(--font-text);font-weight:600}
h1{font-size:clamp(40px,6.6vw,86px);line-height:1.02;letter-spacing:-.05em;text-wrap:balance}
h2{font-size:clamp(32px,4.8vw,60px);line-height:1.05;letter-spacing:-.045em;text-wrap:balance}
h3{font-size:21px;line-height:1.3;letter-spacing:-.02em}
:focus-visible{outline:2px solid var(--orchid);outline-offset:3px}
[hidden]{display:none!important}
.skip-link{position:fixed;z-index:100;top:0;left:0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);padding:10px 14px;border-radius:8px;background:var(--orchid-dark);color:#fff;font-weight:600}
.skip-link:focus{top:12px;left:12px;width:auto;height:auto;clip-path:none}

/* ---------- bands: night (dark) and day (light) ---------- */
.band{position:relative;padding:clamp(80px,11vw,150px) 0;background:var(--day);color:var(--ink)}
.band.day-2{background:var(--day-2)}
.band.tinted{background:linear-gradient(180deg,var(--day) 0%,var(--tint) 100%)}
.band.night{background:var(--night);color:var(--moon)}
.band.night-2{background:var(--night-2);color:var(--moon)}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin-left:auto;margin-right:auto}
.center{text-align:center}
.eyebrow{display:block;margin:0 0 18px;color:var(--orchid-dark);font:500 12.5px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.night .eyebrow,.night-2 .eyebrow,.on-dark .eyebrow{color:var(--orchid-light)}
.sec-head{max-width:820px;margin:0 auto clamp(40px,6vw,64px);text-align:center}
.sec-head p{margin:20px auto 0;max-width:680px;color:var(--ink-muted);font-size:20px;line-height:1.6}
.night .sec-head p,.night-2 .sec-head p{color:var(--moon-muted)}
.lead{font-size:clamp(19px,1.8vw,22px);line-height:1.65;color:var(--ink-muted)}
.night .lead,.night-2 .lead,.on-dark .lead{color:var(--moon-muted)}
.prose>p{color:var(--ink-muted);font-size:19px;line-height:1.75}
.night .prose>p,.night-2 .prose>p,.on-dark .prose>p{color:var(--moon-muted)}
.prose strong{color:var(--ink)}
.night .prose strong,.night-2 .prose strong,.on-dark .prose strong{color:var(--moon)}
.hl{background:linear-gradient(100deg,var(--orchid-light),var(--orchid-deep));-webkit-background-clip:text;background-clip:text;color:transparent}
.day-hl{color:var(--orchid-dark)}
.muted{color:var(--ink-muted)}
.small{font-size:14px}
.disclosure{margin:28px auto 0;max-width:760px;text-align:center;color:var(--ink-faint);font-size:13.5px;line-height:1.6}
.night .disclosure,.night-2 .disclosure,.on-dark .disclosure{color:var(--moon-faint)}
.todo{border-bottom:1px dashed currentColor}
html.show-slots [data-todo]{background:rgba(255,214,0,.35);outline:1px dashed #C49A00}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 30px;border-radius:999px;border:0;font:600 17px/1 var(--font-text);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .2s}
.btn-primary{background:var(--orchid-dark);color:#fff;box-shadow:0 10px 30px -10px rgba(var(--orchid-rgb)/.7),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary:hover{background:var(--orchid-deeper);transform:translateY(-1px);box-shadow:0 16px 40px -12px rgba(var(--orchid-rgb)/.8),inset 0 1px 0 rgba(255,255,255,.2)}
.btn-glow{position:relative}
.btn-glow::after{content:"";position:absolute;inset:-6px;border-radius:inherit;background:radial-gradient(closest-side,rgba(var(--orchid-rgb)/.45),transparent);filter:blur(10px);z-index:-1;opacity:.8}
.btn-wide{width:100%}
.cta-block{margin-top:40px}
.cta-block.center{display:flex;flex-direction:column;align-items:center;text-align:center}
.cta-note{margin:14px 0 0;color:var(--ink-faint);font-size:14.5px}
.night .cta-note,.on-dark .cta-note{color:var(--moon-faint)}

/* ---------- launch bar ---------- */
.cdbar{position:relative;z-index:40;background:linear-gradient(90deg,#162248,#203168 50%,#162248);color:var(--moon);font-size:14px}
.cdbar-in{max-width:1180px;margin:0 auto;padding:9px 20px;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;text-align:center}
.cdbar strong{color:#fff}
.cdbar .dot{opacity:.5}
.cdbar .clock{font:500 13.5px/1 var(--font-mono);color:var(--orchid-light)}
.cdbar .clock b{color:#fff;font-weight:600}
/* Late-bird extension (last 24 hours): a hot, pulsing bar */
.is-extension .cdbar{background:linear-gradient(90deg,#B3261E,#E8590C 50%,#B3261E);background-size:200% 100%;animation:cdbar-pulse 1.2s ease-in-out infinite alternate}
.is-extension .cdbar .clock{color:#FFE8A3}
@keyframes cdbar-pulse{from{background-position:0 0;filter:brightness(1)}to{background-position:100% 0;filter:brightness(1.25)}}
@media (prefers-reduced-motion:reduce){.is-extension .cdbar{animation:none}}

/* ---------- nav ---------- */
.sales-nav{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px max(20px,calc((100vw - 1180px)/2 + 24px));background:linear-gradient(180deg,#111931,#0A0F20);backdrop-filter:saturate(1.6) blur(18px);-webkit-backdrop-filter:saturate(1.6) blur(18px);border-bottom:1px solid var(--night-line)}
.brand-link img{height:30px;width:auto}
.sales-nav nav{display:flex;align-items:center;gap:26px;font-size:14.5px;color:var(--moon-muted)}
.sales-nav nav a{text-decoration:none;transition:color .2s}
.sales-nav nav a:hover{color:#fff}
.sales-nav .nav-cta{padding:8px 16px;border-radius:999px;background:var(--orchid-dark);color:#fff;font-weight:600}
.sales-nav .nav-cta:hover{background:var(--orchid-deeper)}

/* ---------- hero: dusk ---------- */
.hero{padding:clamp(56px,8vw,96px) 0 clamp(80px,10vw,130px);background:
  radial-gradient(1200px 600px at 70% 0%,rgba(56,97,234,.35),transparent 60%),
  radial-gradient(900px 500px at 10% 30%,rgba(255,170,140,.12),transparent 60%),
  linear-gradient(180deg,#0B1227 0%,#111A37 55%,#0D142A 100%);color:var(--moon);overflow:hidden}
.stars{position:absolute;inset:0;pointer-events:none;background-image:
  radial-gradient(1.4px 1.4px at 12% 18%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(1px 1px at 28% 8%,rgba(255,255,255,.6),transparent 60%),
  radial-gradient(1.2px 1.2px at 46% 22%,rgba(255,255,255,.5),transparent 60%),
  radial-gradient(1px 1px at 63% 12%,rgba(255,255,255,.7),transparent 60%),
  radial-gradient(1.6px 1.6px at 82% 6%,rgba(255,255,255,.8),transparent 60%),
  radial-gradient(1px 1px at 91% 28%,rgba(255,255,255,.5),transparent 60%),
  radial-gradient(1.2px 1.2px at 7% 44%,rgba(255,255,255,.5),transparent 60%),
  radial-gradient(1px 1px at 37% 38%,rgba(255,255,255,.4),transparent 60%);opacity:.9}
.hero-origin{display:inline-flex;align-items:center;gap:8px;margin:0 0 26px;padding:7px 14px;border:1px solid var(--night-line);border-radius:999px;background:rgba(255,255,255,.04);color:var(--moon-muted);font-size:14px}
.hero-origin a{color:var(--moon);text-decoration:none}
.hero-origin a:hover{text-decoration:underline}
.hero-origin .divider{opacity:.4}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--orchid-light);box-shadow:0 0 0 0 rgba(var(--orchid-rgb)/.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(var(--orchid-rgb)/.6)}70%{box-shadow:0 0 0 10px rgba(var(--orchid-rgb)/0)}100%{box-shadow:0 0 0 0 rgba(var(--orchid-rgb)/0)}}
.hero-copy{position:relative;max-width:980px;margin:0 auto;text-align:center}
.hero h1{color:#fff}
.hero-subhead{max-width:760px;margin:28px auto 0;color:var(--moon-muted);font-size:clamp(18px,1.7vw,21px);line-height:1.65}
.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:30px 0 0;padding:0;list-style:none}
.chips li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--night-line);background:rgba(255,255,255,.05);color:var(--moon);font-size:14px}
.chips li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orchid-light)}
.chips .arrow{border:0;background:none;padding:8px 0;color:var(--moon-faint)}
.chips .arrow::before{display:none}

.stage{position:relative;margin:clamp(48px,6vw,72px) auto 0;max-width:1180px}
.stage-art{position:relative;border-radius:var(--radius-xl);overflow:hidden;box-shadow:0 40px 120px -40px rgba(56,97,234,.55),0 0 0 1px rgba(255,255,255,.08)}
.stage-art img{width:100%;aspect-ratio:1376/768;object-fit:cover}
.stage-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(9,12,24,.35))}
.stage-phone{position:absolute;z-index:2;left:clamp(16px,5%,64px);bottom:clamp(-60px,-4vw,-24px);width:clamp(150px,21%,250px);aspect-ratio:9/16;border-radius:26px;padding:7px;background:#090B12;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.12),0 0 60px rgba(var(--orchid-rgb)/.35)}
.stage-phone video,.stage-phone img{width:100%;height:100%;object-fit:cover;border-radius:20px;background:#111A37}
.stage-phone .phone-play{position:absolute;inset:auto 14px 14px 14px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;border:0;border-radius:999px;background:rgba(255,255,255,.92);color:var(--ink);font:600 13.5px/1 var(--font-text);cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.3)}
.stage-phone .phone-play svg{width:15px;height:15px}
.stage-phone.playing .phone-play{display:none}
.stage-caption{margin:clamp(30px,5vw,48px) 0 0 auto;color:var(--moon-faint);font-size:13.5px;text-align:right;max-width:60%}
.vsl-frame{position:relative;margin:clamp(40px,5vw,56px) auto 0;max-width:960px;border-radius:var(--radius-lg);overflow:hidden;box-shadow:0 30px 90px -30px rgba(56,97,234,.5),0 0 0 1px rgba(255,255,255,.08)}
.vsl-frame{aspect-ratio:16/9;background:#06070B}
.vsl-frame img,.vsl-frame video{display:block;width:100%;height:100%;object-fit:cover}
.vsl-frame video{background:#06070B}
.vsl-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:88px;height:88px;border:0;border-radius:50%;padding:0;background:linear-gradient(180deg,var(--orchid-light),var(--orchid-deep));color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(var(--orchid-rgb)/.45),0 10px 30px rgba(var(--orchid-rgb)/.45)}
.vsl-play:hover{filter:brightness(1.06)}
.vsl-play svg{width:32px;height:32px;margin-left:4px}
.vsl-play-label{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%);white-space:nowrap;background:rgba(10,10,12,.9);color:#fff;padding:7px 12px;border-radius:8px;font:600 14px var(--font-text);pointer-events:none}
.vsl-frame.playing .vsl-play{display:none}
@media(max-width:639px){.vsl-play{width:68px;height:68px}.vsl-play svg{width:24px;height:24px}.vsl-play-label{font-size:12px}}
.slot-note{display:none}
html.show-slots .slot-note{display:block;padding:10px 14px;border:1px dashed rgba(255,255,255,.3);border-radius:10px;color:var(--moon-faint);font:12px/1.4 var(--font-mono)}

/* ---------- reviews ---------- */
.review-band{background:linear-gradient(180deg,#0D142A 0%,var(--night) 100%);color:var(--moon);padding-top:clamp(90px,10vw,130px)}
.review-note{color:var(--moon-muted)}
.rs-review-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:1000px;margin:0 auto}
.rs-review{margin:0;padding:30px;border-radius:var(--radius-lg);background:rgba(255,255,255,.04);border:1px solid var(--night-line);display:flex;flex-direction:column-reverse;gap:22px}
.rs-review blockquote{margin:0;color:var(--moon);font-size:18px;line-height:1.65}
.rs-review-person{display:flex;align-items:center;gap:14px}
.rs-review-person img{width:52px;height:52px;border-radius:50%;object-fit:cover}
.rs-review-person cite{display:block;font-style:normal;font-weight:600;color:#fff}
.rs-review-person a,.rs-review-person span{display:block;font-size:13.5px;color:var(--moon-faint);text-decoration:none}
.rs-review-person a:hover{color:var(--moon)}

/* ---------- the story: night to dawn ---------- */
.story{padding:0;background:linear-gradient(180deg,
  var(--night) 0%,#0E152B 14%,#131E41 28%,#1B2956 40%,#2D3E74 52%,#4A5B91 60%,#C98196 68%,#EFB7A6 76%,#FBDCCF 84%,#FFF1EA 92%,var(--day) 100%);color:var(--moon)}
.story .stars{height:30%}
.chapter{position:relative;padding:clamp(90px,12vw,160px) 0}
.chapter-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(36px,6vw,88px);align-items:center}
.chapter-grid.flip>.chapter-art{order:-1}
.chapter h2{margin:0 0 26px}
.chapter.on-dark h2{color:#fff}
/* W7: the dark chapters sit on the dusk-to-dawn gradient, which turns pink around "You paste his page";
   moon-muted text measured 2.0-3.7:1 there, white with a soft shadow 3.5-6.4:1. */
.chapter.on-dark .prose>p{color:#fff;text-shadow:0 1px 3px rgba(13,24,61,.45)}
.chapter.on-light{color:var(--ink)}
.chapter.on-light .prose>p{color:var(--ink-muted)}
.chapter.on-light .eyebrow{color:var(--orchid-deeper)}
.chapter-art{margin:0;position:relative}
.chapter-art img{width:100%;border-radius:var(--radius-xl);box-shadow:0 40px 90px -40px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08)}
.chapter.on-light .chapter-art img{box-shadow:0 40px 90px -40px rgba(65,91,175,.45),0 0 0 1px rgba(255,255,255,.6)}
.chapter-art::before{content:"";position:absolute;inset:8% -6% -8% 6%;border-radius:40px;background:radial-gradient(closest-side,rgba(var(--orchid-rgb)/.35),transparent);filter:blur(30px);z-index:-1}
.chapter-art figcaption{margin-top:14px;font-size:13px;color:var(--moon-faint);text-align:center}
.chapter.on-light .chapter-art figcaption{color:var(--ink-faint)}
.pullquote{margin:28px 0;padding:22px 26px;border-radius:var(--radius-lg);background:rgba(255,255,255,.06);border:1px solid var(--night-line);font-size:20px;line-height:1.55;color:#fff}
.chapter.on-light .pullquote{background:rgba(255,255,255,.65);border-color:rgba(255,255,255,.9);color:var(--ink);box-shadow:0 20px 40px -24px rgba(65,91,175,.35)}
.pullquote.reply{display:inline-block;padding:14px 20px;border-radius:22px 22px 22px 6px;background:linear-gradient(180deg,#8BA6FF,#5A7AE3);border:0;color:#fff;font-weight:500}
.chapter-wide{max-width:900px;margin:0 auto;text-align:center}
.chapter-wide .prose>p{max-width:720px;margin-left:auto;margin-right:auto}
.illustrative{font-size:13.5px!important;color:var(--ink-faint)!important;font-style:italic}
.on-dark .illustrative{color:var(--moon-faint)!important}
.moral-roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:44px auto 0;max-width:900px;text-align:left}
.moral-roles div{padding:22px;border-radius:var(--radius-lg);background:rgba(255,255,255,.7);border:1px solid #fff;box-shadow:0 20px 40px -28px rgba(65,91,175,.4)}
.moral-roles b{display:block;margin-bottom:6px;font:500 12px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--orchid-deeper)}
.moral-roles p{margin:0;color:var(--ink);font-size:16px;line-height:1.55}

/* ---------- proof before pitch: thread ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,80px);align-items:start}
.thread{display:flex;flex-direction:column;gap:14px;padding:28px;border-radius:var(--radius-xl);background:#fff;border:1px solid var(--day-line);box-shadow:0 30px 70px -40px rgba(65,91,175,.35)}
.bubble{max-width:88%;padding:16px 18px;border-radius:20px;font-size:15.5px;line-height:1.55}
.bubble .who{display:block;margin-bottom:6px;font:500 11.5px/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.bubble .subj{display:block;font-weight:600;margin-bottom:6px}
.bubble.out{align-self:flex-end;background:linear-gradient(180deg,#6B8BF3,#4C6CD7);color:#fff;border-bottom-right-radius:6px}
.bubble.in{align-self:flex-start;background:var(--day-2);border:1px solid var(--day-line);color:var(--ink);border-bottom-left-radius:6px}
.bubble p{margin:0}
.thread-note{margin:6px 0 0;text-align:center;color:var(--ink-faint);font-size:13px}
.steps-2{display:grid;gap:14px;margin:30px 0 0}
.steps-2 div{padding:20px 22px;border-radius:var(--radius-lg);background:var(--tint);border:1px solid #DDE4FC}
.steps-2 b{display:block;margin-bottom:4px;color:var(--ink)}
.steps-2 p{margin:0;color:var(--ink-muted);font-size:16.5px}

/* ---------- cost ---------- */
.cost-list{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0;padding:0;list-style:none}
.cost-list li{padding:7px 13px;border-radius:999px;border:1px solid var(--day-line-strong);background:#fff;color:var(--ink-muted);font-size:14px}
.cost-list li.done{border-color:transparent;background:var(--orchid-dark);color:#fff}

/* ---------- page to ad (demo) ---------- */
.demo-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr);gap:20px;align-items:start}
.demo-card{padding:26px;border-radius:var(--radius-lg);background:rgba(255,255,255,.05);border:1px solid var(--night-line)}
.demo-card h3{margin:0 0 16px;color:#fff;font-size:17px}
.demo-step{display:inline-block;margin-bottom:10px;color:var(--orchid-light);font:500 11.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.source-page{border-radius:12px;background:#fff;color:#2B2B33;padding:18px;font-size:14.5px;line-height:1.6}
.source-page .src-url{display:block;margin-bottom:10px;padding:6px 10px;border-radius:8px;background:#F0F1F5;color:#656978;font:12px/1.4 var(--font-mono);overflow-wrap:anywhere}
.source-page .src-title{margin:0 0 10px;font-weight:600;font-size:16px;color:#111}
.source-page p{margin:0 0 10px}
.source-page mark{background:linear-gradient(180deg,transparent 45%,rgba(155,178,255,.55) 45%);color:inherit;padding:0 1px}
.story-spec{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.story-spec li{font-size:15px;line-height:1.5;color:var(--moon-muted)}
.story-spec b{display:block;color:#fff;font-size:12px;font:500 11.5px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--orchid-light);margin-bottom:2px}
.vo-script{margin:18px 0 0;padding:16px 18px;border-left:2px solid var(--orchid);color:var(--moon);font-size:15px;line-height:1.65;background:rgba(255,255,255,.03);border-radius:0 12px 12px 0}
.demo-video{position:relative;border-radius:22px;overflow:hidden;background:#000;aspect-ratio:9/16;box-shadow:0 30px 70px -30px rgba(var(--orchid-rgb)/.6)}
.demo-video video{width:100%;height:100%;object-fit:cover}
.demo-note{margin:14px 0 0;color:var(--moon-faint);font-size:13.5px}

/* ---------- gallery ---------- */
.sc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.sc-card{margin:0;cursor:pointer}
.sc-frame{position:relative;aspect-ratio:9/16;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#1C2646,#0E152C);box-shadow:0 24px 50px -30px rgba(28,48,112,.6),0 0 0 1px rgba(0,0,0,.04);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.sc-card:hover .sc-frame{transform:translateY(-4px);box-shadow:0 34px 70px -30px rgba(65,91,175,.7)}
.sc-frame video,.sc-frame img{width:100%;height:100%;object-fit:cover}
.sc-sound{position:absolute;right:10px;bottom:10px;width:38px;height:38px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(9,12,24,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer}
.sc-sound svg{width:18px;height:18px}
.sc-sound[aria-pressed="true"]{background:var(--orchid-dark)}
.sc-label{margin:14px 0 2px;font-weight:600;font-size:15.5px;color:var(--ink);letter-spacing:-.01em}
.sc-meta{margin:0 0 4px;color:var(--orchid-dark);font-size:13px;font-weight:500}
.sc-cap{margin:0;color:var(--ink-muted);font-size:13.5px;line-height:1.5}
.sc-pending .sc-frame{display:grid;place-items:center;border:1.5px dashed var(--day-line-strong);background:var(--tint);box-shadow:none}
.sc-pending .sc-frame span{padding:0 14px;text-align:center;color:var(--ink-faint);font:12px/1.4 var(--font-mono)}

/* ---------- how it works ---------- */
.workflow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none;counter-reset:none}
.workflow-step{padding:28px 24px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--day-line);box-shadow:0 20px 50px -40px rgba(65,91,175,.4)}
.step-number{display:inline-grid;place-items:center;width:40px;height:40px;margin-bottom:18px;border-radius:12px;background:linear-gradient(180deg,var(--orchid-light),var(--orchid-deep));color:#fff;font:600 14px/1 var(--font-mono)}
.workflow-step h3{margin:0 0 10px;font-size:19px}
.workflow-step p{margin:0;color:var(--ink-muted);font-size:15.5px;line-height:1.6}
/* How it works, 5 steps: the app's own stepper, then one row per step (copy + a real screenshot), alternating sides */
.stepper{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;max-width:880px;margin:0 auto clamp(48px,6vw,72px);padding:0;list-style:none}
.stepper li{display:flex;align-items:center;gap:9px;padding-top:12px;border-top:3px solid var(--orchid);color:var(--ink);font-weight:500;font-size:15px}
.stepper span{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--orchid-dark);color:#fff;font:600 12px/1 var(--font-mono)}
.steps5{display:grid;gap:clamp(56px,8vw,96px);margin:0;padding:0;list-style:none}
.step5{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,64px);align-items:center}
.step5:nth-child(even) .step5-copy{order:2}
.step5-copy h3{margin:0 0 14px;font-size:clamp(23px,2.4vw,30px);line-height:1.2;letter-spacing:-.03em}
.step5-copy p{margin:0;color:var(--ink-muted);font-size:17.5px;line-height:1.7}
.step5-copy .step-number{margin-bottom:14px}
.step5-copy .step5-name{margin:0 0 6px;color:var(--orchid-dark);font:500 12.5px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase}
.step5-shot{margin:0;padding:8px;border-radius:var(--radius-lg);background:#0B0D10;border:1px solid #1C202E;box-shadow:0 30px 70px -40px rgba(10,19,47,.55)}
.step5-shot img{width:100%;border-radius:14px}

/* ---------- angles ---------- */
.angle-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.angle-grid li{padding:24px;border-radius:var(--radius-lg);background:var(--day);border:1px solid var(--day-line)}
.angle-grid b{display:block;margin-bottom:8px;font-size:17px;letter-spacing:-.01em}
.angle-grid p{margin:0;color:var(--ink-muted);font-size:15.5px;line-height:1.6}
.facts-panel{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,5vw,64px);align-items:center;margin-top:clamp(70px,9vw,110px)}
.facts-panel img{border-radius:var(--radius-xl);box-shadow:0 40px 80px -44px rgba(65,91,175,.55)}

/* ---------- owner email ---------- */
.email-flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0;padding:0;list-style:none}
.email-flow li{position:relative;padding:20px;border-radius:var(--radius-lg);background:rgba(255,255,255,.05);border:1px solid var(--night-line);color:var(--moon);font-weight:500;font-size:15.5px}
.email-flow li span{display:block;margin-top:4px;color:var(--moon-faint);font-weight:400;font-size:13.5px}
.email-flow li:not(:last-child)::after{content:"→";position:absolute;right:-12px;top:50%;transform:translateY(-50%);color:var(--orchid-light);font-size:14px}

/* ---------- commercial use ---------- */
.use-cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.use-cases div{padding:26px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--day-line)}
.use-cases h3{margin:0 0 10px;font-size:18px}
.use-cases p{margin:0;color:var(--ink-muted);font-size:15.5px;line-height:1.65}
.package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:44px}
.package{position:relative;padding:30px 26px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--day-line)}
.package.featured{border-color:transparent;background:linear-gradient(#fff,#fff) padding-box,linear-gradient(180deg,var(--orchid-light),var(--orchid-deep)) border-box;border:1.5px solid transparent;box-shadow:0 30px 60px -36px rgba(65,91,175,.55)}
.package .price{display:block;font-size:34px;font-weight:600;letter-spacing:-.04em}
.package .price small{font-size:15px;font-weight:500;color:var(--ink-faint);letter-spacing:0}
.package h4{margin:6px 0 10px;font-size:17px}
.package p{margin:0;color:var(--ink-muted);font-size:15px;line-height:1.6}
.suggest-label{display:block;text-align:center;margin:56px 0 0;color:var(--ink-faint);font:500 12px/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}
.package-notes{max-width:760px;margin:28px auto 0;text-align:center;color:var(--ink-muted);font-size:15.5px}
.package-notes p{margin:0 0 8px}

/* ---------- language ---------- */
.lang-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.lang-row span{padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--day-line);font-size:14.5px;color:var(--ink-muted)}
.lang-row span b{color:var(--ink);font-weight:600}

/* ---------- makers ---------- */
.maker-profile{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(30px,5vw,70px);align-items:start}
.maker-photo{width:96px;height:96px;border-radius:50%;object-fit:cover;margin-bottom:22px;box-shadow:0 0 0 4px #fff,0 0 0 5px var(--day-line)}
.maker-signature{margin:22px 0 0;font-weight:600;font-size:18px}
.maker-signature span{display:block;font-weight:400;font-size:14px;color:var(--ink-faint)}
.maker-story p{color:var(--ink-muted);font-size:18px;line-height:1.75}
.maker-stat a{text-decoration:none;color:var(--ink)}
.maker-stat strong{color:var(--orchid-dark)}
.review-heading{margin:64px 0 22px;text-align:center}
.review-heading h3{margin:0 0 6px}
.review-heading p{margin:0;color:var(--ink-faint);font-size:14.5px}
.quote-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.customer-quote{margin:0;padding:22px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--day-line);display:flex;flex-direction:column-reverse;gap:16px}
.customer-quote blockquote{margin:0;font-size:15px;line-height:1.55;color:var(--ink)}
.review-person{display:flex;align-items:center;gap:10px}
.review-person img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.review-person cite{display:block;font-style:normal;font-weight:600;font-size:14px}
.review-person span{display:block;font-size:12.5px;color:var(--ink-faint)}

/* ---------- bonuses ---------- */
.guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.guide{position:relative;padding:30px;border-radius:var(--radius-lg);background:#fff;border:1px solid var(--day-line);overflow:hidden}
.guide::before{content:"";position:absolute;top:-60px;right:-60px;width:160px;height:160px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--orchid-rgb)/.18),transparent)}
.guide .eyebrow{margin-bottom:10px}
.guide h3{margin:0 0 12px;font-size:20px}
.guide p{margin:0 0 10px;color:var(--ink-muted);font-size:15.5px;line-height:1.65}
.guide .incl{margin:14px 0 0;color:var(--orchid-dark);font-weight:600;font-size:14px}
.guide-summary{max-width:720px;margin:34px auto 0;text-align:center;color:var(--ink-muted)}

/* ---------- credits ---------- */
.credit-table{width:100%;margin:30px 0;border-collapse:collapse;border-radius:var(--radius-lg);overflow:hidden;background:#fff;border:1px solid var(--day-line);font-size:16px}
.credit-table th,.credit-table td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--day-line)}
.credit-table thead th{background:var(--tint);font:500 12px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.credit-table tbody tr:last-child th,.credit-table tbody tr:last-child td{border-bottom:0}

/* ---------- guarantee ---------- */
.guarantee-panel{max-width:860px;margin:0 auto;text-align:center}
.guarantee-mark{position:relative;display:inline-grid;place-items:center;width:110px;height:110px;margin-bottom:26px;color:var(--orchid-dark)}
.guarantee-mark svg{position:absolute;inset:0;width:100%;height:100%}
.guarantee-mark span{position:relative;font-size:34px;font-weight:600;letter-spacing:-.04em;color:var(--ink)}
.guarantee-panel h2{margin-bottom:22px}
.guarantee-panel p{color:var(--ink-muted);font-size:18.5px;line-height:1.7}
.guarantee-panel a{color:var(--orchid-dark)}

/* ---------- price box: sunrise ---------- */
.price-band{background:radial-gradient(900px 500px at 50% 0%,rgba(255,198,168,.45),transparent 70%),radial-gradient(900px 600px at 50% 100%,rgba(var(--orchid-rgb)/.2),transparent 70%),var(--day)}
.price-art{max-width:1180px;margin:0 auto clamp(-90px,-8vw,-50px);padding:0 24px}
.price-art img{width:100%;border-radius:var(--radius-xl);aspect-ratio:1376/768;object-fit:cover;box-shadow:0 40px 90px -50px rgba(65,91,175,.6)}
.pricecard{position:relative;z-index:2;max-width:620px;margin:0 auto;padding:44px clamp(22px,5vw,48px);border-radius:var(--radius-xl);background:rgba(255,255,255,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid #fff;box-shadow:0 50px 100px -50px rgba(38,58,122,.55),0 0 0 1px var(--day-line)}
.pricecard-ribbon{position:absolute;top:-14px;left:50%;transform:translateX(-50%);padding:7px 16px;border-radius:999px;background:linear-gradient(90deg,var(--orchid-light),var(--orchid-deep));color:#fff;font:600 12px/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.pricecard h2{font-size:clamp(28px,3.4vw,40px);margin:0 0 24px;text-align:center}
.pricecard .eyebrow{text-align:center}
.included-list{margin:0 0 28px;padding:0;list-style:none;display:grid;gap:11px}
.included-list li{position:relative;padding-left:30px;color:var(--ink);font-size:16px;line-height:1.5}
.included-list li::before{content:"";position:absolute;left:0;top:3px;width:19px;height:19px;border-radius:50%;background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A256C2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/12px no-repeat}
.order-price{display:flex;align-items:baseline;justify-content:center;gap:12px;margin:8px 0}
.order-price strong{font-size:68px;line-height:1;font-weight:600;letter-spacing:-.05em}
.order-price s{color:var(--ink-faint);font-size:24px}
.order-price span{color:var(--ink-faint)}
.order-deadline{text-align:center;color:var(--ink-muted);font-size:15px}
.offer-countdown{margin:22px 0 26px;text-align:center}
.countdown-title{margin:0 0 10px;color:var(--ink-faint);font:500 12px/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}
.countdown-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.countdown-grid div{padding:12px 4px;border-radius:14px;background:var(--tint);border:1px solid #DDE4FC}
.countdown-grid strong{display:block;font-size:28px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.countdown-grid span{font-size:12px;color:var(--ink-faint)}
.payment-trust{display:flex;justify-content:center;gap:8px;margin:16px 0 0;color:var(--ink-faint);font-size:13.5px}
.checkout-error{display:none;margin:14px 0 0;text-align:center;color:#C0392B;font-size:14.5px}
.optional-note{max-width:620px;margin:22px auto 0;text-align:center;color:var(--ink-faint);font-size:14px}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;margin-top:30px}
.faq details{border-radius:var(--radius-lg);background:#fff;border:1px solid var(--day-line);transition:box-shadow .3s}
.faq details[open]{box-shadow:0 20px 40px -32px rgba(65,91,175,.45)}
.faq summary{position:relative;padding:20px 54px 20px 22px;font-weight:600;font-size:16.5px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%);color:var(--orchid-dark);font-size:22px;font-weight:400;transition:transform .3s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{margin:0;padding:0 22px 22px;color:var(--ink-muted);font-size:16px;line-height:1.7}

/* ---------- footer: end credits ---------- */
footer{padding:80px 0 120px;background:radial-gradient(800px 400px at 50% 0%,rgba(56,97,234,.22),transparent 70%),var(--night);color:var(--moon-muted);text-align:center}
.the-end{margin:0 0 30px;color:var(--moon-faint);font:500 12px/1.4 var(--font-mono);letter-spacing:.3em;text-transform:uppercase}
.foot-top{display:flex;flex-direction:column;align-items:center;gap:22px}
.foot-top img{height:34px;width:auto}
.foot-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;font-size:14px}
.foot-links a{text-decoration:none}
.foot-links a:hover{color:#fff}
.disclaimer{max-width:780px;margin:30px auto 0;color:var(--moon-faint);font-size:12.5px;line-height:1.7}

/* ---------- sticky bar ---------- */
.stickybar{position:fixed;z-index:50;left:50%;bottom:16px;transform:translate(-50%,140%);display:flex;align-items:center;gap:16px;padding:10px 10px 10px 20px;border-radius:999px;background:rgba(9,12,24,.86);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px -20px rgba(0,0,0,.6);color:var(--moon);transition:transform .5s var(--ease);max-width:calc(100vw - 24px)}
.stickybar.show{transform:translate(-50%,0)}
.stickybar .btn{min-height:44px;padding:0 20px;font-size:15px;white-space:nowrap}
.sticky-price{display:flex;align-items:baseline;gap:8px;font-size:13.5px;color:var(--moon-muted);white-space:nowrap}
.sticky-price strong{font-size:20px;color:#fff}
.sticky-price s{color:var(--moon-faint)}
.sticky-price b{color:#fff;font-variant-numeric:tabular-nums}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease) var(--d,0ms),transform 1.1s var(--ease) var(--d,0ms)}
.rv.in{opacity:1;transform:none}
.float{animation:float 7s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.float,.pulse-dot{animation:none}.btn,.sc-frame{transition:none}html{scroll-behavior:auto}}

/* ---------- responsive ---------- */
@media (max-width:1020px){
  .sc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .workflow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .step5{grid-template-columns:minmax(0,1fr)}
  .step5:nth-child(even) .step5-copy{order:0}
  .step5-copy{max-width:680px}
  .demo-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .demo-grid .demo-out{grid-column:1/-1;max-width:340px;margin:0 auto;width:100%}
  .quote-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .angle-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  body{font-size:16px}
  .sales-nav nav a:not(.nav-cta){display:none}
  .chapter-grid,.chapter-grid.flip,.split,.facts-panel,.maker-profile{grid-template-columns:minmax(0,1fr)}
  .chapter-grid.flip>.chapter-art{order:0}
  .chapter-art{order:-1}
  .chapter-grid .chapter-art{order:-1}
  .rs-review-grid,.guide-grid,.use-cases,.package-grid,.moral-roles{grid-template-columns:minmax(0,1fr)}
  .email-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .email-flow li:nth-child(2)::after{display:none}
  .stage-phone{left:12px;bottom:-40px;width:34%;border-radius:20px;padding:5px}
  .stage-phone video,.stage-phone img{border-radius:16px}
  .stage-phone .phone-play{inset:auto 8px 8px 8px;min-height:34px;font-size:12px}
  .stage-caption{max-width:58%;margin-top:22px;font-size:12.5px}
  .prose>p{font-size:17.5px}
}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .sc-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .workflow,.angle-grid,.demo-grid,.quote-grid{grid-template-columns:minmax(0,1fr)}
  .stepper{gap:6px}
  .stepper li{flex-direction:column;align-items:flex-start;gap:6px;font-size:12.5px}
  .step5-shot{padding:5px;border-radius:14px}
  .step5-shot img{border-radius:10px}
  .step5-copy p{font-size:16.5px}
  .stage-art{border-radius:18px}
  .stage-art img{aspect-ratio:4/3.4;object-position:72% 50%}
  .chapter-art img,.price-art img{border-radius:20px}
  .price-art{margin-bottom:-28px}
  .price-art img{aspect-ratio:4/3;object-position:30% 50%}
  .cdbar-in{font-size:12.5px;padding:7px 12px}
  .cdbar .bar-long{display:none}
  .sales-nav{padding:10px 16px}
  .brand-link img{height:26px}
  .order-price strong{font-size:56px}
  .countdown-grid strong{font-size:22px}
  .stickybar{left:12px;right:12px;bottom:12px;transform:translateY(140%);justify-content:space-between;padding-left:16px;max-width:none}
  .stickybar.show{transform:none}
  .email-flow{grid-template-columns:minmax(0,1fr)}
  .email-flow li::after{display:none}
  .sc-label{font-size:14.5px}
  .sc-cap{font-size:13px}
  .pullquote{font-size:18px}
}

/* Focus-group fixes (7 Oct 2026): refund line, time line, overview label, sample vs HD note, Explee note. */
.refund-line{color:var(--ink-muted)}
.night .refund-line,.on-dark .refund-line,.hero .refund-line{color:var(--moon-muted)}
.cta-note.refund-line{margin-top:4px;font-weight:500}
.refund-box{text-align:center;margin:6px 0 0;font-size:14px}
.time-line{margin:34px auto 0;max-width:720px;color:var(--ink-muted);font-size:17px}
.vsl-label{margin:clamp(40px,5vw,56px) auto 14px;max-width:960px;text-align:center;color:#fff;font-weight:600;font-size:clamp(17px,2vw,21px);letter-spacing:-.01em}
.vsl-label+.vsl-frame{margin-top:0}
.hd-note{margin:18px 0 0}
.guide .incl-note{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--tint);color:var(--ink);font-size:14.5px;line-height:1.55}
.stickybar .sticky-refund{color:var(--moon-faint);font-size:12.5px;white-space:nowrap}
@media(max-width:639px){.stickybar .sticky-refund{display:none}.vsl-label{margin-bottom:12px}}

/* ---------- Reelsite additions (no illustrations or screenshots yet: text-only chapters and steps) ---------- */
.chapter-grid.solo{grid-template-columns:minmax(0,760px);justify-content:center}
.hero-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:28px 0 0;padding:0;list-style:none}
.hero-chips li{padding:8px 16px;border-radius:999px;border:1px solid var(--night-line);background:rgba(255,255,255,.06);color:var(--moon);font-size:15px;font-weight:500}
.hero-copy .eyebrow{color:var(--orchid-light)}
.stepper{grid-template-columns:repeat(6,minmax(0,1fr))}
.step5:not(:has(.step5-shot)){grid-template-columns:minmax(0,760px);justify-content:center}
.step5:not(:has(.step5-shot)) .step5-copy{order:0}
.email-flow{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:40px}
.guide-grid + .email-flow{margin-top:40px}
.night-2 .guide{background:rgba(255,255,255,.05);border-color:var(--night-line);color:var(--moon)}
.night-2 .guide h3{color:#fff}
.night-2 .guide p{color:var(--moon-muted)}
.center{text-align:center}
@media (max-width:900px){
  .stepper{grid-template-columns:repeat(3,minmax(0,1fr))}
  .email-flow{grid-template-columns:minmax(0,1fr)}
  .email-flow li:not(:last-child)::after{content:"↓";right:auto;left:50%;top:auto;bottom:-14px;transform:translateX(-50%)}
}
.guide-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.guide-grid.three{grid-template-columns:minmax(0,1fr)}}

/* ============ before / after slider and sample gallery ============ */
.ba{max-width:960px;margin:0 auto}
.ba-stage{--pos:50%;position:relative;aspect-ratio:6/5;border-radius:var(--radius-lg);overflow:hidden;background:#0b0e1a;box-shadow:0 30px 90px -30px rgba(56,97,234,.5),0 0 0 1px rgba(255,255,255,.1);user-select:none;-webkit-user-select:none}
.ba-img{pointer-events:none;-webkit-user-drag:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.2);pointer-events:none}
.ba-knob{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;color:var(--orchid-dark);display:grid;place-items:center;box-shadow:0 8px 24px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.08)}
.ba-labels{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;margin:0 0 10px;font:600 13px/1 var(--font-text);letter-spacing:.04em;text-transform:uppercase}
.ba-lab{justify-self:start;padding:8px 14px;border-radius:999px;border:1px solid var(--night-line);background:rgba(255,255,255,.06);color:var(--moon)}
.ba-lab-new{justify-self:end;background:var(--orchid-dark);border-color:var(--orchid-dark);color:#fff}
.ba-lab-dir{color:var(--moon-faint);font-weight:500;letter-spacing:.06em;white-space:nowrap}.ba-lab-dir i{font-style:normal;color:var(--moon-muted)}
.ba-knob svg{width:24px;height:24px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none}
.ba-stage{cursor:ew-resize;touch-action:pan-y}
.ba-stage:focus-within{outline:3px solid var(--orchid-light);outline-offset:3px}
.ba-cap{margin:18px 0 0;text-align:center;color:var(--moon-muted);font-size:17px}
.ba-cap a{color:#fff;text-underline-offset:3px}
.sample-note{text-align:center;margin:28px auto 0;max-width:640px;font-size:15px}
.sample-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.sample-card{background:#fff;border:1px solid var(--day-line);border-radius:var(--radius-lg);padding:16px;box-shadow:0 18px 50px -30px rgba(19,23,38,.35);display:flex;flex-direction:column;gap:14px}
.sample-pair{display:grid;grid-template-columns:1fr 22px 1fr;align-items:center;gap:6px;text-decoration:none;color:inherit}
.sample-pair figure{margin:0;position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--day-line);aspect-ratio:4/5;background:var(--day-2)}
.sample-pair img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block;transition:transform .6s var(--ease)}
.sample-pair:hover img{transform:scale(1.03)}
.sample-pair figcaption{position:absolute;left:6px;bottom:6px;padding:4px 8px;border-radius:999px;background:rgba(9,12,24,.8);color:#fff;font:600 11px/1 var(--font-text);letter-spacing:.04em;text-transform:uppercase}
.sample-arrow{color:var(--orchid-dark);display:grid;place-items:center}.sample-arrow svg{width:22px;height:22px}
.sample-meta{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.sample-meta h3{margin:0;font-size:19px;line-height:1.25;color:var(--ink)}
.sample-meta p{margin:4px 0 0;color:var(--ink-muted);font-size:15px}
.sample-link{flex:none;color:var(--orchid-dark);font-weight:600;font-size:15px;text-underline-offset:3px;white-space:nowrap}
@media (max-width:960px){.sample-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.sample-grid{grid-template-columns:1fr}.ba-stage{aspect-ratio:4/5}.ba-knob{width:44px;height:44px;margin:-22px 0 0 -22px}}

/* ============================================================
   V2 visuals (2026-10-26): full-width before/after cards right under the hero, phone mockups,
   story illustrations, real app screenshots in frames, theme trio, share page, claim panel, bonus covers.
   ============================================================ */
.wrap.wide{max-width:1288px}
.showcase{background:radial-gradient(1100px 600px at 50% 0%,rgba(var(--orchid-rgb)/.22),transparent 70%),var(--night);padding-top:clamp(64px,8vw,110px)}
.bacards{display:grid;gap:clamp(44px,6vw,84px)}
.bacard{padding:clamp(10px,1.2vw,16px);border-radius:var(--radius-xl);background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));border:1px solid var(--night-line);box-shadow:0 50px 120px -60px rgba(43,80,214,.55)}
.bacard .ba{max-width:none}
.bacard .ba-stage{aspect-ratio:1440/1000;border-radius:18px;cursor:ew-resize;touch-action:pan-y}
.bacard .ba-img{object-position:top center}
.bacard .ba-knob{width:56px;height:56px;margin:-28px 0 0 -28px;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 6px rgba(255,255,255,.18)}
.bacard-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(20px,4vw,56px);align-items:end;padding:clamp(20px,3vw,32px) clamp(8px,2vw,24px) 6px}
.bacard-num{margin:0 0 8px;font:500 12.5px/1 var(--font-mono);letter-spacing:.14em;color:var(--orchid-light)}
.bacard h3{font-size:clamp(26px,2.8vw,36px);line-height:1.1;letter-spacing:-.035em;color:#fff}
.bacard-trade{margin:8px 0 0;color:var(--moon-muted);font-size:17px}
.bacard-change{margin:18px 0 0;max-width:640px;color:var(--moon);font-size:17.5px;line-height:1.6}
.bacard-change b{color:var(--orchid-light);font-weight:600}
.bacard-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.bacard-actions .btn{min-height:50px;padding:0 24px;font-size:16px}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-ghost:hover{background:rgba(255,255,255,.14);transform:translateY(-1px)}
.bacard-phone{margin:-140px 0 0;width:230px;position:relative;z-index:2;text-align:center}
.bacard-phone figcaption{margin-top:10px;font:500 11.5px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--moon-faint)}
.phone-frame{position:relative;padding:9px;border-radius:38px;background:linear-gradient(160deg,#2a3150,#0c0f1c);box-shadow:0 30px 70px -20px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.06)}
.phone-frame::before{content:"";position:absolute;top:15px;left:50%;width:30%;height:16px;margin-left:-15%;border-radius:10px;background:#05070d;z-index:2}
.phone-frame img,.phone-frame iframe{display:block;width:100%;border-radius:30px;background:#fff}
.bacard-phone .phone-frame img{aspect-ratio:390/700;object-fit:cover;object-position:top}
.more-wrap{display:flex;justify-content:center;margin-top:clamp(36px,5vw,56px)}
.btn-more{min-height:56px;padding:0 32px}
/* phone version dialog */
.phone-dialog{padding:0;border:0;background:transparent;max-width:min(430px,94vw);width:100%;overflow:visible}
.phone-dialog::backdrop{background:rgba(5,8,18,.82);backdrop-filter:blur(6px)}
.phone-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;color:#fff}
.phone-dialog-head p{margin:0;font-weight:600;font-size:16px}
.phone-dialog-close{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;font-size:26px;line-height:1;cursor:pointer}
.phone-frame.big iframe{width:100%;height:min(780px,calc(100vh - 120px));height:min(780px,calc(100dvh - 120px));border:0}
/* story art: a touch smaller than the copy column */
.story .chapter-art img{aspect-ratio:auto}
/* the cost */
.cost-split{align-items:center}
.cost-art img{border-radius:var(--radius-xl);box-shadow:0 40px 90px -40px rgba(65,91,175,.45)}
/* how it works: frames */
.browser-bar{display:flex;align-items:center;gap:6px;padding:4px 6px 10px}
.browser-bar i{width:10px;height:10px;border-radius:50%;background:#2a2f40}
.browser-bar i:first-child{background:#ff5f57}.browser-bar i:nth-child(2){background:#febc2e}.browser-bar i:nth-child(3){background:#28c840}
.browser-bar span{margin-left:10px;padding:3px 12px;border-radius:999px;background:#151926;color:#8a91a8;font:500 11.5px/1.4 var(--font-mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.step5-shot{position:relative}
.trio{margin-top:clamp(70px,9vw,120px)}
.trio-head{max-width:720px;margin:0 auto 36px;text-align:center}
.trio-head h3{font-size:clamp(26px,3vw,36px);letter-spacing:-.035em}
.trio-head p{margin:14px 0 0;color:var(--ink-muted);font-size:18px}
.trio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));max-width:1100px;margin:0 auto;gap:clamp(18px,2.5vw,32px)}
.trio-item{margin:0}
.trio-shot{position:relative;padding-bottom:28px}
.trio-shot>img:first-child{width:100%;border-radius:14px;box-shadow:0 24px 60px -30px rgba(10,19,47,.55),0 0 0 1px var(--day-line)}
.trio-phone{position:absolute;right:-6px;bottom:0;width:30%;border-radius:14px;border:4px solid #0f1220;box-shadow:0 18px 40px -16px rgba(10,19,47,.6)}
.trio-item figcaption{margin-top:16px;color:var(--ink-muted);font-size:15.5px;line-height:1.55}
.trio-item figcaption b{display:block;color:var(--ink);font-size:18px;margin-bottom:2px}
/* their words: wide screenshot inside the narrow prose */
.wide-shot{margin:40px 0 8px;padding:8px;border-radius:var(--radius-lg);background:#0B0D10;border:1px solid #1C202E;box-shadow:0 30px 70px -40px rgba(10,19,47,.55)}
.wide-shot img{width:100%;border-radius:12px}
.wide-shot figcaption{padding:14px 8px 6px;color:#aab1c7;font-size:14.5px;line-height:1.55}
.wide-shot figcaption b{color:#fff}
/* owner email: the real share page */
.share-show{display:grid;grid-template-columns:minmax(0,1fr) 190px 230px;gap:clamp(16px,2vw,28px);align-items:end;margin-top:clamp(44px,6vw,64px)}
.share-show figure{margin:0}
.share-desk{padding:8px;border-radius:var(--radius-lg);background:#0B0D10;border:1px solid #1C202E;box-shadow:0 40px 90px -40px rgba(0,0,0,.7)}
.share-desk img{width:100%;border-radius:12px}
.share-pitch img{width:100%;border-radius:16px;box-shadow:0 30px 70px -30px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.1)}
.share-show + .disclosure{margin-bottom:clamp(40px,5vw,56px)}
/* publishing: the claim panel */
.publish-split{align-items:center;max-width:1100px}
.claim-shot{margin:0;justify-self:center;max-width:400px;width:100%}
.claim-shot img{width:100%;border-radius:18px;box-shadow:0 40px 90px -36px rgba(10,19,47,.6),0 0 0 1px #1C202E}
.claim-shot figcaption{margin-top:14px;text-align:center;color:var(--ink-faint);font-size:14px}
/* first client */
.client-art{max-width:880px;margin:0 auto clamp(44px,6vw,64px)}
.client-art img{border-radius:var(--radius-xl);box-shadow:0 40px 90px -40px rgba(65,91,175,.45)}
/* bonuses: covers */
.guide.has-cover{display:flex;flex-direction:column}
.guide-cover{width:100%;aspect-ratio:1;object-fit:cover;border-radius:14px;margin:0 0 22px;background:#0b0e1a}
/* price box art */
.price-art{margin:0 auto -90px;max-width:1040px;position:relative;z-index:1}
.price-art img{width:100%;border-radius:var(--radius-xl);box-shadow:0 40px 100px -50px rgba(38,58,122,.6)}
@media (max-width:1020px){
  .share-show{grid-template-columns:minmax(0,1fr) 170px}
  .share-pitch{display:none}
}
@media (max-width:820px){
  .bacard-foot{grid-template-columns:minmax(0,1fr) 150px;align-items:start}
  .bacard-phone{margin:0;width:150px}
  .trio-grid{grid-template-columns:minmax(0,1fr)}
  .trio-item{max-width:560px;margin:0 auto;width:100%}
  .publish-split .claim-shot{order:2}
}
@media (max-width:620px){
  .bacard .ba-stage{aspect-ratio:1440/1260}
  .bacard{padding:8px;border-radius:22px}
  .bacard .ba-stage{border-radius:14px}
  .ba-labels{font-size:11.5px;gap:6px}.ba-lab{padding:8px 11px}.ba-lab-dir{font-size:11px;letter-spacing:.02em}
      .bacard-foot{grid-template-columns:minmax(0,1fr) 112px;gap:16px;padding:18px 8px 6px}
  .bacard-phone{width:112px}
  .phone-frame{padding:5px;border-radius:22px}
  .phone-frame::before{top:9px;height:9px}
  .phone-frame img{border-radius:18px}
  .bacard-change{font-size:16px}
  .bacard-actions{grid-column:1/-1}
  .bacard-actions .btn{flex:1 1 100%}
  .share-show{grid-template-columns:minmax(0,1fr)}
  .share-phone{display:none}
  .price-art{margin-bottom:-40px}
  .phone-frame.big{padding:6px;border-radius:30px}
  .phone-frame.big iframe{border-radius:24px}
}
/* v2 fixes after the first look */
.phone-frame::before{display:none}
.guide.has-cover{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 24px;align-items:start}
.guide.has-cover>.guide-cover{grid-row:1/span 6;margin:0}
.guide.has-cover>*:not(.guide-cover){grid-column:2}
@media (max-width:600px){.guide.has-cover{grid-template-columns:96px minmax(0,1fr);gap:0 16px}}
.showcase .cta-block{margin-top:44px}
.ba-stage.peek .ba-before,.ba-stage.peek .ba-handle{transition:clip-path 1.1s var(--ease),left 1.1s var(--ease)}
@media (max-width:620px){.bacard-actions{gap:8px;margin-top:16px}.bacard-actions .btn{min-height:44px;padding:0 14px;font-size:14.5px;white-space:nowrap}.bacard h3{font-size:24px}}

/* Sticky bar = one full-width "Get Lifetime Access" button, like Reelshop (owner ruling 27 Oct 2026); the timer lives in the top bar only. */
.stickybar{left:0;right:0;bottom:0;transform:translateY(140%);border-radius:0;max-width:none;padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:block;border-left:0;border-right:0;border-bottom:0}
.stickybar.show{transform:none}
.stickybar .sticky-price[hidden],.stickybar .sticky-refund{display:none}
.stickybar .btn{display:flex;width:100%;justify-content:center;min-height:52px;font-size:17px}
@media (max-width:520px){.stickybar{padding:8px 10px calc(8px + env(safe-area-inset-bottom))}.stickybar .btn{min-height:48px;font-size:16px}}