/* =====================================================================
   CreatorLabs — site v4 layout on the v3 visual system (team feedback
   2026-09-10: "structure and layout is good, but on our current visual").
   Cream paper, pink / yellow / lavender bands, purple accents, yellow
   hard-shadow CTAs, marker words. Bricolage Grotesque display, DM Sans
   body, Caveat script, Atomic Marker accents. 8pt spacing throughout.
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&family=Caveat:wght@500;600;700&display=swap');

/* Atomic Marker — the marker accent face carried over from v3 (GROW. / FAST. / AI EARNS) */
@font-face {
  font-family: 'Atomic Marker';
  src: url('assets/fonts/AtomicMarker-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* v3 palette (styles-v3.css), sampled against the live site */
  --bg: #F8F2EA;            /* cream paper */
  --bg-2: #FBF7F0;
  --lav: #DCD3F6;
  --lav-2: #C9BCF0;
  --lav-soft: #EDE8FA;
  --pink: #F8E4E3;          /* partner band */
  --pink-2: #F6D7E4;
  --pink-pill: #F9A8CC;
  --pink-soft: #FBE6F2;
  --yellow: #F8F96F;        /* stat band */
  --yellow-deep: #F7F92D;   /* CTAs */
  --yellow-soft: #FBFBC9;
  --peach: var(--pink-soft);
  --ink: #04080D;
  --ink-2: #16151C;
  --muted: #6B6F7B;
  --muted-2: #9CA3AF;
  --hair: #E8E4DC;
  --hair-2: #DCD3F6;
  --white: #FFFFFF;
  --purple: #6C5CE7;
  --purple-deep: #5B4BDB;
  --purple-ink: #5B4BDB;
  --purple-soft: #C9BCF0;
  --purple-tint: #EFEBFE;
  /* "dark" sections are lavender slabs in the v3 system, never dark */
  --dark: #DCD3F6;
  --dark-2: #EDE8FA;
  --dark-3: #FFFFFF;
  --on-dark: var(--ink);
  --on-dark-muted: #6B6F7B;
  --on-dark-purple: #6C5CE7;
  /* the app mock keeps a real dark chrome */
  --app-dark: #2B2336;
  --app-dark-2: #352B42;
  --app-dark-3: #43384F;
  --app-on-dark: #F4EFFA;
  --app-on-dark-muted: #B9B0C8;
  --plate: linear-gradient(135deg, #FBE6F2 0%, #F3EAF7 45%, #DCD3F6 100%);
  --plate-2: linear-gradient(135deg, #EDE8FA 0%, #F6F2F0 55%, #FBFBC9 100%);

  --font-display: 'Bricolage Grotesque', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-script: 'Caveat', 'Segoe Script', cursive;
  --font-marker: 'Atomic Marker', 'Permanent Marker', cursive;

  /* 16px base, 1.25 ratio */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-body: 16px;
  --fs-lead: clamp(16px, 1.3vw, 19px);
  --fs-h4: clamp(18px, 1.5vw, 21px);
  --fs-h3: clamp(24px, 2.4vw, 34px);
  --fs-h2: clamp(34px, 4.2vw, 60px);
  --fs-display: clamp(44px, 6vw, 84px);

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(35,25,80,.04), 0 4px 12px -4px rgba(35,25,80,.10);
  --shadow: 0 10px 28px -14px rgba(35,25,80,.22);
  --shadow-lg: 0 8px 16px -8px rgba(35,25,80,.08), 0 40px 80px -32px rgba(35,25,80,.30);

  --maxw: 1280px;
  --gutter: clamp(24px, 5.5vw, 80px);
  --nav-h: 80px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --dur: .7s;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--purple-soft); color: var(--ink); }
:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(var(--maxw), 100% - var(--gutter) * 2); margin-inline: auto; }
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.h-display, .h2, .h3, .h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.02;
  text-wrap: balance;
}
.h-display { font-size: var(--fs-display); letter-spacing: -.04em; line-height: .98; }
.h2 { font-size: var(--fs-h2); line-height: 1.04; }
.h3 { font-size: var(--fs-h3); letter-spacing: -.025em; line-height: 1.1; }
.h4 { font-size: var(--fs-h4); letter-spacing: -.015em; line-height: 1.25; }
.accent { color: var(--purple); }
.on-dark .accent, .dark .accent { color: var(--on-dark-purple); }
/* marker words, the v3 signature: GROW. / FAST / AI EARNS / ANSWERS */
.accent .mk, .accent.mk { font-family: var(--font-marker); font-weight: 400; letter-spacing: .01em; font-size: 1.08em; line-height: .9; text-transform: uppercase; }
.accent .mk { margin-left: .16em; }
/* yellow highlighter behind a word (24/7) */
.hl { background: linear-gradient(transparent 12%, var(--yellow-deep) 12%, var(--yellow-deep) 88%, transparent 88%); padding: 0 .12em; margin: 0 -.06em; border-radius: 2px; }
.lead { font-size: var(--fs-lead); color: var(--muted); line-height: 1.55; max-width: 34em; text-wrap: pretty; }
.small { font-size: var(--fs-sm); color: var(--muted); }
.script { font-family: var(--font-script); font-weight: 600; color: var(--purple); font-size: clamp(22px, 2vw, 30px); line-height: 1.1; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  height: 32px; padding: 0 14px 0 12px;
  border: 0; border-radius: var(--r-pill);
  background: var(--pink-pill);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink);
  white-space: nowrap;
}
.eyebrow svg { width: 14px; height: 14px; color: var(--ink); }
.dark .eyebrow { background: var(--yellow-deep); color: var(--ink); }
.bg-peach .eyebrow, .review .eyebrow { background: var(--lav-2); }

/* section header: eyebrow / h2 / lead, with an optional side note that sits
   bottom-right on desktop, like the Figma */
.sec-head { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px 48px; margin-bottom: 56px; }
.sec-head .eyebrow { margin-bottom: 24px; }
.sec-head .aside { max-width: 22em; color: var(--muted); text-align: right; font-size: var(--fs-lead); line-height: 1.5; padding-bottom: 8px; }
.sec-head.center { grid-template-columns: 1fr; text-align: center; justify-items: center; }
.sec-head.center .lead { margin-top: 16px; }
.sec-head.stack { grid-template-columns: 1fr; }
.sec-head.stack .lead { margin-top: 16px; }

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--yellow-deep); --btn-fg: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 52px; padding: 0 24px;
  border-radius: 4px; border: 2px solid var(--ink); background: var(--btn-bg); color: var(--btn-fg);
  box-shadow: 4px 4px 0 var(--ink);
  font-weight: 500; font-size: 16px; line-height: 1; white-space: nowrap;
  transition: transform .18s var(--ease), background .25s, box-shadow .18s var(--ease), color .25s;
  will-change: transform;
}
.btn .arr { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:hover .arr { transform: translate(2px, -2px); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); transition-duration: .1s; }
.btn-purple { --btn-bg: var(--purple); --btn-fg: #fff; }
.btn-purple:hover { background: var(--purple-deep); }
.btn-white { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); box-shadow: none; }
.btn-ghost:hover { background: rgba(255,255,255,.7); box-shadow: none; transform: none; }
.btn-sm { height: 44px; padding: 0 20px; font-size: 14px; border-radius: 999px; box-shadow: none; }
.btn-sm:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(0,0,0,.3); }
.btn-sm:active { transform: scale(.97); box-shadow: none; }
.btn-lg { height: 60px; padding: 0 32px; font-size: 18px; border-radius: 4px; }
.btn-block { width: 100%; }
.play-btn { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; color: var(--ink); }
.play-btn .ring { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; background: var(--purple); color: #fff; transition: transform .35s var(--ease), border-color .25s; }
.play-btn .ring svg { width: 12px; height: 12px; margin-left: 2px; }
.play-btn:hover .ring { transform: scale(1.08); border-color: var(--purple-soft); }
.textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; color: var(--ink); }
.textlink svg { width: 12px; height: 12px; transition: transform .3s var(--ease); }
.textlink:hover svg { transform: translate(2px, -2px); }
.textlink.purple { color: var(--purple); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  height: var(--nav-h);
  transition: background .35s, box-shadow .35s, backdrop-filter .35s;
}
.nav::before { content: ''; position: absolute; inset: 0; background: rgba(248,242,234,0); backdrop-filter: blur(0); transition: background .35s, backdrop-filter .35s; z-index: -1; }
.nav.scrolled::before { background: rgba(248,242,234,.82); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid rgba(232,228,220,.8); }
/* the thin rainbow rule the v3 nav sits on */
.nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--purple) 0%, var(--pink-pill) 50%, var(--yellow-deep) 100%); opacity: .9; }
.nav-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo { display: block; height: 28px; }
.nav-logo img { height: 28px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a { position: relative; display: inline-block; padding: 8px 14px; border-radius: 10px; font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--ink); background: rgba(108,92,231,.08); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav-links a[aria-current="page"]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--purple); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-burger { display: none; width: 44px; height: 44px; border-radius: 12px; place-items: center; }
.nav-burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease), opacity .2s; }
.nav-burger span + span { margin-top: 5px; }
.nav.open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .nav-burger span:nth-child(2) { opacity: 0; }
.nav.open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- sections ---------- */
.sec { padding-block: clamp(72px, 9vw, 128px); position: relative; }
.sec-tight { padding-block: clamp(48px, 6vw, 88px); }
.sec + .sec.flush { padding-top: 0; }
#platform { padding-bottom: clamp(40px, 5vw, 64px); }
#platform + .sec { padding-top: clamp(40px, 5vw, 64px); }
.bg-lav { background: linear-gradient(180deg, var(--lav) 0%, var(--lav-soft) 100%); }
.bg-lav-flat { background: var(--lav-soft); }
.bg-peach { background: linear-gradient(160deg, var(--pink) 0%, var(--pink-soft) 60%, var(--bg) 100%); }
/* v3 has no dark sections: the "dark" slabs become the lavender band */
.dark { background: linear-gradient(180deg, var(--lav-soft) 0%, var(--lav) 100%); color: var(--on-dark); }
.dark .lead, .dark .small, .dark .muted { color: var(--on-dark-muted); }
.rule { height: 1px; background: var(--hair); border: 0; margin: 0; }

/* ---------- hero ---------- */
.hero { position: relative; padding: clamp(40px, 6vw, 88px) 0 clamp(48px, 6vw, 88px); overflow: clip; }
.hero::before {
  content: ''; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1;
  background:
    radial-gradient(60% 50% at 78% 30%, rgba(248,201,235,.55) 0%, rgba(248,201,235,0) 70%),
    radial-gradient(50% 45% at 92% 75%, rgba(220,211,246,.8) 0%, rgba(220,211,246,0) 70%),
    radial-gradient(45% 40% at 20% 80%, rgba(248,249,111,.35) 0%, rgba(248,249,111,0) 70%);
  animation: heroGlow 18s ease-in-out infinite alternate;
}
@keyframes heroGlow { from { transform: translate3d(0,0,0) scale(1); } to { transform: translate3d(-2%, 3%, 0) scale(1.06); } }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hero-copy { padding-top: 8px; }
.hero-copy .eyebrow { margin-bottom: 32px; }
.hero-copy .h-display { max-width: 8.2em; }
.hero-copy .lead { margin-top: 24px; max-width: 24em; }
.hero-ctas { display: flex; align-items: center; gap: 24px; margin-top: 40px; flex-wrap: wrap; }
.hero-micro { margin-top: 24px; font-size: 13px; color: var(--muted); }

/* hero art: a photo stack, four floating cards, one script note */
.hero-art { position: relative; aspect-ratio: 1.1; max-width: 640px; margin-left: auto; width: 100%; }
.hero-art > * { position: absolute; }
.polaroids { left: 24%; top: 10%; width: 46%; aspect-ratio: .78; }
.polaroid {
  position: absolute; inset: 0; background: #fff; padding: 6% 6% 16%; border-radius: 6px;
  box-shadow: 0 30px 60px -20px rgba(35,25,80,.35), 0 2px 6px rgba(4,8,13,.06);
  transform: rotate(var(--rot, 0deg)) translate(var(--tx, 0), var(--ty, 0));
  transition: transform 1.1s var(--ease), opacity .8s var(--ease), box-shadow 1.1s var(--ease);
  will-change: transform;
}
.polaroid img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.polaroid .cap { position: absolute; left: 0; right: 0; bottom: 4%; text-align: center; font-family: var(--font-script); font-size: clamp(16px, 1.5vw, 22px); color: var(--purple); font-weight: 600; }
.polaroid[data-slot="0"] { --rot: -2deg; z-index: 3; }
.polaroid[data-slot="1"] { --rot: 6deg; --tx: 14%; --ty: -8%; z-index: 2; opacity: .96; }
.polaroid[data-slot="2"] { --rot: -9deg; --tx: -14%; --ty: 4%; z-index: 1; opacity: .9; }

.fcard {
  background: rgba(255,255,255,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.7); border-radius: 14px; box-shadow: var(--shadow);
  font-size: 13px; color: var(--ink-2); line-height: 1.35;
  transition: transform .9s var(--ease);
  will-change: transform;
}
.fcard.toggle { left: 6%; top: 8%; display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 12px; font-weight: 500; z-index: 5; }
.fcard.toggle .sw { width: 30px; height: 18px; border-radius: 9px; background: var(--purple); position: relative; }
.fcard.toggle .sw::after { content: ''; position: absolute; top: 3px; left: 15px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.fcard.chat { left: -2%; top: 48%; width: 34%; padding: 16px; z-index: 6; }
.fcard.chat .who { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.fcard.chat .who img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.fcard.chat .who b { display: block; font-weight: 600; font-size: 13px; color: var(--ink); }
.fcard.chat .who span { font-size: 11px; color: var(--muted); }
.bubble { display: inline-block; padding: 8px 12px; border-radius: 12px; background: var(--bg-2); font-size: 12.5px; margin-top: 6px; max-width: 100%; }
.bubble.me { background: var(--purple-tint); color: var(--purple-ink); border-bottom-right-radius: 4px; }
.bubble.fan { border-bottom-left-radius: 4px; }
.fcard.revenue { right: 0; top: 4%; width: 36%; padding: 18px; background: var(--purple); color: #fff; border-color: rgba(255,255,255,.12); z-index: 5; }
.fcard.revenue .lbl { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); display: flex; justify-content: space-between; }
.fcard.revenue .val { font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 32px); letter-spacing: -.03em; margin-top: 6px; }
.fcard.revenue .val small { font-size: .55em; color: rgba(255,255,255,.75); font-weight: 500; }
.fcard.revenue svg { width: 100%; height: 40px; margin-top: 8px; }
.fcard.revenue .note { font-size: 11px; color: rgba(255,255,255,.75); margin-top: 8px; }
.fcard.ppv { right: 2%; bottom: 14%; width: 38%; display: flex; align-items: center; gap: 12px; padding: 14px 16px; z-index: 6; }
.fcard.ppv .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--purple-tint); display: grid; place-items: center; color: var(--purple); }
.fcard.ppv .ic svg { width: 14px; height: 14px; }
.fcard.ppv b { display: block; font-weight: 600; color: var(--ink); }
.fcard.ppv span { font-size: 11.5px; color: var(--muted); }
.fcard.ppv .price { margin-left: auto; font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.02em; color: var(--ink); }
.hero-note { right: 6%; top: -9%; font-family: var(--font-script); font-weight: 600; font-size: clamp(18px, 1.8vw, 24px); color: var(--purple); transform: rotate(-6deg); z-index: 7; }
.hero-note svg { position: absolute; left: 72%; top: 105%; width: 44px; height: 30px; color: var(--purple-soft); }
.hero-pager { left: 50%; bottom: -2%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; z-index: 8; font-size: 12px; letter-spacing: .1em; color: var(--muted); }
.hero-pager button { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hair-2); display: grid; place-items: center; background: rgba(255,255,255,.7); color: var(--ink); transition: background .2s, transform .3s var(--ease); }
.hero-pager button:hover { background: #fff; transform: scale(1.06); }
.hero-pager button svg { width: 12px; height: 12px; }
.hero-pager .idx { min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.hero-caption { right: 0; bottom: -10%; font-size: 11px; color: var(--muted-2); }

/* ---------- stat band + partners ---------- */
.statband { background: var(--yellow); padding: 40px 0; position: relative; z-index: 2; }
.statband .stat .lbl { color: var(--ink-2); }
/* four equal cells, everything centred, so the band reads as one row */
.statband .wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; align-items: center; justify-items: center; text-align: center; }
.stat .num { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 2.6vw, 36px); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .lbl { margin-top: 8px; font-size: 14px; color: var(--muted); }
.statband .textlink { justify-self: center; }
.partners { padding: 56px 0 64px; text-align: center; background: var(--pink); }
.partners .lbl { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; }
/* six equal cells, marks sit straight on the band, no tiles. The hover lives on
   the img because the stagger reveal owns the cell's opacity, transform and delay */
.logo-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; margin-top: 32px; }
.logo-row > * { display: grid; place-items: center; height: 64px; padding: 0 16px; }
.logo-row a { cursor: pointer; text-decoration: none; }
.logo-row img { height: 26px; width: auto; max-width: 82%; object-fit: contain; opacity: .8; transition: opacity .25s var(--ease), transform .4s var(--ease); }
.logo-row > :hover img { opacity: 1; transform: translateY(-2px); }
.logo-row img.tall { height: 34px; }

/* ---------- product plate / dashboard mock ---------- */
.plate {
  position: relative; border-radius: var(--r-lg); background: var(--plate); padding: clamp(24px, 4vw, 56px);
  border: 1px solid rgba(255,255,255,.7); box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.plate.alt { background: var(--plate-2); }
.card { background: #fff; border-radius: var(--r); box-shadow: var(--shadow); border: 1px solid rgba(4,8,13,.06); }

.dash { --dark: var(--app-dark); --dark-2: var(--app-dark-2); --dark-3: var(--app-dark-3); --on-dark: var(--app-on-dark); --on-dark-muted: var(--app-on-dark-muted); background: var(--dark); color: var(--on-dark); border-radius: 20px; padding: 12px; box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 200px 1fr; gap: 12px; border: 1px solid rgba(255,255,255,.06); }
.dash-side { padding: 16px 8px; display: flex; flex-direction: column; }
.dash-side .logo { height: 24px; margin: 4px 8px 32px; filter: brightness(0) invert(1); opacity: .95; }
.dash-side .lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); padding: 0 8px; margin-bottom: 12px; }
.dash-side a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; font-size: 14px; color: var(--on-dark-muted); transition: background .25s, color .25s; }
.dash-side a svg { width: 16px; height: 16px; }
.dash-side a.on, .dash-side a:hover { background: rgba(255,255,255,.07); color: #fff; }
.dash-side .live { margin-top: auto; padding: 8px; font-size: 11px; color: var(--on-dark-muted); }
.dash-side .live b { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 4px; font-weight: 600; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #8EF0B4; box-shadow: 0 0 0 0 rgba(142,240,180,.6); animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(142,240,180,.55); } 70% { box-shadow: 0 0 0 8px rgba(142,240,180,0); } 100% { box-shadow: 0 0 0 0 rgba(142,240,180,0); } }
.dash-main { background: var(--dark-2); border-radius: 14px; padding: 24px; display: grid; gap: 16px; min-width: 0; }
.dash-top { display: flex; justify-content: space-between; align-items: end; }
.dash-top .lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.dash-top h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; margin-top: 6px; }
.chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 8px; font-size: 11px; letter-spacing: .04em; background: rgba(255,255,255,.08); color: var(--on-dark-muted); border: 1px solid rgba(255,255,255,.08); }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kpi { background: var(--dark-3); border-radius: 12px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.05); }
.kpi .lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.kpi .val { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.03em; margin: 10px 0 6px; font-variant-numeric: tabular-nums; }
.kpi .val small { font-size: .5em; color: var(--on-dark-muted); font-weight: 500; }
.kpi .sub { font-size: 12px; color: var(--on-dark-muted); }
.dash-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 12px; }
.panel { background: var(--dark-3); border-radius: 12px; padding: 18px 20px; border: 1px solid rgba(255,255,255,.05); min-width: 0; }
.panel .ph { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 500; }
.panel .ph span { font-size: 11px; color: var(--on-dark-muted); }
.chart { margin-top: 16px; }
.chart svg { width: 100%; height: 120px; }
.chart .axis { display: flex; justify-content: space-between; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--on-dark-muted); margin-top: 8px; }
.roster { margin-top: 12px; }
.roster li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.06); font-size: 13px; }
.roster li:first-child { border-top: 0; }
.roster .av { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; font-size: 11px; color: var(--on-dark-muted); font-weight: 600; flex: none; }
.roster b { display: block; font-weight: 500; }
.roster span { font-size: 11px; color: var(--on-dark-muted); }
.roster .amt { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.convo { display: flex; align-items: center; gap: 16px; }
.convo .lbl { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); }
.convo b { display: block; margin-top: 4px; font-weight: 500; }
.convo b span { color: var(--on-dark-muted); font-weight: 400; font-size: 13px; }
.convo q { display: block; font-size: 13px; color: var(--on-dark-muted); margin-top: 4px; }
.convo .btn { margin-left: auto; height: 40px; background: rgba(124,92,232,.35); color: #fff; font-size: 13px; border: 1px solid rgba(255,255,255,.1); }
.dash-foot { display: flex; gap: 20px; font-size: 11px; color: var(--on-dark-muted); padding-top: 4px; }
.dash-foot span { display: inline-flex; align-items: center; gap: 6px; }
.dash-foot svg { width: 12px; height: 12px; }
.plate-caption { text-align: center; font-size: 12px; color: var(--muted-2); margin-top: 16px; }

/* ---------- one platform: copy beside a hand built app mock ---------- */
.platform-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px clamp(40px, 5vw, 80px); align-items: center; }
.platform-copy .eyebrow { margin-bottom: 24px; }
.platform-copy .lead { margin-top: 16px; }
.plist { margin-top: 32px; display: grid; gap: 8px; }
.plist li { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--hair); font-size: 15px; line-height: 1.45; }
.plist li:first-child { border-top: 0; }
.plist b { font-weight: 600; color: var(--ink); }
.plist span { color: var(--muted); }
.platform-cap { grid-column: 2; }
.shot-app img { width: auto; }
.shot-app { --app-pink: #E1699E; --app-tint: #FBE3EE; --app-bg: #FAF1E8; --app-hair: #F3E1D9; --app-mute: #8A8A96; font-family: var(--font-body); }
.app { background: var(--app-bg); padding: 12px; display: grid; gap: 12px; color: var(--ink); }
.app-nav { display: flex; align-items: center; gap: 12px; padding: 4px 4px 0; }
.shot-app .app-logo { height: 18px; width: auto; flex: none; }
.app-pill { margin-inline: auto; display: flex; gap: 2px; background: #fff; border-radius: 999px; padding: 4px; box-shadow: 0 1px 2px rgba(4,8,13,.06); }
.app-pill span { font-size: 11px; font-weight: 500; padding: 5px 12px; border-radius: 999px; color: var(--app-mute); }
.app-pill span.on { background: var(--app-tint); color: var(--app-pink); }
.app-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--app-pink); white-space: nowrap; }
.app-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--app-pink); box-shadow: 0 0 0 3px var(--app-tint); }
.app-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 12px; }
.app-chat, .app-card { background: #fff; border: 1px solid var(--app-hair); border-radius: 14px; min-width: 0; }
.app-chat { display: grid; grid-template-rows: auto 1fr auto; }
.app-chat-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--app-hair); }
.shot-app .app-chat-head img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.app-chat-head b { display: block; font-size: 13px; font-weight: 600; }
.app-chat-head span { font-size: 11px; color: var(--app-mute); }
.app-chat-head em { margin-left: auto; font-style: normal; font-size: 11px; font-weight: 600; color: var(--app-pink); font-variant-numeric: tabular-nums; }
.app-msgs { padding: 14px; display: grid; gap: 8px; align-content: start; }
.app-msgs p { margin: 0; max-width: 82%; padding: 8px 12px; border-radius: 14px; font-size: 12.5px; line-height: 1.4; }
.app-msgs .in { background: var(--app-bg); border-bottom-left-radius: 4px; justify-self: start; }
.app-msgs .out { background: var(--app-tint); border-bottom-right-radius: 4px; justify-self: end; }
.app-ppv { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; align-items: center; max-width: 82%; padding: 8px; border-radius: 14px; border-bottom-right-radius: 4px; background: var(--app-tint); }
.shot-app .app-ppv img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; filter: blur(3px); }
.app-ppv b { display: block; font-size: 12px; font-weight: 600; }
.app-ppv span { font-size: 11px; color: var(--app-pink); font-weight: 600; }
.app-ppv i { font-style: normal; font-size: 10px; color: var(--app-mute); align-self: start; }
.app-paid { background: var(--ink) !important; color: #fff; font-weight: 500; }
.app-paid span { color: var(--yellow); }
.app-compose { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--app-hair); font-size: 11.5px; color: var(--app-mute); }
.app-compose b { font-weight: 600; color: var(--ink); padding: 5px 10px; border: 1px solid var(--app-hair); border-radius: 999px; font-size: 11px; }
.app-side { display: grid; gap: 12px; align-content: start; }
.app-card { padding: 12px 14px; }
.app-card-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 600; margin-bottom: 8px; }
.app-card-h span { font-size: 11px; font-weight: 500; color: var(--app-mute); }
.app-card-h span b { color: var(--app-pink); }
.app-card dl { margin: 0; display: grid; gap: 6px; }
.app-card dl div { display: grid; grid-template-columns: 68px 1fr; gap: 8px; font-size: 11.5px; line-height: 1.35; }
.app-card dt { color: var(--app-mute); }
.app-card dd { margin: 0; }
.app-queue li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--app-hair); font-size: 11.5px; }
.app-queue li:first-child { border-top: 0; }
.app-queue i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--app-pink); flex: none; }
.app-queue i.done { background: var(--app-pink); }
.app-queue b { display: block; font-weight: 600; }
.app-queue span { color: var(--app-mute); font-size: 10.5px; }
.app-queue em { margin-left: auto; font-style: normal; font-size: 10.5px; color: var(--app-mute); font-variant-numeric: tabular-nums; }

/* ---------- app screenshot in a window frame ---------- */
.shot { margin: 0; border-radius: 20px; overflow: hidden; background: #fff; border: 1px solid var(--hair); box-shadow: var(--shadow-lg); }
.shot-bar { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; background: var(--lav-soft); border-bottom: 1px solid var(--hair); }
.shot-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--hair-2); }
.shot-bar i { margin-left: 16px; font-style: normal; font-size: 12px; color: var(--muted-2); background: #fff; border-radius: 6px; padding: 3px 10px; }
.shot img { width: 100%; height: auto; }

/* ---------- video plate ---------- */
.vplate { position: relative; border-radius: var(--r-lg); overflow: hidden; background: var(--yellow-soft); aspect-ratio: 16/9; box-shadow: var(--shadow-lg); border: 2px solid var(--ink); }
.vplate video, .vplate img.poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vplate .veil { position: absolute; inset: 0; display: grid; place-items: center; background: none; transition: opacity .5s, visibility .5s; }
.vplate.playing .veil { opacity: 0; visibility: hidden; }
.vplate .play { width: 72px; height: 72px; border-radius: 50%; background: var(--purple); display: grid; place-items: center; color: #fff; box-shadow: var(--shadow-lg); transition: transform .4s var(--ease); }
.vplate .play svg { width: 22px; height: 22px; margin-left: 3px; }
.vplate:hover .play { transform: scale(1.08); }
.vplate .cap { position: absolute; left: 24px; bottom: 20px; height: 32px; padding: 0 14px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 500; font-size: 14px; display: grid; place-items: center; box-shadow: var(--shadow-sm); }
.vplate .dur { position: absolute; right: 20px; bottom: 20px; height: 26px; padding: 0 8px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }

/* ---------- feature rows ---------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; padding: clamp(48px, 6vw, 88px) 0; border-top: 1px solid var(--hair); }
.feature:first-of-type { border-top: 0; }
.feature.flip .f-copy { order: 2; }
.f-copy { max-width: 32em; }
.f-copy .eyebrow { margin-bottom: 24px; }
.f-copy .h3 { font-size: clamp(28px, 2.8vw, 40px); }
.f-copy .lead { margin-top: 20px; font-size: 17px; }
.f-copy .tail { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hair); font-size: 15px; color: var(--ink-2); }
.f-art .plate { aspect-ratio: 1.12; display: grid; place-items: center; }
.f-art .card { width: min(100%, 400px); padding: 24px; font-size: 14px; }
.card .ch { display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 15px; padding-bottom: 14px; border-bottom: 1px solid var(--hair); }
.card .ch .ic { display: inline-flex; align-items: center; gap: 8px; }
.card .ch .ic svg { width: 16px; height: 16px; color: var(--purple); }
.pill { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 8px; background: var(--purple-tint); color: var(--purple-ink); font-size: 12px; font-weight: 500; }
.pill.live { background: #E8F7EE; color: #22784A; }
.pill.line { background: transparent; border: 1px solid var(--hair-2); color: var(--muted); }
.card .kv { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; color: var(--ink-2); }
.card .kv b { font-weight: 600; color: var(--ink); }
.card .kv .big { font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: -.03em; color: var(--purple-ink); }
.card .row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.card .row img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.card .row b { display: block; font-weight: 600; color: var(--ink); }
.card .row span { font-size: 12px; color: var(--muted); }
.card .row .amt { margin-left: auto; font-weight: 600; font-size: 16px; }
.card .foot { display: flex; align-items: center; gap: 8px; padding-top: 14px; font-size: 12.5px; color: var(--muted); }
.card .foot svg { width: 14px; height: 14px; color: var(--purple); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.tags span { height: 28px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 8px; background: var(--purple-tint); color: var(--purple-ink); font-size: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--purple-tint); color: var(--purple-ink); display: grid; place-items: center; font-weight: 600; font-size: 13px; }

/* chat mock */
.chat-mock { width: min(100%, 400px); padding: 20px; }
.chat-mock .top { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.chat-mock .top img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.chat-mock .top b { display: block; font-weight: 600; font-size: 14px; }
.chat-mock .top span { font-size: 11px; color: #22784A; display: inline-flex; align-items: center; gap: 5px; }
.chat-mock .top span::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #3FCB7B; }
.chat-mock .top .pill { margin-left: auto; }
.chat-mock .ts { text-align: center; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin: 14px 0 6px; }
.msgs { display: flex; flex-direction: column; gap: 8px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 14px; font-size: 13.5px; line-height: 1.4; background: var(--bg-2); align-self: flex-start; border-bottom-left-radius: 4px; opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.msg.me { align-self: flex-end; background: var(--purple-tint); color: var(--purple-ink); border-bottom-left-radius: 14px; border-bottom-right-radius: 4px; }
.in .msg, .msg.in { opacity: 1; transform: none; }
.ppv-card { align-self: flex-end; width: 82%; border-radius: 14px; overflow: hidden; border: 1px solid var(--hair); background: #fff; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.ppv-card.in { opacity: 1; transform: none; }
.ppv-card .media { position: relative; aspect-ratio: 16/9; background: linear-gradient(160deg, #8E7A6A, #4A3A4A); display: grid; place-items: center; color: #fff; text-align: center; font-size: 12px; }
.ppv-card .media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) brightness(.7); transform: scale(1.15); }
.ppv-card .media > div { position: relative; }
.ppv-card .media .lock { width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255,255,255,.6); display: grid; place-items: center; margin: 0 auto 8px; }
.ppv-card .media .lock svg { width: 14px; height: 14px; }
.ppv-card .media b { display: block; font-size: 14px; font-weight: 600; }
.ppv-card .media .len { position: absolute; right: 8px; bottom: 8px; font-size: 10px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.5); }
.ppv-card .body { padding: 10px 12px 12px; font-size: 12px; color: var(--muted); }
.ppv-card .btn { margin-top: 8px; height: 40px; font-size: 13px; border: 0; box-shadow: none; border-radius: 999px; }
.ppv-card .btn:hover { transform: none; background: var(--purple-deep); }
.ppv-card .btn svg { width: 12px; height: 12px; }
.chat-mock .typing { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 11.5px; color: var(--muted); }
.chat-mock .typing svg { width: 14px; height: 14px; color: var(--muted-2); }
.sold { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; height: 32px; padding: 0 12px; border-radius: 10px; background: #E8F7EE; color: #22784A; font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease) .1s, transform .6s var(--ease) .1s; align-self: flex-end; }
.sold.in { opacity: 1; transform: none; }

/* campaign bars */
.bars { margin-top: 8px; }
.bar { padding: 12px 0; border-bottom: 1px solid var(--hair); }
.bar .l { display: flex; justify-content: space-between; font-size: 13.5px; }
.bar .l b { font-weight: 600; }
.bar .l span { color: var(--muted); font-size: 12px; margin-left: 4px; }
.bar .track { height: 4px; border-radius: 2px; background: var(--lav-2); margin-top: 8px; overflow: hidden; }
.bar .fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--purple-soft), var(--purple)); width: 0; transition: width 1.4s var(--ease); }
.in .bar .fill { width: var(--w); }
.seg { display: flex; gap: 6px; padding: 14px 0 12px; }
.seg span { height: 30px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 8px; border: 1px solid var(--hair-2); font-size: 12px; color: var(--muted); }
.seg span.on { background: var(--purple-tint); border-color: transparent; color: var(--purple-ink); }

/* voice cards (feature 06) */
.voice-stack { display: grid; gap: 16px; width: min(100%, 420px); }
.voice-stack .card { padding: 20px; font-size: 13.5px; }
.voice-stack .card .ch { font-size: 14px; }
.voice-stack q { display: block; margin-top: 12px; color: var(--ink-2); line-height: 1.5; font-style: normal; }
.rules li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hair); font-size: 13.5px; }
.rules li svg { width: 14px; height: 14px; color: var(--purple); flex: none; }
.rules li.add { color: var(--purple); font-weight: 600; border-bottom: 0; }

/* content feature (05) */
.content-art { display: grid; gap: 12px; width: min(100%, 440px); }
.content-art .stream { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 16/10; box-shadow: var(--shadow); }
.content-art .stream img { width: 100%; height: 100%; object-fit: cover; }
.content-art .stream .live { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; font-weight: 600; }
.content-art .stream .live i { width: 6px; height: 6px; border-radius: 50%; background: #FF4D6D; }
.content-art .stream .att { position: absolute; right: 12px; bottom: 12px; height: 24px; padding: 0 8px; border-radius: 6px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; display: grid; place-items: center; }
.content-art .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.content-art .chips span { height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 8px; background: #fff; border: 1px solid var(--hair); font-size: 11.5px; color: var(--ink-2); box-shadow: var(--shadow-sm); }
.content-art .chips span.hot { background: var(--purple-tint); border-color: transparent; color: var(--purple-ink); font-weight: 600; }
.bundle { display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-size: 13px; }
.bundle .thumbs { display: flex; }
.bundle .thumbs img { width: 30px; height: 38px; border-radius: 6px; object-fit: cover; border: 2px solid #fff; margin-left: -10px; }
.bundle .thumbs img:first-child { margin-left: 0; }
.bundle b { display: block; font-weight: 600; }
.bundle span { font-size: 12px; color: var(--muted); }
.bundle .amt { margin-left: auto; font-family: var(--font-display); font-weight: 600; font-size: 20px; }

/* ---------- who does what ---------- */
.ywu { display: grid; grid-template-columns: 1fr 1.6fr; border-top: 1px solid var(--hair); }
.ywu-col { padding: 32px 0; }
.ywu-col + .ywu-col { padding-left: 40px; border-left: 1px solid var(--hair); }
.ywu-col .ch { display: flex; align-items: center; gap: 12px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); padding-bottom: 20px; border-bottom: 1px solid var(--hair); }
.ywu-col .ch .n { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--hair-2); display: grid; place-items: center; font-size: 11px; color: var(--purple); }
.ywu-col .ch .note { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--muted-2); font-size: 12px; }
.ywu-you { position: relative; padding: 32px 0 0; }
.ywu-you::before { content: ''; position: absolute; left: -24px; right: 24px; top: 24px; bottom: -8px; background: var(--plate); border-radius: 16px; z-index: -1; opacity: .8; }
.ywu-you .h3 { font-size: clamp(26px, 2.6vw, 36px); max-width: 9em; }
.ywu-you .h3 + .h3 { margin-top: 24px; color: var(--purple); }
.ywu-you .script { display: block; margin-top: 56px; }
.ywu-us li { display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--hair); }
.ywu-us .ic { width: 40px; height: 40px; border-radius: 10px; background: #fff; border: 1px solid var(--hair); display: grid; place-items: center; color: var(--purple); box-shadow: var(--shadow-sm); }
.ywu-us .ic svg { width: 16px; height: 16px; }
.ywu-us b { display: block; font-weight: 500; font-size: 17px; }
.ywu-us span { font-size: 13px; color: var(--muted); }
.ywu-us .n { font-size: 11px; color: var(--muted-2); letter-spacing: .08em; }

/* ---------- audience switch (who it's for) ---------- */
.aud-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 56px; }
.aud { display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.aud-btn { height: 44px; padding: 0 24px; border-radius: 999px; font-weight: 500; font-size: 15px; color: var(--ink-2); transition: background .25s, color .25s, transform .25s var(--ease); white-space: nowrap; }
.aud-btn:hover { color: var(--ink); background: var(--lav-soft); }
.aud-btn[aria-selected="true"] { background: var(--yellow-deep); color: var(--ink); }
.aud-panel[hidden] { display: none; }

/* ---------- cards grid (who it's for) ---------- */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.tile { background: #fff; border: 1px solid var(--hair); border-radius: var(--r); padding: 28px; box-shadow: var(--shadow-sm); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; position: relative; overflow: hidden; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--hair-2); }
.tile .n { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--purple); }
.tile .h4 { margin-top: 16px; }
.tile p { margin-top: 12px; font-size: 15px; color: var(--muted); line-height: 1.55; }
.tile .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--purple-tint); color: var(--purple); display: grid; place-items: center; }
.tile .ic svg { width: 18px; height: 18px; }
.tile .ic + .h4 { margin-top: 20px; }

/* ---------- compare (choose how you grow) ---------- */
.compare { display: grid; grid-template-columns: 1fr 1.05fr 1fr; gap: 16px; align-items: stretch; }
.cmp { background: #fff; border: 1px solid var(--hair); border-radius: 20px; padding: 32px 28px; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.cmp .n { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.cmp .h3 { margin-top: 20px; font-size: clamp(24px, 2.2vw, 30px); }
.cmp .tag { margin-top: 10px; font-size: 15px; color: var(--muted); }
.cmp ul { margin-top: 24px; border-top: 1px solid var(--hair); }
.cmp li { padding: 14px 0; border-bottom: 1px solid var(--hair); font-size: 15px; display: flex; align-items: center; gap: 10px; }
.cmp li svg { width: 14px; height: 14px; flex: none; color: var(--purple); }
.cmp .foot { margin-top: auto; padding-top: 32px; font-size: 12.5px; color: var(--muted); }
.cmp.hi { background: var(--pink-2); color: var(--ink); border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--lav-2); transform: translateY(-8px); }
.cmp.hi .h3 { color: var(--purple); }
.cmp.hi .n { color: var(--ink); display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: var(--pink-pill); align-self: flex-start; }
.cmp.hi .tag { color: var(--ink-2); }
.cmp.hi ul, .cmp.hi li { border-color: rgba(4,8,13,.12); }
.cmp.hi .btn { margin-top: 32px; }
.compare-foot { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 48px; flex-wrap: wrap; }
.compare-foot p { color: var(--muted); font-size: var(--fs-lead); }

/* ---------- creators ---------- */
.stories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.story { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 4/5; background: var(--app-dark); box-shadow: var(--shadow); cursor: pointer; border: 8px solid #fff; }
.story img, .story video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.story:hover img { transform: scale(1.03); }
.story .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,8,13,0) 50%, rgba(4,8,13,.6) 100%); display: flex; align-items: flex-end; justify-content: space-between; padding: 24px; color: #fff; transition: opacity .4s, visibility .4s; }
.story.playing .veil { opacity: 0; visibility: hidden; }
.story .veil b { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; display: block; }
.story .veil span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.story .play { width: 56px; height: 56px; border-radius: 50%; background: var(--purple); display: grid; place-items: center; color: #fff; flex: none; transition: transform .4s var(--ease); }
.story .play svg { width: 16px; height: 16px; margin-left: 2px; }
.story:hover .play { transform: scale(1.08); }
.story-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: stretch; }
.photo-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.photo-tile { border-radius: 6px; overflow: hidden; aspect-ratio: .9; position: relative; border: 8px solid #fff; box-shadow: var(--shadow); }
.photo-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.photo-tile:hover img { transform: scale(1.04); }

/* ---------- results ---------- */
.results { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.res { background: #fff; border-radius: var(--r); padding: 28px; box-shadow: var(--shadow-sm); border: 1px solid var(--hair); }
.res .lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--on-dark-muted); font-weight: 600; }
.res .num { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 4.4vw, 64px); letter-spacing: -.04em; line-height: 1; margin-top: 24px; font-variant-numeric: tabular-nums; }
.res .num { color: var(--purple); }
.res .num small { font-size: .5em; color: var(--purple-soft); }
.res .sub { margin-top: 12px; font-size: 14px; color: var(--on-dark-muted); }
.res svg { width: 100%; height: 88px; margin-top: 24px; }
.spark path.line { fill: none; stroke: var(--purple); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; transition: stroke-dashoffset 1.8s var(--ease-io); }
.spark path.area { fill: url(#sparkFill); opacity: 0; transition: opacity 1s .6s; }
.spark circle { fill: var(--purple); opacity: 0; transition: opacity .4s 1.6s; }
.in .spark path.line { stroke-dashoffset: 0; }
.in .spark path.area { opacity: 1; }
.in .spark circle { opacity: 1; }
.results-note { margin-top: 48px; font-size: 12px; color: var(--on-dark-muted); }

/* ---------- pricing ---------- */
.price-plate { border: 2px solid var(--ink); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 8px 8px 0 var(--yellow-deep); display: grid; grid-template-columns: 1fr 2.2fr; }
.price-start { background: var(--plate); padding: 40px; border-right: 1px solid var(--hair); position: relative; }
.price-start .lbl, .price-main .lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--purple-ink); }
.price-start .big { font-family: var(--font-display); font-weight: 600; font-size: clamp(64px, 7vw, 104px); letter-spacing: -.05em; line-height: 1; color: var(--purple-ink); margin-top: 24px; }
.price-start .sub { color: var(--muted); font-size: 14px; }
.price-start p { margin-top: 24px; font-size: 14px; color: var(--muted); max-width: 16em; }
.price-start .script { display: block; margin-top: 48px; font-size: 24px; transform: rotate(-4deg); transform-origin: left; }
.price-main { padding: 40px; }
.price-main .ph { display: flex; justify-content: space-between; align-items: center; }
.price-main .range { font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 4.8vw, 68px); letter-spacing: -.04em; line-height: 1; color: var(--purple-ink); margin-top: 20px; display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.price-main .range i { font-style: normal; color: var(--purple-soft); font-weight: 500; }
.price-main .range .hl { color: var(--ink); }
.price-main .range small { font-size: 15px; letter-spacing: 0; color: var(--muted); font-family: var(--font-body); font-weight: 400; }
.price-main .note { margin-top: 16px; font-size: 14px; color: var(--muted); }
.price-share { display: grid; grid-template-columns: 32px 1fr; gap: 16px; padding-top: 32px; margin-top: 32px; border-top: 1px solid var(--hair); }
.price-share .ic { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--hair-2); display: grid; place-items: center; color: var(--purple); }
.price-share .ic svg { width: 12px; height: 12px; }
.price-share .val { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: -.02em; color: var(--purple-ink); margin-top: 8px; }
.price-share p { font-size: 14px; color: var(--muted); margin-top: 8px; }
.price-foot { grid-column: 1 / -1; border-top: 1px solid var(--hair); background: var(--bg); padding: 24px 40px; display: flex; align-items: center; gap: 16px; }
.price-foot .ic { width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--hair); display: grid; place-items: center; color: var(--purple); background: #fff; flex: none; }
.price-foot .ic svg { width: 16px; height: 16px; }
.price-foot b { display: block; font-weight: 600; }
.price-foot span { font-size: 14px; color: var(--muted); }
.price-foot .btn { margin-left: auto; }
.price-legal { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 24px; font-size: 12.5px; color: var(--muted-2); flex-wrap: wrap; }

.fee-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--hair); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-sm); }
.fee-table th, .fee-table td { text-align: left; padding: 20px 32px; border-bottom: 1px solid var(--hair); font-size: 16px; }
.fee-table th { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; background: var(--bg-2); }
.fee-table tr:last-child td { border-bottom: 0; }
.fee-table td:last-child, .fee-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.fee-table td:last-child { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; color: var(--purple-ink); }
.fee-table tbody tr { transition: background .25s; }
.fee-table tbody tr:hover { background: var(--purple-tint); }
.fee-wrap { max-width: 800px; margin: 0 auto; }
.fee-wrap .sec-head { margin-bottom: 32px; }

/* ---------- timeline (getting started) ---------- */
.tl-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.tl-grid .sticky { position: sticky; top: calc(var(--nav-h) + 32px); }
.timeline { position: relative; padding-left: 40px; }
.timeline::before { content: ''; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; background: var(--hair-2); border-radius: 2px; }
.timeline::after { content: ''; position: absolute; left: 11px; top: 12px; width: 2px; height: var(--progress, 0%); background: var(--purple); border-radius: 2px; transition: height .3s linear; }
.step { position: relative; padding: 0 0 48px; }
.step:last-child { padding-bottom: 0; }
.step::before { content: ''; position: absolute; left: -40px; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: #fff; border: 2px solid var(--hair-2); transition: border-color .4s, box-shadow .4s, transform .4s var(--ease); }
.step.on::before { border-color: var(--ink); background: var(--yellow-deep); box-shadow: 0 0 0 6px var(--yellow-soft); transform: scale(1.05); }
.step .time { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: var(--purple); }
.step .owner { height: 24px; padding: 0 10px; border-radius: 8px; background: var(--purple-tint); color: var(--purple-ink); font-size: 11px; letter-spacing: .02em; text-transform: none; font-weight: 500; display: inline-grid; place-items: center; }
.step .h4 { margin-top: 12px; font-size: clamp(20px, 1.8vw, 24px); }
.step p { margin-top: 10px; font-size: 15.5px; color: var(--muted); max-width: 30em; }
.gs-list { margin-top: 32px; }
.gs-list li { display: flex; gap: 16px; padding: 12px 0; font-size: 16px; }
.gs-list li b { color: var(--purple); font-size: 12px; font-weight: 600; letter-spacing: .06em; min-width: 20px; padding-top: 4px; }
.control-note { margin-top: 32px; font-size: 13px; color: var(--muted); max-width: 60em; }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.faq-grid .sec-head { margin-bottom: 0; }
.faq-grid .sticky { position: sticky; top: calc(var(--nav-h) + 32px); }
.faq-grid .play-btn { margin-top: 32px; }
.faq { border-top: 1px solid var(--hair); }
.faq-item { border-bottom: 1px solid var(--hair); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; text-align: left; font-size: 18px; font-weight: 500; color: var(--ink); transition: color .2s; }
.faq-q:hover { color: var(--purple-ink); }
.faq-q .pm { width: 24px; height: 24px; flex: none; position: relative; color: var(--purple); }
.faq-q .pm::before, .faq-q .pm::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; background: currentColor; border-radius: 2px; transform: translate(-50%, -50%); transition: transform .4s var(--ease); }
.faq-q .pm::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item.open .faq-q .pm::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.faq-a > div { overflow: hidden; }
.faq-a p { padding: 0 48px 24px 0; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 40em; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }

/* ---------- demo form (closing block A) ---------- */
.review { background: linear-gradient(120deg, var(--pink) 0%, var(--pink-soft) 50%, var(--lav-soft) 100%); }
.review-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 96px); align-items: start; }
.review-copy .eyebrow { margin-bottom: 24px; }
.review-copy .lead { margin-top: 24px; }
.review-copy .script { display: block; margin-top: 40px; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.3; }
.rv-card { display: grid; gap: 20px; }
.rv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.rv-field { display: grid; gap: 8px; }
.rv-field.rv-wide { grid-column: 1 / -1; }
.rv-field label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.rv-field input, .rv-field select { height: 56px; width: 100%; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 10px; background: #fff; font: inherit; font-size: 15px; color: var(--ink); transition: border-color .2s, box-shadow .2s, background .2s; appearance: none; -webkit-appearance: none; }
.rv-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2304080D' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; padding-right: 44px; }
.rv-field input::placeholder { color: var(--muted-2); }
.rv-field input:focus, .rv-field select:focus { outline: 0; border-color: var(--purple); box-shadow: 0 0 0 4px rgba(108,92,231,.18); background: #fff; }
.rv-field.bad input, .rv-field.bad select { border-color: #D64560; box-shadow: 0 0 0 4px rgba(214,69,96,.12); }
.rv-pot { position: absolute; left: -9999px; }
.rv-note { font-size: 13px; color: var(--muted); }
.rv-status { font-size: 14px; color: var(--purple-ink); min-height: 1.4em; }
.rv-card.sent .rv-grid, .rv-card.sent .rv-submit, .rv-card.sent .rv-note { display: none; }
.rv-card.sent .rv-status { font-size: 18px; }

/* ---------- final CTA (closing block B) ---------- */
.final { position: relative; overflow: clip; padding: clamp(80px, 10vw, 144px) 0; }
.final .photo { position: absolute; right: 0; top: 0; bottom: 0; width: 48%; }
.final .photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.final .photo::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(220,211,246,.6) 0%, rgba(220,211,246,.15) 40%, rgba(220,211,246,0) 100%); mix-blend-mode: multiply; z-index: 1; }
.final .photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--lav) 0%, rgba(220,211,246,0) 50%); z-index: 1; }
.final .photo .script { position: absolute; right: 12%; top: 46%; color: #fff; font-size: clamp(22px, 2.2vw, 30px); transform: rotate(-8deg); z-index: 2; text-shadow: 0 2px 12px rgba(4,8,13,.5); }
.final .wrap { position: relative; z-index: 2; }
.final .h-display { max-width: 9em; font-size: clamp(44px, 6.4vw, 92px); }
.final .lead { margin-top: 24px; color: var(--on-dark-muted); max-width: 26em; }
.final .btn { margin-top: 40px; --btn-bg: var(--yellow-deep); --btn-fg: var(--ink); }
.final .foot { margin-top: 24px; font-size: 13px; color: var(--on-dark-muted); }

/* the hero language, borrowed lightly: one floating card cluster on the seam
   and a script note pointing at the button. Same .fcard shell as the hero. */
.final .final-art { position: absolute; left: 46%; top: 0; bottom: 0; width: 32%; z-index: 3; pointer-events: none; }
.final .final-art > * { position: absolute; }
.final .fcard.toggle { left: 8%; top: 22%; }
.final .fcard.night { left: 0; top: 40%; width: 232px; padding: 16px; background: var(--purple); color: #fff; border-color: rgba(255,255,255,.12); }
.final .fcard.night .lbl { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75); display: flex; justify-content: space-between; }
.final .fcard.night .val { font-family: var(--font-display); font-weight: 600; font-size: 28px; letter-spacing: -.03em; margin-top: 8px; }
.final .fcard.night svg { width: 100%; height: 40px; margin-top: 8px; }
.final .fcard.night .note { font-size: 11px; color: rgba(255,255,255,.75); margin-top: 8px; }
.final-cta { display: flex; align-items: center; gap: 72px; flex-wrap: wrap; }
.final-cta .btn { margin-top: 40px; }
.final-note { position: relative; margin-top: 48px; font-family: var(--font-script); font-weight: 600; font-size: clamp(18px, 1.8vw, 24px); color: var(--purple); transform: rotate(-4deg); }
.final-note svg { position: absolute; right: 104%; top: 24%; width: 48px; height: 32px; color: var(--purple-soft); }
.final-art .fcard { opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.final-art.in .fcard { opacity: 1; transform: none; }
.final-art.in .fcard.toggle { transition-delay: .1s; }
.final-art.in .fcard.night { transition-delay: .25s; }

/* ---------- footer (closing block C) ---------- */
.footer { padding: 64px 0 40px; border-top: 2px solid var(--ink); background: var(--bg); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; }
.footer .brand img { height: 28px; }
.footer .brand p { margin-top: 20px; font-size: 14px; color: var(--muted); max-width: 18em; }
.footer .col b { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 20px; }
.footer .col a, .footer .col button { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; color: var(--ink-2); padding: 6px 0; transition: color .2s; }
.footer .col a:hover, .footer .col button:hover { color: var(--purple); }
.footer .col a svg { width: 10px; height: 10px; }
.footer-legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--hair); display: flex; justify-content: space-between; gap: 24px; font-size: 12.5px; color: var(--muted-2); flex-wrap: wrap; }
.footer-legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- cookie bar ---------- */
.cookiebar { position: fixed; left: 24px; bottom: 24px; z-index: 80; width: min(440px, calc(100% - 48px)); background: #fff; border: 1px solid var(--hair); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 20px; transform: translateY(0); transition: transform .32s var(--ease), opacity .32s, visibility 0s; }
/* stays display:block so it can slide, but goes visibility:hidden once the fade ends
   so its buttons leave the tab order and the accessibility tree */
.cookiebar[hidden] { display: block; opacity: 0; transform: translateY(24px); pointer-events: none; visibility: hidden; transition: transform .32s var(--ease), opacity .32s, visibility 0s linear .32s; }
.cb-title { font-weight: 600; font-size: 15px; }
.cb-text { font-size: 13.5px; color: var(--muted); margin-top: 6px; }
.cb-actions { display: flex; gap: 8px; margin-top: 16px; }
.cb-btn { height: 40px; border-width: 1.5px; }
.cb-btn:not(.cb-yes) { --btn-bg: #fff; --btn-fg: var(--ink); }
.cb-btn:not(.cb-yes):hover { background: var(--lav-soft); }
/* While the cookie card is up it sits over the bottom of the page, and on a phone
   it is taller than the footer's last rows, so the legal links (2257 Statement,
   CCBill requires it readable without dismissing anything) would stay under it
   even at full scroll. Give the page enough runway to scroll them clear. */
html:has(.cookiebar:not([hidden])) .footer { padding-bottom: 280px; }
@media (max-width: 640px) { html:has(.cookiebar:not([hidden])) .footer { padding-bottom: 360px; } }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(4,8,13,.85); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 24px; opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
/* visible straight away on open so the close button can take focus; the base
   rule keeps the .35s visibility delay for the fade out */
.lightbox.open { opacity: 1; visibility: visible; transition: opacity .35s, visibility 0s; }
.lightbox video { width: min(100%, 960px); max-height: 85vh; border-radius: 16px; background: #000; box-shadow: var(--shadow-lg); transform: scale(.96); transition: transform .5s var(--ease); }
.lightbox.open video { transform: scale(1); }
.lightbox .close { position: absolute; top: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; display: grid; place-items: center; transition: background .2s; }
.lightbox .close:hover { background: rgba(255,255,255,.22); }
.lightbox .close svg { width: 16px; height: 16px; }

/* ---------- reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); transition-delay: calc(var(--ri, 0) * 90ms); will-change: opacity, transform; }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal="scale"] { transform: translateY(16px) scale(.97); }
[data-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
[data-stagger].in > * { opacity: 1; transform: none; }
[data-stagger].in > :nth-child(1) { transition-delay: 0ms; }
[data-stagger].in > :nth-child(2) { transition-delay: 80ms; }
[data-stagger].in > :nth-child(3) { transition-delay: 160ms; }
[data-stagger].in > :nth-child(4) { transition-delay: 240ms; }
[data-stagger].in > :nth-child(5) { transition-delay: 320ms; }
[data-stagger].in > :nth-child(6) { transition-delay: 400ms; }
[data-stagger].in > :nth-child(7) { transition-delay: 480ms; }
[data-stagger].in > :nth-child(8) { transition-delay: 560ms; }
[data-stagger].in > :nth-child(9) { transition-delay: 640ms; }
/* the hero plays on load, no scroll needed */
.hero [data-reveal] { transition-delay: calc(var(--ri, 0) * 110ms + 80ms); }
.hero-art .fcard, .hero-art .hero-note { opacity: 0; transform: translateY(24px) scale(.96); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.hero-art.in .fcard, .hero-art.in .hero-note { opacity: 1; transform: none; }
.hero-art.in .fcard.toggle { transition-delay: .5s; }
.hero-art.in .fcard.revenue { transition-delay: .65s; }
.hero-art.in .fcard.chat { transition-delay: .8s; }
.hero-art.in .fcard.ppv { transition-delay: .95s; }
.hero-art.in .hero-note { transition-delay: 1.2s; }
.hero-art .polaroids { opacity: 0; transform: translateY(32px); transition: opacity 1s var(--ease) .25s, transform 1s var(--ease) .25s; }
.hero-art.in .polaroids { opacity: 1; transform: none; }
/* the floaters keep drifting once they are in */
.hero-art.in.settled .fcard { animation: drift 7s ease-in-out infinite alternate; }
.hero-art.in.settled .fcard.revenue { animation-duration: 8.5s; animation-delay: -2s; }
.hero-art.in.settled .fcard.chat { animation-duration: 9s; animation-delay: -4s; }
.hero-art.in.settled .fcard.ppv { animation-duration: 7.5s; animation-delay: -1s; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -8px, 0); } }

/* count-up numbers hold their width so the row does not jitter */
[data-count] { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  [data-reveal], [data-stagger] > *, .hero-art .fcard, .hero-art .hero-note, .hero-art .polaroids, .final-art .fcard, .msg, .ppv-card, .sold { opacity: 1 !important; transform: none !important; }
  .spark path.line { stroke-dashoffset: 0 !important; }
  .spark path.area, .spark circle { opacity: 1 !important; }
  .in .bar .fill { width: var(--w); }
}

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 64px; }
  .hero-art { margin: 0 auto; max-width: 560px; }
  .compare { grid-template-columns: 1fr; }
  .cmp.hi { transform: none; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .results { grid-template-columns: repeat(2, 1fr); }
  .price-plate { grid-template-columns: 1fr; }
  .price-start { border-right: 0; border-bottom: 1px solid var(--hair); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .story-grid { grid-template-columns: 1fr; }
  .dash { grid-template-columns: 1fr; }
  .dash-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px; padding: 8px; }
  .dash-side .logo { margin: 0 8px; }
  .dash-side .lbl, .dash-side .live { display: none; }
}
@media (max-width: 980px) {
  :root { --nav-h: 72px; }
  .nav-links { position: absolute; top: calc(100% + 2px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 4px; padding: 16px 24px 24px; background: var(--bg); border-bottom: 1px solid var(--hair); box-shadow: var(--shadow); transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform .35s var(--ease), opacity .3s, visibility .3s; }
  .nav.open .nav-links { transform: none; opacity: 1; visibility: visible; }
  .nav-links a { padding: 14px 12px; font-size: 17px; }
  .nav-links a[aria-current="page"]::after { display: none; }
  .nav-burger { display: grid; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head .aside { text-align: left; }
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 40px; }
  .feature.flip .f-copy { order: 0; }
  .ywu { grid-template-columns: 1fr; }
  .ywu-col + .ywu-col { padding-left: 0; border-left: 0; border-top: 1px solid var(--hair); }
  .ywu-you::before { left: -16px; right: -16px; }
  .tl-grid, .faq-grid, .review-grid, .platform-grid { grid-template-columns: 1fr; }
  .platform-cap { grid-column: 1; }
  .tl-grid .sticky, .faq-grid .sticky { position: static; }
  .statband .wrap { grid-template-columns: repeat(3, 1fr); }
  .logo-row { grid-template-columns: repeat(3, 1fr); }
  .statband .textlink { grid-column: 1 / -1; justify-self: center; }
  .final .photo { width: 100%; opacity: .25; }
  .aud-head { margin-bottom: 40px; }
  .final .photo .script { display: none; }
  .final .final-art { left: auto; right: 0; top: auto; bottom: 40px; width: 48%; height: 200px; }
  .final .fcard.toggle { left: auto; right: 8%; top: 0; }
  .final .fcard.night { left: auto; right: 0; top: 72px; width: 100%; }
  .grid-3 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero { padding-top: 24px; }
  .hero-copy .eyebrow { margin-bottom: 24px; }
  .hero-ctas { gap: 16px; }
  .hero-art { aspect-ratio: 1.05; }
  .polaroids { left: 18%; top: 8%; width: 58%; }
  .fcard.chat, .hero-note, .hero-caption { display: none; }
  .final .final-art { display: none; }
  .final-cta { gap: 16px; }
  .final-note { margin-top: 8px; margin-left: 56px; }
  .fcard.revenue { width: 44%; right: 0; top: 0; padding: 14px; }
  .fcard.toggle { left: 0; top: 4%; }
  .fcard.ppv { width: 60%; right: 0; bottom: 8%; }
  .hero-pager { bottom: -6%; }
  .statband .wrap { grid-template-columns: 1fr 1fr; gap: 24px; }
  .statband .stat:nth-child(3) { grid-column: 1 / -1; }
  .logo-row { grid-template-columns: repeat(2, 1fr); }
  .grid-4, .grid-2, .stories, .photo-tiles, .results, .app-body { grid-template-columns: 1fr; }
  .app-live { display: none; }
  .app-pill { margin-inline: 0 auto; }
  .app-pill span:nth-child(n+4) { display: none; }
  .plist li { grid-template-columns: 1fr; gap: 2px; }
  .kpis { grid-template-columns: 1fr; }
  .dash-row { grid-template-columns: 1fr; }
  .rv-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .price-foot { flex-wrap: wrap; }
  .price-foot .btn { margin-left: 0; width: 100%; }
  .fee-table th, .fee-table td { padding: 16px 20px; }
  .faq-q { font-size: 16px; }
  .cookiebar { left: 16px; bottom: 16px; width: calc(100% - 32px); }
  .cb-actions { flex-direction: column; }
  .aud { width: 100%; }
  .aud-btn { flex: 1; padding: 0 12px; font-size: 14px; }
  .convo { flex-wrap: wrap; }
  .convo .btn { margin-left: 0; width: 100%; }
}


/* =====================================================================
   LEGAL PAGES — terms.html, privacy.html
   Long-form contracts in the site's voice: cream paper, a marker headline,
   the text on one white slab. Deliberately quieter than the landing
   sections, no doodles and no reveal on the body copy, because a contract
   has to read with JavaScript off and on paper. Measure capped near 75ch.
   Only tokens defined above are used, so a palette change carries over.
   Assembled by tools/build-legal.py from tools/pages-legal/*.html.
   ===================================================================== */
.lg { padding-block: clamp(40px, 4.4vw, 72px) clamp(56px, 7vw, 104px); }
.lg-head { text-align: center; max-width: 820px; margin: 0 auto clamp(32px, 3.4vw, 48px); }
.lg-head .eyebrow { margin-bottom: 24px; }
.lg-head h1 { font-size: clamp(40px, 5vw, 68px); margin: 0; }
.lg-formal { font-family: var(--font-body); font-size: var(--fs-lead); color: var(--muted); margin: 24px 0 0; }
.lg-dates { font-family: var(--font-body); font-size: var(--fs-sm); color: var(--muted-2); margin: 8px 0 0; }
.lg-dates strong { font-weight: 600; color: var(--muted); }

/* Three tracks, two children: the empty third one is a counterweight for the
   contents rail, so the slab sits on the page's centre line under the centred
   headline instead of ~140px right of it. It also holds the measure near 75ch,
   a full-width column at this size runs to ~95 characters a line. */
.lg-body {
  display: grid; grid-template-columns: 232px minmax(0, 744px) 232px;
  justify-content: center; gap: clamp(24px, 3.4vw, 56px); align-items: start;
}
@media (max-width: 1240px) {
  .lg-body { grid-template-columns: 232px minmax(0, 1fr); }
}

/* ---------- contents rail ---------- */
/* 24 sections is taller than a laptop viewport, so the rail scrolls inside
   itself; without the cap it sticks at the top and the last entries sit
   permanently under the fold with no way to reach them */
.lg-toc {
  position: sticky; top: calc(var(--nav-h) + 24px); font-family: var(--font-body);
  max-height: calc(100vh - var(--nav-h) - 48px); overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--hair) transparent;
}
.lg-toc::-webkit-scrollbar { width: 8px; }
.lg-toc::-webkit-scrollbar-thumb { background: var(--hair); border-radius: var(--r-pill); }
.lg-toc-t {
  font-family: var(--font-display); font-weight: 600; font-size: 11px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted-2);
  margin: 0 0 8px 16px;
}
.lg-toc ol { list-style: none; margin: 0; padding: 0; }
.lg-toc a {
  display: block; padding: 8px 0 8px 16px; font-size: var(--fs-xs); line-height: 1.35;
  color: var(--muted); border-left: 2px solid var(--hair);
  transition: color .12s ease, border-color .12s ease;
}
.lg-toc a:hover { color: var(--purple); border-left-color: var(--lav-2); }

/* ---------- the document slab ---------- */
.lg-doc {
  background: var(--white); border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: clamp(24px, 3vw, 56px) clamp(24px, 3.2vw, 56px);
}
.lg-doc h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(18px, 1.6vw, 24px); line-height: 1.22;
  letter-spacing: -.02em; margin: 0 0 16px;
}
/* the contents links target the section, not the heading, and the nav is
   sticky, so the jump would otherwise land the title under the nav bar */
.lg-sec { scroll-margin-top: calc(var(--nav-h) + 24px); }
.lg-doc p, .lg-doc li {
  font-size: clamp(14.5px, 1.02vw, 16px); line-height: 1.62; color: var(--ink-2);
}
.lg-doc p { margin: 0 0 16px; }
.lg-doc p:last-child { margin-bottom: 0; }
.lg-doc strong { font-weight: 600; }
.lg-doc a { color: var(--purple-deep); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: break-word; }
.lg-doc a:hover { color: var(--purple); }
/* one hairline between sections, like the fee table's rows */
.lg-sec + .lg-sec {
  margin-top: clamp(24px, 2.8vw, 40px);
  padding-top: clamp(24px, 2.6vw, 40px); border-top: 1px solid var(--hair);
}
/* a lettered clause, (a), (b) … carried inline by the source text */
.lg-doc p.cl { margin-top: 16px; }
/* several sections close with a paragraph that qualifies the list above it; the
   lists carry no bottom margin so a trailing list doesn't pad the section out */
.lg-doc ul + p, .lg-doc ol + p { margin-top: 16px; }
/* the all-caps disclaimer blocks: a notch smaller so a 600 character
   uppercase paragraph is still readable */
.lg-doc p.caps { font-size: clamp(13px, .92vw, 14.3px); line-height: 1.58; color: var(--muted); }
.lg-callout {
  background: var(--purple-tint); border-left: 3px solid var(--purple);
  border-radius: 0 var(--r) var(--r) 0; padding: 16px 24px; margin: 16px 0 0;
}

.lg-list { margin: 16px 0 0; padding-left: 24px; }
.lg-list > li { margin-top: 8px; }
.lg-list > li::marker { color: var(--purple); }
.lg-list > li > p { margin: 8px 0 0; }
/* the source sets these sub-items with an en dash, not a bullet */
.lg-sub { list-style: none; margin: 8px 0 0; padding: 0; }
.lg-sub > li { position: relative; padding-left: 16px; margin-top: 8px; }
.lg-sub > li::before { content: "–"; position: absolute; left: 0; color: var(--purple); }
/* (a) (b) (c) … numbered by CSS: every list in the .docx restarts its own
   counter, so Word renders them all as "(a)" */
.lg-alpha { list-style: none; margin: 16px 0 0; padding: 0; counter-reset: lgalpha; }
.lg-alpha > li { counter-increment: lgalpha; position: relative; padding-left: 32px; margin-top: 8px; }
.lg-alpha > li::before {
  content: "(" counter(lgalpha, lower-alpha) ")";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-body); font-weight: 600; font-size: .9em; color: var(--purple);
}

.lg-table-w { border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; margin: 16px 0 0; }
.lg-table { width: 100%; border-collapse: collapse; font-family: var(--font-body); font-size: var(--fs-sm); text-align: left; }
.lg-table th { background: var(--pink); font-weight: 600; }
.lg-table th, .lg-table td { padding: 16px; vertical-align: top; line-height: 1.45; }
.lg-table tbody tr + tr td, .lg-table tbody td { border-top: 1px solid var(--hair); }
.lg-table td:first-child { font-weight: 600; width: 34%; }

@media (max-width: 980px) {
  .lg-body { grid-template-columns: 1fr; }
  /* the rail becomes a box above the text; capped so 24 sections don't push
     the contract itself below two screens of links */
  .lg-toc {
    position: static; max-height: 208px; overflow-y: auto;
    background: var(--white); border-radius: var(--r); padding: 16px;
    box-shadow: var(--shadow); margin-bottom: 24px;
  }
  .lg-toc-t { margin-left: 0; }
}
@media (max-width: 600px) {
  .lg-doc { border-radius: var(--r); padding: 24px; }
  .lg-table th, .lg-table td { padding: 8px 16px; }
  .lg-table td:first-child { width: auto; }
}

/* scoped to the legal pages so printing a landing page is left alone */
@media print {
  body.legal .nav, body.legal .footer, body.legal .cookiebar, body.legal .lg-toc { display: none; }
  body.legal { background: var(--white); }
  body.legal .lg-doc { box-shadow: none; padding: 0; border-radius: 0; }
  body.legal .lg-sec { break-inside: avoid-page; }
  body.legal .lg-doc h2 { break-after: avoid-page; }
}

/* ---------- 18+ age gate ---------- */
/* Visible by default; the inline head script hides it before first paint when
   the visitor has already confirmed. Hidden under noscript so crawlers and
   no-JS visitors are not trapped behind buttons that cannot run. */
.agegate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; background: var(--plate); overflow-y: auto; transition: opacity .32s var(--ease); }
html[data-age="ok"] .agegate { opacity: 0; pointer-events: none; }
html[data-age="ask"] { overflow: hidden; }
.ag-card { width: min(480px, 100%); min-width: 0; background: #fff; border: 1px solid var(--hair); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 40px 32px 32px; text-align: center; }
.ag-card img { height: 24px; width: auto; margin: 0 auto 24px; display: block; }
.ag-title { font-family: var(--font-display); font-weight: 600; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; }
.ag-text { font-size: 15px; line-height: 1.55; color: var(--muted); margin-top: 16px; }
.ag-actions { display: grid; gap: 8px; margin-top: 32px; }
.ag-actions .btn { width: 100%; }
.ag-no { --btn-bg: #fff; --btn-fg: var(--ink); border-width: 1.5px; }
.ag-no:hover { background: var(--lav-soft); }
.ag-fine { font-size: 12.5px; line-height: 1.5; color: var(--muted); margin-top: 24px; }
.ag-fine a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.ag-deny { width: min(480px, 100%); min-width: 0; background: #fff; border: 1px solid var(--hair); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 40px 32px; text-align: center; }
.ag-deny .ag-text { margin-top: 8px; }
@media (max-width: 520px) { .ag-card { padding: 32px 24px 24px; } .ag-title { font-size: 22px; } }
/* while the gate is up nothing else is reachable, including the third party
   chat widget, which mounts its own fixed container outside our markup */
html[data-age="ask"] chat-widget,
html[data-age="ask"] [id*="lc_text-widget"],
html[data-age="ask"] iframe[src*="leadconnector"],
html[data-age="ask"] .cookiebar { display: none !important; }