:root {
  --bg: #0B0E14;
  --surface: #14171F;
  --border: #232733;
  --border-hover: #333a49;
  --text: #F5F5F7;
  --muted: #9CA3AF;
  --accent: #8B5CF6;
  --accent-light: #A78BFA;
  --accent-deep: #7c3aed;
  --gold: #F5A623;
  --gold-light: #FFD24A;
  --gold-ink: #1A1206;
  --sora: 'Sora', sans-serif;
  --manrope: 'Manrope', sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--manrope);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-light); }
::selection { background: var(--accent); color: var(--bg); }

.page { position: relative; }

/* ---------- background dot field ---------- */
.dots {
  position: fixed;
  inset: -30px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background-image: radial-gradient(rgba(139, 92, 246, 0.35) 1px, transparent 1.5px);
  background-size: 26px 26px;
  transition: transform 0.15s ease-out;
}

/* ---------- scroll progress ---------- */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 31;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
}

/* ---------- header ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 16px 80px;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 14, 20, 0.9);
  backdrop-filter: blur(10px);
}

/* Logo + nav CTA fade out gradually as you scroll toward Proof, reaching zero
   exactly when the Proof pill lights up — rather than snapping off after 24px. */
[data-chrome] {
  opacity: var(--chrome-opacity, 1);
}
.header.chrome-gone [data-chrome] {
  visibility: hidden;
  pointer-events: none;
}

.brand { display: flex; align-items: center; gap: 10px; justify-self: start; color: var(--text); }
.brand:hover { color: var(--text); }
/* the artwork already carries its own rounded tile and glow, so no box or
   background here — just the image plus a soft halo to lift it off the bar */
.brand-mark {
  display: block;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 3px 10px rgba(139, 92, 246, 0.45));
}
.brand-mark img {
  width: 100%;
  height: 100%;
  display: block;
}
.brand-name { font: 800 19px/1 var(--sora); letter-spacing: -0.01em; white-space: nowrap; }
.brand-name span { color: var(--accent); }

/* min-width:0 lets the 1fr track shrink below the pill row's intrinsic width,
   so the nav scrolls instead of pushing the CTA off-screen */
.nav { display: flex; align-items: center; justify-content: center; min-width: 0; }
.pill-group {
  display: flex; align-items: center; gap: 4px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px;
  width: fit-content;
  flex-shrink: 0;
}
.pill-group a {
  display: inline-block;
  padding: 9px 18px;
  border-radius: 999px;
  font: 600 14px/1 var(--manrope);
  color: var(--muted);
  background: transparent;
  transition: background 0.25s, color 0.25s;
}
.pill-group a:hover { color: var(--text); }
.pill-group a.is-active { background: var(--accent); color: var(--text); }

/* ---------- buttons ----------
   Colour system: gold is reserved for the one converting action (Get Creator
   Access / Pay). Violet stays the brand/UI colour — pills, badges, links,
   eyebrows. A violet button on a violet-tinted dark page reads as decoration;
   gold is the only thing on the page wearing that colour, so it reads as
   "the thing to press". Telegram keeps its own blue as the alternate path. */
.btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--gold-ink);
  font: 700 14px/1 var(--manrope);
  padding: 12px 22px;
  border-radius: 9px;
  white-space: nowrap;
  justify-self: end;
  box-shadow: 0 6px 18px rgba(245, 166, 35, 0.32);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.25s ease;
}
.btn:hover { color: var(--gold-ink); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(255, 210, 74, 0.5); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-lg {
  font-size: 16px;
  padding: 17px 34px;
  border-radius: 11px;
  box-shadow: 0 10px 30px rgba(245, 166, 35, 0.38);
}
.btn-lg:hover { transform: translateY(-3px); box-shadow: 0 14px 38px rgba(255, 210, 74, 0.52); }
.btn-lg:active { transform: translateY(-1px) scale(0.98); }

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
  font-size: 16px;
  padding: 16px;
  border-radius: 11px;
  margin-bottom: 16px;
}
.btn-block:hover { transform: translateY(-3px); }
.btn-block:active { transform: translateY(-1px) scale(0.98); }

.mb-14 { margin-bottom: 14px; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  padding: 104px 80px 84px;
  text-align: center;
  overflow: hidden;
}
.hero-inner { position: relative; max-width: 820px; margin: 0 auto; }
/* fluid type: sizes used to jump in one step at the 920px breakpoint, which
   left everything between tablet and laptop either cramped or oversized */
.hero h1 {
  font: 800 clamp(32px, 5.2vw, 60px)/1.08 var(--sora);
  letter-spacing: -0.02em;
  margin: 0 0 24px;
}

.glow { position: absolute; pointer-events: none; filter: blur(10px); }
.glow-a {
  top: -220px; left: 20%;
  width: 520px; height: 520px;
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.22), transparent);
  animation: floatA 14s ease-in-out infinite;
}
.glow-b {
  top: -140px; right: 15%;
  width: 420px; height: 420px;
  background: radial-gradient(closest-side, rgba(167, 139, 250, 0.16), transparent);
  animation: floatB 18s ease-in-out infinite;
}
@keyframes floatA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(24px, -28px); } }
@keyframes floatB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-20px, 26px); } }

/* ---------- shared section chrome ---------- */
.section { padding: 76px 80px; }
.section.center { text-align: center; }

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

.eyebrow {
  color: var(--accent);
  font: 700 13px/1 var(--manrope);
  letter-spacing: 0.12em;
  margin-bottom: 16px;
}
.hero .eyebrow { margin-bottom: 20px; }

.section-head { text-align: center; max-width: 700px; margin: 0 auto 42px; }
.section-head h2,
.h2-sm {
  font: 700 clamp(24px, 3.4vw, 38px)/1.2 var(--sora);
  letter-spacing: -0.01em;
  margin: 0;
}
.h2-sm { font-size: clamp(23px, 3vw, 34px); margin: 0 0 16px; }
.section-head h2 + p { margin: 14px 0 0; }
.section-head p { color: var(--muted); font: 500 17px/1.6 var(--manrope); margin: 0; }

.lede { color: var(--muted); font: 500 clamp(16px, 1.6vw, 19px)/1.6 var(--manrope); margin: 0 0 32px; }
.section.center .lede { font-size: 16px; margin: 0 auto 32px; }
.narrow { max-width: 560px; }

.section-foot {
  text-align: center;
  margin-top: 40px;
  color: var(--muted);
  font: 600 15px/1 var(--manrope);
}

.divider {
  height: 1px;
  max-width: 1120px;
  margin: 0 auto;
  background: linear-gradient(90deg, transparent, var(--border) 25%, var(--border) 75%, transparent);
  position: relative;
}
.divider span {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.7);
}

/* ---------- cards ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover { transform: translateY(-5px); border-color: var(--border-hover); }

.card-dashed {
  border-style: dashed;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card-dashed span {
  color: var(--muted);
  font: 600 13px/1.5 var(--manrope);
  text-align: center;
  padding: 0 24px;
}
.min-300 { min-height: 300px; }
.min-300 span { font-size: 15px; line-height: 1; }
.ratio-9x16 { aspect-ratio: 9 / 16; }

.card-accent {
  border-color: var(--accent);
  box-shadow: 0 0 40px rgba(139, 92, 246, 0.12);
}
.card-accent:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(139, 92, 246, 0.25); }

.pad-36 { padding: 36px; }
.card-body { padding: 24px; }
.card-title { font: 700 18px/1.3 var(--sora); margin-bottom: 8px; }
.card-text { color: var(--muted); font: 500 14px/1.5 var(--manrope); }

/* ---------- proof carousel ---------- */
.carousel-wrap {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
}

.carousel {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 0 10px;
}
.carousel::-webkit-scrollbar { display: none; }

/* the track is duplicated in JS, so it is always at least 2x the visible width
   and the auto-scroll can wrap without a visible jump */
.carousel-track {
  display: flex;
  gap: 24px;
  width: max-content;
}

/* 3 cards fully visible at 1120px, the next one peeks in */
.carousel-track > .video-card {
  flex: 0 0 calc((1120px - 48px) / 3);
}

/* video thumbnail facade — the real iframe is only injected on click */
.video-frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: #000;
  border: 0;
  padding: 0;
  cursor: pointer;
  overflow: hidden;
}
.video-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease, opacity 0.25s ease;
}
.video-card:hover .video-frame img { transform: scale(1.04); opacity: 0.85; }
.video-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(11, 14, 20, 0.6);
  border: 2px solid rgba(245, 245, 247, 0.9);
  backdrop-filter: blur(4px);
  transition: transform 0.2s ease, background 0.2s ease;
}
.play::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 15px;
  border-color: transparent transparent transparent #F5F5F7;
}
.video-frame:hover .play { transform: translate(-50%, -50%) scale(1.12); background: var(--accent); }
.video-frame:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.video-meta {
  padding: 14px 16px;
  color: var(--muted);
  font: 600 13px/1 var(--manrope);
  transition: color 0.2s ease;
}
.video-card:hover .video-meta { color: var(--text); }

/* ---------- experiences ---------- */
.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
}

/* Experiences grid. auto-fit rather than a fixed 3 columns: the row reflows on
   its own — 3 up on desktop, 2 on a tablet, 1 on a phone — so adding a fourth
   experience later needs no layout change and no extra media query.
   Kept separate from .cols-2, which the comparison section still relies on. */
.cols-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 24px;
  max-width: 1120px;
  margin: 0 auto;
}

/* experience screenshot */
.shot {
  width: 100%;
  /* matches the source art, so nothing is cropped */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0F1219;
  border-bottom: 1px solid var(--border);
}
.shot picture { display: block; width: 100%; height: 100%; }
.shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.35s ease;
}
.card-hover:hover .shot img { transform: scale(1.04); }

/* ---------- pricing ---------- */
/* the aura pseudo-element scales past the shell, so clip it at the section edge
   (section-level, not body-level, so the sticky header keeps working) */
#pricing { overflow: hidden; }

.pricing-shell {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  padding: 10px;
}

/* soft aura behind the card */
.pricing-shell::before {
  content: '';
  position: absolute;
  inset: -30px;
  border-radius: 40px;
  background: radial-gradient(closest-side, rgba(139, 92, 246, 0.28), transparent 75%);
  filter: blur(24px);
  opacity: 0.9;
  pointer-events: none;
  animation: aura 6s ease-in-out infinite;
}
@keyframes aura {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.05); }
}

/* rising sparkles */
.sparkles {
  position: absolute;
  inset: -10px 0 0;
  overflow: hidden;
  pointer-events: none;
  border-radius: 30px;
}
.sparkles span {
  position: absolute;
  left: var(--x);
  bottom: -20px;
  color: var(--accent-light);
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  transform: scale(var(--s));
  text-shadow: 0 0 8px rgba(167, 139, 250, 0.9);
  animation: rise 7s linear infinite;
  animation-delay: var(--d);
}
@keyframes rise {
  0%   { opacity: 0; transform: translateY(0) scale(var(--s)) rotate(0deg); }
  12%  { opacity: 1; }
  80%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-460px) scale(var(--s)) rotate(220deg); }
}

.pricing-card {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #191d27 0%, var(--surface) 60%);
  border: 1px solid var(--accent);
  border-radius: 20px;
  padding: 54px 44px 44px;
  text-align: center;
  box-shadow: 0 0 60px rgba(139, 92, 246, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pricing-card:hover { transform: translateY(-4px); box-shadow: 0 14px 70px rgba(139, 92, 246, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.08); }

.pricing-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  color: var(--text);
  font: 800 11px/1 var(--manrope);
  letter-spacing: 0.1em;
  padding: 8px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(139, 92, 246, 0.5);
}

.pricing-price { margin-bottom: 8px; }

/* struck original price — inline elements share a baseline with the big figure */
.price-old {
  display: inline-block;
  margin-right: 10px;
  font: 600 22px/1 var(--sora);
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(156, 163, 175, 0.7);
}
.price-now {
  font: 800 clamp(42px, 4.2vw, 52px)/1 var(--sora);
  background: linear-gradient(180deg, #ffffff, #c9b6ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.price-per {
  font: 600 16px/1 var(--manrope);
  color: var(--muted);
}
.pricing-sub { color: var(--muted); font: 500 13px/1.5 var(--manrope); }

/* brand buttons */
.btn-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.btn-block.btn-telegram,
.btn-lg.btn-telegram {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.btn-lg.btn-telegram { display: inline-flex; }

.btn-telegram {
  background: linear-gradient(135deg, #34AADF, #229ED9);
  color: #FFFFFF;
  box-shadow: 0 10px 28px rgba(34, 158, 217, 0.35);
}
.btn-telegram:hover {
  color: #FFFFFF;
  box-shadow: 0 14px 36px rgba(52, 170, 223, 0.55);
}


/* Whop renders its own button inside a cross-origin iframe, so its colour is
   untouchable. What we DO own is the box around it: a gold rim plus glow makes
   the whole control read as the primary gold action even though the pill inside
   stays Whop-purple. Keep the footprint equal to our own buttons so the card
   keeps its rhythm. */
.whop-express {
  position: relative;
  min-height: 52px;
  margin-bottom: 16px;
  padding: 3px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 10px 28px rgba(245, 166, 35, 0.32);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}
.whop-express:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(255, 210, 74, 0.5);
}
.whop-express whop-express-checkout-button {
  display: block;
  width: 100%;
  border-radius: 11px;
  overflow: hidden;
}

.pricing-card .fineprint { margin-top: 20px; }
.pricing-card .fineprint strong { color: var(--text); font-weight: 700; }

/* delivery note lives outside the card: it is about what happens after paying,
   not about the offer, and inside it was pushing the buttons up the card */
.pricing-note {
  max-width: 460px;
  margin: 22px auto 0;
  text-align: center;
  /* deliberately quieter than --muted: this is post-purchase housekeeping and
     should not compete with the offer above it */
  color: #6B7280;
  font: 500 12.5px/1.6 var(--manrope);
}
.pricing-list {
  list-style: none;
  margin: 34px 0 30px;
  padding: 0 0 30px;
  display: flex;
  flex-direction: column;
  gap: 17px;
  text-align: left;
  /* a rest stop between "what you get" and "how you pay" — without it the list
     runs straight into the buttons and the eye skips the transition */
  border-bottom: 1px solid var(--border);
}
.pricing-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font: 500 15px/1.5 var(--manrope);
}
/* violet, not gold: gold is reserved for the one action on the page, and
   spending it on decoration would blunt the button */
.pricing-list li::before {
  content: '✓';
  flex: 0 0 auto;
  color: var(--accent);
  font: 800 14px/1.6 var(--manrope);
}
.fineprint { color: var(--muted); font: 500 13px/1.5 var(--manrope); }
.section.center .fineprint { font-size: 14px; line-height: 1; }

/* ---------- comparison ---------- */
.compare-label { font: 700 13px/1 var(--manrope); letter-spacing: 0.08em; margin-bottom: 20px; }
.compare-label.muted { color: var(--muted); }
.compare-label.accent { color: var(--accent); }
.compare-list {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 16px;
}
.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text);
  font: 500 16px/1.5 var(--manrope);
}
.compare-list.muted li { color: var(--muted); }

/* Markers carry the verdict before the words are read: red cross = pain,
   green check = solved. Green rather than violet — violet is brand furniture
   here and would not read as "good" against the surrounding purple. */
.compare-list li::before {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 800 12px/1 var(--manrope);
}
.compare-bad li::before {
  content: '✕';
  color: #F87171;
  background: rgba(248, 113, 113, 0.12);
  box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.3);
}
.compare-good li::before {
  content: '✓';
  color: #4ADE80;
  background: rgba(74, 222, 128, 0.12);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.32);
}

/* ---------- faq ---------- */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 24px;
  transition: border-color 0.2s ease;
}
.faq details:hover { border-color: var(--border-hover); }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font: 700 16px/1.4 var(--sora);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ''; }
.faq-chevron {
  color: var(--accent);
  font: 700 20px/1 sans-serif;
  transition: transform 0.2s;
  flex-shrink: 0;
}
.faq details[open] .faq-chevron { transform: rotate(45deg); }
.faq p { color: var(--muted); font: 500 15px/1.6 var(--manrope); margin: 14px 0 0; }

/* ---------- footer ---------- */
.footer {
  padding: 36px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.copyright { color: var(--muted); font: 500 13px/1 var(--manrope); }
.social { display: flex; gap: 28px; }
.social a { color: var(--muted); font: 600 13px/1 var(--manrope); transition: color 0.2s; }
.social a:hover { color: var(--text); }

/* ---------- responsive ---------- */
@media (max-width: 920px) {
  /* Single compact row: logo + CTA. The nav pills live in an absolutely-
     positioned overlay spanning the whole bar, so they always have the full
     width (all four fit, no clipped stub). At the top the overlay is fully
     transparent and the branding shows; as you scroll the branding cross-fades
     out and the pills fade in — driven by the same --chrome-opacity the desktop
     uses, so mobile mirrors the desktop chrome swap. */
  .header {
    /* NB: do not set position here — the base rule is position:sticky, and
       overriding it with relative unsticks the whole bar on mobile. sticky is
       itself a positioned value, so the absolute .nav overlay still anchors to
       the header. */
    padding: 10px 16px;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    column-gap: 12px;
  }
  .brand { grid-column: 1; grid-row: 1; }
  .header .btn { grid-column: 2; grid-row: 1; padding: 10px 16px; font-size: 13px; }

  .nav {
    position: absolute;
    inset: 0;
    padding: 0 16px;
    justify-content: center;
    /* Counterpart of --chrome-opacity: the branding fades out while the pills
       fade in, so the bar is never blank mid-scroll. Set as its own plain
       variable from JS — calc(1 - var()) is miscomputed for opacity here. */
    opacity: var(--nav-opacity, 0);
    pointer-events: none;
  }
  /* only clickable once the pills are fully in */
  .header.chrome-gone .nav { pointer-events: auto; }

  .pill-group {
    width: 100%;
    min-width: 0;
    justify-content: center;
    overflow-x: auto;               /* safety net below ~330px where 4 pills exceed the row */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pill-group::-webkit-scrollbar { display: none; }
  .pill-group a { padding: 8px 14px; font-size: 13px; white-space: nowrap; }

  .section { padding: 52px 20px; }
  .hero { padding: 60px 20px 48px; }
  .section-head { margin-bottom: 32px; }
  .cols-2 { grid-template-columns: 1fr; }
  .pricing-card { padding: 40px 24px 32px; }
  .price-old { font-size: 19px; margin-right: 8px; }

  /* full-bleed carousel */
  .carousel-wrap { margin: 0 -20px; }
  .carousel { max-width: 100%; padding: 6px 20px 10px; }
  .carousel-track { gap: 16px; }
  /* cap the width: a 9:16 card at a raw 68vw becomes ~930px tall on a tablet */
  .carousel-track > .video-card { flex: 0 0 min(68vw, 290px); }

  .footer { flex-direction: column; gap: 14px; padding: 28px 20px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}