/* ============ LOCAL FONTS ============ */
/* SF Pro Rounded — body / UI / buttons / chips.
   Weights 100/200/300 (Ultralight/Thin/Light) removed — grep-verified
   they are never applied via any `font-weight` rule. Active weight
   range is now 400 (Regular) through 900 (Black). */
@font-face {
  font-family: 'SF Pro Rounded';
  src: url('assets/SF Pro Font Family/SF-Pro-Rounded-Regular.otf') format('opentype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Rounded';
  src: url('assets/SF Pro Font Family/SF-Pro-Rounded-Medium.otf') format('opentype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Rounded';
  src: url('assets/SF Pro Font Family/SF-Pro-Rounded-Semibold.otf') format('opentype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Rounded';
  src: url('assets/SF Pro Font Family/SF-Pro-Rounded-Bold.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Rounded';
  src: url('assets/SF Pro Font Family/SF-Pro-Rounded-Heavy.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'SF Pro Rounded';
  src: url('assets/SF Pro Font Family/SF-Pro-Rounded-Black.otf') format('opentype');
  font-weight: 900; font-style: normal; font-display: swap;
}
/* Futura LT Pro Bold Condensed — large bold display headlines only. */
@font-face {
  font-family: 'Futura LT';
  src: url('assets/Futura LT Font Family/futura-lt-pro-bold-condensed.otf') format('opentype');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ============ TOKENS ============ */
:root{
  --red:        #F82623;
  --red-deep:   #C7220F;
  --red-soft:   rgba(240,46,24,.12);
  --cream:      #EEE7DF;
  --cream-2:    #E6DBC8;
  --ink:        #1B1413;
  /* Unified brown — every brown surface, brown text, and brown button
     across both B2B and D2C reads as the same shade per spec. */
  --ink-2:      #2E2220;
  --ink-3:      #2E2220;
  --ink-brown:  #2E2220;
  --paper:      #ffffff;
  --muted:      #6E5F5C;
  --muted-2:    #A6968F;
  --blue:       #5BA4F4;
  --purple:     #C9A6F0;
  --green:      #5FD09B;
  --orange:     #F58E2F;

  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 40px;

  --pad-x: clamp(20px, 3vw, 56px);
  --hero-pad-x: clamp(12px, 1.6vw, 28px);  /* hero is wider — cards nearly fill viewport */
  --maxw: 1320px;
  --hero-maxw: 1600px;

  /* Headline font — Futura LT Pro Bold Condensed for the LARGEST display
     headlines only (h1, h2 hero/section titles). */
  --headline-font: 'Futura LT', 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  /* Default "display" font for all the bolded UI elements (buttons, chips,
     small headings, labels). SF Pro Rounded reads cleanly at any size and
     matches the rounded geometric look of the Figma mockups. */
  --display-font: 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Body / paragraph copy. Same family — different weights via font-weight. */
  --body-font:    'SF Pro Rounded', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  /* Legacy alias (kept for backwards compat in any rule that still calls it). */
  --ui-font:      'SF Pro Rounded', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{ scroll-behavior:smooth; overflow-x: clip; }
body{
  margin: 0;
  font-family: var(--body-font);
  color: var(--ink);
  /* Uniform cream — no top radial highlight, so the header (also cream) has
     no visible seam where it meets the page. */
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: -.005em;
  /* overflow-x: clip (not hidden) — `hidden` creates a body-level scroll
     container which breaks `position: sticky` on descendants. */
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; cursor:pointer; border:0; background:transparent; color:inherit;}

/* Accessible focus outlines: tasteful + visible on dark and light bg */
:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible{ outline-offset: 4px; }
.on-dark :focus-visible,
.solution :focus-visible,
.audience :focus-visible,
.pitch :focus-visible,
.compare :focus-visible,
.cta :focus-visible,
.footer :focus-visible{ outline-color: #f5e9d2; }
ul,ol{margin:0; padding:0; list-style:none}
small{font-size:.65em; font-weight:600}

/* ============ TYPOGRAPHY ============ */
/* Big display headlines — Futura LT Pro Bold Condensed. Includes .display
   class + all the explicit headline selectors used across the site. */
.display,
.hero-title,
.problem-heading,
.audience-heading,
.banner-title,
.solution-inner h2,
.cta-inner h2,
.how-inner h2,
.feed-inner h2,
.pitch-inner h2,
.compare h2,
.faq-heading,
.d2c-hero-title,
.d2c-band-title,
.d2c-prizes-title{
  font-family: var(--headline-font);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: .95;
  margin: 0;
}

.display-xxl{ font-size:clamp(40px, 6.2vw, 92px); }
.display-xl { font-size:clamp(36px, 5vw, 76px);  }
.display-lg { font-size:clamp(32px, 4.2vw, 58px);  }
.display-md { font-size:clamp(26px, 3vw, 44px);  letter-spacing:-.005em;}

/* Section headlines use their per-section font-sizes (defined where each
   section lives). The unified 128px rule was reverted. */

.on-red   { color:var(--cream); }
.on-dark  {
  color: var(--cream);
  text-shadow: 0 1px 0 rgba(0,0,0,.10);
}
.lead     {
  font-size: clamp(16px, 1.2vw, 19px);
  color: #3a3232;
  max-width: 60ch;
  line-height: 1.55;
  letter-spacing: -.005em;
}
.lead-light{
  font-size: clamp(16px, 1.2vw, 19px);
  color: #dccdb6;
  max-width: 60ch;
  line-height: 1.55;
  letter-spacing: -.005em;
  opacity: .85;
}

.center { text-align:center; margin-left:auto; margin-right:auto; }

/* ============ SCROLL-REVEAL UTILITY ============ */
/* Applied to section heading + chip + intro paragraph via JS IO.
   `will-change` is scoped to the PRE-reveal state only (`:not(.is-in)`)
   — once the IntersectionObserver adds `.is-in`, the element finishes
   its 0.8s transition and stays static. Keeping will-change on a
   static element wastes GPU memory across the page (many reveal
   targets). Removing it once `.is-in` is added releases the layer. */
.reveal-up{ opacity:0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal-up:not(.is-in){ will-change: opacity, transform; }
.reveal-up.is-in{ opacity:1; transform: translateY(0); }
/* Override .btn's own transition so reveal-up still fades opacity/transform smoothly. */
.btn.reveal-up{
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.7,.2,1),
    background .25s, color .25s, border-color .25s, box-shadow .3s;
}
@media (prefers-reduced-motion: reduce){
  .reveal-up{ opacity:1; transform:none; transition:none; }
}

/* ============ BUTTONS ============ */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -.005em;
  /* Reverted to the previous (slightly thicker) sizing — all buttons share
     this size site-wide. ~44px tall at standard line-height. */
  padding: 14px 28px;
  border-radius: 999px;
  /* Stack transitions: bg/color swap on hover, plus the quick flip animation. */
  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .3s ease,
    transform .22s cubic-bezier(.2,.7,.2,1);
  white-space: nowrap;
  position: relative;
  isolation: isolate;
  perspective: 800px;
  transform-style: preserve-3d;
  cursor: pointer;
}
/* Hover: subtle button lift. The text itself does an upward cycle — the
   current label slides up out of view while an identical duplicate rises
   from below into the exact same spot, creating a continuous "ticker-tape"
   reveal. The container masks both labels so only one is visible at a time. */
.btn:hover{
  transform: translateY(-2px);
}
.btn:active{ transform: translateY(0) scale(.99); transition-duration:.05s; }

.btn-text{
  /* Masking container — auto-injected by JS. Height = 1 label line. */
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.2;
  /* No box of its own — sized purely by content (the inner label). */
}
.btn-text__a,
.btn-text__b{
  display: block;
  white-space: nowrap;
  /* Same easing on both labels so they move in perfect sync. */
  transition: transform .42s cubic-bezier(.2, .8, .2, 1);
}
/* The duplicate (b) is parked directly below (a) — outside the mask. */
.btn-text__b{
  position: absolute;
  left: 0; top: 100%;
  width: 100%;
}
/* On hover: both labels translate up by exactly one label height.
   `a` rises off-screen (out of mask); `b` rises into `a`'s previous slot. */
.btn:hover .btn-text__a,
.btn:hover .btn-text__b{
  transform: translateY(-100%);
}
@media (prefers-reduced-motion: reduce){
  .btn:hover .btn-text__a,
  .btn:hover .btn-text__b{ transform: none; }
}
.btn-pill{ border-radius:999px; }

/* Each color variant gets a hover "active state" that swaps between Robin red
   and white per spec — red→white-with-red-text, light→red-with-white-text, etc. */
.btn-light{
  background: linear-gradient(180deg, #fff 0%, #f4e8d4 100%);
  color: var(--ink);
  box-shadow:
    0 6px 16px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
}
.btn-light:hover{
  background: var(--red);
  color: #fff;
  box-shadow:
    0 14px 28px rgba(240,46,24,.25),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-dark{ background:#1d1311; color:var(--cream); }
.btn-dark:hover{
  background: #fff;
  color: var(--red);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}
.btn-darkred{
  background: linear-gradient(180deg, #8a1d0d 0%, #74160a 100%);
  color: var(--cream);
  box-shadow:
    0 4px 12px rgba(122,22,10,.35),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-darkred:hover{
  background: #fff;
  color: var(--red);
  box-shadow:
    0 14px 24px rgba(122,22,10,.30),
    inset 0 1px 0 rgba(255,255,255,1);
}
.btn-darkbrown{
  background: linear-gradient(180deg, #3a2624 0%, #261714 100%);
  color: var(--cream);
  border: 1px solid #5a3f3c;
  box-shadow:
    0 4px 12px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.06);
}
.btn-darkbrown:hover{
  background: var(--red);
  color: #fff;
  border-color: var(--red);
  box-shadow:
    0 14px 24px rgba(240,46,24,.30),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-red{
  background: linear-gradient(180deg, #F82623 0%, #DC1F0E 100%);
  color: #fff;
  box-shadow:
    0 6px 16px rgba(240,46,24,.28),
    inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-red:hover{
  /* Flip to white bg + red text — the active-state swap. */
  background: #fff;
  color: var(--red);
  box-shadow:
    0 14px 28px rgba(240,46,24,.28),
    inset 0 1px 0 rgba(255,255,255,1);
}

/* ============ CHIP ============ */
.chip{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--display-font);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  letter-spacing: -.005em;
  transition: background .25s ease, color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.chip-light{
  background: #fff;
  color: var(--ink);
  box-shadow:
    0 4px 12px rgba(0,0,0,.06),
    inset 0 1px 0 rgba(255,255,255,.9);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
}
.chip-dark{
  background: linear-gradient(180deg, #3f2e2b 0%, #342524 100%);
  color: #f5e9d2;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 2px 6px rgba(0,0,0,.20);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
}
.chip-orange{
  background: linear-gradient(180deg, #FF9F45 0%, var(--orange) 100%);
  color: #fff;
  box-shadow:
    0 4px 10px rgba(245,142,47,.30),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.chip-bullet{
  font-weight: 800;
  margin-right: 2px;
  opacity: .8;
}

/* ============ NUM-ROLL PULSE ON FINISH ============ */
.num-roll{ display: inline-block; transform-origin: center; }
.num-roll--finished{
  animation: num-finish .6s cubic-bezier(.2,.7,.2,1);
}
@keyframes num-finish{
  0%   { transform: scale(1); }
  40%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce){
  .num-roll--finished{ animation: none; }
}

/* ============ SCROLL-TO-TOP BUTTON ============ */
.scroll-top{
  position: fixed;
  right: clamp(20px, 3vw, 40px);
  bottom: clamp(20px, 3vw, 40px);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(180deg, #F82623 0%, #DC1F0E 100%);
  color: #fff;
  display: grid; place-items: center;
  z-index: 50;
  box-shadow:
    0 10px 28px rgba(240,46,24,.40),
    inset 0 1px 0 rgba(255,255,255,.20);
  opacity: 0;
  transform: translateY(24px) scale(.85);
  pointer-events: none;
  transition:
    opacity .4s cubic-bezier(.2,.7,.2,1),
    transform .4s cubic-bezier(.2,.7,.2,1),
    background .25s ease,
    box-shadow .25s ease;
}
.scroll-top.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.scroll-top:hover{
  background: var(--red-deep);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 16px 36px rgba(240,46,24,.45);
}
.scroll-top:active{ transform: scale(.95); }

/* ============ SKIP-ANIMATION BUTTON ============
   Sits immediately LEFT of .scroll-top in the bottom-right corner.
   Visible only while the swipe-to-enter band sequence is frozen
   (body.d2c-band-prelock OR body.d2c-band-running). Click calls
   window.__d2cBandSkip() to exit the swipe trap. */
.scroll-skip{
  position: fixed;
  /* Positioned LEFT of the scroll-top button. scroll-top is at
     right:clamp(20,3vw,40) with width:52 — skip sits ~12px to its
     left, with its OWN width auto. */
  right: calc(clamp(20px, 3vw, 40px) + 52px + 12px);
  bottom: clamp(20px, 3vw, 40px);
  height: 52px;
  padding: 0 18px;
  border-radius: 999px;
  background: var(--ink, #2E2220);
  color: var(--cream, #fff);
  border: 0;
  font-family: var(--display-font, inherit);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  cursor: pointer;
  z-index: 50;
  box-shadow:
    0 10px 28px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.10);
  opacity: 0;
  transform: translateY(24px) scale(.85);
  pointer-events: none;
  transition:
    opacity .35s cubic-bezier(.2,.7,.2,1),
    transform .35s cubic-bezier(.2,.7,.2,1),
    background .25s ease;
}
.scroll-skip.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.scroll-skip:hover{ background: var(--red, #F82623); }
.scroll-skip:active{ transform: scale(.95); }

/* ============ SCROLL PROGRESS BAR ============ */
.scroll-progress{
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 4px;
  z-index: 100;
  background: rgba(0,0,0,.05);
  pointer-events: none;
}
.scroll-progress__bar{
  height: 100%;
  background: linear-gradient(90deg, var(--red) 0%, #FF6A4E 50%, var(--red) 100%);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  box-shadow: 0 0 12px rgba(240,46,24,.55);
}

/* ============ HEADER (Figma "Subtract" shape — shoulders at corners) ============ */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:60;
  height: 112px;
  /* Smoother + slower hide/show on scroll — gentle ease-in-out, no overshoot. */
  transition: transform .65s cubic-bezier(.45, 0, .25, 1);
  will-change: transform;
  pointer-events:none;
}
/* Backdrop blur removed per spec — the cream silhouette already blends with
   the page bg, no visible bar/blur band underneath the nav. */
.site-header .header-inner,
.site-header .header-shape{ pointer-events:auto; }

.header-shape{
  position:absolute;
  top:0; left:0;
  width:100%;
  height: calc(100% + 14px);
  color: var(--cream);
  /* No filter, no shadow, no border — the SVG silhouette fills with the
     exact same --cream (#EEE7DF) as the body bg, so where the SVG ends
     and the page bg begins there's zero visible boundary. */
  filter: none;
  display: block;
}
.site-header.is-scrolled .header-shape{
  filter: none;
}

.site-header.is-hidden{ transform: translateY(-110%); }

/* While the swipe band's pin-stage sequence (typewriter → swipe → auto-
   sheet to Section 3) is running, the per-frame scroll-snap-back fires
   micro scroll-up events that would otherwise toggle the header back
   into view mid-animation. This pin keeps the header tucked away for
   the duration of the sequence, and the JS removes the body class once
   the auto-route to Section 3 completes. */
body.d2c-band-running .site-header{
  transform: translateY(-110%) !important;
  opacity: 0;
  pointer-events: none;
}

.header-inner{
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  /* Padding shifted: 14/34 (was 24/24) pushes the inner content's
     vertical center up by 10px without changing the header height. */
  padding: 14px clamp(28px, 4vw, 64px) 34px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 48px;
  height: 112px;
}
.logo{
  display: inline-flex; align-items: center;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.logo:hover{ transform: rotate(-4deg) scale(1.08); }
.logo:active{ transform: scale(.96); }
.logo-mark{
  /* Slightly smaller per spec. */
  height: 26px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  display: block;
  transition: filter .3s ease;
}
.logo:hover .logo-mark{ filter: drop-shadow(0 4px 8px rgba(240,46,24,.25)); }
.nav-links{
  display: flex; gap: 40px;
  font-family: var(--display-font);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink);
}
.nav-links a{
  position:relative;
  transition: color .2s ease;
  padding: 4px 2px;
}
.nav-links a::after{
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: -6px;
  height: 3px;
  background: var(--red);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
}
.nav-links a:hover{ color:var(--red); }
.nav-links a:hover::after{ transform: scaleX(1); }
.header-right{ display:flex; align-items:center; gap:12px; }
.icon-btn{
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ffffff 0%, #f5ead5 100%);
  display: grid; place-items: center;
  color: #111;
  box-shadow:
    0 4px 12px rgba(0,0,0,.08),
    inset 0 1px 0 rgba(255,255,255,1);
  transition:
    transform .3s cubic-bezier(.2,.7,.2,1),
    box-shadow .3s ease,
    background .25s ease;
}
.icon-btn:hover{
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  background:#fff;
}
.icon-btn:active{ transform: translateY(0) scale(.95); }
.icon-btn svg{ width: 18px; height: 18px; transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.icon-btn:hover svg{ transform: scale(1.15) rotate(-5deg); }
.site-header .btn{
  position: relative;
  overflow: visible;
}
/* Confetti on hover — applies to ANY button tagged with data-confetti
   (campaign-initiate buttons across the site). Multi-shadow dots burst
   outward from the button on hover via two stacked pseudo-element layers. */
.btn[data-confetti]{
  position: relative;
  overflow: visible;
}
.btn[data-confetti]::before,
.btn[data-confetti]::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  opacity: 0;
}
.btn[data-confetti]:hover::before{
  animation: header-confetti-a .9s cubic-bezier(.2,.7,.4,1) forwards;
}
.btn[data-confetti]:hover::after{
  animation: header-confetti-b .9s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes header-confetti-a{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    box-shadow:
      0 0 0 0 #F02E18,
      0 0 0 0 #FFC744,
      0 0 0 0 #6AD89A,
      0 0 0 0 #C9A6F0,
      0 0 0 0 #5BA4F4,
      0 0 0 0 #F58E2F;
  }
  20%{ opacity: 1; }
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      -64px -34px 0 0 #F02E18,
      -44px -52px 0 0 #FFC744,
       -20px -60px 0 0 #6AD89A,
        18px -58px 0 0 #C9A6F0,
        46px -48px 0 0 #5BA4F4,
        66px -32px 0 0 #F58E2F;
  }
}
@keyframes header-confetti-b{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    box-shadow:
      0 0 0 0 #FF6A4E,
      0 0 0 0 #FFD731,
      0 0 0 0 #80E2B3,
      0 0 0 0 #DEC0FB,
      0 0 0 0 #7AB9FF,
      0 0 0 0 #FFB06A;
  }
  25%{ opacity: 1; }
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      -58px 32px 0 0 #FF6A4E,
      -36px 50px 0 0 #FFD731,
       -8px 58px 0 0 #80E2B3,
        22px 56px 0 0 #DEC0FB,
        48px 44px 0 0 #7AB9FF,
        62px 28px 0 0 #FFB06A;
  }
}
@media (prefers-reduced-motion: reduce){
  .btn[data-confetti]:hover::before,
  .btn[data-confetti]:hover::after{ animation: none; }
}

/* Emoji burst confetti — used by buttons with data-confetti-icon="people"
   or data-confetti-icon="megaphone". JS injects .emoji-particle children
   on hover; each animates outward to a randomized angle/distance. */
.btn[data-confetti-icon]{
  position: relative;
  overflow: visible;
}
.emoji-particle{
  position: absolute;
  top: 50%; left: 50%;
  font-size: 20px;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  animation: emoji-burst .95s cubic-bezier(.2, .7, .4, 1) forwards;
  transform-origin: center;
}
@keyframes emoji-burst{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(.5) rotate(0deg);
  }
  18%{ opacity: 1; }
  100%{
    opacity: 0;
    transform:
      translate(calc(-50% + var(--x, 0px)), calc(-50% + var(--y, 0px)))
      scale(1)
      rotate(var(--r, 0deg));
  }
}
@media (prefers-reduced-motion: reduce){
  .emoji-particle{ animation: none; opacity: 0; }
}

/* ============ HERO ============ */
.hero{
  padding: 104px var(--hero-pad-x) 32px;
  max-width: var(--hero-maxw);
  margin: 0 auto;
}
/* Cards should nearly fill the viewport */
.hero-grid{
  display: grid;
  grid-template-columns: 56fr 42fr;
  gap: 18px;
  align-items: stretch;
  min-height: calc(100vh - 160px);
  max-height: 920px;
}
/* Mobile-only image inside the red hero card — hidden at desktop
   (the brown .hero-visual sibling on the right handles that role).
   Mobile @media at the bottom of this file reveals it + hides
   .hero-visual. */
.hero-card-mobile-img{
  display: none;
}
.hero-card{
  background: var(--red);
  color: #fff;
  border-radius: 40px;
  padding: clamp(44px, 5.4vw, 88px);
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  /* Shadow biased downward — no upward bleed creating a line near the header. */
  box-shadow:
    0 16px 28px -10px rgba(240,46,24,.20),
    inset 0 1px 0 rgba(255,255,255,.12);
  animation: hero-card-in .9s cubic-bezier(.2,.7,.2,1) both;
}
.hero-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.10), transparent 50%),
    radial-gradient(ellipse at 20% 100%, rgba(0,0,0,.08), transparent 50%);
  pointer-events: none;
  border-radius: inherit;
}
@keyframes hero-card-in{
  from { opacity:0; transform: translateY(24px) scale(.985); }
  to   { opacity:1; transform: translateY(0) scale(1); }
}

.hero-hand{
  position:absolute;
  /* Lifted higher so only the bottom of the hand is grazed by the top of
     "REACH" — the rest of the hand floats above the headline. */
  width: clamp(80px, 8.5%, 120px);
  left: clamp(36px, 5vw, 80px);
  bottom: clamp(400px, 62%, 540px);
  top: auto;
  pointer-events:none;
  z-index:1;
  user-select:none;
  animation: hero-hand-wave 2.4s ease-in-out 1s 2 alternate;
  transform-origin: 75% 85%;
}
@keyframes hero-hand-wave{
  0%, 100% { transform: rotate(-2deg); }
  50%     { transform: rotate(8deg); }
}
@media (prefers-reduced-motion: reduce){
  .hero-hand{ animation: none; }
}
.hero-hand-fade{
  position:absolute;
  width: clamp(100px, 10%, 140px);
  height: clamp(60px, 6%, 90px);
  left: clamp(36px, 5vw, 80px);
  /* Lifted to match the hand's new higher position — fade sits just under
     the bottom of the hand so it melts into the red right where "REACH" begins. */
  bottom: clamp(385px, 60%, 525px);
  top: auto;
  pointer-events:none;
  z-index:2;
  background: linear-gradient(180deg, rgba(248,38,35,0) 0%, var(--red) 88%);
}

.hero-content{
  position: relative;
  z-index: 3;
  max-width: 640px;
}
.hero-title  { animation: hero-text-in .8s .28s cubic-bezier(.2,.7,.2,1) both; }
.hero-sub    { animation: hero-text-in .8s .42s cubic-bezier(.2,.7,.2,1) both; }
.hero-ctas   { animation: hero-text-in .8s .56s cubic-bezier(.2,.7,.2,1) both; }
@keyframes hero-text-in{
  from { opacity:0; transform: translateY(14px); }
  to   { opacity:1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .hero-card, .hero-visual, .hero-title, .hero-sub, .hero-ctas{ animation: none; }
}
.hero-title{
  font-family: var(--headline-font);
  font-weight: 700;
  color: #fff;
  margin: 0;
  font-size: clamp(32px, 4.3vw, 76px);
  line-height: .92;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-shadow: 0 2px 0 rgba(0,0,0,.06);
}
@media (max-width: 720px){
  .hero-title{ font-size: clamp(30px, 8.5vw, 50px); }
}
.hero-sub{
  margin-top: 32px;
  max-width: 50ch;
  color: rgba(255,255,255,.95);
  font-family: var(--display-font);
  font-weight: 600;
  font-size: clamp(16px, 1.3vw, 21px);
  line-height: 1.55;
  text-shadow: 0 1px 0 rgba(0,0,0,.05);
  letter-spacing: -.005em;
}
.hero-ctas{
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 40px;
}
/* Hero buttons inherit the universal .btn size — same height as the
   header CTA. (Previous overrides removed per spec.) */
.hero-ctas .btn-light{
  box-shadow:
    0 8px 20px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.4);
}
.hero-ctas .btn-light:hover{
  box-shadow:
    0 16px 32px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.5);
}

.hero-visual{
  background: linear-gradient(180deg, #2a1f1d 0%, #1d1311 100%);
  border-radius: 40px;
  overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
  position: relative;
  animation: hero-card-in 1.1s .12s cubic-bezier(.2,.7,.2,1) both;
  /* Shadow direction biased DOWNWARD (positive y-offset > blur radius) so
     none of the diffused darkness bleeds upward toward the header. The
     previous wide blur was creating a faint horizontal line at the top edge. */
  box-shadow:
    0 16px 28px -10px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.hero-visual::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.06), transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(248,38,35,.05), transparent 50%);
  pointer-events:none;
  border-radius: inherit;
}
.hero-visual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center top;
  animation: hero-phone-float 5s ease-in-out infinite;
}
@keyframes hero-phone-float{
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce){
  .hero-visual img{ animation: none; }
}

/* Trusted by */
.trusted{
  text-align: center;
  margin-top: 64px;
  margin-bottom: 16px;
  position: relative;
}
.trusted::before{
  content: "";
  display: block;
  width: 32px;
  height: 2px;
  background: rgba(58, 46, 43, .3);
  border-radius: 2px;
  margin: 0 auto 18px;
}
.trusted-label{
  font-family: var(--display-font);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -.005em;
  color: #3a2e2b;
  margin: 0 0 24px;
}
.marquee{
  position: relative;
  /* Carousel occupies the middle 50% of the section (1/4 → 3/4). */
  width: 50%;
  margin: 0 auto;
  overflow: hidden;
  /* Tight mask — fade is gradual all the way to the centre, and only the
     middle ~10% is fully opaque (≈ 2 brands at 100% at any time). */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%,
    #000 45%,
    #000 55%,
    transparent 100%);
  mask-image: linear-gradient(90deg,
    transparent 0%,
    #000 45%,
    #000 55%,
    transparent 100%);
}
.marquee-track{
  display: flex;
  width: max-content;
  align-items: center;
  animation: marquee-scroll 36s linear infinite;
  will-change: transform;
}
/* Single-image marquee — two identical <img class="marquee-img"> in the
   track. Each image fills its natural width based on the configured
   render height. translateX(-50%) on the track shifts by exactly one
   image width, landing pixel-perfectly on the duplicate — seamless. */
.marquee-img{
  display: block;
  flex: 0 0 auto;
  /* Scaled down to a small, "cute" size — about half of the previous height. */
  height: clamp(28px, 2.6vw, 44px);
  width: auto;
  user-select: none;
  pointer-events: none;
  /* 50px breathing room between the end of one logo strip and the start of
     the next copy. Applied to EVERY image so the track period stays
     (image_width + 50) — translateX(-50%) still lands exactly on the
     duplicate, keeping the loop seamless. */
  margin-right: 50px;
}

@keyframes marquee-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Carousel keeps drifting on hover — do not pause. */
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}

/* Scroll-hint line removed per spec — clean handoff straight into Stats. */

/* ============ STATS (Section 2) ============ */
.stats{
  /* Tight padding all around — no extra whitespace between the Trusted
     carousel above and the Problem section below. */
  padding: 36px var(--pad-x) 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  position: relative;
  overflow: visible;
}
.stats-banner{
  position: relative;
  background: linear-gradient(135deg, #F82623 0%, #DC1F0E 100%);
  border-radius: 40px;
  /* Per Figma proportions: text 214.2 / container 508 = 0.42. With our text
     content rendering at ~152px, container = 152/0.42 ≈ 362px → padding
     each side ≈ 105px. Clamp scales down on narrow viewports. */
  padding: clamp(64px, 8vw, 108px) clamp(60px, 9vw, 150px);
  text-align: center;
  color: #fff;
  isolation: isolate;
  overflow: visible;
  box-shadow:
    0 36px 96px rgba(199,34,15,.24),
    0 4px 0 rgba(199,34,15,.10),
    inset 0 1px 0 rgba(255,255,255,.12);
}
/* Layer 1 (replaced) — pattern is now inline SVGs via .stats-pattern. */
.stats-banner::before{ content: none; }
/* Inner highlight overlay for depth */
.stats-banner::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.10), transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(0,0,0,.08), transparent 60%);
  pointer-events: none;
  z-index: 1;
}

/* Inline wavy squiggle illustration — sits behind the banner text matching
   the Figma reference. */
.stats-squiggles{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  /* Slow horizontal drift so the pattern feels alive without being noisy. */
  animation: stats-pattern-drift 80s linear infinite;
}
@media (prefers-reduced-motion: reduce){
  .stats-squiggles{ animation: none; }
}

/* Squiggle pattern composed of multiple positioned/rotated line SVGs (no text, no coins). */
.stats-pattern{
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  animation: stats-pattern-drift 60s linear infinite;
}
@keyframes stats-pattern-drift{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-2%); }
}
@media (prefers-reduced-motion: reduce){
  .stats-pattern{ animation: none; }
}
.stats-pattern .pat{
  position:absolute;
  width: 56%;
  height: auto;
  opacity: 1;              /* SVGs use fill-opacity 0.15 internally */
  filter: brightness(1.6) saturate(0);
  transform-origin: center;
  mix-blend-mode: screen;  /* lift the lighter strokes off the red bg */
}
.pat-a{ top:-30%; left:38%; transform: rotate(79deg); }
.pat-b{ top: 30%; left:-15%; transform: rotate(-145deg); width: 38%; }
.pat-c{ top:-55%; left: 6%;  transform: rotate(-57deg); width: 56%; }
.pat-d{ top: 38%; left: 50%; transform: rotate(-67deg); width: 50%; }
.pat-e{ top: 20%; left:-25%; transform: rotate(-110deg); width: 44%; }
.pat-f{ top:-30%; right: -8%; transform: rotate(154deg); width: 28%; }
/* Decorative bg-art removed — pattern image carries this now */
.stats-bg-art{ display:none; }

.banner-title{
  position: relative;
  z-index: 2;
  color: #fff;
  line-height: 1.08;
  font-size: clamp(28px, 3.4vw, 54px);
  font-family: var(--headline-font);
  font-weight: 700;
  letter-spacing: -.018em;
  max-width: 22ch;
  margin: 0 auto;
  text-shadow: 0 2px 0 rgba(0,0,0,.08);
}

/* Mobile-only line breaks — used in headlines that want a tighter
   4-line cascade on phones but flow naturally on desktop. By default
   the <br class="br-mobile"> is hidden so desktop reads as a single
   line wrap. Mobile rule below promotes it to a real line break. */
.br-mobile{ display: none; }
.banner-sub{
  position: relative;
  z-index: 2;
  margin: 32px auto 0;
  max-width: 50ch;
  color: #fbe3dc;
  font-family: var(--display-font);
  font-weight: 600;
  font-size: clamp(16px, 1.4vw, 22px);
  letter-spacing: -.005em;
  line-height: 1.45;
}

/* Coin logos (real Figma PNGs) — large, layered, overlapping container edges */
.float-logo{
  position:absolute;
  height:auto;
  z-index:3;
  filter: drop-shadow(0 28px 50px rgba(0,0,0,.35)) drop-shadow(0 0 1px rgba(0,0,0,.1));
  user-select:none;
  pointer-events:none;
}
/* Sizing order per spec: Meta > Google > TikTok. */
/* Meta: largest, partially overlapping the TOP-LEFT edge */
.float-meta {
  width: clamp(140px, 16vw, 240px);
  left: -4%;
  top: -18%;
  transform: rotate(-12deg);
}
/* Google: size set to 2/3 of the way from old (220) → TikTok (180) = ~190.
   Keeps Meta > Google > TikTok order. */
.float-google {
  width: clamp(110px, 12vw, 190px);
  right: 4%;
  top: -10%;
  transform: rotate(10deg);
}
/* TikTok: smallest of the three — slightly shrunk from before. */
.float-tiktok {
  width: clamp(110px, 11.5vw, 180px);
  right: 10%;
  bottom: -18%;
  transform: rotate(-8deg);
}

/* Trend arrows used inline in the banner & stats */
.word-with-arrow{
  position:relative;
  display:inline-block;
}
.word-spacer{
  display:inline-block;
  width: clamp(28px, 3.2vw, 48px);
}
.trend-arrow{
  width: clamp(24px, 2.6vw, 38px);
  height: clamp(24px, 2.6vw, 38px);
  vertical-align:middle;
  color:#fff;
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.stat-num .trend-arrow{
  position: static;
  transform: none;
  margin-left: 10px;
  color: var(--ink);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.06));
}
.trend-arrow.sm{ width: 40px; height: 40px; margin-left: 6px; }

.stats-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 64px;
  margin-top: 88px;
  padding: 0 clamp(10px, 3vw, 40px);
}
.stat{
  text-align: center;
  position: relative;
  padding: 12px 0;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  cursor: default;
}
.stat::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%) scaleX(0);
  width: 28px;
  height: 2px;
  background: var(--red);
  border-radius: 2px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.stat:hover{ transform: translateY(-6px); }
.stat:hover::after{ transform: translateX(-50%) scaleX(1); }
.stat .stat-num{ transition: color .35s ease, transform .35s cubic-bezier(.2,.7,.2,1); }
.stat:hover .stat-num{ color: var(--red-deep); transform: scale(1.04); }
/* Vertical dashed divider between adjacent stats — 20px dashes with
   ROUNDED tips, 16px gaps, color #D5D1CD, 3px thick. Uses an inline SVG
   with stroke-linecap="round" tiled vertically so each individual dash
   has fully rounded caps on top AND bottom. */
.stat + .stat::before{
  content: "";
  position: absolute;
  left: -28px;
  top: 15%;
  bottom: 15%;
  width: 3px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='3' height='36' viewBox='0 0 3 36'><line x1='1.5' y1='1.5' x2='1.5' y2='18.5' stroke='%23D5D1CD' stroke-width='3' stroke-linecap='round'/></svg>");
  background-size: 3px 36px;
  background-repeat: repeat-y;
}
.stat-num{
  font-family: var(--display-font);
  font-weight: 800;
  font-size: clamp(46px, 5.2vw, 76px);
  letter-spacing: -.025em;
  color: var(--ink);
  line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.stat-num .vs{
  font-family: var(--display-font);
  font-size: .3em;
  font-weight: 700;
  margin: 0 14px;
  color: #5a4d49;
  vertical-align: middle;
  letter-spacing: .08em;
  text-transform: uppercase;
  position: relative;
  top: -.05em;
}
.stat-label{
  margin-top: 14px;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 15.5px;
  color: #3a2e2b;
  letter-spacing: -.005em;
  text-transform: none;
}
.stat-desc{
  margin-top: 20px;
  font-size: 14.5px;
  color: #5a4d49;
  max-width: 28ch;
  margin-left: auto; margin-right: auto;
  line-height: 1.55;
}

/* ============ PROBLEM (Section 3 — scroll-tied physics animation + sticky pin) ============ */
/* Sticky stage wrapper gives extra scroll-space for the sheet-cover effect */
.problem-stage{
  position: relative;
  /* Stage is tall enough that §3 stays pinned for the full cascade.
     Increased from 200vh → 280vh after sensitivity tuning so the
     same fractional thresholds (RISE 0-0.56, sheet 0.66-1.0) spread
     over MORE absolute scroll distance. Each tick of scroll now
     produces less animation progress → smoother, easier to follow. */
  height: 280vh;
}
.problem{
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--cream);
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Larger horizontal padding pushes the text/buttons further from the
     viewport edge per spec — comfortable breathing room on both sides. */
  padding: 0 clamp(48px, 6vw, 120px);
}
.problem-inner{
  display:grid;
  /* Wider text column to accommodate the larger headline (matching the
     solution h2 / Figma 165px cap). */
  grid-template-columns: minmax(480px, 720px) minmax(0, 1fr);
  gap: 88px;
  align-items: center;
  width: 100%;
  /* No max-width / centering — the right column should extend all the way to
     the section's right padding edge, so the cards (left:50% inside that
     column) center between the text and the viewport's right edge. */
}
.problem-text .chip{ margin-bottom:22px;}
.problem-heading{
  margin: 0 0 28px;
  /* 25% smaller than the prior Figma-derived 7.76vw / 165px cap. */
  font-size: clamp(42px, 5.82vw, 124px);
  line-height: 1.02;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.problem-text .lead{
  color: #3a2e2b;
  max-width: 44ch;
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.6;
  font-family: var(--body-font);
  font-weight: 600;
}
.problem-text .btn{ margin-top: 32px; }

/* Vertical card stack — each subsequent card lands ON TOP of the previous
   (z-index increases) but slightly offset down (top: N × offset), so the
   underneath card's top header remains visible above the next.
   Card 1 (Build it) at back, Card 3 (Pay 2x) at front of the stack. */
.problem-cards{
  position: relative;
  width: 100%;
  /* Container needs to fit: card height + 2 × stack offset.
     Card aspect 643/864 → if card width = clamp(300, 38vw, 420), card height
     ≈ width × 1.344. With 2 offsets of clamp(80, 8vw, 110), container needs
     to be ~tall enough. */
  height: clamp(560px, 68vh, 720px);
  perspective: 1800px;
}
.stack-card{
  position: absolute;
  /* Right column center, then nudged LEFT so cards don't hug the viewport's
     right edge. The clamp gives responsive breathing room from the right. */
  left: calc(50% - clamp(60px, 7vw, 140px));
  transform: translate3d(-50%, 150%, 0);  /* JS overwrites Y component each frame */
  /* Stack-friendly card size: narrower than before so the vertical stack
     reads cleanly within the pinned viewport. */
  width: clamp(300px, 38vw, 420px);
  aspect-ratio: 643 / 864;
  border-radius: 36px;
  padding: clamp(32px, 2.6vw, 48px) clamp(26px, 2.4vw, 40px);
  color: #fff;
  display: flex; flex-direction: column;
  will-change: transform;
  box-shadow:
    0 38px 78px rgba(0,0,0,.22),
    0 12px 28px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -6px 14px rgba(0,0,0,.08);
  cursor: default;
  overflow: hidden;
}
/* Vertical staircase: each subsequent card sits LOWER than the previous,
   so the previous card's TOP HEADER stays visible above this one. */
.stack-card:nth-child(1){ top: 0;                                z-index: 1; }
.stack-card:nth-child(2){ top: clamp(86px, 9vw, 120px);          z-index: 2; }
.stack-card:nth-child(3){ top: calc(clamp(86px, 9vw, 120px) * 2); z-index: 3; }
.stack-card::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(255,255,255,.18), transparent 50%);
  pointer-events: none;
  border-radius: inherit;
}
.stack-blue   { background: #4CA2FF; }
.stack-purple { background: #D7A2FF; }
.stack-green  { background: #55DB9C; }
.stack-card{
  cursor: pointer;
}
.stack-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 70%, rgba(0,0,0,.08) 100%);
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .35s ease;
}
.stack-card:hover::after{ opacity: 1; }
/* Hover effects only on shadow + z-index — do NOT touch transform, because
   the JS continuously scrubs translate3d() based on scroll. Fighting it with
   `transform: ... !important` causes the cards to jump or freeze mid-rise. */
.stack-card:hover{
  box-shadow:
    0 40px 80px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -4px 12px rgba(0,0,0,.08);
  z-index: 2;
}

.stack-head{
  display: flex; align-items: flex-start; justify-content: space-between;
  margin-bottom: clamp(48px, 4.6vw, 88px);
  gap: 16px;
}
.stack-card h3{
  margin: 0;
  font-family: var(--display-font);
  font-weight: 800;
  /* Stronger headline hierarchy — dominant Bricolage Grotesque per spec. */
  font-size: clamp(40px, 3.8vw, 68px);
  letter-spacing: -.026em;
  line-height: .92;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.stack-num{
  width: 60px; height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,.36);
  display: grid; place-items: center;
  font-family: var(--display-font);
  font-weight: 800;
  font-size: 24px;
  color: #fff;
  flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,.4);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.4),
    inset 0 -4px 8px rgba(0,0,0,.14),
    0 8px 18px rgba(0,0,0,.12);
  position: relative;
  z-index: 1;
}
.stack-copy{
  margin: 0 0 auto;
  font-family: var(--display-font);
  font-weight: 700;
  /* Cleaner body line height for readability. */
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.5;
  max-width: 24ch;
  letter-spacing: -.005em;
  text-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.stack-foot{
  margin: 0 !important;
  padding-top: clamp(32px, 3.2vw, 56px);
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(15px, 1.2vw, 18px) !important;
  line-height: 1.45;
  opacity: .95;
  max-width: 24ch;
  position: relative;
  text-shadow: 0 1px 0 rgba(0,0,0,.04);
}
.stack-foot::before{
  content: "";
  position: absolute;
  top: clamp(14px, 1.4vw, 24px);
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.2) 100%);
  border-radius: 2px;
}

/* ============ SOLUTION (Section 4 — cinematic sheet that slides up over pinned §3) ============ */
.solution{
  background: linear-gradient(180deg, var(--ink-2) 0%, #2A1F1D 100%);
  color: #e6d9c5;
  border-radius: 48px 48px 0 0;
  /* Pull §4 up into the .problem-stage padding-bottom space so it can cover the pinned §3 */
  margin-top: -80vh;
  /* JS drives this from 80vh (off-screen below) → 0 (fully covers pinned §3) */
  --sheet-y: 80vh;
  transform: translate3d(0, var(--sheet-y), 0);
  will-change: transform;
  padding: clamp(72px, 8vw, 140px) var(--pad-x);
  position: relative;
  z-index: 5;
  box-shadow:
    0 -16px 48px rgba(0,0,0,.25),
    0 -2px 0 rgba(255,255,255,.02);
}
.solution::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.04), transparent 40%),
    radial-gradient(ellipse at 80% 100%, rgba(248,38,35,.03), transparent 40%);
  pointer-events:none;
  border-radius: inherit;
}
.solution-inner{ position: relative; z-index: 1; }
.solution-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}
.solution-inner .chip{ margin-bottom: 24px; }
.solution-inner h2{
  line-height: .94;
  letter-spacing: -.03em;
}
.solution-inner .lead-light{
  margin: 28px auto 0;
  max-width: 56ch;
  color: #c1b099;
  font-size: clamp(16px, 1.3vw, 22px);
  line-height: 1.55;
  font-family: var(--body-font);
  font-weight: 600;
}
.solution-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap: 32px;
  margin-top: 80px;
  text-align:left;
}
.mock{ margin:0; display:flex; flex-direction:column; cursor:pointer; }
/* Card container — fixed Figma aspect (641×881), clips overflowing foregrounds. */
.mock-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 641 / 881;
  border-radius: 32.5px;
  overflow: hidden;
  background: #1a1110;
  box-shadow:
    0 14px 32px rgba(0,0,0,.20),
    0 2px 6px rgba(0,0,0,.10);
  /* The card itself does not move on hover — only the foreground inside. */
  transition: box-shadow .55s ease;
}
.mock:hover .mock-frame{
  box-shadow: 0 26px 50px rgba(0,0,0,.32);
}
/* Static background container — no transform/animation on hover. */
.mock-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  border-radius: inherit;
}
/* When bg is an <img> (Hosted Micro-Site), cover the card. */
img.mock-bg{
  object-fit: cover;
  object-position: center;
}
/* Per-card backgrounds (gradients) when bg is a <span>. */
.mock[data-tone="build"] span.mock-bg{
  background: linear-gradient(180deg,
    #4CA2FF 0%,
    #FFD731 35.577%,
    #55DB9C 70.673%,
    #E9CCFF 100%);
}
.mock[data-tone="inapp"] span.mock-bg{
  background: linear-gradient(180deg, #2E2220 0%, #392525 100%);
}

/* Foreground — the interactive layer. Positioned per Figma frame coords,
   animates subtly on hover. */
.mock-fg{
  position: absolute;
  display: block;
  pointer-events: none;
  /* Default size = full card content area; per-tone overrides below match
     Figma's foreground frame positions/sizes within the 641×881 card. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* Premium, restrained hover — slight lift + small scale, no exaggerated parallax. */
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
  transform-origin: 50% 60%;
}
.mock:hover .mock-fg{
  transform: translateY(-6px) scale(1.02);
}
/* Build foreground — composed Figma render of node 2714:4425.
   Left side rounded; right side flat (0) because the image runs off the
   card's right edge — keeping the right corners square avoids a fake
   "rounded end" mid-content. */
.mock[data-tone="build"] .mock-fg{
  top: 9.4%;     /* 83/881 from Figma */
  left: 10.6%;   /* 68/641 */
  width: 89.4%;  /* fills to card right edge (89.4% from left 10.6%) */
  height: 81.2%; /* 715/881 */
  object-fit: cover;
  object-position: top left;
  /* TL, TR, BR, BL */
  border-radius: clamp(14px, 1.6vw, 22px) 0 0 clamp(14px, 1.6vw, 22px);
  box-shadow: 0 4px 4px rgba(0,0,0,0.25);
}
/* In-app phone per Figma: 337×731 at (151,75) in 641×881. Fits inside card. */
.mock[data-tone="inapp"] .mock-fg{
  top: 8.5%;
  left: 23.6%;
  width: 52.6%;
  height: 82.9%;
  object-fit: contain;
  object-position: top center;
}
/* Hosted micro-site — composed Figma render of node 2714:5013.
   Left side rounded; right side flat (same reasoning as Build). */
.mock[data-tone="host"] .mock-fg{
  top: 9.5%;
  left: 10.7%;
  width: 89.3%;
  height: 81.2%;
  object-fit: cover;
  object-position: top left;
  border-radius: clamp(14px, 1.6vw, 22px) 0 0 clamp(14px, 1.6vw, 22px);
  box-shadow: 0 4px 4px rgba(0,0,0,0.25);
}
/* Hover scale ONLY on the foreground — leftover rule was catching .mock-bg
   too when it's an <img> (Hosted card's sunset bg), making it drift. */
.mock figcaption h4{
  margin: 28px 0 14px;
  font-family: var(--display-font);
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -.012em;
  color: #f5e9d2;
  text-shadow: 0 1px 0 rgba(0,0,0,.10);
}
.mock figcaption p{
  margin: 0;
  color: #b3a292;
  font-size: 16px;
  line-height: 1.6;
  max-width: 36ch;
}

/* ============ HOW (Section 5) ============ */
.how{
  background: linear-gradient(180deg, var(--cream) 0%, #ECDFCA 100%);
  /* Tighter section padding — less imposing presence. */
  padding: clamp(56px, 6vw, 104px) var(--pad-x);
  position: relative;
}
.how::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 0% 30%, rgba(240,46,24,.03), transparent 40%),
    radial-gradient(ellipse at 100% 70%, rgba(199,34,15,.04), transparent 40%);
  pointer-events: none;
}
.how-inner{
  position: relative;
  z-index: 1;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
}
.how-inner h2{
  /* Same size as §3 problem-heading: 25% smaller than Figma 165px cap. */
  font-size: clamp(42px, 5.82vw, 124px);
  letter-spacing: -.026em;
  line-height: .96;
}
.how-inner .lead{
  margin: 22px auto 0;
  max-width: 58ch;
  color: #3a2e2b;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.55;
  font-family: var(--body-font);
  font-weight: 600;
}

.steps{
  margin-top: 72px;
  display:flex; flex-direction:column; gap: 80px;
  position:relative;
  /* Break out of .how-inner max-width so step rows can position by viewport
     ratios per Figma spec (full design width = 2126px). */
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Progressive dotted trace */
.steps-trace{
  position:absolute;
  top:0; left:0;
  pointer-events:none;
  z-index:0;
}
.steps-trace path{
  fill: none;
  /* Solid neutral color per spec — overrides the previous gradient. */
  stroke: #D5D1CD;
  stroke-width: 4;
  stroke-linecap: round;
  /* Elongated dashes: 20px dashes with 16px gaps. The clipPath rect (driven
     by scroll in JS) still reveals them progressively top-down — same
     animation, just dashes instead of dots. */
  stroke-dasharray: 20 16;
  opacity: 1;
}

/* Step row layout uses Figma ratios from the 2126px design width:
   - Left-aligned card  ← left wall:  268/2126 = 12.60vw
   - Left-aligned info  ← left wall:  1090/2126 = 51.27vw
   - Reverse    card    → right wall: 317/2126 = 14.91vw
   - Reverse    info    → right wall: 1139/2126 = 53.57vw
   Implemented via absolute positioning inside a relative .step-row so the
   card and info each anchor to the correct viewport-relative position. */
.step-row{
  display: block;
  position: relative;
  z-index: 1;
  /* Row height anchored to the image card (1:1 aspect ratio). */
  min-height: clamp(340px, 32vw, 460px);
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.7,.2,1);
}
.step-row.is-in{ opacity:1; transform: translateY(0); }
.step-row .step-media,
.step-row .step-text{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: transform .8s cubic-bezier(.2,.7,.2,1) .15s;
}
.step-row .step-media{
  left: 12.60vw;
  width: clamp(340px, 32vw, 460px);
}
.step-row .step-text{
  left: 51.27vw;
  /* Info column width = smaller of (560px cap, available space to right wall). */
  width: min(560px, calc(100vw - 51.27vw - clamp(24px, 4vw, 80px)));
}
/* Reverse rows are a TRUE MIRROR of the left-aligned layout (not the Figma's
   slightly asymmetric 14.91vw/53.57vw, which would visually misalign):
   - reverse info RIGHT edge = left card RIGHT edge  → from right wall: 87.40vw - cardWidth
   - reverse card LEFT  edge = left info  LEFT  edge → from right wall: 48.73vw - cardWidth
   This keeps the gap between info and card identical to the left-aligned rows
   AND aligns the info's right end with the image card's right end above. */
.step-row.reverse .step-media{
  left: auto;
  right: calc(48.73vw - clamp(340px, 32vw, 460px));
}
.step-row.reverse .step-text{
  left: auto;
  right: calc(87.40vw - clamp(340px, 32vw, 460px));
  /* Width is set below to max-content so the box shrinks to its widest line. */
}

.step-frame{
  width: 100%;
  /* Slightly reduced from clamp(380-520) → clamp(340-460). */
  max-width: clamp(340px, 32vw, 460px);
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 24px 48px rgba(0,0,0,.10),
    0 4px 10px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.5);
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  transition:
    transform .6s cubic-bezier(.2,.7,.2,1),
    box-shadow .6s ease;
  position: relative;
}
.step:hover .step-frame,
.step-row:hover .step-frame{
  transform: translateY(-8px);
  box-shadow:
    0 44px 90px rgba(0,0,0,.18),
    0 10px 22px rgba(0,0,0,.10);
}
/* When the trace reaches a step, emphasize it (subtle scale + warmer shadow) */
.step-row.is-reached .step-frame{
  transform: translateY(-4px);
  box-shadow:
    0 38px 76px rgba(0,0,0,.14),
    0 8px 18px rgba(0,0,0,.08),
    0 0 0 6px rgba(240,46,24,.04);
}
.step-row .step-text .chip{ transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease; }
.step-row.is-reached .step-text .chip{ transform: translateY(-2px); }
.step-row .step-text h3{ transition: color .35s ease; }
.step-row.is-reached .step-text h3{ color: var(--red); }
.step-frame img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 1s cubic-bezier(.2,.7,.2,1);
}
.step-row:hover .step-frame img{ transform: scale(1.04); }
.step-text{ text-align: left; max-width: 560px; }
/* Reverse rows: the info container shrinks to its widest content (the body
   copy after it wraps to 32ch). The container's right edge stays anchored to
   the image card's right edge in the row above, so the box "right-aligns"
   visually — while the text inside remains left-justified. */
.step-row.reverse .step-text{
  width: max-content;
  /* Text alignment stays "left" (inherited from base .step-text rule). */
}
.step-text .chip{
  margin-bottom: 28px;
  padding: 10px 16px 10px 14px;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-feature-settings: "tnum" 1, "lnum" 1;
  display: inline-flex; align-items: center; gap: 8px;
  line-height: 1;
}
/* Refine the .chip-light variant specifically for time pills — subtle warm
   border instead of pure white, gives them a tighter "label" feel. */
.step-text .chip-light{
  background: rgba(255,255,255,.7);
  color: var(--ink-2);
  box-shadow:
    0 1px 0 rgba(60,38,33,.06),
    inset 0 0 0 1px rgba(60,38,33,.08);
}
.step-text .chip-orange{
  padding: 9px 16px;
  letter-spacing: .12em;
  background: linear-gradient(180deg, #FFB06A 0%, var(--orange) 100%);
  box-shadow:
    0 4px 12px rgba(245,142,47,.28),
    inset 0 1px 0 rgba(255,255,255,.35);
}
/* Bullet ("~"): smaller dot-like character, separated from the time value. */
.step-text .chip-bullet{
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0;
  margin: 0;
  opacity: .55;
  transform: translateY(-1px);
}

/* Per-step pill colors. Override base .chip / .chip-light / .chip-orange so each
   step gets its own background + text color. !important keeps things simple
   given the chip-orange gradient on step 3. */
.step-row:nth-of-type(1) .step-text .chip{
  background: #CBE3FF !important;
  color: #007BFF !important;
  box-shadow: none !important;
}
.step-row:nth-of-type(2) .step-text .chip{
  background: #FFF3C8 !important;
  color: #B06803 !important;
  box-shadow: none !important;
}
.step-row:nth-of-type(3) .step-text .chip{
  background: #D1F4E2 !important;
  color: #03904E !important;
  box-shadow: none !important;
}
.step-row:nth-of-type(4) .step-text .chip{
  background: #F8F0FF !important;
  color: #A450E3 !important;
  box-shadow: none !important;
}
.step-text h3{
  margin: 0 0 22px;
  color: var(--ink);
  /* Bigger headline to match the larger image card per Figma. */
  font-size: clamp(32px, 3.4vw, 56px);
  line-height: .98;
  letter-spacing: -.024em;
  transition: color .25s ease;
}
.step-row:hover .step-text h3{ color: var(--red); }
.step-text p{
  color: #3a2e2b;
  font-size: clamp(16px, 1.3vw, 20px);
  /* Narrower max-width so the longest step copy ("Sign up. Build your brand
     profile. Add your logo, voice, and the categories you're active in.")
     wraps to ~3 lines. Shorter copies wrap to 2-3 lines naturally. */
  max-width: 32ch;
  line-height: 1.55;
  letter-spacing: -.005em;
}

/* ============ AUDIENCE (Section 6) ============ */
.audience{
  background: linear-gradient(180deg, var(--ink-2) 0%, #261c1a 100%);
  color: var(--cream);
  padding: clamp(72px, 8vw, 140px) var(--pad-x);
  position: relative;
  /* Rounded card sandwiched between the cream How section above and the
     cream Feed section below — all four corners rounded for consistency
     with the other dark sections (Solution, Pitch). */
  border-radius: 48px;
  margin: 0 clamp(16px, 2vw, 48px);
  overflow: hidden;
}
.audience::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 80% 80%, rgba(255,255,255,.05), transparent 40%),
    radial-gradient(ellipse at 10% 20%, rgba(248,38,35,.04), transparent 40%);
  pointer-events:none;
}
.audience-inner{
  max-width:var(--maxw); margin:0 auto;
  display:grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 56px;
  position:relative;
}
/* Make the left column a flex column so .legal can push to the bottom and
   bottom-align with the last mini-stat card on the right. */
.audience-left{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.audience-left .chip{ margin-bottom: 24px; }
.audience-left h2{ margin-bottom: 28px; }
.audience-left .btn{
  margin-top: 6px;
  /* Universal .btn size — no per-section padding override. */
}
.audience-heading{
  /* Same size as §3 problem-heading: 25% smaller than Figma 165px cap. */
  font-size: clamp(42px, 5.82vw, 124px);
  line-height: .96;
  max-width: 19ch;
  letter-spacing: -.024em;
}
.audience-left .lead-light{
  margin-bottom: 40px;
  color: #c8b59c;
  font-size: clamp(16px, 1.3vw, 21px);
  line-height: 1.6;
  max-width: 48ch;
  font-family: var(--body-font);
  font-weight: 600;
}
.audience-left .legal{
  /* Bottom-aligned with the last mini-stat card on the right — margin-top:auto
     inside the flex column pushes this to the column's bottom edge. */
  display: flex;
  align-items: center;
  gap: 14px;
  width: fit-content;
  margin: auto 0 0;
  font-size: 12px;
  color: #b09a8b;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-family: var(--display-font);
  font-weight: 700;
}
/* Green "live" pulse dot removed per spec — the legal line reads as plain
   uppercase metadata without the indicator. */
.audience-right{
  display: flex; flex-direction: column; gap: 28px;
  position: relative;
  align-self: stretch;
  justify-content: center;
}
.mini-stat{
  background: linear-gradient(180deg, #ffffff 0%, #fbf6ec 100%);
  color: var(--ink);
  border-radius: 22px;
  padding: 32px 36px;
  text-align: center;
  box-shadow:
    0 22px 44px rgba(0,0,0,.30),
    0 2px 6px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,1);
  transition:
    transform .4s cubic-bezier(.2,.7,.2,1),
    box-shadow .4s ease;
  cursor: default;
}
.mini-stat:hover{
  transform: translateY(-6px) scale(1.018);
  box-shadow:
    0 28px 56px rgba(0,0,0,.40),
    0 2px 8px rgba(0,0,0,.15);
}
.mini-stat .mini-num{ transition: color .3s ease; }
.mini-stat:hover .mini-num{ color: var(--red); }
.mini-label{
  font-family: var(--display-font);
  font-size: 12px;
  font-weight: 700;
  color: #6b5854;
  margin: 0;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.mini-num{
  font-family: var(--display-font);
  font-weight: 800;
  font-size: clamp(52px, 5.4vw, 80px);
  margin: 16px 0;
  line-height: 1;
  letter-spacing: -.028em;
  font-feature-settings: "tnum" 1, "lnum" 1;
}
.mini-num small{ font-size: .4em; font-weight: 600; margin: 0 6px;}
.mini-info{ font-size: 14px; color: #a39084; vertical-align: super;}
.mini-desc{
  margin: 0;
  font-size: 13.5px;
  color: #5a4d49;
  line-height: 1.45;
  letter-spacing: -.005em;
}

/* Audience info-trigger (smaller, sits in a light card) */
.info-trigger.mini{
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  font-size: 13px;
  color: #8e7c75;
  background: rgba(160,140,130,.10);
  border-radius: 50%;
  vertical-align: super;
  cursor: pointer;
  margin-left: 6px;
  transition:
    color .25s ease,
    background .25s ease,
    transform .25s cubic-bezier(.2,.7,.2,1);
}
.info-trigger.mini:hover,
.info-trigger.mini:focus-visible{
  color: var(--ink);
  background: rgba(160,140,130,.22);
  outline: none;
  transform: scale(1.12);
}

/* ============ FEED (Section 7) ============ */
.feed{
  /* Solid background — gradient removed so no visible color shift between
     the carousel cards and the control buttons below. */
  background: var(--cream);
  padding: clamp(72px, 8vw, 140px) var(--pad-x);
  overflow: hidden;
  /* Rounded bottom corners — the brown Pitch section sits BEHIND these so
     it peeks through where the cream rounds away. */
  border-bottom-left-radius: 48px;
  border-bottom-right-radius: 48px;
  position: relative;
  z-index: 2;
}
.feed-inner{ max-width: var(--maxw); margin: 0 auto; text-align:center;}
.feed-inner h2{
  /* Same size as §3 problem-heading: 25% smaller than Figma 165px cap. */
  font-size: clamp(42px, 5.82vw, 124px);
  letter-spacing: -.03em;
  line-height: .94;
}
.feed-inner .lead{
  margin: 24px auto 0;
  max-width: 56ch;
  font-size: clamp(16px, 1.2vw, 19px);
  font-family: var(--body-font);
  font-weight: 600;
}

/* Carousel viewport clips overflow so the 4th card peeks in/out as the track slides */
.feed-viewport{
  margin: 72px auto 0;
  max-width: var(--maxw);
  overflow: hidden;
  padding: 24px 0 36px;       /* breathing room for active indicator + shadow */
  /* Hide the carousel until JS has cloned the track and applied the initial
     pos=N transform. Once ready, JS adds .is-init and the carousel fades in. */
  opacity: 0;
  transition: opacity .45s ease;
}
.feed-viewport.is-init{ opacity: 1; }
.feed-carousel{
  --feed-idx: 0;
  --gap: 28px;
  /* 3 fully visible cards CENTERED with a 14% peek of the adjacent card on
     each side. Track width = 3 full + 2 peeks (0.14 each) = 3.28 cards, plus
     4 gaps (peek-to-full, full-to-full ×2, full-to-peek). */
  --card-w: calc((100% - var(--gap) * 4) / 3.28);
  /* Initial offset shifts the track right so the left peek sits at the
     viewport's left edge, with full cards centered. */
  --align-offset: calc(0.14 * var(--card-w) + var(--gap));
  display: flex;
  gap: var(--gap);
  /* Polished, longer ease-out timing — softer arrival on each card change. */
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
  transform: translateX(calc(var(--align-offset) + var(--feed-idx) * -1 * (var(--card-w) + var(--gap))));
  will-change: transform;
}
.feed-card{
  margin: 0;
  flex: 0 0 var(--card-w);
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  text-align: center;
  cursor: pointer;
  transition:
    transform .55s cubic-bezier(.2,.7,.2,1),
    filter .35s ease;
  /* Cards are visible from the start — the viewport fade-in covers the
     init period so we don't need a per-card entrance animation here. */
  position: relative;
  filter: brightness(.95) saturate(.95);
}
.feed-card.is-revealed{ opacity: 1; transform: translateY(0); }
.feed-card.is-active{
  filter: brightness(1) saturate(1);
}
.feed-card:hover{
  filter: brightness(1) saturate(1);
  transform: translateY(-6px);
}
.feed-card img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 28px;
  /* Softened drop — fades fully into the cream background so no hard edge
     line shows between the cards and the prev/next controls below. */
  box-shadow:
    0 10px 28px rgba(0,0,0,.06),
    0 2px 6px rgba(0,0,0,.03);
  transition: box-shadow .35s ease;
}
.feed-card:hover img,
.feed-card.is-active img{
  box-shadow:
    0 14px 36px rgba(0,0,0,.09),
    0 3px 8px rgba(0,0,0,.04);
}
.carousel-controls{
  display: flex; gap: 16px; justify-content: center;
  margin-top: 56px;
}
.carousel-btn{
  width: 56px; height: 56px;
  border-radius: 50%;
  font-size: 24px;
  font-weight: 500;
  /* Idle: light gray bg + dark icon. Hover: dark brown bg + white icon. */
  background: #D5D1CD;
  color: #3F2E2B;
  border: none;
  line-height: 0;
  display: grid; place-items: center;
  transition:
    transform .3s cubic-bezier(.2,.7,.2,1),
    background .25s ease,
    color .25s ease,
    box-shadow .3s ease;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  cursor: pointer;
}
.carousel-btn svg{ display: block; }
.carousel-btn:hover{
  background: #3F2E2B;
  color: #FFFFFF;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 14px 28px rgba(0,0,0,.18);
}
.carousel-btn:active{ transform: scale(.95);}

/* ============ PITCH (Section 8 — dark) ============ */
.pitch{
  background: linear-gradient(180deg, var(--ink-2) 0%, #2A1F1D 100%);
  color: var(--cream);
  /* No border-radius — the brown stays a flat rectangle, sitting BEHIND
     the cream Feed section's rounded bottom corners so it peeks through. */
  margin-top: -48px;
  padding: clamp(72px, 8vw, 140px) var(--pad-x);
  padding-top: calc(clamp(72px, 8vw, 140px) + 48px);
  position: relative;
  z-index: 1;
}
.pitch::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.04), transparent 40%);
  pointer-events:none;
  border-radius: inherit;
}
.pitch-inner{ position: relative; z-index: 1; }
.pitch-inner{ max-width:var(--maxw); margin:0 auto; text-align:center; }
.pitch-inner .chip{ margin-bottom: 24px; }
.pitch-inner h2{
  /* Same size as §3 problem-heading: 25% smaller than Figma 165px cap. */
  font-size: clamp(42px, 5.82vw, 124px);
  line-height: .94;
  letter-spacing: -.028em;
}
.pitch-grid{
  margin-top: 96px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 80px 48px;
  position: relative;
  text-align: center;
}
/* Vertical dotted line — #4A4141 stroke, 3px thick. Positioned between
   column 1 and column 2 (so it separates Consent/Export from Full Name/
   Home Address). Slightly shorter than the full grid height. */
.pitch-divider{
  position: absolute;
  top: 32px;
  bottom: 32px;
  left: 25%;
  transform: translateX(-50%);
  width: 3px;
  background-image: linear-gradient(
    to bottom,
    #4A4141 0,
    #4A4141 20px,
    transparent 20px,
    transparent 36px
  );
  background-size: 100% 36px;
  background-repeat: repeat-y;
  grid-column: 1 / -1;
  pointer-events: none;
}
.pitch-item{
  position:relative;
  z-index:1;
  transition: transform .35s cubic-bezier(.2,.7,.2,1);
}
.pitch-item:hover{ transform: translateY(-4px); }
.pitch-icon{
  width: 72px; height: 72px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 20px;
  color: #f5e9d2;
  transition:
    transform .4s cubic-bezier(.2,.7,.2,1),
    box-shadow .4s ease,
    color .25s ease;
}
.pitch-icon svg{ width: 30px; height: 30px; }
.pitch-icon.glass{
  background: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.03));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.24),
    inset 0 -8px 16px rgba(0,0,0,.18),
    0 14px 32px rgba(0,0,0,.30);
}
.pitch-item:hover .pitch-icon{
  color: #ffd9c5;
}
.pitch-item:hover .pitch-icon.glass{
  transform: scale(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -8px 16px rgba(0,0,0,.18),
    0 18px 36px rgba(0,0,0,.35);
}
.pitch-item h4{
  margin: 0 0 14px;
  font-family: var(--display-font);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: .04em;
  color: #f5e9d2;
  text-transform: uppercase;
}
.pitch-item p{
  margin: 0;
  font-size: 14.5px;
  color: #b3a292;
  max-width: 24ch;
  margin-inline: auto;
  line-height: 1.55;
  font-family: var(--body-font);
  font-weight: 600;
}

/* ============ COMPARE (Section 9) ============ */
.compare{
  /* Brown flows continuously from §8 (.pitch ends at #2A1F1D, this picks up
     at the same color). No border-radius and no side margins — the section
     spans full width and ends flush below the chart. */
  background: linear-gradient(180deg, #2A1F1D 0%, var(--ink-2) 100%);
  color: var(--cream);
  padding: clamp(72px, 8vw, 140px) var(--pad-x);
  text-align: center;
  position: relative;
}
.compare h2{
  color: var(--cream);
  /* Same size as §3 problem-heading: 25% smaller than Figma 165px cap. */
  font-size: clamp(42px, 5.82vw, 124px);
  letter-spacing: -.028em;
  line-height: .94;
}

/* Image-based comparison chart. The PNG already contains the full chart
   (header, rows, ⓘ icons, ✓ / ✗). Invisible hotspots overlay each visible
   ⓘ position so hover/click still triggers the floating tooltip. */
.compare-chart{
  position: relative;
  max-width: 1180px;
  margin: 72px auto 0;
}
.compare-chart img{
  display: block;
  width: 100%;
  height: auto;
}
/* Higher specificity so size/transform override the .info-trigger defaults
   (.info-trigger is declared later in this file with 22×22 + margin-left:10px). */
.compare-chart .info-trigger.compare-hotspot{
  position: absolute;
  /* ⓘ icon in source PNG: 78px on a 7892px-wide image ≈ 1% wide / 1.85% tall.
     Make the hotspot ~3.5% wide / 5% tall for a forgiving hover target. */
  width: 3.5%;
  height: 5%;
  margin: 0;       /* override .info-trigger's margin-left: 10px */
  background: transparent;
  color: transparent;
  border: none;
  padding: 0;
  cursor: help;
  border-radius: 50%;
  /* Center the hotspot ON the icon coordinates, not top-left. */
  transform: translate(-50%, -50%);
  transition: background .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.compare-chart .info-trigger.compare-hotspot:hover,
.compare-chart .info-trigger.compare-hotspot:focus-visible{
  background: rgba(255,255,255,.10);
  transform: translate(-50%, -50%) scale(1.4);
}
/* Per-row positions — pixel-measured centers of the white ⓘ icons in the
   source image (7892×4205). Each row's icon shifts horizontally based on the
   length of its label text. */
.compare-hotspot[data-row="1"]{ top: 20.81%; left: 18.34%; }
.compare-hotspot[data-row="2"]{ top: 30.11%; left: 12.40%; }
.compare-hotspot[data-row="3"]{ top: 39.81%; left: 15.29%; }
.compare-hotspot[data-row="4"]{ top: 49.42%; left: 11.59%; }
.compare-hotspot[data-row="5"]{ top: 59.50%; left: 13.72%; }
.compare-hotspot[data-row="6"]{ top: 68.63%; left: 11.19%; }
.compare-hotspot[data-row="7"]{ top: 78.24%; left:  8.71%; }
.compare-hotspot[data-row="8"]{ top: 87.56%; left: 10.17%; }
/* Inner stats container — restored: gradient bg, padding, soft shadow so
   the comparison table reads as its own card-within-the-section. */
.compare-wrap{
  max-width: 1180px;
  margin: 72px auto 0;
  background: linear-gradient(180deg, #3f2e2b 0%, #322322 100%);
  border-radius: 28px;
  padding: 12px;
  overflow: hidden;
  box-shadow:
    0 32px 72px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(255,255,255,.04);
}
.compare-table{
  width:100%;
  border-collapse:collapse;
  background: #3a2a28;
  color:#e6d9c5;
}
.compare-table th, .compare-table td{
  padding: 22px 28px;
  text-align: left;
  font-size: 14.5px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  line-height: 1.5;
  vertical-align: top;
}
.compare-table tbody tr:last-child td,
.compare-table tbody tr:last-child th{ border-bottom: none; }
.compare-table thead th{
  font-family: var(--display-font);
  font-size: 12.5px;
  color: #a89283;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  padding-top: 28px; padding-bottom: 28px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.compare-table thead th:first-child{ width: 32%; }
.compare-brand{
  /* "ADVANTAGES" sits slightly to the RIGHT of "ROBIN" and TOP-aligns with
     ROBIN's cap height — which puts it on the same horizontal line as the
     "OTHER PROVIDERS" label in the next column. */
  display: inline-flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--display-font);
  font-weight: 800;
  font-size: 28px;
  color: #fff;
  letter-spacing: -.005em;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,.10);
}
.compare-brand small{ margin-top: 2px; }  /* tiny optical adjustment */
.compare-brand small{
  font-size: 11px;
  color: #a89283;
  letter-spacing: .12em;
  font-weight: 700;
  text-transform: uppercase;
  text-shadow: none;
}
/* Rows stay fully transparent — no hover tint, no chrome over the brown bg. */
.compare-table tbody tr{
  background: transparent;
}
.compare-table tbody tr:hover th[scope="row"]{
  color: #fff;
}
.compare-table th[scope="row"]{
  font-family: var(--display-font);
  font-weight: 700;
  color: #d4c0ac;
  font-size: 14px;
  position: relative;
  letter-spacing: -.005em;
}
/* Blue / red bullet dots removed per spec — cells show text only. */
.compare-table .yes,
.compare-table .no { display: none; }
.compare-table .muted-cell{
  color: #a89283;
  opacity: .9;
}

.info-trigger{
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  margin-left: 10px;
  color: #b09a8b;
  font-size: 14px;
  border-radius: 50%;
  vertical-align: middle;
  background: transparent;
  transition:
    color .3s ease,
    background .3s ease,
    transform .3s cubic-bezier(.2,.7,.2,1);
}
.info-trigger:hover,
.info-trigger:focus-visible{
  color: #fff;
  background: rgba(255,255,255,.10);
  transform: scale(1.15);
  outline: none;
}

.info-tooltip{
  /* fixed: positioned relative to the viewport so JS can use viewport coords
     and the tooltip works for triggers in any section (not just .compare). */
  position: fixed;
  z-index: 1000;
  background: linear-gradient(180deg, #fff 0%, #fbf6ec 100%);
  color: var(--ink);
  font-family: var(--body-font);
  font-size: 13.5px;
  line-height: 1.55;
  padding: 16px 18px;
  border-radius: 14px;
  max-width: 280px;
  box-shadow:
    0 24px 56px rgba(0,0,0,.38),
    0 4px 10px rgba(0,0,0,.15),
    inset 0 1px 0 rgba(255,255,255,1);
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease, transform .2s cubic-bezier(.2,.7,.2,1);
  text-align: left;
  transform-origin: center left;
}
/* Single transform property — separate scale and opacity transitions so they
   don't conflict (previously two rules each set `transform`, causing the open
   state to fight with the position-relative scale). */
.info-tooltip{ transform: scale(.96); }
.info-tooltip.is-open{ transform: scale(1); opacity:1; pointer-events:auto;}

/* Default arrow: points LEFT from a tooltip placed to the RIGHT of trigger. */
.info-tooltip::before{
  content:""; position:absolute;
  left:-7px; top:50%; transform: translateY(-50%) rotate(45deg);
  width:14px; height:14px;
  background:#fff;
  box-shadow: -2px 2px 4px rgba(0,0,0,.06);
}
/* Above-trigger mode: arrow points DOWN from the bottom of the tooltip. */
.info-tooltip.is-above{ transform-origin: center bottom; }
.info-tooltip.is-above::before{
  left:50%; top:auto; bottom:-7px;
  transform: translateX(-50%) rotate(45deg);
  box-shadow: 2px 2px 4px rgba(0,0,0,.06);
}

/* ============ CTA (Section 10 — Figma branded product imagery) ============ */
.cta{
  /* White surrounding background from §10 through §12 (footer area). */
  background: #FFFFFF;
  position: relative;
  padding: clamp(48px, 6vw, 96px) var(--pad-x);
}
/* Per Figma: the card is 2024×1181, but the brown fill only covers the top
   ~78% (920/1181). The bottom strip is the lighter cream of the surrounding
   section, and the perimeter imagery bleeds out of the brown into it. */
.cta-card{
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  /* No background here — brown is painted by ::before, sized to top portion. */
  background: transparent;
  border-radius: clamp(40px, 5vw, 80px);
  /* visible: image is allowed to escape the brown edges into the cream below. */
  overflow: visible;
  isolation: isolate;
  /* Hold the Figma card aspect ratio so the brown band + bleed lands right. */
  aspect-ratio: 2024 / 1181;
}
/* Brown frame: only covers the top portion of the card so imagery escaping
   below sits on the cream section background. */
.cta-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  /* 920/1181 from Figma — top brown band. */
  height: calc(920 / 1181 * 100%);
  background: linear-gradient(180deg, #2C201E 0%, #2E2220 100%);
  border-radius: clamp(40px, 5vw, 80px);
  box-shadow:
    0 32px 80px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.06);
  z-index: 0;
}
/* Perimeter imagery — sized to OUTLINE the brown container. The image's
   perimeter (items along its top, sides, and bottom) wraps around the brown's
   bounds, slightly overhanging on all four sides so the items poke into the
   cream above/below and beyond the brown's left/right edges. The empty
   center of the image lets the heading + sub-text + buttons show through
   cleanly without being covered. */
.cta-imagery{
  position: absolute;
  /* Image aspect: 1859/846 ≈ 2.198. Brown aspect: 2024/920 ≈ 2.20. So an
     image sized at ~106% of card width naturally lands close to the brown's
     height while overhanging slightly on every side. */
  width: 106%;
  max-width: none;
  left: -3%;
  aspect-ratio: 1859 / 846;
  height: auto;
  /* Vertical: lift the image so its top row of products sits ABOVE the
     brown (overlapping the brown/cream border), and the bottom row sits at
     or below the brown's lower edge — outlining the container's perimeter. */
  top: -4%;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  opacity: 1;
  animation: cta-imagery-drift 12s ease-in-out infinite alternate;
}
@keyframes cta-imagery-drift{
  from { transform: translateY(0); }
  to   { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce){
  .cta-imagery{ animation: none; }
}
.cta-inner{
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  padding: clamp(80px, 9vw, 160px) clamp(20px, 4vw, 64px);
  text-align: center;
  color: var(--cream);
}
.cta-inner h2{
  margin: 0 auto;
  font-size: clamp(52px, 6.4vw, 104px);
  letter-spacing: -.03em;
  line-height: .94;
}
.cta-sub{
  margin: 32px auto 0;
  max-width: 60ch;
  text-align: center;
  font-size: clamp(16px, 1.25vw, 21px);
  line-height: 1.55;
  color: #c1ad95;
}
.cta-buttons{
  display:flex; justify-content:center; gap:14px;
  margin-top: 40px;
  flex-wrap:wrap;
}
.cta-icons span{ transition: transform .35s cubic-bezier(.2,.7,.2,1); display:inline-block; }
.cta-icons:hover span{ transform: scale(1.1); }

/* ============ FAQ (Section 11) ============ */
.faq{
  background: #FFFFFF;
  padding: clamp(72px, 8vw, 140px) var(--pad-x);
}
.faq-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 64px;
  align-items: start;
}
.faq-heading{
  color: var(--ink-brown);
  line-height: .94;
  font-size: clamp(36px, 4.4vw, 64px);
  letter-spacing: -.022em;
}
.faq-side{
  position: sticky;
  top: 120px;
}
/* Red accent bar under the side heading removed per spec. */
.faq-side .btn{ margin-top: 28px; }
.faq-list{ display: flex; flex-direction: column; gap: 36px; }
.faq-list details{
  /* Softer panel — closer to base cream with only a very subtle gradient. */
  background: linear-gradient(180deg, var(--cream) 0%, #ebe4dc 100%);
  border-radius: 20px;
  padding: 24px 28px;
  cursor: pointer;
  transition:
    background .35s ease,
    box-shadow .35s ease,
    transform .35s cubic-bezier(.2,.7,.2,1);
  border: 1px solid rgba(60,38,33,.05);
}
.faq-list details:hover{
  background: linear-gradient(180deg, #f1ebe2 0%, #e8e0d4 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(60,38,33,.06);
}
.faq-list details[open]{
  background: linear-gradient(180deg, var(--cream) 0%, #ebe4dc 100%);
  box-shadow: 0 14px 32px rgba(60,38,33,.08);
}
.faq-list summary{
  list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between;
  font-family: var(--display-font);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-brown);
  gap: 24px;
  letter-spacing: -.005em;
  line-height: 1.35;
}
.faq-list summary::-webkit-details-marker{ display:none;}
.faq-q{ flex: 1 1 auto; }

/* Plus → X with double-rotation on open/close. No circular container —
   the icon sits flush in the summary line. */
.faq-plus{
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: inline-grid;
  place-items: center;
  color: var(--ink-brown);
  background: transparent;
  transition:
    transform .55s cubic-bezier(.22, 1, .36, 1),
    color .25s ease;
  will-change: transform;
}
.faq-plus svg{
  width: 28px;
  height: 28px;
  display: block;
  pointer-events: none;
}
/* Closed (+) → Open (X). Simple 45° rotation for a clean, snag-free toggle
   that finishes in step with the panel reveal. */
.faq-list details[open] .faq-plus{ transform: rotate(45deg); }

/* Group titles */
.faq-group{ display:flex; flex-direction:column; gap: 14px; }
.faq-group + .faq-group{ margin-top: 28px; }
.faq-group-title{
  margin: 0 0 4px;
  font-family: var(--display-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #a89283;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Red accent bar before each group title removed per spec. */
.faq-body{
  padding-top: 20px;
  margin-top: 12px;
  /* No divider line — body flows from the same panel color into the text. */
  color: var(--ink-brown);
  font-size: 15px;
  line-height: 1.7;
  opacity: .92;
  max-width: 60ch;
}
/* Smooth open/close: opt into interpolate-size so we can transition
   from height:0 to height:auto on the native ::details-content shadow box.
   ONLY height + opacity transition — no transform — so there is no positional
   snag during the open/close. Identical easing on both keeps it synchronized. */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-list details::details-content{
    height: 0;
    overflow: clip;
    opacity: 0;
    transition:
      height .55s cubic-bezier(.22, 1, .36, 1),
      opacity .4s cubic-bezier(.22, 1, .36, 1),
      content-visibility .55s allow-discrete;
    content-visibility: hidden;
  }
  .faq-list details[open]::details-content{
    height: auto;
    opacity: 1;
    content-visibility: visible;
  }
}

/* ============ FOOTER ============ */
/* Outer footer: white surrounding area. The orange element is a rounded
   card NESTED inside this — not full-bleed. */
.footer{
  background: #FFFFFF;
  padding: clamp(32px, 4vw, 64px) clamp(16px, 2vw, 48px);
  position: relative;
}
.footer-card{
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  background: linear-gradient(180deg, var(--red) 0%, #E62914 100%);
  color: var(--cream);
  border-radius: 40px;
  padding: clamp(32px, 4vw, 56px) clamp(28px, 3.5vw, 56px);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(199,34,15,.20);
}
.footer-card::before{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(255,255,255,.06), transparent 50%),
    radial-gradient(ellipse at 20% 100%, rgba(0,0,0,.10), transparent 50%);
  pointer-events:none;
  border-radius: inherit;
}
/* Top row: app pill (left) + social icons (right), both on the same baseline. */
.footer-top{
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-app{ display: flex; flex-direction: column; gap: 12px; }
.foot-label{
  margin: 0;
  font-family: var(--display-font);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cream);
}
.app-pill{
  display: inline-flex; align-items: center; gap: 18px;
  /* CREAM pill (per spec) — replaces the previous dark brown. */
  background: var(--cream);
  padding: 12px 22px;
  border-radius: 999px;
  color: #2a1c1a;
  font-size: 18px;
  /* Reset native <button> defaults so the pill renders identically
     when used as either a <div> or a <button data-open-popup>. */
  border: 0;
  font-family: inherit;
  line-height: 1;
  box-shadow:
    0 8px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.6);
  transition:
    transform .3s cubic-bezier(.2,.7,.2,1),
    box-shadow .3s ease;
  cursor: pointer;
}
.app-pill:hover{
  transform: translateY(-3px);
  box-shadow:
    0 14px 26px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.7);
}
.app-pill .div{ opacity:.4; color:#2a1c1a;}
.apple-mark{ display:inline-block; width:14px; height:16px; background:#2a1c1a;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'><path d='M318.7 268.7c-.2-36.7 16.4-64.4 50-84.8-18.8-26.9-47.2-41.7-84.7-44.6-35.5-2.8-74.3 20.7-88.5 20.7-15 0-49.4-19.7-76.4-19.7C63.3 141.2 4 184.8 4 273.5q0 39.3 14.4 81.2c12.8 36.7 59 126.7 107.2 125.2 25.2-.6 43-17.9 75.8-17.9 31.8 0 48.3 17.9 76.4 17.9 48.6-.7 90.4-82.5 102.6-119.3-65.2-30.7-61.7-90-61.7-91.9zm-56.6-164.2c27.3-32.4 24.8-61.9 24-72.5-24.1 1.4-52 16.4-67.9 34.9-17.5 19.8-27.8 44.3-25.6 71.9 26.1 2 49.9-11.4 69.5-34.3z'/></svg>") center/contain no-repeat;
}
.play-mark{ display:inline-block; width:16px; height:18px; background:#2a1c1a;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3l16 9-16 9z'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 3l16 9-16 9z'/></svg>") center/contain no-repeat;
}
.foot-socials{
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot-socials a{
  width: 40px; height: 40px;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--cream);
  font-size: 18px;
  transition:
    background .25s ease,
    transform .25s cubic-bezier(.2,.7,.2,1),
    box-shadow .25s ease;
}
.foot-socials a:hover{
  background: rgba(255,255,255,.32);
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0,0,0,.20);
}
/* Combined nav row — single line, evenly spaced. */
.foot-nav{
  position: relative;
  z-index: 1;
  margin-top: clamp(24px, 3vw, 40px);
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 3vw, 44px);
  justify-content: center;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 15px;
  color: var(--cream);
  letter-spacing: .02em;
}
.foot-nav a{
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
  position: relative;
}
.foot-nav a:hover{ opacity: .82; transform: translateY(-2px); }

/* Large ROBIN wordmark — cream color, centered inside the orange card. */
.footer-mark{
  display: block;
  width: 100%;
  margin: clamp(20px, 2.5vw, 40px) auto 0;
  color: var(--cream);
  user-select: none;
  position: relative;
  z-index: 1;
  animation: footer-mark-in 1.2s cubic-bezier(.2,.7,.2,1) both;
  animation-timeline: view();
  animation-range: entry 0% entry 60%;
}
.footer-mark svg{ display: block; width: 100%; height: auto; }
.footer-mark img{
  display: block;
  width: 100%;
  height: auto;
}
@keyframes footer-mark-in{
  from { opacity: .35; transform: translateY(40px); }
  to   { opacity: 1;   transform: translateY(0); }
}
@supports not (animation-timeline: view()){
  .footer-mark{ animation: none; opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  .footer-mark{ animation: none; opacity: 1; transform: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px){
  /* Show mobile-only line breaks (e.g. inside .banner-title) so the
     "Costs are ↑ / Visibility is ↓ / Consented data / is what's left."
     headline cascades into 4 lines on phones for readability. Desktop
     keeps them hidden so the headline wraps naturally. */
  .br-mobile{ display: inline; }

  .hero-grid, .problem-inner, .audience-inner, .faq-inner{
    grid-template-columns:1fr;
  }
  /* IN-BETWEEN STATE FIX (per QA) — at sub-1024 widths use the
     MOBILE hero composition: hide the brown .hero-visual sibling
     entirely (so it can't stack below the red card) and show the
     product image INSIDE the red .hero-card via .hero-card-mobile-img.
     Also hide the decorative hand graphic. The 768px mobile block
     below has its own padding/sizing tweaks; these rules just need
     to trigger the layout swap at the wider breakpoint. */
  .hero-visual{ display: none; }
  .hero-hand,
  .hero-hand-fade{ display: none; }
  .hero-card-mobile-img{
    display: block;
    width: calc(100% + 40px);
    max-width: none;
    margin: 0 -20px 0;
    height: auto;
    aspect-ratio: 3428 / 1716;
    object-fit: contain;
    object-position: center top;
    border-radius: clamp(24px, 6vw, 36px) clamp(24px, 6vw, 36px) 0 0;
    align-self: flex-start;
  }
  .hero-card{
    padding: 0 20px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
  }
  .solution-grid, .pitch-grid, .stats-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .feed-carousel{ --card-w: calc((100% - var(--gap) * 1.3) / 1.85); }   /* tablet: ~1.85 visible (1 + half peek) */
  .problem-cards{ grid-template-columns:1fr; min-height:auto; }
  .stack-card{ min-height:0; }
  .step-row, .step-row.reverse{
    grid-template-columns:1fr;
    gap:24px;
  }
  .step-row .step-media, .step-row.reverse .step-media,
  .step-row .step-text,  .step-row.reverse .step-text{
    grid-column: 1;
  }
  .steps-trace{ display:none; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-right{ align-items:flex-start; }
  /* In-line nav-links should also hide whenever the hamburger menu-toggle
     is shown (≤1024px), otherwise we'd display both at tablet widths. */
  .nav-links{ display:none; }
  .header-inner{ grid-template-columns:auto 1fr auto; gap:14px; }
}
@media (max-width: 640px){
  .stats-grid{ grid-template-columns:1fr; gap:32px;}
  .stat + .stat::before{ display:none; }
  .solution-grid, .pitch-grid{ grid-template-columns:1fr; }
  .feed-carousel{ --card-w: 82%; --gap: 18px; }   /* mobile: 1 card + ~18% of next peeking */
  .header-inner{ grid-template-columns:auto 1fr auto; gap:14px;}
  .nav-links{ display:none; }
  .float-meta { width: 90px; top: -8%; left: -2%; }
  .float-google{ width: 30px; top: -2%; right: 4%; }
  .float-tiktok{ width: 80px; bottom: -14%; right: 6%; }
  .footer-mark{ width: 98%; }  /* SVG logotype scales by width on mobile too */

  /* Hero mobile: smaller hand, tighter card padding, smaller buttons */
  .hero{ padding-top: 84px; }
  .hero-grid{ min-height: 0; max-height: none; }
  .hero-card{ min-height: 540px; padding: 32px; }
  .hero-visual{ min-height: 480px; }
  .hero-hand,
  .hero-hand-fade{
    width: 130px; height: 130px;
    left: 24px; top: 32px;
  }
  .hero-title{
    font-size: clamp(34px, 9vw, 50px);
    line-height: .92;
  }
  .hero-sub{ font-size: 15px; margin-top: 16px;}
  .hero-ctas{ flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-ctas .btn{ width: 100%; padding: 14px 22px; }

  /* Problem section: stack heading + cards on mobile */
  .problem-inner{ grid-template-columns: 1fr; gap: 32px;}
  .problem-cards{ min-height: 0; }
  .stack-card{ min-height: 380px; }

  /* Compare table — make horizontally scrollable on mobile rather than crushed */
  .compare-wrap{ overflow-x: auto; }
  .compare-table{ min-width: 600px; }
}

/* ============ BOOKING MODAL ============ */
/* Inline Google Calendar appointment scheduler. Opens when any
   `calendar.app.google` link is clicked (interceptor in page JS). */
.booking-modal{
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 32px);
  opacity: 0;
  pointer-events: none;
  /* Slower fade-in for elegance, fast fade-out so close feels instant.
     visibility flips immediately so the iframe stops capturing wheel/scroll
     the moment the user dismisses the modal. */
  transition: opacity .15s ease, visibility 0s linear .15s;
  visibility: hidden;
}
.booking-modal[aria-hidden="false"]{
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity .25s ease, visibility 0s linear 0s;
}
/* When closed, ALL descendants are non-interactive immediately. */
.booking-modal[aria-hidden="true"] *{
  pointer-events: none !important;
}
.booking-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(20, 12, 11, .58);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.booking-modal__panel{
  position: relative;
  width: min(900px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  border-radius: 24px;
  overflow: hidden;
  box-shadow:
    0 36px 96px rgba(0,0,0,.42),
    0 4px 14px rgba(0,0,0,.22);
  transform: translateY(20px) scale(.97);
  opacity: 0;
  transition:
    transform .35s cubic-bezier(.2, .8, .2, 1),
    opacity .28s ease;
}
.booking-modal[aria-hidden="false"] .booking-modal__panel{
  transform: translateY(0) scale(1);
  opacity: 1;
}
.booking-modal__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 14px 24px;
  background: var(--cream);
  border-bottom: 1px solid rgba(60, 38, 33, .08);
}
.booking-modal__title{
  margin: 0;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -.005em;
  color: var(--ink);
}
.booking-modal__close{
  appearance: none;
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(60, 38, 33, .06);
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .2s ease, transform .25s cubic-bezier(.2,.7,.2,1);
}
.booking-modal__close:hover{
  background: rgba(60, 38, 33, .12);
  transform: scale(1.05);
}
.booking-modal__close:focus-visible{
  outline: 2px solid var(--red);
  outline-offset: 2px;
}
.booking-modal__iframe{
  display: block;
  width: 100%;
  height: 640px;
  border: 0;
  background: #fff;
  flex: 1 1 auto;
}
/* Body scroll-lock while the modal is open. */
body.has-booking-open{ overflow: hidden; }

@media (max-width: 700px){
  .booking-modal__panel{ border-radius: 18px; }
  .booking-modal__iframe{ height: 70vh; min-height: 480px; }
  .booking-modal__title{ font-size: 14.5px; }
}
@media (prefers-reduced-motion: reduce){
  .booking-modal,
  .booking-modal__panel{ transition: none; }
}

/* =================================================================
   ============   B2B MOBILE OVERHAUL — for-brands.html only   ======
   =================================================================
   Comprehensive ≤768px adjustments for the For Brands page. The earlier
   ≤1024 / ≤640 rules cover the grids; this block tackles eyebrow-tag
   overlaps, complex desktop mocks that don't translate, the comparison
   table cramped layout, the FAQ 2-col grid, and tap-target sizing. */
@media (max-width: 1024px){

  /* ---------- Global guards ---------- */
  html, body{ overflow-x: clip; }
  img, video, svg, iframe{ max-width: 100%; }

  /* ---------- Header ---------- */
  /* Shrink the floating header so the logo + buttons sit cleanly INSIDE
     the cream rounded-shoulder silhouette (same shape as desktop, just
     more compact). Header height 76 + padding 8/24 = 44px content area;
     all interactive elements top out at ~32px tall so they slot into
     the STRAIGHT part of the SVG, never crossing the curved shoulder. */
  .site-header{
    height: 76px;
    /* MOBILE QA — REPLACE the desktop SVG silhouette (which has
       outward-flared cubic shoulders) with a simple cream rectangle
       that has rounded BOTTOM corners only. Per user reference
       screenshot: header touches the top + side viewport edges, with
       a clean concave bottom edge. The SVG is hidden via
       `.header-shape { display: none }` below. */
    background: var(--cream);
    border-radius: 0 0 clamp(24px, 6vw, 32px) clamp(24px, 6vw, 32px);
  }
  .site-header .header-shape{
    display: none;
  }
  .site-header .header-inner{
    /* 1fr middle column eats the empty nav-links space, pushing
       .header-right to the actual right edge of the viewport. */
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    height: 76px;
    padding: 8px clamp(14px, 4vw, 18px) 24px;
  }
  .site-header .logo-mark{
    height: 18px;
    max-width: 72px;
  }
  /* "Get the app" / "Host a giveaway" — compact pill that still meets
     the 44px tap target via padding (visual height ~32px, click area
     bigger via min-height). */
  .site-header .btn{
    min-height: 32px;
    padding: 7px 14px;
    font-size: 12.5px;
    border-radius: 999px;
    line-height: 1;
  }
  .header-right{
    gap: 8px;
    justify-self: end;
    align-items: center;
  }

  /* ---------- MENU TOGGLE (mobile-only) ---------- */
  /* Small cream pill with two stacked bars (collapses to an X when
     the menu is open). Lives next to the primary CTA in .header-right. */
  .menu-toggle{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 32px;
    padding: 7px 12px;
    border: 0;
    border-radius: 999px;
    background: var(--cream);
    color: var(--ink-2);
    font-family: var(--display-font);
    font-weight: 700;
    font-size: 12.5px;
    line-height: 1;
    cursor: pointer;
    box-shadow:
      0 3px 8px rgba(0, 0, 0, .10),
      inset 0 1px 0 rgba(255, 255, 255, .55);
    transition:
      transform .25s cubic-bezier(.2, .7, .2, 1),
      box-shadow .25s ease,
      background .25s ease;
  }
  .menu-toggle:hover{
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, .14);
  }
  .menu-toggle:active{ transform: translateY(0) scale(.98); }
  .menu-toggle-icon{
    position: relative;
    width: 14px;
    height: 10px;
    display: inline-block;
  }
  .menu-toggle-icon > span{
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .3s cubic-bezier(.2, .7, .2, 1), top .3s ease, opacity .2s ease;
  }
  .menu-toggle-icon > span:nth-child(1){ top: 1px; }
  .menu-toggle-icon > span:nth-child(2){ top: 7px; }
  /* X state when the menu is open. */
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon > span:nth-child(1){
    top: 4px; transform: rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle-icon > span:nth-child(2){
    top: 4px; transform: rotate(-45deg);
  }
}

/* Hide the mobile menu toggle on desktop — the .nav-links inline nav
   carries the same links there. */
@media (min-width: 1025px){
  .menu-toggle{ display: none !important; }
}

/* =================================================================
   MOBILE MENU PANEL                                              ==
   ================================================================= */
/* Slide-down cream card that fills the viewport width with a small
   inset gutter and is ~50vh tall. Triggered by the .menu-toggle in
   the header. */
.mobile-menu{
  position: fixed;
  /* Header height 76px + 20px gap so the cream card reveals with
     visible breathing room beneath the header (per QA). */
  top: 96px;
  left: 0;
  right: 0;
  z-index: 70;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-12px);
  transition:
    opacity .25s ease,
    transform .35s cubic-bezier(.2, .7, .2, 1);
}
.mobile-menu.is-open{
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
.mobile-menu-card{
  margin: 0 12px;
  background: var(--cream);
  border-radius: 28px;
  padding: 28px 28px 32px;
  height: 50vh;
  min-height: 360px;
  max-height: 540px;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 4px 8px rgba(0, 0, 0, .08),
    0 22px 50px rgba(0, 0, 0, .22),
    inset 0 1px 0 rgba(255, 255, 255, .55);
}
.mobile-menu-title{
  margin: 0 0 22px;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.mobile-menu-nav{
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.mobile-menu-nav a{
  display: block;
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(28px, 7vw, 36px);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink-2);
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid rgba(46, 34, 32, .08);
  transition: color .2s ease;
}
.mobile-menu-nav a:last-child{ border-bottom: 0; }
.mobile-menu-nav a:hover,
.mobile-menu-nav a:active{ color: var(--red); }

.mobile-menu-socials{
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  gap: 14px;
}
.mobile-menu-socials a{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(46, 34, 32, .08);
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background .2s ease, transform .2s cubic-bezier(.2,.7,.2,1);
}
.mobile-menu-socials a:hover{
  background: var(--ink-2);
  color: var(--cream);
  transform: translateY(-2px);
}

/* Lock body scroll while the menu is open. */
body.menu-open{ overflow: hidden; }

/* Belt-and-braces: hide the panel entirely on desktop so it can't
   accidentally render even if scripts force .is-open. */
@media (min-width: 1025px){
  .mobile-menu{ display: none !important; }
}

/* Narrowest phones — reduce title size + nav font slightly. */
@media (max-width: 380px){
  .mobile-menu-card{ padding: 24px 22px 28px; border-radius: 24px; }
  .mobile-menu-nav a{ font-size: 26px; padding: 12px 0; }
  .mobile-menu-socials{ gap: 10px; }
}

/* ============================================================
   BRAND / B2B MOBILE OVERHAUL — wrapping fix.
   This whole block (Hero through Footer) was originally INDENTED
   like it lived inside an @media query, but its `@media (max-width: 1024px) {`
   opener was missing — so all rules below applied at ALL viewport
   widths, warping desktop layouts (problem cards, audience stats,
   compare chart, etc.). Adding the opener here scopes them to
   phones only. Closes at the next `}` at the marked location. */
@media (max-width: 1024px){
  /* ---------- Hero ---------- */
  .hero-title{
    font-size: clamp(38px, 11vw, 56px);
    line-height: .94;
  }
  /* Hard <br/> breaks in the subtitle don't wrap cleanly on phones —
     suppress them and let natural word-wrap handle it. */
  .hero-sub br{ display: none; }
  .hero-sub{
    font-size: 15.5px;
    line-height: 1.5;
    max-width: 36ch;
  }
  .hero-ctas .btn{
    min-height: 50px;
    font-size: 16px;
  }
  /* Scooter / hero-visual prize images — keep within frame. */
  .hero-visual img{
    width: auto;
    max-width: 100%;
    height: auto;
  }

  /* ---------- Section eyebrow tags ---------- */
  /* Tags like "THE PROBLEM" / "THE SOLUTION" use position:absolute on
     desktop. On mobile they can overlap the section above when their
     parent's padding/margin doesn't account for them. Pin them with a
     plain block flow position. */
  .section-tag,
  .eyebrow-tag,
  .tag-pill{
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    display: inline-flex;
    margin: 0 0 12px;
  }

  /* ---------- Problem section ---------- */
  .problem-inner{
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .problem-headline,
  .problem h2,
  .problem-title{
    font-size: clamp(36px, 10vw, 52px);
    line-height: .96;
  }
  .stack-card{
    padding: 24px;
    min-height: 0;
  }

  /* ---------- Stats section ---------- */
  .stats{
    padding: 56px 16px;
  }
  .stat-num,
  .stat-big{
    font-size: clamp(56px, 18vw, 92px);
  }
  .stat-label{
    font-size: 14px;
  }

  /* ---------- Solution / How (step rows + mocks) ---------- */
  .step-row,
  .step-row.reverse{
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 40px 16px;
  }
  .step-text h3,
  .step-title{
    font-size: clamp(30px, 8vw, 44px);
    line-height: 1.05;
  }
  .step-body,
  .step-text p{ font-size: 15.5px; line-height: 1.55; }
  /* Phone mocks shrink and center so the floating bird / magnifier
     decorations don't crowd the text. */
  .step-media,
  .mock{
    max-width: min(360px, 84vw);
    margin: 0 auto;
  }
  /* Suppress the decorative bird/magnifier inside mocks — adds clutter
     at small sizes and overlaps text. */
  .mock-fg .mock-bird,
  .mock-bird,
  .mock-magnifier{ display: none; }

  /* ---------- Audience section ---------- */
  .audience-inner{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 56px 16px;
  }
  .audience-title{
    font-size: clamp(34px, 9vw, 50px);
  }

  /* ---------- Feed carousel ---------- */
  .feed{
    padding: 56px 16px;
  }
  .feed-title{
    font-size: clamp(34px, 9vw, 50px);
  }
  /* Carousel arrows: minimum 44px tappable. */
  .feed-arrow,
  .carousel-arrow{
    width: 48px;
    height: 48px;
  }

  /* ---------- Pitch section (data fields) ---------- */
  .pitch{
    padding: 56px 16px;
  }
  .pitch-title{
    font-size: clamp(32px, 8.5vw, 48px);
  }
  /* Dashed timeline already renders cleanly on mobile per QA. */

  /* ---------- COMPARE chart — horizontal scroll on mobile ---------- */
  /* The "Why choose Robin?" comparison is a single wide PNG asset
     (RobinAdvantages.png) designed for desktop. On mobile we let it
     keep its natural width and present it inside a horizontally
     scrollable container, with a snap hint so the user knows to swipe. */
  .compare{
    padding: 56px 0 72px;
  }
  .compare-title,
  .compare h2{
    font-size: clamp(34px, 9vw, 50px);
    line-height: .96;
    margin: 0 16px 24px;
  }
  .compare-chart{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 16px 16px;
    /* Visual cue that this is horizontally scrollable. */
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(90deg,
      transparent 0,
      #000 12px,
      #000 calc(100% - 12px),
      transparent 100%);
  }
  .compare-chart img{
    /* Force the giant 7892px-wide source down to a readable mobile
       width. The container's overflow-x:auto lets users pan to read
       the full comparison. */
    width: 720px;
    max-width: none;
    height: auto;
    scroll-snap-align: start;
    display: block;
  }
  /* Hide the desktop hotspot buttons on mobile — the image isn't
     interactive at this scale anyway. */
  .compare-hotspot{ display: none; }

  /* ---------- CTA section ---------- */
  .cta{
    padding: 64px 16px 80px;
  }
  .cta h2,
  .cta-title{
    font-size: clamp(36px, 10vw, 56px);
    line-height: 1.0;
  }
  .cta .btn{
    min-height: 52px;
    padding: 14px 28px;
    font-size: 16px;
  }

  /* ---------- FAQ ---------- */
  .faq{
    padding: 56px 16px 72px;
  }
  /* Stack the 2-column FAQ layout same as the consumer page. */
  .faq-inner{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .faq-side{
    position: static;
    top: auto;
  }
  .faq-heading{
    font-size: clamp(36px, 10vw, 52px);
  }
  .faq-side .btn{
    margin-top: 18px;
    min-height: 48px;
  }
  .faq-list{ gap: 16px; }
  .faq-q{ font-size: 16px; }

  /* ---------- Footer ---------- */
  .footer-card{
    padding: 32px 22px;
  }
  .footer-top{
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
  }
  .app-pill{ min-height: 48px; }
  .foot-socials{ gap: 14px; }
  .foot-socials a{
    width: 44px;
    height: 44px;
  }
  .foot-nav{
    flex-wrap: wrap;
    gap: 14px 22px;
    justify-content: center;
  }
}

/* Extra-tight tuning at very narrow widths. */
@media (max-width: 380px){
  .hero-title{ font-size: clamp(32px, 10vw, 44px); }
  .hero-card{ min-height: 480px; padding: 26px; }
  .hero-hand,
  .hero-hand-fade{ width: 110px; height: 110px; left: 18px; top: 24px; }
  .compare-table td{ font-size: 14px; }
  .stat-num,
  .stat-big{ font-size: clamp(48px, 16vw, 76px); }
}

/* =================================================================
   POLISH PASS — additional B2B mobile refinements                ==
   ================================================================= */
@media (max-width: 1024px){

  /* Reveal animation safety net — ensure scroll-revealed elements
     don't get stuck in their hidden state on mobile. */
  .reveal-up{
    animation: b2b-mobile-safety-reveal 0.45s 1.2s cubic-bezier(.2,.7,.2,1) both;
  }
  @keyframes b2b-mobile-safety-reveal{
    0%   { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  /* Hero — MOBILE QA:
       1. REMOVE the separate brown .hero-visual container (display:none)
       2. REMOVE the floating hand graphic on the red card (display:none
          on .hero-hand + .hero-hand-fade)
       3. SHOW hero_phone.png inside the red hero card via
          .hero-card-mobile-img, cropped so ONLY the lower portion of
          the asset (the "share with…" data badges + the swipe-to-enter
          CTA) is visible. The top half of the source image (the brand
          card with chips) is intentionally cropped. */
  .hero{ padding-top: 76px; padding-left: 12px; padding-right: 12px; }
  .hero-card{
    /* Padding-top removed (was 24px) so the hero image sits flush
       against the top edge of the red card. Side + bottom padding
       remain for headline / sub / CTAs. */
    padding: 0 20px 32px;
    border-radius: clamp(24px, 6vw, 36px);
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow: hidden;
  }
  .hero-card-mobile-img{
    display: block;
    /* Image breaks OUT of the hero-card's side padding so it extends
       edge-to-edge of the red card — looks like part of the red
       container, not a floating photo with cream margins. The
       max-width:none overrides the global `img { max-width: 100% }`
       which would otherwise clamp the width back to 100%. */
    width: calc(100% + 40px);
    max-width: none;
    margin: 0 -20px 0;
    height: auto;
    /* mobile_hero_image.png is 3428 × 1716 (purpose-built for the
       mobile hero — no crop needed). aspect-ratio reserves the
       layout box before the image loads. */
    aspect-ratio: 3428 / 1716;
    object-fit: contain;
    object-position: center top;
    /* Round only the TOP corners so they match the hero card's top
       border-radius; bottom edges flow into the red surface flush. */
    border-radius: clamp(24px, 6vw, 36px) clamp(24px, 6vw, 36px) 0 0;
    background: transparent;
    box-shadow: none;
    /* align-self start avoids any flex-item-center vertical drift. */
    align-self: flex-start;
  }
  .hero-content{
    padding-top: 0;
  }
  /* HIDE the floating hand graphic on mobile — composition is now
     cleaner without it (the cropped product image is the visual). */
  .hero-hand,
  .hero-hand-fade{
    display: none;
  }
  /* HIDE the second brown sibling container — image now lives inside
     the red .hero-card above as .hero-card-mobile-img. */
  .hero-visual{
    display: none;
  }

  /* Stats section — MOBILE QA:
       - 2x2 grid with stat #3 spanning both columns (2 on top, 1 on
         bottom) for a more native mobile UX. Single-column was too
         tall + screamed the same number three times in a row.
       - Numbers scaled DOWN from clamp(56px, 18vw, 92px) →
         clamp(36px, 12vw, 58px) so two-up fit comfortably on a 375px
         phone without crowding.
       - LARGE bottom padding (was 72-120px → 140-200px) PLUS extra
         margin-bottom on the .problem-stage so the sticky-pin
         section's absolutely-positioned stack-cards (which sit at
         the top of the pin stage with translate Y 150%) can't
         visually overlap the final stat as the user scrolls into
         the pin range. */
  .stats{
    padding-bottom: clamp(140px, 22vw, 200px);
  }
  .problem-stage{
    margin-top: clamp(48px, 10vw, 96px);
  }
  .stats-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 16px;
  }
  /* Third stat spans both columns and centers as the "bottom row". */
  .stats-grid > .stat:nth-child(3){
    grid-column: 1 / -1;
    justify-self: center;
    width: 100%;
    max-width: 320px;
  }
  .stat{
    padding: 12px 0;
    text-align: center;
  }
  .stat-num,
  .stat-big{
    font-size: clamp(36px, 12vw, 58px) !important;
    line-height: 1;
  }
  .stat-label{
    margin-top: 6px;
    font-size: 12.5px;
    line-height: 1.3;
  }
  .stat + .stat::before{ display: none; }

  /* Problem cards — MOBILE QA: KEEP the cascading sticky-pin stack
     from desktop (cards rise from below as the user scrolls and stack
     on top of each other), but TUNE the sizing so it feels native on
     a phone. The desktop layout:
       - .problem-stage 200vh sticky-pin scroll budget
       - .problem position:sticky 100vh
       - .stack-card position:absolute left:50% with translate animation
     all run on mobile too; we just narrow the card to fit the viewport
     and shrink the per-card top-offset cascade so all 3 cards stay
     visible within the 100vh pin window. */
  .problem-cards{
    /* Roomier vertical budget so the 3 staggered cards (each ~440px)
       fit cleanly with the cascade offsets. */
    height: clamp(520px, 78vh, 640px);
  }
  .stack-card{
    /* CENTER the card in the viewport (desktop offset of
       `calc(50% - clamp(60px, 7vw, 140px))` lands the card off-screen
       on phones), shrink width to fit, and override aspect-ratio so
       the card sizes by its CONTENT instead of the desktop 643/864
       portrait ratio (which would make the card 360 × 484 → too tall
       when 3 are cascaded). */
    left: 50% !important;
    width: min(86vw, 340px) !important;
    aspect-ratio: auto !important;
    height: auto;
    min-height: 240px;
    padding: 22px 24px 22px;
    border-radius: 22px;
  }
  /* Tighter cascade offsets for the smaller mobile cards:
       Card 1: top 0
       Card 2: top 70px (was 86–120px)
       Card 3: top 140px
     With each card ~ 260px tall and the parent ~78vh high, all three
     stack visibly inside the pinned viewport. */
  .stack-card:nth-child(2){ top: 70px !important; }
  .stack-card:nth-child(3){ top: 140px !important; }
  .stack-card h3,
  .stack-card .stack-title{
    font-size: clamp(20px, 5.5vw, 26px);
    line-height: 1.2;
  }
  .stack-card p{
    font-size: 14.5px;
    line-height: 1.5;
  }
  .stack-card .stack-head{
    /* Tighter title-to-copy gap on mobile (desktop has 48–88px). */
    margin-bottom: 18px;
  }
  .stack-card .stack-foot{
    margin-top: 14px;
  }

  /* Solution / How sections — step rows: MOBILE QA layout
       Row composition (each step):
         time-pill (chip)   → top-RIGHT, aligned with image card's right edge
         step-media (image) → centered, max 360px / 86vw
         h3 + p (copy)      → centered below image, max 420px / 92vw
     Desktop positions .step-media AND .step-text as `position: absolute`
     anchored to specific vw coordinates for the zig-zag layout — on
     mobile we override both back to static so they enter the row's
     normal flex flow. */
  .step-row,
  .step-row.reverse{
    /* Top padding reserves room for the absolutely-positioned chip at
       top: 24px (chip height ~32px = chip bottom at ~56px). Padding-
       top of 88-104px gives a clean 32-48px buffer between the chip's
       bottom and the image card's top — no overlap on any phone width.
       Bottom padding stays tight so consecutive steps sit closer. */
    padding: clamp(88px, 18vw, 104px) 16px clamp(16px, 4vw, 24px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
  }
  .step-row .step-media,
  .step-row.reverse .step-media,
  .step-row .step-text,
  .step-row.reverse .step-text{
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 100%;
    max-width: none;
  }
  .step-row .step-media,
  .step-row.reverse .step-media{
    max-width: min(360px, 86vw);
    margin: 0 auto;
    order: 0;
  }
  .step-row .step-text,
  .step-row.reverse .step-text{
    order: 1;
    text-align: center;
    max-width: min(420px, 92vw);
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    /* Inner block reset so h3 + p inside don't inherit any inline-flex
       quirks from the desktop layout and stay center-flowed. */
    display: block;
  }
  /* HARD-CENTER everything inside the step row on mobile — image card,
     h3, and p all share the same centered axis. !important guards
     against desktop rules that left-align via `.step-text > h3`. */
  .step-row .step-text > h3,
  .step-row .step-text > p,
  .step-row.reverse .step-text > h3,
  .step-row.reverse .step-text > p{
    text-align: center !important;
    margin-left: auto;
    margin-right: auto;
  }
  /* Chip — absolutely positioned at the TOP-LEFT of the row, sitting
     just to the RIGHT of the vertical dotted scroll-line (which lives
     at left:10px). A horizontal dotted "connector" pseudo-element
     bridges the gap between the vertical line and the pill — it
     draws from 0 → full width when the step gets `.is-in` so each
     pill connects to the scroll-line as the user reaches it. */
  .step-row .step-text > .chip,
  .step-row.reverse .step-text > .chip{
    position: absolute;
    top: 24px;
    left: 40px;
    right: auto;
    transform: none;
    margin: 0;
    white-space: nowrap;
    z-index: 2;
  }
  /* Horizontal scroll-drawn connector from the vertical dotted line
     to the chip. Uses ::before on the chip (the chip is the
     positioned element). Sits BEHIND the pill (negative z-index) and
     extends LEFTWARD from the pill's left edge to the vertical line
     at left:10px. Scales to full width when .is-in is added. */
  .step-row .step-text > .chip::before,
  .step-row.reverse .step-text > .chip::before{
    content: "";
    position: absolute;
    /* Anchored from the pill's left edge, extending leftward.
       Distance covers 40px - 10px (vertical line) = 30px minus a
       few px of breathing room around the line. */
    right: 100%;
    top: 50%;
    width: 26px;
    height: 2px;
    margin-top: -1px;
    margin-right: 4px;
    background-image: linear-gradient(
      to right,
      #D5D1CD 0,
      #D5D1CD 4px,
      transparent 4px,
      transparent 10px
    );
    background-size: 10px 100%;
    background-repeat: repeat-x;
    /* Hidden by default — animates to full when step gets .is-in. */
    transform-origin: right center;
    transform: scaleX(0);
    opacity: 0;
    transition:
      transform .5s cubic-bezier(.2,.7,.2,1) .15s,
      opacity .35s ease .15s;
    pointer-events: none;
  }
  .step-row.is-reached .step-text > .chip::before,
  .step-row.reverse.is-reached .step-text > .chip::before{
    transform: scaleX(1);
    opacity: 1;
  }
  /* (Step row padding-top now handled in the main .step-row rule
     above with clamp(56px, 12vw, 72px) — duplicate fixed-72px rule
     removed so the smaller-phones tightening propagates correctly.) */
  /* MOBILE QA — DISABLE hover effects on the step image cards.
     Mobile devices don't have hover anyway and on tablets these
     transforms (translate + scale) trigger unintended layout shifts. */
  .step-row:hover .step-frame,
  .step:hover .step-frame{
    transform: none;
    box-shadow: none;
  }
  .step-row:hover .step-frame img{
    transform: none;
  }
  .step-row:hover .step-text h3{
    color: inherit;
  }
  .step-text{
    padding-top: 0;
  }
  .step-text h3,
  .step-title{
    font-size: clamp(28px, 7.5vw, 40px);
    margin-bottom: 12px;
  }
  /* MOBILE QA — DOTTED vertical scroll-drawn line on the LEFT of the
     steps list. Uses the same color (#D5D1CD) as the desktop
     `.steps-trace` SVG, rendered via a pseudo-element with a
     repeating linear-gradient (4px dot + 6px gap) and a JS-driven
     CSS variable `--mobile-steps-trace-progress` (0–1) that controls
     the visible height — so the line "draws" itself as the user
     scrolls, mirroring the desktop scroll-driven SVG trace. */
  .steps{
    position: relative;
    padding-left: 28px;
    padding-right: 0;
    --mobile-steps-trace-progress: 0;
  }
  .steps::before{
    content: "";
    position: absolute;
    left: 10px;
    top: 0;
    width: 3px;
    /* Height grows from 0 to 100% as the user scrolls — the JS in
       for-brands.html updates --mobile-steps-trace-progress. */
    height: calc(100% * var(--mobile-steps-trace-progress, 0));
    background-image: linear-gradient(
      to bottom,
      #D5D1CD 0,
      #D5D1CD 4px,
      transparent 4px,
      transparent 10px
    );
    background-size: 100% 10px;
    background-repeat: repeat-y;
    border-radius: 2px;
    pointer-events: none;
  }
  .steps .step{
    position: relative;
  }

  /* Audience section — MOBILE QA — give "Tap into our users" CTA
     breathing room before "Live since…" legal, and clear separation
     between the legal and the right column stats. */
  .audience-inner{
    gap: 40px;
  }
  .audience-left .btn{
    margin-top: 8px;
    margin-bottom: 28px;
  }
  .audience-left .legal{
    margin: 0 0 16px;
  }
  /* (Dead .audience-grid / .audience-card selectors removed — markup
     uses .audience-inner / .audience-left / .audience-right / .mini-stat.) */

  /* Pitch section (dark "What you walk away with") — MOBILE QA —
     RE-CONNECT with the .compare ("Why choose Robin") section below
     by removing the 12px side margins + the rounded corners. Brown
     now runs edge-to-edge of the viewport and flows continuously
     into .compare, matching desktop intent. */
  .pitch{
    border-radius: 0;
    margin: 0;
  }
  /* Also kill any margins/radius on .compare for the same reason. */
  .compare{
    border-radius: 0;
    margin: 0;
  }
  /* MOBILE QA — Walk-away grid: top row = CONSENT + EXPORT, then a
     horizontal mobile-scaled dotted divider, then the remaining six
     items below in 2-col rows. Achieved with CSS `order` so the HTML
     stays in its desktop sequence. */
  .pitch-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 16px;
  }
  /* CONSENT (1st HTML child) — top-left. */
  .pitch-grid > .pitch-item:nth-child(1){ order: 1; }
  /* EXPORT is the 6th HTML child (after the divider at 5th). Reorder
     to be the 2nd visible item on mobile (top-right). */
  .pitch-grid > .pitch-item:nth-child(6){ order: 2; }
  /* DIVIDER (5th HTML child) — render between row 1 and row 2. */
  .pitch-grid > .pitch-divider{ order: 3; }
  /* Remaining six in HTML order: FULL NAME(2) → EMAIL(3) → PHONE(4)
     → HOME(7) → DOB(8) → GENDER(9). */
  .pitch-grid > .pitch-item:nth-child(2){ order: 4; }
  .pitch-grid > .pitch-item:nth-child(3){ order: 5; }
  .pitch-grid > .pitch-item:nth-child(4){ order: 6; }
  .pitch-grid > .pitch-item:nth-child(7){ order: 7; }
  .pitch-grid > .pitch-item:nth-child(8){ order: 8; }
  .pitch-grid > .pitch-item:nth-child(9){ order: 9; }

  /* Show the divider on mobile, rebuilt as a HORIZONTAL mobile-scaled
     dotted line spanning both columns. Desktop's vertical 3px line
     re-used the same #4A4141 dash pattern; mobile uses a finer 2px
     stroke + 18px dash + 14px gap so it reads as a thin native rule
     between the two card-row groups. */
  .pitch-divider{
    display: block;
    position: static;
    transform: none;
    width: 100%;
    height: 2px;
    grid-column: 1 / -1;
    margin: 8px 0;
    background: linear-gradient(
      to right,
      #4A4141 0,
      #4A4141 18px,
      transparent 18px,
      transparent 32px
    );
    background-size: 32px 100%;
  }

  .pitch-item{
    padding: 0;
  }
  .pitch-item .pitch-icon{
    width: 56px;
    height: 56px;
  }
  .pitch-item h4{
    font-size: clamp(13px, 3.4vw, 16px);
    margin-top: 12px;
  }
  .pitch-item p{
    font-size: clamp(11.5px, 3vw, 13.5px);
    line-height: 1.45;
    margin-top: 6px;
  }

  /* CTA section — MOBILE QA:
       - PNG perimeter graphic REMOVED entirely (was overlapping
         heading + buttons on every phone size).
       - Card uses content-driven height (aspect-ratio: auto) so the
         heading + sub + buttons fit cleanly inside the brown.
       - Padding tightened so the card hugs its content.
       - CRITICAL: the desktop `.cta-card::before` paints brown only
         on the TOP 78% of the card (Figma 920/1181 ratio). On mobile
         with content-driven height, the bottom 22% becomes a cream
         strip where the buttons sit (falling out of the brown). Fix:
         override the ::before to cover 100% so brown fills the whole
         card on phones. */
  .cta-card{
    padding: clamp(40px, 8vw, 56px) clamp(20px, 5vw, 28px);
    margin: 0 12px;
    border-radius: clamp(28px, 6vw, 40px);
    aspect-ratio: auto;
    min-height: 0;
  }
  .cta-card::before{
    height: 100%;
    border-radius: clamp(28px, 6vw, 40px);
  }
  .cta-imagery{
    /* Mobile uses the CONDENSED mobile_cta_outline.png (swapped by
       <picture><source media="(max-width: 1024px)">). The source PNG
       is LANDSCAPE (1456×981 ≈ 1.48 W/H), but the mobile CTA card
       is PORTRAIT — so we rotate the image 90° to make its perimeter
       wrap the brown card vertically. After rotation, the image's
       natural width becomes its visual height.
       Sized at 185% of card width — slightly expanded from 165% per
       user request. Card has overflow:visible so the PNG is never
       clipped (it freely overhangs the top/bottom of the brown).
       cta-inner is z-index:2 + has padding so the heading/sub/buttons
       remain clear of the artwork. */
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 185%;
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center center;
    pointer-events: none;
    user-select: none;
    z-index: 1;
    opacity: 1;
  }
  /* Override the desktop drift animation on mobile — the rotation
     transform would otherwise be replaced by the keyframe's
     translateY(0/-4px). */
  .cta-imagery{ animation: none !important; }
  .cta-inner{
    /* Mobile CTA imagery sits as a horizontal perimeter banner at the
       TOP of the card. Push the heading down so it clears the image's
       inner edge — otherwise the body text overlaps with the product
       icons. The image is ~30% of card height at its tallest point;
       cta-inner gets enough top padding to start safely below it. */
    padding-top: clamp(72px, 18vw, 110px);
    position: relative;
    z-index: 2;
  }
  /* Whole CTA section padding-bottom REDUCED so the gap between the
     CTA card and the next "What do you want to know?" (Questions)
     section feels tighter on mobile. */
  .cta{
    padding-bottom: clamp(40px, 8vw, 56px);
  }
  /* FAQ section padding-top REDUCED so it sits closer to the CTA. */
  .faq{
    padding-top: clamp(40px, 8vw, 56px);
  }
  .cta h2,
  .cta-title{
    text-align: center;
  }
  .cta .btn{
    width: 100%;
    max-width: 320px;
  }

  /* Footer card — match the CTA card margin/radius for continuity. */
  .footer-card{
    margin: 0 12px;
    border-radius: clamp(28px, 6vw, 40px);
  }
  .footer{
    padding: 24px 0 32px;
  }
}

/* =================================================================
   ============   LEGAL PAGES (Terms / Privacy)                ====
   =================================================================
   Long-form policy pages — share the same header + footer with the
   marketing pages but use a calmer, reading-focused content shell. */
.legal-page{
  background: var(--cream);
  color: var(--ink-2);
  min-height: 100vh;
}

/* Hero band — sits below the floating header. Big title + last-updated
   date, plus a small breadcrumb back to the home page. */
.legal-hero{
  padding: clamp(120px, 14vw, 180px) clamp(20px, 4vw, 64px) clamp(48px, 7vw, 96px);
  text-align: center;
}
.legal-hero-eyebrow{
  display: inline-block;
  font-family: var(--body-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 18px;
}
.legal-hero-title{
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(48px, 8.4vw, 112px);
  line-height: .96;
  letter-spacing: -.025em;
  color: var(--ink-2);
  margin: 0 auto 18px;
  max-width: 14ch;
}
.legal-hero-meta{
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 14px;
  color: var(--muted);
  margin: 0;
}

/* Content shell — single column, optimized for reading. Lives inside a
   max-width container with generous side gutters. */
.legal-content{
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 56px) clamp(20px, 5vw, 32px) clamp(96px, 12vw, 160px);
  font-family: var(--body-font);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-2);
}
.legal-content p{
  margin: 0 0 18px;
}
.legal-content > p:first-of-type{
  font-size: 17.5px;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 28px;
}
.legal-content h2{
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -.012em;
  color: var(--ink);
  margin: 48px 0 14px;
  scroll-margin-top: 120px;
}
.legal-content h2:first-of-type{
  margin-top: 32px;
}
.legal-content h3{
  font-family: var(--display-font);
  font-weight: 700;
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.25;
  color: var(--ink);
  margin: 28px 0 10px;
}
.legal-content ul,
.legal-content ol{
  margin: 0 0 20px;
  padding-left: 22px;
}
.legal-content li{
  margin: 0 0 10px;
}
.legal-content li > strong{
  color: var(--ink);
  font-weight: 700;
}
.legal-content a{
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}
.legal-content a:hover{
  text-decoration-thickness: 2px;
}
.legal-content strong{
  font-weight: 700;
  color: var(--ink);
}

/* Section divider — thin rule between major sections for scanability. */
.legal-section{
  padding-top: 8px;
}
.legal-section + .legal-section{
  border-top: 1px solid rgba(46, 34, 32, .08);
  margin-top: 40px;
  padding-top: 32px;
}

/* Contact / closing block — small card style for the address + email. */
.legal-contact-card{
  background: #FFFFFF;
  border-radius: 18px;
  padding: 24px 28px;
  margin-top: 28px;
  box-shadow:
    0 8px 24px rgba(0, 0, 0, .04),
    inset 0 1px 0 rgba(255, 255, 255, .6);
}
.legal-contact-card p{
  margin: 0 0 6px;
  font-size: 15px;
}
.legal-contact-card p:last-child{ margin-bottom: 0; }

/* Back-to-home pill at the bottom of the content for easy return. */
/* High-specificity selector so this beats the `.legal-content a` rule
   above (which sets a red link color for in-body anchors). */
.legal-content a.legal-back,
.legal-back{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 48px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--ink-2);
  /* Per QA: text + icon both pure white (was cream #EEE7DF). The SVG
     inherits via stroke=currentColor so this single property changes
     both the label text and the back arrow. */
  color: #fff;
  font-family: var(--body-font);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.legal-back:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .14);
}
.legal-back svg{ width: 16px; height: 16px; }

/* Mobile tuning. */
@media (max-width: 1024px){
  .legal-hero{
    padding-top: clamp(96px, 22vw, 140px);
    padding-bottom: 36px;
  }
  .legal-hero-title{
    font-size: clamp(40px, 12vw, 68px);
  }
  .legal-hero-meta{ font-size: 13px; }
  .legal-content{
    font-size: 15.5px;
    padding-top: 12px;
    padding-bottom: 72px;
  }
  .legal-content > p:first-of-type{ font-size: 16px; }
  .legal-content h2{
    font-size: clamp(22px, 6vw, 28px);
    margin-top: 36px;
  }
  .legal-content h3{
    font-size: 17px;
  }
  .legal-contact-card{
    padding: 20px 22px;
  }
}