/* ============================================================
   ROOK — shared landing page styles
   Design system for all effect landing pages.
   Mobile-first: base styles target ~390px, scale up via media queries.
   ============================================================ */

:root {
  /* Layered grays: heroes stay near-black for video punch (see .hero/.hub-hero
     overlays), the page body lifts to dark gray, cards a step lighter again. */
  --bg: #131317;
  --bg-raised: #1a1a1f;
  --bg-card: #1f1f25;
  --border: #2e2e36;
  --text: #f2f2f0;
  --muted: #9a9aa0;
  --accent: #ff3b30;          /* VHS REC red — kickers, dots, icons */
  --accent-cta: #d92c22;      /* button background — 4.85:1 with white (AA) */
  --accent-cta-press: #b8241c;
  --font-display: 'Anton', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 10px;
  --pad: 20px;
  --maxw: 1080px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Anton ships one weight — block synthetic bolding so 500/700 declarations
     render the true face instead of a smeared fake bold. Inter's 400/600 are
     real loaded weights, so this changes nothing for body text. */
  font-synthesis: none;
}

img, video { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

section { padding: 56px 0; }

/* ---------- Type ---------- */

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

h1 { font-size: clamp(2.2rem, 9vw, 4.5rem); }
h2 { font-size: clamp(1.6rem, 6vw, 2.6rem); margin-bottom: 12px; }
h3 { font-size: 1.15rem; }

.section-kicker {
  font-family: var(--font-display);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--accent);
  margin-bottom: 8px;
}

.section-sub {
  color: var(--muted);
  max-width: 560px;
  margin-bottom: 28px;
}

/* Chromatic aberration on the main headline — subtle RGB split */
.glitch-text {
  text-shadow:
    -2px 0 rgba(255, 0, 60, 0.45),
    2px 0 rgba(0, 240, 255, 0.35);
}

/* ---------- Buttons / CTA ---------- */

.btn-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--accent-cta);
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  padding: 16px 34px;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  min-height: 56px;                /* thumb-friendly */
  transition: transform 0.12s ease, background 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn-buy:active { transform: scale(0.97); background: var(--accent-cta-press); }
@media (hover: hover) {
  .btn-buy:hover { background: var(--accent-cta-press); }
}

/* Visible keyboard focus everywhere */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Keyboard focus shows via the range input's own :focus-visible outline;
   a :focus-within rule here would leave a red border after touch drags. */

.btn-buy .rec-dot {
  width: 10px; height: 10px;
  background: #fff;
  border-radius: 50%;
  animation: rec-blink 1.4s steps(1) infinite;
}

@keyframes rec-blink { 50% { opacity: 0.25; } }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 92vh;   /* fallback for engines without svh (iOS <=15.3, old Android WebView) */
  min-height: 92svh;
  display: flex;
  align-items: flex-end;
  padding: 0;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Fallback look if the video is missing during development */
  background:
    radial-gradient(ellipse at 30% 20%, #2a1214 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, #101822 0%, transparent 55%),
    #101012;
}

/* Dark gradient so text stays readable over any footage */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(19, 19, 23, 0.96) 0%,
    rgba(19, 19, 23, 0.55) 45%,
    rgba(19, 19, 23, 0.25) 100%
  );
}

/* Scanline texture over the hero video */
.scanlines::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(0, 0, 0, 0.18) 3px,
    rgba(0, 0, 0, 0.18) 4px
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 var(--pad) 48px;
  max-width: var(--maxw);
  margin: 0 auto;
}

.hero-rec {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 5px 12px;
  border-radius: 4px;
  margin-bottom: 18px;
  text-transform: uppercase;
}
.hero-rec .rec-dot {
  width: 9px; height: 9px;
  background: var(--accent);
  border-radius: 50%;
  animation: rec-blink 1.4s steps(1) infinite;
}

.hero h1 { margin-bottom: 14px; max-width: 14ch; }

.hero-sub {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.05rem;
  max-width: 42ch;
  margin-bottom: 26px;
}

.hero-cta-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}

.hero-price-note {
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---------- Before / After slider ---------- */

.ba-slider {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: pan-y;         /* vertical swipes scroll the page; horizontal drags drive the range input */
  user-select: none;
  -webkit-user-select: none;
  border: 1px solid var(--border);
}

.ba-pane {
  position: absolute;
  inset: 0;
}

.ba-pane img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Development fallback when placeholder images are missing */
.ba-pane { display: grid; place-items: center; font-family: var(--font-display); font-size: 2rem; letter-spacing: 0.2em; color: #333; }
.ba-before { background: #1c1c1f; }
.ba-after  { background: #221316; }
.ba-pane .ba-fallback-label { position: absolute; z-index: 0; }
.ba-pane img { position: relative; z-index: 1; }
img[data-broken] { display: none; }

/* Reveal mechanism: NO clip-path (it silently fails to render on some
   WebKit builds). The BEFORE pane sits on top, clipped by plain
   width + overflow:hidden; its img is pinned to the slider's full width
   in px by JS so the photo never squishes as the pane narrows. */
.ba-after { z-index: 1; }
.ba-before {
  z-index: 2;
  right: auto;
  width: 50%;
  overflow: hidden;
}
.ba-before img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
}

.ba-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #fff;
  z-index: 3;
  transform: translateX(-50%);
  pointer-events: none;
}
.ba-handle::after {
  content: '◂ ▸';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  color: #0a0a0b;
  font-size: 0.85rem;
  padding: 8px 10px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.ba-tag {
  position: absolute;
  top: 12px;
  z-index: 2;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  pointer-events: none;
}
.ba-tag-before { left: 12px; }
.ba-tag-after { right: 12px; }

/* Invisible full-bleed range input IS the drag surface. Native range
   controls are handled inside the engine on every platform (iOS moves the
   thumb on horizontal drags and still releases vertical swipes to page
   scroll) — far more reliable than any custom pointer/touch gesture code. */
.ba-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: ew-resize;
  z-index: 4;
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
}

.ba-caption {
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
  margin-top: 12px;
}

/* Portrait variant for photo-preset packs — shows the full athlete */
.ba-slider.ba-portrait {
  aspect-ratio: 4 / 5;
  max-width: 440px;
  margin-inline: auto;
}

/* ---------- What's inside ---------- */

.inside-list {
  list-style: none;
  display: grid;
  gap: 14px;
}

.inside-list li {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.inside-list .tick {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.6;
}

.inside-list strong { display: block; }
.inside-list span { color: var(--muted); font-size: 0.92rem; }

/* ---------- Demo video ---------- */

.demo-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
.demo-embed iframe,
.demo-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Vertical tutorials letterbox inside the 16:9 frame instead of cropping */
.demo-embed video { object-fit: contain; background: #000; }

/* Click-to-play facade — the real YouTube iframe is injected on tap */
.demo-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  background: var(--bg-card);
  cursor: pointer;
}
.demo-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.demo-thumb[data-broken] { display: none; }
.demo-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  display: grid;
  place-items: center;
  background: var(--accent-cta);
  color: #fff;
  font-size: 1.6rem;
  padding-left: 6px;              /* optical centering of the triangle */
  border-radius: 50%;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5);
  transition: transform 0.15s ease;
}
.demo-play:active .demo-play-icon { transform: translate(-50%, -50%) scale(0.92); }

/* ---------- Social proof ---------- */

.testimonials {
  display: grid;
  gap: 16px;
}

.t-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}

.t-card .stars { color: var(--accent); letter-spacing: 3px; margin-bottom: 8px; }
.t-card blockquote { font-size: 0.98rem; margin-bottom: 12px; }
.t-card cite {
  font-style: normal;
  color: var(--muted);
  font-size: 0.85rem;
}

.comment-strip {
  margin-top: 28px;
}
.comment-strip-title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 14px;
}
.comment-strip-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.comment-strip-row::-webkit-scrollbar { display: none; }
.comment-strip-row img {
  height: 120px;
  width: auto;
  border-radius: 8px;
  border: 1px solid var(--border);
  flex-shrink: 0;
  background: var(--bg-card);
  min-width: 200px;              /* placeholder footprint while images are missing */
  object-fit: cover;
}

/* ---------- Objection killers ---------- */

.objections {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  justify-content: center;
  margin-top: 18px;
  padding: 0;
  list-style: none;
}
.objections li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 0.85rem;
  white-space: nowrap;
}
.objections .obj-icon { color: var(--accent); font-size: 0.9rem; }

/* ---------- Price block ---------- */

.price-block {
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  text-align: center;
}

.price-figure {
  font-family: var(--font-display);
  font-size: clamp(3rem, 14vw, 5rem);
  font-weight: 700;
  line-height: 1;
  margin: 10px 0 4px;
}
.price-figure sup { font-size: 0.4em; vertical-align: super; }

.price-onetime { color: var(--muted); font-size: 0.9rem; margin-bottom: 24px; }

.bundle-anchor {
  margin-top: 26px;
  font-size: 0.95rem;
  color: var(--muted);
}
.bundle-anchor a { color: var(--text); text-underline-offset: 3px; }

/* ---------- FAQ ---------- */

.faq details {
  border-bottom: 1px solid var(--border);
}
.faq details:first-of-type { border-top: 1px solid var(--border); }

.faq summary {
  font-family: var(--font-display);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 18px 36px 18px 4px;
  cursor: pointer;
  list-style: none;
  position: relative;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--accent);
  font-size: 1.4rem;
  font-family: var(--font-body);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.faq .faq-a {
  padding: 0 4px 20px;
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 65ch;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 40px 0 120px;       /* extra bottom space so sticky CTA never covers content */
  border-top: 1px solid var(--border);
  text-align: center;
}
.footer-logo {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.footer-logo img {
  height: 52px;
  width: auto;
  display: block;
  margin: 0 auto;
}
.footer-links {
  margin-top: 14px;
  display: flex;
  gap: 22px;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-links a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
  /* Pad the hit area to ~44px tall without changing the visual layout */
  display: inline-block;
  padding: 12px 8px;
  margin: -12px -8px;
}
.footer-links a:hover { color: var(--text); }
.footer-fineprint { margin-top: 18px; color: #82828a; font-size: 0.75rem; }

/* ---------- Sticky mobile CTA ---------- */

.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px var(--pad);
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: rgba(19, 19, 23, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  transform: translateY(110%);
  visibility: hidden;             /* keep the hidden bar out of the a11y tree / tab order */
  transition: transform 0.25s ease, visibility 0.25s;
}
.sticky-cta.visible { transform: translateY(0); visibility: visible; }

.sticky-cta .sticky-price {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 700;
}
.sticky-cta .sticky-price small {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.sticky-cta .btn-buy {
  font-size: 1rem;
  padding: 12px 26px;
  min-height: 48px;
  flex-shrink: 0;
}

/* ---------- Film grain (global grit layer) ---------- */

body::after {
  content: '';
  position: fixed;
  inset: -100px;
  z-index: 200;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-repeat: repeat;
  opacity: 0.055;
  animation: grain-shift 0.9s steps(4) infinite;
}

@keyframes grain-shift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-34px, 22px); }
  50% { transform: translate(18px, -30px); }
  75% { transform: translate(-26px, -12px); }
  100% { transform: translate(0, 0); }
}

/* ---------- Big glitch wordmark ---------- */

.glitch-big {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: 0.04em;
  color: var(--text);
  text-shadow:
    -3px 0 rgba(255, 0, 60, 0.55),
    3px 0 rgba(0, 240, 255, 0.4);
}
.glitch-big::before,
.glitch-big::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
}
.glitch-big::before {
  color: #ff3b30;
  z-index: -1;
  animation: glitch-slice-a 5s infinite steps(1);
}
.glitch-big::after {
  color: #00f0ff;
  z-index: -2;
  animation: glitch-slice-b 5s infinite steps(1);
}

@keyframes glitch-slice-a {
  0%, 92% { opacity: 0; transform: none; clip-path: none; }
  93% { opacity: 0.8; transform: translate(-6px, 2px); clip-path: inset(15% 0 60% 0); }
  95% { opacity: 0.8; transform: translate(5px, -2px); clip-path: inset(60% 0 15% 0); }
  97%, 100% { opacity: 0; transform: none; }
}
@keyframes glitch-slice-b {
  0%, 92% { opacity: 0; transform: none; clip-path: none; }
  94% { opacity: 0.8; transform: translate(6px, -3px); clip-path: inset(40% 0 35% 0); }
  96% { opacity: 0.8; transform: translate(-5px, 3px); clip-path: inset(5% 0 80% 0); }
  98%, 100% { opacity: 0; transform: none; }
}

/* ---------- Marquee ticker ---------- */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg-raised);
  padding: 12px 0;
  white-space: nowrap;
}
.marquee-track {
  display: inline-block;
  animation: marquee-scroll 28s linear infinite;
}
.marquee span {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.28em;
  color: var(--muted);
  padding: 0 18px;
}
.marquee span b { color: var(--accent); font-weight: 500; }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Hub hero ---------- */

.hub-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 0 var(--pad);
}
.hub-hero .hero-media { position: absolute; inset: 0; z-index: 0; }
.hub-hero .hero-media video {
  width: 100%; height: 100%; object-fit: cover;
  background: #101012;
}
.hub-hero .hero-media::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(10,10,11,0.25) 0%, rgba(10,10,11,0.75) 100%),
    linear-gradient(to top, rgba(19,19,23,0.95) 0%, rgba(10,10,11,0.2) 30%, rgba(10,10,11,0.35) 100%);
}

.hub-hero-content { position: relative; z-index: 2; }

.hub-wordmark {
  font-size: clamp(5rem, 28vw, 18rem);
  margin: 0;
}

/* Official MYM ROOKSPORTS lockup in the hero, with analog chromatic fringing.
   The white slice ghosts (::before/::after) reuse the same transparent PNG. */
.hub-lockup-wrap {
  position: relative;
  display: block;
  width: min(88vw, 700px);
  margin: 0 auto;
}
.hub-lockup {
  width: 100%;
  height: auto;
  filter:
    drop-shadow(-3px 0 rgba(255, 0, 60, 0.5))
    drop-shadow(3px 0 rgba(0, 240, 255, 0.38));
}
.hub-lockup-wrap::before,
.hub-lockup-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/brand/mym-lockup-web.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0;
  pointer-events: none;
}
.hub-lockup-wrap::before { animation: glitch-slice-a 5s infinite steps(1); }
.hub-lockup-wrap::after { animation: glitch-slice-b 5s infinite steps(1); }

.hub-hero-tag {
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 3vw, 1.05rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  color: rgba(255, 255, 255, 0.9);
  margin-top: 6px;
}
.hub-hero-tag .accent { color: var(--accent); }

.hub-hero-sub {
  color: rgba(255, 255, 255, 0.75);
  max-width: 40ch;
  margin: 22px auto 0;
  font-size: 0.98rem;
}

.hub-hero .btn-buy { margin-top: 30px; }

.hub-hero .hero-rec {
  position: absolute;
  top: calc(20px + env(safe-area-inset-top));
  left: 20px;
  margin: 0;
  z-index: 2;
}

.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.3rem;
  animation: cue-bob 1.8s ease-in-out infinite;
  text-decoration: none;
}
@keyframes cue-bob {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

/* ---------- Level-up split section (light showcase + pitch) ---------- */

.levelup {
  display: grid;
  grid-template-columns: 1fr;
}

.levelup-showcase {
  position: relative;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    #e9e6e0;
  min-height: 380px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4vw;
  padding: 48px 24px;
  overflow: hidden;
}

.levelup-cover {
  width: clamp(110px, 24vw, 200px);
  border-radius: 6px;
  box-shadow: 18px 24px 40px rgba(10, 10, 12, 0.35);
  border: 1px solid rgba(0, 0, 0, 0.08);
}
.levelup-cover:nth-child(1) { transform: rotate(-7deg) translateY(14px); }
.levelup-cover:nth-child(2) { transform: rotate(3deg) translateY(-16px); }
.levelup-cover:nth-child(3) { transform: rotate(8deg) translateY(20px); }

.levelup-pitch {
  background:
    radial-gradient(ellipse at 20% 0%, #34343e 0%, transparent 55%),
    linear-gradient(160deg, #2a2a32 0%, #1b1b21 70%);
  padding: 64px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.levelup-pitch-inner { max-width: 520px; margin: 0 auto; }

.levelup-stars {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 0.92rem;
  margin-bottom: 18px;
}
.levelup-stars .stars { color: var(--accent); letter-spacing: 2px; }
.levelup-stars .quote { color: rgba(255, 255, 255, 0.85); }

.levelup-pitch h2 {
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  margin-bottom: 12px;
}
.levelup-sub {
  color: var(--muted);
  margin-bottom: 28px;
  max-width: 46ch;
}

@media (min-width: 900px) {
  .levelup { grid-template-columns: 1fr 1fr; }
  .levelup-showcase { min-height: 520px; }
}

/* ---------- Light proof band (product pages) ----------
   Dark → light → dark rhythm: the before/after + demo sections sit on the
   same paper texture as the hub's showcase, making the evidence pop. */

.light-band {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E"),
    #e9e6e0;
}
.light-band:not([hidden]) + .light-band { padding-top: 0; }
.light-band h2 { color: #131317; }
.light-band .section-kicker { color: var(--accent-cta); }
.light-band .section-sub,
.light-band .ba-caption { color: #5c5c64; }
.light-band .ba-slider {
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 18px 40px rgba(10, 10, 12, 0.22);
}
.light-band .demo-embed {
  border-color: rgba(0, 0, 0, 0.14);
  box-shadow: 0 18px 40px rgba(10, 10, 12, 0.22);
}

/* ---------- Store hub (root index) ---------- */

.hub-header {
  padding: 72px 0 8px;
  text-align: center;
}
.hub-header .footer-logo { font-size: 2rem; }
.hub-tagline {
  color: var(--muted);
  max-width: 46ch;
  margin: 14px auto 0;
}

.product-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  position: relative;
  transition: transform 0.15s ease, border-color 0.15s ease;
}
.product-card:active { transform: scale(0.98); }
@media (hover: hover) {
  .product-card:hover { border-color: #3a3a42; transform: translateY(-2px); }
}

.product-card .card-cover {
  /* Covers are 4:5 box renders — matching the frame shows the whole box,
     so the on-cover title never collides with the card title below. */
  aspect-ratio: 4 / 5;
  width: 100%;
  object-fit: cover;
  object-position: top center;
  background:
    radial-gradient(ellipse at 30% 20%, #2a1214 0%, transparent 60%),
    #101012;
}
.card-cover-fallback {
  aspect-ratio: 4 / 5;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  color: #4a4a52;
  background:
    radial-gradient(ellipse at 30% 20%, #2a1214 0%, transparent 60%),
    #101012;
}

.card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.card-hook { color: var(--muted); font-size: 0.88rem; flex: 1; }
.card-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.card-price { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
.card-cta {
  font-family: var(--font-display);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}

.card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 1;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--accent-cta);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
}
.card-badge-alt { background: #fff; color: #0a0a0b; }

/* ---------- Desktop scale-up ---------- */

@media (min-width: 768px) {
  section { padding: 88px 0; }

  .hero-cta-row { flex-direction: row; align-items: center; gap: 22px; }

  .inside-list { grid-template-columns: 1fr 1fr; }

  .testimonials { grid-template-columns: repeat(3, 1fr); }

  .comment-strip-row img { height: 150px; }

  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }

  /* Sticky bar is a mobile pattern; hide on desktop where CTAs are visible */
  .sticky-cta { display: none; }

  .site-footer { padding-bottom: 40px; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rec-dot { animation: none; }
  .sticky-cta { transition: none; }
  body::after { animation: none; }
  .glitch-big::before,
  .glitch-big::after { animation: none; }
  .hub-lockup-wrap::before,
  .hub-lockup-wrap::after { animation: none; }
  .marquee-track { animation: none; }
  .scroll-cue { animation: none; }
}

/* ---------- Legal pages (privacy, terms) ----------
   Long-form prose. Deliberately narrower than --maxw: legal text is read, not
   scanned, and 1080px lines are punishing. Body copy drops the uppercase
   display face entirely — Anton is unreadable at paragraph length. */

.legal-header {
  padding: 72px 0 8px;
  border-bottom: 1px solid var(--border);
}
.legal-header .container { max-width: 760px; }
.legal-header h1 { font-size: clamp(2rem, 7vw, 3.2rem); }
.legal-updated {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 10px 0 32px;
}

.legal-body { padding: 40px 0 0; }
.legal-body .container { max-width: 760px; }

/* Section headings stay in the display face but at readable sizes. */
.legal-body h2 {
  font-size: clamp(1.1rem, 3.4vw, 1.4rem);
  margin: 40px 0 12px;
  color: var(--text);
}
.legal-body h2:first-child { margin-top: 0; }

.legal-body p,
.legal-body li {
  color: #c9c9cf;
  font-size: 0.97rem;
  line-height: 1.75;
}
.legal-body p { margin-bottom: 14px; }

.legal-body ul { margin: 0 0 18px; padding-left: 22px; }
.legal-body li { margin-bottom: 8px; }

.legal-body a { color: var(--text); text-decoration: underline; }
.legal-body a:hover { color: var(--accent); }

.legal-body strong { color: var(--text); }

/* Pulled-out emphasis for the clauses buyers most need to actually see —
   the no-refund policy and the license limits. Hiding those in a wall of
   gray text is how disputes start. */
.legal-callout {
  border-left: 3px solid var(--accent);
  background: var(--bg-card);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 18px;
  margin: 0 0 20px;
}
.legal-callout p:last-child { margin-bottom: 0; }

.legal-back {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--muted);
  text-decoration: none;
  font-size: 0.88rem;
}
.legal-back:hover { color: var(--text); }