/* ============================================================
   GIGAGMV — polish.css
   ============================================================
   Targeted overrides for:
   1. Type system (fonts, scale, weights)
   2. Color tension (coral demoted, lime primary, neutral muted)
   3. Margins & spacing rhythm (8 / 16 / 24 / 40 / 64 / 96)

   Loaded AFTER styles.css in index.html so every rule wins by
   source order. Nothing else in the original file is touched.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ── Type ─────────────────────────────── */
  --font-sans: 'Inter Tight', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Modular scale (minor third, anchored 16px) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   19px;
  --fs-lg:   24px;
  --fs-xl:   32px;
  --fs-2xl:  44px;
  --fs-3xl:  64px;
  --fs-4xl:  96px;

  /* ── Colors ───────────────────────────── */
  --c-bg:        #07070a;
  --c-surface:   #0f0f14;
  --c-card:      #15151c;
  --c-text:      #f5f5f0;
  --c-muted:     #9a9aa3;        /* neutral warm grey, not bluish */
  --c-dim:       #5a5a66;
  --c-line:      rgba(255,255,255,0.08);
  --c-line-hi:   rgba(255,255,255,0.16);

  --c-accent:        #c8ff1f;    /* lime — primary */
  --c-accent-ink:    #07070a;
  --c-warn:          #ff7b53;    /* coral — reserved for loss/urgency */

  /* Override original tokens so child elements inherit fixes */
  --color-bg:             var(--c-bg);
  --color-surface:        var(--c-surface);
  --color-card:           var(--c-card);
  --color-text:           var(--c-text);
  --color-muted:          var(--c-muted);
  --color-accent:         var(--c-accent);
  --color-accent-strong:  var(--c-warn);

  --radius-lg: 24px;
  --radius-md: 16px;

  /* ── Spacing rhythm ───────────────────── */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 40px;
  --sp-5: 64px;
  --sp-6: 96px;

  font-family: var(--font-sans);
}

/* ─────────────────────────────────────────
   1. TYPE SYSTEM
   ───────────────────────────────────────── */
html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
}

/* Flat dark background — no gradient */
body {
  background: var(--c-bg) !important;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 var(--sp-2);
}
h1 { font-size: clamp(44px, 7vw, var(--fs-4xl)); font-weight: 800; letter-spacing: -0.035em; }
h2 { font-size: clamp(32px, 4.5vw, var(--fs-2xl)); }
h3 { font-size: var(--fs-lg); letter-spacing: -0.015em; }
h4 { font-size: var(--fs-md); }

p, li, label, input, button, a {
  font-family: var(--font-sans);
}
p {
  color: var(--c-muted);
  line-height: 1.6;
  margin: 0 0 var(--sp-2);
}

/* Monospace for anything numeric/technical */
.mot-number,
.mot-comp-gmv,
.mot-comp-gmv-revealed,
.mot-stat-value,
.mot-comp-name,
.kpi-widget-value {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums;
}

/* Eyebrow: smaller, tighter, consistent */
.eyebrow, .panel-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  color: var(--c-accent);
  margin-bottom: var(--sp-1);
}

/* Hero heading: tighter, cleaner, one-line */
.hero-heading {
  font-size: clamp(2.2rem, 6.2vw, 6rem) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: var(--c-text) !important;
  white-space: nowrap !important;
}
.hero-heading .hero-text-slide { color: var(--c-text) !important; display: inline !important; }

/* Inline highlight behind a keyword (e.g. "Scale")
   — dark-lime bar that only covers the BOTTOM HALF of the text,
   like a marker underline. */
.hero-heading .hl {
  position: relative;
  color: var(--c-text) !important;
  background: transparent;
  padding: 0;
  z-index: 0;
  isolation: isolate;
}
.hero-heading .hl::before {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  bottom: 0.05em;
  height: 0.5em;
  background: var(--c-accent);
  border-radius: 4px;
  z-index: -1;
}
.hero-subtext {
  font-size: var(--fs-md) !important;
  color: var(--c-muted) !important;
  line-height: 1.5 !important;
}

/* Logo lockup: cleaner weight hierarchy */
.logo-line {
  font-weight: 500 !important;
  letter-spacing: 0.25em !important;
  color: var(--c-muted) !important;
}
.logo-main {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}
.logo-lena, .logo-ai {
  font-weight: 800 !important;
}

.intro-tagline {
  font-family: var(--font-mono) !important;
  font-size: var(--fs-xs) !important;
  letter-spacing: 0.2em !important;
  color: var(--c-muted) !important;
}

/* MOT headings + pitch */
.mot-pitch-heading,
.mot-intro h2 {
  font-size: clamp(32px, 4.5vw, var(--fs-3xl)) !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
}
.mot-number {
  font-size: clamp(56px, 9vw, 120px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}
.mot-pitch-sub,
.mot-pitch {
  font-size: var(--fs-md) !important;
  color: var(--c-muted) !important;
}

/* Parallax text */
.parallax-text-item h2 {
  font-size: clamp(36px, 5vw, var(--fs-3xl)) !important;
  letter-spacing: -0.03em !important;
}
.sticky-description {
  font-size: var(--fs-md) !important;
  color: var(--c-muted) !important;
  line-height: 1.6 !important;
}

/* Accordion */
.accordion-trigger {
  font-size: var(--fs-md) !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em !important;
}

/* Form inputs: consistent */
.contact-form input,
.contact-form select,
.contact-form textarea {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-base) !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: var(--c-surface) !important;
  border: 1px solid var(--c-line) !important;
}
.contact-form input:focus {
  border-color: var(--c-accent) !important;
}
.contact-form label {
  font-size: var(--fs-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--c-muted) !important;
  font-weight: 500 !important;
}

/* Buttons: consistent sizing */
.button {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: var(--fs-base) !important;
  letter-spacing: -0.005em !important;
  padding: 16px 28px !important;
  border-radius: 999px !important;
}

/* ─────────────────────────────────────────
   2. COLOR TENSION
   Demote coral to semantic use only.
   Lime carries the brand.
   ───────────────────────────────────────── */

/* KPI widgets: lime instead of coral (they're "up" numbers) */
.kpi-widget-value,
.kpi-widget-bar-fill,
.kpi-widget-graph,
.kpi-graph-line,
.kpi-widget-dots .dot.active {
  color: var(--c-accent) !important;
}
.kpi-widget-bar-fill,
.kpi-widget-dots .dot.active {
  background: var(--c-accent) !important;
}
.kpi-widget-graph {
  color: var(--c-accent) !important;
}
.kpi-widget {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--c-line) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* Icon badges: use subtle lime tint, not coral */
.icon-badge {
  background: rgba(200,255,31,0.12) !important;
  color: var(--c-accent) !important;
}

/* All .button-primary: outlined square, green border + text, no fill/glow */
.button-primary,
.button.button-primary {
  background: transparent !important;
  color: var(--c-accent) !important;
  border: 1.5px solid var(--c-accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}
.button-primary:hover,
.button.button-primary:hover {
  background: var(--c-accent) !important;
  color: var(--c-accent-ink) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* MOT loss frame: coral IS appropriate here (it's the "loss" moment) — keep */
.mot-loss-frame {
  background: rgba(255,123,83,0.06) !important;
  border: 1px solid rgba(255,123,83,0.18) !important;
}

/* Error state + retry coral is semantic — keep */

/* Muted copy: neutral warm grey, not bluish */
p, .item-desc, .item-title, .mot-pitch, .sticky-description, .reassurance,
.mot-loading-sub, .mot-number-sub, .mot-stat-label, .mot-locked-sub,
.mot-comp-meta, .mot-comp-shop-revealed {
  color: var(--c-muted) !important;
}

/* Surfaces: unified dark tones (no bluish #0a0a0f) */
.mot-comp-card,
.mot-stat,
.mot-locked-card,
.accordion-item,
.pill-card,
.pillar-card,
.fit-card,
.case-study,
.reason-card {
  background: var(--c-card) !important;
  border-color: var(--c-line) !important;
}

/* "Up only" indicator: tone down the glow */
.up-indicator {
  color: #ffffff !important;
  font-size: var(--fs-xs) !important;
  letter-spacing: 0.3em !important;
  transition: color 400ms ease !important;
}
/* On lime splash: indicator text flips to black, arrow stays its own color */
.up-indicator.on-lime {
  color: #000000 !important;
}
.up-indicator.on-lime .indicator-label {
  color: #000000 !important;
}

/* Accordion: lime hover cue, no coral */
.accordion-item.active .accordion-icon {
  color: var(--c-accent) !important;
}

/* ─────────────────────────────────────────
   3. MARGINS & SPACING RHYTHM
   ───────────────────────────────────────── */

/* Section padding: use the new scale */
.panel {
  padding: var(--sp-6) var(--sp-3) !important;
}

/* Snap sections: full viewport on desktop, auto-height on mobile */
.snap-section {
  min-height: 100dvh !important;
  scroll-snap-align: start !important;
  scroll-snap-stop: always !important;
}
@media (max-width: 768px) {
  .snap-section {
    min-height: auto !important;
  }
  /* Card-fan needs explicit height for sticky scroll animation */
  .card-fan-section.snap-section {
    min-height: 3200px !important;
  }
  .panel { padding: var(--sp-4) var(--sp-2) !important; }
}

.page {
  padding: 0 !important;
  gap: 0 !important;  /* sections provide their own padding */
}
.content-stack {
  gap: 0 !important;
}

/* Hero: breathing room, not crammed */
.hero {
  padding: var(--sp-6) var(--sp-3) !important;
}
.hero-content {
  gap: var(--sp-2) !important;
}
.hero-ctas {
  gap: var(--sp-2) !important;
  margin: var(--sp-3) 0 !important;
}
.hero-meta, .hero-subtext {
  margin: 0 !important;
}

/* Intro/logo panel: full-bleed lime splash that zoom-throughs on scroll.
   The sticky wrapper keeps it pinned while the spacer below provides the
   scroll distance for the zoom animation. */
.intro-sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100dvh;
  overflow: hidden;
  z-index: 50;
  background: var(--c-accent);
  pointer-events: auto;
}
.intro-panel {
  gap: var(--sp-2) !important;
  background: var(--c-accent) !important;
  color: #000 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-width: 0 !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform, opacity;
  transform: scale(var(--intro-scale, 1));
  opacity: var(--intro-opacity, 1);
}
/* Spacer below intro reserves scroll distance for the zoom animation. */
.intro-zoom-spacer {
  display: block;
  width: 100%;
  height: 20vh;
  pointer-events: none;
}
.intro-panel-content {
  gap: var(--sp-3) !important;
  position: relative;
  z-index: 2;
}

/* ─── LOGO VARIANTS (switched via Tweaks) ───────────────────── */

/* Hide all variants by default; body attr controls which is shown */
.logo-variant { display: none !important; }
body[data-logo="terminal"] .logo-variant-terminal { display: flex !important; }
body[data-logo="ligature"] .logo-variant-ligature { display: flex !important; }
body[data-logo="mark"]     .logo-variant-mark     { display: flex !important; }
/* Default (no attr set yet) → show ligature */
body:not([data-logo]) .logo-variant.is-default { display: flex !important; }

.intro-logo-reveal {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 0 !important;
  color: #000;
  padding: 0.15em 0;
  overflow: visible;
}

/* ─────────── A. TERMINAL VARIANT ─────────── */
.logo-variant-terminal {
  font-family: "JetBrains Mono", ui-monospace, "Menlo", monospace;
  font-weight: 700;
  font-size: clamp(56px, 9vw, 150px);
  line-height: 1;
  letter-spacing: -0.02em;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.25em !important;
}
.logo-variant-terminal .term-prompt {
  color: #000;
  opacity: 0.4;
  font-weight: 500;
}
.logo-variant-terminal .term-text {
  color: #000;
  /* underscore gets a slight gap */
  position: relative;
}
.logo-variant-terminal .term-cursor {
  color: #000;
  animation: term-blink 1s steps(2) infinite;
  margin-left: 0.05em;
  font-size: 0.85em;
}
.logo-variant-terminal .term-text {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: baseline;
  flex-shrink: 0;
  width: 0;
}
.logo-variant-terminal.is-revealed .term-text {
  animation: term-type 1.4s steps(8, end) 200ms both;
}
.logo-variant-terminal:not(.is-revealed) .term-cursor { opacity: 0; }
@keyframes term-type {
  from { width: 0; }
  to   { width: var(--term-text-w, 9.2ch); }
}
@keyframes term-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ─────────── B. LIGATURE VARIANT (shared G) ─────────── */
.logo-variant-ligature {
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-weight: 900;
  font-size: clamp(88px, 14vw, 240px);
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: #000;
}
.logo-variant-ligature .lig-iga,
.logo-variant-ligature .lig-g,
.logo-variant-ligature .lig-mv {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
}
.logo-variant-ligature .lig-g {
  color: #000;
  position: relative;
  z-index: 2;
  padding: 0 0.02em;
  /* subtle treatment: outlined / filled half — the "shared" G */
  background: linear-gradient(90deg, #000 50%, #fff 50%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  opacity: 0;
}
.logo-variant-ligature.is-revealed .lig-g {
  animation: lig-g-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.logo-variant-ligature .lig-iga,
.logo-variant-ligature .lig-mv {
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  will-change: max-width, opacity, transform;
}
.logo-variant-ligature .lig-iga {
  color: #000;
  transform: translateX(0.3em); /* starts tucked right of the G */
}
.logo-variant-ligature .lig-mv {
  color: #fff;
  transform: translateX(-0.3em); /* starts tucked left of the G */
}
.logo-variant-ligature.is-revealed .lig-iga {
  animation: lig-fly-left 900ms cubic-bezier(0.22, 1, 0.36, 1) 700ms both;
}
.logo-variant-ligature.is-revealed .lig-mv {
  animation: lig-fly-right 900ms cubic-bezier(0.22, 1, 0.36, 1) 900ms both;
}
@keyframes lig-g-in {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes lig-fly-left {
  0%   { max-width: 0;    opacity: 0; transform: translateX(0.3em); }
  30%  { opacity: 1; }
  100% { max-width: 10em; opacity: 1; transform: translateX(0); }
}
@keyframes lig-fly-right {
  0%   { max-width: 0;    opacity: 0; transform: translateX(-0.3em); }
  30%  { opacity: 1; }
  100% { max-width: 10em; opacity: 1; transform: translateX(0); }
}
/* Flex-row order: IGA | G | MV (set explicitly to make B work regardless of DOM order) */
.logo-variant-ligature .lig-iga { order: 1; }
.logo-variant-ligature .lig-g   { order: 2; }
.logo-variant-ligature .lig-mv  { order: 3; }

/* ─────────── C. MARK + WORDMARK VARIANT ─────────── */
.logo-variant-mark {
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  align-items: center !important;
  gap: 0.35em !important;
}
.logo-variant-mark .mark-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(120px, 16vw, 260px);
  height: clamp(120px, 16vw, 260px);
  background: #000;
  color: #fff;
  border-radius: 24px;
  font-weight: 900;
  font-size: clamp(72px, 10vw, 160px);
  letter-spacing: -0.08em;
  overflow: hidden;
  opacity: 0;
}
.logo-variant-mark.is-revealed .mark-badge {
  animation: mark-pop 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.logo-variant-mark .mark-g {
  display: inline-block;
  line-height: 0.85;
}
.logo-variant-mark .mark-g-a {
  color: #fff;
  transform: translateX(0.06em);
  position: relative;
  z-index: 2;
}
.logo-variant-mark .mark-g-b {
  color: #C8FF1F; /* lime on black badge */
  margin-left: -0.32em; /* overlap — the two Gs embrace */
  transform: translateX(-0.04em);
}
.logo-variant-mark .mark-wordmark {
  font-weight: 900;
  font-size: clamp(56px, 8vw, 140px);
  letter-spacing: -0.04em;
  color: #000;
  line-height: 0.9;
  opacity: 0;
}
.logo-variant-mark.is-revealed .mark-wordmark {
  animation: mark-word-in 800ms cubic-bezier(0.22, 1, 0.36, 1) 500ms both;
}
@keyframes mark-pop {
  0%   { opacity: 0; transform: scale(0.7) rotate(-6deg); }
  70%  { opacity: 1; transform: scale(1.04) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes mark-word-in {
  0%   { opacity: 0; transform: translateX(-0.3em); }
  100% { opacity: 1; transform: translateX(0); }
}

/* Tagline (shared across variants) */
.intro-panel .intro-tagline {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: rgba(0,0,0,0.7) !important;
  margin: 0 !important;
  opacity: 0;
  animation: lg-fade-up 600ms ease-out 1800ms both;
}
@keyframes lg-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hide any stray emoji container from old markup */
.emoji-animation-container { display: none !important; }
.flying-emoji { display: none !important; }
.intro-logo {
  gap: var(--sp-1) !important;
}

/* MOT pitch section: neutralized — see section 6 below for new layout */

/* MOT tool section */
section.mot-section {
  padding: var(--sp-6) var(--sp-3) !important;
}
.mot-grid {
  gap: var(--sp-4) !important;
}
.mot-intro {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--sp-2) !important;
}
.mot-headline {
  margin-bottom: var(--sp-4) !important;
}
.mot-number {
  margin: var(--sp-2) 0 var(--sp-2) !important;
}
.mot-loss-frame {
  padding: var(--sp-2) var(--sp-3) !important;
  margin-bottom: var(--sp-4) !important;
  border-radius: 14px !important;
}
.mot-competitors {
  gap: var(--sp-1) !important;
  margin-bottom: var(--sp-3) !important;
}
.mot-comp-card {
  padding: var(--sp-2) !important;
  border-radius: 14px !important;
  gap: var(--sp-1) !important;
}
.mot-comp-revealed {
  padding: var(--sp-3) !important;
  gap: var(--sp-2) !important;
}
.mot-stats-row {
  gap: var(--sp-1) !important;
  margin-bottom: var(--sp-3) !important;
}
.mot-stat {
  padding: var(--sp-3) var(--sp-2) !important;
  border-radius: 14px !important;
}
.mot-locked-card {
  padding: var(--sp-3) !important;
  border-radius: 14px !important;
  margin-bottom: var(--sp-1) !important;
}
.mot-plan-steps {
  gap: var(--sp-1) !important;
  margin-top: var(--sp-2) !important;
}
.mot-plan-step {
  padding: 10px var(--sp-2) !important;
}
.mot-cta-sticky {
  padding: var(--sp-3) 0 var(--sp-2) !important;
}

/* Contact form */
.contact-form {
  gap: var(--sp-2) !important;
}
.contact-form label {
  gap: 6px !important;
}
.contact-form .button {
  min-width: 220px !important;
  padding: 16px 28px !important;
}

/* FAQ — 2-column layout matching polished.html */
#faq {
  gap: var(--sp-3) !important;
  padding: var(--sp-6) var(--sp-4) !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
}
#faq > .section-heading,
#faq > .accordion {
  /* part of grid below */
}
#faq {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) !important;
  gap: 96px !important;
  align-items: start !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
}
.faq-heading-left {
  text-align: left !important;
  margin: 0 !important;
  max-width: none !important;
}
.faq-heading-left .eyebrow {
  color: var(--c-accent) !important;
  margin-bottom: var(--sp-2) !important;
}
.faq-heading-left h2 {
  font-size: clamp(36px, 4vw, 56px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.035em !important;
  color: #ffffff !important;
  margin: 0 !important;
  text-wrap: balance;
}
.faq-heading-left .faq-sub {
  margin-top: var(--sp-2) !important;
  max-width: 320px !important;
  font-size: 14px !important;
  color: var(--c-muted) !important;
  line-height: 1.5 !important;
}

/* Minimalist accordion: bottom-border rows, circular + button */
#faq .accordion {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
}
#faq .accordion-item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 0 !important;
  padding: 0 !important;
}
#faq .accordion-trigger {
  width: 100%;
  background: transparent !important;
  border: 0 !important;
  padding: 24px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  cursor: pointer;
  color: #ffffff !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  text-align: left !important;
  transition: color 0.2s ease;
}
#faq .accordion-trigger:hover { opacity: 0.85; }
#faq .accordion-trigger > span:first-child {
  flex: 1;
}
#faq .accordion-icon {
  width: 28px !important;
  height: 28px !important;
  min-width: 28px;
  border-radius: 50% !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: transparent !important;
  color: var(--c-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  transition: transform 0.25s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}
#faq .accordion-item.active .accordion-icon,
#faq .accordion-item[aria-expanded="true"] .accordion-icon {
  background: var(--c-accent) !important;
  color: var(--c-accent-ink) !important;
  border-color: var(--c-accent) !important;
  transform: rotate(45deg) !important;
}
#faq .accordion-panel {
  padding: 0 !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
#faq .accordion-item.active .accordion-panel {
  max-height: 300px;
}
#faq .accordion-panel p {
  padding: 0 0 24px !important;
  margin: 0 !important;
  font-size: 15px !important;
  color: var(--c-muted) !important;
  line-height: 1.6 !important;
  max-width: 540px !important;
}

@media (max-width: 900px) {
  #faq {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
}

/* Pure white for main display headlines (matches logo) */
.hero-heading,
.mot-pitch-heading,
.mot-intro h2,
.section-heading h2,
h1, h2 {
  color: #ffffff !important;
}
.hero-heading .hl,
.mot-pitch-heading .hl {
  color: #ffffff !important;
}
.accordion {
  gap: var(--sp-1) !important;
}
.accordion-item {
  border-radius: 14px !important;
}
.accordion-trigger {
  padding: var(--sp-2) var(--sp-3) !important;
}
.accordion-panel {
  padding: 0 var(--sp-3) !important;
}
.accordion-panel p {
  padding-bottom: var(--sp-2) !important;
}

/* Parallax fixed content: tighter */
.parallax-text-item .eyebrow { margin-bottom: var(--sp-2) !important; }
.parallax-text-item h2 { margin-bottom: var(--sp-3) !important; }
.sticky-description { margin: 0 auto var(--sp-3) !important; }

/* ── Creator Carousel Section ── */
.creator-carousel-section {
  padding: var(--sp-6) 0 !important;
  min-height: 80vh !important;
  display: flex !important;
  align-items: center !important;
}

.creator-carousel-layout {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  width: 100%;
  max-width: var(--max-width, 1200px);
  margin: 0 auto;
  padding: 0 var(--sp-3);
}

/* ── Carousel ring — left-aligned, takes ~78% ── */
.creator-carousel-ring {
  flex: 0 0 78%;
  position: relative;
  height: clamp(400px, 55vh, 560px);
  overflow: visible;
}

.carousel-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(176px, 21vw, 256px);
  height: clamp(272px, 35vw, 400px);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 50px -16px rgba(0,0,0,0.55);
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.8s ease,
              z-index 0s;
  will-change: transform, opacity;
}

.carousel-card video,
.carousel-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* ── Right-aligned text — aligns with page content column ── */
.creator-carousel-text {
  flex: 0 0 22%;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
}
.creator-carousel-text .eyebrow {
  color: var(--c-accent) !important;
  margin: 0 !important;
}
.creator-carousel-text h2 {
  color: #fff !important;
  margin: 0 !important;
  font-size: clamp(36px, 4vw, 56px) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}
.creator-carousel-sub {
  color: var(--c-muted) !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

/* ── Mobile: stack vertically ── */
@media (max-width: 900px) {
  .creator-carousel-layout {
    flex-direction: column;
    gap: var(--sp-4);
  }
  .creator-carousel-ring {
    flex: none;
    width: 100%;
    height: clamp(320px, 50vh, 440px);
  }
  .creator-carousel-text {
    flex: none;
    width: 100%;
    text-align: center;
    align-items: center;
  }
}

/* Focus rings: consistent lime */
*:focus-visible {
  outline: 2px solid var(--c-accent) !important;
  outline-offset: 3px !important;
  border-radius: 4px;
}

/* ─────────────────────────────────────────
   4. KPI WIDGETS — FOUR FORMATS, TOGGLE VIA [data-kpi]
   Values: "floating" (original glass), "band" (A), "split" (C), "mono" (brutalist)
   Default if unset = "band".
   ───────────────────────────────────────── */

/* Shared resets applied to all variants */
.kpi-widget-value {
  font-family: var(--font-mono) !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--c-text) !important;
  margin: 0 !important;
}
.kpi-widget-label {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  color: var(--c-muted) !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}

/* ===========================================================
   FORMAT 1 — "floating" (5 glass cards, all lime, size variance)
   =========================================================== */
body[data-kpi="floating"] { --kpi-accent: #c8ff1f; }

body[data-kpi="floating"] .kpi-widget {
  position: absolute !important;
  background: rgba(200, 255, 31, 0.04) !important;
  border: 1px solid rgba(200, 255, 31, 0.14) !important;
  border-radius: 20px !important;
  padding: 24px 28px !important;
  min-width: 0 !important;
  backdrop-filter: blur(24px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(140%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 24px 48px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(200, 255, 31, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  opacity: 1 !important;
  transform: none !important;
  --kpi-accent: #c8ff1f;
}

/* ── Size + position variance ──
   GMV is the dominant card (largest). Creators + Videos = medium.
   Impressions + ROI = small supporting cards.
   Arranged asymmetrically around the headline, no overlaps. */

/* GMV — dominant, top-left */
body[data-kpi="floating"] .kpi-widget-4 {
  top: 8% !important;
  left: 4% !important;
  width: 300px !important;
  padding: 28px 32px !important;
  z-index: 3;
}
body[data-kpi="floating"] .kpi-widget-4 .kpi-widget-value {
  font-size: 3.4rem !important;
}

/* Creators — small, middle-left */
body[data-kpi="floating"] .kpi-widget-1 {
  top: 48% !important;
  bottom: auto !important;
  left: 3% !important;
  width: 170px !important;
  padding: 16px 18px !important;
  gap: 8px !important;
  z-index: 2;
}
body[data-kpi="floating"] .kpi-widget-1 .kpi-widget-value {
  font-size: 1.7rem !important;
}

/* Videos — medium, top-right */
body[data-kpi="floating"] .kpi-widget-5 {
  top: 8% !important;
  right: 4% !important;
  width: 250px !important;
  padding: 22px 24px !important;
  z-index: 3;
}
body[data-kpi="floating"] .kpi-widget-5 .kpi-widget-value {
  font-size: 2.4rem !important;
}

/* Impressions — small, middle-right */
body[data-kpi="floating"] .kpi-widget-2 {
  top: 45% !important;
  right: 3% !important;
  width: 190px !important;
  padding: 18px 20px !important;
  z-index: 2;
}
body[data-kpi="floating"] .kpi-widget-2 .kpi-widget-value {
  font-size: 1.8rem !important;
}

/* ROI — small, bottom-right (tightened) */
body[data-kpi="floating"] .kpi-widget-3 {
  bottom: 8% !important;
  right: 8% !important;
  width: 180px !important;
  padding: 18px 20px !important;
  z-index: 2;
}
body[data-kpi="floating"] .kpi-widget-3 .kpi-widget-value {
  font-size: 1.8rem !important;
}

/* Shared number + label treatment */
body[data-kpi="floating"] .kpi-widget-value {
  font-weight: 500 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
  color: var(--c-text) !important;
}
body[data-kpi="floating"] .kpi-widget-label {
  font-size: 10px !important;
  letter-spacing: 0.22em !important;
}

/* Data viz — all lime */
body[data-kpi="floating"] .kpi-widget-bar {
  display: block !important; width: 100% !important; height: 4px !important;
  background: rgba(255, 255, 255, 0.08) !important; border-radius: 2px !important; overflow: hidden;
}
body[data-kpi="floating"] .kpi-widget-bar-fill {
  background: var(--kpi-accent) !important; height: 100% !important;
}
body[data-kpi="floating"] .kpi-widget-graph {
  display: block !important; width: 100% !important; height: 36px !important; color: var(--kpi-accent) !important;
}
body[data-kpi="floating"] .kpi-graph-line {
  stroke: var(--kpi-accent) !important; stroke-width: 1.75 !important;
}
body[data-kpi="floating"] .kpi-widget-dots { display: flex !important; gap: 6px !important; }
body[data-kpi="floating"] .kpi-widget-dots .dot { width: 7px !important; height: 7px !important; background: rgba(255, 255, 255, 0.12) !important; }
body[data-kpi="floating"] .kpi-widget-dots .dot.active { background: var(--kpi-accent) !important; }

/* ── New semantic viz glyphs ──
   Each represents the METRIC (not time-series), with velocity feel. */

/* $ glyphs — GMV card: row of dollar signs, last one dim (scale implied) */
body[data-kpi="floating"] .kpi-widget-dollars {
  display: flex !important;
  gap: 8px !important;
  align-items: baseline;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--kpi-accent);
}
body[data-kpi="floating"] .kpi-widget-dollars span:nth-child(1) { opacity: 1; }
body[data-kpi="floating"] .kpi-widget-dollars span:nth-child(2) { opacity: 0.85; }
body[data-kpi="floating"] .kpi-widget-dollars span:nth-child(3) { opacity: 0.65; }
body[data-kpi="floating"] .kpi-widget-dollars span:nth-child(4) { opacity: 0.35; }
body[data-kpi="floating"] .kpi-widget-dollars span:nth-child(5) { opacity: 0.15; }

/* Video play glyphs — Videos card: row of triangular play icons */
body[data-kpi="floating"] .kpi-widget-videos {
  display: flex !important;
  gap: 8px !important;
  align-items: center;
}
body[data-kpi="floating"] .kpi-widget-videos .v-play {
  width: 0; height: 0;
  border-left: 10px solid var(--kpi-accent);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}
body[data-kpi="floating"] .kpi-widget-videos .v-play:nth-child(1) { opacity: 1; }
body[data-kpi="floating"] .kpi-widget-videos .v-play:nth-child(2) { opacity: 0.8; }
body[data-kpi="floating"] .kpi-widget-videos .v-play:nth-child(3) { opacity: 0.6; }
body[data-kpi="floating"] .kpi-widget-videos .v-play:nth-child(4) { opacity: 0.35; }
body[data-kpi="floating"] .kpi-widget-videos .v-play:nth-child(5) { opacity: 0.15; }

/* Pulse bars — Impressions card: vertical equalizer/radio-pulse
   implies live broadcast / reach, not time-series */
body[data-kpi="floating"] .kpi-widget-pulse {
  display: flex !important;
  gap: 4px !important;
  align-items: flex-end;
  height: 22px;
}
body[data-kpi="floating"] .kpi-widget-pulse span {
  width: 3px;
  background: var(--kpi-accent);
  border-radius: 1px;
  animation: kpi-pulse 1.2s ease-in-out infinite;
}
body[data-kpi="floating"] .kpi-widget-pulse span:nth-child(1) { height: 60%; animation-delay: 0s; }
body[data-kpi="floating"] .kpi-widget-pulse span:nth-child(2) { height: 90%; animation-delay: 0.15s; }
body[data-kpi="floating"] .kpi-widget-pulse span:nth-child(3) { height: 45%; animation-delay: 0.3s; }
body[data-kpi="floating"] .kpi-widget-pulse span:nth-child(4) { height: 75%; animation-delay: 0.45s; }

@keyframes kpi-pulse {
  0%, 100% { transform: scaleY(0.6); opacity: 0.5; }
  50%      { transform: scaleY(1);   opacity: 1;   }
}
body[data-kpi="floating"] .kpi-widget-pulse span { transform-origin: bottom; }

/* Person icons — Creators card */
body[data-kpi="floating"] .kpi-widget-people {
  display: flex !important;
  gap: 6px !important;
  align-items: center;
}
body[data-kpi="floating"] .kpi-widget-people svg {
  width: 11px;
  height: 11px;
  fill: var(--kpi-accent);
  flex-shrink: 0;
}
body[data-kpi="floating"] .kpi-widget-people svg:nth-child(1) { opacity: 1; }
body[data-kpi="floating"] .kpi-widget-people svg:nth-child(2) { opacity: 0.8; }
body[data-kpi="floating"] .kpi-widget-people svg:nth-child(3) { opacity: 0.6; }
body[data-kpi="floating"] .kpi-widget-people svg:nth-child(4) { opacity: 0.35; }
body[data-kpi="floating"] .kpi-widget-people svg:nth-child(5) { opacity: 0.15; }

/* Give the hero breathing room for 5 cards */
body[data-kpi="floating"] .hero {
  min-height: 820px !important;
  padding: var(--sp-6) var(--sp-3) !important;
}

/* Responsive: hide supporting cards on small screens, keep only GMV + Creators + Videos */
@media (max-width: 900px) {
  body[data-kpi="floating"] .kpi-widget-2,
  body[data-kpi="floating"] .kpi-widget-3 { display: none !important; }
  body[data-kpi="floating"] .kpi-widget-4 {
    top: 8% !important; left: 4% !important; right: 4% !important;
    min-width: 0 !important; padding: 20px 22px !important;
  }
  body[data-kpi="floating"] .kpi-widget-4 .kpi-widget-value { font-size: 2.4rem !important; }
  body[data-kpi="floating"] .kpi-widget-1 {
    bottom: 18% !important; left: 4% !important; min-width: 0 !important;
  }
  body[data-kpi="floating"] .kpi-widget-5 {
    top: auto !important; bottom: 6% !important; right: 4% !important; min-width: 0 !important;
  }
  body[data-kpi="floating"] .kpi-widget-1 .kpi-widget-value,
  body[data-kpi="floating"] .kpi-widget-5 .kpi-widget-value { font-size: 1.8rem !important; }
}

/* ===========================================================
   FORMAT 2 — "band" (Option A — full-width stat band)
   =========================================================== */
body[data-kpi="band"] .hero {
  position: relative !important;
  padding-bottom: 160px !important;
}
body[data-kpi="band"] .kpi-widget {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  animation: none !important; padding: 0 24px !important; min-width: 0 !important;
  opacity: 1 !important; transform: none !important;
  text-align: center !important;
}
body[data-kpi="band"] .kpi-widget-1 { position: absolute !important; left: 24px !important; bottom: 56px !important; right: auto !important; top: auto !important; width: calc(33.333% - 32px) !important; border-right: 1px solid rgba(255,255,255,0.12) !important; }
body[data-kpi="band"] .kpi-widget-2 { position: absolute !important; left: 33.333% !important; bottom: 56px !important; right: auto !important; top: auto !important; width: calc(33.333% - 16px) !important; border-right: 1px solid rgba(255,255,255,0.12) !important; }
body[data-kpi="band"] .kpi-widget-3 { position: absolute !important; right: 24px !important; bottom: 56px !important; left: auto !important; top: auto !important; width: calc(33.333% - 32px) !important; }
body[data-kpi="band"] .kpi-widget-1::after {
  content: ""; position: absolute;
  left: -24px; top: -32px;
  height: 1px; width: calc(300% + 16px);
  background: rgba(255,255,255,0.12);
}
body[data-kpi="band"] .kpi-widget-value {
  font-size: clamp(44px, 7vw, 96px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.045em !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
  display: block !important;
}
body[data-kpi="band"] .kpi-widget-label {
  font-size: 11px !important;
  letter-spacing: 0.28em !important;
}
body[data-kpi="band"] .kpi-widget-bar,
body[data-kpi="band"] .kpi-widget-graph,
body[data-kpi="band"] .kpi-widget-dots { display: none !important; }

/* ===========================================================
   FORMAT 3 — "split" (Option C — stacked column on right)
   Headline floats left, stats stack vertically in a tall glass panel right.
   =========================================================== */
body[data-kpi="split"] .hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr) !important;
  gap: 64px !important;
  align-items: center !important;
  justify-items: stretch !important;
  padding: var(--sp-6) var(--sp-4) !important;
}
body[data-kpi="split"] .hero-content.hero-content-centered {
  text-align: left !important;
  margin: 0 !important;
  align-items: flex-start !important;
  max-width: none !important;
}
body[data-kpi="split"] .hero-content.hero-content-centered .hero-heading { text-align: left !important; }
body[data-kpi="split"] .hero-backdrop { grid-column: 1 / -1; grid-row: 1; pointer-events: none; }

/* A synthesized tall panel: we use .kpi-widget-1 as the FIRST stat of 3,
   and visually group them via shared left border + spacing. */
body[data-kpi="split"] .kpi-widget {
  position: static !important;
  background: rgba(255,255,255,0.035) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  padding: 32px 28px !important;
  margin: 0 !important;
  width: 100% !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  box-shadow: none !important;
  animation: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  opacity: 1 !important;
  transform: none !important;
}
body[data-kpi="split"] .kpi-widget-1 {
  grid-column: 2; grid-row: 1;
  align-self: stretch;
  border-radius: 18px 18px 0 0 !important;
  border-bottom: 0 !important;
  margin-top: 40px !important;
  --kpi-accent: #c8ff1f;
}
body[data-kpi="split"] .kpi-widget-2 {
  grid-column: 2; grid-row: 1;
  align-self: stretch;
  border-radius: 0 !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;
  border-bottom: 1px solid rgba(255,255,255,0.10) !important;
  margin-top: 180px !important;
  --kpi-accent: #ff7b53;
}
body[data-kpi="split"] .kpi-widget-3 {
  grid-column: 2; grid-row: 1;
  align-self: stretch;
  border-radius: 0 0 18px 18px !important;
  border-top: 0 !important;
  margin-top: 320px !important;
  margin-bottom: 40px !important;
  --kpi-accent: #f5f5f0;
}
body[data-kpi="split"] .kpi-widget-value {
  font-size: 2.8rem !important;
  font-weight: 500 !important;
  letter-spacing: -0.035em !important;
  line-height: 1 !important;
}
body[data-kpi="split"] .kpi-widget-label {
  font-size: 10px !important;
  letter-spacing: 0.24em !important;
  order: -1;
}
body[data-kpi="split"] .kpi-widget-bar { display: block !important; width: 80% !important; height: 3px !important; background: rgba(255,255,255,0.08) !important; border-radius: 2px !important; overflow: hidden; }
body[data-kpi="split"] .kpi-widget-bar-fill { background: var(--kpi-accent) !important; height: 100% !important; }
body[data-kpi="split"] .kpi-widget-graph { display: block !important; width: 80% !important; height: 28px !important; color: var(--kpi-accent) !important; }
body[data-kpi="split"] .kpi-graph-line { stroke: var(--kpi-accent) !important; stroke-width: 1.75 !important; }
body[data-kpi="split"] .kpi-widget-dots { display: flex !important; gap: 6px !important; }
body[data-kpi="split"] .kpi-widget-dots .dot { width: 6px !important; height: 6px !important; background: rgba(255,255,255,0.12) !important; }
body[data-kpi="split"] .kpi-widget-dots .dot.active { background: var(--kpi-accent) !important; }

@media (max-width: 900px) {
  body[data-kpi="split"] .hero { grid-template-columns: 1fr !important; gap: 40px !important; }
  body[data-kpi="split"] .kpi-widget-1,
  body[data-kpi="split"] .kpi-widget-2,
  body[data-kpi="split"] .kpi-widget-3 { grid-column: 1; grid-row: auto; margin: 0 !important; border-radius: 0 !important; }
  body[data-kpi="split"] .kpi-widget-1 { border-radius: 14px 14px 0 0 !important; }
  body[data-kpi="split"] .kpi-widget-3 { border-radius: 0 0 14px 14px !important; }
}

/* ===========================================================
   FORMAT 4 — "mono" (Brutalist black cards, lime underline)
   =========================================================== */
body[data-kpi="mono"] .kpi-widget {
  position: absolute !important;
  background: #000 !important;
  border: 1px solid rgba(245,245,240,0.18) !important;
  border-radius: 0 !important;
  padding: 22px 24px 20px !important;
  min-width: 210px !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  animation: none !important; box-shadow: none !important;
  display: flex !important; flex-direction: column !important; gap: 2px !important;
}
body[data-kpi="mono"] .kpi-widget-1 { top: 18% !important; left: 6% !important; right: auto !important; bottom: auto !important; }
body[data-kpi="mono"] .kpi-widget-2 { top: 20% !important; right: 6% !important; left: auto !important; bottom: auto !important; }
body[data-kpi="mono"] .kpi-widget-3 { bottom: 18% !important; left: 10% !important; right: auto !important; top: auto !important; }
body[data-kpi="mono"] .kpi-widget::before {
  content: ""; position: absolute; top: -1px; left: -1px;
  width: 10px; height: 10px;
  border-top: 2px solid var(--c-accent); border-left: 2px solid var(--c-accent);
}
body[data-kpi="mono"] .kpi-widget-value {
  font-size: 3rem !important; font-weight: 500 !important;
  letter-spacing: -0.04em !important; line-height: 0.95 !important;
  position: relative; display: inline-block; padding-bottom: 6px;
}
body[data-kpi="mono"] .kpi-widget-value::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 48px; height: 3px; background: var(--c-accent);
}
body[data-kpi="mono"] .kpi-widget-label {
  font-size: 10px !important; letter-spacing: 0.22em !important;
  margin-top: 10px !important;
}
body[data-kpi="mono"] .kpi-widget-bar,
body[data-kpi="mono"] .kpi-widget-graph,
body[data-kpi="mono"] .kpi-widget-dots { display: none !important; }

/* ─────────────────────────────────────────
   5. TWEAKS PANEL (floating, bottom-right)
   Only visible when the host toggles edit mode.
   ───────────────────────────────────────── */
#tweaks-panel {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 280px;
  background: #0d0d12;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 16px;
  z-index: 99999;
  font-family: var(--font-sans);
  color: var(--c-text);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
  display: none;
}
#tweaks-panel.open { display: block; }
#tweaks-panel h4 {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em;
  margin: 0 0 12px; color: var(--c-muted); font-weight: 600;
}
#tweaks-panel .tw-group { margin-bottom: 14px; }
#tweaks-panel .tw-group:last-child { margin-bottom: 0; }
#tweaks-panel .tw-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em;
  color: var(--c-muted); margin-bottom: 8px; display: block;
}
#tweaks-panel .tw-options {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
#tweaks-panel .tw-opt {
  background: #15151c;
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--c-text);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}
#tweaks-panel .tw-opt:hover { border-color: rgba(200,255,31,0.5); }
/* ─────────────────────────────────────────
   6. MOT PITCH — SIDE-BY-SIDE LAYOUT
   Left: headline + sample report preview card.
   Right: compact form, one field per line, single CTA.
   ───────────────────────────────────────── */

.mot-pitch-section {
  padding: var(--sp-6) var(--sp-4) !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.mot-pitch-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.9fr) !important;
  gap: 64px !important;
  align-items: start !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  width: 100% !important;
  position: relative;
  z-index: 1;
}

/* LEFT column */
.mot-pitch-left {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--sp-3) !important;
}
.mot-pitch-left .eyebrow {
  color: var(--c-accent) !important;
  margin: 0 0 var(--sp-2) !important;
}
.mot-pitch-left .mot-pitch-heading {
  font-size: clamp(40px, 4.2vw, 60px) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.035em !important;
  margin: 0 !important;
  color: var(--c-text) !important;
  text-wrap: balance;
  max-width: 11ch;
}
.mot-pitch-left .mot-pitch-heading .hl {
  position: relative;
  color: var(--c-text) !important;
  background: transparent;
  padding: 0;
  z-index: 0;
  isolation: isolate;
}
.mot-pitch-left .mot-pitch-heading .hl::before {
  content: "";
  position: absolute;
  left: -0.06em; right: -0.06em;
  bottom: 0.05em; height: 0.5em;
  background: rgba(200, 255, 31, 0.35);
  border-radius: 4px;
  z-index: -1;
}
.mot-pitch-sub {
  font-size: var(--fs-md) !important;
  color: var(--c-muted) !important;
  max-width: 520px !important;
  margin: 0 !important;
}

/* Sample preview card — clean, no heavy card chrome */
.mot-preview {
  margin-top: var(--sp-4) !important;
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 0 !important;
  padding: var(--sp-3) 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.mot-preview-tag {
  display: inline-flex;
  align-self: flex-start;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  padding: 6px 12px;
  border-radius: 0;
  margin-bottom: 6px;
}
.mot-preview-eyebrow {
  font-size: 13px;
  color: var(--c-muted);
  margin: 0;
  font-weight: 500;
}
.mot-preview-num {
  font-family: var(--font-mono);
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
  margin: 4px 0 2px;
}
.mot-preview-sub {
  font-size: 13px;
  color: var(--c-muted);
  margin: 0 0 var(--sp-2);
  line-height: 1.5;
}
.mot-preview-comps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--sp-1);
}
.mot-comp-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-radius: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 13px;
}
.mot-comp-row .rk {
  font-family: var(--font-mono);
  color: var(--c-accent);
  font-weight: 600;
}
.mot-comp-row .name {
  color: var(--c-text);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mot-comp-row .gmv {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--c-accent);
  font-variant-numeric: tabular-nums;
}
.mot-comp-row.revealed {
  background: transparent;
  border-color: rgba(255,255,255,0.1);
}
.mot-comp-row.locked .name,
.mot-comp-row.locked .gmv {
  filter: blur(5px);
  user-select: none;
  color: var(--c-muted);
}

/* RIGHT column — form */
.mot-pitch-form {
  background: transparent !important;
  border: none !important;
  border-left: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 0 !important;
  padding: 0 0 0 var(--sp-4) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  position: sticky;
  top: 96px;
}
.mot-pf-field {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
.mot-pf-label {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.mot-pitch-form input {
  width: 100%;
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  color: var(--c-text) !important;
  font-family: var(--font-sans) !important;
  font-size: 15px !important;
  transition: border-color 0.15s ease;
}
.mot-pitch-form input::placeholder { color: var(--c-dim); }
.mot-pitch-form input:focus {
  outline: none !important;
  border-color: var(--c-accent) !important;
  background: transparent !important;
}
.mot-pf-submit {
  margin-top: 6px !important;
  background: transparent !important;
  color: var(--c-accent) !important;
  border: 1.5px solid var(--c-accent) !important;
  border-radius: 0 !important;
  padding: 14px 22px !important;
  font-family: var(--font-sans) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease;
}
.mot-pf-submit:hover {
  background: var(--c-accent) !important;
  color: var(--c-accent-ink) !important;
  transform: none;
  box-shadow: none;
}
.mot-pf-submit .arr {
  display: inline-block;
  transition: transform 0.15s ease;
}
.mot-pf-submit:hover .arr { transform: translateX(3px); }
.mot-pf-foot {
  margin: 0 !important;
  font-size: 11px !important;
  color: var(--c-dim) !important;
  text-align: center;
  line-height: 1.5;
}

/* Responsive */
@media (max-width: 900px) {
  .mot-pitch-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .mot-pitch-form { position: static; }
}

/* ─────────────────────────────────────────────────────────────
   HERO v2: scroll-driven horizontal marquee + card rows
   Layout: section takes ~2.5 viewports of scroll; a sticky
   inner pane pins at top:0 and locks the visible hero while the
   user scrolls through the spacer. The JS computes "lock progress"
   and drives the marquee translateX + card row positions.
   ───────────────────────────────────────────────────────────── */
.hero-v2 {
  position: relative;
  /* Break out of .page's horizontal padding + 1200px max-width of siblings.
     Use margin-based full-bleed instead of transform so sticky inside isn't
     rooted to a transformed containing block (which breaks sticky release
     behaviour and leaves black gaps on detach). */
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  height: 2000px; /* fixed scroll distance, orientation-independent */
  min-height: 2000px !important;
  padding: 0 !important;
  background: var(--c-bg);
  /* CRITICAL: override styles.css's `.snap-section { display: flex;
     align-items: center }`. With flex-row + align-items:center, the sticky
     child was being vertically centered inside the 250vh box (offset 744px
     down), which detached sticky pinning and left a huge black gap below.
     Force block flow so the sticky child is anchored to the top. */
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  /* IMPORTANT: no overflow:hidden here — it fights sticky behaviour and
     causes the sticky pane to detach mid-pin, leaving the black empty
     bottom half visible. Clipping happens on the sticky pane instead. */
  overflow: visible;
  /* Disable snap on the hero itself. Snap points land mid-animation with a
     250vh-tall section, which prevents the sticky pane from being fully in
     view on arrival. Free-scroll inside the hero; the sticky pinning and
     the adjacent sections' own snap points still give a sectioned feel. */
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
}
/* Sticky inner must span the full 100vw width of its parent now.
   min-width is critical: without it, the flex/sticky container was shrinking
   to its intrinsic content width and ignoring the declared 100vw. */
.hero-v2 .hero-v2-sticky {
  width: 100vw !important;
  min-width: 100vw !important;
  max-width: 100vw !important;
}
.hero-v2-sticky {
  position: sticky;
  top: 0;
  height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(20px, 4vh, 44px) clamp(20px, 3vw, 44px);
  box-sizing: border-box;
  overflow: hidden;
  background: var(--c-bg);
}
.hero-v2-scroll-spacer {
  display: block;
  width: 100%;
  height: 1px; /* height comes from .hero-v2 total height minus sticky */
}

/* Eyebrow (top-left) */
.hero-v2-eyebrow {
  position: absolute;
  top: clamp(20px, 4vh, 44px);
  left: clamp(20px, 3vw, 44px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.78);
  z-index: 3;
}
.hero-v2-eyebrow-dot {
  width: 8px;
  height: 8px;
  background: var(--c-accent);
  border-radius: 50%;
  display: inline-block;
  animation: hv2-pulse 2s ease-in-out infinite;
}
@keyframes hv2-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.15); }
}

/* Subtext: top, centered, single line */
.hero-v2-subtext {
  position: absolute;
  top: clamp(16px, 2.4vh, 28px);
  left: 50%;
  transform: translateX(-50%);
  max-width: none;
  white-space: nowrap;
  font-family: var(--font-sans);
  font-size: clamp(13px, 1.05vw, 16px);
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: rgba(245, 245, 240, 0.82);
  margin: 0;
  z-index: 5;
  text-align: center;
}

/* Scroll cue (bottom-right) */
.hero-v2-cue {
  position: absolute;
  bottom: clamp(20px, 4vh, 44px);
  right: clamp(20px, 3vw, 44px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.55);
  z-index: 3;
}
.hero-v2-cue-arrow {
  display: inline-block;
  animation: hv2-arrow 1.6s ease-in-out infinite;
  color: var(--c-accent);
}
@keyframes hv2-arrow {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Card rows */
.hero-v2-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: clamp(120px, 16vh, 170px);
  flex: 0 0 auto;
  /* Sit above the marquee text — huge display type can bleed past its
     flex-row's line box and nick the bottom of the card row otherwise. */
  z-index: 2;
}
/* Card rows overlap the marquee as absolute layers so they don't
   consume flex space or get clipped at the viewport edge.
   z-index: 4 puts them above the marquee text (z:3) so they read
   as the foreground layer the eye tracks. */
.hero-v2-row-top {
  position: absolute;
  /* Pull the top row closer to the marquee — centers the whole stack. */
  top: calc(50% - clamp(180px, 22vh, 240px));
  left: 0;
  right: 0;
  margin: 0;
  z-index: 4;
}
.hero-v2-row-bottom {
  position: absolute;
  /* Mirror distance from centre for symmetry. */
  bottom: calc(50% - clamp(180px, 22vh, 240px));
  left: 0;
  right: 0;
  margin: 0;
  z-index: 4;
}
.hero-v2-row-track {
  display: flex;
  gap: 16px;
  height: 100%;
  width: max-content;
  will-change: transform;
}
/* Stop the continuous CSS drift — cards should only move when the user
   scrolls (driven by the JS progress handler). */
.hero-v2-row-top .hero-v2-row-track,
.hero-v2-row-bottom .hero-v2-row-track {
  animation: none !important;
  transform: translateX(var(--hv2-row-x, 0px));
}
@keyframes hv2-drift-ltr {
  from { transform: translateX(calc(var(--hv2-row-x, 0px))); }
  to   { transform: translateX(calc(var(--hv2-row-x, 0px) - 50%)); }
}
@keyframes hv2-drift-rtl {
  from { transform: translateX(calc(var(--hv2-row-x, 0px) - 50%)); }
  to   { transform: translateX(calc(var(--hv2-row-x, 0px))); }
}
.hv2-card {
  flex: 0 0 clamp(180px, 15vw, 240px);
  height: 100%;
  border-radius: 14px;
  /* 10% translucent card — color washes very subtly over the dark
     hero background so the bg dominates. Tint at 0.1 alpha; the grain
     layer stays so the cards still read as material, not flat rectangles. */
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.18'/></svg>"),
    var(--tint, rgba(200, 255, 31, 0.1));
  background-blend-mode: overlay, normal;
  border: 0;
  box-shadow:
    0 18px 40px -20px rgba(0,0,0,0.55);
  padding: 18px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hv2-card::before {
  /* Slight film-grain overlay on top for vintage feel */
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/></svg>");
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 0;
  opacity: 0.6;
}
.hv2-card-tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.hv2-card-num {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: clamp(36px, 3.5vw, 52px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: rgba(255,255,255,0.96);
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
/* Card tint variants — translucent colour washes at 50% alpha */
.hv2-card-1 { --tint: rgba(200, 255, 31, 0.1); }   /* lime   */
.hv2-card-2 { --tint: rgba(255, 150, 110, 0.1); }  /* peach  */
.hv2-card-3 { --tint: rgba(140, 170, 255, 0.1); }  /* blue   */
.hv2-card-4 { --tint: rgba(255, 220, 130, 0.1); }  /* amber  */
.hv2-card-5 { --tint: rgba(120, 210, 160, 0.1); }  /* sage   */
.hv2-card-6 { --tint: rgba(220, 180, 255, 0.1); }  /* lilac  */
.hv2-card-7 { --tint: rgba(255, 180, 200, 0.1); }  /* rose   */

/* KPI text — big number + label */
.hv2-card-tag {
  position: absolute;
  top: 14px;
  left: 20px;
  margin: 0;
  z-index: 2;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.75);
}
.hv2-card-num {
  position: relative;
  z-index: 2;
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(28px, 2.8vw, 44px);
  letter-spacing: -0.02em;
  color: #f5f5f0;
  line-height: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.hv2-card-sub {
  position: relative;
  z-index: 2;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 245, 240, 0.6);
  margin-top: 8px;
}
.hero-v2-marquee-wrap {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: 0; /* allow shrinking inside the sticky flex column */
  position: relative;
  z-index: 1;
  width: 100%;
}
.hero-v2-marquee-text {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(80px, 14vw, 200px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  white-space: nowrap;
  color: var(--c-text, #f5f5f0);
  will-change: transform;
  transform: translateX(var(--hv2-text-x, 0));
  padding-left: 100vw; /* start off-screen right */
}
.hv2-hl {
  position: relative;
  display: inline-block;
  padding: 0 0.08em;
}
.hv2-hl::before {
  content: "";
  position: absolute;
  /* Half-height bar anchored to the baseline, sitting BEHIND the glyphs */
  left: -0.02em;
  right: -0.02em;
  bottom: 0.12em;
  height: 0.42em;
  background: rgba(200, 255, 31, 0.55);
  border: 0;
  border-radius: 2px;
  z-index: -1;
}

/* The giant horizontal text */


/* ──────────────────────────────────────────────────────────────
   MOT Pitch — CENTERED variant (mot-pitch section after content
   was moved to #contact). Single column, everything centered.
   ────────────────────────────────────────────────────────────── */
.mot-pitch-section-centered {
  padding: clamp(80px, 14vh, 160px) var(--sp-4) !important;
  min-height: 70vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
}
.mot-pitch-centered {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  position: relative;
  z-index: 1;
}
.mot-pitch-eyebrow-centered {
  margin: 0 !important;
}
.mot-pitch-heading-centered {
  text-align: center !important;
  max-width: 18ch;
  margin: 0 !important;
  font-size: clamp(40px, 5.2vw, 76px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.04em !important;
  text-wrap: balance;
}
.mot-pitch-heading-centered .hl {
  color: var(--c-text) !important;
  padding: 0 0.05em;
  /* Half-height green bar that wraps across lines */
  background: linear-gradient(
    to top,
    rgba(200, 255, 31, 0.35) 0,
    rgba(200, 255, 31, 0.35) 0.55em,
    transparent 0.55em
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  border-radius: 4px;
}
.mot-pitch-heading-centered .hl::before {
  display: none;
}
.mot-pitch-sub-centered {
  text-align: center !important;
  max-width: 58ch;
  margin: 0 auto !important;
}
/* CTA button — outlined, square, green border + text */
.mot-pitch-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: var(--sp-2);
  padding: 14px 24px;
  border-radius: 0;
  border: 1.5px solid var(--c-accent, #c8ff1f);
  background: transparent;
  color: var(--c-accent, #c8ff1f);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
  box-shadow: none;
}
.mot-pitch-cta:hover {
  background: var(--c-accent, #c8ff1f);
  color: var(--c-accent-ink, #07070a);
  transform: none;
  box-shadow: none;
}
.mot-pitch-cta .arr {
  display: inline-block;
  transition: transform 0.2s ease;
}
.mot-pitch-cta:hover .arr {
  transform: translateX(4px);
}

/* Mobile CTA: hidden on desktop, shown on mobile */
.mot-mobile-cta { display: none; }

/* MOT intake contact grid — reuse mot-pitch-grid but clean up spacing
   inside the #contact section (different parent padding). */
.mot-pitch-grid-contact {
  padding: var(--sp-3) 0;
}




/* ══════════════════════════════════════════════════════════════
   CARD FAN SECTION — 5 cards
   ─────────────────────────────────────────────────────────────
   Phase 0  (0.00–0.08)  Cards fade up as a single stack
   Phase 1  (0.08–0.25)  Fan out staggered (overlap, rotation)
   Phase 2  (0.25–0.38)  Pitch text fades in above cards
   Phase 3  (0.38–0.48)  Pitch text fades out, cards collapse back
   Phase 4  (0.48–0.62)  Cards spread into tall rectangles, text in
   Phase 5  (0.62–1.00)  Horizontal scroll, one card at a time
   ─────────────────────────────────────────────────────────────
   700vh total. JS sets --progress (0→1).
   ══════════════════════════════════════════════════════════════ */

.card-fan-section {
  --progress: 0;
  position: relative;
  height: 4800px;
  padding: 0 !important;
  min-height: 0 !important;
  display: block !important;
  align-items: initial !important;
  justify-content: initial !important;
  overflow: visible;
  scroll-snap-align: none !important;
  scroll-snap-stop: normal !important;
  border-bottom: none !important;
}

.card-fan-section {
  --p: var(--progress);
  /* Phase 0: appear (0–0.10) — slow fade-up so cards drift in gently */
  --p-appear:    clamp(0, calc(var(--p) / 0.18), 1);
  /* Phase 1: fan out (0.06–0.25) — starts while still fading in */
  --p-fan:       clamp(0, calc((var(--p) - 0.18) / 0.12), 1);
  /* Phase 2: pitch text in (0.25–0.38) */
  --p-pitch-in:  clamp(0, calc((var(--p) - 0.25) / 0.08), 1);
  /* Phase 3: pitch text out + collapse (0.38–0.48) */
  --p-pitch-out: clamp(0, calc((var(--p) - 0.38) / 0.06), 1);
  --p-collapse:  clamp(0, calc((var(--p) - 0.38) / 0.10), 1);
  /* Phase 4: spread into tall cards (0.48–0.62) */
  --p-spread:    clamp(0, calc((var(--p) - 0.48) / 0.14), 1);
  /* Phase 5: scroll (0.62–1.00) */
  --p-scroll:    clamp(0, calc((var(--p) - 0.62) / 0.38), 1);
  /* Card text (tied to spread) */
  --p-card-text: clamp(0, calc((var(--p) - 0.54) / 0.10), 1);
}

.card-fan-pin {
  position: sticky;
  top: 0;
  height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card-fan-track {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  will-change: transform;
  /* Scroll offset: start with card 0 centered (shift right by 2 card-widths),
     then scroll left through all 5 cards.
     Total travel = 4 cards worth of width (card 0 → card 4). */
  --card-step: calc(clamp(320px, 40vw, 480px) + 40px);
  --scroll-offset: calc(2 * var(--card-step) - var(--p-scroll) * 4 * var(--card-step));
}

/* ── Individual card ── */
.fan-card {
  position: absolute;
  will-change: transform, opacity;

  --card-w-small: clamp(140px, 18vw, 200px);
  --card-h-small: clamp(180px, 24vw, 260px);
  --card-w-big:   clamp(320px, 40vw, 480px);
  --card-h-big:   clamp(420px, 60vh, 560px);

  /* Size: small during fan/stack, grows during spread */
  width:  calc(var(--card-w-small) * (1 - var(--p-spread)) + var(--card-w-big) * var(--p-spread));
  height: calc(var(--card-h-small) * (1 - var(--p-spread)) + var(--card-h-big) * var(--p-spread));

  border-radius: 16px;
  background: #111;
  box-shadow: 0 20px 50px -16px rgba(0,0,0,0.55);
  overflow: hidden;
  isolation: isolate;

  /* ── APPEAR: fade up from below ── */
  opacity: var(--p-appear);

  /*
    POSITIONING — 4 states blended:
    STACK:   all cards piled at center (initial state)
    FAN:     staggered fan-out with overlap + varied rotation
    COLLAPSE: back to stack
    SPREAD:  tall cards in a row for scrolling
  */

  /* Stack/initial state: tight pile with tiny offsets, pushed below center */
  --stack-x: calc((var(--i) - 2) * 3px);
  --stack-rot: calc((var(--i) - 2) * 1deg);
  /* Cards rise from below during appear phase: start at +45vh (below
     center, visible in bottom of sticky during hero→cardfan transition),
     end at +22vh (well below center) as p-appear completes. */
  --stack-y: calc(22vh + 23vh * (1 - var(--p-appear)));

  /* Fan state: wide spread across screen, mostly horizontal, individual tilts.
     Each card uses --fan-rot-self set below for hand-tuned angles.
     Sits lower (12vh below center) so cards are clearly below the pitch text. */
  --fan-x: calc((var(--i) - 2) * clamp(110px, 18vw, 280px));
  --fan-rot: var(--fan-rot-self, 0deg);
  --fan-y: calc(22vh + (var(--i) - 2) * (var(--i) - 2) * 3px);

  /* Spread state: evenly spaced for scroll */
  --spread-x: calc((var(--i) - 2) * (var(--card-w-big) + 40px) + var(--scroll-offset));
  --spread-rot: 0deg;
  --spread-y: 0px;

  /* Blend stack → fan (p-fan goes 0→1, staggered per card) */
  --p-fan-self: clamp(0, calc(var(--p-fan) * 1.8 - var(--i) * 0.15), 1);
  --sf-x:   calc(var(--stack-x)   * (1 - var(--p-fan-self)) + var(--fan-x)   * var(--p-fan-self));
  --sf-rot: calc(var(--stack-rot) * (1 - var(--p-fan-self)) + var(--fan-rot) * var(--p-fan-self));
  --sf-y:   calc(var(--stack-y)   * (1 - var(--p-fan-self)) + var(--fan-y)   * var(--p-fan-self));

  /* Blend fan → collapse back to stack (p-collapse) */
  --fc-x:   calc(var(--sf-x)   * (1 - var(--p-collapse)) + var(--stack-x) * var(--p-collapse));
  --fc-rot: calc(var(--sf-rot) * (1 - var(--p-collapse)) + var(--stack-rot) * var(--p-collapse));
  --fc-y:   calc(var(--sf-y)   * (1 - var(--p-collapse)) + 0px * var(--p-collapse));

  /* Blend (collapsed) → spread (p-spread) */
  --final-x:   calc(var(--fc-x)   * (1 - var(--p-spread)) + var(--spread-x)   * var(--p-spread));
  --final-rot: calc(var(--fc-rot) * (1 - var(--p-spread)) + var(--spread-rot) * var(--p-spread));
  --final-y:   calc(var(--fc-y)   * (1 - var(--p-spread)) + var(--spread-y)   * var(--p-spread));

  transform:
    translateX(var(--final-x))
    translateY(var(--final-y))
    rotate(var(--final-rot));

  z-index: calc(5 - var(--i));
}

/* Per-card fan rotation — hand-tuned for organic feel */
.fan-card:nth-child(1) { --fan-rot-self: -6deg; }
.fan-card:nth-child(2) { --fan-rot-self: -3deg; }
.fan-card:nth-child(3) { --fan-rot-self:  1deg; }
.fan-card:nth-child(4) { --fan-rot-self:  4deg; }
.fan-card:nth-child(5) { --fan-rot-self:  7deg; }

/* Background image — covers the card, dims during spread for text readability */
.fan-card-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  /* Full opacity during fan/stack, dims to 0.3 during spread for text legibility */
  opacity: calc(1 - 0.7 * var(--p-spread));
}

/* ── Card text — fades in during spread ── */
.fan-card-inner {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* Fixed height so eyebrow starts at the same Y on every card */
  height: 55%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 28px 28px;
  gap: 12px;
  opacity: var(--p-card-text);
  overflow: hidden;
}
.fan-card-inner .eyebrow {
  color: var(--c-accent, #c8ff1f) !important;
  font-size: 12px !important;
  letter-spacing: 0.18em !important;
  margin: 0 !important;
}
.fan-card-inner h3 {
  color: var(--c-text, #f5f5f0) !important;
  font-size: clamp(28px, 3.2vw, 40px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  margin: 0 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
  /* Cap at 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.fan-card-inner .fan-card-desc {
  color: rgba(255,255,255,0.75) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* ── Pitch text overlay — above cards during fan phase ── */
.card-fan-pitch {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%) translateY(calc(-16px * (1 - var(--p-pitch-in))));
  width: 100%;
  max-width: 720px;
  padding: 0 var(--sp-3, 24px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2, 16px);
  text-align: center;
  z-index: 10;
  opacity: calc(var(--p-pitch-in) * (1 - var(--p-pitch-out)));
  pointer-events: none;
}
/* Override the heading size specifically for card-fan-pitch */
.card-fan-pitch .mot-pitch-heading-centered {
  font-size: clamp(40px, 4.2vw, 64px) !important;
  max-width: 22ch;
  line-height: 1.02 !important;
}
.card-fan-pitch .mot-pitch-sub-centered {
  font-size: clamp(15px, 1.2vw, 18px) !important;
  max-width: 48ch;
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .card-fan-section {
    height: auto !important;
    min-height: 100dvh !important;
  }
  .card-fan-pin { position: relative !important; }
  .fan-card {
    position: relative !important;
    transform: none !important;
    width: var(--card-w-big) !important;
    height: var(--card-h-big) !important;
    opacity: 1 !important;
  }
  .fan-card-inner { opacity: 1 !important; }
  .card-fan-pitch { display: none !important; }
  .card-fan-track {
    display: flex !important;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    padding: 40px;
  }
}

/* ── Mobile ── */
@media (max-width: 768px) {
  .card-fan-section { height: 3200px; }
  .fan-card {
    --card-w-small: 140px;
    --card-h-small: 180px;
    --card-w-big: 320px;
    --card-h-big: 460px;
  }
  /* Cards 20vh below center on mobile, tight spacing — overlap OK */
  .fan-card {
    --stack-y: calc(20vh + 25vh * (1 - var(--p-appear))) !important;
    --fan-y: calc(20vh + (var(--i) - 2) * (var(--i) - 2) * 2px) !important;
    --fan-x: calc((var(--i) - 2) * 80px) !important;
  }
  .card-fan-pitch {
    top: 18% !important;
    gap: 12px !important;
  }
  .fan-card-inner {
    padding: 20px 18px;
    gap: 10px;
  }
  .fan-card-inner h3 {
    font-size: clamp(20px, 5.5vw, 26px) !important;
  }
  .fan-card-inner .fan-card-desc {
    font-size: 13px !important;
  }
  .card-fan-pitch .mot-pitch-heading-centered {
    font-size: clamp(44px, 11vw, 64px) !important;
  }
  .card-fan-pitch .mot-pitch-sub-centered {
    font-size: 16px !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   COMPREHENSIVE MOBILE OVERRIDES (≤768px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. Fix horizontal overflow / right margin ──
     Use overflow-x: clip instead of hidden — hidden breaks
     position:sticky on descendants; clip does not. */
  html, body {
    overflow-x: clip !important;
  }
  .hero-v2 {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-v2 .hero-v2-sticky {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }
  .intro-sticky {
    width: 100% !important;
  }
  .intro-panel {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* ── 2. Splash page: scale down logo, ensure full coverage ── */
  .logo-variant-terminal {
    font-size: clamp(32px, 10vw, 56px) !important;
    gap: 0.15em !important;
  }
  .logo-variant-ligature {
    font-size: clamp(48px, 18vw, 100px) !important;
  }
  .logo-variant-mark {
    flex-direction: column !important;
    gap: 0.2em !important;
  }
  .logo-variant-mark .mark-badge {
    width: clamp(80px, 20vw, 120px) !important;
    height: clamp(80px, 20vw, 120px) !important;
  }
  .logo-variant-mark .mark-wordmark {
    font-size: clamp(32px, 10vw, 56px) !important;
  }
  .intro-panel-content {
    padding: 0 16px !important;
  }

  /* ── 3. Section 3 cards: more overlap on fan ── */
  .fan-card {
    --fan-x: calc((var(--i) - 2) * 55px) !important;
  }

  /* ── 4. Creator carousel: text above videos, tighter padding ── */
  .creator-carousel-section {
    padding: 48px 0 !important;
  }
  .creator-carousel-layout {
    flex-direction: column-reverse !important;
    gap: var(--sp-3) !important;
  }
  .creator-carousel-text {
    text-align: center !important;
    align-items: center !important;
  }
  .creator-carousel-ring {
    height: clamp(280px, 45vh, 380px) !important;
  }
  .carousel-card {
    width: clamp(140px, 32vw, 200px) !important;
    height: clamp(220px, 48vw, 320px) !important;
  }

  /* ── 5. MOT last section: tighter padding, hide form, show CTA ── */
  .mot-section {
    padding: 48px 16px !important;
  }
  .mot-pitch-form {
    display: none !important;
  }
  /* Reveal form when the reveal class is added via mobile CTA click */
  .mot-pitch-grid.form-open .mot-pitch-form {
    display: flex !important;
  }
  .mot-pitch-grid.form-open .mot-mobile-cta {
    display: none !important;
  }
  .mot-pitch-grid {
    grid-template-columns: 1fr !important;
  }
  .mot-mobile-cta {
    display: inline-flex !important;
    margin-top: var(--sp-3) !important;
  }

  /* ── Hero on mobile: sticky horizontal scroll preserved, KPI rows kept ── */
  .hero-v2 {
    height: 1400px !important;
    min-height: 1400px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-v2 .hero-v2-sticky {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding: 16px !important;
  }
  /* Smaller KPI cards on mobile */
  .hv2-card {
    flex: 0 0 clamp(140px, 42vw, 180px) !important;
  }
  .hv2-card-num {
    font-size: clamp(22px, 5.5vw, 28px) !important;
  }
  .hv2-card-tag {
    font-size: 9px !important;
  }
  .hv2-card-sub {
    font-size: 9px !important;
  }
  .hero-v2-row {
    height: clamp(100px, 15vh, 130px) !important;
  }
  .hero-v2-row-top {
    top: calc(50% - clamp(130px, 20vh, 180px)) !important;
  }
  .hero-v2-row-bottom {
    bottom: calc(50% - clamp(130px, 20vh, 180px)) !important;
  }
  .hero-v2-marquee-wrap {
    overflow: hidden !important;
  }
  .hero-v2-marquee-text {
    font-size: clamp(56px, 18vw, 110px) !important;
  }
  .intro-zoom-spacer {
    height: 40px !important;
  }

  /* ── FAQ: single column ── */
  #faq {
    grid-template-columns: 1fr !important;
    gap: var(--sp-4) !important;
    padding: var(--sp-5) var(--sp-2) !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   MOT REVEAL PAGE — editorial redesign to match site palette
   ══════════════════════════════════════════════════════════════ */

/* Headline number: quieter lime, smaller, not shouty */
.mot-reveal .mot-headline {
  text-align: center !important;
  margin-bottom: var(--sp-4) !important;
}
.mot-reveal .mot-headline .eyebrow {
  color: var(--c-accent) !important;
  margin-bottom: var(--sp-2) !important;
}
.mot-reveal .mot-number {
  font-family: var(--font-mono) !important;
  font-size: clamp(48px, 8vw, 96px) !important;
  font-weight: 700 !important;
  color: var(--c-accent) !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
  margin: var(--sp-2) 0 var(--sp-2) !important;
  font-variant-numeric: tabular-nums !important;
}
.mot-reveal .mot-number-sub {
  font-size: var(--fs-md) !important;
  color: var(--c-muted) !important;
  max-width: 560px !important;
  margin: 0 auto !important;
  line-height: 1.5 !important;
}

/* Loss frame: clean, editorial, no heavy fill */
.mot-reveal .mot-loss-frame {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(255,255,255,0.1) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 0 !important;
  padding: var(--sp-3) 0 !important;
  margin-bottom: var(--sp-4) !important;
}
.mot-reveal .mot-loss-frame p {
  font-size: var(--fs-md) !important;
  color: var(--c-text) !important;
}
.mot-reveal .mot-loss-frame strong {
  color: var(--c-accent) !important;
  font-weight: 700 !important;
}

/* Competitor cards — no heavy card chrome, simple row dividers */
.mot-reveal .mot-competitors {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin-bottom: var(--sp-4) !important;
}
.mot-reveal .mot-comp-card {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  padding: var(--sp-3) 0 !important;
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: var(--sp-3) !important;
}
.mot-reveal .mot-comp-rank {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  color: var(--c-accent) !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  font-weight: 600 !important;
}
.mot-reveal .mot-comp-name {
  font-family: var(--font-mono) !important;
  user-select: none;
  font-size: 15px !important;
  color: var(--c-dim) !important;
  letter-spacing: 0.05em !important;
}
.mot-reveal .mot-comp-gmv {
  font-family: var(--font-mono) !important;
  user-select: none;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--c-dim) !important;
  letter-spacing: 0.05em !important;
  text-align: right;
}
.mot-reveal .mot-comp-meta {
  grid-column: 2 / -1;
  display: flex !important;
  gap: var(--sp-3) !important;
  font-size: 12px !important;
  color: var(--c-dim) !important;
  margin-top: 4px;
}
.mot-reveal .mot-comp-meta span {
  display: inline !important;
  justify-content: initial !important;
}
.mot-reveal .mot-comp-meta strong {
  color: var(--c-muted) !important;
  font-weight: 600 !important;
}

/* Revealed #1 competitor — full details, no gradient background */
.mot-reveal .mot-comp-revealed {
  background: transparent !important;
  border: none !important;
  border-top: 1px solid rgba(200,255,31,0.25) !important;
  border-bottom: 1px solid rgba(200,255,31,0.25) !important;
  border-radius: 0 !important;
  grid-template-columns: auto auto 1fr auto !important;
  padding: var(--sp-3) 0 !important;
  display: grid !important;
  gap: var(--sp-3) !important;
  align-items: center !important;
}
.mot-reveal .mot-comp-img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 8px !important;
  object-fit: cover !important;
}
.mot-reveal .mot-comp-name-revealed {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--c-text) !important;
  line-height: 1.3 !important;
}
.mot-reveal .mot-comp-shop-revealed {
  font-size: 13px !important;
  color: var(--c-muted) !important;
  margin-top: 2px !important;
}
.mot-reveal .mot-comp-gmv-revealed {
  font-family: var(--font-mono) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--c-accent) !important;
  letter-spacing: -0.01em !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}

/* Stats row — editorial numbers, no card chrome */
.mot-reveal .mot-stats-row {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 !important;
  margin-bottom: var(--sp-4) !important;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: var(--sp-3) 0;
}
.mot-reveal .mot-stat {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 0 !important;
  padding: var(--sp-2) 0 !important;
  text-align: center !important;
}
.mot-reveal .mot-stat:last-child {
  border-right: none !important;
}
.mot-reveal .mot-stat-value {
  font-family: var(--font-mono) !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  font-weight: 700 !important;
  color: var(--c-text) !important;
  letter-spacing: -0.02em !important;
  margin-bottom: var(--sp-1) !important;
  font-variant-numeric: tabular-nums !important;
}
.mot-reveal .mot-stat-label {
  font-family: var(--font-sans) !important;
  font-size: 11px !important;
  color: var(--c-muted) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Locked cards — editorial, no heavy gradient overlay */
.mot-reveal .mot-locked-card {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.1) !important;
  border-radius: 0 !important;
  padding: var(--sp-3) !important;
  margin-bottom: var(--sp-2) !important;
  text-align: left !important;
}
.mot-reveal .mot-locked-card::after {
  display: none !important;
}
.mot-reveal .mot-locked-icon {
  font-size: 18px !important;
  margin-bottom: var(--sp-1) !important;
  color: var(--c-accent) !important;
}
.mot-reveal .mot-locked-title {
  font-size: 15px !important;
  color: var(--c-text) !important;
  line-height: 1.4 !important;
  margin-bottom: var(--sp-1) !important;
  font-weight: 500 !important;
}
.mot-reveal .mot-locked-title strong {
  color: var(--c-accent) !important;
  font-weight: 700 !important;
}
.mot-reveal .mot-locked-sub {
  font-size: 13px !important;
  color: var(--c-muted) !important;
  margin: 0 !important;
}
.mot-reveal .mot-plan-step {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 0 !important;
  padding: var(--sp-2) 0 !important;
  font-size: 13px !important;
}
.mot-reveal .mot-plan-step:last-child {
  border-bottom: none !important;
}

/* Book CTA — outlined square, no lime glow */
.mot-reveal .mot-cta-sticky {
  padding: var(--sp-4) 0 var(--sp-2) !important;
  text-align: center;
  position: static !important;
}
.mot-reveal .mot-book-btn {
  background: transparent !important;
  color: var(--c-accent) !important;
  border: 1.5px solid var(--c-accent) !important;
  border-radius: 0 !important;
  padding: 14px 28px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
}
.mot-reveal .mot-book-btn:hover {
  background: var(--c-accent) !important;
  color: var(--c-accent-ink) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Teaser — clean confirmation */
.mot-reveal .mot-teaser-inner {
  background: transparent !important;
  border: 1px solid rgba(200,255,31,0.25) !important;
  border-radius: 0 !important;
  padding: var(--sp-3) !important;
}
.mot-reveal .mot-teaser-badge {
  background: transparent !important;
  color: var(--c-accent) !important;
  border: 1.5px solid var(--c-accent) !important;
  border-radius: 0 !important;
  padding: 4px 12px !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
}
.mot-reveal .mot-teaser-title {
  font-size: 15px !important;
  color: var(--c-text) !important;
  font-weight: 600 !important;
  margin-top: var(--sp-2) !important;
}
.mot-reveal .mot-teaser-sub {
  font-size: 13px !important;
  color: var(--c-muted) !important;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .mot-reveal .mot-stats-row {
    grid-template-columns: 1fr !important;
    gap: var(--sp-2) !important;
  }
  .mot-reveal .mot-stat {
    border-right: none !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    padding: var(--sp-2) 0 !important;
  }
  .mot-reveal .mot-stat:last-child {
    border-bottom: none !important;
  }
  .mot-reveal .mot-comp-revealed {
    grid-template-columns: auto 1fr !important;
  }
  .mot-reveal .mot-comp-img {
    grid-row: 1 / span 3 !important;
  }
  .mot-reveal .mot-comp-gmv-revealed {
    grid-column: 1 / -1 !important;
    text-align: left !important;
    font-size: 24px !important;
  }
}