/* Marti Fox sales page styles v3
 * Drop editorial-luxury. Drop CC-template.
 * New: warm-cream + light-pink + lavender + heavy animation.
 * Reference dossier: directives/clients/marti_fox/marti_fox_research_2026-05-30.md
 * Voice rules: no em dashes, identity-first, Marti first person.
 */


:root {
  /* Surface */
  --bg: #fffaf5;
  --bg-2: #fff1f1;            /* warm peach wash */
  --bg-3: #f7efff;            /* soft lavender wash */
  --bg-deep: #1a0d14;
  --ink: #1a0d14;
  --ink-2: rgba(26, 13, 20, 0.72);
  --ink-3: rgba(26, 13, 20, 0.5);
  --ink-mute: rgba(26, 13, 20, 0.38);
  --inv-ink: #fffaf5;

  /* Brand */
  --pink: #fcb6cf;            /* soft light pink */
  --pink-mid: #f59cbf;
  --pink-deep: #ec4899;       /* CTA pink */
  --pink-wash: rgba(252, 182, 207, 0.16);
  --pink-soft: #ffe0eb;
  --lavender: #c4b5fd;
  --lavender-deep: #8b5cf6;
  --lavender-wash: rgba(196, 181, 253, 0.18);
  --lavender-soft: #ede9fe;
  --cream: #fff5e6;
  --gold: #f5c06a;
  --rose: #ffd1dc;

  --hairline: rgba(26, 13, 20, 0.08);
  --hairline-2: rgba(26, 13, 20, 0.14);
  --surface: rgba(26, 13, 20, 0.03);

  /* Radii */
  --r-card: 28px;
  --r-card-inner: 22px;
  --r-pill: 999px;
  --r-input: 14px;

  /* Easings */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Type */
  --display: "Bricolage Grotesque", "Cabinet Grotesk", system-ui, sans-serif;
  --body: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --script: "Caveat", "Brush Script MT", cursive;
  --italic: "Instrument Serif", Georgia, serif;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html, body { overflow-x: clip; max-width: 100vw; }
/* Explicit touch-action on the page: only vertical pan + zoom. Rails opt into pan-x. iOS Safari respects this hard. */
html, body { touch-action: pan-y pinch-zoom; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* ---------- Animated gradient mesh (page bg) ---------- */
.mesh-bg {
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}
.mesh-blob {
  position: absolute;
  width: 700px; height: 700px;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.65;
  will-change: transform;
}
.mesh-blob.b1 { top: -20%; left: -10%; background: var(--pink); animation: float-a 22s var(--ease-soft) infinite; }
.mesh-blob.b2 { top: 30%; right: -15%; background: var(--lavender); animation: float-b 28s var(--ease-soft) infinite; }
.mesh-blob.b3 { bottom: -10%; left: 20%; background: var(--rose); animation: float-c 25s var(--ease-soft) infinite; opacity: 0.45; }

@keyframes float-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(180px, 120px) scale(1.08); } }
@keyframes float-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-160px, 200px) scale(1.12); } }
@keyframes float-c { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(220px, -80px) scale(0.95); } }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.container-narrow { max-width: 900px; }
section { padding: clamp(72px, 9vw, 130px) 0; position: relative; }

/* ---------- Typography ---------- */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; margin: 0 0 16px; letter-spacing: -0.02em; }

.h-mega {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(36px, 5.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  color: var(--ink);
}
.h-mega em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }

/* Hero per-word stagger entrance */
.h-mega-anim .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(22px);
  filter: blur(10px);
  animation: hero-word 900ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.h-mega-anim .w:nth-child(1)  { animation-delay: 0.05s; }
.h-mega-anim .w:nth-child(2)  { animation-delay: 0.12s; }
.h-mega-anim .w:nth-child(3)  { animation-delay: 0.19s; }
.h-mega-anim .w:nth-child(4)  { animation-delay: 0.26s; }
.h-mega-anim .w:nth-child(5)  { animation-delay: 0.33s; }
.h-mega-anim .w:nth-child(6)  { animation-delay: 0.40s; }
.h-mega-anim .w:nth-child(7)  { animation-delay: 0.47s; }
.h-mega-anim .w:nth-child(8)  { animation-delay: 0.54s; }
.h-mega-anim .w:nth-child(9)  { animation-delay: 0.62s; }
.h-mega-anim .w:nth-child(10) { animation-delay: 0.70s; }
.h-mega-anim .w:nth-child(11) { animation-delay: 0.78s; }
.h-mega-anim .w:nth-child(12) { animation-delay: 0.86s; }
.h-mega-anim .w.em-w em { display: inline-block; }
@keyframes hero-word {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@media (prefers-reduced-motion: reduce) {
  .h-mega-anim .w { animation: none; opacity: 1; transform: none; filter: none; }
}
/* "Your AI system" + "I install your system with you live" highlights — translucent lavender marker pen.
   Reverted to the lavender treatment per Brett ("change it back to what it was just make it a bit thinner"),
   but slimmer (60% of line height instead of original 78%) and more translucent (0.55 opacity instead of 0.85)
   so it reads like an actual highlighter stroke with text visible through it, not a solid block.
   em-w version starts at 700ms (after the per-word stagger lands), install version delays an extra 300ms (1000ms total). */
.h-mega-anim .em-w em,
.install-highlight {
  background-image: linear-gradient(180deg, transparent 22%, rgba(196, 181, 253, 0.55) 22%, rgba(196, 181, 253, 0.55) 82%, transparent 82%);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  padding: 0 5px;
  margin: 0 -5px;
}
.h-mega-anim .em-w em {
  animation: em-w-highlight-draw 760ms cubic-bezier(0.32, 0.72, 0, 1) 700ms 1 forwards;
}
.install-highlight {
  animation: em-w-highlight-draw 760ms cubic-bezier(0.32, 0.72, 0, 1) 1000ms 1 forwards;
}
@keyframes em-w-highlight-draw {
  0%   { background-size: 0% 100%; }
  100% { background-size: 100% 100%; }
}

h2.h-section {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 4.5vw, 56px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 20px;
  color: var(--ink);
}
h2.h-section em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
h2.h-section .script { font-family: var(--script); font-style: normal; font-weight: 700; color: var(--lavender-deep); font-size: 1.05em; line-height: 0.9; display: inline-block; }

h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.lead {
  font-family: var(--body);
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--ink-2);
  font-weight: 400;
  max-width: 58ch;
}
.lead.large { font-size: clamp(18px, 1.8vw, 22px); line-height: 1.45; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink-deep);
  padding: 7px 14px;
  background: var(--pink-wash);
  border: 1px solid var(--pink-soft);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.eyebrow .dot { width: 6px; height: 6px; border-radius: var(--r-pill); background: var(--pink-deep); animation: pulse 1.8s var(--ease-soft) infinite; }
.eyebrow.lavender { color: var(--lavender-deep); background: var(--lavender-wash); border-color: var(--lavender-soft); }
.eyebrow.lavender .dot { background: var(--lavender-deep); }

@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.7); } }

p { margin: 0 0 12px; }
strong { font-weight: 600; color: var(--ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body);
  font-weight: 600; font-size: 15px; line-height: 1;
  letter-spacing: 0.01em;
  padding: 18px 8px 18px 28px;
  border-radius: var(--r-pill);
  border: 0; cursor: pointer;
  text-decoration: none;
  background: var(--ink); color: var(--inv-ink);
  transition: transform 280ms var(--ease), background-color 280ms var(--ease), box-shadow 280ms var(--ease);
  box-shadow: 0 6px 20px -8px rgba(26, 13, 20, 0.4);
  will-change: transform;
}
.btn .arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: rgba(255, 250, 245, 0.16);
  margin-left: 4px;
  transition: transform 280ms var(--ease), background-color 280ms var(--ease);
}
.btn .arrow svg { width: 14px; height: 14px; stroke: var(--inv-ink); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 14px 32px -8px rgba(26, 13, 20, 0.5); }
.btn:hover .arrow { background: rgba(255, 250, 245, 0.28); transform: translate(3px, -1px) scale(1.06); }
.btn:active { transform: translateY(0); }

.btn.pink { background: linear-gradient(135deg, #ff5fa6 0%, var(--pink-deep) 52%, #d8327d 100%); background-size: 200% 200%; color: #fff; box-shadow: 0 8px 28px -6px rgba(236, 72, 153, 0.55); }
.btn.pink:hover { box-shadow: 0 16px 42px -8px rgba(236, 72, 153, 0.78), 0 0 26px 2px rgba(236, 72, 153, 0.32); }
.btn.pink.cta-pulse { animation: cta-glow 2.6s ease-in-out infinite; }
@keyframes cta-glow {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 8px 28px -6px rgba(236, 72, 153, 0.55); }
  50%      { background-position: 100% 50%; box-shadow: 0 12px 40px -6px rgba(236, 72, 153, 0.85), 0 0 28px 5px rgba(236, 72, 153, 0.32); }
}
@media (prefers-reduced-motion: reduce) { .btn.pink.cta-pulse { animation: none; } }

.btn.lavender { background: var(--lavender-deep); color: #fff; box-shadow: 0 6px 24px -6px rgba(139, 92, 246, 0.5); }
.btn.lavender:hover { box-shadow: 0 14px 36px -8px rgba(139, 92, 246, 0.7); }

.btn.ghost { background: rgba(255, 250, 245, 0.7); color: var(--ink); border: 1px solid var(--hairline-2); backdrop-filter: blur(12px); }
.btn.ghost .arrow { background: var(--surface); }
.btn.ghost .arrow svg { stroke: var(--ink); }
.btn.ghost:hover { background: #fff; }

.btn.lg { font-size: 16px; padding: 22px 10px 22px 32px; }
.btn.lg .arrow { width: 44px; height: 44px; }
.btn.sm { font-size: 13px; padding: 12px 6px 12px 18px; }
.btn.sm .arrow { width: 28px; height: 28px; }

/* ---------- Promo strip ---------- */
.promo-strip {
  background: linear-gradient(90deg, var(--pink-deep), var(--lavender-deep));
  color: #fff;
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em;
  position: relative; z-index: 30;
  white-space: nowrap;
  overflow: hidden;
  min-height: 48px;
  /* Logo + Marti pic are absolutely positioned at the edges; text is centered via flex.
     flex + align-items: center vertically centers the text within the 48px min-height. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.promo-strip > .promo-logo {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
}
.promo-strip > .promo-marti {
  position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
}
.promo-strip > .promo-text {
  display: block;
  text-align: center;
  padding: 0 64px; /* clear the absolutely-positioned logo (left) + Marti pic (right) */
}
@media (max-width: 720px) {
  /* With the white pill removed below, the logo is narrower — pull text padding tighter so banner copy gets more room. */
  .promo-strip > .promo-text { padding: 0 38px 0 36px; }
  .promo-strip > .promo-logo { left: 4px; }
  .promo-strip > .promo-marti { right: 8px; }
  /* Workshop-variant text was extending behind the InstaCEO logo at the left edge.
     Add explicit padding so centered text content stays clear of both logo and Marti pic. */
  .promo-strip .promo-text.promo-text-workshops { padding-left: 52px; padding-right: 40px; }
}
.promo-strip .promo-logo {
  display: inline-flex; align-items: center;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.92);
  border-radius: 999px;
  flex-shrink: 0;
}
.promo-strip .promo-logo img { height: 18px; width: auto; display: block; }
.promo-strip .promo-text { flex: 1 1 auto; text-align: center; overflow: hidden; text-overflow: ellipsis; }
.promo-strip .countdown { display: inline-flex; gap: 6px; margin-left: 6px; font-weight: 600; }
.promo-strip .promo-marti {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}
.promo-strip .promo-marti:hover { transform: scale(1.06); }
.promo-strip .promo-marti img {
  width: 36px; height: 36px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.25);
  display: block;
}

/* ---------- Nav ---------- */
.nav-wrap { position: sticky; top: 0; z-index: 40; padding: 8px 0; pointer-events: none; }
.nav-pill {
  pointer-events: auto;
  margin: 0 auto;
  width: max-content; max-width: calc(100% - 32px);
  display: inline-flex; align-items: center; gap: 16px;
  padding: 7px 7px 7px 18px;
  background: rgba(255, 250, 245, 0.55);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r-pill);
  box-shadow: 0 8px 32px -14px rgba(26, 13, 20, 0.18);
}
.nav-pill .brand {
  font-family: var(--display); font-weight: 700; font-size: 17px;
  letter-spacing: -0.02em; text-decoration: none; color: var(--ink);
}
.nav-pill .brand em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
.nav-pill .meta { font-size: 12px; color: var(--ink-mute); letter-spacing: 0.04em; }

/* ---------- Hero ---------- */
.hero {
  padding-top: clamp(18px, 2.5vw, 32px);
  padding-bottom: clamp(60px, 8vw, 100px);
}
.hero-text { text-align: center; max-width: 920px; margin: 0 auto; }
.hero-text .lead.large { margin-left: auto; margin-right: auto; max-width: 760px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(40px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; text-align: center; }
  .hero-grid .lead, .hero-grid .eyebrow { margin-left: auto; margin-right: auto; }
}
.hero-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 36px auto 0; align-items: center; justify-content: center; max-width: 640px; }
.trust-badge { margin-left: auto; margin-right: auto; }

.hero-photo {
  position: relative;
  width: 100%; max-width: 460px;
  aspect-ratio: 1; margin: 0 auto;
}
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
  border: 6px solid #fff;
  box-shadow:
    0 0 0 12px var(--pink-wash),
    0 30px 80px -20px rgba(236, 72, 153, 0.45),
    0 12px 32px -8px rgba(139, 92, 246, 0.25);
  position: relative; z-index: 2;
}
.hero-photo .sparkle {
  position: absolute;
  width: 60px; height: 60px;
  border-radius: 50%;
  z-index: 1;
}
.hero-photo .sparkle.s1 { top: -10px; right: 20px; background: var(--lavender); animation: bob 6s var(--ease-soft) infinite; }
.hero-photo .sparkle.s2 { bottom: 30px; left: -20px; background: var(--gold); animation: bob 7s var(--ease-soft) infinite reverse; }
.hero-photo .sparkle.s3 { top: 40%; right: -30px; width: 36px; height: 36px; background: var(--pink-deep); animation: bob 5.5s var(--ease-soft) infinite; }
@keyframes bob { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(8px, -16px); } }

.hero-photo .caption-tag {
  position: absolute; bottom: 8%; left: -8%;
  background: #fff;
  border-radius: var(--r-pill);
  padding: 12px 20px;
  font-family: var(--body); font-size: 13px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px;
  box-shadow: 0 14px 32px -10px rgba(26, 13, 20, 0.18);
  z-index: 3;
  animation: bob-tag 4s var(--ease-soft) infinite;
}
.hero-photo .caption-tag::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pink-deep); }
@keyframes bob-tag { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- Live join notification (bottom-left, auto-rotates) ---------- */
.join-notif {
  position: fixed; bottom: 20px; left: 20px; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 7px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  box-shadow:
    0 14px 36px -10px rgba(26, 13, 20, 0.22),
    0 4px 12px -4px rgba(236, 72, 153, 0.18);
  max-width: 260px;
  transform: translate(-110%, 0);
  opacity: 0;
  transition: transform 600ms var(--ease), opacity 400ms var(--ease);
  pointer-events: none;
  font-family: var(--body);
}
.join-notif.visible {
  transform: translate(0, 0);
  opacity: 1;
  pointer-events: auto;
}
.join-notif .avatar {
  width: 32px; height: 32px; border-radius: 50%;
  position: relative;
  background: linear-gradient(135deg, var(--pink), var(--lavender));
  display: grid; place-items: center;
  color: var(--ink);
  font-family: var(--display); font-weight: 700; font-size: 13px;
  border: 2px solid #fff;
  flex-shrink: 0;
}
.join-notif .avatar::after {
  content: ""; position: absolute; bottom: -2px; right: -2px;
  width: 12px; height: 12px;
  background: #22c55e; border: 2px solid #fff; border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
  animation: pulse-dot 2s var(--ease) infinite;
}
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2); } 50% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } }
.join-notif .text { line-height: 1.2; }
.join-notif .name {
  font-family: var(--display); font-weight: 700;
  font-size: 12.5px; color: var(--ink); letter-spacing: -0.01em;
}
.join-notif .action {
  font-size: 10.5px; color: var(--ink-mute);
  margin-top: 2px; letter-spacing: 0.02em;
}
.join-notif .action em { color: var(--pink-deep); font-style: normal; font-weight: 600; }
@media (max-width: 640px) {
  .join-notif { bottom: 16px; left: 16px; max-width: calc(100% - 32px); padding: 8px 16px 8px 8px; }
  .join-notif .avatar { width: 36px; height: 36px; font-size: 13px; }
  .join-notif .name { font-size: 13px; }
  .join-notif .action { font-size: 11px; }
}

/* ---------- Logo image (replaces text wordmark) ---------- */
.logo-img {
  display: block;
  height: 38px;
  width: auto;
  object-fit: contain;
}
.nav-pill .logo-img { height: 26px; }
.site-footer .logo-img { height: 44px; margin: 0 auto 8px; }

/* ---------- 4.9 star trust badge (hero) ---------- */
.trust-badge {
  display: inline-flex; align-items: center; gap: 14px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 8px 22px 8px 8px;
  margin-top: 24px;
  box-shadow: 0 10px 30px -12px rgba(26, 13, 20, 0.12);
}
.avatar-stack { display: inline-flex; }
.avatar-stack img {
  width: 36px; height: 36px; border-radius: 50%;
  border: 2.5px solid #fff;
  margin-right: -12px;
  box-shadow: 0 2px 8px rgba(26, 13, 20, 0.18);
  display: block;
}
.avatar-stack img:last-child { margin-right: 4px; }
.trust-badge .stars-row {
  font-size: 13px; color: var(--gold); letter-spacing: 2px; line-height: 1;
}
.trust-badge .stars-row strong {
  color: var(--ink); font-weight: 700;
  font-family: var(--display); font-size: 16px;
  margin-left: 4px; letter-spacing: 0;
}
.trust-badge .count-row { font-size: 11.5px; color: var(--ink-mute); margin-top: 4px; letter-spacing: 0.04em; }

/* ---------- Trust strip (logos / numbers) ---------- */
.trust-strip {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 28px 0;
}
.trust-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  align-items: center;
  text-align: center;
}
@media (max-width: 720px) { .trust-row { grid-template-columns: repeat(2, 1fr); gap: 32px 16px; } }
.trust-num { font-family: var(--display); font-weight: 700; font-size: clamp(26px, 3.5vw, 40px); letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.trust-num em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
.trust-label { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-top: 8px; }

/* ---------- Marquee strip ---------- */
.marquee {
  background: var(--ink);
  color: var(--inv-ink);
  padding: 18px 0;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-track {
  display: inline-flex; gap: 56px;
  animation: marquee 35s linear infinite;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: -0.01em;
}
.marquee-track em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink); }
.marquee-track .sep { color: var(--pink); }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- Manifesto / section card ---------- */
.section-band {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

/* ---------- 3-level path with phone mockup ---------- */
.path-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 880px;
  margin: 0 auto;
}
.path-list { display: flex; flex-direction: column; gap: 18px; }
.path-step {
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 24px 28px;
  /* minmax(0, 1fr) instead of `1fr` so the second column can shrink below content min-width — prevents path-step from overflowing parent on mobile when path-chips inside try to take their natural width */
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; align-items: start;
  cursor: pointer;
  transition: background-color 280ms var(--ease), transform 280ms var(--ease), border-color 280ms var(--ease), box-shadow 280ms var(--ease);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
@media (max-width: 480px) {
  .path-step { padding: 18px 16px; gap: 14px; }
}
.path-step:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -16px rgba(236, 72, 153, 0.15); }
.path-step.active { background: rgba(252, 182, 207, 0.18); border-color: var(--pink); box-shadow: 0 16px 40px -10px rgba(236, 72, 153, 0.22); }
.path-step .icon {
  width: 56px; height: 56px; border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--pink) 0%, var(--lavender) 100%);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 22px;
  box-shadow: 0 8px 20px -6px rgba(236, 72, 153, 0.3);
}
.path-step h3 { font-size: 19px; margin: 0 0 4px; }
.path-step p { font-size: 14.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }

/* phone mockup (ported from betterbets) */
.phone-frame {
  position: relative;
  width: 280px; height: 580px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 44px;
  padding: 12px;
  box-shadow:
    0 50px 80px -30px rgba(26, 13, 20, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 30px 60px -20px rgba(236, 72, 153, 0.35);
}
.phone-frame::after {
  content: ""; position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 26px; background: #000; border-radius: 14px;
  z-index: 3;
}
.phone-screen {
  background: var(--bg);
  border-radius: 32px;
  width: 100%; height: 100%;
  overflow: hidden;
  position: relative;
}
.phone-cards {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  animation: phone-cycle 15s var(--ease) infinite;
  will-change: transform;
}
.phone-card {
  flex-shrink: 0;
  width: 100%; height: 100%;
  padding: 48px 20px 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.phone-card.brand { background: linear-gradient(160deg, var(--pink-soft) 0%, #fff 60%); }
.phone-card.cowork { background: linear-gradient(160deg, var(--lavender-soft) 0%, #fff 60%); }
.phone-card.code { background: linear-gradient(160deg, #1a0d14 0%, #2a1623 60%); color: var(--inv-ink); }
.phone-card .label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pink-deep); font-weight: 700; }
.phone-card.code .label { color: var(--pink); }
.phone-card h4 { font-family: var(--display); font-weight: 700; font-size: 18px; margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
.phone-card.code h4 { color: var(--inv-ink); }
.phone-card .body { font-size: 12.5px; line-height: 1.5; color: var(--ink-2); }
.phone-card.code .body { color: rgba(255, 250, 245, 0.7); }
.phone-card .tile {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 11.5px; font-weight: 500;
  display: flex; align-items: center; gap: 8px;
}
.phone-card.code .tile { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.08); color: rgba(255, 250, 245, 0.85); }
.phone-card .tile .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink-deep); flex-shrink: 0; }
.phone-card.cowork .tile .dot { background: var(--lavender-deep); }
.phone-card.code .tile .dot { background: var(--gold); }

@keyframes phone-cycle {
  0%, 28% { transform: translateY(0%); }
  33%, 61% { transform: translateY(-100%); }
  66%, 94% { transform: translateY(-200%); }
  100% { transform: translateY(0%); }
}

/* ---------- Lessons carousel (horizontal scroll) ---------- */
.lessons-section { padding: clamp(72px, 9vw, 130px) 0 clamp(40px, 5vw, 60px); }
.lessons-rail {
  display: flex; gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 12px clamp(20px, 4vw, 48px) 40px;
  margin: 0 calc(clamp(20px, 4vw, 48px) * -1);
  scrollbar-width: thin;
}
.lessons-rail::-webkit-scrollbar { height: 8px; }
.lessons-rail::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 999px; }
.lesson-card {
  flex: 0 0 380px; scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 0; overflow: hidden;
  box-shadow: 0 20px 50px -25px rgba(26, 13, 20, 0.18);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.lesson-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -20px rgba(236, 72, 153, 0.25); }
.lesson-card .frame {
  background: var(--bg-2);
  aspect-ratio: 16/10;
  display: grid; place-items: center;
  position: relative; overflow: hidden;
}
.lesson-card .frame img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.lesson-card .meta { padding: 20px 24px 24px; }
.lesson-card .step-num { font-family: var(--italic); font-style: italic; color: var(--pink-deep); font-size: 22px; line-height: 1; }
.lesson-card h3 { margin: 6px 0 4px; font-size: 19px; }
.lesson-card p { font-size: 13.5px; color: var(--ink-2); margin: 0; line-height: 1.5; }
.lesson-card .badge {
  position: absolute; top: 16px; left: 16px;
  background: var(--gold); color: var(--ink);
  font-family: var(--body); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill);
  z-index: 3;
  box-shadow: 0 4px 12px -2px rgba(245, 192, 106, 0.5);
}
.lesson-card .badge.lavender { background: var(--lavender); color: var(--ink); }

/* ---------- Skool calendar showcase ---------- */
.skool-frame {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: #fff;
  padding: 20px clamp(16px, 2vw, 32px) 24px;
  max-width: 720px;
  margin: 0 auto;
  border: 1px solid var(--hairline);
  box-shadow:
    0 30px 70px -32px rgba(26, 13, 20, 0.3),
    0 0 0 6px rgba(252, 182, 207, 0.16),
    0 14px 44px -18px rgba(236, 72, 153, 0.28);
  transform: rotate(-0.3deg);
  transition: transform 420ms var(--ease);
}
.skool-frame:hover { transform: rotate(0deg) scale(1.005); }
.skool-frame img { width: 100%; display: block; border-radius: 12px; }

/* ---------- Case study cards ---------- */
.case-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
@media (max-width: 720px) { .case-grid { grid-template-columns: 1fr; } }
.case-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.case-card:hover { transform: translateY(-3px); box-shadow: 0 20px 50px -16px rgba(236, 72, 153, 0.18); }
.case-card .shot {
  border-radius: 18px; overflow: hidden;
  background: var(--bg-2);
}
.case-card .shot img { width: 100%; height: auto; display: block; }
.case-card .stat {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -0.02em;
  color: var(--pink-deep);
}
.case-card .stat .from { color: var(--ink-mute); font-weight: 500; font-size: 14px; letter-spacing: 0; }
.case-card .desc { font-size: 14px; color: var(--ink-2); margin: 0; }

/* ---------- Sticky scroll tale (modules + bonuses merged) ---------- */
.scroll-tale {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: clamp(40px, 5vw, 100px);
  max-width: 1180px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 940px) { .scroll-tale { grid-template-columns: 1fr; gap: 32px; } }
.tale-visual {
  position: sticky;
  top: 96px;
  align-self: start;
}
@media (max-width: 940px) { .tale-visual { position: relative; top: 0; } }
.tale-image {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  box-shadow:
    0 40px 80px -32px rgba(26, 13, 20, 0.28),
    0 0 0 6px rgba(252, 182, 207, 0.18),
    0 20px 50px -22px rgba(236, 72, 153, 0.28);
}
.tale-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  opacity: 0; transform: scale(1.04);
  transition: opacity 700ms var(--ease), transform 900ms var(--ease);
}
.tale-image img.active { opacity: 1; transform: scale(1); }
.tale-progress {
  margin-top: 18px;
  display: flex; gap: 6px; align-items: center;
  font-family: var(--body); font-size: 12px; color: var(--ink-mute);
  letter-spacing: 0.06em;
}
.tale-progress .bar { flex: 1; height: 3px; background: var(--hairline); border-radius: 999px; overflow: hidden; }
.tale-progress .fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--pink-deep), var(--lavender-deep)); transition: width 600ms var(--ease); border-radius: 999px; }

.tale-blocks { display: flex; flex-direction: column; }
.tale-block {
  min-height: 72vh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 0;
  border-top: 1px solid transparent;
}
.tale-block:first-child { padding-top: 24px; }
.tale-block .label {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--pink-deep);
  padding: 6px 12px; border-radius: var(--r-pill);
  background: var(--pink-wash); border: 1px solid var(--pink-soft);
  margin-bottom: 18px;
}
.tale-block .label.bonus { color: var(--lavender-deep); background: var(--lavender-wash); border-color: var(--lavender-soft); }
.tale-block .label.annual { color: #94660a; background: rgba(245, 192, 106, 0.18); border-color: rgba(245, 192, 106, 0.4); }
.tale-block .label::before { content: "●"; font-size: 8px; }
.tale-block .num {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(72px, 9vw, 140px);
  line-height: 0.85; letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--lavender-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
  margin: 0 0 14px;
}
.tale-block h3 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(26px, 3.5vw, 38px);
  line-height: 1.05; letter-spacing: -0.025em;
  color: var(--ink); margin: 0 0 14px;
}
.tale-block p { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0; max-width: 48ch; }

/* ---------- THFC callout ---------- */
.thfc-card {
  background: linear-gradient(135deg, var(--pink-soft) 0%, var(--lavender-soft) 100%);
  border: 1px solid var(--pink-soft);
  border-radius: var(--r-card);
  padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px);
  max-width: 960px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 30px 70px -30px rgba(236, 72, 153, 0.3);
}
.thfc-letters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 2vw, 32px);
  margin: 28px 0 24px;
}
@media (max-width: 640px) { .thfc-letters { grid-template-columns: repeat(2, 1fr); } }
.thfc-letters div {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(15px, 1.8vw, 19px);
  color: var(--ink);
  letter-spacing: 0.04em;
}
.thfc-letters div span {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(52px, 7vw, 92px);
  line-height: 1; letter-spacing: -0.04em;
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--lavender-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
  margin-bottom: 4px;
}

/* ---------- Bonuses stack ---------- */
.bonuses-band { padding: clamp(72px, 9vw, 120px) 0; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg) 100%); }
.bonuses-header { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.bonuses-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 960px) { .bonuses-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .bonuses-grid { grid-template-columns: 1fr; } }
.bonus-card {
  position: relative;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 28px 26px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
  overflow: hidden;
}
.bonus-card::before {
  content: ""; position: absolute; inset: -1px;
  border-radius: var(--r-card);
  padding: 1px;
  background: linear-gradient(135deg, var(--pink) 0%, var(--lavender) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 320ms var(--ease);
  pointer-events: none;
}
.bonus-card:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -20px rgba(236, 72, 153, 0.22); }
.bonus-card:hover::before { opacity: 1; }
.bonus-card .b-num {
  font-family: var(--italic); font-style: italic;
  font-size: 26px; color: var(--pink-deep); line-height: 1;
}
.bonus-card .b-name {
  font-family: var(--display); font-weight: 600;
  font-size: 21px; line-height: 1.15; letter-spacing: -0.015em;
  color: var(--ink); margin: 0;
}
.bonus-card .b-pl {
  font-family: var(--italic); font-style: italic;
  font-size: 14px; color: var(--ink-mute);
  margin: 0;
}
.bonus-card .b-desc {
  font-family: var(--body); font-size: 14px;
  color: var(--ink-2); line-height: 1.55; margin: 0;
}
.bonus-card .b-tier {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-pill);
  color: var(--ink);
  background: var(--pink-soft);
  border: 1px solid var(--pink-mid);
  align-self: flex-start;
}
.bonus-card .b-tier.annual { background: var(--lavender-soft); border-color: var(--lavender); color: var(--lavender-deep); }
.bonus-card .b-tier.annual::before { content: "★"; color: var(--gold); }
.bonus-card .b-tier.both::before { content: "✓"; color: var(--pink-deep); }
.bonuses-total {
  text-align: center; margin-top: 36px;
  font-family: var(--body); font-size: 14px;
  color: var(--ink-mute); letter-spacing: 0.04em;
}
.bonuses-total strong { font-family: var(--display); font-weight: 700; color: var(--pink-deep); font-size: 18px; }

/* ---------- ROI calculator ---------- */
.roi-card {
  background: linear-gradient(135deg, var(--lavender-soft) 0%, var(--pink-soft) 60%, var(--bg) 120%);
  border: 1px solid var(--pink-soft);
  border-radius: var(--r-card);
  padding: clamp(24px, 3vw, 36px);
  max-width: 760px; margin: 0 auto;
  box-shadow: 0 24px 50px -28px rgba(236, 72, 153, 0.28);
}
.roi-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 32px);
  align-items: center;
  margin-top: 24px;
}
@media (max-width: 720px) { .roi-grid { grid-template-columns: 1fr; } }
.roi-inputs { display: flex; flex-direction: column; gap: 14px; }
.roi-input { display: flex; flex-direction: column; gap: 5px; }
.roi-input label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }
.roi-input .field {
  display: flex; align-items: center;
  background: #fff;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-input);
  padding: 10px 14px;
  gap: 10px;
  transition: border-color 200ms var(--ease);
}
.roi-input .field:focus-within { border-color: var(--pink-deep); }
.roi-input input {
  border: 0; outline: 0; background: transparent;
  font-family: var(--display); font-weight: 600; font-size: 18px;
  color: var(--ink); width: 100%;
}
.roi-input .unit { color: var(--ink-mute); font-size: 13px; font-weight: 500; }
.roi-output {
  text-align: center;
}
.roi-output .label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; }
.roi-output .big {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(36px, 5vw, 52px);
  line-height: 1; letter-spacing: -0.03em;
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--lavender-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
.roi-output .sub { font-size: 14px; color: var(--ink-2); margin-top: 12px; max-width: 24ch; margin-left: auto; margin-right: auto; line-height: 1.5; }

/* ---------- Video reviews: horizontal scroll rail ---------- */
.videos-section { padding-right: 0; padding-left: 0; }
.videos-section > .container { padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); }
.videos-rail {
  position: relative;
  padding: 8px 0 28px;
}
.videos-row {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* -webkit-overflow-scrolling removed — obsolete and can trap touch on modern iOS Safari */
  scrollbar-width: none;
  padding: 16px clamp(16px, 4vw, 48px) 24px;
  scroll-padding-left: clamp(16px, 4vw, 48px);
  /* touch-action: auto lets iOS Safari decide axis from overflow rules — horizontal scrolls the rail,
     vertical falls through to scroll the page. pan-x alone blocks vertical gesture chaining. */
  touch-action: auto;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}
.videos-row::-webkit-scrollbar { display: none; }
.videos-row .video-card {
  flex: 0 0 clamp(220px, 22vw, 280px);
  scroll-snap-align: start;
}
.rail-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid var(--hairline);
  box-shadow: 0 12px 30px -10px rgba(26, 13, 20, 0.25);
  display: grid; place-items: center;
  cursor: pointer; z-index: 4;
  transition: transform 260ms var(--ease), background-color 200ms var(--ease);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.rail-nav.prev { left: clamp(8px, 1vw, 20px); }
.rail-nav.next { right: clamp(8px, 1vw, 20px); }
.rail-nav svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.rail-nav:hover { transform: translateY(-50%) scale(1.06); background: var(--pink-wash); }
.rail-nav:active { transform: translateY(-50%) scale(0.96); }
@media (max-width: 720px) {
  .rail-nav { display: none; }
  .videos-row { padding-left: 16px; padding-right: 16px; }
}
.video-card {
  position: relative;
  aspect-ratio: 9/16;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
  cursor: pointer;
  touch-action: auto;
}
.video-card:hover { transform: scale(1.03); box-shadow: 0 30px 60px -20px rgba(236, 72, 153, 0.4); }
.video-card .thumb {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.video-card video { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; }
.video-card .overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: end; padding: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.45) 100%);
  pointer-events: none;
}
.video-card .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  display: grid; place-items: center;
  box-shadow: 0 14px 32px -8px rgba(26, 13, 20, 0.4);
  z-index: 3;
  transition: transform 280ms var(--ease), background-color 200ms var(--ease);
}
.video-card .play::before {
  content: ""; width: 0; height: 0; margin-left: 5px;
  border-left: 16px solid var(--ink);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}
.video-card:hover .play { transform: translate(-50%, -50%) scale(1.1); background: var(--pink); }
.video-card .name {
  font-family: var(--display); font-weight: 700; color: #fff;
  font-size: 15px; line-height: 1.1; text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.video-card .handle {
  font-size: 11.5px; color: rgba(255,255,255,0.85); margin-top: 3px; letter-spacing: 0.02em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.video-card .stars {
  position: absolute; top: 14px; left: 14px;
  color: var(--gold); font-size: 13px; letter-spacing: 1.5px;
  background: rgba(255, 255, 255, 0.95);
  padding: 6px 11px; border-radius: var(--r-pill);
  z-index: 3;
  font-weight: 700;
}

/* ---------- Review screenshot carousel (auto-scroll marquee style) ---------- */
.review-rail {
  overflow: hidden;
  padding: 24px 0;
}
.review-track {
  display: inline-flex; gap: 20px;
  animation: review-scroll 50s linear infinite;
}
.review-card {
  flex: 0 0 min(460px, 88vw);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 8px;
  box-shadow: 0 14px 32px -16px rgba(26, 13, 20, 0.18);
}
.review-card img { width: 100%; border-radius: 12px; display: block; }
@keyframes review-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* ---------- Pricing matrix ---------- */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  max-width: 980px; margin: 0 auto;
}
@media (max-width: 720px) { .pricing-grid { grid-template-columns: minmax(0, 1fr); padding: 0 !important; } }
.price-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 36px 32px;
  position: relative;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.price-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -20px rgba(26, 13, 20, 0.18); }
.price-card.featured {
  background: linear-gradient(160deg, var(--ink) 0%, #2a1623 100%);
  color: var(--inv-ink);
  border-color: var(--pink-deep);
  box-shadow: 0 30px 70px -20px rgba(236, 72, 153, 0.5);
}
.price-card.featured h3, .price-card.featured .num { color: var(--inv-ink); }
.price-card.featured p { color: rgba(255, 250, 245, 0.7); }
.price-card.featured .feat-list li { color: rgba(255, 250, 245, 0.85); }
.price-card.featured .feat-list li::before { background: var(--pink); }
.price-card .ribbon {
  position: absolute; top: -14px; right: 24px;
  background: linear-gradient(90deg, var(--pink-deep), var(--lavender-deep));
  color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 8px 16px; border-radius: var(--r-pill);
  box-shadow: 0 8px 24px -6px rgba(236, 72, 153, 0.5);
}
.price-card h3 { font-size: 24px; margin: 0 0 4px; }
.price-card .price { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 24px; }
.price-card .num { font-family: var(--display); font-weight: 700; font-size: clamp(36px, 4.5vw, 52px); letter-spacing: -0.03em; line-height: 1; }
.price-card .period { font-size: 14px; color: var(--ink-mute); }
.price-card.featured .period { color: rgba(255, 250, 245, 0.6); }
.price-card .feat-list { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 12px; }
.price-card .feat-list li {
  position: relative; padding-left: 28px;
  font-size: 14px; color: var(--ink-2);
  line-height: 1.5;
}
.price-card .feat-list li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--pink-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 12px; background-position: center; background-repeat: no-repeat;
}
.price-card .btn { width: 100%; justify-content: center; white-space: normal; text-align: center; line-height: 1.25; padding-left: 18px; padding-right: 18px; text-wrap: balance; }
.price-card .small { font-size: 11.5px; color: var(--ink-mute); text-align: center; margin-top: 12px; letter-spacing: 0.02em; }
.price-card.featured .small { color: rgba(255, 250, 245, 0.5); }

/* ---------- Not-for-you exclusion ---------- */
.exclusion {
  background: var(--ink); color: var(--inv-ink);
  border-radius: var(--r-card);
  padding: clamp(32px, 5vw, 64px);
  max-width: 900px; margin: 0 auto;
}
.exclusion h3 { color: var(--inv-ink); }
.exclusion ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.exclusion li { position: relative; padding-left: 32px; font-size: 15px; color: rgba(255, 250, 245, 0.82); line-height: 1.55; }
.exclusion li::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255, 250, 245, 0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fcb6cf' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  background-size: 11px; background-position: center; background-repeat: no-repeat;
}

/* ---------- FAQ ---------- */
.faq-wrap { max-width: 820px; margin: 0 auto; }
.faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.faq {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  transition: background-color 280ms var(--ease), border-color 280ms var(--ease);
}
.faq[open] { background: #fff; border-color: var(--pink-soft); box-shadow: 0 14px 40px -16px rgba(236, 72, 153, 0.18); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 22px 28px;
  display: grid; grid-template-columns: 1fr 36px; gap: 16px; align-items: center;
  font-family: var(--display); font-weight: 600; font-size: 17px;
  color: var(--ink); letter-spacing: -0.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--r-pill);
  background: var(--surface);
  transition: transform 360ms var(--ease), background-color 240ms var(--ease);
}
.faq summary .chev svg { width: 12px; height: 12px; stroke: var(--ink); stroke-width: 2; fill: none; }
.faq[open] summary .chev { transform: rotate(180deg); background: var(--pink-deep); }
.faq[open] summary .chev svg { stroke: #fff; }
.faq-body {
  padding: 0 28px 24px;
  font-size: 15px; line-height: 1.6; color: var(--ink-2);
}

/* ---------- Final CTA ---------- */
.final-cta {
  background: linear-gradient(135deg, var(--ink) 0%, #2a1623 50%, var(--pink-deep) 200%);
  color: var(--inv-ink);
  text-align: center;
  position: relative; overflow: hidden;
}
.final-cta::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 20%, rgba(252, 182, 207, 0.3), transparent 50%),
              radial-gradient(circle at 80% 70%, rgba(196, 181, 253, 0.3), transparent 50%);
  pointer-events: none;
}
.final-cta h2 { color: var(--inv-ink); }
.final-cta p { color: rgba(255, 250, 245, 0.78); }
.final-cta .cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 32px; position: relative; z-index: 1; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg);
  padding: 60px 0 40px;
  border-top: 1px solid var(--hairline);
  text-align: center;
}
.site-footer .brand { font-family: var(--display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.site-footer .brand em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
.site-footer .tag { color: var(--ink-mute); font-size: 14px; margin: 8px 0 24px; }
.site-footer .links { display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; }
.site-footer .links a { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); text-decoration: none; transition: color 200ms var(--ease); }
.site-footer .links a:hover { color: var(--pink-deep); }
.site-footer .disclaimer { font-size: 12px; color: var(--ink-mute); max-width: 640px; margin: 24px auto 0; line-height: 1.55; }

/* ---------- Reveal motion ---------- */
html.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-soft), transform 700ms var(--ease-soft); }
html.js .reveal.in { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ================================================================
 * FUNNEL PAGES (optin + thank_you)
 * 2026-05-30, redo. Shares font + color with sales page. Everything
 * else is built fresh, event-poster language not membership-card.
 * Class prefix .fp- avoids any sales-page class clashes.
 * ================================================================ */

/* ---------- Paper background (replaces mesh-bg on funnel pages) ---------- */
.fp-body { background: var(--bg); position: relative; min-height: 100vh; overflow-x: hidden; }
.fp-body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(circle at 8% 12%, rgba(252, 182, 207, 0.32), transparent 38%),
    radial-gradient(circle at 92% 88%, rgba(196, 181, 253, 0.28), transparent 42%);
}
.fp-body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(rgba(26, 13, 20, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
  opacity: 0.5;
  mask: radial-gradient(ellipse at center, #000 30%, transparent 90%);
  -webkit-mask: radial-gradient(ellipse at center, #000 30%, transparent 90%);
}

/* ---------- Container ---------- */
.fp-wrap { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }
.fp-wrap.narrow { max-width: 880px; }
.fp-wrap.tight { max-width: 720px; }

/* ---------- Top urgency strip ---------- */
.fp-strip {
  background: var(--ink); color: var(--inv-ink);
  font-family: var(--body); font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.04em;
  padding: 11px 18px;
  text-align: center;
  position: relative;
  z-index: 30;
  border-bottom: 1px solid rgba(255, 250, 245, 0.08);
}
.fp-strip .live-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pink);
  margin-right: 10px;
  box-shadow: 0 0 0 0 rgba(252, 182, 207, 0.6);
  animation: fp-live 1.6s var(--ease-soft) infinite;
  vertical-align: 1px;
}
@keyframes fp-live { 0%, 100% { box-shadow: 0 0 0 0 rgba(252, 182, 207, 0.6); } 70% { box-shadow: 0 0 0 8px rgba(252, 182, 207, 0); } }
.fp-strip strong { color: var(--pink); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 11px; margin-right: 12px; }
.fp-strip .fp-cd-mini { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--inv-ink); margin-left: 8px; }
.fp-strip .fp-cd-mini span { color: rgba(255, 250, 245, 0.45); font-weight: 500; margin-left: 2px; margin-right: 6px; font-size: 11px; }

/* ---------- Nav (slimmer, not a glass pill) ---------- */
.fp-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 48px);
  max-width: 1240px; margin: 0 auto;
  position: relative; z-index: 20;
}
.fp-nav .fp-brand img { height: 32px; width: auto; display: block; }
.fp-nav .fp-meta {
  font-family: var(--body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
}
@media (max-width: 720px) { .fp-nav .fp-meta { display: none; } }
.fp-nav .fp-cta-mini {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-weight: 700; font-size: 13px;
  text-decoration: none;
  color: var(--ink);
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: transparent;
  border: 1.5px solid var(--ink);
  transition: background-color 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease);
}
.fp-nav .fp-cta-mini:hover { background: var(--ink); color: var(--inv-ink); transform: translateY(-1px); }
.fp-nav .fp-cta-mini::after { content: "→"; font-size: 14px; }

/* ---------- Hero (single column, centered, event-poster) ---------- */
.fp-hero {
  padding: clamp(40px, 7vw, 100px) 0 clamp(60px, 8vw, 100px);
  text-align: center;
  position: relative;
}
.fp-hero .fp-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-weight: 700;
  font-size: 11.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  margin-bottom: 28px;
}
.fp-hero .fp-tag::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pink-deep);
  animation: fp-live 1.6s var(--ease-soft) infinite;
}
.fp-hero h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.96; letter-spacing: -0.035em;
  margin: 0 auto 28px;
  max-width: 18ch;
  color: var(--ink);
}
.fp-hero h1 em {
  font-family: var(--italic); font-style: italic; font-weight: 400;
  color: var(--pink-deep);
}
.fp-hero .fp-sub {
  font-family: var(--body); font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.5; color: var(--ink-2);
  max-width: 56ch; margin: 0 auto 36px;
}
.fp-hero .fp-script {
  font-family: var(--script); font-size: clamp(22px, 2.5vw, 30px);
  color: var(--lavender-deep);
  display: inline-block;
  transform: rotate(-3deg);
  margin: 0 0 8px;
}

/* ---------- Big countdown (different scale than sales cd-big) ---------- */
.fp-clock {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(6px, 1.2vw, 14px);
  max-width: 720px;
  margin: 0 auto 36px;
}
.fp-clock .fp-unit {
  position: relative;
  background: var(--ink);
  color: var(--inv-ink);
  border-radius: 18px;
  padding: clamp(18px, 2.4vw, 28px) 4px clamp(14px, 1.8vw, 20px);
  text-align: center;
  overflow: hidden;
  box-shadow:
    0 22px 50px -22px rgba(26, 13, 20, 0.5),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
}
.fp-clock .fp-unit::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(255, 250, 245, 0.08);
}
.fp-clock .fp-unit .fp-n {
  display: block;
  font-family: var(--display); font-weight: 700;
  font-size: clamp(40px, 6.5vw, 86px);
  line-height: 0.95; letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 0%, var(--pink) 65%, var(--lavender) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
.fp-clock .fp-unit .fp-l {
  display: block;
  font-family: var(--body); font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 250, 245, 0.55);
  margin-top: 4px;
}

/* ---------- Hero primary CTA ---------- */
.fp-go {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--body); font-weight: 700; font-size: 16px;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: #fff;
  background: var(--pink-deep);
  border-radius: var(--r-pill);
  padding: 20px 32px;
  box-shadow:
    0 18px 40px -10px rgba(236, 72, 153, 0.55),
    0 0 0 6px rgba(252, 182, 207, 0.22);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
  position: relative;
}
.fp-go:hover { transform: translateY(-2px); box-shadow: 0 26px 60px -10px rgba(236, 72, 153, 0.7), 0 0 0 6px rgba(252, 182, 207, 0.3); }
.fp-go .arr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.22);
  transition: transform 240ms var(--ease);
}
.fp-go .arr::before { content: "→"; font-size: 15px; }
.fp-go:hover .arr { transform: translateX(4px); }

/* ---------- Trust line under CTA ---------- */
.fp-trust {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  margin-top: 22px;
}
.fp-trust .fp-stars { color: var(--gold); font-size: 14px; letter-spacing: 2px; }
.fp-trust .fp-trust-line {
  font-family: var(--body); font-size: 13px; color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.fp-trust .fp-trust-line strong { color: var(--ink); font-weight: 700; }

/* ---------- Polaroid (Marti photo, rotated, taped) ---------- */
.fp-polaroid-row {
  display: flex; justify-content: center; align-items: flex-start;
  gap: clamp(20px, 3vw, 40px);
  margin-top: 56px;
}
.fp-polaroid {
  position: relative;
  background: #fff;
  border-radius: 4px;
  padding: 14px 14px 56px;
  box-shadow:
    0 30px 60px -22px rgba(26, 13, 20, 0.4),
    0 8px 20px -8px rgba(26, 13, 20, 0.2);
  transform: rotate(-2.5deg);
  transition: transform 360ms var(--ease);
  max-width: 320px;
}
.fp-polaroid:hover { transform: rotate(-1deg) translateY(-4px); }
.fp-polaroid .fp-tape {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(2deg);
  width: 90px; height: 22px;
  background: rgba(252, 182, 207, 0.7);
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.fp-polaroid img {
  width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border-radius: 2px;
}
.fp-polaroid .fp-caption {
  position: absolute; bottom: 18px; left: 14px; right: 14px;
  font-family: var(--script); font-size: 22px; color: var(--ink);
  text-align: center;
  transform: rotate(-1deg);
}
.fp-stat-stack {
  display: flex; flex-direction: column; gap: 14px;
  padding-top: 20px;
}
@media (max-width: 720px) { .fp-stat-stack { display: none; } }
.fp-stat {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  padding: 10px 18px 10px 14px;
  display: inline-flex; align-items: center; gap: 12px;
  box-shadow: 0 10px 24px -10px rgba(26, 13, 20, 0.18);
  font-family: var(--body);
  align-self: flex-start;
  animation: fp-stat-bob 6s var(--ease-soft) infinite;
}
.fp-stat:nth-child(2) { animation-delay: -2s; align-self: flex-end; }
.fp-stat:nth-child(3) { animation-delay: -4s; }
@keyframes fp-stat-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.fp-stat .fp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pink-deep); }
.fp-stat:nth-child(2) .fp-dot { background: var(--lavender-deep); }
.fp-stat:nth-child(3) .fp-dot { background: var(--gold); }
.fp-stat b { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 16px; letter-spacing: -0.01em; }
.fp-stat span { color: var(--ink-mute); font-size: 12.5px; }

/* ---------- Section spacing ---------- */
.fp-sec { padding: clamp(60px, 8vw, 110px) 0; position: relative; }

/* ---------- Section heading helpers ---------- */
.fp-eyebrow {
  font-family: var(--body); font-weight: 700;
  font-size: 11.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 16px;
}
.fp-eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--ink); }
.fp-eyebrow::after { content: ""; width: 24px; height: 1px; background: var(--ink); }
.fp-h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(30px, 4.6vw, 60px);
  line-height: 1.02; letter-spacing: -0.03em;
  margin: 0 0 18px;
  color: var(--ink);
}
.fp-h2 em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
.fp-h2 .fp-script-em { font-family: var(--script); color: var(--lavender-deep); font-size: 1.05em; }
.fp-lead {
  font-family: var(--body); font-size: clamp(15.5px, 1.5vw, 18px);
  line-height: 1.55; color: var(--ink-2); max-width: 56ch;
}

/* ---------- Event ribbon (Zoom date bar) ---------- */
.fp-ribbon {
  background: var(--ink); color: var(--inv-ink);
  border-radius: 28px;
  padding: clamp(22px, 3vw, 32px) clamp(28px, 4vw, 48px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
  max-width: 1040px; margin: 0 auto;
  position: relative; overflow: hidden;
  box-shadow: 0 40px 100px -36px rgba(26, 13, 20, 0.55);
}
.fp-ribbon::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 30%, rgba(252, 182, 207, 0.22), transparent 50%),
    radial-gradient(circle at 88% 70%, rgba(196, 181, 253, 0.22), transparent 50%);
}
@media (max-width: 760px) { .fp-ribbon { grid-template-columns: 1fr; text-align: center; gap: 18px; } }
.fp-ribbon .fp-mark {
  position: relative; z-index: 1;
  font-family: var(--script); font-size: clamp(40px, 5vw, 64px);
  color: var(--pink);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.fp-ribbon .fp-when {
  position: relative; z-index: 1;
}
.fp-ribbon .fp-when .fp-when-eyebrow {
  font-family: var(--body); font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--pink);
  margin-bottom: 8px;
}
.fp-ribbon .fp-when h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -0.02em; line-height: 1.1;
  color: #fff; margin: 0 0 4px;
}
.fp-ribbon .fp-when h3 em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink); }
.fp-ribbon .fp-when p { color: rgba(255, 250, 245, 0.72); font-size: 14px; margin: 0; }
.fp-ribbon .fp-go { position: relative; z-index: 1; box-shadow: 0 14px 30px -10px rgba(236, 72, 153, 0.7), 0 0 0 4px rgba(252, 182, 207, 0.18); }
@media (max-width: 760px) { .fp-ribbon .fp-go { justify-self: center; } }

/* ---------- Manifesto / story block (text-only, no card chrome) ---------- */
.fp-manifesto {
  max-width: 740px; margin: 0 auto;
  text-align: center;
}
.fp-manifesto .fp-pull {
  font-family: var(--italic); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.18; letter-spacing: -0.01em;
  color: var(--ink);
  margin: 28px 0 0;
  padding: 24px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  position: relative;
}
.fp-manifesto .fp-pull::before {
  content: "“"; position: absolute; top: -22px; left: 50%; transform: translateX(-50%);
  font-family: var(--italic); font-size: 80px; color: var(--pink-deep); line-height: 1;
  background: var(--bg); padding: 0 10px;
}
.fp-manifesto .fp-attr {
  font-family: var(--body); font-weight: 700;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 16px;
}

/* ---------- Agenda (5 segments, horizontal scroll carousel) ---------- */
.fp-agenda-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(280px, 30vw, 340px);
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 16px clamp(20px, 4vw, 48px) 40px;
  margin: 0 calc(clamp(20px, 4vw, 48px) * -1);
  scrollbar-width: thin;
  scrollbar-color: var(--pink) transparent;
}
.fp-agenda-rail::-webkit-scrollbar { height: 6px; }
.fp-agenda-rail::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 999px; }
.fp-agenda-rail::-webkit-scrollbar-track { background: transparent; }
.fp-agenda-card {
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 28px 24px 24px;
  display: flex; flex-direction: column;
  gap: 16px;
  position: relative; overflow: hidden;
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
}
.fp-agenda-card:hover { transform: translateY(-4px); box-shadow: 0 28px 60px -22px rgba(236, 72, 153, 0.3); }
.fp-agenda-card::after {
  content: ""; position: absolute; left: 24px; right: 24px; bottom: 14px;
  height: 4px; border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), var(--lavender));
  opacity: 0.18;
}
.fp-agenda-card .fp-when-pill {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  font-family: var(--body); font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(135deg, var(--pink-soft), var(--lavender-soft));
  padding: 6px 12px; border-radius: var(--r-pill);
}
.fp-agenda-card .fp-when-pill .fp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pink-deep); }
.fp-agenda-card .fp-seg {
  font-family: var(--display); font-weight: 700;
  font-size: 110px; line-height: 0.78; letter-spacing: -0.06em;
  color: var(--ink);
  margin: 6px 0 8px;
}
.fp-agenda-card .fp-seg em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); font-size: 0.55em; vertical-align: 40%; margin-left: -8px; }
.fp-agenda-card h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 21px; letter-spacing: -0.02em; line-height: 1.15;
  margin: 0;
}
.fp-agenda-card ul {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.fp-agenda-card li {
  font-family: var(--body); font-size: 13.5px; line-height: 1.45;
  color: var(--ink-2);
  display: grid; grid-template-columns: 14px 1fr; gap: 8px;
}
.fp-agenda-card li::before {
  content: "→"; color: var(--pink-deep); font-weight: 700; line-height: 1.45;
}

/* ---------- Takeaways (CC arrow checklist) ---------- */
.fp-takeaways {
  max-width: 780px; margin: 0 auto;
  list-style: none; padding: 0;
  display: flex; flex-direction: column;
  gap: 4px;
}
.fp-takeaways li {
  display: grid; grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px dashed var(--hairline-2);
  font-family: var(--body); font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.45; color: var(--ink);
  font-weight: 500;
  transition: padding 280ms var(--ease);
}
.fp-takeaways li:last-child { border-bottom: 0; }
.fp-takeaways li:hover { padding-left: 8px; }
.fp-takeaways li::before {
  content: "→";
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--pink-deep); color: #fff;
  font-weight: 700; font-size: 16px;
  box-shadow: 0 8px 20px -6px rgba(236, 72, 153, 0.5);
}
.fp-takeaways li b { font-weight: 700; color: var(--pink-deep); }

/* ---------- Bonus stack (crossed-out value + FREE stamp) ---------- */
.fp-bonus-head {
  text-align: center; max-width: 760px; margin: 0 auto 56px;
}
.fp-bonus-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1080px; margin: 0 auto;
}
@media (max-width: 940px) { .fp-bonus-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fp-bonus-grid { grid-template-columns: 1fr; } }
.fp-bonus {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  padding: 28px 24px 24px;
  display: flex; flex-direction: column; gap: 12px;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease);
}
.fp-bonus:hover { transform: rotate(-1deg) translateY(-4px); box-shadow: 0 28px 60px -22px rgba(236, 72, 153, 0.28); }
.fp-bonus .fp-stamp {
  position: absolute; top: 18px; right: -8px;
  background: var(--pink-deep); color: #fff;
  font-family: var(--display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 6px 14px 6px 12px;
  border-radius: 4px;
  transform: rotate(6deg);
  box-shadow: 0 8px 20px -8px rgba(236, 72, 153, 0.6);
}
.fp-bonus .fp-stamp::after {
  content: ""; position: absolute; top: 0; right: -6px;
  width: 0; height: 0;
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  border-left: 8px solid var(--pink-deep);
}
.fp-bonus .fp-bonus-num {
  font-family: var(--italic); font-style: italic;
  font-size: 28px; line-height: 1; color: var(--lavender-deep);
}
.fp-bonus h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 20px; line-height: 1.18; letter-spacing: -0.015em;
  margin: 0;
}
.fp-bonus h3 em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
.fp-bonus p {
  font-family: var(--body); font-size: 13.5px; line-height: 1.55;
  color: var(--ink-2); margin: 0;
  flex: 1;
}
.fp-bonus .fp-value {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 4px;
  padding-top: 14px; border-top: 1px dashed var(--hairline-2);
  font-family: var(--display);
}
.fp-bonus .fp-old {
  font-weight: 600; font-size: 16px; color: var(--ink-mute);
  text-decoration: line-through; text-decoration-color: var(--pink-deep); text-decoration-thickness: 2px;
}
.fp-bonus .fp-free {
  font-weight: 700; font-size: 16px;
  background: linear-gradient(135deg, var(--pink-deep), var(--lavender-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.fp-bonus-total {
  text-align: center; margin-top: 48px;
  font-family: var(--display); font-weight: 600;
  font-size: clamp(18px, 2vw, 22px);
  color: var(--ink);
}
.fp-bonus-total strong {
  font-weight: 700;
  background: linear-gradient(135deg, var(--pink-deep), var(--lavender-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
.fp-bonus-total .fp-old { text-decoration: line-through; text-decoration-color: var(--pink-deep); color: var(--ink-mute); margin: 0 6px; }

/* ---------- DM testimonial bubbles ---------- */
.fp-dms {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 28px;
  max-width: 960px; margin: 0 auto;
}
@media (max-width: 720px) { .fp-dms { grid-template-columns: 1fr; } }
.fp-dm {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 14px;
  align-items: flex-start;
}
.fp-dm .fp-av {
  width: 48px; height: 48px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--lavender));
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 18px;
  color: var(--ink);
  border: 2px solid #fff;
  box-shadow: 0 8px 18px -8px rgba(26, 13, 20, 0.25);
}
.fp-dm .fp-body {
  background: #fff;
  border-radius: 4px 22px 22px 22px;
  padding: 16px 20px;
  border: 1px solid var(--hairline);
  position: relative;
  box-shadow: 0 14px 32px -18px rgba(26, 13, 20, 0.18);
}
.fp-dm .fp-body::before {
  content: ""; position: absolute; top: 0; left: -10px;
  width: 10px; height: 10px;
  background: #fff;
  border-left: 1px solid var(--hairline);
  border-top: 1px solid var(--hairline);
  border-radius: 4px 0 0 0;
}
.fp-dm .fp-body p { font-family: var(--body); font-size: 14.5px; line-height: 1.5; color: var(--ink); margin: 0; }
.fp-dm .fp-meta {
  font-family: var(--body); font-size: 11.5px;
  color: var(--ink-mute); margin-top: 6px; letter-spacing: 0.04em;
}
.fp-dm .fp-meta strong { color: var(--pink-deep); font-weight: 700; }

/* ---------- Registration form (light card, not inverted dark) ---------- */
.fp-form-sec {
  background: linear-gradient(135deg, var(--pink-soft) 0%, var(--lavender-soft) 100%);
  padding: clamp(72px, 9vw, 120px) 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  position: relative;
}
.fp-form-sec::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(26, 13, 20, 0.08) 1px, transparent 0);
  background-size: 18px 18px;
  opacity: 0.6;
  pointer-events: none;
}
.fp-form-sec > .fp-wrap { position: relative; z-index: 1; }
.fp-form {
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: 28px;
  padding: clamp(32px, 4vw, 56px);
  max-width: 560px; margin: 40px auto 0;
  box-shadow: 12px 12px 0 0 var(--ink);
}
.fp-form .fp-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.fp-form label {
  font-family: var(--body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink);
}
.fp-form input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  border-radius: 0;
  padding: 14px 0;
  font-family: var(--body); font-size: 16px; font-weight: 500;
  color: var(--ink);
  transition: border-color 220ms var(--ease);
}
.fp-form input:focus { outline: 0; border-color: var(--pink-deep); }
.fp-form input::placeholder { color: var(--ink-mute); font-weight: 400; }
.fp-form button.fp-go { width: 100%; justify-content: center; margin-top: 16px; }
.fp-form .fp-micro {
  font-family: var(--body); font-size: 11.5px;
  color: var(--ink-mute); text-align: center; margin: 14px 0 0;
  line-height: 1.5; letter-spacing: 0.04em;
}

/* ---------- Final CTA (light, ticket-stub style) ---------- */
.fp-ticket {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 28px;
  padding: clamp(36px, 5vw, 64px);
  max-width: 880px; margin: 0 auto;
  text-align: center;
  position: relative;
  box-shadow: 14px 14px 0 0 var(--pink-deep);
}
.fp-ticket::before, .fp-ticket::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--ink);
}
.fp-ticket::before { left: -18px; }
.fp-ticket::after { right: -18px; }
.fp-ticket h2 { font-family: var(--display); font-weight: 600; font-size: clamp(28px, 4vw, 48px); letter-spacing: -0.025em; margin: 0 0 14px; line-height: 1.05; }
.fp-ticket h2 em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
.fp-ticket .fp-when-tag {
  font-family: var(--body); font-weight: 700; font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  margin-bottom: 18px;
}
.fp-ticket .fp-when-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pink-deep); animation: fp-live 1.6s var(--ease-soft) infinite; }
.fp-ticket .fp-go { margin-top: 24px; }

/* ---------- Footer (funnel-light) ---------- */
.fp-foot {
  padding: 60px 0 40px;
  text-align: center;
  border-top: 1px solid var(--hairline);
}
.fp-foot img { height: 32px; margin: 0 auto 12px; }
.fp-foot .fp-foot-tag { font-family: var(--body); font-size: 13px; color: var(--ink-mute); margin: 0 0 18px; letter-spacing: 0.04em; }
.fp-foot .fp-foot-links { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; }
.fp-foot .fp-foot-links a { font-family: var(--body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); text-decoration: none; transition: color 200ms var(--ease); }
.fp-foot .fp-foot-links a:hover { color: var(--pink-deep); }
.fp-foot .fp-disc { font-size: 11.5px; color: var(--ink-mute); max-width: 640px; margin: 24px auto 0; line-height: 1.55; }

/* ================================================================
 * THANK YOU specific
 * ================================================================ */

/* Notice strip (different from sales promo-strip) */
.fp-notice {
  background: var(--ink); color: #fff;
  text-align: center;
  padding: 14px 20px;
  font-family: var(--body); font-size: 13.5px; font-weight: 600;
  letter-spacing: 0.04em;
  position: relative; z-index: 30;
  border-bottom: 1px solid rgba(255, 250, 245, 0.1);
}
.fp-notice strong {
  color: var(--bg);
  font-family: var(--body); font-weight: 700;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 5px 12px;
  background: var(--pink-deep); border-radius: 4px;
  margin-right: 14px;
}

/* Confirmation hero with confetti */
.fp-conf-hero {
  padding: clamp(48px, 7vw, 100px) 0 clamp(40px, 5vw, 60px);
  text-align: center;
  position: relative;
}
.fp-confetti {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.fp-confetti span {
  position: absolute; display: block;
  width: 10px; height: 10px;
  border-radius: 2px;
  animation: fp-fall linear infinite;
  opacity: 0.85;
}
.fp-confetti span:nth-child(1)  { left: 6%;  top: -10px; background: var(--pink-deep); animation-duration: 9s;  animation-delay: 0s;   transform: rotate(15deg); }
.fp-confetti span:nth-child(2)  { left: 14%; top: -10px; background: var(--lavender-deep); animation-duration: 11s; animation-delay: 1.5s; transform: rotate(-25deg); border-radius: 50%; }
.fp-confetti span:nth-child(3)  { left: 22%; top: -10px; background: var(--gold); animation-duration: 8s;  animation-delay: 0.6s; }
.fp-confetti span:nth-child(4)  { left: 30%; top: -10px; background: var(--pink); animation-duration: 12s; animation-delay: 2.4s; border-radius: 50%; width: 8px; height: 8px; }
.fp-confetti span:nth-child(5)  { left: 40%; top: -10px; background: var(--lavender); animation-duration: 10s; animation-delay: 3s;   transform: rotate(45deg); }
.fp-confetti span:nth-child(6)  { left: 52%; top: -10px; background: var(--pink-deep); animation-duration: 11.5s; animation-delay: 1s;   border-radius: 50%; }
.fp-confetti span:nth-child(7)  { left: 60%; top: -10px; background: var(--gold); animation-duration: 9.5s; animation-delay: 2s;   transform: rotate(-15deg); }
.fp-confetti span:nth-child(8)  { left: 68%; top: -10px; background: var(--lavender-deep); animation-duration: 13s; animation-delay: 0.4s; width: 12px; height: 12px; }
.fp-confetti span:nth-child(9)  { left: 76%; top: -10px; background: var(--pink); animation-duration: 8.5s; animation-delay: 3.2s; border-radius: 50%; }
.fp-confetti span:nth-child(10) { left: 84%; top: -10px; background: var(--pink-deep); animation-duration: 10.5s; animation-delay: 1.8s; transform: rotate(30deg); }
.fp-confetti span:nth-child(11) { left: 92%; top: -10px; background: var(--lavender); animation-duration: 12.5s; animation-delay: 2.6s; border-radius: 50%; }
.fp-confetti span:nth-child(12) { left: 96%; top: -10px; background: var(--gold); animation-duration: 9s;   animation-delay: 0.2s; }
@keyframes fp-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.85; }
  85%  { opacity: 0.7; }
  100% { transform: translateY(120vh) rotate(540deg); opacity: 0; }
}

.fp-conf-hero .fp-check {
  width: 88px; height: 88px; border-radius: 50%;
  background: var(--ink);
  display: grid; place-items: center;
  margin: 0 auto 28px;
  position: relative; z-index: 1;
  box-shadow:
    0 20px 50px -10px rgba(26, 13, 20, 0.4),
    0 0 0 8px rgba(252, 182, 207, 0.22);
  animation: fp-check 800ms var(--ease-spring) both;
}
@keyframes fp-check { 0% { transform: scale(0.3) rotate(-20deg); opacity: 0; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
.fp-conf-hero .fp-check svg { width: 38px; height: 38px; stroke: var(--pink); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.fp-conf-hero h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(40px, 6.5vw, 84px);
  line-height: 0.95; letter-spacing: -0.035em;
  margin: 0 auto 20px; max-width: 14ch;
  position: relative; z-index: 1;
  color: var(--ink);
}
.fp-conf-hero h1 em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
.fp-conf-hero .fp-sub { font-family: var(--body); font-size: clamp(16px, 1.7vw, 19px); line-height: 1.55; color: var(--ink-2); max-width: 52ch; margin: 0 auto 28px; position: relative; z-index: 1; }

/* Welcome video (different from sales-page tale-image) */
.fp-welcome {
  position: relative;
  max-width: 820px; margin: 32px auto 0;
  border-radius: 24px;
  border: 1.5px solid var(--ink);
  padding: 12px;
  background: #fff;
  box-shadow:
    14px 14px 0 0 var(--pink-deep),
    0 40px 80px -28px rgba(26, 13, 20, 0.35);
  transform: rotate(-0.6deg);
  transition: transform 360ms var(--ease);
}
.fp-welcome:hover { transform: rotate(0) scale(1.005); }
.fp-welcome .fp-frame { border-radius: 14px; overflow: hidden; aspect-ratio: 16/9; background: var(--ink); position: relative; }
.fp-welcome video { width: 100%; height: 100%; object-fit: cover; display: block; }
.fp-welcome .fp-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #1a0d14 0%, #2a1623 100%);
  color: rgba(255, 250, 245, 0.7); text-align: center; padding: 24px;
}
.fp-welcome .fp-play {
  width: 80px; height: 80px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  display: grid; place-items: center;
  margin: 0 auto 18px;
  animation: fp-play 2s var(--ease-soft) infinite;
}
.fp-welcome .fp-play::before {
  content: ""; width: 0; height: 0; margin-left: 4px;
  border-left: 18px solid var(--ink);
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
}
@keyframes fp-play { 0%, 100% { box-shadow: 0 0 0 0 rgba(252, 182, 207, 0.5); } 70% { box-shadow: 0 0 0 18px rgba(252, 182, 207, 0); } }
.fp-welcome .fp-ph h3 { font-family: var(--display); font-weight: 600; color: #fff; font-size: 22px; margin: 0; }
.fp-welcome .fp-ph h3 em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink); }
.fp-welcome .fp-ph .fp-ph-sub { font-size: 12.5px; margin-top: 6px; letter-spacing: 0.04em; }

/* Step timeline (vertical, connected) */
.fp-timeline {
  position: relative;
  max-width: 760px; margin: 0 auto;
  padding: 12px 0;
}
.fp-timeline::before {
  content: ""; position: absolute; left: 33px; top: 30px; bottom: 30px;
  width: 2px; background: var(--ink); opacity: 0.18;
}
@media (max-width: 600px) { .fp-timeline::before { left: 23px; } }
.fp-step {
  position: relative;
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: 22px;
  align-items: flex-start;
  padding: 18px 0 28px;
}
@media (max-width: 600px) { .fp-step { grid-template-columns: 48px 1fr; gap: 14px; } }
.fp-step .fp-step-num {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--ink);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700;
  font-size: 22px;
  color: var(--ink);
  position: relative; z-index: 1;
  transition: background-color 280ms var(--ease), transform 280ms var(--ease);
}
@media (max-width: 600px) { .fp-step .fp-step-num { width: 48px; height: 48px; font-size: 16px; } }
.fp-step:hover .fp-step-num { background: var(--pink-deep); color: #fff; transform: scale(1.05); }
.fp-step .fp-step-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 20px 24px;
  box-shadow: 0 14px 32px -18px rgba(26, 13, 20, 0.2);
}
.fp-step h3 { font-family: var(--display); font-weight: 600; font-size: clamp(18px, 2vw, 22px); letter-spacing: -0.02em; margin: 0 0 6px; line-height: 1.2; }
.fp-step h3 em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
.fp-step p { font-family: var(--body); font-size: 14.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 12px; }
.fp-step p strong { color: var(--pink-deep); font-weight: 700; }
.fp-step .fp-step-action {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-weight: 700; font-size: 13px;
  text-decoration: none; color: var(--ink);
  padding: 10px 18px;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  transition: background-color 220ms var(--ease), color 220ms var(--ease);
}
.fp-step .fp-step-action::after { content: "→"; font-size: 14px; }
.fp-step .fp-step-action:hover { background: var(--ink); color: var(--inv-ink); }
.fp-step .fp-cal-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.fp-step .fp-cal {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--body); font-size: 12px; font-weight: 600;
  padding: 7px 12px;
  background: var(--bg);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-pill);
  color: var(--ink); text-decoration: none;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.fp-step .fp-cal::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pink-deep); }
.fp-step .fp-cal:hover { background: var(--pink-wash); border-color: var(--pink-soft); }

/* Mini FAQ for thank you (lighter than sales faq) */
.fp-faq { max-width: 760px; margin: 0 auto; }
.fp-faq details {
  border-bottom: 1px solid var(--hairline-2);
  padding: 4px 0;
}
.fp-faq summary {
  list-style: none; cursor: pointer;
  padding: 22px 0;
  display: grid; grid-template-columns: 1fr 28px; gap: 16px; align-items: center;
  font-family: var(--display); font-weight: 600; font-size: clamp(17px, 1.8vw, 20px);
  letter-spacing: -0.015em; color: var(--ink);
}
.fp-faq summary::-webkit-details-marker { display: none; }
.fp-faq summary .fp-chev {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid; place-items: center;
  transition: transform 280ms var(--ease), background-color 240ms var(--ease);
  font-size: 14px;
}
.fp-faq summary .fp-chev::before { content: "+"; line-height: 1; }
.fp-faq details[open] summary .fp-chev { background: var(--ink); color: #fff; transform: rotate(45deg); }
.fp-faq details[open] summary { color: var(--pink-deep); }
.fp-faq .fp-ans {
  padding: 0 0 22px;
  font-family: var(--body); font-size: 15.5px; line-height: 1.6; color: var(--ink-2);
  max-width: 60ch;
}

/* Reveal motion for fp components */
html.js .fp-reveal { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease-soft), transform 700ms var(--ease-soft); }
html.js .fp-reveal.in { opacity: 1; transform: translateY(0); }

/* ============================================================
   v3 visual upgrades — chap rail, profiles, calendar pins,
   bonus reveal, hero motion, CTA pulse, card hover physics
   ============================================================ */

/* ---------- Hero floating sparkle deco ---------- */
.hero { position: relative; overflow: hidden; }
.hero-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.deco-spark {
  position: absolute;
  width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, var(--pink) 0%, rgba(252,182,207,0) 70%);
  opacity: 0.55;
  filter: blur(0.5px);
  animation: spark-float 9s ease-in-out infinite;
}
.deco-spark.s1 { top: 12%; left: 18%; width: 10px; height: 10px; animation-delay: 0s; background: radial-gradient(circle, var(--pink) 0%, rgba(252,182,207,0) 70%); }
.deco-spark.s2 { top: 28%; left: 62%; width: 7px; height: 7px; animation-delay: -2.5s; background: radial-gradient(circle, var(--lavender) 0%, rgba(196,181,253,0) 70%); }
.deco-spark.s3 { top: 56%; left: 8%; width: 14px; height: 14px; animation-delay: -5s; opacity: 0.45; background: radial-gradient(circle, var(--lavender-deep) 0%, rgba(139,92,246,0) 70%); }
.deco-spark.s4 { top: 74%; left: 78%; width: 8px; height: 8px; animation-delay: -7s; background: radial-gradient(circle, var(--pink-deep) 0%, rgba(236,72,153,0) 70%); }
@keyframes spark-float {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.45; }
  25% { transform: translate(12px, -18px) scale(1.2); opacity: 0.7; }
  50% { transform: translate(-8px, -30px) scale(0.9); opacity: 0.55; }
  75% { transform: translate(18px, -12px) scale(1.1); opacity: 0.65; }
}
.hero .container { position: relative; z-index: 1; }
.hero-photo-float { animation: photoFloat 7s ease-in-out infinite alternate; }
@keyframes photoFloat {
  from { transform: translateY(-6px); }
  to   { transform: translateY(8px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo-float, .deco-spark { animation: none; }
}

/* ---------- Pulse glow on primary pink CTAs ---------- */
.btn.pink.lg {
  position: relative;
  box-shadow: 0 14px 36px -10px rgba(236, 72, 153, 0.45);
}
.btn.pink.lg::after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.5);
  animation: ctaPulse 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  pointer-events: none;
}
@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.5); }
  70%  { box-shadow: 0 0 0 18px rgba(236, 72, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
}
@media (prefers-reduced-motion: reduce) { .btn.pink.lg::after { animation: none; } }

/* ---------- Card hover physics (case, profile, chap) ---------- */
.case-card, .profile-card, .chap-card {
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 380ms cubic-bezier(0.32, 0.72, 0, 1);
}
.case-card:hover {
  transform: translateY(-8px) scale(1.015);
  box-shadow: 0 38px 70px -22px rgba(139, 92, 246, 0.35), 0 18px 36px -14px rgba(236, 72, 153, 0.2);
}

/* ---------- Chapter rail (horizontal) ---------- */
.chap-section { padding-bottom: clamp(40px, 6vw, 60px); }
.chap-rail {
  position: relative;
  padding: 8px 0 36px;
}
.chap-row {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* -webkit-overflow-scrolling removed — obsolete and can trap touch on modern iOS Safari */
  scrollbar-width: none;
  padding: 16px clamp(20px, 5vw, 64px) 28px;
  scroll-padding-left: clamp(20px, 5vw, 64px);
  touch-action: auto;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}
.chap-row::-webkit-scrollbar { display: none; }
.chap-card {
  flex: 0 0 clamp(280px, 26vw, 340px);
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 14px 36px -18px rgba(26, 13, 20, 0.18);
  touch-action: auto;
}
.chap-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 34px 60px -22px rgba(236, 72, 153, 0.28), 0 16px 32px -16px rgba(139, 92, 246, 0.18);
}
.chap-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--pink-wash);
}
.chap-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 600ms var(--ease);
}
.chap-card:hover .chap-img img { transform: scale(1.06); }
.chap-num {
  position: absolute; top: 14px; right: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: var(--r-pill);
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px -4px rgba(26, 13, 20, 0.2);
}
.chap-body {
  padding: 22px 22px 26px;
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.chap-tag {
  display: inline-flex; align-items: center;
  font-family: var(--body);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pink-deep);
  padding: 5px 11px;
  background: var(--pink-wash);
  border: 1px solid var(--pink-soft);
  border-radius: var(--r-pill);
  align-self: flex-start;
  width: max-content;
}
.chap-tag.bonus { color: var(--lavender-deep); background: var(--lavender-wash); border-color: var(--lavender-soft); }
.chap-tag.annual { color: var(--ink); background: linear-gradient(135deg, var(--pink-wash), var(--lavender-wash)); border-color: rgba(236, 72, 153, 0.25); }
.chap-card.annual { border-color: rgba(236, 72, 153, 0.35); box-shadow: 0 20px 48px -22px rgba(236, 72, 153, 0.32), 0 8px 20px -10px rgba(139, 92, 246, 0.18); }
.chap-body h3 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.18;
  color: var(--ink);
  margin: 4px 0 6px;
}
.chap-body h3 sup { font-size: 0.55em; color: var(--pink-deep); top: -0.7em; position: relative; }
.chap-body p {
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* ---------- Inside the Academy · member portrait grid ---------- */
.profiles-section { padding: clamp(60px, 8vw, 100px) 0; }
.profiles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
@media (max-width: 980px) { .profiles-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 520px) { .profiles-grid { grid-template-columns: 1fr; } }
.profile-card {
  position: relative;
  aspect-ratio: 9 / 14;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ink);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 18px 40px -20px rgba(26, 13, 20, 0.25);
}
.profile-card:hover {
  transform: translateY(-6px) scale(1.012);
  box-shadow: 0 32px 60px -24px rgba(236, 72, 153, 0.32), 0 14px 28px -14px rgba(139, 92, 246, 0.22);
}
.profile-img { position: absolute; inset: 0; }
.profile-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease);
}
.profile-card:hover .profile-img img { transform: scale(1.04); }
.profile-meta {
  position: absolute; left: 14px; right: 14px; bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 8px 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 250, 245, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.profile-stars {
  color: var(--gold);
  font-size: 11px; letter-spacing: 1.5px;
  font-weight: 700;
}
.profile-label {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.profile-label em {
  font-family: var(--italic); font-style: italic; font-weight: 400;
  text-transform: none; letter-spacing: 0;
  color: var(--pink-deep);
  margin-left: 4px;
}

/* ---------- Skool calendar pins ---------- */
.calendar-section .skool-frame { position: relative; }
.cal-pin {
  position: absolute;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 6px;
  background: rgba(255, 250, 245, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-pill);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px -10px rgba(26, 13, 20, 0.22);
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  z-index: 3;
  opacity: 0;
  transform: scale(0.85);
  animation: pinIn 600ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.cal-pin .pin-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.22);
  animation: pinPulse 2.2s ease-in-out infinite;
}
.cal-pin .pin-label { white-space: nowrap; }
.cal-pin.pin-1 { top: 12%; left: 6%; animation-delay: 0.4s; }
.cal-pin.pin-2 { top: 38%; right: 4%; animation-delay: 0.7s; }
.cal-pin.pin-2 .pin-dot { background: var(--lavender-deep); box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.22); }
.cal-pin.pin-3 { bottom: 14%; left: 22%; animation-delay: 1s; }
.cal-pin.pin-3 .pin-dot { background: var(--gold); box-shadow: 0 0 0 4px rgba(247, 178, 102, 0.25); }
@keyframes pinIn {
  to { opacity: 1; transform: scale(1); }
}
@keyframes pinPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}
@media (max-width: 720px) {
  .cal-pin .pin-label { display: none; }
  .cal-pin { padding: 4px; }
}

/* ---------- Bonus reveal on annual pricing card ---------- */
.price-card.featured .price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; }
.price-card.featured .price .strike {
  font-family: var(--display);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink-mute);
  text-decoration: line-through;
  text-decoration-color: rgba(236, 72, 153, 0.55);
  text-decoration-thickness: 2px;
  order: -1; width: 100%;
  letter-spacing: -0.01em;
}
.save-callout {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 14px;
  background: linear-gradient(135deg, var(--pink-wash) 0%, var(--lavender-wash) 100%);
  border: 1px solid var(--pink-soft);
  border-radius: var(--r-pill);
  margin: 14px 0 8px;
  font-family: var(--body);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--ink);
  font-weight: 500;
  letter-spacing: 0.01em;
  width: max-content;
  max-width: 100%;
}
.save-callout strong {
  color: var(--pink-deep);
  font-family: var(--display);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
}
.price-card.featured {
  position: relative;
  box-shadow: 0 24px 60px -20px rgba(236, 72, 153, 0.28), 0 12px 28px -14px rgba(139, 92, 246, 0.22);
}
.price-card.featured::before {
  content: "";
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.45), rgba(139, 92, 246, 0.45), rgba(236, 72, 153, 0.45));
  background-size: 200% 200%;
  z-index: -1;
  animation: featuredGlow 8s ease-in-out infinite;
  opacity: 0.35;
  filter: blur(8px);
}
@keyframes featuredGlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) { .price-card.featured::before { animation: none; } }

/* ---------- Stronger hover lift on video-card (already exists, intensify) ---------- */
.video-card:hover { transform: translateY(-6px) scale(1.03); }


/* ================================================================
 * THANK YOU KIT (.tk-) — dense, info-packed layout
 * Goal: fit confirmation + countdown + video + 4 steps + event info
 * above the fold on a 1080px window. Minimize scrolling.
 * Shares only font + color tokens with the sales page.
 * ================================================================ */

.tk-page { padding: 0; }

/* ---------- Slim notice + nav ---------- */
.tk-notice {
  background: var(--ink); color: #fff;
  font-family: var(--body); font-size: 12px; font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 9px 18px;
}
.tk-notice strong {
  background: var(--pink-deep); color: #fff;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px;
  margin-right: 10px;
}
.tk-notice .tk-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pink); margin-right: 8px; vertical-align: 1px;
  animation: fp-live 1.4s var(--ease-soft) infinite;
}
.tk-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px clamp(18px, 3vw, 32px);
  max-width: 1340px; margin: 0 auto;
  border-bottom: 1px solid var(--hairline);
}
.tk-nav .tk-brand img { height: 26px; width: auto; display: block; }
.tk-nav .tk-meta {
  font-family: var(--body); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute);
}
@media (max-width: 600px) { .tk-nav .tk-meta { display: none; } }
.tk-nav .tk-help {
  font-family: var(--body); font-size: 12px; font-weight: 600; color: var(--ink);
  text-decoration: none; padding: 6px 12px;
  border: 1px solid var(--hairline-2); border-radius: var(--r-pill);
  transition: background-color 200ms var(--ease);
}
.tk-nav .tk-help:hover { background: var(--pink-wash); }

/* ---------- Wrap ---------- */
.tk-wrap { width: 100%; max-width: 1340px; margin: 0 auto; padding: 0 clamp(18px, 3vw, 32px); }

/* ---------- Confirmation banner (horizontal, compact) ---------- */
.tk-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: clamp(18px, 2.5vw, 28px);
  align-items: center;
  padding: 18px 22px;
  margin: 14px 0 18px;
  background: linear-gradient(135deg, var(--pink-soft) 0%, var(--lavender-soft) 100%);
  border: 1px solid rgba(26, 13, 20, 0.08);
  border-radius: 18px;
  position: relative; overflow: hidden;
  box-shadow: 0 14px 32px -18px rgba(26, 13, 20, 0.18);
}
.tk-banner::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(26, 13, 20, 0.06) 1px, transparent 0);
  background-size: 14px 14px;
  pointer-events: none;
  opacity: 0.5;
}
.tk-banner > * { position: relative; z-index: 1; }
@media (max-width: 760px) { .tk-banner { grid-template-columns: 1fr; gap: 14px; text-align: center; } }

.tk-banner .tk-check {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); display: grid; place-items: center;
  box-shadow: 0 8px 18px -4px rgba(26, 13, 20, 0.35);
  animation: fp-check 700ms var(--ease-spring) both;
}
.tk-banner .tk-check svg { width: 22px; height: 22px; stroke: var(--pink); stroke-width: 3.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .tk-banner .tk-check { margin: 0 auto; } }

.tk-banner .tk-head {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.05; letter-spacing: -0.025em;
  margin: 0 0 4px; color: var(--ink);
}
.tk-banner .tk-head em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
.tk-banner .tk-sub {
  font-family: var(--body); font-size: 13.5px;
  color: var(--ink-2); margin: 0; line-height: 1.4;
}
.tk-banner .tk-sub strong { color: var(--ink); font-weight: 700; }

/* compact countdown inside banner */
.tk-clock {
  display: inline-flex; gap: 6px;
  background: rgba(26, 13, 20, 0.92);
  padding: 8px 10px;
  border-radius: 12px;
  align-items: center;
}
.tk-clock .tk-u {
  display: flex; flex-direction: column; align-items: center;
  min-width: 44px;
  padding: 4px 4px;
  border-radius: 6px;
  background: rgba(255, 250, 245, 0.04);
}
.tk-clock .tk-u .n {
  font-family: var(--display); font-weight: 700;
  font-size: 22px; line-height: 1;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 0%, var(--pink) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
.tk-clock .tk-u .l {
  font-family: var(--body); font-weight: 600;
  font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 250, 245, 0.5);
  margin-top: 2px;
}

/* ---------- Main grid (2-col 60/40) ---------- */
.tk-main {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}
@media (max-width: 980px) { .tk-main { grid-template-columns: 1fr; } }

/* ---------- Section header (inline mini) ---------- */
.tk-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 12px;
}
.tk-h .tk-title {
  font-family: var(--display); font-weight: 700;
  font-size: 16px; letter-spacing: -0.01em;
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink);
  margin: 0;
}
.tk-h .tk-title::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pink-deep);
  animation: fp-live 1.6s var(--ease-soft) infinite;
}
.tk-h .tk-aside {
  font-family: var(--body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute);
}

/* ---------- Steps (compact horizontal cards) ---------- */
.tk-steps { display: flex; flex-direction: column; gap: 10px; }
.tk-step {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  position: relative;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), border-color 240ms var(--ease), background-color 240ms var(--ease);
}
.tk-step::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--pink-deep);
  opacity: 0.85;
}
.tk-step:hover {
  transform: translateY(-2px);
  border-color: var(--pink-soft);
  box-shadow: 0 18px 38px -18px rgba(236, 72, 153, 0.3);
  background: #fff;
}
.tk-step.k-zoom::before { background: #2D8CFF; }
.tk-step.k-cal::before { background: var(--lavender-deep); }
.tk-step.k-ig::before { background: linear-gradient(180deg, #fd5949, #d6249f, #285AEB); }
.tk-step.k-bot::before { background: var(--gold); }

.tk-step .tk-num {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--ink);
  transition: background-color 240ms var(--ease), color 240ms var(--ease);
}
.tk-step:hover .tk-num { background: var(--ink); color: #fff; }
.tk-step .tk-info { min-width: 0; }
.tk-step .tk-info h3 {
  font-family: var(--display); font-weight: 600;
  font-size: 15.5px; line-height: 1.15; letter-spacing: -0.015em;
  margin: 0 0 3px; color: var(--ink);
  display: inline-flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.tk-step .tk-info h3 em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
.tk-step .tk-info .tk-tag {
  font-family: var(--body); font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px;
  background: var(--pink-wash); color: var(--pink-deep);
}
.tk-step.k-zoom .tk-info .tk-tag { background: rgba(45, 140, 255, 0.12); color: #1969d3; }
.tk-step.k-cal .tk-info .tk-tag { background: var(--lavender-wash); color: var(--lavender-deep); }
.tk-step.k-bot .tk-info .tk-tag { background: rgba(245, 192, 106, 0.2); color: #94660a; }

.tk-step .tk-info p {
  font-family: var(--body); font-size: 12.5px; line-height: 1.4;
  color: var(--ink-2); margin: 0;
}
.tk-step .tk-info p strong { color: var(--pink-deep); font-weight: 700; }
.tk-step .tk-act {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-weight: 700; font-size: 12px;
  text-decoration: none; color: var(--ink);
  padding: 8px 14px; border-radius: 999px;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  white-space: nowrap;
  transition: background-color 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease);
}
.tk-step .tk-act::after { content: "→"; font-size: 13px; }
.tk-step .tk-act:hover { background: var(--ink); color: #fff; transform: translateX(2px); }
.tk-step.k-ig .tk-act:hover { background: linear-gradient(135deg, #fd5949, #d6249f, #285AEB); border-color: transparent; }

/* compact cal pill row inside step */
.tk-cals { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tk-cals a {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--body); font-size: 10.5px; font-weight: 600;
  text-decoration: none; color: var(--ink);
  padding: 4px 10px;
  background: var(--bg);
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  transition: background-color 200ms var(--ease);
}
.tk-cals a::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--lavender-deep); }
.tk-cals a:hover { background: var(--lavender-soft); }

/* ---------- Side column ---------- */
.tk-side { display: flex; flex-direction: column; gap: 14px; }

/* compact video frame */
.tk-vid {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  background: var(--ink);
  aspect-ratio: 16/10;
  box-shadow: 0 18px 40px -18px rgba(26, 13, 20, 0.3);
}
.tk-vid video { width: 100%; height: 100%; object-fit: cover; display: block; }
.tk-vid .tk-vid-ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    linear-gradient(135deg, rgba(236, 72, 153, 0.35), rgba(139, 92, 246, 0.4)),
    url("../shared/assets/photos/marti-raw.jpg") center/cover;
  color: #fff; text-align: center;
}
.tk-vid .tk-play {
  width: 56px; height: 56px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  display: grid; place-items: center;
  margin: 0 auto 10px;
  animation: fp-play 2s var(--ease-soft) infinite;
}
.tk-vid .tk-play::before { content: ""; width: 0; height: 0; margin-left: 3px; border-left: 14px solid var(--ink); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.tk-vid .tk-vid-h {
  font-family: var(--display); font-weight: 600; font-size: 17px; color: #fff;
  letter-spacing: -0.02em; margin: 0; text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.tk-vid .tk-vid-h em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink); }
.tk-vid .tk-vid-sub { font-size: 11px; color: rgba(255,255,255,0.78); margin-top: 2px; letter-spacing: 0.04em; }
.tk-vid .tk-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  font-family: var(--body); font-weight: 700; font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 6px;
}
.tk-vid .tk-badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pink-deep); animation: fp-live 1.4s var(--ease-soft) infinite; }

/* event quick card */
.tk-event {
  background: var(--ink); color: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  display: grid; gap: 10px;
  position: relative; overflow: hidden;
}
.tk-event::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 80% 20%, rgba(252, 182, 207, 0.25), transparent 50%),
    radial-gradient(circle at 10% 90%, rgba(196, 181, 253, 0.22), transparent 50%);
  pointer-events: none;
}
.tk-event > * { position: relative; z-index: 1; }
.tk-event .tk-ev-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--body); }
.tk-event .tk-ev-row .l { font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--pink); }
.tk-event .tk-ev-row .v { font-family: var(--display); font-weight: 700; font-size: 14px; letter-spacing: -0.01em; color: #fff; }
.tk-event .tk-ev-row .v em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink); }
.tk-event hr { border: 0; border-top: 1px solid rgba(255, 250, 245, 0.1); margin: 0; }
.tk-event .tk-prep {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--body); font-size: 11px; font-weight: 600;
  color: rgba(255, 250, 245, 0.78); text-decoration: none;
  padding: 6px 12px; background: rgba(255, 250, 245, 0.06);
  border-radius: 999px; border: 1px solid rgba(255, 250, 245, 0.1);
  align-self: flex-start;
  transition: background-color 200ms var(--ease);
}
.tk-event .tk-prep:hover { background: rgba(255, 250, 245, 0.12); }
.tk-event .tk-prep::before { content: "↓"; color: var(--pink); font-weight: 700; }

/* mini proof row */
.tk-proof {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px 14px;
  display: grid; grid-template-columns: 38px 1fr; gap: 12px;
  align-items: center;
}
.tk-proof .tk-av {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--lavender));
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 15px;
  color: var(--ink);
  border: 2px solid #fff;
}
.tk-proof .tk-q {
  font-family: var(--body); font-size: 12.5px; line-height: 1.4;
  color: var(--ink-2); margin: 0;
}
.tk-proof .tk-q strong { color: var(--ink); font-weight: 700; }
.tk-proof .tk-from {
  font-family: var(--body); font-size: 10.5px; color: var(--ink-mute);
  letter-spacing: 0.04em; margin-top: 2px;
}
.tk-proof .tk-from b { color: var(--pink-deep); font-weight: 700; }

/* ---------- FAQ (2-column tight) ---------- */
.tk-faq-sec {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 36px 0;
}
.tk-faq-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; margin: 0 0 16px;
}
.tk-faq-head h2 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -0.025em; line-height: 1.05;
  margin: 0; color: var(--ink);
}
.tk-faq-head h2 em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
.tk-faq-head .tk-eyebrow {
  font-family: var(--body); font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-mute);
}
.tk-faq-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 28px;
}
@media (max-width: 760px) { .tk-faq-grid { grid-template-columns: 1fr; } }
.tk-faq-grid details {
  border-bottom: 1px solid var(--hairline-2);
}
.tk-faq-grid summary {
  list-style: none; cursor: pointer;
  padding: 12px 0;
  display: grid; grid-template-columns: 1fr 22px; gap: 10px; align-items: center;
  font-family: var(--body); font-weight: 600; font-size: 13.5px;
  color: var(--ink); letter-spacing: -0.005em;
}
.tk-faq-grid summary::-webkit-details-marker { display: none; }
.tk-faq-grid summary .tk-chev {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid; place-items: center;
  transition: transform 240ms var(--ease), background-color 240ms var(--ease), color 240ms var(--ease);
  font-size: 12px; color: var(--ink);
}
.tk-faq-grid summary .tk-chev::before { content: "+"; line-height: 1; }
.tk-faq-grid details[open] summary .tk-chev { background: var(--ink); color: #fff; transform: rotate(45deg); }
.tk-faq-grid details[open] summary { color: var(--pink-deep); }
.tk-faq-grid .tk-a {
  padding: 0 0 14px;
  font-family: var(--body); font-size: 12.5px; line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
}

/* ---------- Footer slim ---------- */
.tk-foot {
  padding: 16px 0;
  border-top: 1px solid var(--hairline);
  font-family: var(--body); font-size: 11px;
  color: var(--ink-mute);
}
.tk-foot .tk-foot-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  max-width: 1340px; margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 32px);
}
.tk-foot img { height: 22px; }
.tk-foot a {
  color: var(--ink-mute); text-decoration: none;
  letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 10.5px; font-weight: 600;
  margin-left: 16px;
  transition: color 200ms var(--ease);
}
.tk-foot a:hover { color: var(--pink-deep); }

/* ---------- Reveal motion ---------- */
html.js .tk-reveal { opacity: 0; transform: translateY(14px); transition: opacity 600ms var(--ease-soft), transform 600ms var(--ease-soft); }
html.js .tk-reveal.in { opacity: 1; transform: translateY(0); }

/* ================================================================
 * THANK YOU - SHOW UP PERSUASION SECTIONS
 * Goal: drive show-up rate, not just confirm registration.
 * ================================================================ */

/* 2-col paired row */
.tk-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 28px; }
@media (max-width: 900px) { .tk-pair { grid-template-columns: 1fr; gap: 14px; } }

/* Section title (denser variant) */
.tk-stitle {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.1; letter-spacing: -0.02em;
  margin: 0 0 14px; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.tk-stitle em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
.tk-stitle .tk-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--pink-deep); animation: fp-live 1.6s var(--ease-soft) infinite; }

/* ---------- Live vs Replay comparison ---------- */
.tk-vs {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 18px 20px;
  position: relative; overflow: hidden;
}
.tk-vs::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 90% 0%, rgba(252, 182, 207, 0.18), transparent 50%);
  pointer-events: none;
}
.tk-vs > * { position: relative; }
.tk-vs-grid {
  display: grid;
  grid-template-columns: 1fr 64px 64px;
  font-family: var(--body);
}
.tk-vs-grid > * {
  padding: 9px 6px;
  border-bottom: 1px solid var(--hairline-2);
  display: flex; align-items: center;
}
.tk-vs-grid > *:nth-last-child(-n+3) { border-bottom: 0; }
.tk-vs-grid .tk-vs-h {
  font-size: 10px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
  padding-bottom: 10px;
  border-bottom: 1.5px solid var(--ink);
  justify-content: center;
}
.tk-vs-grid .tk-vs-h.l { justify-content: flex-start; }
.tk-vs-grid .tk-vs-h.live { color: var(--pink-deep); }
.tk-vs-grid .tk-vs-row { font-size: 13px; color: var(--ink); font-weight: 500; }
.tk-vs-grid .tk-vs-cell { justify-content: center; font-family: var(--display); font-weight: 700; font-size: 16px; }
.tk-vs-grid .tk-vs-cell.y { color: var(--pink-deep); }
.tk-vs-grid .tk-vs-cell.n { color: var(--ink-mute); opacity: 0.5; }
.tk-vs-grid .tk-vs-cell.y::before { content: "✓"; }
.tk-vs-grid .tk-vs-cell.n::before { content: "—"; }
.tk-vs-foot {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px dashed var(--hairline-2);
  font-family: var(--body); font-size: 11.5px;
  color: var(--ink-mute);
  display: flex; align-items: center; gap: 8px;
}
.tk-vs-foot strong { color: var(--pink-deep); font-weight: 700; }

/* ---------- Bonus stack reminder ---------- */
.tk-stack {
  background: linear-gradient(135deg, var(--lavender-soft) 0%, var(--pink-soft) 100%);
  border: 1px solid rgba(26, 13, 20, 0.08);
  border-radius: 16px;
  padding: 18px 20px;
  position: relative; overflow: hidden;
}
.tk-stack::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(26, 13, 20, 0.06) 1px, transparent 0);
  background-size: 16px 16px;
  pointer-events: none; opacity: 0.5;
}
.tk-stack > * { position: relative; }
.tk-stack-list { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px; }
.tk-stack-item {
  display: grid; grid-template-columns: 22px 1fr auto;
  gap: 10px; align-items: center;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  font-family: var(--body); font-size: 12.5px;
}
.tk-stack-item::before {
  content: ""; width: 18px; height: 18px; border-radius: 50%;
  background-color: var(--pink-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 10px; background-position: center; background-repeat: no-repeat;
}
.tk-stack-item b { color: var(--ink); font-weight: 600; }
.tk-stack-item .v {
  font-family: var(--display); font-weight: 700; font-size: 12.5px;
  color: var(--ink-mute); text-decoration: line-through;
  text-decoration-color: var(--pink-deep); text-decoration-thickness: 1.5px;
}
.tk-stack-total {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: var(--ink); color: #fff;
  border-radius: 12px;
  font-family: var(--body); font-size: 12px; letter-spacing: 0.04em;
}
.tk-stack-total .x {
  text-decoration: line-through; text-decoration-color: var(--pink); text-decoration-thickness: 2px;
  color: rgba(255, 250, 245, 0.55); margin: 0 4px;
}
.tk-stack-total strong {
  font-family: var(--display); font-weight: 700; font-size: 18px;
  background: linear-gradient(135deg, var(--pink), var(--lavender));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em; margin-left: 4px;
}

/* ---------- Minute-by-minute agenda ---------- */
.tk-agenda-sec {
  margin-top: 28px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 18px 20px;
}
.tk-agenda-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.tk-agenda-head .tk-aside { font-family: var(--body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-mute); }
.tk-agenda-line {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
@media (max-width: 760px) { .tk-agenda-line { grid-template-columns: 1fr; } }
.tk-agenda-line::before {
  content: ""; position: absolute; top: 22px; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--pink-deep), var(--lavender-deep));
  opacity: 0.18;
  z-index: 0;
}
@media (max-width: 760px) { .tk-agenda-line::before { display: none; } }
.tk-ag-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  padding: 12px 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 1;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.tk-ag-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(236, 72, 153, 0.32); }
.tk-ag-card .tk-ag-time {
  font-family: var(--display); font-weight: 700;
  font-size: 14px; line-height: 1; letter-spacing: -0.01em;
  color: var(--ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.tk-ag-card .tk-ag-time::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-deep), var(--lavender-deep));
}
.tk-ag-card .tk-ag-num {
  font-family: var(--italic); font-style: italic;
  font-size: 11px; color: var(--pink-deep); letter-spacing: 0.02em;
}
.tk-ag-card h4 {
  font-family: var(--display); font-weight: 600;
  font-size: 13.5px; line-height: 1.2; letter-spacing: -0.015em;
  margin: 2px 0 0; color: var(--ink);
}

/* ---------- Prep checklist ---------- */
.tk-prep-card {
  background: var(--ink); color: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  position: relative; overflow: hidden;
}
.tk-prep-card::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 10% 0%, rgba(252, 182, 207, 0.2), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(196, 181, 253, 0.2), transparent 40%);
  pointer-events: none;
}
.tk-prep-card > * { position: relative; }
.tk-prep-card .tk-stitle { color: #fff; }
.tk-prep-card .tk-stitle em { color: var(--pink); }
.tk-prep-card .tk-stitle .tk-pulse { background: var(--pink); }
.tk-prep-list { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 6px; }
.tk-prep-list li {
  display: grid; grid-template-columns: 22px 1fr;
  gap: 10px; align-items: center;
  padding: 6px 0;
  font-family: var(--body); font-size: 13px;
  color: rgba(255, 250, 245, 0.86);
  cursor: pointer;
  transition: color 200ms var(--ease);
}
.tk-prep-list li::before {
  content: ""; width: 18px; height: 18px; border-radius: 5px;
  border: 1.5px solid rgba(255, 250, 245, 0.4);
  background: rgba(255, 250, 245, 0.04);
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.tk-prep-list li:hover::before { border-color: var(--pink); }
.tk-prep-list li.is-checked { color: rgba(255, 250, 245, 0.5); text-decoration: line-through; text-decoration-color: var(--pink); text-decoration-thickness: 1.5px; }
.tk-prep-list li.is-checked::before {
  background: var(--pink-deep) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat;
  border-color: var(--pink-deep);
}
.tk-prep-list li b { color: #fff; font-weight: 700; }
.tk-prep-progress {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid rgba(255, 250, 245, 0.1);
  font-family: var(--body); font-size: 11px; font-weight: 600;
  color: rgba(255, 250, 245, 0.65);
  letter-spacing: 0.04em;
  display: flex; align-items: center; justify-content: space-between;
}
.tk-prep-progress strong { color: var(--pink); font-family: var(--display); font-size: 14px; }

/* ---------- Marti note (handwritten script) ---------- */
.tk-note {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 18px 22px;
  position: relative;
  transform: rotate(-0.4deg);
  box-shadow: 8px 8px 0 0 var(--lavender);
}
.tk-note::before {
  content: ""; position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(-3deg);
  width: 60px; height: 18px;
  background: rgba(245, 192, 106, 0.6);
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  border-right: 1px solid rgba(255, 255, 255, 0.4);
}
.tk-note .tk-from {
  font-family: var(--body); font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--pink-deep); margin: 0 0 10px;
}
.tk-note p {
  font-family: var(--script);
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 8px;
}
.tk-note p em { font-style: italic; color: var(--lavender-deep); }
.tk-note .tk-sig {
  font-family: var(--script);
  font-size: clamp(26px, 3vw, 32px);
  color: var(--pink-deep);
  margin-top: 6px;
  transform: rotate(-2deg);
  display: inline-block;
}

/* ---------- Member quotes wall ---------- */
.tk-quotes-sec { margin-top: 28px; }
.tk-quotes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 1100px) { .tk-quotes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tk-quotes { grid-template-columns: 1fr; } }
.tk-q-card {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(10px);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 10px;
  position: relative;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.tk-q-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px -18px rgba(236, 72, 153, 0.28); }
.tk-q-card .tk-q-top { display: flex; align-items: center; gap: 10px; }
.tk-q-card .tk-q-av {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink), var(--lavender));
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 14px;
  color: var(--ink);
  border: 2px solid #fff;
  flex-shrink: 0;
}
.tk-q-card .tk-q-meta { min-width: 0; }
.tk-q-card .tk-q-meta .n { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--ink); line-height: 1.1; }
.tk-q-card .tk-q-meta .h { font-family: var(--body); font-size: 10.5px; color: var(--ink-mute); margin-top: 2px; letter-spacing: 0.02em; }
.tk-q-card p {
  font-family: var(--body); font-size: 12.5px; line-height: 1.45;
  color: var(--ink-2); margin: 0; flex: 1;
}
.tk-q-card .tk-q-stat {
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  font-family: var(--body); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 9px; border-radius: 999px;
  background: var(--pink-wash); color: var(--pink-deep);
}
.tk-q-card .tk-q-stat::before { content: "↗"; }

/* ---------- Share + invite mini ---------- */
.tk-share {
  margin-top: 22px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  border: 1px dashed var(--hairline-2);
  border-radius: 14px;
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.tk-share .tk-share-l {
  font-family: var(--body); font-size: 13px; color: var(--ink);
}
.tk-share .tk-share-l b { color: var(--pink-deep); font-weight: 700; }
.tk-share .tk-share-r { display: flex; gap: 8px; }
.tk-share a {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--body); font-size: 12px; font-weight: 700;
  color: var(--ink); text-decoration: none;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 999px;
  transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.tk-share a:hover { background: var(--ink); color: #fff; }
.tk-share a.ig:hover { background: linear-gradient(135deg, #fd5949, #d6249f, #285AEB); border-color: transparent; }
.tk-share a.wa:hover { background: #25D366; border-color: #25D366; }

/* Section spacing override for thank-you below-fold blocks */
.tk-below { padding-bottom: 28px; }


/* ============================================================
   v6: emotional formatting layer
   live-dot, hero authority, fit-block, pain/solution split,
   info-gap, timeline, phone-fade, roadmap, calendar grid + modal,
   bonus stack, monthly Reprogrammed callout, annual math-box,
   ROI green + savings bar, profile/video frame strip
   ============================================================ */

/* ---------- v6 palette additions ---------- */
:root {
  --burgundy-deep: #2a1014;
  --burgundy-mid:  #3d1820;
  --burgundy-back: #1a0a0e;
  --burgundy-accent: #d44a4a;
  --sage-back: #f0f5ed;
  --sage-mid: #e6f0e0;
  --sage-soft: #f5fbf3;
  --sage-accent: #5a8060;
  --sage-deep: #3f5a44;
}

/* ---------- Hero LIVE broadcast indicator ---------- */
.live-w { position: relative; display: inline-flex; align-items: center; gap: 8px; }
.live-dot {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #ff3b3b;
  position: relative;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6);
  animation: livePulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  margin-right: 2px;
  vertical-align: middle;
  top: -0.08em;
}
.live-dot::after {
  content: ""; position: absolute; inset: 3px;
  background: #fff; border-radius: 50%;
  opacity: 0.55;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.55); }
  70%  { box-shadow: 0 0 0 12px rgba(255, 59, 59, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 59, 59, 0); }
}
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ---------- Hero authority mini-text under photo ---------- */
.hero-authority {
  margin-top: 18px;
  font-family: var(--italic);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-mute);
  text-align: center;
  max-width: 36ch;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.4;
}

/* ---------- Fit-block (Who this is for) ---------- */
.fit-block { padding: clamp(48px, 6vw, 80px) 0 clamp(24px, 4vw, 48px); }
.fit-headline {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 16px auto 0;
}
.fit-headline em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
.fit-row {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}
.fit-chip {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px;
  background: var(--pink-wash);
  border: 1px solid var(--pink-soft);
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
  transition: transform 320ms var(--ease), box-shadow 320ms var(--ease);
  opacity: 0;
  transform: translateY(14px);
  animation: chipIn 600ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.fit-chip:nth-child(1) { animation-delay: 0.1s; }
.fit-chip:nth-child(2) { animation-delay: 0.18s; background: var(--lavender-wash); border-color: var(--lavender-soft); }
.fit-chip:nth-child(3) { animation-delay: 0.26s; background: var(--sage-back); border-color: rgba(90, 128, 96, 0.2); }
.fit-chip:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -16px rgba(26, 13, 20, 0.22); }
.fit-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pink-deep);
}
.fit-chip:nth-child(2) .fit-dot { background: var(--lavender-deep); }
.fit-chip:nth-child(3) .fit-dot { background: var(--sage-accent); }
@keyframes chipIn { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .fit-chip { animation: none; opacity: 1; transform: none; } }

/* ---------- Pain vs Solution emotional split ---------- */
.split-section { padding: clamp(80px, 10vw, 130px) 0; position: relative; }
.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 40px 80px -30px rgba(26, 13, 20, 0.18);
}
@media (max-width: 880px) { .split-grid { grid-template-columns: 1fr; } }
.split-card {
  position: relative;
  padding: clamp(28px, 4vw, 48px);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform 600ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 600ms cubic-bezier(0.32, 0.72, 0, 1);
}
.split-card:hover { transform: translateY(-4px); }

/* PAIN column */
.split-pain {
  background: linear-gradient(135deg, var(--burgundy-mid) 0%, var(--burgundy-deep) 50%, var(--burgundy-back) 100%);
  color: rgba(255, 246, 240, 0.92);
}
.split-noise {
  position: absolute; inset: 0; pointer-events: none;
  opacity: 0.06;
  background-image: repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 1px, transparent 1.5px, transparent 4px);
  mix-blend-mode: overlay;
}
.split-pain:hover { box-shadow: inset 0 0 80px -10px rgba(212, 74, 74, 0.35); }
.split-pain .split-tag {
  align-self: flex-start;
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--burgundy-accent);
  padding: 6px 12px;
  background: rgba(212, 74, 74, 0.12);
  border: 1px solid rgba(212, 74, 74, 0.25);
  border-radius: var(--r-pill);
}
.split-pain .split-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 42px);
  margin: 18px 0 22px;
  color: #fff5f0;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.split-pain .split-list .mark {
  color: var(--burgundy-accent);
  font-weight: 700;
}
.split-pain .split-close {
  font-family: var(--italic);
  font-style: italic;
  font-size: 17px;
  color: var(--burgundy-accent);
  margin-top: 22px;
  opacity: 0.9;
}

/* SOLUTION column */
.split-solution {
  background: linear-gradient(135deg, var(--sage-back) 0%, var(--sage-mid) 50%, var(--sage-soft) 100%);
  color: var(--ink);
}
.split-solution:hover { box-shadow: inset 0 0 80px -10px rgba(90, 128, 96, 0.25); }
.split-solution .split-tag {
  align-self: flex-start;
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sage-deep);
  padding: 6px 12px;
  background: rgba(90, 128, 96, 0.1);
  border: 1px solid rgba(90, 128, 96, 0.25);
  border-radius: var(--r-pill);
}
.split-solution .split-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(28px, 3.5vw, 42px);
  margin: 18px 0 22px;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.05;
}
.split-solution .split-list .mark {
  color: var(--sage-accent);
  font-weight: 700;
}
.split-solution .split-close {
  font-family: var(--italic);
  font-style: italic;
  font-size: 17px;
  color: var(--sage-deep);
  margin-top: 22px;
  opacity: 0.95;
}

.split-list {
  list-style: none; padding: 0; margin: 20px 0 0;
  display: flex; flex-direction: column; gap: 10px;
}
.split-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--body);
  font-size: 15.5px;
  line-height: 1.45;
}
.split-list .mark {
  flex: 0 0 18px;
  font-size: 17px;
  line-height: 1.2;
}

/* Mock chat UI (shared) */
.split-mockup {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 14px;
  margin: 18px 0 4px;
  font-size: 12.5px;
  line-height: 1.4;
}
.split-solution .split-mockup {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(90, 128, 96, 0.18);
  box-shadow: 0 8px 24px -14px rgba(26, 13, 20, 0.18);
}
.mock-header {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}
.mock-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: #666;
}
.mock-dot.r { background: #ff5f56; }
.mock-dot.y { background: #ffbd2e; }
.mock-dot.g { background: #28c840; }
.mock-label {
  margin-left: 8px;
  font-size: 10.5px; letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
  font-weight: 600;
}
.mock-body { display: flex; flex-direction: column; gap: 8px; }
.mock-bubble {
  padding: 8px 12px;
  border-radius: 12px;
  font-family: var(--body);
  max-width: 90%;
}
.mock-bubble.user {
  align-self: flex-end;
  background: rgba(255, 255, 255, 0.12);
  color: inherit;
  font-weight: 500;
}
.split-solution .mock-bubble.user { background: rgba(90, 128, 96, 0.12); color: var(--ink); }
.mock-bubble.ai {
  align-self: flex-start;
  background: rgba(212, 74, 74, 0.08);
  color: rgba(255, 220, 215, 0.85);
}
.split-solution .mock-bubble.ai {
  background: rgba(255, 255, 255, 0.95);
  color: var(--ink);
  border: 1px solid rgba(90, 128, 96, 0.18);
}
.mock-strike {
  text-decoration: line-through wavy var(--burgundy-accent);
  text-decoration-thickness: 1.5px;
  opacity: 0.7;
}
.mock-retry {
  align-self: flex-start;
  padding: 5px 12px;
  background: rgba(212, 74, 74, 0.2);
  border: 1px solid rgba(212, 74, 74, 0.4);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--burgundy-accent);
  letter-spacing: 0.04em;
  margin-top: 2px;
}
.mock-check {
  align-self: flex-start;
  padding: 6px 12px;
  background: rgba(90, 128, 96, 0.15);
  border: 1px solid rgba(90, 128, 96, 0.35);
  border-radius: var(--r-pill);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--sage-deep);
  letter-spacing: 0.02em;
}
.mock-publish {
  align-self: stretch;
  padding: 9px;
  background: var(--sage-accent);
  color: #fff;
  text-align: center;
  border-radius: 12px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

/* ---------- Info-gap callout (Claude path) ---------- */
.info-gap {
  position: relative;
  background: linear-gradient(135deg, var(--pink-wash) 0%, var(--lavender-wash) 100%);
  border: 1px solid var(--pink-soft);
  border-radius: 20px;
  padding: 24px 28px;
  margin: 0 0 56px;
  max-width: 760px;
  overflow: hidden;
}
.info-gap::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--pink-deep) 0%, var(--lavender-deep) 50%, var(--pink-deep) 100%);
  background-size: 200% 100%;
  animation: gapSweep 4s linear infinite;
}
@keyframes gapSweep {
  from { background-position: 0% 0%; }
  to   { background-position: -200% 0%; }
}
.info-gap-label {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pink-deep);
  margin-bottom: 10px;
}
.info-gap-label .lock { font-size: 14px; line-height: 1; }
.info-gap p {
  font-family: var(--body);
  font-size: clamp(16px, 1.5vw, 18px);
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}
.info-gap p em { font-family: var(--italic); font-style: italic; color: var(--pink-deep); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .info-gap::before { animation: none; } }

/* ---------- Path-step sub-label ---------- */
.path-step .sub {
  font-family: var(--italic);
  font-style: italic;
  font-size: 14.5px;
  color: var(--pink-deep);
  margin: 4px 0 8px;
  line-height: 1.3;
}

/* ---------- Phone-card single-active fade ---------- */
.phone-cards {
  position: relative;
  min-height: 380px;
}
.phone-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 480ms cubic-bezier(0.32, 0.72, 0, 1), transform 480ms cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}
.phone-card.active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) { .phone-card { transition: none; } }

/* ---------- Timeline callout under Claude Path ---------- */
.timeline-callout {
  margin: 56px auto 0;
  max-width: 640px;
  text-align: center;
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--sage-back) 0%, var(--sage-soft) 100%);
  border: 1px solid rgba(90, 128, 96, 0.25);
  border-radius: 20px;
}
.timeline-label {
  display: inline-block;
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sage-deep);
  padding: 5px 12px;
  background: rgba(90, 128, 96, 0.12);
  border-radius: var(--r-pill);
  margin-bottom: 12px;
}
.timeline-callout p {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.timeline-callout p em { font-family: var(--italic); font-style: italic; color: var(--sage-deep); font-weight: 500; }
.timeline-callout p.sub {
  font-family: var(--body);
  font-weight: 400;
  font-size: 14.5px;
  color: var(--ink-mute);
  margin-top: 8px;
  letter-spacing: 0.01em;
}

/* ---------- Roadmap card styles (variant of chap-card) ---------- */
.roadmap-section { background: linear-gradient(180deg, transparent 0%, rgba(252,182,207,0.03) 50%, transparent 100%); }
.road-card {
  flex: 0 0 clamp(300px, 28vw, 360px) !important;
  background: #fff;
}
.road-card .chap-body { padding: 24px 22px 22px; }
.road-card .road-body { display: flex; flex-direction: column; gap: 12px; padding: 24px 22px 22px; flex: 1; }
.road-head {
  display: flex; flex-direction: column; gap: 6px;
}
.road-month {
  font-family: var(--body);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
}
.road-badge {
  font-family: var(--display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.road-arc {
  font-family: var(--italic);
  font-style: italic;
  font-size: 14.5px;
  color: var(--pink-deep);
  margin: 0;
  line-height: 1.3;
}
.road-arc em { font-style: italic; }
.road-unlock-label {
  font-family: var(--body);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}
.road-unlocks {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.road-unlocks li {
  position: relative;
  padding-left: 16px;
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
.road-unlocks li::before {
  content: "✓";
  position: absolute; left: 0; top: 0;
  color: var(--pink-deep);
  font-weight: 700;
}
.road-mini {
  font-family: var(--italic);
  font-style: italic;
  color: var(--ink-mute);
  font-size: 12.5px;
}
.road-result {
  font-family: var(--body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sage-deep);
  padding: 10px 14px;
  background: var(--sage-back);
  border-radius: 12px;
  border-left: 3px solid var(--sage-accent);
  margin-top: 4px;
}
.road-tier {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--hairline);
}
.tier-pill {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.tier-pill.mo { background: rgba(196, 181, 253, 0.18); color: var(--lavender-deep); }
.tier-pill.an { background: rgba(236, 72, 153, 0.14); color: var(--pink-deep); }
/* Warming gradient across the 6-month arc */
.road-m1 .road-badge { color: var(--lavender-deep); }
.road-m2 .road-badge { color: var(--pink-deep); }
.road-m3 .road-badge { color: #c43c7a; }
.road-m4 .road-badge { color: #c75a8a; }
.road-m5 .road-badge { color: #c47a4f; }
.road-m6 .road-badge { color: #b08040; }
.road-m7 .road-badge { color: #8a6038; }
.road-foot {
  text-align: center;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink-mute);
  max-width: 56ch;
  margin: 24px auto 0;
  line-height: 1.5;
}

/* ---------- Interactive Calendar grid ---------- */
.cal-legend {
  display: flex; gap: 12px; flex-wrap: wrap;
  justify-content: center;
  margin: 0 auto 32px;
}
.leg-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #fff;
  border: 1px solid var(--hairline);
}
.leg-dot { width: 9px; height: 9px; border-radius: 50%; }
.leg-ca .leg-dot { background: var(--pink); }
.leg-as .leg-dot { background: var(--lavender-deep); }
.leg-qa .leg-dot { background: var(--gold); }

.cal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .cal-grid { grid-template-columns: repeat(5, minmax(120px, 1fr)); overflow-x: auto; padding-bottom: 8px; }
}
.cal-day-col {
  display: flex; flex-direction: column; gap: 8px;
}
.cal-day-head {
  text-align: center;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--hairline);
}
.cal-event {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--hairline);
  background: #fff;
  cursor: pointer;
  font-family: var(--body);
  text-align: left;
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 200ms var(--ease);
  position: relative;
  overflow: hidden;
}
.cal-event::before {
  content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 3px;
}
.cal-event.ev-ca::before { background: var(--pink); }
.cal-event.ev-as::before { background: var(--lavender-deep); }
.cal-event.ev-qa::before { background: var(--gold); }
.cal-event:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(26, 13, 20, 0.25); }
.cal-event.ev-ca:hover { border-color: rgba(236, 72, 153, 0.4); }
.cal-event.ev-as:hover { border-color: rgba(139, 92, 246, 0.4); }
.cal-event.ev-qa:hover { border-color: rgba(247, 178, 102, 0.4); }
.ev-time {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.ev-name {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  margin-top: 2px;
}
.ev-foot {
  font-family: var(--italic);
  font-style: italic;
  font-size: 11px;
  color: var(--ink-mute);
  margin-top: 4px;
}
.cal-foot {
  text-align: center;
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink-mute);
  margin: 32px auto 0;
  max-width: 56ch;
  line-height: 1.5;
}
.cal-foot em { font-family: var(--italic); font-style: italic; }

/* Calendar Modal */
.cal-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.cal-modal[hidden] { display: none; }
.cal-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(26, 13, 20, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 360ms cubic-bezier(0.32, 0.72, 0, 1);
}
.cal-modal-card {
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 32px clamp(24px, 4vw, 40px);
  max-width: 520px;
  width: 100%;
  box-shadow: 0 60px 120px -30px rgba(26, 13, 20, 0.45);
  transform: translateY(24px);
  opacity: 0;
  transition: opacity 360ms cubic-bezier(0.32, 0.72, 0, 1), transform 360ms cubic-bezier(0.32, 0.72, 0, 1);
}
.cal-modal.open .cal-modal-backdrop { opacity: 1; }
.cal-modal.open .cal-modal-card { opacity: 1; transform: translateY(0); }
.cal-modal-close {
  position: absolute; top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--pink-wash);
  border: none;
  font-size: 22px;
  color: var(--ink);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background 200ms var(--ease);
}
.cal-modal-close:hover { background: var(--pink-soft); }
.cal-modal-tag {
  display: inline-block;
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pink-deep);
  background: var(--pink-wash);
  padding: 5px 12px;
  border-radius: var(--r-pill);
  margin-bottom: 14px;
}
.cal-modal-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  margin: 0 0 18px;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.cal-modal-meta {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px 16px;
  margin: 0 0 18px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.cal-modal-meta dt {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 2px;
}
.cal-modal-meta dd {
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
  margin: 0;
  line-height: 1.4;
}
.cal-modal-card p {
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* ---------- Bonus Stack section ---------- */
.bonus-stack-section { padding: clamp(72px, 9vw, 110px) 0; background: linear-gradient(180deg, transparent 0%, rgba(252,182,207,0.04) 100%); }
.stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 880px) { .stack-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stack-grid { grid-template-columns: 1fr; } }
.stack-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 380ms cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 12px 28px -16px rgba(26, 13, 20, 0.16);
  touch-action: auto;
}
.stack-card:hover {
  transform: translateY(-8px) scale(1.012);
  box-shadow: 0 38px 70px -22px rgba(236, 72, 153, 0.28), 0 16px 32px -16px rgba(139, 92, 246, 0.18);
}
.stack-card.stack-featured {
  border-color: var(--pink-soft);
  box-shadow: 0 18px 40px -18px rgba(236, 72, 153, 0.28);
}
.stack-img {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--pink-wash);
}
.stack-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 700ms var(--ease);
}
.stack-card:hover .stack-img img { transform: scale(1.06); }
.stack-body {
  padding: 18px 20px 20px;
  display: flex; flex-direction: column; gap: 8px;
  flex: 1;
}
.stack-body h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.stack-body h3 sup { font-size: 0.55em; color: var(--pink-deep); top: -0.65em; position: relative; }
.stack-body p {
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0;
  flex: 1;
}
.stack-value {
  display: inline-flex; align-self: flex-start;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: linear-gradient(135deg, var(--pink-wash), var(--lavender-wash));
  border: 1px solid var(--pink-soft);
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pink-deep);
  margin-top: 4px;
}
.stack-total {
  margin: 48px auto 0;
  max-width: 480px;
  text-align: center;
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--pink-wash) 0%, var(--lavender-wash) 100%);
  border: 1px solid var(--pink-soft);
  border-radius: 20px;
}
.stack-total-label {
  display: block;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}
.stack-total-value {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(34px, 4.5vw, 52px);
  line-height: 1;
  color: var(--pink-deep);
  letter-spacing: -0.02em;
}
.stack-total-note {
  margin: 12px 0 0;
  font-family: var(--italic);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
}

/* ---------- Monthly bonus callout (Reprogrammed) ---------- */
.monthly-bonus {
  display: flex; gap: 16px;
  padding: 16px;
  margin: 20px 0 24px;
  background: linear-gradient(135deg, rgba(252, 182, 207, 0.18) 0%, rgba(196, 181, 253, 0.12) 100%);
  border: 1px solid var(--pink-soft);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.monthly-bonus::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--pink-deep) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: gapSweep 4s linear infinite;
}
.mb-img {
  flex: 0 0 90px;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.6);
}
.mb-img img { width: 100%; height: 100%; object-fit: cover; }
.mb-body { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.mb-tag {
  display: inline-block;
  font-family: var(--body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pink-deep);
  margin-bottom: 2px;
  width: max-content;
}
.mb-body h4 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.mb-body h4 em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
.mb-body p {
  font-family: var(--body);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0;
}
.mb-value { font-family: var(--body); font-size: 13px; font-weight: 600; margin-top: 4px; }
.strike-small { text-decoration: line-through; color: var(--ink-mute); margin-right: 8px; }
.mb-free {
  color: #047857;
  background: rgba(16, 185, 129, 0.20);
  padding: 4px 11px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(16, 185, 129, 0.55);
  font-weight: 800;
  letter-spacing: 0.05em;
  font-size: 13px;
  text-transform: uppercase;
  display: inline-block;
  animation: mb-free-pulse 1.5s ease-in-out infinite;
}
@keyframes mb-free-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
  50% { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}
@media (prefers-reduced-motion: reduce) { .mb-free { animation: none; } }

/* ---------- Annual price card: math reveal box + value-stack list ---------- */
.feat-label {
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 18px 0 8px;
}
.feat-label .muted { color: var(--ink-mute); opacity: 0.6; text-transform: none; letter-spacing: 0; font-weight: 500; }
.feat-list.tight li { padding-left: 0; }
.value-stack {
  list-style: none;
  padding: 0; margin: 0 0 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.value-stack li {
  display: flex; align-items: baseline; justify-content: space-between;
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink);
  padding: 6px 12px;
  background: rgba(252, 182, 207, 0.08);
  border-radius: 10px;
}
.value-stack li sup { font-size: 0.6em; color: var(--pink-deep); position: relative; top: -0.6em; }
.vv {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--pink-deep);
  letter-spacing: -0.005em;
  margin-left: 12px;
}
.math-box {
  background: var(--cream, #fffbf5);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 18px 0;
}
.math-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--body);
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 5px 0;
}
.math-row.math-total {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  border-top: 1.5px dashed var(--hairline);
  padding-top: 10px;
  margin-top: 6px;
  text-decoration: line-through;
  text-decoration-color: rgba(236, 72, 153, 0.5);
  text-decoration-thickness: 2px;
}
.math-row.math-pay {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16.5px;
  color: var(--pink-deep);
}
.math-row.math-save {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15.5px;
  color: var(--sage-deep);
  background: rgba(90, 128, 96, 0.08);
  padding: 8px 12px;
  border-radius: 10px;
  margin-top: 6px;
}

/* ---------- ROI: green tint + savings bar + reset ---------- */
.roi-green {
  background: linear-gradient(135deg, var(--sage-soft) 0%, var(--sage-back) 100%) !important;
  border: 1px solid rgba(90, 128, 96, 0.18) !important;
}
.roi-input .hint { color: var(--ink-mute); font-family: var(--italic); font-style: italic; font-size: 12px; font-weight: 400; }
.roi-input input {
  font-size: 22px;
  padding: 12px 16px;
}
.roi-bar {
  width: 100%; height: 6px;
  background: rgba(90, 128, 96, 0.15);
  border-radius: var(--r-pill);
  margin: 10px 0 8px;
  overflow: hidden;
}
.roi-bar-fill {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, var(--sage-accent) 0%, var(--pink-deep) 100%);
  border-radius: var(--r-pill);
  transition: width 480ms cubic-bezier(0.32, 0.72, 0, 1);
}
.roi-breakdown {
  font-family: var(--body);
  font-size: 12.5px;
  color: var(--ink-mute);
  margin-bottom: 8px;
  letter-spacing: 0.02em;
}
.roi-annual {
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
  margin: 8px 0;
}
.roi-annual strong {
  font-family: var(--display);
  font-weight: 700;
  color: var(--sage-deep);
  font-size: 16px;
}
.roi-reset {
  margin-top: 6px;
  padding: 8px 16px;
  background: transparent;
  border: 1px dashed rgba(90, 128, 96, 0.4);
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  color: var(--sage-deep);
  cursor: pointer;
  width: max-content;
  letter-spacing: 0.02em;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.roi-reset:hover { background: rgba(90, 128, 96, 0.08); border-color: var(--sage-accent); }
.zl-suffix { font-size: 0.55em; -webkit-text-fill-color: var(--sage-deep); color: var(--sage-deep); }

/* ---------- Profile + video cards: STRIP THE FRAME ---------- */
.profile-card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 28px;
  overflow: hidden;
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 380ms cubic-bezier(0.32, 0.72, 0, 1);
}
.profile-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -20px rgba(26, 13, 20, 0.28) !important;
}
.profile-meta { display: none !important; }

.video-card {
  background: transparent !important;
  border-radius: 26px;
  box-shadow: none !important;
  overflow: hidden;
}
.video-card .overlay { background: none !important; }
.video-card:hover { box-shadow: 0 24px 48px -20px rgba(26, 13, 20, 0.28) !important; }


/* ============================================================
   v7 readability + emotion fixes
   ============================================================ */

/* Fix unreadable italic at small sizes — keep big italic in headlines, use body italic elsewhere */
.info-gap p em,
.split-close,
.cal-foot em,
.road-arc,
.road-arc em,
.timeline-callout p em,
.timeline-callout p.sub,
.mb-body h4 em,
.fit-headline em,
.stack-total-note,
.roi-input .hint,
.road-mini,
.road-result em,
.lead.large[style*="italic"] {
  font-family: var(--body) !important;
  font-style: italic;
  font-weight: 500;
}
.split-close { font-weight: 600; font-size: 16px; letter-spacing: 0.005em; }
.cal-foot em { font-weight: 500; font-style: italic; }
.road-arc { font-size: 14px; font-weight: 500; color: var(--pink-deep); letter-spacing: -0.005em; }
.info-gap p em { color: var(--pink-deep); font-weight: 600; }
.timeline-callout p em { font-weight: 700; color: var(--sage-deep); }

/* ---------- Highlight + bold emphasis helpers (skim-friendly) ---------- */
.hi {
  background: linear-gradient(180deg, transparent 60%, var(--pink-wash) 60%);
  padding: 0 3px;
  font-weight: 600;
  color: var(--ink);
}
.hi-lav {
  background: linear-gradient(180deg, transparent 60%, var(--lavender-wash) 60%);
  padding: 0 3px;
  font-weight: 600;
  color: var(--ink);
}
.hi-sage {
  background: linear-gradient(180deg, transparent 60%, var(--sage-back) 60%);
  padding: 0 3px;
  font-weight: 600;
  color: var(--ink);
}
.pop {
  color: var(--pink-deep);
  font-weight: 700;
}
.pop-sage { color: var(--sage-deep); font-weight: 700; }
.under {
  text-decoration: underline wavy var(--pink);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  font-weight: 600;
}

/* ---------- Inline section CTAs ---------- */
.section-cta {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  margin: 56px auto 0;
  padding: 28px 24px;
  background: linear-gradient(135deg, var(--pink-wash) 0%, var(--lavender-wash) 100%);
  border-radius: 24px;
  border: 1px solid var(--pink-soft);
  max-width: 640px;
}
.section-cta p {
  font-family: var(--display);
  font-size: clamp(16px, 1.8vw, 20px);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
  line-height: 1.3;
}
.section-cta p em {
  font-family: var(--body);
  font-style: italic;
  font-weight: 600;
  color: var(--pink-deep);
}

/* ---------- Sticky bottom CTA bar ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0;
  bottom: 0;
  z-index: 50;
  padding: 12px clamp(16px, 3vw, 28px);
  background: rgba(255, 250, 245, 0.94);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--hairline);
  box-shadow: 0 -12px 36px -10px rgba(26, 13, 20, 0.12);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transform: translateY(110%);
  transition: transform 460ms cubic-bezier(0.32, 0.72, 0, 1);
}
.sticky-cta.visible { transform: translateY(0); }
.sticky-cta-msg {
  display: flex; flex-direction: column;
  gap: 2px;
  flex: 1; min-width: 0;
}
.sticky-cta-headline {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-cta-sub {
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.sticky-cta-sub strong { color: var(--pink-deep); font-weight: 700; font-family: var(--display); }
.sticky-cta .btn { flex-shrink: 0; }
@media (max-width: 560px) {
  .sticky-cta-sub { display: none; }
  .sticky-cta { padding: 10px 14px; gap: 10px; }
  .sticky-cta-headline { font-size: 13px; }
  .sticky-cta .btn { padding: 8px 14px !important; font-size: 12px !important; }
}

/* ---------- Phone demo (Claude builds a landing page) ---------- */
.phone-demo {
  padding: 18px 16px;
  display: flex; flex-direction: column; gap: 10px;
  height: 100%;
  overflow: hidden;
}
.demo-prompt {
  align-self: flex-end;
  background: var(--lavender-wash);
  padding: 8px 12px;
  border-radius: 14px 14px 4px 14px;
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink);
  max-width: 85%;
  line-height: 1.35;
  opacity: 0;
  transform: translateY(8px);
  animation: demoIn 400ms cubic-bezier(0.32, 0.72, 0, 1) 0.3s forwards;
}
.demo-thinking {
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 12px;
  background: rgba(252, 182, 207, 0.1);
  border-radius: 14px 14px 14px 4px;
  border-left: 2px solid var(--pink);
  max-width: 92%;
}
.demo-step {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-2);
  opacity: 0;
  transform: translateX(-4px);
  animation: demoStep 350ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
.demo-step .dcheck {
  display: inline-grid; place-items: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--pink-wash);
  color: var(--pink-deep);
  font-size: 9px;
  font-weight: 700;
  flex-shrink: 0;
}
.demo-step.done .dcheck { background: var(--sage-back); color: var(--sage-deep); }
.demo-step:nth-child(1) { animation-delay: 1.0s; }
.demo-step:nth-child(2) { animation-delay: 1.8s; }
.demo-step:nth-child(3) { animation-delay: 2.6s; }
.demo-step:nth-child(4) { animation-delay: 3.4s; }
.demo-result {
  margin-top: 6px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  font-family: var(--body);
  font-size: 10.5px;
  color: var(--ink);
  opacity: 0;
  transform: translateY(8px);
  animation: demoIn 500ms cubic-bezier(0.32, 0.72, 0, 1) 4.4s forwards;
  overflow: hidden;
  flex: 1;
}
.demo-site {
  display: flex; flex-direction: column; gap: 6px;
  height: 100%;
}
.demo-site-hero {
  background: linear-gradient(135deg, var(--pink-wash), var(--lavender-wash));
  padding: 10px;
  border-radius: 8px;
  display: flex; flex-direction: column; gap: 4px;
}
.demo-site-hero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 11.5px;
  color: var(--ink);
  line-height: 1.15;
}
.demo-site-hero-sub {
  font-size: 9px;
  color: var(--ink-mute);
  line-height: 1.3;
}
.demo-site-cta {
  padding: 6px;
  background: var(--pink-deep);
  color: #fff;
  border-radius: 6px;
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.03em;
  margin-top: 2px;
}
.demo-site-line {
  height: 4px;
  background: var(--hairline);
  border-radius: 2px;
}
.demo-site-line.short { width: 60%; }
.demo-published {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  background: rgba(90, 128, 96, 0.12);
  border-radius: 8px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--sage-deep);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 4px;
}
.demo-published::before { content: "✓"; }

@keyframes demoIn { to { opacity: 1; transform: translateY(0); } }
@keyframes demoStep { to { opacity: 1; transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .demo-prompt, .demo-step, .demo-result { animation: none; opacity: 1; transform: none; }
}

/* ---------- Tighter mock chat thinking-state for split solution ---------- */
.mock-thinking {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(90, 128, 96, 0.18);
  border-radius: 12px;
  box-shadow: 0 4px 12px -6px rgba(26, 13, 20, 0.08);
  font-family: var(--body);
  font-size: 11.5px;
  line-height: 1.4;
}
.mock-thinking-label {
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--sage-deep);
}
.mock-thinking-line {
  display: flex; align-items: center; gap: 6px;
  color: var(--ink-2);
}
.mock-thinking-line .tcheck {
  display: inline-grid; place-items: center;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: rgba(90, 128, 96, 0.18);
  color: var(--sage-deep);
  font-size: 8.5px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Sticky CTA bar text fade for rotation */
.sticky-cta-headline, .sticky-cta-sub { transition: opacity 280ms ease; }

/* Match motion.js .stick-cta class with our styles */
.stick-cta { /* same as .sticky-cta block above */ }
.stick-cta.sticky-cta { /* both apply */ }

/* The motion.js sets .visible — our class already handles that. Belt+suspenders: */
.stick-cta.visible { transform: translateY(0); }


/* ============================================================
   v7b: small centered transparent sticky pill (replaces full-width bar)
   ============================================================ */
.sticky-pill {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%) translateY(140%);
  z-index: 60;
  max-width: calc(100% - 32px);
  width: max-content;
  padding: 6px 6px 6px 18px;
  background: rgba(255, 250, 245, 0.62);
  backdrop-filter: saturate(180%) blur(28px);
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--r-pill);
  box-shadow: 0 18px 40px -12px rgba(26, 13, 20, 0.18), 0 4px 12px -4px rgba(26, 13, 20, 0.06);
  transition: transform 460ms cubic-bezier(0.32, 0.72, 0, 1), background 220ms var(--ease);
  pointer-events: none;
}
.sticky-pill.visible { transform: translateX(-50%) translateY(0); pointer-events: auto; }
.sticky-pill:hover { background: rgba(255, 250, 245, 0.82); }
.pill-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
}
.pill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.55);
  animation: livePulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  flex-shrink: 0;
}
.pill-msg {
  font-size: 12.5px;
  letter-spacing: -0.005em;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56vw;
  transition: opacity 240ms ease;
}
.pill-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--cream, #fffbf5);
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.pill-cta svg {
  width: 12px; height: 12px;
  fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
}
.sticky-pill:hover .pill-cta { background: var(--pink-deep); }
@media (max-width: 560px) {
  .pill-msg { max-width: 38vw; font-size: 11.5px; }
  .pill-cta { padding: 7px 12px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .pill-dot { animation: none; } }

/* Kill the previous full-width sticky styles in case they applied via older class */
.sticky-cta:not(.sticky-pill) { display: none !important; }

/* ============================================================
   Profile + video card frame strip — belt-and-suspenders
   ============================================================ */
.profiles-grid .profile-card,
.videos-row .video-card {
  background: transparent !important;
  border: 0 !important;
  box-shadow: 0 18px 36px -22px rgba(26, 13, 20, 0.18) !important;
}
.profiles-grid .profile-card:hover,
.videos-row .video-card:hover {
  box-shadow: 0 28px 54px -22px rgba(26, 13, 20, 0.32) !important;
}
.profiles-grid .profile-img,
.profiles-grid .profile-card,
.videos-row .video-card { border-radius: 26px !important; overflow: hidden; }
.videos-row .video-card .overlay { background: transparent !important; }
.profile-meta { display: none !important; }
/* Keep stars + play visible because they signal "this is a video" */

/* ============================================================
   Phone demo: make the rendered mini-site SCROLLABLE inside phone
   ============================================================ */
.phone-card.brand .phone-demo {
  display: flex; flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 14px 12px 12px;
}
.phone-card.brand .demo-result {
  overflow-y: auto;
  /* -webkit-overflow-scrolling removed — obsolete and can trap touch on modern iOS Safari */
  max-height: 240px;
  scrollbar-width: thin;
  scrollbar-color: var(--pink-soft) transparent;
  padding: 10px;
}
.phone-card.brand .demo-result::-webkit-scrollbar { width: 4px; }
.phone-card.brand .demo-result::-webkit-scrollbar-thumb { background: var(--pink-soft); border-radius: 2px; }
.phone-card.brand .demo-site { gap: 8px; }
.phone-card.brand .demo-site-section {
  padding: 8px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: #fff;
  font-size: 9.5px;
  color: var(--ink-2);
  line-height: 1.4;
}
.phone-card.brand .demo-site-section h5 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 10.5px;
  color: var(--ink);
  margin: 0 0 4px;
}
.phone-card.brand .demo-mini-cta {
  padding: 7px;
  background: var(--pink-deep);
  color: #fff;
  border-radius: 7px;
  text-align: center;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.phone-card.brand .demo-mini-cta.outline { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.phone-card.brand .demo-mini-row {
  display: flex; gap: 6px;
}
.phone-card.brand .demo-mini-row .ava {
  flex: 0 0 18px; height: 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-wash), var(--lavender-wash));
}
.phone-card.brand .demo-mini-stars { color: var(--gold); font-size: 9px; letter-spacing: 1.5px; }
.phone-card.brand .demo-scroll-hint {
  position: sticky;
  top: 0;
  text-align: center;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  padding: 4px 0;
  background: linear-gradient(180deg, #fff 60%, rgba(255, 255, 255, 0));
  font-weight: 600;
  z-index: 2;
}


/* ================================================================
 * THANK YOU v2 (.t-) — simple, 5-step, concise
 * Replaces .tk- + .tk2- approach. One clean flow.
 * ================================================================ */

.t-page { background: var(--bg); }

/* ---------- Red urgency banner (2 lines, mobile-fit) ---------- */
.t-banner {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, #c41e3a 0%, #a01828 100%);
  color: #fff;
  text-align: center;
  padding: 9px 14px;
  font-family: var(--body);
  position: relative; overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 4px 16px -4px rgba(196, 30, 58, 0.4);
}
.t-banner::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18), transparent 60%);
  animation: t-banner-pulse 2.2s var(--ease-soft) infinite;
}
@keyframes t-banner-pulse {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 1; }
}
.t-banner > * { position: relative; z-index: 1; }
.t-banner .t-row {
  display: flex; align-items: center; justify-content: center;
  gap: 9px; flex-wrap: nowrap;
}
.t-banner .t-warn {
  display: inline-flex; flex-shrink: 0;
  width: 22px; height: 22px;
  align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 14px;
  color: #c41e3a; background: #fff;
  border-radius: 50%;
  animation: t-warn-pulse 1.4s var(--ease-soft) infinite;
}
@keyframes t-warn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
  70%      { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}
.t-banner .t-main {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
@media (max-width: 480px) {
  .t-banner { padding: 8px 12px; }
  .t-banner .t-main { font-size: 11.5px; letter-spacing: 0; }
  .t-banner .t-warn { width: 20px; height: 20px; font-size: 12px; }
}
@media (max-width: 360px) {
  .t-banner .t-main { font-size: 10.5px; }
}

/* ---------- Spots progress banner (very thin, red urgency) ---------- */
.t-spots {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 16px 6px;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
  font-family: var(--body); font-size: 10.5px; font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.02em;
}
.t-spots .t-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--display); font-weight: 700; font-size: 11px;
  letter-spacing: -0.005em;
  color: var(--ink);
  white-space: nowrap; flex-shrink: 0;
}
.t-spots .t-pill b { color: #c41e3a; font-weight: 700; }
.t-spots .t-bar {
  flex: 1; height: 3px; min-width: 60px;
  background: rgba(196, 30, 58, 0.12);
  border-radius: 999px; overflow: hidden;
  position: relative;
}
.t-spots .t-fill {
  height: 100%; width: 72%;
  background: linear-gradient(90deg, #c41e3a 0%, #d6304b 100%);
  border-radius: 999px;
  position: relative;
}
.t-spots .t-fill::after {
  content: ""; position: absolute; top: 50%; right: -2px; transform: translateY(-50%);
  width: 5px; height: 5px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 0 5px 1px rgba(196, 30, 58, 0.7);
  animation: t-spot-glow 1.6s var(--ease-soft) infinite;
}
@keyframes t-spot-glow {
  0%, 100% { box-shadow: 0 0 4px 1px rgba(196, 30, 58, 0.35); }
  50%      { box-shadow: 0 0 8px 2px rgba(196, 30, 58, 0.85); }
}
@media (max-width: 600px) {
  .t-spots { gap: 8px; padding: 5px 12px 6px; font-size: 10px; }
  .t-spots .t-pill { font-size: 10.5px; }
}

/* ---------- Mini countdown + date/location (thin text line) ---------- */
.t-mini {
  display: flex; justify-content: center; align-items: center;
  gap: 10px; flex-wrap: wrap;
  padding: 14px 16px 0;
  font-family: var(--body); font-size: 11.5px; font-weight: 500;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.t-mini .t-cd {
  font-family: var(--display); font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em; font-size: 12px;
  background: linear-gradient(135deg, var(--pink-deep), var(--lavender-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
.t-mini .t-cd span { color: var(--ink-mute); -webkit-text-fill-color: var(--ink-mute); margin: 0 1px 0 -1px; font-weight: 500; }
.t-mini .t-dot-sep {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ink-mute); opacity: 0.4;
  display: inline-block;
}
.t-mini .t-when { color: var(--ink); font-weight: 600; }
.t-mini .t-where { color: var(--ink); font-weight: 700; }
.t-mini .t-where::after { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--pink-deep); margin-left: 6px; vertical-align: 1px; }

/* ---------- Wrap ---------- */
.t-wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 32px) 14px; }

/* ---------- Intro header ---------- */
.t-intro {
  text-align: center; margin: 0 0 24px;
}
.t-intro h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.18; letter-spacing: -0.02em;
  margin: 0 0 8px; color: var(--ink);
}
.t-intro h1 em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
/* Highlighter sweep on "confirm your spot." */
.t-intro h1 .t-highlight {
  font-family: var(--display);
  font-weight: 600;
  font-style: normal;
  color: var(--ink);
  position: relative;
  display: inline-block;
  white-space: nowrap;
  padding: 0 4px;
  isolation: isolate;
}
.t-intro h1 .t-highlight::before {
  content: "";
  position: absolute;
  inset: 48% -2px -2px -2px;
  background: linear-gradient(180deg, rgba(252, 182, 207, 0.92) 0%, rgba(252, 182, 207, 0.62) 100%);
  z-index: -1;
  border-radius: 3px;
  transform: scaleX(0);
  transform-origin: left center;
  animation: t-hl-sweep 1.6s cubic-bezier(0.42, 0, 0.58, 1) 0.5s forwards;
}
@keyframes t-hl-sweep {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}
.t-intro h1 .t-highlight::after {
  content: "";
  position: absolute;
  inset: 48% -2px -2px -2px;
  border-radius: 3px;
  z-index: -1;
  box-shadow: 0 0 0 0 rgba(252, 182, 207, 0);
  animation: t-hl-pulse 2.6s ease-in-out 2.2s infinite;
}
@keyframes t-hl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(252, 182, 207, 0); }
  50%      { box-shadow: 0 0 14px 3px rgba(252, 182, 207, 0.6); }
}
@media (prefers-reduced-motion: reduce) {
  .t-intro h1 .t-highlight::before { transform: scaleX(1); animation: none; }
  .t-intro h1 .t-highlight::after  { animation: none; }
}
.t-intro p {
  font-family: var(--body); font-size: 14.5px; line-height: 1.5;
  color: var(--ink-2); margin: 0;
  max-width: 52ch; margin-left: auto; margin-right: auto;
}

/* ---------- Step row ---------- */
.t-steps { display: flex; flex-direction: column; gap: 14px; }
.t-step {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 20px 22px;
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease), transform 240ms var(--ease), background-color 240ms var(--ease);
}
.t-step:hover { border-color: var(--pink-soft); box-shadow: 0 18px 40px -22px rgba(236, 72, 153, 0.2); transform: translateY(-1px); }
.t-step .t-hd {
  display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
}
.t-step .t-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  flex-shrink: 0;
  transition: background-color 240ms var(--ease);
}
.t-step:hover .t-num { background: var(--pink-deep); }
.t-step .t-ttl {
  font-family: var(--display); font-weight: 600;
  font-size: 17px; letter-spacing: -0.015em; line-height: 1.2;
  color: var(--ink); margin: 0;
  flex: 1; min-width: 0;
}

/* ---------- Step checkbox ---------- */
.t-check {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; flex-shrink: 0;
  margin-left: auto;
  user-select: none;
}
.t-check input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; pointer-events: none; }
.t-check-box {
  width: 28px; height: 28px;
  border: 2px solid var(--hairline-2);
  border-radius: 8px;
  background: var(--bg);
  display: grid; place-items: center;
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
}
.t-check-box svg {
  width: 16px; height: 16px;
  stroke: #fff; stroke-width: 3.5; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 24; stroke-dashoffset: 24;
  transition: stroke-dashoffset 360ms cubic-bezier(0.65, 0, 0.45, 1);
}
.t-check:hover .t-check-box { border-color: var(--pink-deep); transform: scale(1.05); }
.t-check input:checked ~ .t-check-box {
  background: var(--pink-deep);
  border-color: var(--pink-deep);
  animation: t-check-pop 360ms var(--ease-spring);
}
.t-check input:checked ~ .t-check-box svg { stroke-dashoffset: 0; }
@keyframes t-check-pop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.t-check-label {
  font-family: var(--body); font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-mute);
  transition: color 220ms var(--ease);
}
.t-check input:checked ~ .t-check-label { color: var(--pink-deep); }
@media (max-width: 480px) { .t-check-label { display: none; } }

/* ---------- Step done state ---------- */
.t-step.is-done {
  background: linear-gradient(135deg, rgba(252, 182, 207, 0.16), rgba(196, 181, 253, 0.16));
  border-color: var(--pink-soft);
}
.t-step.is-done .t-num {
  background: var(--pink-deep);
  color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 12 10 17 19 7'/%3E%3C/svg%3E");
  background-color: var(--pink-deep);
  background-size: 16px; background-position: center; background-repeat: no-repeat;
}
.t-step.is-done .t-ttl { opacity: 0.55; text-decoration: line-through; text-decoration-color: var(--pink-deep); text-decoration-thickness: 2px; }

/* ---------- Intro progress (you / 5 done) ---------- */
.t-progress {
  display: inline-flex; align-items: center; gap: 12px;
  margin: 14px auto 0;
  padding: 7px 14px 7px 10px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(8px);
  border: 1px solid var(--hairline);
  border-radius: 999px;
}
.t-progress-bar {
  width: 140px; height: 6px;
  background: rgba(26, 13, 20, 0.08);
  border-radius: 999px; overflow: hidden;
  position: relative;
}
.t-progress-fill {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--pink-deep), var(--lavender-deep));
  border-radius: 999px;
  transition: width 480ms cubic-bezier(0.42, 0, 0.58, 1);
}
.t-progress-text {
  font-family: var(--body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.04em; color: var(--ink-mute);
  white-space: nowrap;
}
.t-progress-text strong {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  color: var(--pink-deep); letter-spacing: -0.01em;
  margin-right: 2px;
}
.t-step .t-ttl em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
/* Clean display emphasis for in-title brand/keyword highlights */
.t-step .t-ttl .t-em-display {
  font-family: var(--display); font-style: normal; font-weight: 700;
  color: var(--pink-deep);
  letter-spacing: -0.02em;
}
/* Stamp-style emphasis (used on "I'm in") */
.t-step .t-ttl .t-stamp {
  font-family: var(--display); font-style: normal; font-weight: 800;
  color: #fff; background: var(--pink-deep);
  padding: 1px 10px 2px;
  border-radius: 6px;
  display: inline-block;
  transform: rotate(-2deg);
  font-size: 0.88em;
  letter-spacing: 0.01em;
  box-shadow: 2px 2px 0 0 var(--ink);
  margin: 0 3px;
  vertical-align: 1px;
}
.t-step .t-body { font-family: var(--body); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 12px; }
.t-step .t-body:last-child { margin-bottom: 0; }
.t-step .t-body strong { color: var(--ink); font-weight: 700; }

/* ---------- Step 1 video frame ---------- */
.t-video {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ink);
  aspect-ratio: 16/9;
  border: 1px solid var(--hairline);
}
.t-video video { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-video .t-vph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background:
    linear-gradient(135deg, rgba(236, 72, 153, 0.32), rgba(139, 92, 246, 0.4)),
    url("../shared/assets/photos/marti-raw.jpg") center/cover;
  color: #fff; text-align: center;
}
.t-video .t-play {
  width: 60px; height: 60px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.96);
  display: grid; place-items: center;
  margin: 0 auto 8px;
  animation: fp-play 2s var(--ease-soft) infinite;
}
.t-video .t-play::before { content: ""; width: 0; height: 0; margin-left: 4px; border-left: 16px solid var(--ink); border-top: 10px solid transparent; border-bottom: 10px solid transparent; }
.t-video .t-vph h4 { font-family: var(--display); font-weight: 600; font-size: 15px; color: #fff; margin: 0; text-shadow: 0 1px 6px rgba(0,0,0,0.4); }
.t-video .t-vph h4 em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink); }
.t-video .t-vph .t-vsub { font-size: 11px; color: rgba(255, 255, 255, 0.78); margin-top: 2px; letter-spacing: 0.04em; }
.t-video .t-vbadge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255, 255, 255, 0.95);
  font-family: var(--body); font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink);
  padding: 5px 10px; border-radius: var(--r-pill);
  display: inline-flex; align-items: center; gap: 6px;
}
.t-video .t-vbadge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pink-deep); animation: fp-live 1.4s var(--ease-soft) infinite; }

/* ---------- Step 2 calendar buttons (with brand logos) ---------- */
.t-cals { display: flex; flex-wrap: wrap; gap: 8px; }
.t-cals a {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-size: 13px; font-weight: 600;
  text-decoration: none; color: var(--ink);
  padding: 9px 16px 9px 12px;
  background: #fff;
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-pill);
  transition: background-color 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.t-cals a:hover { transform: translateY(-1px); border-color: var(--ink); box-shadow: 0 8px 18px -8px rgba(26, 13, 20, 0.18); }
.t-cals a svg { width: 16px; height: 16px; display: block; flex-shrink: 0; }

/* ---------- Step 3 WhatsApp (thin, single-line, branded) ---------- */
.t-wa {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; width: 100%;
  font-family: var(--body); font-weight: 700; font-size: 14px;
  text-decoration: none; color: #fff;
  background: linear-gradient(180deg, #25D366 0%, #1ebd5b 100%);
  padding: 11px 20px;
  border-radius: 12px;
  box-shadow:
    0 14px 32px -12px rgba(37, 211, 102, 0.55),
    0 0 0 3px rgba(37, 211, 102, 0.14),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.25);
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.t-wa:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -12px rgba(37, 211, 102, 0.72), 0 0 0 3px rgba(37, 211, 102, 0.22), inset 0 1px 0 0 rgba(255, 255, 255, 0.3); }
.t-wa svg { width: 18px; height: 18px; fill: #fff; flex-shrink: 0; }
.t-wa::after {
  content: "→"; font-size: 16px; margin-left: 2px;
  transition: transform 240ms var(--ease);
}
.t-wa:hover::after { transform: translateX(3px); }
@media (max-width: 380px) {
  .t-wa { padding: 11px 14px; font-size: 13px; gap: 8px; }
  .t-wa svg { width: 16px; height: 16px; }
}

/* ---------- Step 4 warning row + phone frame ---------- */
.t-warn {
  display: grid; grid-template-columns: 1fr clamp(200px, 28vw, 260px);
  gap: 22px; align-items: start;
}
@media (max-width: 720px) { .t-warn { grid-template-columns: 1fr; } }
.t-warn-text { min-width: 0; }
.t-warn-text .t-warn-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-weight: 700;
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: #94660a;
  padding: 5px 11px;
  background: rgba(245, 192, 106, 0.18);
  border: 1px solid rgba(245, 192, 106, 0.4);
  border-radius: var(--r-pill);
  margin-bottom: 10px;
}
.t-warn-text .t-warn-tag::before { content: "⚠"; font-size: 12px; }
.t-warn-text p { font-family: var(--body); font-size: 13.5px; line-height: 1.5; color: var(--ink-2); margin: 0 0 8px; }
.t-warn-text p:last-child { margin-bottom: 0; }
.t-warn-text strong { color: var(--ink); font-weight: 700; }
.t-warn-text mark {
  background: rgba(245, 192, 106, 0.35);
  color: var(--ink);
  padding: 1px 6px; border-radius: 4px;
  font-weight: 700;
}

/* phone frame (animated mockup) */
.t-phone {
  position: relative;
  width: 100%; max-width: 240px;
  margin: 0 auto;
  aspect-ratio: 9/19;
  background: var(--ink);
  border-radius: 28px;
  padding: 8px;
  box-shadow:
    0 30px 60px -22px rgba(26, 13, 20, 0.5),
    0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.t-phone::after {
  content: ""; position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  width: 80px; height: 18px; background: #000; border-radius: 10px;
  z-index: 3;
}
.t-phone .t-screen {
  background: var(--bg);
  border-radius: 22px;
  width: 100%; height: 100%;
  overflow: hidden;
  position: relative;
}
.t-phone .t-deck {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  animation: t-deck 12s var(--ease) infinite;
  will-change: transform;
}
@keyframes t-deck {
  0%, 25%   { transform: translateY(0%); }
  33%, 58%  { transform: translateY(-100%); }
  66%, 91%  { transform: translateY(-200%); }
  100%      { transform: translateY(0%); }
}
.t-phone .t-card {
  flex-shrink: 0;
  width: 100%; height: 100%;
  padding: 38px 12px 12px;
  font-family: var(--body);
}
.t-phone .t-card h5 {
  font-family: var(--display); font-weight: 700; font-size: 12px;
  margin: 0 0 8px; color: var(--ink); letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 6px;
}
.t-phone .t-card h5::before {
  content: ""; width: 14px; height: 14px; border-radius: 4px;
  background: var(--pink-deep);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z'/%3E%3C/svg%3E");
  background-size: 9px; background-position: center; background-repeat: no-repeat;
}
.t-phone .t-em {
  background: #fff;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 6px;
  box-shadow: 0 4px 12px -6px rgba(26, 13, 20, 0.18);
  font-size: 9.5px; line-height: 1.4;
}
.t-phone .t-em.hl { background: linear-gradient(135deg, var(--pink-soft), var(--lavender-soft)); border: 1px solid var(--pink-soft); }
.t-phone .t-em .from { font-weight: 700; color: var(--ink); }
.t-phone .t-em .sub { color: var(--ink-2); margin-top: 2px; font-size: 9px; }
.t-phone .t-card-2 .t-emo {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  height: calc(100% - 30px);
  display: flex; flex-direction: column; gap: 8px;
  font-size: 10px;
}
.t-phone .t-card-2 .t-emo .from { font-weight: 700; color: var(--ink); }
.t-phone .t-card-2 .t-emo .subj { font-weight: 700; font-size: 11px; }
.t-phone .t-card-2 .t-emo .preview { color: var(--ink-2); font-size: 9.5px; line-height: 1.45; flex: 1; }
.t-phone .t-card-2 .t-cta-mini {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  background: var(--pink-deep); color: #fff;
  padding: 6px 10px; border-radius: 999px;
  font-size: 9.5px; font-weight: 700;
}
.t-phone .t-card-3 .t-reply {
  background: #fff;
  border-radius: 10px;
  padding: 12px;
  height: calc(100% - 30px);
  display: flex; flex-direction: column; gap: 6px;
  font-size: 10px;
}
.t-phone .t-card-3 .t-reply .input {
  flex: 1;
  background: var(--bg);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  padding: 10px;
  font-family: var(--display); font-weight: 700; font-size: 13px;
  color: var(--ink);
  position: relative;
}
.t-phone .t-card-3 .t-reply .input::after {
  content: "|"; color: var(--pink-deep); animation: t-blink 1s steps(2) infinite; margin-left: 1px;
}
@keyframes t-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.t-phone .t-card-3 .t-reply .send {
  align-self: flex-end;
  background: var(--ink); color: #fff;
  padding: 6px 14px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 5px;
}
.t-phone .t-card-3 .t-reply .send::after { content: "→"; }
.t-phone .t-pager {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 5px;
  z-index: 2;
}
.t-phone .t-pager span {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(26, 13, 20, 0.18);
  animation: t-page 12s var(--ease) infinite;
}
.t-phone .t-pager span:nth-child(2) { animation-delay: 4s; }
.t-phone .t-pager span:nth-child(3) { animation-delay: 8s; }
@keyframes t-page {
  0%, 28%   { background: var(--pink-deep); width: 14px; border-radius: 999px; }
  29%, 100% { background: rgba(26, 13, 20, 0.18); width: 5px; border-radius: 50%; }
}

/* ---------- Step 5 expand FAQ button ---------- */
.t-jump {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--body); font-weight: 700; font-size: 13px;
  color: var(--ink); text-decoration: none;
  padding: 11px 20px;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  border-radius: var(--r-pill);
  transition: background-color 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease);
}
.t-jump::after { content: "↓"; font-size: 14px; }
.t-jump:hover { background: var(--ink); color: #fff; transform: translateY(-1px); }

/* ---------- Live bonus card ---------- */
.t-bonus {
  margin-top: 24px;
  background: linear-gradient(135deg, var(--pink-soft) 0%, var(--lavender-soft) 100%);
  border: 1px solid rgba(26, 13, 20, 0.1);
  border-radius: 18px;
  padding: 18px 20px;
  display: grid; grid-template-columns: auto 1fr auto; gap: 16px;
  align-items: center;
  position: relative; overflow: hidden;
}
.t-bonus::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 1px 1px, rgba(26, 13, 20, 0.06) 1px, transparent 0);
  background-size: 14px 14px; pointer-events: none; opacity: 0.5;
}
.t-bonus > * { position: relative; }
@media (max-width: 600px) { .t-bonus { grid-template-columns: 1fr; text-align: center; } }
.t-bonus .t-gift {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ink); color: var(--pink);
  display: grid; place-items: center;
  font-size: 22px;
  box-shadow: 0 10px 22px -6px rgba(26, 13, 20, 0.35);
}
@media (max-width: 600px) { .t-bonus .t-gift { margin: 0 auto; } }
.t-bonus h4 {
  font-family: var(--display); font-weight: 600;
  font-size: 16px; letter-spacing: -0.015em; line-height: 1.2;
  margin: 0 0 3px; color: var(--ink);
}
.t-bonus h4 em { font-family: var(--italic); font-style: italic; font-weight: 400; color: var(--pink-deep); }
.t-bonus p { font-family: var(--body); font-size: 12.5px; line-height: 1.4; color: var(--ink-2); margin: 0; }
.t-bonus .t-only {
  font-family: var(--body); font-weight: 700;
  font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #fff; background: var(--pink-deep);
  padding: 7px 14px; border-radius: var(--r-pill);
  white-space: nowrap;
}

/* ---------- FAQ accordion ---------- */
.t-faq { margin-top: 36px; }
.t-faq h3 {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(28px, 3.6vw, 36px);
  letter-spacing: -0.025em;
  line-height: 1;
  margin: 0 0 22px;
  color: var(--ink);
  text-align: center;
}

/* --- Pencil writing "answered" letter-by-letter (SVG stroke + fill draw) --- */
.t-write {
  position: relative;
  display: inline-block;
  vertical-align: -0.12em;
  margin-left: 8px;
  max-width: 100%;
  width: clamp(160px, 48vw, 240px); /* matches SVG so pencil % maps to letters */
}
.t-write-svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 240 / 64;
  overflow: visible;
}
@media (max-width: 540px) {
  .t-write { display: block; margin: 6px auto 0; width: min(240px, 78vw); }
}
.t-write-svg .t-letter {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  fill: var(--pink-deep);
  stroke: var(--pink-deep);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill-opacity: 0;
  stroke-dasharray: 180;
  stroke-dashoffset: 180;
  paint-order: stroke fill;
}
.t-write.is-writing .t-letter {
  animation: t-letter-draw 0.55s cubic-bezier(0.42, 0, 0.58, 1) forwards;
}
.t-write.is-writing .t-l1 { animation-delay: 0s; }
.t-write.is-writing .t-l2 { animation-delay: 0.24s; }
.t-write.is-writing .t-l3 { animation-delay: 0.48s; }
.t-write.is-writing .t-l4 { animation-delay: 0.72s; }
.t-write.is-writing .t-l5 { animation-delay: 1.04s; }
.t-write.is-writing .t-l6 { animation-delay: 1.28s; }
.t-write.is-writing .t-l7 { animation-delay: 1.52s; }
.t-write.is-writing .t-l8 { animation-delay: 1.76s; }
@keyframes t-letter-draw {
  0%   { stroke-dashoffset: 180; fill-opacity: 0; }
  55%  { stroke-dashoffset: 0;   fill-opacity: 0; }
  100% { stroke-dashoffset: 0;   fill-opacity: 1; }
}

.t-pencil-svg {
  position: absolute;
  top: -10px;
  left: 0;
  width: clamp(28px, 7vw, 40px);
  height: clamp(28px, 7vw, 40px);
  margin-left: -14px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
}
.t-write.is-writing .t-pencil-svg {
  animation: t-pencil-step 2.6s cubic-bezier(0.42, 0, 0.58, 1) forwards;
}
/* Pencil hovers over each letter as the stroke draws.
   Letter x positions in viewBox 240 mapped to %:
   L1 a 0% | L2 n 13.3% | L3 s 25.8% | L4 w 35%
   L5 e 50.8% | L6 r 60.8% | L7 e 70.8% | L8 d 81.7%
   Stagger 0.24s between letter starts. */
@keyframes t-pencil-step {
  0%   { left: -4%;    opacity: 0; transform: translateY(-6px) rotate(-6deg); }
  2%   { left: -2%;    opacity: 1; transform: translateY(-3px) rotate(-3deg); }

  /* L1 (0%) hover, ~9% of timeline */
  4%   { left: 0%;     transform: translateY(-2px) rotate(0deg); }
  8%   { left: 0%;     transform: translateY(-4px) rotate(2deg); }
  11%  { left: 0%;     transform: translateY(-2px) rotate(-1deg); }

  /* L2 (13.3%) */
  14%  { left: 13.3%;  transform: translateY(-3px) rotate(1deg); }
  19%  { left: 13.3%;  transform: translateY(-2px) rotate(-2deg); }
  22%  { left: 13.3%;  transform: translateY(-3px) rotate(0deg); }

  /* L3 (25.8%) */
  25%  { left: 25.8%;  transform: translateY(-2px) rotate(2deg); }
  30%  { left: 25.8%;  transform: translateY(-4px) rotate(-1deg); }
  33%  { left: 25.8%;  transform: translateY(-2px) rotate(1deg); }

  /* L4 (35%) */
  36%  { left: 35%;    transform: translateY(-3px) rotate(-2deg); }
  41%  { left: 35%;    transform: translateY(-2px) rotate(1deg); }
  44%  { left: 35%;    transform: translateY(-3px) rotate(0deg); }

  /* L5 (50.8%) */
  48%  { left: 50.8%;  transform: translateY(-2px) rotate(2deg); }
  53%  { left: 50.8%;  transform: translateY(-4px) rotate(-1deg); }
  56%  { left: 50.8%;  transform: translateY(-2px) rotate(1deg); }

  /* L6 (60.8%) */
  59%  { left: 60.8%;  transform: translateY(-3px) rotate(-2deg); }
  64%  { left: 60.8%;  transform: translateY(-2px) rotate(1deg); }
  67%  { left: 60.8%;  transform: translateY(-3px) rotate(0deg); }

  /* L7 (70.8%) */
  70%  { left: 70.8%;  transform: translateY(-2px) rotate(2deg); }
  75%  { left: 70.8%;  transform: translateY(-4px) rotate(-1deg); }
  78%  { left: 70.8%;  transform: translateY(-2px) rotate(1deg); }

  /* L8 (81.7%) */
  81%  { left: 81.7%;  transform: translateY(-3px) rotate(-2deg); }
  86%  { left: 81.7%;  transform: translateY(-2px) rotate(0deg); opacity: 1; }

  /* Lift-off */
  92%  { left: 92%;    transform: translateY(-14px) rotate(16deg); opacity: 1; }
  100% { left: 108%;   transform: translateY(-36px) rotate(28deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .t-write-svg .t-letter { fill-opacity: 1; stroke-dashoffset: 0; animation: none; }
  .t-pencil-svg { display: none; }
}
.t-faq-list details {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  margin-bottom: 8px;
  transition: border-color 240ms var(--ease), box-shadow 240ms var(--ease);
}
.t-faq-list details[open] { border-color: var(--pink-soft); box-shadow: 0 14px 32px -18px rgba(236, 72, 153, 0.22); }
.t-faq-list summary {
  list-style: none; cursor: pointer;
  padding: 14px 18px;
  display: grid; grid-template-columns: 1fr 26px; gap: 14px; align-items: center;
  font-family: var(--display); font-weight: 600; font-size: 14.5px;
  letter-spacing: -0.01em; color: var(--ink);
}
.t-faq-list summary::-webkit-details-marker { display: none; }
.t-faq-list summary .t-chev {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--ink);
  display: grid; place-items: center;
  font-size: 14px; transition: transform 280ms var(--ease), background-color 240ms var(--ease), color 240ms var(--ease);
}
.t-faq-list summary .t-chev::before { content: "+"; line-height: 1; }
.t-faq-list details[open] summary .t-chev { background: var(--pink-deep); border-color: var(--pink-deep); color: #fff; transform: rotate(45deg); }
.t-faq-list .t-ans {
  padding: 0 18px 16px;
  font-family: var(--body); font-size: 13.5px; line-height: 1.55;
  color: var(--ink-2);
}

/* ---------- Slim footer ---------- */
.t-foot {
  padding: 12px clamp(16px, 4vw, 32px);
  border-top: 1px solid var(--hairline);
  font-family: var(--body); font-size: 11px;
  color: var(--ink-mute);
  text-align: center;
}
.t-faq-list details:last-child { margin-bottom: 0; }
.t-foot a { color: var(--ink-mute); margin: 0 8px; text-decoration: none; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }
.t-foot a:hover { color: var(--pink-deep); }

/* Reveal motion */
html.js .t-reveal { opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease-soft), transform 600ms var(--ease-soft); }
html.js .t-reveal.in { opacity: 1; transform: translateY(0); }

/* ============================================================
   v8: VSL hero + Marti badge + phone speed + tap hint + ChatGPT contrast
   + Claude path format + mobile sweep + calendar mobile fix
   ============================================================ */

/* ---------- Hero VSL replaces big photo ---------- */
.hero { position: relative; }
.hero-vsl {
  position: relative;
  width: 100%;
  max-width: 520px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 28px;
  overflow: hidden;
  background: var(--ink);
  box-shadow:
    0 0 0 10px var(--pink-wash),
    0 40px 80px -22px rgba(236, 72, 153, 0.45),
    0 14px 32px -8px rgba(139, 92, 246, 0.25);
}
.vsl-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.vsl-live {
  position: absolute;
  top: 16px; left: 16px;
  z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-pill);
  color: #fff;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.vsl-live-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6);
  animation: livePulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.vsl-caption {
  position: absolute;
  bottom: 14px; left: 14px; right: 14px;
  z-index: 3;
  text-align: center;
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #fff;
  padding: 8px 14px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  pointer-events: none;
}

/* ---------- Marti small floating top-right badge ---------- */
.marti-badge {
  position: absolute;
  top: 16px;
  right: clamp(16px, 3vw, 32px);
  z-index: 5;
  display: flex; align-items: center; gap: 10px;
  padding: 5px 14px 5px 5px;
  background: rgba(255, 250, 245, 0.85);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--r-pill);
  box-shadow: 0 10px 28px -12px rgba(26, 13, 20, 0.22);
}
.marti-badge img {
  width: 42px; height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(26, 13, 20, 0.15);
}
.marti-badge-text {
  display: flex; flex-direction: column;
  gap: 1px;
  font-family: var(--display);
  line-height: 1.1;
}
.marti-badge-text strong { font-size: 13px; color: var(--ink); font-weight: 700; letter-spacing: -0.01em; }
.marti-badge-text span { font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.02em; font-weight: 500; font-family: var(--body); }
@media (max-width: 720px) {
  .marti-badge { top: 12px; right: 12px; padding: 4px 10px 4px 4px; gap: 8px; }
  .marti-badge img { width: 34px; height: 34px; }
  .marti-badge-text strong { font-size: 11.5px; }
  .marti-badge-text span { font-size: 9.5px; }
}

/* ---------- Mobile sweep: hero typography + buttons + trust badge ---------- */
@media (max-width: 720px) {
  .h-mega { font-size: clamp(26px, 8.6vw, 34px) !important; line-height: 1.08; letter-spacing: -0.02em; }
  /* Keep .w as inline-block (set in default rule) so transform: translateY works for the per-word stagger entrance.
     Forcing display: inline here would break the stagger animation — transforms don't apply to inline elements. */
  h2.h-section { font-size: clamp(22px, 6.8vw, 30px) !important; line-height: 1.12; }
  .lead.large { font-size: 15px !important; line-height: 1.45; }
  .lead { font-size: 14.5px; line-height: 1.5; }
  .btn.lg, .btn.pink.lg {
    padding: 12px 18px !important;
    font-size: 13.5px !important;
    letter-spacing: 0.02em !important;
  }
  .btn.lg .arrow svg, .btn.pink.lg .arrow svg { width: 14px; height: 14px; }
  .hero-cta-row { gap: 8px; margin: 18px auto 0; max-width: 100%; flex-direction: column; align-items: center; }
  .hero-cta-row .btn.lg, .hero-cta-row .btn { flex: 0 1 auto !important; padding: 10px 20px !important; font-size: 12.5px !important; width: max-content !important; align-self: center; }
  .trust-badge {
    padding: 6px 14px 6px 6px;
    margin-top: 16px;
    gap: 10px;
  }
  .avatar-stack img { width: 28px; height: 28px; border-width: 2px; margin-right: -10px; }
  .trust-badge .stars-row { font-size: 11px; letter-spacing: 1.4px; }
  .trust-badge .stars-row strong { font-size: 13px; }
  .trust-badge .count-row { font-size: 10px; }
  .promo-strip { font-size: 10px; padding: 5px 8px; letter-spacing: 0.03em; gap: 8px; min-height: 40px; }
  /* Drop the white pill on mobile + invert the ink logo to white so it reads on the gradient.
     Removes the wide white background that was overlapping centered banner text. */
  .promo-strip .promo-logo { padding: 0; background: transparent; filter: brightness(0) invert(1); }
  .promo-strip .promo-logo img { height: 11px; }
  .promo-strip .promo-text { font-size: 10px; }
  .promo-strip .countdown { font-size: 10px; margin-left: 4px; gap: 3px; }
  .promo-strip .promo-marti img { width: 30px; height: 30px; border-width: 1.5px; }
  .nav-pill { padding: 5px 5px 5px 14px; gap: 10px; }
  .nav-pill .logo-img { height: 22px; }
  .nav-pill .btn.sm { padding: 7px 12px !important; font-size: 11px !important; }
  .hero-vsl {
    border-radius: 22px;
    box-shadow: 0 0 0 6px var(--pink-wash), 0 24px 50px -16px rgba(236, 72, 153, 0.35);
  }
  .vsl-caption { font-size: 11.5px; padding: 6px 12px; }
  .hero { padding-top: 12px !important; padding-bottom: 28px !important; }
  .hero .container { display: flex; flex-direction: column; gap: 12px; }
  .hero-text { margin: 0; }
  .h-mega { font-size: clamp(20px, 6.5vw, 26px) !important; line-height: 1.1 !important; margin: 0 0 8px !important; }
  .lead.large { font-size: 13px !important; line-height: 1.4 !important; margin: 0 !important; }
  .hero-vsl-wide { margin-top: 4px; }
  .trust-badge { margin-top: 4px !important; }
  /* On mobile, put the trust badge ABOVE the headline so the 4.9/1,000+ social proof is the first thing visible
     after the banner without needing to scroll. .hero .container is display:flex on mobile (line 5852),
     so order: -1 lifts the badge to the top of the flex stack. */
  .hero-text { order: 2; }
  .hero-vsl-wide { order: 3; }
  .hero-cta-row { order: 4; }
  .trust-badge.trust-badge-hero-compact { order: 1; margin-top: 0 !important; margin-bottom: 4px !important; }
  section { padding: clamp(48px, 8vw, 90px) 0; }
  .container { padding-left: 18px; padding-right: 18px; }
  .fit-headline { font-size: 22px !important; }
  .fit-chip { font-size: 12.5px; padding: 8px 14px; }
  .split-card { padding: 22px !important; }
  .split-title { font-size: 24px !important; }
  .split-list li { font-size: 14px !important; }
  .info-gap { padding: 18px 20px; margin-bottom: 36px; }
  .info-gap p { font-size: 15px; }
  .timeline-callout { padding: 18px 20px; }
  .timeline-callout p { font-size: 18px; }
  .section-cta { padding: 22px 18px; margin: 36px auto 0; }
  .section-cta p { font-size: 15px; }
  .road-badge { font-size: 18px; }
  .stack-body h3 { font-size: 15.5px; }
  .stack-body p { font-size: 12.5px; }
  .price-card { padding: 26px 22px; }
  .price-card .num { font-size: clamp(34px, 10vw, 44px) !important; }
  .feat-list li, .feat-list.tight li { font-size: 13.5px; }
  .math-box { padding: 14px; }
  .math-row { font-size: 12.5px; }
  .math-row.math-total { font-size: 13.5px; }
  .math-row.math-pay { font-size: 14.5px; }
  .math-row.math-save { font-size: 13.5px; }
  .roi-card { padding: 20px 16px !important; }
  .roi-input input { font-size: 16px !important; }
  .roi-output .big { font-size: clamp(30px, 8vw, 42px) !important; }
  .roi-grid { gap: 16px; margin-top: 18px; }
  .roi-output .label { font-size: 9.5px !important; }
  .stack-grid { gap: 14px; }
  .case-grid { grid-template-columns: 1fr; gap: 16px; }
  .pricing-grid { gap: 24px; }
  .video-card .name { font-size: 13px; }
  details.faq summary { font-size: 14.5px; padding: 16px 18px; }
}

@media (max-width: 480px) {
  .h-mega { font-size: 26px !important; }
  h2.h-section { font-size: 22px !important; }
  .hero-cta-row { flex-direction: column; align-items: center; gap: 6px; }
  .hero-cta-row .btn, .hero-cta-row .btn.lg, .hero-cta-row .btn.pink.lg {
    width: max-content !important; text-align: center;
    padding: 9px 18px !important; font-size: 11.5px !important;
  }
  .hero-photo { max-width: 150px; }
  .marti-badge-text { display: none; }
  .marti-badge { padding: 4px; }
}

/* ---------- Calendar mobile: fit in viewport, all buttons remain tappable ---------- */
@media (max-width: 720px) {
  .cal-legend { gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
  .leg-chip { padding: 6px 10px; font-size: 10.5px; gap: 5px; }
  .leg-dot { width: 7px; height: 7px; }
  .cal-grid {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 4px !important;
    overflow: visible !important;
    padding: 0 !important;
    max-width: 100%;
  }
  .cal-day-col { gap: 4px; min-width: 0; }
  .cal-day-head { font-size: 9px; letter-spacing: 0.1em; padding-bottom: 4px; }
  .cal-event {
    padding: 6px 4px 8px !important;
    border-radius: 8px !important;
    gap: 2px !important;
    min-width: 0;
  }
  .cal-event::before { width: 2px; }
  .ev-time { font-size: 9px; letter-spacing: 0; }
  .ev-name { font-size: 10px; line-height: 1.15; font-weight: 700; }
  .ev-foot { display: none; }
  .cal-foot { font-size: 12px; margin-top: 18px; }
}

/* ---------- Roadmap tap-finger hint ---------- */
.tap-hint {
  position: absolute;
  top: 50%;
  left: clamp(20px, 5vw, 80px);
  transform: translateY(-50%);
  z-index: 4;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
  opacity: 0;
  animation: tapHintIn 600ms ease 1.5s forwards, tapHintOut 800ms ease 9s forwards;
}
/* Desktop has prev/next rail buttons + scroll wheel — tap-hint is mobile-only swipe affordance.
   Hiding on desktop prevents it from overlaying the first bonus card's title for 9 seconds. */
@media (min-width: 721px) {
  .tap-hint { display: none !important; }
}
.tap-finger {
  width: 36px; height: 36px;
  background: rgba(255, 250, 245, 0.92);
  border-radius: 50%;
  border: 2px solid var(--pink-deep);
  position: relative;
  box-shadow: 0 8px 20px -6px rgba(26, 13, 20, 0.25);
  animation: tapFinger 2s ease-in-out infinite;
}
.tap-finger::before {
  content: "👆";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  line-height: 1;
}
.tap-label {
  padding: 6px 12px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 8px 20px -6px rgba(26, 13, 20, 0.3);
}
@keyframes tapHintIn { to { opacity: 1; } }
@keyframes tapHintOut { to { opacity: 0; pointer-events: none; } }
@keyframes tapFinger {
  0%, 100% { transform: scale(1) translateX(0); }
  20% { transform: scale(0.92) translateX(0); }
  40% { transform: scale(1) translateX(28px); }
  60% { transform: scale(0.92) translateX(28px); }
  80% { transform: scale(1) translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tap-hint, .tap-finger { animation: none; opacity: 1; }
}
@media (max-width: 720px) {
  .tap-hint { left: 16px; gap: 6px; }
  .tap-finger { width: 30px; height: 30px; }
  .tap-finger::before { font-size: 14px; }
  .tap-label { font-size: 10px; padding: 5px 10px; }
}

/* ---------- Mobile reveal fallback: force visible if IO doesn't fire ---------- */
@media (max-width: 900px) {
  /* v26: mobile reveal kill REMOVED so mobile gets the same animations as desktop.
     If a user has prefers-reduced-motion: reduce, the rules below kick in. */
}
@media (prefers-reduced-motion: reduce) {
  html.js .reveal,
  html.js .fp-reveal,
  html.js .tk-reveal,
  html.js .t-reveal,
  .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .h-mega-anim .w { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
  .fit-chip { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ---------- Mobile sticky pill compact ---------- */
@media (max-width: 720px) {
  .sticky-pill { bottom: 12px; padding: 5px 5px 5px 14px; }
  .pill-msg { max-width: 44vw; font-size: 11px; }
  .pill-cta { padding: 6px 11px; font-size: 10.5px; }
  .pill-cta svg { width: 11px; height: 11px; }
}


/* v8 demo step delays overrides — keep fast animation */
.demo-step:nth-child(1) { animation-delay: 0.4s !important; }
.demo-step:nth-child(2) { animation-delay: 0.7s !important; }
.demo-step:nth-child(3) { animation-delay: 1.0s !important; }
.demo-step:nth-child(4) { animation-delay: 1.3s !important; }
.demo-result { animation-delay: 1.7s !important; }
.demo-prompt { animation-delay: 0.1s !important; }

/* ============================================================
   v9: hero VSL horizontal + members carousel + expand + replace tag
   + tap-hint visibility + mobile CTA shrink + ChatGPT contrast push
   ============================================================ */

/* ---------- Hero VSL horizontal (below hero grid) ---------- */
.hero-vsl-wide {
  position: relative;
  max-width: 880px;
  margin: 48px auto 0;
  aspect-ratio: 16 / 9;
  border-radius: 24px;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 30px 70px -22px rgba(236, 72, 153, 0.32),
              0 14px 32px -10px rgba(139, 92, 246, 0.22),
              0 0 0 8px var(--pink-wash);
}
.hero-vsl-wide .vsl-video {
  width: 100%; height: 100%; object-fit: cover;
  display: block; background: #000;
}
.hero-vsl-wide .vsl-live {
  position: absolute; top: 16px; left: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--r-pill);
  color: #fff;
  font-family: var(--body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.hero-vsl-wide .vsl-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, 0.6);
  animation: livePulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@media (max-width: 720px) {
  .hero-vsl-wide {
    margin-top: 32px;
    border-radius: 18px;
    box-shadow: 0 18px 40px -16px rgba(236, 72, 153, 0.28), 0 0 0 4px var(--pink-wash);
  }
  .hero-vsl-wide .vsl-live { padding: 4px 10px 4px 8px; font-size: 9.5px; }
  .hero-vsl-wide .vsl-live-dot { width: 6px; height: 6px; }
}

/* ---------- Members carousel cards ---------- */
.members-section { padding-bottom: clamp(40px, 6vw, 60px); }
.members-rail .chap-row { padding-top: 24px; }
.member-card {
  flex: 0 0 clamp(280px, 26vw, 330px);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 18px 40px -22px rgba(26, 13, 20, 0.22);
  position: relative;
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 380ms cubic-bezier(0.32, 0.72, 0, 1);
  touch-action: auto;
}
.member-card:hover { transform: translateY(-6px); box-shadow: 0 32px 60px -22px rgba(236, 72, 153, 0.28); }
.replace-tag {
  position: absolute; top: 12px; right: 12px; z-index: 5;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px dashed var(--burgundy-accent);
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--burgundy-accent);
  pointer-events: none;
}
.member-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--pink-wash);
  border-bottom: 1px solid var(--hairline);
}
.member-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center;
  transition: transform 600ms var(--ease);
}
.member-card:hover .member-img img { transform: scale(1.04); }
.member-body {
  padding: 16px 18px 18px;
  display: flex; flex-direction: column; gap: 8px;
}
.member-handle {
  font-family: var(--display);
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink);
  letter-spacing: -0.005em;
  word-break: break-all;
}
.member-stat {
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  color: var(--pink-deep);
  line-height: 1.2;
}
.member-stat span {
  display: block;
  font-family: var(--body);
  font-style: italic;
  font-weight: 500;
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 2px;
}
.member-expand-btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  width: 100%;
  margin-top: 4px;
  padding: 9px 14px;
  background: var(--pink-wash);
  border: 1px solid var(--pink-soft);
  border-radius: 12px;
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pink-deep);
  cursor: pointer;
  transition: background 200ms var(--ease);
}
.member-expand-btn:hover { background: var(--pink-soft); }
.member-expand-btn .chev { transition: transform 280ms var(--ease); font-size: 11px; }
.member-card.open .member-expand-btn .chev { transform: rotate(180deg); }
.member-expand {
  max-height: 0;
  overflow: hidden;
  transition: max-height 380ms cubic-bezier(0.32, 0.72, 0, 1);
}
.member-card.open .member-expand { max-height: 320px; }
.member-expand p {
  font-family: var(--body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 10px 0 0;
}

/* ---------- Tap-hint upgrade: more visible + stays longer ---------- */
.tap-hint {
  position: absolute;
  top: 50%;
  left: clamp(20px, 5vw, 80px);
  transform: translateY(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  pointer-events: none;
  opacity: 1;
  animation: tapFinger 1.6s ease-in-out infinite;
}
.tap-finger {
  width: 48px; height: 48px;
  background: rgba(255, 250, 245, 0.96);
  border-radius: 50%;
  border: 2.5px solid var(--pink-deep);
  position: relative;
  box-shadow: 0 10px 24px -6px rgba(26, 13, 20, 0.3),
              0 0 0 0 rgba(236, 72, 153, 0.45);
  animation: tapPulse 1.6s ease-in-out infinite;
}
.tap-finger::before {
  content: "👆";
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 24px; line-height: 1;
}
.tap-label {
  padding: 7px 14px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-pill);
  font-family: var(--body);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
  box-shadow: 0 10px 22px -6px rgba(26, 13, 20, 0.36);
}
@keyframes tapPulse {
  0%, 100% { box-shadow: 0 10px 24px -6px rgba(26, 13, 20, 0.3), 0 0 0 0 rgba(236, 72, 153, 0.55); }
  50%      { box-shadow: 0 10px 24px -6px rgba(26, 13, 20, 0.3), 0 0 0 14px rgba(236, 72, 153, 0); }
}
/* v10 — tap-hint enabled across all horizontal rails */
.members-rail .tap-hint,
.chap-rail .tap-hint,
.videos-rail .tap-hint,
.case-rail .tap-hint { display: flex; }
@media (max-width: 720px) {
  .tap-hint { left: 14px; gap: 6px; }
  .tap-finger { width: 38px; height: 38px; }
  .tap-finger::before { font-size: 19px; }
  .tap-label { font-size: 10px; padding: 5px 10px; }
}

/* v10 — Case study horizontal rail (mirrors .chap-rail / .chap-row) */
.case-rail { position: relative; padding: 8px 0 36px; }
.case-row {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* -webkit-overflow-scrolling removed — obsolete and can trap touch on modern iOS Safari */
  scrollbar-width: none;
  padding: 16px clamp(20px, 5vw, 64px) 28px;
  scroll-padding-left: clamp(20px, 5vw, 64px);
  touch-action: auto;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}
.case-row::-webkit-scrollbar { display: none; }
.case-row .case-card {
  flex: 0 0 min(340px, 82vw);
  scroll-snap-align: start;
  cursor: pointer;
  touch-action: auto;
}
@media (max-width: 720px) {
  .case-row { gap: 14px; padding: 12px 20px 24px; }
  .case-row .case-card { flex: 0 0 78vw; }
}

/* ---------- Mobile CTA shrink (even smaller) ---------- */
@media (max-width: 720px) {
  .btn, .btn.lg, .btn.pink.lg {
    padding: 11px 16px !important;
    font-size: 12.5px !important;
    border-radius: var(--r-pill) !important;
    letter-spacing: 0.02em !important;
  }
  .btn .arrow svg, .btn.lg .arrow svg, .btn.pink.lg .arrow svg {
    width: 12px !important; height: 12px !important;
  }
  .btn.sm, .pill-cta { padding: 7px 11px !important; font-size: 11px !important; }
  .hero-cta-row { gap: 8px; }
  .section-cta { padding: 18px 14px; gap: 10px; }
  .section-cta p { font-size: 14px; }
  .section-cta .btn { width: auto !important; padding: 11px 18px !important; font-size: 12.5px !important; }
}
@media (max-width: 480px) {
  .btn, .btn.lg, .btn.pink.lg {
    padding: 10px 14px !important;
    font-size: 12px !important;
  }
  .roi-input input { font-size: 16px !important; padding: 10px 12px !important; }
}

/* ---------- Split-pain text contrast safety net ---------- */
.split-pain, .split-pain * { color: rgba(255, 250, 245, 0.96); }
.split-pain .split-tag { color: var(--burgundy-accent); }
.split-pain .split-title { color: #fffaf5 !important; }
.split-pain .mark { color: var(--burgundy-accent); }
.split-pain strong { color: #fff; font-weight: 700; }
.split-pain .split-close { color: rgba(255, 246, 240, 0.95); }
.split-pain .mock-bubble.user { background: rgba(255, 255, 255, 0.18); color: #fff; }
.split-pain .mock-bubble.ai { background: rgba(212, 74, 74, 0.15); color: rgba(255, 244, 240, 0.96); }
.split-pain .mock-strike { color: rgba(255, 200, 195, 0.85); }

/* v10 — clean subheading replaces the buggy inline-styled <span> hack */
.split-sub {
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  line-height: 1.35;
  margin: -8px 0 18px;
  opacity: 1;
}
.split-pain .split-sub { color: rgba(255, 245, 240, 0.94) !important; }
.split-solution .split-sub { color: var(--ink-2) !important; }

/* v10 — solution side contrast safety net (mirrors pain side) */
.split-solution .split-title { color: var(--ink) !important; }
.split-solution .split-list li { color: var(--ink) !important; }
.split-solution .split-list strong { color: var(--ink); font-weight: 700; }
.split-solution .split-close { color: var(--sage-deep) !important; opacity: 0.95; }
.split-solution .mock-bubble.user { background: rgba(90, 128, 96, 0.14); color: var(--ink); }
.split-solution .mock-bubble.ai { background: rgba(90, 128, 96, 0.08); color: var(--ink); }
.split-solution .mock-thinking-label { color: var(--sage-deep); }
.split-solution .mock-thinking-line { color: var(--ink-2); }

/* ---------- Sticky pill: stays narrow + centered on mobile too (no longer full-width) ---------- */
@media (max-width: 480px) {
  .sticky-pill { left: 50%; right: auto; transform: translateX(-50%) translateY(140%); width: max-content; max-width: calc(100% - 32px); }
  .sticky-pill.visible { transform: translateX(-50%) translateY(0); }
}


/* ---------- Confetti particles ---------- */
.t-conf-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity;
  border-radius: 2px;
  top: 0; left: 0;
}
.t-conf-particle.round { border-radius: 50%; }
.t-conf-particle.streak { border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  .t-conf-particle { display: none; }
}

/* ---------- v10c · Read-more story panels for videos + reviews ---------- */
.videos-row .vid-tile {
  flex: 0 0 clamp(220px, 22vw, 280px);
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 10px;
}
.videos-row .vid-tile .video-card {
  flex: 0 0 auto;
  width: 100%;
  scroll-snap-align: unset;
}
.story-expand {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  font-family: var(--body);
  overflow: hidden;
}
.story-expand summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pink-deep);
  background: var(--pink-wash);
  transition: background 200ms var(--ease);
}
.story-expand summary::-webkit-details-marker { display: none; }
.story-expand summary .chev {
  font-size: 11px;
  transition: transform 280ms var(--ease);
}
.story-expand[open] summary .chev { transform: rotate(180deg); }
.story-expand summary:hover { background: var(--pink-soft); }
.story-expand .body {
  padding: 12px 14px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.story-expand .body p { margin: 0 0 8px; }
.story-expand .body p:last-child { margin-bottom: 0; }
.story-expand .body strong { color: var(--ink); font-weight: 700; }
.review-stories { padding: clamp(40px, 6vw, 80px) 0; }
.review-stories-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 920px; margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}
@media (max-width: 720px) {
  .review-stories-grid { grid-template-columns: 1fr; }
}
.review-stories-grid .story-expand summary {
  padding: 14px 16px;
  font-size: 13px;
}


/* ---------- v11 · Brett's batch edits ---------- */

/* Item 21: Lock horizontal scroll on the page; allow only inside designated rails */
html, body { overflow-x: hidden; }
body { max-width: 100vw; }
.container { overflow-x: visible; }
/* Rails keep their own horizontal scrolling */
.videos-row, .chap-row, .case-row, .review-track, .members-row { overflow-x: auto; }

/* Item 13b: video overlay text → black, on a white pill so it stays readable on any thumbnail */
.video-card .overlay {
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.10) 100%) !important;
}
.video-card .name {
  color: var(--ink) !important;
  text-shadow: none !important;
  background: rgba(255, 255, 255, 0.96);
  padding: 5px 10px;
  border-radius: 999px;
  align-self: flex-start;
  font-size: 13px;
}
.video-card .handle {
  color: var(--ink) !important;
  text-shadow: none !important;
  background: rgba(255, 255, 255, 0.92);
  padding: 4px 9px;
  border-radius: 999px;
  align-self: flex-start;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
}

/* Item 4: thin CTA buttons; less section spacing */
.btn.lg { padding: 14px 22px !important; font-size: 15px !important; }
.btn { padding: 10px 18px !important; }
section { padding-top: clamp(36px, 4.5vw, 56px) !important; padding-bottom: clamp(36px, 4.5vw, 56px) !important; }
.section-band { padding-top: clamp(40px, 5vw, 64px) !important; padding-bottom: clamp(40px, 5vw, 64px) !important; }

/* Item 2/3: split-list line spacing — block flow + absolute mark so <strong> stays inline */
.split-list { padding-left: 0; list-style: none; }
.split-list li {
  position: relative;
  display: block !important;
  padding: 0 0 0 26px;
  margin: 0 0 8px;
  line-height: 1.5;
}
.split-list li .mark {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  display: inline-block;
  text-align: left;
  font-weight: 700;
  line-height: 1.5;
}

/* Item 13a: compact the ROI calculator — thin rows, no gap between questions */
.roi-card { padding: clamp(20px, 2.5vw, 28px) !important; border-radius: 18px !important; }
.roi-grid { gap: 18px !important; align-items: stretch; }
.roi-inputs { display: flex !important; flex-direction: column !important; gap: 0 !important; }
.roi-input { padding: 10px 0 !important; margin: 0 !important; border-top: 1px solid rgba(0,0,0,0.08); }
.roi-input:first-child { border-top: 0; padding-top: 4px !important; }
.roi-input label { display: block; font-size: 13px !important; margin: 0 0 6px !important; line-height: 1.3 !important; font-weight: 600; }
.roi-input label .hint { font-weight: 400; opacity: 0.7; font-size: 12px; }
.roi-input .field { padding: 0 !important; display: flex; align-items: center; gap: 8px; }
.roi-input .field input { padding: 8px 10px !important; font-size: 14px !important; border-radius: 8px !important; flex: 1; }
.roi-input .field .unit { font-size: 12px !important; opacity: 0.7; white-space: nowrap; }
.roi-reset { margin-top: 12px !important; padding: 6px 12px !important; font-size: 12px !important; }
.roi-output { padding: 18px !important; border-radius: 14px !important; }
.roi-output .label { font-size: 12px !important; margin-bottom: 4px !important; }
.roi-output .big { font-size: clamp(28px, 4.5vw, 40px) !important; line-height: 1.05 !important; margin: 0 !important; }
.roi-output .roi-bar { margin: 10px 0 !important; }
.roi-output .roi-breakdown { font-size: 12px !important; margin: 6px 0 !important; opacity: 0.75; }
.roi-output .roi-annual { font-size: 14px !important; margin: 8px 0 4px !important; }
.roi-output .sub { font-size: 12px !important; opacity: 0.7; margin: 0 !important; }
@media (max-width: 720px) {
  .roi-card { padding: 16px !important; }
}

/* Item 17: fix squished reprogrammed photo + all mb-img (Mind/Brain bonus visuals) */
.mb-img { aspect-ratio: 16/10 !important; overflow: hidden; border-radius: 14px; }
.mb-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Item 18: annual card formatting + green value stack */
.price-card.annual .feat-label { color: var(--ink) !important; }
.price-card.annual .price-features li { color: var(--ink) !important; }
.price-card.annual .price-features li strong { color: var(--ink) !important; }
.bonus-value-pill, .stack-value, .annual-value { color: #166534 !important; }
.price-card.annual .stack-value { color: #16a34a !important; font-weight: 700; }

/* Item 20: fix 'This is not for you' — readable on dark ink background */
.exclusion { padding: clamp(28px, 4vw, 44px) !important; border-radius: 22px !important; }
.exclusion ul { padding-left: 0 !important; list-style: none !important; display: grid; gap: 12px; margin: 18px 0 0; }
.exclusion ul li {
  position: relative;
  padding: 14px 18px 14px 44px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 14px !important;
  line-height: 1.55 !important;
  color: rgba(255, 250, 245, 0.92) !important;
  font-size: 15px !important;
}
.exclusion ul li::before {
  content: "✕" !important;
  position: absolute !important;
  left: 16px !important;
  top: 14px !important;
  width: auto !important;
  height: auto !important;
  display: inline !important;
  background: none !important;
  color: var(--lavender) !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
}
.exclusion ul li strong {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* Item 14: bonus stack → horizontal scroll rail with snap */
.bonus-stack-section { padding: clamp(40px, 5vw, 64px) 0 !important; }
.stack-grid {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 18px !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* -webkit-overflow-scrolling removed — obsolete and can trap touch on modern iOS Safari */
  padding: 8px clamp(16px, 4vw, 48px) 24px;
  scrollbar-width: none;
  touch-action: auto;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}
.stack-grid::-webkit-scrollbar { display: none; }
.stack-grid .stack-card {
  flex: 0 0 clamp(240px, 26vw, 320px);
  scroll-snap-align: start;
}
.stack-img { aspect-ratio: 4/3; overflow: hidden; }
.stack-img img { width: 100%; height: 100%; object-fit: cover; }

/* Item 18: annual card price-features text in dark ink, value pill green */
.price-card.annual .price-features { color: var(--ink) !important; }
.price-card.annual .price-features li,
.price-card.annual .price-features li span,
.price-card.annual .price-features li strong {
  color: var(--ink) !important;
}
.price-card.annual .feat-label,
.price-card.annual .feat-label .muted {
  color: var(--ink-2) !important;
}
.price-card.annual .price-tag,
.price-card.annual .price-tag-big {
  color: var(--ink) !important;
}
.bonus-value, .stack-value, .stack-total-value, .annual-saving, .price-card.annual .save {
  color: #166534 !important;
  font-weight: 700;
}
.stack-total-value { color: #15803d !important; font-size: 28px !important; font-weight: 800 !important; }

/* Item 13c reassurance: review marquee still animates right-to-left */
.review-track { animation: review-scroll 60s linear infinite !important; }

/* Item 19: case-marquee - 4 reviews under pricing as slow right-to-left auto-scrolling marquee */
.case-marquee {
  overflow: hidden;
  padding: 16px 0;
}
.case-marquee .case-row {
  display: inline-flex !important;
  gap: 18px;
  width: max-content;
  animation: case-scroll 80s linear infinite;
  overflow: visible !important;
  scroll-snap-type: none !important;
}
.case-marquee .case-card { flex: 0 0 clamp(280px, 28vw, 380px); }
@keyframes case-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ---------- v12 · Brett's second batch (split tighten, ROI pocket, stack glow, feat bullets) ---------- */

/* Tighten Claude vs ChatGPT split section */
.split-section { padding: clamp(40px, 5vw, 64px) 0 !important; }
.split-card { padding: clamp(22px, 3vw, 32px) !important; }
.split-title { font-size: clamp(22px, 2.6vw, 30px) !important; margin-bottom: 6px !important; }
.split-sub { margin-bottom: 14px !important; font-size: 14px !important; }
.split-section .container > .reveal:first-child { margin-bottom: 28px !important; }

/* ROI calculator → pocket size (eliminate all extra space) */
.roi-card { padding: clamp(16px, 2vw, 22px) !important; }
.roi-grid { gap: 12px !important; grid-template-columns: 1.1fr 0.9fr !important; }
.roi-card > div:first-child { margin-bottom: 12px !important; }
.roi-card > div:first-child .eyebrow { margin-bottom: 4px !important; }
.roi-card > div:first-child h2 { font-size: clamp(20px, 2.6vw, 26px) !important; margin-top: 8px !important; margin-bottom: 4px !important; }
.roi-card > div:first-child .lead { font-size: 13px !important; line-height: 1.4 !important; margin-top: 6px !important; }
.roi-card .section-cta { margin-top: 14px !important; padding: 14px 18px !important; }
.roi-card .section-cta p { font-size: 13px !important; margin: 0 0 8px !important; }
.roi-input { padding: 6px 0 !important; }
.roi-input:first-child { padding-top: 0 !important; }
.roi-input label { font-size: 12px !important; margin-bottom: 3px !important; }
.roi-input .field input { padding: 6px 9px !important; font-size: 13px !important; }
.roi-input .field .unit { font-size: 11px !important; }
.roi-reset { margin-top: 8px !important; padding: 5px 10px !important; font-size: 11px !important; }
.roi-output { padding: 14px !important; }
.roi-output .label { font-size: 11px !important; }
.roi-output .big { font-size: clamp(24px, 3.5vw, 32px) !important; }
.roi-output .roi-bar { height: 4px !important; margin: 8px 0 !important; }
.roi-output .roi-breakdown { font-size: 11px !important; }
.roi-output .roi-annual { font-size: 13px !important; }
.roi-output .sub { font-size: 11px !important; }
@media (max-width: 720px) {
  .roi-grid { grid-template-columns: 1fr !important; }
}

/* Bonus stack — stack-value green + glow + pulse */
.stack-value {
  color: #16a34a !important;
  background: rgba(22, 163, 74, 0.08) !important;
  border: 1px solid rgba(22, 163, 74, 0.28) !important;
  text-shadow: 0 0 6px rgba(22, 163, 74, 0.4) !important;
  font-weight: 700 !important;
  animation: stack-value-pulse 2.6s ease-in-out infinite;
}
@keyframes stack-value-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(22, 163, 74, 0); transform: scale(1); }
  50% { box-shadow: 0 0 14px rgba(22, 163, 74, 0.35); transform: scale(1.03); }
}

/* Annual price card value-stack — .vv prices green + glow + pulse */
.price-card.featured .value-stack .vv,
.value-stack .vv {
  color: #22c55e !important;
  text-shadow: 0 0 8px rgba(34, 197, 94, 0.55) !important;
  font-weight: 700 !important;
  animation: vv-pulse 2.4s ease-in-out infinite;
}
@keyframes vv-pulse {
  0%, 100% { opacity: 0.92; text-shadow: 0 0 6px rgba(34, 197, 94, 0.4); }
  50% { opacity: 1; text-shadow: 0 0 14px rgba(34, 197, 94, 0.75); }
}

/* Annual card value-stack li — readable text + clean separator */
.price-card.featured .value-stack { margin: 0 0 20px !important; gap: 8px !important; }
.price-card.featured .value-stack li {
  color: rgba(255, 250, 245, 0.92) !important;
  padding: 8px 12px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 8px !important;
  font-size: 13.5px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}
/* Annual tier highlighted bonus (Instagirl Boss Brand Builder) — stands out so the headline bonus is unmissable */
.price-card.featured .value-stack li.featured-bonus {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.22) 0%, rgba(139, 92, 246, 0.22) 100%) !important;
  border: 1px solid rgba(236, 72, 153, 0.55) !important;
  color: #fff !important;
  font-weight: 700 !important;
  padding: 10px 14px !important;
  box-shadow: 0 0 16px -2px rgba(236, 72, 153, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important;
  position: relative;
  animation: featured-bonus-glow 2.4s ease-in-out infinite;
}
.price-card.featured .value-stack li.featured-bonus .fb-star {
  color: #fbbf24;
  margin-right: 8px;
  font-size: 14px;
  text-shadow: 0 0 8px rgba(251, 191, 36, 0.7);
  flex-shrink: 0;
}
.price-card.featured .value-stack li.featured-bonus .vv {
  color: #fbbf24 !important;
  font-weight: 800 !important;
}
@keyframes featured-bonus-glow {
  0%, 100% { box-shadow: 0 0 16px -2px rgba(236, 72, 153, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.04); }
  50% { box-shadow: 0 0 26px 0 rgba(236, 72, 153, 0.6), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
}
@media (prefers-reduced-motion: reduce) { .price-card.featured .value-stack li.featured-bonus { animation: none; } }

/* Annual card feat-list bullets — pink dot, readable */
.price-card.featured .feat-list,
.price-card.featured .feat-list.tight {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 22px !important;
  display: grid !important;
  gap: 10px !important;
}
.price-card.featured .feat-list li,
.price-card.featured .feat-list.tight li {
  position: relative !important;
  padding: 0 0 0 28px !important;
  color: rgba(255, 250, 245, 0.95) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
}
.price-card.featured .feat-list li::before,
.price-card.featured .feat-list.tight li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 5px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: var(--pink-deep) !important;
}
.price-card.featured .feat-label {
  color: rgba(255, 250, 245, 0.65) !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0 0 12px !important;
}

/* ---------- v13 · Tighten FAQ + global section spacing ---------- */

/* Section padding — pull tight across the page */
section { padding-top: clamp(20px, 2.5vw, 36px) !important; padding-bottom: clamp(20px, 2.5vw, 36px) !important; }
.section-band { padding-top: clamp(24px, 3vw, 40px) !important; padding-bottom: clamp(24px, 3vw, 40px) !important; }
.bonus-stack-section { padding: clamp(24px, 3vw, 40px) 0 !important; }

/* Override inline section padding (hero-adjacent, video reviews, exclusion) */
section[style*="padding: clamp(40px, 5vw, 60px) 0"] { padding: clamp(20px, 2.5vw, 36px) 0 !important; }
section[style*="padding: clamp(60px, 8vw, 100px) 0"] { padding: clamp(24px, 3vw, 40px) 0 !important; }
section[style*="padding-top: clamp(40px, 6vw, 80px)"] { padding-top: clamp(20px, 2.5vw, 36px) !important; padding-bottom: clamp(20px, 2.5vw, 36px) !important; }

/* Squeeze the bottom margin on section header blocks (the "max-width: 760px; margin: 0 auto 56px" pattern) */
[style*="margin: 0 auto 56px"] { margin-bottom: 22px !important; }
[style*="margin: 0 auto 48px"] { margin-bottom: 20px !important; }
[style*="margin: 0 auto 44px"] { margin-bottom: 18px !important; }
[style*="margin: 0 auto 36px"] { margin-bottom: 16px !important; }
[style*="margin: 0 auto 28px"] { margin-bottom: 14px !important; }

/* Section header h2.h-section — pull top spacing in */
.h-section[style*="margin-top: 20px"] { margin-top: 8px !important; }

/* FAQ — collapse padding and gap */
.faq-wrap { max-width: 820px; margin: 0 auto; }
.faq-list { gap: 6px !important; margin-top: 16px !important; }
.faq {
  border-radius: 14px !important;
  background: rgba(255, 255, 255, 0.75) !important;
}
.faq summary {
  padding: 12px 18px !important;
  font-size: 15px !important;
  grid-template-columns: 1fr 28px !important;
  gap: 12px !important;
}
.faq summary .chev {
  width: 28px !important;
  height: 28px !important;
}
.faq summary .chev svg { width: 10px !important; height: 10px !important; }
.faq-body {
  padding: 0 18px 14px !important;
  font-size: 13.5px !important;
  line-height: 1.55 !important;
}
.faq[open] { box-shadow: 0 8px 24px -16px rgba(236, 72, 153, 0.16) !important; }

/* Section-CTA blocks — tighter vertical rhythm */
.section-cta { padding: 18px 22px !important; margin-top: 16px !important; }
.section-cta p { margin: 0 0 10px !important; }

/* Reveal margin between major blocks */
.reveal + .reveal { margin-top: 0 !important; }

/* ---------- v14 · Brett's third batch (member-card height, PLN clip, save white, annual spacing, stack tap-hint, sticky) ---------- */

/* Item 1: member-card — stop sibling cards from stretching when one expands */
.members-rail .chap-row,
.members-row,
#members-row { align-items: flex-start !important; }
.member-card { align-self: flex-start !important; }

/* Item 2: PLN / hour and similar unit text was being clipped at the field right edge */
.roi-input .field {
  padding: 0 12px 0 0 !important;
  overflow: visible !important;
  gap: 6px !important;
}
.roi-input .field input {
  min-width: 0 !important;
  flex: 1 1 auto !important;
}
.roi-input .field .unit {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  font-size: 11.5px !important;
}

/* Item 5: save-callout — white text on a pink-deep chip so it pops on the dark Annual card */
.price-card.featured .save-callout {
  background: var(--pink-deep) !important;
  border-color: var(--pink-deep) !important;
  color: #ffffff !important;
}
.price-card.featured .save-callout strong { color: #ffffff !important; }

/* Item 6: tighten annual price card spacing (math-box + value-stack + ribbons) */
.price-card.featured { padding: clamp(26px, 3.5vw, 38px) clamp(22px, 3vw, 32px) !important; }
.price-card.featured .price { margin: 14px 0 10px !important; }
.price-card.featured .save-callout { margin: 0 0 14px !important; }
.price-card.featured .feat-label { margin: 0 0 8px !important; font-size: 10px !important; }
.price-card.featured .feat-list.tight { margin: 0 0 16px !important; gap: 7px !important; }
.price-card.featured .feat-list.tight li { font-size: 13px !important; }
.price-card.featured .value-stack { margin: 0 0 14px !important; gap: 5px !important; }
.price-card.featured .value-stack li { padding: 6px 10px !important; font-size: 13px !important; }
.math-box { padding: 12px 14px !important; margin: 0 0 16px !important; gap: 4px !important; }
.math-row { padding: 4px 0 !important; font-size: 12.5px !important; }
.math-row.math-total, .math-row.math-pay, .math-row.math-save { padding: 6px 0 !important; font-size: 13.5px !important; }
.price-card.featured .btn.pink.lg { padding: 12px 18px !important; }
.price-card.featured .small { margin: 8px 0 0 !important; font-size: 11px !important; opacity: 0.55 !important; }

/* Item 8: tap-hint inside the bonus stack-grid (Seven additional products) */
.stack-grid { position: relative !important; }
.bonus-stack-section .stack-grid .tap-hint {
  position: absolute !important;
  top: 50% !important;
  left: clamp(16px, 4vw, 48px) !important;
  transform: translateY(-50%) !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 8px !important;
  pointer-events: none !important;
}
/* Desktop has rail prev/next buttons + wheel scrolling, no swipe needed.
   The tap-hint label overlays the first card's title for 9 seconds, so hide on desktop. */
@media (min-width: 721px) {
  .bonus-stack-section .stack-grid .tap-hint { display: none !important; }
  .members-rail .tap-hint,
  .chap-rail .tap-hint,
  .videos-rail .tap-hint,
  .case-rail .tap-hint { display: none !important; }
}

/* Item 9: sticky pill — kill the fade so the static message reads clearly */
#sticky-headline { opacity: 1 !important; transition: none !important; }

/* ---------- v15 · Exit-intent modal ---------- */
.exit-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.exit-modal.open { display: flex; animation: exit-modal-fade 220ms ease forwards; }
.exit-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 8, 18, 0.55);
  cursor: pointer;
}
.exit-card {
  position: relative;
  z-index: 2;
  background: #fffaf5;
  border-radius: 22px;
  padding: clamp(22px, 3vw, 30px) clamp(20px, 2.5vw, 30px);
  max-width: 380px;
  width: 100%;
  box-shadow: 0 40px 80px -20px rgba(236, 72, 153, 0.42), 0 16px 32px -12px rgba(26, 13, 20, 0.4);
  animation: exit-card-pop 320ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
@media (max-width: 720px) {
  /* Mobile: smaller, friendlier modal — less padding, narrower, denser */
  .exit-modal { padding: 12px; }
  .exit-card { padding: 18px 16px 16px; max-width: 320px; border-radius: 18px; }
  .exit-card h3 { margin: 4px 0 8px; font-size: 18px; }
  .exit-card > p { font-size: 13.5px; margin: 0 0 12px; }
  .exit-card form { gap: 8px; }
  .exit-card input { padding: 10px 14px; font-size: 14px; }
  .exit-card .btn.pink.lg { padding: 10px 14px; font-size: 14px; }
  .exit-card .exit-fineprint { font-size: 10.5px !important; margin: 8px 0 0 !important; }
}

/* Exit modal bullets — visual feature list, replaces the wordy paragraph copy.
   Pink-deep checkmark + tight stacking so the modal stays compact and scannable. */
.exit-bullets {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.exit-bullets li {
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--ink-2);
  padding-left: 22px;
  position: relative;
}
.exit-bullets li::before {
  content: '✓';
  position: absolute;
  left: 2px;
  top: 0;
  color: var(--pink-deep);
  font-weight: 700;
  font-size: 14px;
  line-height: 1.4;
}
.exit-bullets li strong { color: var(--ink); font-weight: 700; }
@media (max-width: 720px) {
  .exit-bullets { margin: 0 0 12px; gap: 5px; }
  .exit-bullets li { font-size: 12.5px; padding-left: 20px; }
  .exit-bullets li::before { font-size: 13px; }
}
.exit-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 44px;
  height: 44px;
  border: 0;
  background: rgba(26, 13, 20, 0.10);
  color: var(--ink);
  border-radius: 50%;
  font-size: 24px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease, transform 160ms ease;
  z-index: 3;
}
.exit-close:hover { background: rgba(26, 13, 20, 0.18); transform: scale(1.05); }
.exit-close:active { transform: scale(0.95); }
@media (max-width: 720px) {
  /* Mobile: huge tappable X so users don't reach for the tab-close instead */
  .exit-close { width: 56px; height: 56px; font-size: 30px; top: 8px; right: 8px; }
}

/* Per-field error message + error border on inputs */
.exit-field { display: flex; flex-direction: column; gap: 4px; }
.exit-err {
  font-family: var(--body);
  font-size: 12.5px;
  color: #b91c1c;
  font-weight: 500;
  padding: 0 4px;
}
.exit-err-server { margin: 8px 0 0 !important; text-align: center; }
.exit-card input.exit-err-input { border-color: #b91c1c !important; box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.12) !important; }
.exit-card .eyebrow { display: inline-flex; }
.exit-card h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 28px);
  line-height: 1.15;
  margin: 12px 0 10px;
  color: var(--ink);
}
.exit-card h3 em {
  font-family: var(--italic);
  font-style: italic;
  color: var(--pink-deep);
}
.exit-card > p {
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 18px;
}
.exit-card form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.exit-card input {
  padding: 12px 16px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  font-size: 15px;
  font-family: var(--body);
  background: #fff;
  color: var(--ink);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.exit-card input:focus {
  outline: none;
  border-color: var(--pink-deep);
  box-shadow: 0 0 0 3px rgba(236, 72, 153, 0.15);
}
.exit-card input::placeholder { color: rgba(26, 13, 20, 0.4); }
.exit-card .btn.pink.lg {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.exit-card .exit-success {
  margin: 14px 0 0 !important;
  padding: 12px 14px;
  background: rgba(22, 163, 74, 0.08);
  border: 1px solid rgba(22, 163, 74, 0.25);
  border-radius: 10px;
  color: #15803d;
  font-weight: 600;
  text-align: center;
  font-size: 14px;
}
.exit-card .exit-fineprint {
  margin: 12px 0 0 !important;
  font-size: 11px !important;
  opacity: 0.55;
  text-align: center;
  color: var(--ink-mute);
}
@keyframes exit-modal-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes exit-card-pop {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 480px) {
  .exit-card { padding: 24px 20px; border-radius: 20px; }
  .exit-card h3 { font-size: 22px; }
}

/* Bonus stack cards — visible cursor + lift on hover so taps feel right */
.bonus-stack-section .stack-card { cursor: pointer; }
.bonus-stack-section .stack-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -22px rgba(236, 72, 153, 0.22); }

/* ---------- v16 · Cost-savings comparison + tighter ROI CTA + urgency stack-card ---------- */

/* Cost-savings block sits inside the .roi-card under the existing calc */
.cost-savings {
  margin-top: 24px;
  padding: clamp(20px, 2.4vw, 28px);
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255, 250, 245, 0.4));
  border: 1px solid rgba(26, 13, 20, 0.08);
  border-radius: 18px;
}
.cs-header { text-align: center; margin-bottom: 18px; }
.cs-header .cs-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: rgba(196, 181, 253, 0.12);
  border: 1px solid rgba(196, 181, 253, 0.25);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lavender-deep);
  font-weight: 600;
}
.cs-header .cs-eyebrow em { font-style: italic; font-family: var(--italic); text-transform: none; letter-spacing: 0; }
.cs-header h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  margin: 12px 0 4px;
  color: var(--ink);
  line-height: 1.15;
}
.cs-header h3 em { font-family: var(--italic); font-style: italic; color: var(--pink-deep); }
.cs-header .cs-sub {
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-2);
  margin: 0;
  opacity: 0.8;
}

/* Three input rows: label + old → new */
.cs-grid {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}
.cs-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 12px;
}
.cs-input-row label {
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
}
.cs-fields { display: flex; align-items: center; gap: 8px; }
.cs-old, .cs-new {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  border-radius: 8px;
}
.cs-old { background: rgba(220, 38, 38, 0.06); border: 1px solid rgba(220, 38, 38, 0.18); }
.cs-new { background: rgba(22, 163, 74, 0.08); border: 1px solid rgba(22, 163, 74, 0.22); }
.cs-tag {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.75;
}
.cs-old .cs-tag { color: #b91c1c; }
.cs-new .cs-tag { color: #15803d; }
.cs-fields input {
  width: 42px;
  padding: 2px 4px;
  border: 0;
  background: transparent;
  font-family: var(--display);
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  outline: none;
  -moz-appearance: textfield;
}
.cs-fields input::-webkit-outer-spin-button,
.cs-fields input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-arrow {
  font-size: 16px;
  color: var(--ink-mute);
  opacity: 0.5;
  font-weight: 400;
}

/* Result row: before red column → after green column */
.cs-result {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  margin-bottom: 12px;
}
.cs-result-col { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.cs-result-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.7;
}
.cs-result-hours {
  font-family: var(--display);
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 800;
  line-height: 1;
}
.cs-result-hours small {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.6;
  margin-left: 4px;
}
.cs-result-money {
  font-family: var(--body);
  font-size: 12.5px;
  font-weight: 600;
  opacity: 0.85;
}
.cs-result-before { color: #b91c1c; }
.cs-result-before .cs-result-label { color: #b91c1c; }
.cs-result-after { color: #15803d; }
.cs-result-after .cs-result-label { color: #15803d; }
.cs-result-arrow {
  font-size: 24px;
  color: var(--ink-mute);
  font-weight: 300;
}

/* Saved row — the takeaway */
.cs-saved {
  text-align: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.10), rgba(22, 163, 74, 0.04));
  border: 1px solid rgba(22, 163, 74, 0.3);
  border-radius: 12px;
  font-family: var(--body);
  font-size: 14px;
  color: var(--ink);
  line-height: 1.45;
}
.cs-saved strong { color: #15803d; font-weight: 700; }
.cs-saved .cs-saved-money { display: inline-block; margin-left: 4px; }

@media (max-width: 640px) {
  .cs-input-row { grid-template-columns: 1fr; gap: 8px; }
  .cs-fields { justify-content: space-between; }
  .cs-result { grid-template-columns: 1fr; gap: 10px; }
  .cs-result-arrow { transform: rotate(90deg); }
  .cs-saved .cs-saved-money { display: block; margin-left: 0; margin-top: 4px; }
}

/* Tighter ROI section-CTA after the calculator + cost-savings */
.roi-card .roi-cta-tight, .roi-cta-tight {
  padding: 12px 18px !important;
  margin-top: 14px !important;
}
.roi-cta-tight p { margin: 0 0 8px !important; font-size: 14px !important; }
.roi-cta-tight .btn.pink.lg { padding: 9px 18px !important; font-size: 14px !important; }

/* Urgency stack-card — time-limited Live AI Sprints accent */
.stack-card.stack-urgent {
  border: 1px solid rgba(220, 38, 38, 0.28) !important;
  background: linear-gradient(180deg, #fff 0%, rgba(254, 226, 226, 0.4) 100%) !important;
}
.stack-card.stack-urgent .stack-value {
  background: rgba(220, 38, 38, 0.10) !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
  color: #b91c1c !important;
  text-shadow: 0 0 6px rgba(220, 38, 38, 0.35) !important;
  animation: stack-urgent-pulse 1.8s ease-in-out infinite !important;
}
@keyframes stack-urgent-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(220, 38, 38, 0); }
  50% { box-shadow: 0 0 16px rgba(220, 38, 38, 0.4); }
}

/* ---------- v17 · Calendar modal formatting + feat-list strong color + rail-nav/tap-hint pinned ---------- */

/* Calendar modal: dt + dd were stacking inside their wrapper divs because the outer grid only saw the divs as cells. Fix the inner grid. */
.cal-modal-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  grid-template-columns: none !important;
  margin: 0 0 18px !important;
}
.cal-modal-meta > div {
  display: grid !important;
  grid-template-columns: 88px 1fr !important;
  gap: 14px !important;
  align-items: baseline !important;
  padding: 8px 12px !important;
  background: rgba(196, 181, 253, 0.06);
  border-radius: 10px;
  border: 1px solid rgba(26, 13, 20, 0.06);
}
.cal-modal-meta dt {
  font-family: var(--body) !important;
  font-weight: 700 !important;
  color: var(--ink) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  font-size: 10.5px !important;
  margin: 0 !important;
}
.cal-modal-meta dd {
  margin: 0 !important;
  font-family: var(--body) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
}
.cal-modal-card #cal-modal-desc {
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 0;
  padding-top: 4px;
  border-top: 1px solid rgba(26, 13, 20, 0.08);
}
.cal-modal-card #cal-modal-desc strong { color: var(--ink); font-weight: 700; }

/* Feat-list <strong> on the dark Annual card was rendering near-black. Make it pink-deep with a soft glow so urgency lines pop. */
.price-card.featured .feat-list li strong,
.price-card.featured .feat-list.tight li strong {
  color: var(--pink-deep) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 8px rgba(236, 72, 153, 0.45);
}
.price-card.featured .feat-label strong {
  color: var(--pink-deep) !important;
  font-weight: 700 !important;
}

/* When a Read story panel opens, the rail grew taller and the tap-hint finger + rail-nav arrows (positioned at top:50%) drifted with it. Pin them to a fixed offset matching the image height instead. */
.members-rail .rail-nav,
.videos-rail .rail-nav {
  top: 180px !important;
  transform: translateY(0) !important;
}
.members-rail .rail-nav:hover,
.videos-rail .rail-nav:hover {
  transform: translateY(0) scale(1.06) !important;
}
.members-rail .rail-nav:active,
.videos-rail .rail-nav:active {
  transform: translateY(0) scale(0.96) !important;
}
.members-rail .tap-hint,
.videos-rail .tap-hint,
.chap-rail.members-rail .tap-hint {
  top: 160px !important;
  transform: translateY(0) !important;
}
@media (max-width: 720px) {
  .members-rail .tap-hint,
  .videos-rail .tap-hint { top: 140px !important; }
}

/* ---------- v18 · Member overlay + merged calc + save-callout dramatic + courses label + bonus rail ---------- */

/* Member-expand → overlay inside card so opening doesn't push the rail/page taller */
.member-card { position: relative; }
.member-card.open { z-index: 30; }
.member-expand {
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  bottom: 64px; /* leave Read story button visible at bottom */
  background: linear-gradient(180deg, rgba(255,250,245,0.98) 0%, rgba(255,245,232,0.98) 100%);
  padding: 20px 22px 16px !important;
  overflow-y: auto;
  z-index: 5;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  max-height: none !important;
  transition: opacity 240ms ease, visibility 240ms ease !important;
  box-shadow: inset 0 1px 0 rgba(236, 72, 153, 0.15);
  border-radius: 0;
}
.member-card.open .member-expand {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.member-expand p {
  font-family: var(--body);
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--ink) !important;
  margin: 0 0 10px !important;
}
.member-expand p strong { color: var(--pink-deep); font-weight: 700; }

/* Cost-savings bucket inputs INSIDE the existing ROI calc (merged) */
.cs-bucket-header {
  margin-top: 14px;
  margin-bottom: 10px;
  padding: 10px 12px;
  background: rgba(196, 181, 253, 0.10);
  border: 1px solid rgba(196, 181, 253, 0.22);
  border-radius: 10px;
}
.cs-bucket-eyebrow {
  display: block;
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--lavender-deep);
}
.cs-bucket-eyebrow em { text-transform: none; font-style: italic; font-family: var(--italic); letter-spacing: 0; }
.cs-bucket-hint { display: block; font-size: 11px; color: var(--ink-2); margin-top: 4px; opacity: 0.7; }
.cs-bucket-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  align-items: center;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  margin-bottom: 6px;
}
.cs-bucket-row label {
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.cs-fields { display: flex; align-items: center; gap: 6px; }
.cs-old, .cs-new {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 8px;
}
.cs-old { background: rgba(220, 38, 38, 0.07); border: 1px solid rgba(220, 38, 38, 0.20); }
.cs-new { background: rgba(22, 163, 74, 0.09); border: 1px solid rgba(22, 163, 74, 0.24); }
.cs-tag {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.7;
}
.cs-old .cs-tag { color: #b91c1c; }
.cs-new .cs-tag { color: #15803d; }
.cs-fields input {
  width: 36px;
  padding: 1px 2px;
  border: 0;
  background: transparent;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  outline: none;
  -moz-appearance: textfield;
}
.cs-fields input::-webkit-outer-spin-button,
.cs-fields input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cs-arrow { font-size: 14px; color: var(--ink-mute); opacity: 0.5; }
.cs-bucket-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 12px;
  background: linear-gradient(135deg, rgba(22, 163, 74, 0.10), rgba(22, 163, 74, 0.05));
  border: 1px solid rgba(22, 163, 74, 0.3);
  border-radius: 10px;
  margin-top: 4px;
  margin-bottom: 10px;
}
.cs-bucket-total-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.04em;
}
.cs-bucket-total-value {
  font-family: var(--display);
  font-size: 14px;
  color: #15803d;
  font-weight: 700;
}
.cs-bucket-total-value strong {
  font-size: 22px;
  color: #15803d;
  font-weight: 800;
  margin-right: 2px;
}

/* Mini old → new compare strip on top of the output */
.cs-mini-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin-bottom: 14px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 10px;
  border: 1px solid rgba(26, 13, 20, 0.06);
}
.cs-mini-col { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.cs-mini-label {
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.7;
}
.cs-mini-hours {
  font-family: var(--display);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
}
.cs-mini-hours small {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.55;
  margin-left: 3px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.cs-mini-money { font-size: 11.5px; font-weight: 600; opacity: 0.85; }
.cs-mini-old, .cs-mini-old .cs-mini-label { color: #b91c1c; }
.cs-mini-new, .cs-mini-new .cs-mini-label { color: #15803d; }
.cs-mini-arrow { color: var(--ink-mute); font-size: 16px; }

/* DRAMATIC save-callout — Brett wants emotion and movement */
.price-card.featured .save-callout {
  display: block !important;
  text-align: center !important;
  padding: 18px 16px !important;
  margin: 14px 0 18px !important;
  background: linear-gradient(135deg, var(--pink-deep) 0%, var(--lavender-deep) 100%) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 16px !important;
  font-size: 12px !important;
  font-weight: 600;
  color: rgba(255,255,255,0.92) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 16px 40px -16px rgba(236, 72, 153, 0.6), inset 0 1px 0 rgba(255,255,255,0.2);
}
.price-card.featured .save-callout::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,0.25) 50%, transparent 100%);
  animation: save-shimmer 3.8s ease-in-out infinite;
}
.price-card.featured .save-callout strong {
  display: block !important;
  font-family: var(--display) !important;
  font-size: clamp(40px, 6.5vw, 64px) !important;
  font-weight: 800 !important;
  margin: 6px 0 !important;
  color: #ffffff !important;
  text-shadow: 0 0 28px rgba(255, 255, 255, 0.4), 0 4px 16px rgba(0, 0, 0, 0.25);
  animation: save-pulse 2.2s ease-in-out infinite;
  letter-spacing: -0.02em !important;
  line-height: 0.95 !important;
  position: relative;
  z-index: 2;
}
@keyframes save-pulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 28px rgba(255, 255, 255, 0.4), 0 4px 16px rgba(0, 0, 0, 0.25); }
  50% { transform: scale(1.05); text-shadow: 0 0 44px rgba(255, 255, 255, 0.7), 0 6px 24px rgba(0, 0, 0, 0.35); }
}
@keyframes save-shimmer {
  0% { left: -100%; }
  60%, 100% { left: 160%; }
}

/* Feat-label-courses: not all caps, readable size */
.price-card.featured .feat-label.feat-label-courses {
  text-transform: none !important;
  font-size: 13.5px !important;
  letter-spacing: 0 !important;
  color: rgba(255, 250, 245, 0.85) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  margin: 0 0 12px !important;
}
.price-card.featured .feat-label.feat-label-courses strong {
  color: var(--pink-deep) !important;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(236, 72, 153, 0.35);
}
.price-card.featured .feat-label.feat-label-courses .muted {
  color: rgba(255, 250, 245, 0.5) !important;
  font-size: 11.5px;
}

/* Bonus stack rail-nav buttons */
.bonus-rail { position: relative; }
.bonus-stack-section .bonus-rail .rail-nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10;
}
.bonus-stack-section .bonus-rail .rail-nav.prev { left: -4px !important; }
.bonus-stack-section .bonus-rail .rail-nav.next { right: -4px !important; }
.bonus-stack-section .bonus-rail .rail-nav:hover {
  transform: translateY(-50%) scale(1.06) !important;
  background: var(--pink-wash) !important;
}
.bonus-stack-section .bonus-rail .rail-nav:active {
  transform: translateY(-50%) scale(0.96) !important;
}
@media (max-width: 720px) {
  .bonus-stack-section .bonus-rail .rail-nav { display: flex !important; width: 38px !important; height: 38px !important; }
  .bonus-stack-section .bonus-rail .rail-nav.prev { left: 4px !important; }
  .bonus-stack-section .bonus-rail .rail-nav.next { right: 4px !important; }
}

/* Make stack-grid scrollable both ways smoothly */
.bonus-stack-section .stack-grid { scroll-snap-type: x mandatory; scroll-padding-left: 16px; }
.bonus-stack-section .stack-card { scroll-snap-align: start; }

/* ---------- v19 · True modal Read-Story (members + videos) + horizontal save-callout + pulse CTAs + big VS + exit bubble ---------- */

/* MEMBER read-story: true viewport-fixed modal so nothing in the page moves.
   z-index: 10001 was elevating the original card ABOVE the backdrop, leaving the IG screenshot
   visible behind the story copy. Drop it so the card sits in normal flow under the backdrop. */
.member-card.open { z-index: auto; }
/* ::before backdrop intentionally removed — JS portal IIFE creates its own .member-modal-backdrop
   at z-index 9998 with 0.92 opacity + 20px blur, which fully obscures the carousel underneath. */
.member-card .member-expand {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) scale(0.96) !important;
  width: min(440px, 92vw) !important;
  max-width: 92vw !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, #fffaf5 0%, #fff5e8 100%) !important;
  padding: 28px 26px 24px !important;
  border-radius: 24px !important;
  box-shadow: 0 40px 80px -20px rgba(236, 72, 153, 0.45), 0 16px 32px -12px rgba(26, 13, 20, 0.4) !important;
  z-index: 10000 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 240ms ease, visibility 240ms ease, transform 240ms cubic-bezier(0.32, 0.72, 0, 1) !important;
}
.member-card.open .member-expand {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translate(-50%, -50%) scale(1) !important;
}
.member-card.open .member-expand::before {
  content: '×';
  position: sticky;
  top: -4px;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(26, 13, 20, 0.06);
  color: var(--ink);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  margin-bottom: 6px;
}

/* VIDEO read-story: same modal treatment for .story-expand details.
   Same z-index fix as .member-card.open above — was elevating the video tile above the backdrop. */
.story-expand[open] { z-index: auto; position: relative; }
/* ::before backdrop removed — JS portal IIFE creates its own .story-modal-backdrop. */
.story-expand[open] .body {
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(440px, 92vw) !important;
  max-width: 92vw !important;
  max-height: 70vh !important;
  overflow-y: auto !important;
  background: linear-gradient(180deg, #fffaf5 0%, #fff5e8 100%) !important;
  padding: 30px 26px 24px !important;
  border-radius: 24px !important;
  box-shadow: 0 40px 80px -20px rgba(236, 72, 153, 0.45), 0 16px 32px -12px rgba(26, 13, 20, 0.4) !important;
  z-index: 10000 !important;
}
.story-expand[open] .body p { font-size: 14px !important; line-height: 1.55 !important; color: var(--ink) !important; }
.story-expand[open] .body p strong { color: var(--pink-deep); }
@keyframes rs-fade { from { opacity: 0; } to { opacity: 1; } }

/* Big red VS in the cost-savings header */
.cs-vs {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  color: #b91c1c;
  letter-spacing: 0.02em;
  padding: 2px 10px;
  margin: 0 4px;
  background: rgba(220, 38, 38, 0.10);
  border: 1.5px solid rgba(220, 38, 38, 0.4);
  border-radius: 8px;
  text-shadow: 0 0 12px rgba(220, 38, 38, 0.4);
  line-height: 1;
  vertical-align: middle;
  animation: vs-pop 2.4s ease-in-out infinite;
}
@keyframes vs-pop {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(220, 38, 38, 0); }
  50% { transform: scale(1.06); box-shadow: 0 0 14px rgba(220, 38, 38, 0.4); }
}

/* Shrink the total hours saved per week box */
.cs-bucket-total {
  padding: 8px 12px !important;
  margin-top: 4px !important;
  margin-bottom: 8px !important;
}
.cs-bucket-total-label { font-size: 10.5px !important; letter-spacing: 0.04em !important; }
.cs-bucket-total-value { font-size: 12px !important; }
.cs-bucket-total-value strong { font-size: 18px !important; margin-right: 2px !important; }

/* Save-callout layout — block flow with centered text instead of flex.
   Previously used display:flex with column-gap:14px which inserted visible gaps between "You save",
   the price strong, and "in the Founders' window." — making the sentence look like three disconnected chips.
   Block flow keeps natural word spacing and lets the strong stay inline at its emphasized size. */
.price-card.featured .save-callout {
  display: block !important;
  padding: 8px 18px !important;
  margin: 12px 0 16px !important;
  text-align: center !important;
  text-transform: uppercase !important;
  font-size: 11.5px !important;
  line-height: 1.45 !important;
}
.price-card.featured .save-callout strong {
  display: inline !important;
  font-size: 1.45em !important;
  margin: 0 !important;
  line-height: inherit !important;
  letter-spacing: 0 !important;
  vertical-align: baseline !important;
}

/* Pulsing pink CTAs in pricing — Monthly + Annual both pulsate + glow */
.cta-pulse {
  position: relative;
  animation: cta-pulse 2s ease-in-out infinite;
  box-shadow: 0 16px 36px -12px rgba(236, 72, 153, 0.5), 0 0 0 0 rgba(236, 72, 153, 0.5);
}
@keyframes cta-pulse {
  0%, 100% {
    box-shadow: 0 16px 36px -12px rgba(236, 72, 153, 0.45), 0 0 0 0 rgba(236, 72, 153, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 24px 48px -10px rgba(236, 72, 153, 0.7), 0 0 0 8px rgba(236, 72, 153, 0.12);
    transform: scale(1.02);
  }
}

/* Exit-modal: I send out free AI lessons → bold bubble pink */
.exit-card h3.exit-bubble {
  font-family: var(--display) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 4vw, 38px) !important;
  color: var(--pink-deep) !important;
  text-align: center !important;
  line-height: 0.98 !important;
  letter-spacing: -0.02em !important;
  margin: 16px 0 14px !important;
  text-shadow: 0 2px 0 rgba(236, 72, 153, 0.18), 0 6px 14px rgba(236, 72, 153, 0.28);
  text-transform: none !important;
}
.exit-card h3.exit-bubble em { font-family: var(--italic) !important; font-style: italic !important; color: inherit !important; }
.exit-card > p strong { color: var(--pink-deep); font-weight: 700; }

/* ---------- v20 · X close + huge discount + pricing card mobile-fit + reveal MORE alive + review marquee faster + sub stops stacking ---------- */

/* Modal X close button (member-card + video story-expand) */
.modal-x-close {
  position: sticky;
  top: 0;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  background: rgba(26, 13, 20, 0.08);
  color: var(--ink);
  border-radius: 50%;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
  margin-bottom: 4px;
  font-weight: 400;
  font-family: var(--display);
  transition: background 180ms ease, transform 180ms ease;
}
.modal-x-close:hover { background: rgba(236, 72, 153, 0.18); transform: scale(1.08); }
.modal-x-close:active { transform: scale(0.94); }

/* Make the modal panels a flex column so the X sticks to the top-right */
.member-card.open .member-expand,
.story-expand[open] .body {
  display: flex !important;
  flex-direction: column !important;
}

/* Kill the pseudo ::before "×" from v19 (replaced by real button) */
.member-card.open .member-expand::before { content: none !important; }

/* HUGE pulsing discount badge in pricing h2 */
.huge-discount {
  display: inline-block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.45em;
  color: var(--pink-deep);
  letter-spacing: -0.02em;
  line-height: 1;
  padding: 0 8px;
  margin: 0 2px;
  background: linear-gradient(180deg, transparent 55%, rgba(236, 72, 153, 0.22) 55%);
  text-shadow: 0 0 24px rgba(236, 72, 153, 0.55), 0 2px 0 rgba(236, 72, 153, 0.18);
  animation: discount-pulse 2s ease-in-out infinite;
  vertical-align: baseline;
}
@keyframes discount-pulse {
  0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 24px rgba(236, 72, 153, 0.5), 0 2px 0 rgba(236, 72, 153, 0.2);
  }
  50% {
    transform: scale(1.08);
    text-shadow: 0 0 44px rgba(236, 72, 153, 0.95), 0 4px 0 rgba(236, 72, 153, 0.3);
  }
}
.hi-underline {
  background: linear-gradient(180deg, transparent 60%, rgba(196, 181, 253, 0.4) 60%);
  padding: 0 2px;
}

/* Pricing lead visual formatting */
.pricing-lead { line-height: 1.6; }
.pricing-lead strong { color: var(--ink); font-weight: 700; }
.pricing-lead em { font-family: var(--italic); font-style: italic; color: var(--pink-deep); }
.annual-highlight {
  display: inline-block;
  padding: 0 4px;
  background: linear-gradient(180deg, transparent 50%, rgba(236, 72, 153, 0.12) 50%);
}
.annual-highlight strong { color: var(--pink-deep) !important; }

/* Mobile pricing cards — currently zoomed in. Pull padding down so cards fit cleaner. */
@media (max-width: 720px) {
  .pricing-grid { gap: 18px !important; }
  .price-card { padding: 22px 18px !important; border-radius: 22px !important; }
  .price-card .ribbon { font-size: 10px !important; padding: 5px 12px !important; top: -12px !important; right: 16px !important; }
  .price-card h3 { font-size: 22px !important; }
  .price-card .price .num { font-size: 38px !important; }
  .price-card .price .strike { font-size: 13px !important; }
  .price-card .price .period { font-size: 12px !important; }
  .price-card.featured .feat-list.tight li, .price-card .feat-list li { font-size: 12.5px !important; }
  .price-card.featured .value-stack li { font-size: 12px !important; padding: 6px 9px !important; }
  .price-card.featured .save-callout { padding: 5px 13px !important; }
  .price-card.featured .save-callout strong { font-size: 15px !important; line-height: 1.25 !important; }
  .price-card .btn.lg { padding: 11px 16px !important; font-size: 14px !important; }
  .price-card.featured .math-row { font-size: 11.5px !important; }
}

/* MORE LIFE: bigger reveal motion + slight scale + variants */
html.js .reveal {
  opacity: 0;
  transform: translateY(48px) scale(0.96);
  transition: opacity 760ms cubic-bezier(0.16, 1, 0.3, 1), transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
html.js .reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Stagger immediate children when they land — feels alive */
html.js .reveal.in > * {
  animation: child-fade-in 600ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
html.js .reveal.in > *:nth-child(1) { animation-delay: 80ms; }
html.js .reveal.in > *:nth-child(2) { animation-delay: 160ms; }
html.js .reveal.in > *:nth-child(3) { animation-delay: 240ms; }
html.js .reveal.in > *:nth-child(4) { animation-delay: 320ms; }
html.js .reveal.in > *:nth-child(5) { animation-delay: 400ms; }
html.js .reveal.in > *:nth-child(6) { animation-delay: 480ms; }
@keyframes child-fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Don't double-animate inside cards/forms where it'd thrash inputs */
html.js .reveal.in .roi-grid > *,
html.js .reveal.in .cs-bucket-row,
html.js .reveal.in input,
html.js .reveal.in .stack-grid > *,
html.js .reveal.in .pricing-grid > * { animation: none !important; }

/* Subtle floating motion on hero key cards + decorative blobs */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.deco-spark { animation: float-y 6s ease-in-out infinite; }
.deco-spark.s2 { animation-delay: 1.5s; }
.deco-spark.s3 { animation-delay: 3s; }
.deco-spark.s4 { animation-delay: 4.5s; }

/* Speed up the review screenshot marquee — Brett: 'extremely slow → very fast' */
.review-track { animation: review-scroll 18s linear infinite !important; }

/* Sub caption: keep it on one line, italic, tighter so it doesn't stack */
.roi-output .sub {
  font-size: 11.5px !important;
  font-style: italic;
  white-space: normal;
  max-width: 100%;
  opacity: 0.65 !important;
  margin: 6px 0 0 !important;
  line-height: 1.3;
}
@media (max-width: 720px) {
  .roi-output .sub { font-size: 10.5px !important; text-align: center; }
}

/* ---------- v21 · Hero reorder + member-modal match-video + tighter save-callout + free vertical scroll ---------- */

/* HERO desktop layout: CTAs stacked vertically below video, compact trust-badge below ghost button */
.hero .container { display: flex; flex-direction: column; align-items: center; }
.hero .container > .hero-text { width: 100%; }
.hero-cta-row.hero-cta-stack {
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
  max-width: 360px !important;
  margin: 28px auto 0 !important;
}
.hero-cta-row.hero-cta-stack .btn { width: auto; align-self: center; }

/* Compact trust-badge under the See-what's-inside button (desktop) */
.trust-badge-hero-compact {
  display: inline-flex !important;
  margin: 14px auto 0 !important;
  padding: 5px 16px 5px 6px !important;
  gap: 10px !important;
  align-self: center;
}
@media (min-width: 721px) {
  .trust-badge-hero-compact { margin-top: 36px !important; }
}
.trust-badge-hero-compact .avatar-stack img { width: 26px; height: 26px; border-width: 2px; margin-right: -9px; }
.trust-badge-hero-compact .avatar-stack img:last-child { margin-right: 4px; }
.trust-badge-hero-compact .stars-row { font-size: 11px !important; letter-spacing: 1.4px !important; }
.trust-badge-hero-compact .stars-row strong { font-size: 13px !important; margin-left: 3px !important; }
.trust-badge-hero-compact .count-row { font-size: 10px !important; margin-top: 2px !important; letter-spacing: 0.03em !important; }

/* MEMBER read-story modal: exact same treatment as the video story-expand body, no cut-off */
.member-card.open .member-expand {
  width: min(440px, 92vw) !important;
  max-width: 92vw !important;
  max-height: 78vh !important;
  padding: 22px 24px 22px !important;
  overflow-y: auto !important;
  /* -webkit-overflow-scrolling removed — obsolete and can trap touch on modern iOS Safari */
}
.member-card.open .member-expand .modal-x-close {
  position: sticky;
  top: -6px;
  z-index: 6;
  background: rgba(26, 13, 20, 0.1);
}
.member-card.open .member-expand p {
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--ink) !important;
  margin: 0 0 10px !important;
}
.member-card.open .member-expand p strong { color: var(--pink-deep); font-weight: 700; }

/* TIGHTER save-callout — Brett: too tall (this is the actual desktop winner — earlier rules overridden) */
.price-card.featured .save-callout {
  padding: 5px 14px !important;
  margin: 10px 0 14px !important;
  line-height: 1.3 !important;
}
.price-card.featured .save-callout strong {
  font-size: 16px !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

/* Mobile: hide the review screenshot marquee — its CSS animation pauses on Brett's Safari making it appear empty.
   Members carousel + case-study marquee already provide social proof on mobile. */
@media (max-width: 720px) {
  .review-marquee-section { display: none !important; }
}

/* RAIL: drop scroll-snap entirely (mandatory + proximity both fight the touch on iOS Safari).
   The rails just freely scroll horizontally. Cards have natural visual alignment without snap.
   overscroll-behavior split x/y: contain horizontal (no chaining to page horizontal scroll which doesn't exist),
   but ALLOW vertical chaining (auto) so a vertical-dominant gesture inside the rail falls through to scroll the page.
   overflow-y: hidden is the critical iOS Safari trick — when overflow-x is set, browsers auto-promote overflow-y
   to auto, which makes iOS Safari treat the rail as "potentially vertically scrollable" and capture the touch.
   Explicitly setting overflow-y: hidden tells iOS the rail has no vertical scroll capability, so vertical
   gestures chain immediately to the page (the actual scrollable Y container). */
.bonus-stack-section .stack-grid,
.chap-row,
.case-row,
.members-row,
#members-row,
.videos-row {
  scroll-snap-type: none !important;
  overscroll-behavior-x: contain !important;
  overscroll-behavior-y: auto !important;
  overflow-y: hidden !important;
}
/* Touch devices: disable :hover transforms + transitions so cards don't "lift" or shift when a finger lands.
   Brett's "moves vertically while I scroll" is the hover lift triggering on touchstart on iOS Safari.
   Belt+suspenders: (hover: none), (pointer: coarse), AND max-width:720px. Any one catches mobile. */
@media (hover: none), (pointer: coarse), (max-width: 720px) {
  .chap-card:hover,
  .video-card:hover,
  .case-card:hover,
  .stack-card:hover,
  .member-card:hover,
  .review-card:hover {
    transform: none !important;
    transition: none !important;
  }
  /* Also kill any transform on the active state — iOS fires :active before scroll start */
  .chap-card:active,
  .video-card:active,
  .case-card:active,
  .stack-card:active,
  .member-card:active,
  .review-card:active {
    transform: none !important;
  }
}

/* ---------- v22 · Sticky pill simple + marquee 4x mobile + annual highlight wrap + tighter mobile cards + modal containing-block fix ---------- */

/* Light pink "Join InstaCEO Academy" sticky button — narrow, just behind the text (Brett v3) */
.sticky-pill.sticky-pill-simple {
  background: rgba(252, 231, 243, 0.96) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(236, 72, 153, 0.45) !important;
  padding: 0 !important;
  box-shadow: 0 10px 28px -10px rgba(236, 72, 153, 0.35) !important;
}
.sticky-pill.sticky-pill-simple .pill-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  padding: 10px 24px !important;
  color: var(--ink) !important;
  font-family: var(--display) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: background 200ms ease, color 200ms ease;
}
.sticky-pill.sticky-pill-simple .pill-link:hover {
  background: rgba(236, 72, 153, 0.12) !important;
  color: var(--pink-deep) !important;
}
@media (max-width: 720px) {
  .sticky-pill.sticky-pill-simple .pill-link { padding: 9px 18px !important; font-size: 12.5px !important; }
}

/* Marquee 4x faster on mobile */
@media (max-width: 720px) {
  .review-track { animation: review-scroll 4.5s linear infinite !important; }
}

/* Fix "bonus on day one" highlight covering empty space when text wraps */
.annual-highlight {
  display: inline !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 1px 4px !important;
}

/* Mobile pricing cards: were too zoomed in — tighten further so the full card fits one screen */
@media (max-width: 720px) {
  .pricing-grid { gap: 14px !important; padding: 0 !important; max-width: 100% !important; }
  .price-card { padding: 18px 14px !important; border-radius: 18px !important; }
  .price-card h3 { font-size: 19px !important; margin: 0 0 2px !important; }
  .price-card .price { margin: 10px 0 14px !important; gap: 6px !important; }
  .price-card .price .num { font-size: 30px !important; }
  .price-card .price .strike { font-size: 12px !important; }
  .price-card .price .period { font-size: 11px !important; }
  .price-card .feat-list { margin: 0 0 16px !important; gap: 8px !important; }
  .price-card.featured .feat-list.tight li,
  .price-card .feat-list li { font-size: 11.5px !important; line-height: 1.4 !important; }
  .price-card.featured .value-stack { gap: 5px !important; margin: 0 0 10px !important; }
  .price-card.featured .value-stack li { font-size: 11px !important; padding: 5px 8px !important; }
  .price-card.featured .save-callout { margin: 8px 0 10px !important; padding: 4px 12px !important; }
  .price-card.featured .save-callout strong { font-size: 14px !important; line-height: 1.25 !important; margin: 0 !important; }
  .price-card.featured .math-box { padding: 10px 12px !important; margin: 8px 0 12px !important; }
  .price-card.featured .math-row { font-size: 11px !important; padding: 3px 0 !important; }
  .price-card .feat-label { font-size: 11px !important; margin: 0 0 8px !important; }
  .price-card.featured .feat-label-courses { font-size: 12px !important; }
  .price-card .btn.lg { padding: 10px 14px !important; font-size: 12.5px !important; }
  .price-card .ribbon { font-size: 9.5px !important; padding: 4px 10px !important; right: 12px !important; top: -10px !important; }
  .price-card p.small { font-size: 10.5px !important; margin-top: 8px !important; }
  .price-card hr { margin: 14px 0 !important; }
}

/* Member modal: the .reveal.in transform creates a containing block which broke fixed positioning.
   Release transform on open so the modal can escape the card and not get clipped by the rail. */
html.js .member-card.open,
html.js .member-card.reveal.in.open { transform: none !important; }

/* ---------- v23 · trust-badge top space + Instagirl Boss special glow ---------- */

/* Trust-badge spacing — matches the gap between the CTA buttons above it (~14px).
   Two-class selector to beat .reveal + .reveal { margin-top: 0 !important } (specificity 0,2,0). */
.trust-badge.trust-badge-hero-compact { margin-top: 14px !important; }
@media (max-width: 720px) {
  .trust-badge.trust-badge-hero-compact { margin-top: 10px !important; }
}

/* Instagirl Boss · colorful glowing special-bonus card */
.stack-card.stack-glow-special {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #fff5f8 0%, #fff8e8 35%, #f8eaff 100%) !important;
  border: 1.5px solid rgba(236, 72, 153, 0.55) !important;
  box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.25),
              0 20px 50px -20px rgba(236, 72, 153, 0.55),
              0 12px 32px -12px rgba(192, 132, 252, 0.5) !important;
  animation: glow-pulse 2.6s ease-in-out infinite;
}
.stack-card.stack-glow-special::before {
  content: '';
  position: absolute;
  top: -2px; left: -2px; right: -2px; bottom: -2px;
  border-radius: inherit;
  background: linear-gradient(120deg,
    rgba(236, 72, 153, 0.55) 0%,
    rgba(250, 204, 21, 0.5) 25%,
    rgba(192, 132, 252, 0.55) 50%,
    rgba(236, 72, 153, 0.55) 75%,
    rgba(250, 204, 21, 0.5) 100%);
  background-size: 300% 100%;
  z-index: -1;
  animation: glow-shimmer 3.2s linear infinite;
  filter: blur(8px);
  opacity: 0.65;
}
.stack-card.stack-glow-special .stack-body h3 {
  background: linear-gradient(110deg, var(--pink-deep) 0%, #c084fc 50%, var(--pink-deep) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: glow-text 3.2s ease-in-out infinite;
}
.stack-card.stack-glow-special .stack-value {
  background: linear-gradient(90deg, var(--pink-deep), #c084fc) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 700;
  box-shadow: 0 4px 14px -4px rgba(236, 72, 153, 0.6);
}
.stack-special-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  background: linear-gradient(90deg, var(--pink-deep), #c084fc);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  box-shadow: 0 4px 14px -4px rgba(236, 72, 153, 0.5);
}
@keyframes glow-pulse {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(236, 72, 153, 0.25),
                0 20px 50px -20px rgba(236, 72, 153, 0.55),
                0 12px 32px -12px rgba(192, 132, 252, 0.5);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.45),
                0 28px 70px -18px rgba(236, 72, 153, 0.75),
                0 18px 42px -10px rgba(192, 132, 252, 0.65);
  }
}
@keyframes glow-shimmer {
  0% { background-position: 0% 0%; }
  100% { background-position: 300% 0%; }
}
@keyframes glow-text {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---------- v24 · beyond-IG callout + Claude-Code path chips + card sublines ---------- */

/* Claude Code path step chips — 2x2 grid, smaller so they don't stack.
   minmax(0, 1fr) lets columns shrink below content min-width (vs default 1fr=minmax(auto,1fr) which expands). */
.path-chips {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  /* grid-auto-rows: 1fr makes both rows equal height (= tallest chip's height) so all 4 chips render the same size */
  grid-auto-rows: 1fr;
  gap: 6px;
  margin-top: 14px;
  width: 100%;
  max-width: 320px;
}
.path-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(192, 132, 252, 0.12);
  border: 1px solid rgba(192, 132, 252, 0.3);
  color: var(--lavender-deep);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  white-space: normal;
  line-height: 1.2;
  overflow-wrap: anywhere;
  min-width: 0;
}

/* "And it does not stop at Instagram" callout */
.beyond-ig-callout {
  margin: 32px auto 28px;
  max-width: 760px;
  padding: 20px 28px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.06) 0%, rgba(192, 132, 252, 0.08) 100%);
  border: 1px solid rgba(236, 72, 153, 0.18);
  text-align: center;
}
.beyond-ig-callout p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.beyond-ig-callout strong { color: var(--pink-deep); }
@media (max-width: 720px) {
  .beyond-ig-callout { padding: 16px 18px; margin: 22px auto 20px; }
  .beyond-ig-callout p { font-size: 13.5px; }
}

/* Pricing card sub-lines under the h3 */
.price-card .card-subline {
  margin: -2px 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-mute);
  font-style: italic;
}
.price-card.featured .card-subline { color: rgba(255, 250, 245, 0.72); }
@media (max-width: 720px) {
  .price-card .card-subline { font-size: 11.5px; margin: -2px 0 10px; }
}

/* ---------- v25 · Promo-strip workshops copy with pulsing urgency dot ---------- */
.promo-strip .promo-text.promo-text-workshops {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px 6px;
  white-space: normal;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  flex-wrap: wrap;
  overflow: visible;
  text-overflow: clip;
  padding: 0;
}
.promo-strip .promo-text-workshops .promo-line { white-space: nowrap; }
.promo-strip .promo-text-workshops .promo-bullet { opacity: 0.6; margin: 0 2px; }
.promo-urgency-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fde047;
  flex-shrink: 0;
  animation: promo-urgency-pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.7);
}
@keyframes promo-urgency-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(253, 224, 71, 0.7); transform: scale(1); }
  50% { box-shadow: 0 0 0 6px rgba(253, 224, 71, 0); transform: scale(1.18); }
}
@media (max-width: 720px) {
  .promo-strip .promo-text.promo-text-workshops { font-size: 10px; gap: 2px 4px; }
  .promo-strip .promo-text-workshops .promo-bullet { display: none; }
  .promo-urgency-dot { width: 6px; height: 6px; }
  /* Polish promo copy runs ~25% longer than English; shrink + allow wrapping inside each line so it fits the strip. */
  html[lang="pl"] .promo-strip .promo-text.promo-text-workshops { font-size: 9px; gap: 1px 3px; letter-spacing: 0.01em; }
  html[lang="pl"] .promo-strip .promo-text-workshops .promo-line { white-space: normal; }
  html[lang="pl"] .promo-strip .promo-urgency-triangle { font-size: 14px; margin: 0 2px; }
}

/* ---------- v26 · red triangle banner + marquee glitch fix + mobile pricing fit + modal opacity guard ---------- */

/* Banner: red urgency triangle, bigger + black outline, sits right before "for only the next 30-45 days" */
.promo-urgency-triangle {
  display: inline-block;
  color: #ef4444;
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
  margin: 0 4px 0 2px;
  -webkit-text-stroke: 0.6px #000;
  text-shadow:
    0 0 0 #000,
    1px 0 0 #000, -1px 0 0 #000, 0 1px 0 #000, 0 -1px 0 #000,
    0 0 8px rgba(239, 68, 68, 0.75);
  animation: promo-triangle-pulse 1.1s ease-in-out infinite;
}
@keyframes promo-triangle-pulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.32); opacity: 1; }
}
@media (max-width: 720px) {
  .promo-urgency-triangle { font-size: 15px; -webkit-text-stroke: 0.5px #000; margin: 0 3px 0 1px; }
}

/* Marquee glitch fix: translate by exact card-block width instead of -50%
   so the wrap-back to 0 lines up perfectly with the duplicated content. */
.review-track {
  --rev-card: 460px;
  --rev-gap: 20px;
  animation: review-scroll-clean 18s linear infinite !important;
  will-change: transform;
}
@keyframes review-scroll-clean {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-4 * (var(--rev-card) + var(--rev-gap)))); }
}
.case-marquee .case-row {
  --case-card: clamp(280px, 28vw, 380px);
  --case-gap: 18px;
  animation: case-scroll-clean 60s linear infinite !important;
  will-change: transform;
}
@keyframes case-scroll-clean {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-4 * (var(--case-card) + var(--case-gap)))); }
}
@media (max-width: 720px) {
  /* Slow the marquee + recompute the loop distance to match the narrower card on mobile */
  .review-track { animation-duration: 30s !important; --rev-card: 88vw !important; --rev-gap: 20px !important; }
  .case-marquee .case-row { animation-duration: 28s !important; }
}

/* Mobile pricing card fit: prevent right-edge clip, allow value-stack to wrap, clamp card to viewport.
   Round-3: added `min-width: 0` on flex li (the classic flex overflow trap) and `max-width: calc(100vw - 16px)` on .price-card.
   The card itself can no longer push past the viewport even if a child wants to. Ribbon at top:-14px still shows
   because overflow stays `visible`. */
@media (max-width: 720px) {
  #pricing, #pricing .container { overflow: visible !important; }
  .pricing-grid { padding: 0 4px !important; overflow: visible !important; }
  .price-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  .price-card .feat-list li,
  .price-card.featured .value-stack li {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 4px 8px !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    min-width: 0 !important;
  }
  .price-card.featured .value-stack li .vv { margin-left: auto !important; flex-shrink: 0 !important; }
  .price-card.featured .math-row { word-break: break-word !important; min-width: 0 !important; }
  .price-card .price .num { font-size: 26px !important; }
  .price-card .price .strike { font-size: 11px !important; }
}

/* Modal opacity-inheritance fix: when a member-card is open, force the card itself
   to opacity 1 + transform none so the position:fixed modal inside is fully visible
   on mobile even if its .reveal hasn't been observed yet. */
html.js .member-card.open,
html.js .member-card.reveal.open,
html.js .member-card.reveal.in.open {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* ============================================================================
   OPT-IN: seat-cap strip widget (visual parity with thank_you .t-spots)
   ============================================================================ */
.fp-spots-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: rgba(255, 250, 245, 0.78);
  background: rgba(255, 250, 245, 0.08);
  border: 1px solid rgba(255, 250, 245, 0.18);
  padding: 4px 10px;
  border-radius: 999px;
  margin-left: 10px;
}
.fp-spots-pill b {
  font-variant-numeric: tabular-nums;
  color: var(--pink);
  font-weight: 700;
}
.fp-spots-bar {
  display: inline-block;
  width: clamp(60px, 10vw, 120px);
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 250, 245, 0.14);
  overflow: hidden;
  margin-left: 10px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
.fp-spots-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--pink-deep), var(--pink));
  width: 0;
  transition: width 0.6s ease;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.5);
}
@media (max-width: 640px) {
  .fp-spots-pill { font-size: 10.5px; padding: 3px 8px; margin-left: 6px; }
  .fp-spots-bar { display: none; }
}

/* ============================================================================
   OPT-IN: hero micro-scarcity line (under CTA, above trust)
   ============================================================================ */
.fp-microscarcity {
  margin: 14px 0 0;
  font-family: var(--body);
  font-size: 13px;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
}
.fp-microscarcity b {
  font-family: var(--display);
  font-weight: 700;
  color: var(--pink-deep);
  font-variant-numeric: tabular-nums;
}

/* ============================================================================
   OPT-IN: For-you / Not-for-you audience filter
   ============================================================================ */
.fp-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 2.5vw, 32px);
  max-width: 1080px;
  margin: 0 auto;
}
@media (max-width: 760px) {
  .fp-filter-grid { grid-template-columns: 1fr; }
}
.fp-filter-card {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  padding: clamp(28px, 3vw, 40px);
  position: relative;
  transition: transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft);
}
.fp-filter-card.yes {
  background: linear-gradient(180deg, var(--pink-wash), #fff 60%);
  border-color: var(--pink-soft);
}
.fp-filter-card.yes:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 60px -22px rgba(236, 72, 153, 0.22);
}
.fp-filter-card.no:hover {
  transform: translateY(-3px);
  box-shadow: 0 28px 60px -22px rgba(26, 13, 20, 0.12);
}
.fp-filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--body);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 16px;
}
.fp-filter-tag .fp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.fp-filter-card.yes .fp-filter-tag { color: var(--pink-deep); }
.fp-filter-card.yes .fp-filter-tag .fp-dot { background: var(--pink-deep); box-shadow: 0 0 0 4px var(--pink-wash); }
.fp-filter-card.no .fp-filter-tag { color: var(--ink-mute); }
.fp-filter-card.no .fp-filter-tag .fp-dot { background: var(--ink-mute); }
.fp-filter-card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 28px);
  letter-spacing: -0.018em;
  margin: 0 0 22px;
  line-height: 1.18;
  color: var(--ink);
}
.fp-filter-card h3 em {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 400;
}
.fp-filter-card.yes h3 em { color: var(--pink-deep); }
.fp-filter-card.no h3 em { color: var(--lavender-deep); }
.fp-filter-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.fp-filter-card li {
  padding: 14px 0 14px 28px;
  position: relative;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  border-bottom: 1px solid var(--hairline);
}
.fp-filter-card li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.fp-filter-card li::before {
  position: absolute;
  left: 0;
  top: 14px;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.55;
}
.fp-filter-card.yes li::before {
  content: "✓";
  color: var(--pink-deep);
}
.fp-filter-card.no li::before {
  content: "✕";
  color: var(--ink-mute);
}

/* ============================================================================
   OPT-IN: hero clock line (compact countdown next to "she's live in")
   ============================================================================ */
.fp-clockline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 14px 0 6px;
  flex-wrap: wrap;
}
.fp-clockline .fp-script {
  font-family: var(--script);
  color: var(--lavender-deep);
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1;
  letter-spacing: 0;
}
.fp-clockline .tk-clock {
  margin: 0;
}

/* ============================================================================
   OPT-IN: hero registration form (replaces the standalone form section)
   ============================================================================ */
.fp-hero-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 0;
  max-width: 560px;
}
.fp-hero-form .fp-hf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.fp-hero-form input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--body);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hairline-2);
  border-radius: 12px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.fp-hero-form input:focus {
  outline: 0;
  border-color: var(--pink-deep);
  box-shadow: 0 0 0 3px var(--pink-wash);
}
.fp-hero-form input::placeholder {
  color: var(--ink-mute);
  font-weight: 400;
}
.fp-hero-form .fp-go {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}
.fp-hero-form .fp-hf-micro {
  margin: 8px 0 0;
  font-family: var(--body);
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.fp-hero-form .fp-hf-micro b {
  font-family: var(--display);
  font-weight: 700;
  color: var(--pink-deep);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .fp-hero-form .fp-hf-row { grid-template-columns: 1fr; }
}

/* ============================================================================
   OPT-IN: rail wrapper (positions prev/next arrows around agenda + takeaway)
   ============================================================================ */
.fp-rail-wrap {
  position: relative;
}

/* ============================================================================
   OPT-IN: takeaway-card (horizontal scroll, matches agenda-card visual language)
   ============================================================================ */
.fp-takeaway-rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: clamp(16px, 5vw, 48px);
  padding: 8px clamp(16px, 5vw, 48px) 24px;
  margin: 0 calc(clamp(16px, 5vw, 48px) * -1);
  position: relative;
}
.fp-takeaway-rail::-webkit-scrollbar { height: 6px; }
.fp-takeaway-rail::-webkit-scrollbar-thumb { background: var(--pink); border-radius: 999px; }
.fp-takeaway-rail::-webkit-scrollbar-track { background: transparent; }
.fp-takeaway-card {
  flex: 0 0 clamp(260px, 30vw, 340px);
  scroll-snap-align: start;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 22px;
  padding: 28px 28px 30px;
  position: relative;
  transition: transform 0.5s var(--ease-soft), box-shadow 0.5s var(--ease-soft);
  cursor: pointer;
}
.fp-takeaway-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -22px rgba(236, 72, 153, 0.28);
}
.fp-takeaway-card .fp-tk-num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 44px;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 18px;
  letter-spacing: -0.04em;
}
.fp-takeaway-card .fp-tk-num em {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 400;
  color: var(--pink-deep);
  font-size: 0.55em;
  vertical-align: 40%;
  margin-left: -8px;
}
.fp-takeaway-card h3 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.018em;
  margin: 0 0 12px;
  line-height: 1.18;
  color: var(--ink);
}
.fp-takeaway-card h3 em {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 400;
  color: var(--pink-deep);
}
.fp-takeaway-card p {
  font-family: var(--body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

/* On smaller screens, hide rail-nav arrows for the new rails (mirror videos-rail) */
@media (max-width: 720px) {
  #agenda-wrap .rail-nav,
  #takeaway-wrap .rail-nav {
    display: none;
  }
}

/* ============================================================================
   OPT-IN v2: combined top bar (logo + scarcity + LIVE + CTA in one slim bar)
   Replaces the previous .fp-strip + .fp-nav stack.
   ============================================================================ */
.fp-topbar {
  position: sticky; top: 0; z-index: 50;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(12px, 2vw, 28px);
  padding: 10px clamp(16px, 3.2vw, 32px);
  background: var(--ink);
  color: var(--inv-ink);
  border-bottom: 1px solid rgba(255, 250, 245, 0.08);
  box-shadow: 0 8px 24px -16px rgba(0, 0, 0, 0.6);
}
.fp-topbar-brand img {
  height: 26px; width: auto; display: block;
  filter: invert(1) brightness(1.15);
}
.fp-topbar-meter {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  align-items: center;
  row-gap: 2px;
}
.fp-topbar-spots {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--inv-ink);
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.fp-topbar-spots b {
  color: var(--pink);
  font-weight: 700;
  font-size: 16px;
  transition: transform 0.5s var(--ease-soft);
  display: inline-block;
}
.fp-topbar-spots b.tick {
  animation: fp-seat-pulse 1.4s var(--ease-soft);
}
.fp-topbar-spots-rest {
  color: rgba(255, 250, 245, 0.7);
  font-weight: 600;
}
.fp-topbar-live {
  font-family: var(--body);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 250, 245, 0.62);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.fp-topbar-live .live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 0 0 rgba(252, 182, 207, 0.6);
  animation: fp-live 1.6s var(--ease-soft) infinite;
}
.fp-topbar-bar {
  grid-column: 1 / -1;
  width: min(280px, 60vw);
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 250, 245, 0.12);
  overflow: hidden;
  margin-top: 4px;
}
.fp-topbar-bar .fp-spots-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--pink-deep), var(--pink));
  width: 0;
  transition: width 0.6s ease;
  box-shadow: 0 0 12px rgba(236, 72, 153, 0.5);
}
.fp-topbar-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-weight: 700; font-size: 12.5px;
  letter-spacing: 0.04em;
  text-decoration: none; color: var(--ink);
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--pink);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease), background-color 240ms var(--ease);
  box-shadow: 0 4px 14px -4px rgba(236, 72, 153, 0.55);
}
.fp-topbar-cta:hover {
  background: var(--pink-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -6px rgba(236, 72, 153, 0.7);
}
.fp-topbar-cta .arr {
  display: inline-block;
  transition: transform 220ms var(--ease);
}
.fp-topbar-cta:hover .arr { transform: translateX(3px); }

@keyframes fp-seat-pulse {
  0%   { transform: scale(1);    color: var(--pink); text-shadow: 0 0 0 rgba(252, 182, 207, 0); }
  30%  { transform: scale(1.18); color: #fff;        text-shadow: 0 0 18px rgba(252, 182, 207, 0.9); }
  100% { transform: scale(1);    color: var(--pink); text-shadow: 0 0 0 rgba(252, 182, 207, 0); }
}

@media (max-width: 720px) {
  .fp-topbar { padding: 8px 14px; gap: 10px; }
  .fp-topbar-brand img { height: 22px; }
  .fp-topbar-spots { font-size: 12px; }
  .fp-topbar-spots b { font-size: 14px; }
  .fp-topbar-spots-rest { display: none; }
  .fp-topbar-live { font-size: 9.5px; letter-spacing: 0.15em; }
  .fp-topbar-bar { display: none; }
  .fp-topbar-cta { padding: 8px 12px; font-size: 11.5px; }
}

/* ============================================================================
   OPT-IN v2: compact 2-col hero (text left, form-card right)
   ============================================================================ */
.fp-hero {
  padding: clamp(28px, 4vw, 52px) 0 clamp(40px, 5vw, 80px) !important;
  text-align: left !important;
  overflow: hidden;
}
.fp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 900px) {
  .fp-hero-grid { grid-template-columns: 1fr; gap: 36px; }
}
.fp-hero-text { position: relative; z-index: 2; }
.fp-hero .fp-tag { margin-bottom: 14px; }
.fp-hero .fp-clockline { margin: 10px 0 18px; }
.fp-hero h1 {
  font-size: clamp(36px, 5.4vw, 68px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  margin: 0 0 18px !important;
  max-width: 18ch !important;
  text-align: left !important;
}
.fp-hero h1 em {
  background: linear-gradient(90deg, var(--pink-deep), var(--lavender-deep) 50%, var(--pink-deep));
  background-size: 200% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: fp-shimmer 7s linear infinite;
}
@keyframes fp-shimmer { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } }
.fp-hero .fp-sub {
  font-size: clamp(15px, 1.5vw, 18px) !important;
  line-height: 1.55 !important;
  margin: 0 0 22px !important;
  max-width: 52ch !important;
  text-align: left !important;
}
.fp-hero .fp-trust {
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 0 !important;
  margin-bottom: 18px;
}
.fp-hero .fp-trust .fp-trust-line { font-size: 12.5px; }
.fp-hero .fp-trust .fp-trust-line b { color: var(--pink-deep); font-weight: 700; }

/* Compact stat chips replacing the old fp-polaroid-row */
.fp-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.fp-stat-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--body);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  transition: transform 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
}
.fp-stat-chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -10px rgba(236, 72, 153, 0.22);
}
.fp-stat-chip b {
  font-family: var(--display);
  font-weight: 700;
  font-size: 13px;
  color: var(--pink-deep);
  font-variant-numeric: tabular-nums;
}

/* ---- The form card on the right ---- */
.fp-hero-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 24px;
  padding: 28px 28px 24px;
  box-shadow:
    0 30px 60px -28px rgba(26, 13, 20, 0.28),
    0 0 0 6px rgba(252, 182, 207, 0.18);
  z-index: 1;
  animation: fp-card-float 7s var(--ease-soft) infinite;
}
@keyframes fp-card-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.fp-card-polaroid {
  position: absolute;
  top: -34px; left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  margin: 0;
  width: 110px; height: 130px;
  background: #fff;
  padding: 8px 8px 22px;
  border-radius: 6px;
  box-shadow: 0 14px 28px -10px rgba(26, 13, 20, 0.3);
  transition: transform 0.6s var(--ease-soft);
}
.fp-card-polaroid img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 3px;
}
.fp-card-polaroid .fp-tape {
  position: absolute;
  top: -8px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 50px; height: 16px;
  background: rgba(245, 192, 106, 0.55);
  border-radius: 2px;
}
.fp-hero-card:hover .fp-card-polaroid { transform: translateX(-50%) rotate(-2deg) scale(1.04); }

.fp-card-head { text-align: center; margin: 78px 0 18px; }
.fp-card-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--body); font-weight: 600;
  font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.fp-card-eyebrow .live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pink-deep);
  box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.6);
  animation: fp-live 1.6s var(--ease-soft) infinite;
}
.fp-card-h {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(24px, 2.6vw, 30px);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.fp-card-h em {
  font-family: var(--italic);
  font-style: italic;
  font-weight: 400;
  color: var(--pink-deep);
}

/* Form inside the card — single column, tighter */
.fp-hero-card .fp-hero-form {
  margin: 0;
  max-width: none;
  gap: 9px;
}
.fp-hero-card .fp-hero-form input {
  padding: 12px 14px;
  font-size: 14.5px;
  border-radius: 10px;
}
.fp-hero-card .fp-hero-form .fp-go {
  padding: 16px 24px;
  font-size: 15px;
}
.fp-hero-card .fp-hero-form .fp-hf-micro {
  font-size: 11.5px;
  line-height: 1.45;
  margin-top: 6px;
}

/* ---- Animated background blobs on the hero (soft, slow) ---- */
.fp-hero-blob {
  position: absolute;
  pointer-events: none;
  filter: blur(80px);
  border-radius: 50%;
  z-index: 0;
  opacity: 0.55;
}
.fp-hero-blob.b1 {
  width: 420px; height: 420px;
  top: -120px; left: -80px;
  background: var(--pink);
  animation: fp-blob-a 18s var(--ease-soft) infinite;
}
.fp-hero-blob.b2 {
  width: 360px; height: 360px;
  bottom: -120px; right: -60px;
  background: var(--lavender);
  animation: fp-blob-b 22s var(--ease-soft) infinite;
}
@keyframes fp-blob-a {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(60px, 40px) scale(1.1); }
}
@keyframes fp-blob-b {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-50px, -30px) scale(1.05); }
}

/* ============================================================================
   OPT-IN: scroll-trap protection on horizontal rails.
   Browsers infer overflow-y:auto when overflow-x is set, which captures
   vertical mouse-wheel + touch and stops the page from scrolling. Lock
   vertical OFF and constrain touch to horizontal pan only — same shielding
   .videos-row already has.
   ============================================================================ */
.fp-agenda-rail,
.fp-takeaway-rail {
  overflow-y: hidden;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}

/* ============================================================================
   OPT-IN: bottom mini opt-in form (replaces the final "Reserve my seat" link)
   ============================================================================ */
.fp-mini-form {
  max-width: 720px;
  margin: 22px auto 0;
  text-align: left;
}
.fp-mini-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 8px;
  align-items: stretch;
}
.fp-mini-row input {
  padding: 10px 13px;
  font-family: var(--body);
  font-size: 13.5px;
  line-height: 1.3;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hairline-2);
  border-radius: 10px;
  width: 100%;
  height: 40px;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fp-mini-row input:focus {
  outline: 0;
  border-color: var(--pink-deep);
  box-shadow: 0 0 0 3px var(--pink-wash);
}
.fp-mini-row input::placeholder { color: var(--ink-mute); font-weight: 400; }
.fp-mini-row .fp-go {
  white-space: nowrap;
  padding: 0 18px;
  font-size: 13.5px;
  height: 40px;
  gap: 8px;
  box-shadow: 0 8px 20px -8px rgba(236, 72, 153, 0.55), 0 0 0 3px rgba(252, 182, 207, 0.18);
}
.fp-mini-row .fp-go .arr { width: 22px; height: 22px; }
.fp-mini-row .fp-go .arr::before { font-size: 13px; }
.fp-mini-compliance {
  margin: 12px 0 0;
  font-family: var(--body);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-mute);
  letter-spacing: 0.01em;
  text-align: center;
}
.fp-mini-compliance a {
  color: var(--ink-mute);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fp-mini-compliance a:hover { color: var(--pink-deep); }
@media (max-width: 720px) {
  .fp-mini-row { grid-template-columns: 1fr; }
  .fp-mini-row .fp-go { width: 100%; justify-content: center; }
}

/* ============================================================================
   OPT-IN: niche pill band (below hero, above event ribbon)
   Compact horizontal scroller of the expert niches Marti works with — gives
   Magda the "I see myself in this room" signal before she reads further.
   ============================================================================ */
.fp-niche-band {
  padding: 18px 0 6px;
  background: transparent;
  position: relative;
  z-index: 2;
}
.fp-niche-track {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 4px clamp(20px, 4vw, 48px);
  margin: 0 auto;
  max-width: 1180px;
  scrollbar-width: none;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  overscroll-behavior-y: auto;
}
.fp-niche-track::-webkit-scrollbar { display: none; }
.fp-niche-label {
  font-family: var(--body);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
  flex: 0 0 auto;
}
.fp-niche-pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  padding: 7px 14px;
  flex: 0 0 auto;
  transition: transform 0.35s var(--ease-soft), border-color 0.35s var(--ease-soft), color 0.35s var(--ease-soft);
}
.fp-niche-pill:hover {
  transform: translateY(-2px);
  border-color: var(--pink-soft);
  color: var(--pink-deep);
}
@media (max-width: 640px) {
  .fp-niche-pill { font-size: 12px; padding: 6px 12px; }
  .fp-niche-label { font-size: 10px; letter-spacing: 0.18em; }
}

/* ============================================================================
   OPT-IN: FAQ accordion
   Uses motion.js's existing details.faq one-open-at-a-time handler.
   ============================================================================ */
.fp-faqs {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.fp-faq {
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft);
}
.fp-faq[open] {
  border-color: var(--pink-soft);
  box-shadow: 0 20px 40px -24px rgba(236, 72, 153, 0.25);
}
.fp-faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 17.5px);
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.fp-faq summary::-webkit-details-marker { display: none; }
.fp-faq-chev {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pink-wash);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s var(--ease-soft), background 0.4s var(--ease-soft);
}
.fp-faq-chev::before {
  content: "";
  width: 10px; height: 10px;
  background-image: linear-gradient(var(--pink-deep), var(--pink-deep)), linear-gradient(var(--pink-deep), var(--pink-deep));
  background-size: 100% 2px, 2px 100%;
  background-repeat: no-repeat;
  background-position: center;
  transition: background-size 0.4s var(--ease-soft);
}
.fp-faq[open] .fp-faq-chev {
  background: var(--pink-deep);
  transform: rotate(180deg);
}
.fp-faq[open] .fp-faq-chev::before {
  background-image: linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 100% 2px, 0 100%;
}
.fp-faq-ans {
  padding: 0 22px 20px;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-2);
}
@media (max-width: 640px) {
  .fp-faq summary { padding: 16px 18px; font-size: 14.5px; }
  .fp-faq-ans { padding: 0 18px 18px; font-size: 14px; }
}

/* ---------- v27 · Mobile compaction pass (2026-06-08) ---------------------------------
   Calculator section was ~1300px tall on mobile (almost 2 viewports).
   5000 zł featured bonus inside Full Plan price card was 3.4× taller than other bonus rows.
   Tighten internal spacing + hide/shrink the secondary parenthetical on small screens. */
/* Featured-bonus row: title + sub stack vertically as one flex child so the row reads
   "[★] Ikoniczny Program InstaSZEFOWA Biz                           5 000 zł"
   "    do Budowania Marki Osobistej (small gray)"
   instead of wrapping everything inline. */
.price-card.featured .value-stack li.featured-bonus .fb-text {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  line-height: 1.25 !important;
}
.price-card.featured .value-stack li.featured-bonus .fb-title {
  font-weight: 700;
  color: #fff;
}
.price-card.featured .value-stack li.featured-bonus .fb-sub {
  display: block !important;
  font-weight: 400 !important;
  font-size: 0.78em !important;
  color: rgba(255, 255, 255, 0.6) !important;
  font-style: italic;
  margin-top: 2px;
  letter-spacing: 0.01em;
}
@media (max-width: 720px) {
  /* === Calculator (Matematyka) compaction === */
  .roi-card { padding: 16px 14px !important; border-radius: 16px !important; }
  .roi-card > div:first-child { margin-bottom: 8px !important; }
  .roi-card > div:first-child .eyebrow { font-size: 10px !important; }
  .roi-card > div:first-child h2 { font-size: 19px !important; margin-top: 8px !important; }
  .roi-card > div:first-child .lead { font-size: 12.5px !important; line-height: 1.35 !important; margin-top: 6px !important; }
  .roi-grid { margin-top: 10px !important; gap: 10px !important; }
  .roi-inputs { gap: 0 !important; }
  .roi-input { padding: 5px 0 !important; }
  .roi-input label { font-size: 10px !important; margin-bottom: 2px !important; }
  .roi-input .field { padding: 0 !important; }
  .roi-input .field input { padding: 5px 8px !important; font-size: 13px !important; }
  .roi-input .field .unit { font-size: 11px !important; }
  .cs-bucket-header { margin: 8px 0 6px !important; }
  .cs-bucket-eyebrow { font-size: 11px !important; line-height: 1.3 !important; }
  .cs-bucket-hint { font-size: 10.5px !important; margin-top: 2px !important; }
  .cs-bucket-row { padding: 6px 10px !important; margin-bottom: 4px !important; gap: 4px 8px !important; }
  .cs-bucket-row label { font-size: 11px !important; line-height: 1.15 !important; }
  .cs-old, .cs-new { padding: 3px 6px !important; gap: 3px !important; }
  .cs-tag { font-size: 8.5px !important; }
  .cs-fields input { width: 28px !important; font-size: 12px !important; }
  .cs-arrow { font-size: 12px !important; }
  .cs-bucket-total { padding: 7px 10px !important; margin-top: 2px !important; margin-bottom: 8px !important; }
  .cs-bucket-total-label { font-size: 10.5px !important; }
  .cs-bucket-total .cs-mini-hours { font-size: 13px !important; }
  .roi-reset { margin-top: 6px !important; padding: 4px 9px !important; font-size: 10px !important; }
  .roi-output { padding: 12px !important; gap: 6px !important; }
  .roi-output .label { font-size: 10px !important; }
  .roi-output .big { font-size: 22px !important; }
  .roi-output .sub, .roi-output .roi-breakdown, .roi-output .roi-annual { font-size: 10.5px !important; }
  .roi-output .roi-bar { height: 3px !important; margin: 6px 0 !important; }

  /* === 5000 zł featured bonus row (Full Plan price card) compaction ===
     Mobile layout per Brett 2026-06-09: star top-left, price top-right,
     title + sub stack underneath (left-aligned, smaller fonts). */
  .price-card.featured .value-stack li.featured-bonus {
    display: block !important;
    position: relative !important;
    padding: 22px 10px 8px !important;
  }
  .price-card.featured .value-stack li.featured-bonus .fb-star {
    position: absolute !important;
    top: 6px !important;
    left: 10px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1 !important;
  }
  .price-card.featured .value-stack li.featured-bonus .vv {
    position: absolute !important;
    top: 6px !important;
    right: 10px !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
  }
  .price-card.featured .value-stack li.featured-bonus .fb-text {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .price-card.featured .value-stack li.featured-bonus .fb-title {
    display: block !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
  }
  .price-card.featured .value-stack li.featured-bonus .fb-sub {
    display: block !important;
    font-size: 9.5px !important;
    line-height: 1.2 !important;
    margin-top: 1px !important;
    font-style: italic;
    color: rgba(255, 255, 255, 0.55) !important;
  }
}

/* ============================================================================
   PRIMARY CTA COLOR → emerald green (jewel-tone partner to the brand pink).
   Buttons only. --pink / --pink-deep stay pink for ribbons, eyebrows, dots,
   and every other accent, so the page stays Marti-pink with green CTAs.
   Appended last so it wins on source order (no !important needed); the two
   @keyframes redefinitions override the earlier same-named pink ones.
   Tweak the shade by editing the three --cta* vars below. Added 2026-06-13.
   ============================================================================ */
:root {
  --cta: #059669;        /* emerald CTA anchor */
  --cta-top: #15c98e;    /* brighter top of the gradient (sheen) */
  --cta-deep: #047857;   /* deep emerald base */
  --cta-glow: 5, 150, 105; /* rgb triplet for rgba() glows/pulses */
}
.btn.pink {
  background: linear-gradient(135deg, var(--cta-top) 0%, var(--cta) 52%, var(--cta-deep) 100%);
  background-size: 200% 200%;
  box-shadow: 0 8px 28px -6px rgba(var(--cta-glow), 0.55);
}
.btn.pink:hover {
  box-shadow: 0 16px 42px -8px rgba(var(--cta-glow), 0.78), 0 0 26px 2px rgba(var(--cta-glow), 0.32);
}
.btn.pink.lg { box-shadow: 0 14px 36px -10px rgba(var(--cta-glow), 0.45); }
.btn.pink.lg::after { box-shadow: 0 0 0 0 rgba(var(--cta-glow), 0.5); }
@keyframes cta-glow {
  0%, 100% { background-position: 0% 50%; box-shadow: 0 8px 28px -6px rgba(var(--cta-glow), 0.55); }
  50%      { background-position: 100% 50%; box-shadow: 0 12px 40px -6px rgba(var(--cta-glow), 0.85), 0 0 28px 5px rgba(var(--cta-glow), 0.32); }
}
@keyframes ctaPulse {
  0%   { box-shadow: 0 0 0 0 rgba(var(--cta-glow), 0.5); }
  70%  { box-shadow: 0 0 0 18px rgba(var(--cta-glow), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--cta-glow), 0); }
}