/* ViralVault AI 2.0 — header + hero.
   Everything visible here is HTML and CSS; the only bitmaps are the six
   figure cut-outs and the niche thumbnails behind them. No text is baked
   into an image, so every string stays translatable and sharp at any zoom. */

/* ---------- tokens ---------- */
:root {
  --page: #07090c;
  --surface: #161a20;
  --surface-2: #111418;
  --text: #ffffff;
  --muted: #b6bfca;
  --green: #c6ff3d;
  --green-ink: #0b0d10;
  --violet: #8b5cf6;
  --gold: #ffc857;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.16);
  --radius-card: 20px;
  --radius-control: 12px;

  --glass: rgba(10, 13, 17, 0.8);
  --glass-head: rgba(7, 9, 12, 0.78);
  --grid-line: rgba(255, 255, 255, 0.04);
  --scrim: 5, 7, 9;
  --mosaic-veil: 0.46;
  /* How hard section 13 veils its money photograph. The picture is lit for a
     dark page; under a near-white scrim it turns muddy, so the light theme
     veils it much harder and keeps it as a faint texture. */
  --earn-veil: 0.74;
  --glow-green: 0.26;
  --glow-violet: 0.18;
  /* Rim light on the cut-outs. Offset drop-shadows trace the alpha outline, so
     the lime edge lands on the side facing the centre of the stage and the
     figure reads as lit by the page rather than pasted onto it. */
  /* Ribbon categories — ten distinct hues, indexed by position in the list. */
  --cat-1: #c6ff3d;
  --cat-2: #4cc9f0;
  --cat-3: #c084fc;
  --cat-4: #22e5a7;
  --cat-5: #ffc857;
  --cat-6: #ff8a5b;
  --cat-7: #ff5d8f;
  --cat-8: #7aa2ff;
  --cat-9: #ff6b6b;
  --cat-10: #f0abfc;

  --rim-key: rgba(198, 255, 61, 0.26);
  --rim-fill: rgba(139, 92, 246, 0.2);
  --rim-halo: rgba(198, 255, 61, 0.34);
  --fig-shadow: rgba(0, 0, 0, 0.62);
  --shadow-card: 0 18px 48px rgba(0, 0, 0, 0.32);

  /* A card's edge: lit along the top, dark along the bottom, painted into the
     border box. Plus four shadow layers at different distances — roughly how a
     real object sits on a surface. One soft blur is what makes a card look
     printed on rather than placed. */
  --bevel-lit: rgba(255, 255, 255, 0.26);
  --bevel-dark: rgba(0, 0, 0, 0.5);
  --card-lift:
    0 1px 1px rgba(0, 0, 0, 0.6),
    0 4px 8px rgba(0, 0, 0, 0.34),
    0 16px 30px rgba(0, 0, 0, 0.3),
    0 36px 64px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
  --card-lift-hover:
    0 1px 1px rgba(0, 0, 0, 0.6),
    0 6px 12px rgba(0, 0, 0, 0.36),
    0 24px 44px rgba(0, 0, 0, 0.34),
    0 48px 86px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);

  --stage-w: 760px;
  --header-h: 72px;
  --maxw: 1440px;
}

:root[data-theme="light"] {
  --page: #f4f6f1;
  --surface: #ffffff;
  --surface-2: #e9eee5;
  --text: #0a0f0d;
  --muted: #4b544d;
  --green: #86b800;
  --green-ink: #ffffff;
  --violet: #7652c9;
  --gold: #c98a10;
  --border: rgba(16, 21, 19, 0.1);
  --border-strong: rgba(16, 21, 19, 0.14);

  --glass: rgba(255, 255, 255, 0.74);
  --glass-head: rgba(255, 255, 255, 0.78);
  --grid-line: rgba(16, 21, 19, 0.07);
  --scrim: 248, 250, 245;
  --mosaic-veil: 0.5;
  --earn-veil: 0.90;
  --glow-green: 0.13;
  --glow-violet: 0.1;
  /* Darkened for the light theme, where the ribbon sits on white glass. */
  --cat-1: #5f8f00;
  --cat-2: #0a7fa8;
  --cat-3: #7c3aed;
  --cat-4: #0c8f68;
  --cat-5: #a87400;
  --cat-6: #c2410c;
  --cat-7: #be1250;
  --cat-8: #2b53c7;
  --cat-9: #c62828;
  --cat-10: #a21caf;

  --rim-key: rgba(110, 150, 0, 0.2);
  --rim-fill: rgba(118, 82, 201, 0.15);
  --rim-halo: rgba(255, 255, 255, 0.55);
  --fig-shadow: rgba(16, 21, 19, 0.26);
  --shadow-card: 0 18px 48px rgba(16, 21, 19, 0.12);

  /* On a light surface the lit edge is the paper and the dark edge is the
     contact shadow, so both invert. */
  --bevel-lit: rgba(255, 255, 255, 0.95);
  --bevel-dark: rgba(16, 21, 19, 0.16);
  --card-lift:
    0 1px 1px rgba(16, 21, 19, 0.1),
    0 4px 8px rgba(16, 21, 19, 0.07),
    0 16px 30px rgba(16, 21, 19, 0.08),
    0 36px 64px rgba(16, 21, 19, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --card-lift-hover:
    0 1px 1px rgba(16, 21, 19, 0.12),
    0 6px 12px rgba(16, 21, 19, 0.09),
    0 24px 44px rgba(16, 21, 19, 0.1),
    0 48px 86px rgba(16, 21, 19, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* ---------- base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
}

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

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 6px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- header ---------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 10px 10px 0;
}

.hdr__bar {
  position: relative; /* anchors the mobile menu panel */
  height: var(--header-h);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 14px 0 22px;
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-card);
  background: var(--glass-head);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: var(--shadow-card);
}

.brand {
  /* inline-flex, or the 34px mark sits on its own line above the wordmark. */
  display: inline-flex;
  align-items: center;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 700;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.brand em { font-style: normal; color: var(--green); }

/* Brand mark: a chevron in a rounded tile, green over violet like the reference. */
.brand__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-right: 10px;
  border-radius: 10px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--green) 26%, transparent), color-mix(in srgb, var(--violet) 46%, transparent));
  color: var(--green);
}

.brand__mark svg { width: 21px; height: 21px; }

.nav {
  display: flex;
  gap: clamp(14px, 2vw, 34px);
  margin: 0 auto;
}

.nav a {
  position: relative;
  padding: 6px 2px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  transition: color 0.18s ease;
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 0.18s ease;
}

.nav a:hover { color: var(--text); }
.nav a:hover::after { transform: scaleX(1); }

.hdr__right { display: flex; align-items: center; gap: 10px; margin-left: auto; }

.livepill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-2);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 70%, transparent);
  animation: pulse 2.4s ease-out infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.btn--green {
  height: 42px;
  padding: 0 18px;
  background: var(--green);
  color: var(--green-ink);
  font-size: 14.5px;
  box-shadow: 0 0 28px color-mix(in srgb, var(--green) 22%, transparent);
}

.btn--green:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 36px color-mix(in srgb, var(--green) 34%, transparent);
}

.iconbtn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  cursor: pointer;
}

.iconbtn .icon { width: 17px; height: 17px; }
.iconbtn:hover { border-color: var(--border-strong); }

:root:not([data-theme="light"]) .iconbtn [data-sun] { display: none; }
:root[data-theme="light"] .iconbtn [data-moon] { display: none; }

.burger, .nav__theme { display: none; }

/* ---------- hero shell ---------- */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(100svh - var(--header-h));
  isolation: isolate;
  overflow: hidden;
}

.hero__inner {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vh, 28px) 32px clamp(14px, 2.2vh, 26px);
}

/* layer 1 — grid + grain */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -5;
  background:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 48px);
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* layer 2 — the 100+-niche mosaic */
.mosaic {
  position: absolute;
  inset: -6% -8%;
  z-index: -4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  /* Saturated and contrasty but DARKER, not brighter: the wall has to read as
     real screenshots while still losing to the headline. Brightening it was
     what made the hero look washed out. */
  filter: blur(0.6px) saturate(1.3) contrast(1.16) brightness(0.86);
  pointer-events: none;
}

.mrow {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}

.mrow:nth-child(odd) { margin-left: -64px; }
.mrow:nth-child(3n) { margin-left: -112px; }
.mrow:nth-child(4n) { margin-left: -30px; }

.tile {
  position: relative;
  flex: 0 0 auto;
  width: clamp(116px, 10.4vw, 182px);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: var(--surface-2);
  overflow: hidden;
}

.tile img {
  width: 100%;
  /* `height: auto` is load-bearing: the width/height attributes on the <img>
     are a presentational hint, and a used height would beat aspect-ratio and
     render every thumbnail as a 240px-tall strip. */
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  opacity: 1;
}

.tile span {
  /* Over the image, not under it: in the reference the niche name sits on the
     thumbnail itself, which is what makes the wall read as a shelf of sites. */
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72), transparent);
  white-space: nowrap;
  overflow: hidden;
}

.tile .icon { width: 11px; height: 11px; flex: 0 0 auto; color: var(--green); opacity: 1; }

/* layer 2b — the veil that keeps the mosaic behind the copy */
.scrim {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    /* the wall thins out toward the floor, where the groups and the cards are */
    linear-gradient(
      180deg,
      transparent 34%,
      rgba(var(--scrim), 0.5) 70%,
      rgba(var(--scrim), 0.8) 100%
    ),
    /* vignette — the mockup's wall is darkest at the frame, which is what stops
       the tiles competing with the figures standing in front of them */
    radial-gradient(
      ellipse 78% 72% at 50% 50%,
      transparent 52%,
      rgba(var(--scrim), 0.55) 100%
    ),
    radial-gradient(
      ellipse 50% 44% at 50% 42%,
      rgba(var(--scrim), 1) 0%,
      rgba(var(--scrim), 0.98) 48%,
      rgba(var(--scrim), 0.76) 80%,
      rgba(var(--scrim), var(--mosaic-veil)) 100%
    );
}

/* layer 3 — glow */
.glow {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--green) calc(var(--glow-green) * 100%), transparent), transparent 28%),
    radial-gradient(ellipse 70% 55% at 50% 50%, color-mix(in srgb, var(--violet) calc(var(--glow-violet) * 100%), transparent), transparent 62%);
}

/* ---------- layer 4 — copy ---------- */
.stage {
  position: relative;
  z-index: 3;
  width: min(var(--stage-w), 100%);
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 11px 26px;
  border: 1px solid color-mix(in srgb, var(--violet) 52%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--violet) 22%, transparent),
      color-mix(in srgb, var(--green) 12%, transparent)
    ),
    var(--surface-2);
  /* The glow is what makes it read as a badge rather than a caption. */
  box-shadow:
    0 0 26px color-mix(in srgb, var(--violet) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--text);
  font-size: clamp(11.5px, 0.86vw, 12.5px);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* The line is a sentence now, not two words, so it has to be allowed to wrap
     — nowrap on a pill this long pushes the hero sideways on every phone. */
  white-space: normal;
  text-align: center;
  line-height: 1.5;
}


.eyebrow .icon { width: 14px; height: 14px; flex: 0 0 auto; fill: var(--gold); stroke: none; }
.eyebrow span { color: color-mix(in srgb, var(--text) 78%, transparent); font-weight: 500; }
.eyebrow em { font-style: normal; color: var(--green); font-weight: 800; }

.eyebrow b { color: var(--text); font-weight: 800; }

/* The separator between the two halves of the line. */
.eyebrow i {
  font-style: normal;
  color: color-mix(in srgb, var(--text) 42%, transparent);
  font-weight: 700;
}

/* The bracketed tag at the end — the part that should still be read when the
   rest of the line is skimmed. Underline removed; it is a label, not a link. */
.eyebrow u {
  padding: 2px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 18%, transparent);
  color: var(--green);
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}

/* The line is an announcement, and an announcement broken over three lines
   inside a pill reads as a caption. The copy stage is 760px wide and the
   sentence is about 1,050px at a readable size, so above the width where the
   flanking figures leave room the pill steps outside the column and centres
   itself on the stage instead of fitting inside it. Below that it goes back to
   wrapping — nowrap on a pill this long pushes the hero sideways on a phone. */
@media (min-width: 1024px) {
  .eyebrow {
    display: flex;
    left: 50%;
    width: max-content;
    max-width: calc(100vw - 72px);
    padding: 12px 24px;
    transform: translateX(-50%);
    font-size: clamp(11px, 0.97vw, 15px);
    font-weight: 700;
    /* Uppercase at 0.07em is what made the sentence too wide to set on one
       line; tightening it buys back about 40px at no cost to legibility. */
    letter-spacing: 0.045em;
    white-space: nowrap;
  }

  .eyebrow .icon { width: 16px; height: 16px; }
  .eyebrow span { font-weight: 600; }
}

/* Below that the pill is inline-flex, which turns each phrase into its own
   narrow column — three cramped towers instead of a sentence. Under the
   breakpoint it is laid out as prose, with the star riding inline, and it
   drops the full pill radius because a 999px radius on four lines of text is
   a stadium, not a badge. */
@media (max-width: 1023px) {
  .eyebrow {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 20px;
    line-height: 1.55;
  }

  .eyebrow .icon { vertical-align: -0.2em; margin-right: 7px; }
  .eyebrow u { display: inline-block; }
}

/* ---- the effects ---- */
/* One pass of light across the pill every six seconds. Apart from the category
   ribbon it is the only moving thing above the fold, so it is slow and it
   rests for most of the cycle. */
.eyebrow { overflow: hidden; }

.eyebrow::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -42%;
  z-index: -1;
  width: 34%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--green) 24%, transparent), transparent);
  animation: eb-sweep 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes eb-sweep {
  0%, 58% { transform: translateX(0); }
  100% { transform: translateX(430%); }
}

.eyebrow .icon { animation: eb-star 2.8s ease-in-out infinite; }

@keyframes eb-star {
  0%, 100% { transform: scale(1); opacity: 0.82; }
  50% { transform: scale(1.18); opacity: 1; }
}

/* The version number is the one word in the line that is news. */
.eyebrow em { text-shadow: 0 0 14px color-mix(in srgb, var(--green) 55%, transparent); }

/* And the tag at the end gets a ring that leaves, rather than a glow that
   breathes — a pulse that never resolves is the thing that gets tiring. */
.eyebrow u { animation: eb-tag 2.8s ease-out infinite; }

@keyframes eb-tag {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 44%, transparent); }
  70%, 100% { box-shadow: 0 0 0 10px transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .eyebrow::after,
  .eyebrow .icon,
  .eyebrow u { animation: none; }
}

.h1 {
  margin: 20px 0 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  /* Four lines, not three: the reference's headline is four and far heavier,
     and at 25 characters a line this copy reaches 60px in the same stage. */
  /* 5.4vw, not 4.1: at 4.1 the 32px floor held all the way to 780px, so the
     headline was the same size on a phone and on a tablet. */
  font-size: clamp(30px, 5.4vw, 60px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}

.h1 .hl {
  position: relative;
  color: var(--green);
  white-space: nowrap;
}

.h1 .hl svg {
  position: absolute;
  left: -1%;
  bottom: -0.17em;
  width: 103%;
  height: 0.3em;
  overflow: visible;
  stroke: var(--green);
  fill: none;
  stroke-width: 3.6;
  stroke-linecap: round;
}

/* The approved mockup breaks the headline in three; below that width the
   natural wrap reads better than a forced one. */
@media (max-width: 899px) {
  .brk { display: none; }
}

.lede {
  margin: 22px auto 0;
  max-width: 620px;
  color: var(--muted);
  font-size: clamp(15.5px, 1.18vw, 17px);
}

.ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 26px;
}

.btn--hero {
  height: 58px;
  padding: 0 30px;
  background: var(--green);
  color: var(--green-ink);
  font-size: 17px;
  letter-spacing: 0.01em;
  box-shadow: 0 0 28px color-mix(in srgb, var(--green) 22%, transparent);
}

.btn--hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 40px color-mix(in srgb, var(--green) 38%, transparent);
}

.btn--ghost {
  height: 58px;
  padding: 0 26px;
  border-color: var(--border-strong);
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text);
  font-size: 15.5px;
  letter-spacing: 0.04em;
}

.btn--ghost:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--green) 50%, transparent); }

.btn--ghost .play {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
}

.proof {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 14.5px;
}

.stars { display: inline-flex; gap: 3px; color: var(--gold); }
.stars .icon { width: 17px; height: 17px; fill: currentColor; stroke: none; }

/* ---------- layer 5 — the niche orbit ---------- */
.orbit {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.fig {
  position: absolute;
  margin: 0;
  display: flex;
  flex-direction: column;
  /* Deliberately static. These are product photography, not decoration, and a
     drifting cut-out reads as a bug on a page whose whole promise is "finished". */
  --rim-x: 1.5px;
}

.fig--r { --rim-x: -1.5px; }

/* The rim light the handoff asks for, done here rather than in the render: a
   green-and-violet rim baked into the plate is exactly what the chroma key
   strips off, and a glow in CSS can be re-tuned without spending credits. */
.fig::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  z-index: -1;
  width: 190%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  filter: blur(34px);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--green) 26%, transparent) 0%, transparent 44%),
    radial-gradient(circle, color-mix(in srgb, var(--violet) 34%, transparent) 0%, transparent 64%);
}

.fig--tarot::before {
  width: 205%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--violet) 62%, transparent) 0%, transparent 58%),
    radial-gradient(circle, color-mix(in srgb, var(--gold) 18%, transparent) 0%, transparent 32%);
}

.fig img {
  /* These ship pre-composed: their own crop, their own lime/violet glow baked
     into the alpha edge. So no cover-crop, no mask and no CSS rim light — two
     glows read as a halo. Height drives the size, the width follows, and
     whatever does not fit beside the copy bleeds off the frame. */
  height: clamp(440px, 88vh, 860px);
  width: auto;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.5));
}

:root[data-theme="light"] .mosaic { filter: blur(0.6px) saturate(0.78) contrast(1.06) brightness(1.08); }

/* Inner edge pinned to the stage so a group never reaches the copy; bottom
   edge on the floor of the hero so the ribbon cuts across them. */
.fig { bottom: 0; top: auto; }
.fig--left  { right: calc(50% + var(--stage-w) / 2 + 14px); left: auto; }
.fig--right { left: calc(50% + var(--stage-w) / 2 + 14px); right: auto; }

/* ---------- layer 6 — the hero panel ---------- */
/* Replaces the three floating step cards and the loose star line under the
   buttons. Three separate cards made the reader decide what each one was
   before reading it; one panel with a rule across it reads as a single claim
   with its proof above and the route to it below. */
.hpanel {
  position: relative;
  z-index: 4;
  width: min(1060px, 94%);
  margin-top: clamp(14px, 2vh, 26px);
  padding: clamp(11px, 1.3vw, 16px) clamp(10px, 1.4vw, 20px);
  border: 1px solid transparent;
  border-radius: 24px;
  /* Denser than the page's usual glass: the panel sits over two lit figures,
     and at the standard 0.8 the tarot reader's dress came through the text. */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--page) 80%, transparent) 0%,
      color-mix(in srgb, var(--page) 90%, transparent) 100%) padding-box,
    linear-gradient(130deg,
      var(--violet) 0%,
      color-mix(in srgb, var(--green) 78%, transparent) 46%,
      color-mix(in srgb, var(--violet) 92%, transparent) 100%) border-box;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  box-shadow: var(--shadow-card), 0 0 56px color-mix(in srgb, var(--violet) 34%, transparent);
  text-align: center;
  pointer-events: none;
}

.hfacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}

.hfact {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 13px);
  padding: 2px clamp(8px, 1.5vw, 22px);
  text-align: left;
}

.hfact + .hfact { border-left: 1px solid var(--border); }

.hfact > .ficon,
.hfact > .icon {
  flex: 0 0 auto;
  width: clamp(20px, 1.9vw, 26px);
  height: clamp(20px, 1.9vw, 26px);
  color: var(--green);
}

.hfact__t { min-width: 0; }

.hfact__t b {
  display: block;
  font-size: clamp(12.5px, 1.2vw, 16px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.hfact__t small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: clamp(10.5px, 0.98vw, 12.5px);
  line-height: 1.35;
}

/* The middle cell is the only claim on the panel that other people made, so
   it is centred and wears its stars above the line rather than beside it. */
.hfact--score {
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.hfact--score .hfact__t { text-align: center; }
.hfact--score .stars .icon { width: 15px; height: 15px; }

/* ---- the three steps ---- */
.hsteps {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(6px, 1.2vw, 18px);
  margin: clamp(9px, 1.2vw, 14px) 0 0;
  padding: clamp(9px, 1.2vw, 14px) clamp(8px, 1.5vw, 22px) 0;
  border-top: 1px solid var(--border);
  list-style: none;
}

.hstep {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 13px);
  text-align: left;
}

/* The rule between steps is what makes them a sequence; without it three
   numbered blocks read as three options to pick from. */
.hstep + .hstep::before {
  content: "";
  flex: 0 0 auto;
  width: clamp(18px, 5vw, 82px);
  height: 2px;
  margin-right: clamp(6px, 1.2vw, 18px);
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--green) 62%, transparent), transparent);
}

.hstep__num {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: clamp(32px, 3.2vw, 44px);
  height: clamp(32px, 3.2vw, 44px);
  border: 1px solid color-mix(in srgb, var(--green) 42%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--green) 20%, transparent), transparent 72%);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(13px, 1.25vw, 17px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--green);
}

.hstep__t { min-width: 0; }

.hstep__t b {
  display: block;
  font-size: clamp(12.5px, 1.15vw, 15.5px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.018em;
}

.hstep__t small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: clamp(10.5px, 0.95vw, 12.5px);
  line-height: 1.35;
}

/* ---------- layer 7 — marquee ---------- */
.marquee {
  position: relative;
  z-index: 5;
  margin: 0 10px 10px;
  display: flex;
  align-items: center;
  gap: 16px;
  height: 58px;
  padding-left: 18px;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: var(--glass-head);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}

.marquee__badge {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: color-mix(in srgb, var(--green) 18%, transparent);
  color: var(--green);
}

.marquee__badge .icon { width: 15px; height: 15px; }

.marquee__window {
  position: relative;
  flex: 1;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 44px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 20px, #000 calc(100% - 44px), transparent 100%);
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: slide 46s linear infinite;
}

.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__track ul {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
  padding: 0 10px;
  list-style: none;
  font-size: clamp(14px, 1.05vw, 17px);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text);
  white-space: nowrap;
}

.marquee__track li:nth-child(1)  { color: var(--cat-1); }
.marquee__track li:nth-child(2)  { color: var(--cat-2); }
.marquee__track li:nth-child(3)  { color: var(--cat-3); }
.marquee__track li:nth-child(4)  { color: var(--cat-4); }
.marquee__track li:nth-child(5)  { color: var(--cat-5); }
.marquee__track li:nth-child(6)  { color: var(--cat-6); }
.marquee__track li:nth-child(7)  { color: var(--cat-7); }
.marquee__track li:nth-child(8)  { color: var(--cat-8); }
.marquee__track li:nth-child(9)  { color: var(--cat-9); }
.marquee__track li:nth-child(10) { color: var(--cat-10); }

/* nth-child, not a class per item: the list is repeated four times to make the
   loop seamless, so position is the only thing stable across the copies.
   The separators go neutral — a green dot among ten colours is just an
   eleventh colour competing with them. */
.marquee__track li::after {
  content: "·";
  margin-left: 24px;
  color: color-mix(in srgb, var(--text) 38%, transparent);
  font-weight: 700;
}

@keyframes slide {
  from { transform: translateX(0); }
  /* One copy of four. Reset lands exactly on the next copy, so the join is
     invisible and three copies are still on screen when it happens. */
  to { transform: translateX(-25%); }
}

/* ---------- responsive ---------- */
@media (max-width: 1439px) {
  --stage-w: 680px;
}

/* Between 1024 and 1279 the flanking figures are still full size but the page
   is not: pull the copy column in so nothing lands on the headline. */
@media (max-width: 1279px) {
  --stage-w: 580px;
  .fig img { height: clamp(280px, 56vh, 470px); }
}

@media (max-width: 1023px) {
  --stage-w: 560px;
  .fig img { height: clamp(230px, 44vh, 350px); }
  .nav, .livepill { display: none; }
  .burger { display: inline-grid; }

  /* The hamburger drops the same five links as a panel under the bar. */
  .nav--open {
    position: absolute;
    top: calc(var(--header-h) + 8px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 10px 18px 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    /* Opaque, not glass: a translucent panel over a photographic hero is
       unreadable, and this one has to be read. */
    background: var(--surface);
    box-shadow: var(--shadow-card);
  }

  .nav--open a { font-size: 16px; padding: 9px 2px; }
  .nav--open a::after { display: none; }

  /* The handoff puts the theme switch inside the menu on small screens. */
  #theme { display: none; }
  .nav__theme { display: inline-grid; margin-top: 10px; }
}

/* The narrowest phones still in use. "ViralVault AI 2.0" plus a CTA plus the
   hamburger is 10px wider than a 320px screen, which gives the whole page a
   sideways scroll; trimming the bar's own padding and the CTA buys it back. */
@media (max-width: 360px) {
  .hdr { padding: 8px 8px 0; }
  .hdr__bar { padding: 0 8px 0 12px; gap: 8px; }
  .hdr__right { gap: 8px; }
  .brand { font-size: 17px; }
  .btn--green { height: 36px; padding: 0 10px; font-size: 12.5px; }
}

@media (max-width: 767px) {
  :root { --header-h: 64px; --mosaic-veil: 0.78; }

  .hdr__bar { padding: 0 10px 0 16px; gap: 10px; }
  .btn--green { height: 38px; padding: 0 13px; font-size: 13.5px; white-space: nowrap; }
  .btn--green .icon { display: none; }
  /* The mark costs 44px of header, which is exactly what pushes the bar past
     360px once the wordmark and the CTA are in. The wordmark is the brand. */
  .brand__mark { display: none; }
  .eyebrow { white-space: normal; letter-spacing: 0.06em; }
  .h1 .hl svg { bottom: -0.1em; height: 0.22em; }

  .hero__inner { padding: 26px 16px 24px; }
  .mosaic { opacity: 0.22; }
  --stage-w: 100%;
  .h1 { font-size: clamp(34px, 9.4vw, 46px); }
  .ctas { flex-direction: column; align-items: stretch; }
  .btn--hero, .btn--ghost { width: 100%; }

  /* Stacked under the copy rather than floating over the figures. Three
     columns of facts and three steps in a row are both unreadable here, so
     the panel becomes one column and keeps its rules as separators. */
  .hpanel {
    width: 100%;
    margin-top: 22px;
    padding: 6px 14px 14px;
  }

  .hfacts { grid-template-columns: 1fr; }
  .hfact { padding: 12px 0; }
  .hfact + .hfact { border-left: 0; border-top: 1px solid var(--border); }
  .hfact--score { flex-direction: row; text-align: left; gap: 12px; }
  .hfact--score .hfact__t { text-align: left; }
  .hfact--score .stars { flex: 0 0 auto; }

  .hsteps {
    flex-direction: column;
    align-items: stretch;
    gap: 11px;
    padding: 14px 0 0;
  }

  .hstep + .hstep::before { display: none; }

  .marquee { height: 46px; margin: 18px 10px 10px; }
}

/* Below the width where the header collapses to a hamburger there is no room
   for figures on both flanks without them crowding the headline, so the whole
   orbit becomes one swipeable rail — all six niches, still with their labels. */
@media (max-width: 859px) {
  .orbit { display: none; }

  .rail {
    display: flex;
    gap: 12px;
    width: calc(100% + 32px);
    margin: 30px -16px 0;
    padding: 4px 16px 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .rail::-webkit-scrollbar { display: none; }

  .railcard {
    flex: 0 0 150px;
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-card);
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    text-align: center;
  }

  .railcard img { height: 118px; width: auto; object-fit: contain; }
  .railcard b { margin-top: 6px; font-size: 13.5px; font-weight: 600; }
  .railcard i { font-style: normal; font-size: 11.5px; color: var(--green); }
}

@media (min-width: 860px) {
  .rail { display: none; }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  /* .fig is not listed: the figures never animate in the first place. */
  .dot { animation: none; }
  .marquee__track { animation: none; }
  .btn:hover { transform: none; }
  * { scroll-behavior: auto; }
}

/* ============================================================
   SHARED SECTION SCAFFOLD
   Everything below the hero is built on these. A new section inherits the
   hero's tokens, type scale and glass treatment by using .sec / .h2 /
   .sec__lede rather than inventing its own — which is what keeps the page
   reading as one page instead of a stack of unrelated blocks.
   ============================================================ */
.sec {
  position: relative;
  isolation: isolate;
  /* The header is sticky, so an anchor jump would otherwise land with the
     section's eyebrow hidden behind it. */
  scroll-margin-top: calc(var(--header-h) + 18px);
  padding: clamp(64px, 9vh, 128px) 32px;
  overflow: hidden;
}

/* The same grid + glow the hero sits on, so the seam between sections is a
   change of content, not a change of material. */
.sec__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 48px);
}

.sec__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 44% at 50% 0%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 70%),
    radial-gradient(ellipse 52% 38% at 50% 100%, color-mix(in srgb, var(--green) 10%, transparent), transparent 72%);
}

.sec__inner {
  width: min(1240px, 100%);
  margin: 0 auto;
  text-align: center;
}

.sec__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 22px;
  padding: 12px 26px;
  border: 1px solid color-mix(in srgb, var(--violet) 55%, transparent);
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--violet) 26%, transparent),
      color-mix(in srgb, var(--green) 13%, transparent)
    ),
    var(--surface-2);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),
    0 0 30px color-mix(in srgb, var(--violet) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: clamp(11px, 1.6vw, 14px);
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sec__eyebrow .icon,
.sec__eyebrow .ficon { width: 16px; height: 16px; color: var(--green); }

/* Solid glyphs. .icon is stroke-only, so filled symbols need the inverse. */
.ficon { width: 1em; height: 1em; fill: currentColor; stroke: none; flex: 0 0 auto; }

/* The badge is what makes a list item read as a row rather than a bullet. */
.ibadge {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.ibadge .ficon { width: 17px; height: 17px; }

.ibadge--old {
  background: color-mix(in srgb, var(--text) 9%, transparent);
  color: color-mix(in srgb, var(--text) 52%, transparent);
}

.ibadge--new {
  background: color-mix(in srgb, var(--green) 20%, transparent);
  color: var(--green);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 32%, transparent);
}

.h2 {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(25px, 5.6vw, 46px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.h2 .hl {
  position: relative;
  display: inline-block;
  color: var(--green);
}

.h2 .hl svg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.14em;
  width: 100%;
  height: 0.24em;
  fill: none;
  stroke: var(--green);
  stroke-width: 7;
  stroke-linecap: round;
}

.sec__lede {
  margin: 18px auto 0;
  max-width: 62ch;
  color: var(--muted);
  font-size: clamp(14.5px, 1.9vw, 17px);
}

.sec__note {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: clamp(26px, 4vh, 44px) 0 0;
  padding: 11px 20px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: var(--text);
  font-size: clamp(13px, 1.7vw, 15.5px);
  font-weight: 600;
}

.sec__note .icon,
.sec__note .ficon { width: 17px; height: 17px; flex: 0 0 auto; color: var(--green); }

/* ---------- section 2 — the comparison ---------- */
.vs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(14px, 2vw, 30px);
  margin-top: clamp(34px, 5vh, 56px);
  text-align: left;
}

.vs__card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3vw, 46px);
  border: 1px solid var(--border-strong);
  border-radius: 28px;
  background: var(--glass);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* The winning card is lit; the other is deliberately flat. */
.vs__card--new {
  border-color: color-mix(in srgb, var(--green) 44%, transparent);
  box-shadow: var(--shadow-card), 0 0 54px color-mix(in srgb, var(--green) 16%, transparent);
}

.vs__card--new::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 70% 50% at 50% 0%, color-mix(in srgb, var(--green) 11%, transparent), transparent 70%);
}

/* The figure sits in the card's bottom-right corner, bleeding off two edges and
   masked out toward the text, so the card reads as a scene rather than a box
   with a photo pasted into it. */
.vs__figure {
  position: absolute;
  right: -6%;
  bottom: -4%;
  z-index: -1;
  width: clamp(150px, 17vw, 260px);
  height: auto;
  opacity: 0.55;
  filter: drop-shadow(0 0 26px var(--rim-halo)) contrast(1.08) saturate(1.1);
  -webkit-mask-image: linear-gradient(to left, #000 42%, transparent 100%);
  mask-image: linear-gradient(to left, #000 42%, transparent 100%);
  pointer-events: none;
}

.vs__tag {
  display: inline-block;
  margin-bottom: 14px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vs__tag--old { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--muted); }
.vs__tag--new { background: var(--green); color: var(--green-ink); }

.vs__head b {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(22px, 1.95vw, 31px);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.vs__head small { display: block; margin-top: 7px; color: var(--muted); font-size: clamp(13.5px, 1.05vw, 16px); }

.vs__list {
  flex: 1;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  align-content: start;
}

.vs__list li {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.35;
}

.vs__list .icon { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; stroke-width: 2.2; }
.vs__card--old .vs__list li { color: color-mix(in srgb, var(--text) 78%, transparent); }
.vs__card--old .vs__list .icon { color: color-mix(in srgb, var(--text) 42%, transparent); }
.vs__card--new .vs__list .icon { color: var(--green); }

.vs__foot {
  margin-top: clamp(22px, 3vh, 32px);
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.vs__price {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(34px, 3.6vw, 54px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
}

.vs__price em {
  /* inline-block, because text-decoration propagates from the ancestor and a
     descendant cannot switch it off any other way — the line was still being
     painted across the "+". */
  display: inline-block;
  font-style: normal;
  margin-left: 7px;
  font-size: 0.38em;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--muted);
  /* Not struck: the rule belongs on the number, not on the suffix. */
  text-decoration: none;
  vertical-align: 0.22em;
}
.vs__price--old { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 2px; }
.vs__price--new { color: var(--green); }
.vs__foot small { display: block; margin-top: 9px; color: var(--muted); font-size: clamp(12.5px, 0.95vw, 14.5px); }

.vs__split { display: grid; place-items: center; }

.vs__split i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-2);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--muted);
}

@media (max-width: 899px) {
  .sec { padding: clamp(48px, 7vh, 80px) 18px; }
  .vs { grid-template-columns: 1fr; gap: 14px; }
  .vs__split { display: none; }
  .vs__figure { width: 44%; opacity: 0.4; }
  .ibadge { width: 30px; height: 30px; border-radius: 9px; }
  .ibadge .ficon { width: 15px; height: 15px; }
  .h2 .hl svg { bottom: -0.08em; height: 0.2em; }
  .h2 .brk { display: none; }
}

/* ---------- section 3 — the niche grid ---------- */
/* Wider than the shared measure. The rest of the page is a reading column; this
   one is a gallery, and a gallery wants the extra width. */
.sec--niches .sec__inner { width: min(1420px, 100%); }

.nchips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: clamp(28px, 4vh, 44px) auto 0;
}

.nchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.nchip i {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: color-mix(in srgb, var(--text) 45%, transparent);
}

.nchip:hover { color: var(--text); border-color: color-mix(in srgb, var(--green) 45%, transparent); }

.nchip.is-on {
  background: var(--green);
  border-color: var(--green);
  color: var(--green-ink);
}

.nchip.is-on i { color: color-mix(in srgb, var(--green-ink) 62%, transparent); }

.nichgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: clamp(14px, 1.5vw, 24px);
  margin: clamp(26px, 4vh, 40px) 0 0;
  padding: 0;
  list-style: none;
}

.nich {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 16px;
  background: var(--surface-2);
  text-align: left;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.nich img {
  display: block;
  width: 100%;
  /* height:auto is load-bearing: the width/height attributes are a
     presentational hint and a used height would beat aspect-ratio, rendering
     every thumbnail as a 198px strip. Same trap as the hero mosaic. */
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.nich b {
  display: block;
  padding: 11px 13px 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.nich small {
  display: block;
  padding: 2px 13px 12px;
  color: var(--muted);
  font-size: 11.5px;
}

.nich:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--green) 55%, transparent);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.4), 0 0 30px color-mix(in srgb, var(--green) 14%, transparent);
}

/* Hidden by the filter. display:none rather than opacity so the grid reflows
   and the hidden cards leave no gaps behind. */
.nich[hidden] { display: none; }

@media (max-width: 899px) {
  /* 190 keeps tablets at three big cards rather than four cramped ones — 165
     was producing cards narrower than the desktop ones. */
  .nichgrid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
  .nich b { font-size: 15px; padding: 11px 12px 0; }
  .nich small { padding: 4px 12px 13px; font-size: 12.5px; }
  .nchip { padding: 8px 13px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .nich, .nchip { transition: none; }
  .nich:hover { transform: none; }
}

/* ============================================================
   DEPTH + TEXTURE PASS
   Flat, evenly-spaced, single-shadow surfaces are what make a page read as
   generated. Three things fix it and all three are below: film grain over the
   sections, layered shadows (a tight contact shadow plus a wide ambient one,
   the way real light falls), and a top inset highlight so a card has an edge
   catching the light rather than a painted-on border.
   ============================================================ */
.sec::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* One hairline where two sections meet, lit from the left, so the page reads as
   panels rather than one endless scroll. */
.sec + .sec::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 22%, var(--border-strong) 78%, transparent);
}

/* ---------- category colours, shared with the hero ribbon ---------- */
/* The same niche family is the same colour in the ribbon, on the filter chip
   and on the card. That consistency is cheap to build and is most of what
   separates a designed system from a themed one. */
.nich--fitness  { --cat: var(--cat-1); }
.nich--local    { --cat: var(--cat-2); }
.nich--spirit   { --cat: var(--cat-3); }
.nich--tech     { --cat: var(--cat-4); }
.nich--money    { --cat: var(--cat-5); }
.nich--food     { --cat: var(--cat-6); }
.nich--outdoors { --cat: var(--cat-7); }
.nich--hobbies  { --cat: var(--cat-8); }
.nich--family   { --cat: var(--cat-9); }
.nich--beauty   { --cat: var(--cat-10); }

.ndot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--cat, var(--green));
  box-shadow: 0 0 9px var(--cat, var(--green));
  vertical-align: 1px;
}

.ndot--all { background: var(--green); box-shadow: 0 0 9px var(--green); }
.nchip.is-on .ndot { background: var(--green-ink); box-shadow: none; }

/* ---------- the niche card, rebuilt ---------- */
.nich {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  text-align: left;
  /* Contact shadow, ambient shadow, then the lit top edge. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 14px 30px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.2s ease,
              box-shadow 0.2s ease;
}

/* The thumbnail gets its own frame inside the card, so the card has a margin of
   surface around the image instead of the image running to the border. */
.nich__shot {
  position: relative;
  display: block;
  margin: 9px 9px 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--page);
}

.nich img {
  display: block;
  width: 100%;
  /* height:auto is load-bearing: the width/height attributes are a
     presentational hint, and a used height beats aspect-ratio — every
     thumbnail would render as a 198px strip. Same trap as the hero mosaic. */
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* A wash of the category colour over the photo, so a row of thumbnails reads as
   one family rather than 62 unrelated stock shots. */
.nich__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--cat, var(--green)) 30%, transparent) 100%);
  opacity: 0.34;
  transition: opacity 0.2s ease;
}

.nich b {
  display: block;
  padding: 15px 17px 0;
  font-size: 17.5px;
  font-weight: 650;
  letter-spacing: -0.018em;
}

.nich small {
  display: block;
  padding: 5px 17px 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}

.nich:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--cat, var(--green)) 62%, transparent);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 24px 46px rgba(0, 0, 0, 0.44),
    0 0 36px color-mix(in srgb, var(--cat, var(--green)) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nich:hover img { transform: scale(1.06); }
.nich:hover .nich__shot::after { opacity: 0.62; }

/* ---------- chips ---------- */
.nchip {
  padding: 10px 17px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.nchip:hover { border-color: color-mix(in srgb, var(--cat, var(--green)) 60%, transparent); }

.nchip.is-on {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 22px color-mix(in srgb, var(--green) 34%, transparent);
}

@media (max-width: 899px) {
  .nich__shot { margin: 5px 5px 0; border-radius: 9px; }
  .nich b { font-size: 15px; padding: 11px 12px 0; }
  .nich small { padding: 4px 12px 13px; font-size: 12.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .nich img { transition: none; }
  .nich:hover img { transform: none; }
}

@media (max-width: 560px) {
  .nichgrid { grid-template-columns: repeat(2, 1fr); gap: 11px; }
  .nich b { font-size: 14px; padding: 10px 11px 0; }
  .nich small { padding: 3px 11px 11px; font-size: 12px; }
}

/* ---------- section 5 — what's inside every site ---------- */
/* A bento on a 6-column track, not a uniform 3x3. The two claims that carry the
   offer take half a row each; the supporting three take a third. Equal cards
   would say every one of these matters equally, which is not true. */
.bento {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: clamp(13px, 1.4vw, 22px);
  margin: clamp(32px, 5vh, 54px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.feat--3 { grid-column: span 3; }
.feat--2 { grid-column: span 2; }

.feat {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.3vw, 32px);
  border: 1px solid var(--border-strong);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
  /* Same layered light as the niche cards: contact shadow, ambient shadow,
     lit top edge. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 16px 34px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  overflow: hidden;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

/* The two lead cards carry the hero's glow, so the eye lands on them first. */
.feat--lead::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 72% 54% at 18% 0%, color-mix(in srgb, var(--green) 12%, transparent), transparent 68%);
}

.feat__ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--violet) 26%, transparent);
  color: #cbb6ff;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--violet) 34%, transparent);
}

.feat--lead .feat__ico {
  background: color-mix(in srgb, var(--green) 20%, transparent);
  color: var(--green);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 36%, transparent);
}

.feat__ico .ficon { width: 23px; height: 23px; }

.feat b {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(18px, 1.45vw, 23px);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.18;
}

.feat p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: clamp(13.5px, 1.02vw, 15.5px);
  line-height: 1.5;
}

/* A strip of real niche thumbnails along the bottom of the lead cards — the
   same images the gallery uses, so the claim is shown rather than asserted.
   It bleeds off the right edge on purpose: a strip that stops short reads as a
   list of five, one that runs off reads as "and so on". */
.feat__strip {
  position: relative;
  display: block;
  margin: 0 -32px 0 0;
  overflow: hidden;
  /* Fades at both ends so the loop has no visible entry or exit point. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 26px, #000 calc(100% - 64px), transparent 100%);
}

.feat__track {
  display: flex;
  gap: 9px;
  width: max-content;
  padding: 2px 0;
  animation: striprun 34s linear infinite;
}

/* Opposite directions on the two cards, so the pair reads as one considered
   composition rather than two copies of the same effect. */
.feat__track--rev { animation-name: striprunrev; }

.feat:hover .feat__track { animation-play-state: paused; }

@keyframes striprun {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

@keyframes striprunrev {
  from { transform: translateX(-25%); }
  to { transform: translateX(0); }
}

.feat__strip img {
  flex: 0 0 auto;
  width: 94px;
  height: 66px;
  object-fit: cover;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

.feat:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--green) 44%, transparent);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 26px 48px rgba(0, 0, 0, 0.4),
    0 0 34px color-mix(in srgb, var(--green) 14%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Three per row, then two, then one. The spans have to be reset at each step or
   a span-3 card in a 2-column track overflows its row. */
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .feat--3 { grid-column: span 2; }
  .feat--2 { grid-column: span 2; }
}

@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr; }
  .feat--3, .feat--2 { grid-column: span 1; }
  .feat__strip { margin-right: -24px; }
  .feat__strip img { width: 78px; height: 55px; }
}

@media (prefers-reduced-motion: reduce) {
  .feat { transition: none; }
  .feat:hover { transform: none; }
}

/* ============================================================
   PER-SECTION LIGHT
   One background repeated down a long page is what makes it feel like a
   template. Each section below keeps the same materials — the grid, the grain,
   the green and violet — but lights them from a different direction, at a
   different grid pitch. The page gets weather without getting inconsistent.
   ============================================================ */

/* §2 — the comparison. Lit from above: the question arrives before the answer. */
.sec--vs .sec__bg {
  background:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 48px);
}

.sec--vs .sec__bg::after {
  background:
    radial-gradient(ellipse 58% 42% at 50% 0%, color-mix(in srgb, var(--violet) 20%, transparent), transparent 70%),
    radial-gradient(ellipse 48% 36% at 72% 100%, color-mix(in srgb, var(--green) 13%, transparent), transparent 72%);
}

/* §3 — the gallery. A wider pitch and a low floor glow, so 120 thumbnails sit
   on something rather than float on black. */
.sec--niches .sec__bg {
  background:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 72px);
}

.sec--niches .sec__bg::after {
  background:
    radial-gradient(ellipse 70% 30% at 50% 102%, color-mix(in srgb, var(--green) 15%, transparent), transparent 70%),
    radial-gradient(ellipse 40% 34% at 8% 12%, color-mix(in srgb, var(--violet) 17%, transparent), transparent 72%),
    radial-gradient(ellipse 40% 34% at 92% 12%, color-mix(in srgb, var(--violet) 17%, transparent), transparent 72%);
}

/* §5 — the inventory. A tight pitch and a single raking light from the left,
   which is the direction the bento reads in. */
.sec--inside .sec__bg {
  background:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 34px);
}

.sec--inside .sec__bg::after {
  background:
    linear-gradient(118deg, color-mix(in srgb, var(--violet) 19%, transparent) 0%, transparent 46%),
    radial-gradient(ellipse 54% 40% at 88% 86%, color-mix(in srgb, var(--green) 14%, transparent), transparent 72%);
}

/* ============================================================
   BENTO ALIGNMENT
   The cards were ragged because each one sized itself to its own text. Now the
   icon, the title and the body all start on the same line across a row, and
   anything trailing is pushed to the floor of the card.
   ============================================================ */
.feat b {
  /* Two lines reserved, so a one-line title does not pull its body copy up
     above its neighbours'. text-wrap:balance splits the two lines evenly
     instead of leaving one orphaned word on the second. */
  min-height: 2.36em;
  text-wrap: balance;
}

.feat p {
  /* Three lines reserved on the supporting cards for the same reason. */
  text-wrap: pretty;
}

.feat--2 p { min-height: 3em; }

/* Anything after the body — the thumbnail strips — sits on the card floor, so
   both lead cards line their strips up regardless of copy length. */
.feat__strip { margin-top: auto; padding-top: 22px; }

@media (prefers-reduced-motion: reduce) {
  .feat__track { animation: none; }
}

@media (max-width: 760px) {
  .feat b { min-height: 0; }
  .feat--2 p { min-height: 0; }
}

/* ---------- section 5 — flanking ribbons ---------- */
/* The copy column narrows here so the flanks can hold a column of thumbnails
   at a readable size. */
.sec--inside .sec__inner { width: min(1120px, 100%); }

.bentowrap { position: relative; }

/* Top and bottom of this box are the card line and the card floor, which is
   what the ribbons are measured against — no section-relative guesswork. */
.vrib {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: min(300px, calc((100vw - 1120px) / 2 - 26px));
  overflow: hidden;
  /* Faded at both ends, so the loop has no visible entry or exit. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%);
  pointer-events: none;
}

.vrib--l { right: 100%; margin-right: 26px; }

.vrib--r { left: 100%; margin-left: 26px; }

.vrib__track {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Four copies, shifted by one. Same arithmetic as the horizontal ribbons:
     the reset lands exactly on the next copy, so the join is invisible. */
  animation: vribdown 46s linear infinite;
}

.vrib--r .vrib__track { animation-name: vribup; }

.vrib img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}

@keyframes vribdown {
  from { transform: translateY(-25%); }
  to { transform: translateY(0); }
}

@keyframes vribup {
  from { transform: translateY(0); }
  to { transform: translateY(-25%); }
}

/* Below 1500 the flank is under ~160px, which is too narrow for a thumbnail to
   read — and because the images scale with that width, the track also stops
   being tall enough to cover the column, which opened a 32px gap at 1400. */
@media (max-width: 1499px) {
  .vrib { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vrib__track { animation: none; }
}

/* ---------- section 5 — background ---------- */
/* Its own weather: two broad aurora washes behind the bento instead of the
   raking light, so this section reads as the open, everything-included one. */
.sec--inside .sec__bg::after {
  background:
    radial-gradient(ellipse 40% 46% at 5% 40%, color-mix(in srgb, var(--violet) 24%, transparent), transparent 68%),
    radial-gradient(ellipse 40% 46% at 95% 60%, color-mix(in srgb, var(--green) 13%, transparent), transparent 68%),
    radial-gradient(ellipse 80% 60% at 50% 50%, transparent 40%, rgba(var(--scrim), 0.62) 100%);
}

/* ---------- section 5 — the cards, with real edges ---------- */
/* A flat panel plus one blur is what makes a card look printed on. These get a
   lit top edge, a dark bottom edge and four shadow layers at different
   distances, which is roughly how a real object sits on a surface. */
.feat {
  z-index: 1;
  border-color: transparent;
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) padding-box,
    linear-gradient(
      170deg,
      color-mix(in srgb, var(--text) 26%, transparent) 0%,
      var(--border) 38%,
      rgba(0, 0, 0, 0.5) 100%
    ) border-box;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.6),
    0 4px 8px rgba(0, 0, 0, 0.34),
    0 16px 30px rgba(0, 0, 0, 0.3),
    0 36px 64px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.11),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* The icon tile gets the same bevel, at its own scale. */
.feat__ico {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 6px 14px rgba(0, 0, 0, 0.4);
}

.feat:hover {
  transform: translateY(-5px);
  border-color: transparent;
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) padding-box,
    linear-gradient(
      170deg,
      color-mix(in srgb, var(--green) 62%, transparent) 0%,
      color-mix(in srgb, var(--green) 22%, transparent) 42%,
      rgba(0, 0, 0, 0.5) 100%
    ) border-box;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.6),
    0 6px 12px rgba(0, 0, 0, 0.36),
    0 24px 44px rgba(0, 0, 0, 0.34),
    0 48px 86px rgba(0, 0, 0, 0.3),
    0 0 44px color-mix(in srgb, var(--green) 16%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}

/* ============================================================
   SECTION 5 — ITS OWN SURFACE
   The glows already differed per section, but every section drew the same line
   grid, which is what made them all read as one background. This one is a dot
   field on a lifted panel instead: structurally different at a glance, same
   palette and materials.
   ============================================================ */
.sec--inside {
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 70%, var(--page)) 0%, var(--page) 62%);
}

.sec--inside .sec__bg {
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 13%, transparent) 1px, transparent 0);
  background-size: 26px 26px;
}

/* A hairline rule top and bottom, so the panel has edges. */
.sec--inside::before {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--violet) 60%, transparent) 30%, color-mix(in srgb, var(--green) 55%, transparent) 70%, transparent);
}

/* ---------- the figures, floor to card-line ---------- */

/* ============================================================
   ANNOUNCEMENT BANNERS — five treatments
   Every section that opens with an announcement line uses one of these, and no
   two adjacent sections use the same one. They share the pill, the type and the
   palette; what changes is how each one is lit. Add the variant class alongside
   .eyebrow (hero) or .sec__eyebrow (sections).

      eb--a  gradient outline            §1 hero
      eb--b  frosted, bloomed corners    §2
      eb--c  light bar overhead          §3
      eb--d  spark burst at the star     §5
      eb--e  halo behind the number      §6 onward, then the cycle repeats
   ============================================================ */
.eb--a, .eb--b, .eb--c, .eb--d, .eb--e {
  position: relative;
  isolation: isolate;
}

/* --- A: a lime-to-violet outline, nothing else. The quietest of the five,
       which is why the hero uses it — the headline under it is doing the work. */
.eb--a {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    linear-gradient(92deg, var(--green) 0%, color-mix(in srgb, var(--green) 50%, var(--violet)) 46%, var(--violet) 100%) border-box;
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),
    0 0 30px color-mix(in srgb, var(--violet) 26%, transparent);
}

/* --- B: frosted glass with the light pooling in the corners — lime at the
       head, violet at the tail. Clipped to the pill so the blooms stay inside. */
.eb--b {
  overflow: hidden;
  border: 1px solid var(--border-strong);
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.eb--b::before,
.eb--b::after {
  content: "";
  position: absolute;
  top: -140%;
  height: 380%;
  z-index: -1;
  filter: blur(16px);
}

.eb--b::before {
  left: -14%;
  width: 34%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--green) 34%, transparent), transparent);
}

.eb--b::after {
  right: -14%;
  width: 36%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--violet) 46%, transparent), transparent);
}

/* --- C: the outline again, with a bar of light sitting on top of it, as though
       something above is lighting the pill. */
.eb--c {
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    linear-gradient(92deg, var(--green) 0%, var(--violet) 100%) border-box;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

.eb--c::before {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  top: -2px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, transparent, var(--green) 35%, #fff 50%, var(--green) 65%, transparent);
  box-shadow: 0 0 20px var(--green), 0 0 42px color-mix(in srgb, var(--green) 60%, transparent);
  filter: blur(0.4px);
}

/* --- D: a lens flare breaking out of the star, streaking to the right. */
.eb--d {
  overflow: hidden;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--surface-2), var(--surface-2)) padding-box,
    linear-gradient(92deg, var(--green) 0%, var(--violet) 100%) border-box;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

.eb--d::before {
  content: "";
  position: absolute;
  left: 3%;
  top: 50%;
  width: 15%;
  height: 2px;
  transform: translateY(-50%);
  z-index: -1;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) 90%, transparent), transparent);
  box-shadow: 0 0 22px 5px color-mix(in srgb, var(--gold) 45%, transparent);
}

.eb--d::after {
  content: "";
  position: absolute;
  left: 2%;
  top: 50%;
  width: 46px;
  height: 46px;
  transform: translateY(-50%);
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gold) 80%, transparent), transparent);
  filter: blur(7px);
}

/* --- E: violet outline, with a soft green halo sitting behind the number (or
       behind the icon where the line has no number). */
.eb--e {
  border: 1px solid color-mix(in srgb, var(--violet) 78%, transparent);
  background: var(--surface-2);
  box-shadow:
    0 14px 34px rgba(0, 0, 0, 0.42),
    0 0 26px color-mix(in srgb, var(--violet) 30%, transparent);
}

.eb--e em,
.eb--e .ficon,
.eb--e .icon { position: relative; }

.eb--e em::before,
.eb--e > .ficon:first-child::before,
.eb--e > .icon:first-child::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62px;
  height: 62px;
  transform: translate(-50%, -50%);
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--green) 46%, transparent), transparent);
  filter: blur(6px);
}

/* ============================================================
   ONE CARD EDGE FOR THE WHOLE PAGE
   Every card surface reads the same tokens, so a new section inherits the
   bevel by using one of these classes rather than restating the shadow stack.
   --card-fill is each card's own background; the bevel is painted into the
   border box behind it.
   ============================================================ */
.vs__card,
.nich,
.feat,
.way,
.mkt,
.sell,
.tool,
.who,
.mstat,
.sfact,
.help,
/* The funnel's offer pages (public/oto/*) draw from this same system, so their
   cards join the list rather than restating it in each page's own <style>. */
.ocount,
.ovs__card,
.ostep,
.dniche,
.checks,
.ochange,
.omath li,
.ouse,
.ostack,
.oguard {
  border: 1px solid transparent;
  background:
    var(--card-fill) padding-box,
    linear-gradient(170deg, var(--bevel-lit) 0%, var(--border) 38%, var(--bevel-dark) 100%) border-box;
  box-shadow: var(--card-lift);
}

.way { --card-fill: var(--glass); }
.vs__card { --card-fill: var(--glass); }
.nich,
.feat,
.mkt,
.sell,
.tool,
.who,
.mstat,
.sfact,
.help,
.ocount,
.ochange,
.ostep,
.dniche,
.checks,
.omath li,
.ouse,
.ostack,
.oguard { --card-fill: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); }

.ovs__card { --card-fill: var(--glass); }

/* The winning comparison card keeps its green edge — it is the one thing on
   that row that should not look like its neighbour. */
.vs__card--new {
  background:
    var(--card-fill) padding-box,
    linear-gradient(170deg,
      color-mix(in srgb, var(--green) 70%, transparent) 0%,
      color-mix(in srgb, var(--green) 26%, transparent) 40%,
      var(--bevel-dark) 100%) border-box;
  box-shadow: var(--card-lift), 0 0 54px color-mix(in srgb, var(--green) 16%, transparent);
}

.nich:hover,
.feat:hover {
  box-shadow: var(--card-lift-hover), 0 0 40px color-mix(in srgb, var(--cat, var(--green)) 18%, transparent);
}

.nich:hover,
.feat:hover {
  background:
    var(--card-fill) padding-box,
    linear-gradient(170deg,
      color-mix(in srgb, var(--cat, var(--green)) 62%, transparent) 0%,
      color-mix(in srgb, var(--cat, var(--green)) 22%, transparent) 42%,
      var(--bevel-dark) 100%) border-box;
}

/* The glass pills get the lit top edge too, at their own scale. */
.nchip,
.sec__note,
.feat__ico,
.cardicon,
.ibadge {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.nchip.is-on {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 22px color-mix(in srgb, var(--green) 34%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ---------- section 6 — four ways to win ---------- */
/* Its own weather again: diagonal rules rather than a square grid or a dot
   field, lit from the lower right where the figure stands. */
.sec--ways .sec__bg {
  background-image: repeating-linear-gradient(
    116deg,
    var(--grid-line) 0 1px,
    transparent 1px 58px
  );
}

.sec--ways .sec__bg::after {
  background:
    radial-gradient(ellipse 46% 50% at 86% 78%, color-mix(in srgb, var(--green) 17%, transparent), transparent 66%),
    radial-gradient(ellipse 52% 44% at 18% 8%, color-mix(in srgb, var(--violet) 24%, transparent), transparent 68%);
}

/* The cards and the figure share a row: two columns of cards on the left, the
   owner standing at the right. Cards get half the width each instead of a
   quarter, and she gets a column of her own instead of the margin. */
.waysrow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(250px, 25%, 380px);
  align-items: end;
  gap: clamp(20px, 2.6vw, 44px);
  margin: clamp(34px, 5vh, 56px) 0 0;
}

.waysfig {
  position: relative;
  margin: 0;
  align-self: end;
}

.waysfig img {
  display: block;
  width: 100%;
  height: auto;
  filter:
    drop-shadow(0 0 30px color-mix(in srgb, var(--green) 16%, transparent))
    drop-shadow(0 22px 40px rgba(0, 0, 0, 0.55))
    contrast(1.06) saturate(1.1) brightness(1.03);
}

/* A pool of light under her feet, so she stands on the section rather than
   floating above it. */
.waysfig::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 86%;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 50%;
  filter: blur(16px);
  background: rgba(0, 0, 0, 0.6);
}

@media (max-width: 1100px) {
  .waysrow { grid-template-columns: 1fr; }
  .waysfig { display: none; }
}

.ways {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, 1.5vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.way {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 2.6vw, 38px);
  border-radius: 24px;
  overflow: hidden;
}

/* The step number sits behind the content as a watermark — it orders the four
   without taking a line of its own. */
.way__n {
  position: absolute;
  right: 14px;
  top: 6px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 92px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: color-mix(in srgb, var(--text) 7%, transparent);
  pointer-events: none;
}

.way__ico {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  border-radius: 17px;
  background: color-mix(in srgb, var(--green) 18%, transparent);
  color: var(--green);
}

.way__ico .ficon { width: 27px; height: 27px; }

.way b {
  display: block;
  min-height: 2.3em;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(21px, 1.75vw, 28px);
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.14;
  text-wrap: balance;
}

.way p {
  margin: 13px 0 0;
  color: var(--muted);
  font-size: clamp(14.5px, 1.12vw, 17px);
  font-weight: 500;
  line-height: 1.52;
}

/* 2 -> 1. Four cards divide evenly by both, so no row ends on a stub. */
@media (max-width: 620px) {
  .ways { grid-template-columns: 1fr; }
  .way b { min-height: 0; }
}

/* ---------- section 7 — the live demos ---------- */
/* Weather: two real screenshots, blurred hard and dropped right back, so this
   section sits on the thing it is selling rather than on another gradient. */
.sec--demos { background: var(--page); }

.sec--demos .sec__bg {
  background-image: url("/vv2/assets/demos/demo-recipes.webp"), url("/vv2/assets/demos/demo-yoga.webp");
  background-position: 8% 14%, 92% 70%;
  background-size: 46% auto, 44% auto;
  background-repeat: no-repeat, no-repeat;
  filter: blur(46px) saturate(1.35);
  opacity: 0.32;
  transform: scale(1.12);
}

.sec--demos .sec__bg::after {
  background:
    radial-gradient(ellipse 64% 52% at 50% 46%, rgba(var(--scrim), 0.93) 0%, rgba(var(--scrim), 0.72) 62%, rgba(var(--scrim), 0.52) 100%),
    radial-gradient(ellipse 42% 36% at 50% 104%, color-mix(in srgb, var(--green) 16%, transparent), transparent 70%);
}

.demogrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 26px);
  margin: clamp(34px, 5vh, 56px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.demo { min-width: 0; }

.demo__frame {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) padding-box,
    linear-gradient(170deg, var(--bevel-lit) 0%, var(--border) 38%, var(--bevel-dark) 100%) border-box;
  box-shadow: var(--card-lift);
  color: inherit;
  text-decoration: none;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s ease;
}

/* Browser chrome. The real address is the proof, so it is printed in full and
   never shortened to something vague. */
.demo__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.demo__chrome i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.demo__chrome i:first-child { background: #ff5f57; }
.demo__chrome i:nth-child(2) { background: #febc2e; }
.demo__chrome i:nth-child(3) { background: #28c840; }

.demo__chrome em {
  margin-left: 8px;
  overflow: hidden;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--muted);
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* The window is a fixed viewport; the image inside it is the whole page. */
.demo__window {
  position: relative;
  display: block;
  height: clamp(210px, 20vw, 290px);
  overflow: hidden;
  background: var(--page);
}

.demo__window img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 7s cubic-bezier(0.33, 0, 0.3, 1);
}

/* Pans to its own foot whatever the screenshot's height, because the offset is
   the image's height rather than a guessed pixel figure. */
.demo__frame:hover .demo__window img,
.demo__frame:focus-visible .demo__window img {
  transform: translateY(calc(-100% + clamp(210px, 20vw, 290px)));
}

.demo__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 15px 17px;
}

.demo__foot b {
  display: flex;
  align-items: center;
  font-size: 16.5px;
  font-weight: 650;
  letter-spacing: -0.018em;
}

.demo__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  color: var(--green);
  font-size: 13.5px;
  font-weight: 700;
}

.demo__go .icon { width: 14px; height: 14px; stroke-width: 2.4; transition: transform 0.2s ease; }

.demo__frame:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-lift-hover), 0 0 40px color-mix(in srgb, var(--cat, var(--green)) 20%, transparent);
}

.demo__frame:hover .demo__go .icon { transform: translateX(3px); }
.demo__frame:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* 3 -> 2 -> 1. Six divides evenly by all three, so no row ends on a stub. */
@media (max-width: 1100px) {
  .demogrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .demogrid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .demo__window img,
  .demo__frame,
  .demo__go .icon { transition: none; }
  .demo__frame:hover .demo__window img { transform: none; }
  .demo__frame:hover { transform: none; }
}

/* ---------- section 4 — the walkthrough ---------- */
/* Weather: a dark theatre. Vignetted hard at the edges with a single warm pool
   under the player, so the eye has nowhere to go but the video. */
/* A dark theatre, but only in the dark theme. Hard-coding near-black left a
   slab of night sitting in the middle of a light document. */
.sec--watch { background: var(--page); }
:root:not([data-theme="light"]) .sec--watch { background: #05070a; }

.sec--watch .sec__bg {
  background-image:
    repeating-linear-gradient(to bottom, var(--grid-line) 0 1px, transparent 1px 88px);
}

.sec--watch .sec__bg::after {
  background:
    radial-gradient(ellipse 54% 46% at 50% 58%, color-mix(in srgb, var(--violet) 22%, transparent), transparent 70%),
    radial-gradient(ellipse 70% 60% at 50% 50%, transparent 30%, rgba(var(--scrim), 1) 100%);
}

.player {
  position: relative;
  width: min(980px, 100%);
  margin: clamp(34px, 5vh, 56px) auto 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) padding-box,
    linear-gradient(170deg, var(--bevel-lit) 0%, var(--border) 38%, var(--bevel-dark) 100%) border-box;
  box-shadow: var(--card-lift), 0 0 90px color-mix(in srgb, var(--violet) 22%, transparent);
}

.player__chrome {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.player__chrome i {
  width: 10px;
  height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
}

.player__chrome i:first-child { background: #ff5f57; }
.player__chrome i:nth-child(2) { background: #febc2e; }
.player__chrome i:nth-child(3) { background: #28c840; }

.player__url {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.player__url .icon { width: 12px; height: 12px; color: var(--green); stroke-width: 2.6; }

.player__video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  object-fit: cover;
}

/* Chapter markers. Not links — the video has its own scrubber — so they are a
   list of what you are about to see rather than a navigation nobody asked for. */
.chapters {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(10px, 1.2vw, 18px);
  width: min(980px, 100%);
  margin: clamp(18px, 2.4vh, 26px) auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.chapters li {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.chapters b {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--green);
}

.chapters span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

/* 4 -> 2 -> 1. Four divides evenly by all three. */
@media (max-width: 880px) {
  .chapters { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .chapters { grid-template-columns: 1fr; }
}

/* ============================================================
   LONG GRIDS COLLAPSE
   120 niche cards stack to 11,600px on a phone and 24 demos to 8,300px. That
   is not a layout problem, it is a length problem: nobody scrolls it, and the
   sections after it never get seen. Both open to their full height on request.
   ============================================================ */
.is-clipped {
  max-height: clamp(760px, 92vh, 1040px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
}

.more {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: clamp(18px, 2.6vh, 28px) auto 0;
  padding: 14px 28px;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    var(--surface-2) padding-box,
    linear-gradient(92deg, var(--green), var(--violet)) border-box;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4), 0 0 26px color-mix(in srgb, var(--green) 20%, transparent);
  color: var(--text);
  font: inherit;
  font-size: clamp(13.5px, 1.6vw, 15px);
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.more:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.46), 0 0 34px color-mix(in srgb, var(--green) 30%, transparent); }
.more:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.more .icon { width: 15px; height: 15px; color: var(--green); stroke-width: 2.4; }
.more[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .more { transition: none; }
  .more:hover { transform: none; }
}

/* ---------- section 8 — run it from a phone ---------- */
/* Weather: a soft spotlight from directly overhead onto the three handsets,
   with the grid pulled right back. Nothing here should compete with a screen. */
.sec--pocket { background: linear-gradient(180deg, var(--page) 0%, color-mix(in srgb, var(--violet) 7%, var(--page)) 50%, var(--page) 100%); }

.sec--pocket .sec__bg {
  background-image:
    repeating-linear-gradient(to right, var(--grid-line) 0 1px, transparent 1px 110px);
}

.sec--pocket .sec__bg::after {
  background:
    radial-gradient(ellipse 40% 44% at 50% 52%, color-mix(in srgb, var(--green) 15%, transparent), transparent 68%),
    radial-gradient(ellipse 74% 56% at 50% 50%, transparent 42%, rgba(var(--scrim), 0.68) 100%);
}

.pocket__phones {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(14px, 2.4vw, 46px);
  margin: clamp(34px, 5vh, 56px) 0 0;
}

.phone3 {
  margin: 0;
  flex: 0 0 auto;
  width: clamp(150px, 16vw, 236px);
  text-align: center;
}

/* The middle handset sits forward and a little higher, so three phones read as
   a group rather than a row of clones. */
.phone3:nth-child(2) {
  width: clamp(166px, 18vw, 262px);
  margin-bottom: clamp(16px, 2.6vh, 34px);
  z-index: 1;
}

.phone3__body {
  position: relative;
  display: block;
  padding: 8px;
  border-radius: 30px;
  background: linear-gradient(170deg, #2a313b, #0f141b);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.6),
    0 10px 20px rgba(0, 0, 0, 0.4),
    0 34px 60px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6);
}

.phone3__notch {
  position: absolute;
  left: 50%;
  top: 14px;
  z-index: 2;
  width: 32%;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #0b0f14;
}

.phone3__v {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 19.5;
  object-fit: cover;
  border-radius: 23px;
  background: #000;
}

.phone3 figcaption { margin-top: 16px; }

.phone3 b {
  display: block;
  font-size: clamp(14.5px, 1.5vw, 17px);
  font-weight: 700;
  letter-spacing: -0.018em;
}

.phone3 span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: clamp(12.5px, 1.3vw, 14px);
  line-height: 1.45;
}

/* Supporting points. Three, so the row divides evenly at 3 and 1. */
.pocketpts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  margin: clamp(34px, 5vh, 54px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.pocketpts li {
  padding: clamp(20px, 2.2vw, 30px);
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    var(--glass) padding-box,
    linear-gradient(170deg, var(--bevel-lit) 0%, var(--border) 38%, var(--bevel-dark) 100%) border-box;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--card-lift);
}

.pocketpts .way__ico { margin-bottom: 14px; }

.pocketpts b {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(17px, 1.45vw, 21px);
  font-weight: 700;
  letter-spacing: -0.022em;
}

.pocketpts p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: clamp(13.5px, 1.5vw, 15.5px);
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 860px) {
  /* Two handsets at this width, not three — a 100px-wide phone shows nothing.
     The third is the one whose point the copy below already makes. */
  .phone3:nth-child(3) { display: none; }
  .phone3 { width: clamp(150px, 34vw, 210px); }
  .phone3:nth-child(2) { width: clamp(160px, 37vw, 230px); }
  .pocketpts { grid-template-columns: 1fr; }
}

/* ---------- section 9 — the content loop ---------- */
/* Weather: a wide arc of light sweeping left to right, following the direction
   the flow reads in. Seventh distinct treatment on the page. */
.sec--viral { background: var(--page); }

.sec--viral .sec__bg {
  background-image:
    repeating-linear-gradient(64deg, var(--grid-line) 0 1px, transparent 1px 72px);
}

.sec--viral .sec__bg::after {
  background:
    radial-gradient(ellipse 70% 34% at 12% 40%, color-mix(in srgb, var(--violet) 22%, transparent), transparent 64%),
    radial-gradient(ellipse 60% 34% at 92% 64%, color-mix(in srgb, var(--green) 19%, transparent), transparent 64%);
}

.loop {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: clamp(8px, 1.1vw, 18px);
  margin: clamp(34px, 5vh, 56px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.loop__step {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(24px, 2.4vw, 34px);
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    var(--glass) padding-box,
    linear-gradient(170deg, var(--bevel-lit) 0%, var(--border) 38%, var(--bevel-dark) 100%) border-box;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--card-lift);
}

/* The middle stage is the one the visitor actually does, so it is the lit one. */
.loop__step--lit {
  background:
    var(--glass) padding-box,
    linear-gradient(170deg,
      color-mix(in srgb, var(--green) 62%, transparent) 0%,
      color-mix(in srgb, var(--green) 22%, transparent) 42%,
      var(--bevel-dark) 100%) border-box;
  box-shadow: var(--card-lift), 0 0 54px color-mix(in srgb, var(--green) 16%, transparent);
}

.loop__n {
  position: absolute;
  right: 16px;
  top: 8px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 76px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.05em;
  color: color-mix(in srgb, var(--text) 7%, transparent);
  pointer-events: none;
}

.loop__step b {
  display: block;
  min-height: 2.3em;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(19px, 1.6vw, 25px);
  font-weight: 700;
  letter-spacing: -0.026em;
  line-height: 1.15;
  text-wrap: balance;
}

.loop__step p {
  margin: 11px 0 0;
  color: var(--muted);
  font-size: clamp(14px, 1.5vw, 16px);
  font-weight: 500;
  line-height: 1.5;
}

/* The clip strip runs inside the middle stage: these are the actual thumbnails
   from the niche library, so the claim is shown rather than described. */
.loop__clips {
  display: block;
  margin: 20px -34px 0 0;
  padding-top: 4px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 56px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 56px), transparent 100%);
}

.loop__track {
  display: flex;
  gap: 8px;
  width: max-content;
  animation: loopclips 28s linear infinite;
}

.loop__track img {
  flex: 0 0 auto;
  width: 74px;
  height: 100px;
  object-fit: cover;
  border: 1px solid var(--border-strong);
  border-radius: 9px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.42);
}

/* Three copies, reset at a third — same arithmetic as the other ribbons. */
@keyframes loopclips {
  from { transform: translateX(0); }
  to { transform: translateX(-33.3333%); }
}

.loop__arrow {
  display: grid;
  place-items: center;
  color: color-mix(in srgb, var(--green) 70%, transparent);
}

.loop__arrow .icon { width: 26px; height: 26px; stroke-width: 2.2; }

/* Below the three-column width the arrows would point sideways between cards
   that are now stacked, which is worse than no arrow at all. */
@media (max-width: 1000px) {
  .loop { grid-template-columns: 1fr; }
  .loop__arrow { transform: rotate(90deg); padding: 2px 0; }
  .loop__step b { min-height: 0; }
  .loop__clips { margin-right: -24px; }
}

@media (prefers-reduced-motion: reduce) {
  .loop__track { animation: none; }
}

/* ---------- section 10 — the built-in store ---------- */
/* Weather: light pooling on the right, where the money is. Eighth treatment. */
.sec--store { background: var(--page); }

/* ---------- section 9 — found on Google ---------- */
/* Weather: a field of small crosses, the marks a map uses for a located
   thing. Every other texture on this page is a line, a dot or a sweep; a
   cross is none of those, and it is the right shape for a section about being
   found. It is painted on ::before so the glows on ::after are not clipped by
   its mask. */
.sec--seo {
  background: linear-gradient(180deg, var(--page) 0%, color-mix(in srgb, var(--cat-2) 8%, var(--page)) 50%, var(--page) 100%);
}

.sec--seo .sec__bg { background-image: none; }

.sec--seo .sec__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--grid-line);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cpath d='M42 35v14M35 42h14' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84'%3E%3Cpath d='M42 35v14M35 42h14' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-size: 84px 84px;
  mask-size: 84px 84px;
}

.sec--seo .sec__bg::after {
  background:
    radial-gradient(ellipse 48% 42% at 78% 12%, color-mix(in srgb, var(--cat-2) 20%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 40% at 16% 90%, color-mix(in srgb, var(--green) 12%, transparent), transparent 72%);
}

.serp {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(18px, 3vw, 46px);
  align-items: center;
  margin: clamp(30px, 4.5vh, 48px) 0 0;
  text-align: left;
}

.serp__facts {
  display: grid;
  gap: clamp(10px, 1.3vw, 16px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sfact {
  display: flex;
  gap: 13px;
  padding: clamp(13px, 1.5vw, 18px);
  border-radius: 18px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.sfact:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-lift-hover), 0 0 34px color-mix(in srgb, var(--cat-2) 18%, transparent);
}

.sfact > .icon {
  flex: 0 0 auto;
  box-sizing: content-box;
  width: 18px;
  height: 18px;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--cat-2) 34%, transparent);
  border-radius: 13px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cat-2) 26%, transparent), color-mix(in srgb, var(--cat-2) 8%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--cat-2);
}

.sfact b {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(14px, 1.4vw, 17px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.022em;
}

.sfact small {
  display: block;
  margin-top: 6px;
  color: color-mix(in srgb, var(--text) 66%, transparent);
  font-size: clamp(12.5px, 1.25vw, 14px);
  font-weight: 500;
  line-height: 1.5;
}

/* The screenshot is a dark capture whatever the page theme is, so it gets a
   window of its own rather than being dropped onto the page — a frame is what
   tells a reader "this is a picture of something else". */
.serp__shot {
  position: relative;
  margin: 0;
  border: 1px solid var(--border-strong);
  border-radius: 18px;
  background: #1f2126;
  box-shadow: var(--card-lift);
  overflow: hidden;
}

.serp__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 13px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: #2a2d33;
}

.serp__dots { display: inline-flex; gap: 6px; }

.serp__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.serp__url {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  color: rgba(255, 255, 255, 0.62);
  font-size: clamp(11px, 1.05vw, 12.5px);
  font-weight: 500;
}

.serp__url .icon { width: 13px; height: 13px; color: rgba(255, 255, 255, 0.45); }

.serp__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* The one number the section is really making: pinned to the shot, not
   floated beside it, so it is read as a caption on the evidence. */
.serp__flag {
  position: absolute;
  top: clamp(46px, 5.6vw, 62px);
  right: clamp(10px, 1.4vw, 18px);
  padding: 10px 15px;
  border: 1px solid color-mix(in srgb, var(--green) 46%, transparent);
  border-radius: 15px;
  background: color-mix(in srgb, #0b0f14 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), 0 0 28px color-mix(in srgb, var(--green) 22%, transparent);
  color: #e7f3d6;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}

.serp__flag b {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--green);
}

.serp__shot figcaption {
  padding: 11px 15px 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: #1f2126;
  color: rgba(255, 255, 255, 0.58);
  font-size: clamp(11.5px, 1.1vw, 13px);
  font-weight: 500;
  line-height: 1.4;
}

@media (max-width: 959px) {
  .serp { grid-template-columns: 1fr; }
}

@media (max-width: 519px) {
  .serp__flag {
    top: 44px;
    right: 10px;
    padding: 7px 11px;
    font-size: 10.5px;
  }

  .serp__flag b { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sfact { transition: none; }
  .sfact:hover { transform: none; }
}

.sec--store .sec__bg {
  background-image:
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--text) 10%, transparent) 1px, transparent 0);
  background-size: 34px 34px;
}

.sec--store .sec__bg::after {
  background:
    radial-gradient(ellipse 42% 58% at 78% 50%, color-mix(in srgb, var(--green) 20%, transparent), transparent 66%),
    radial-gradient(ellipse 46% 50% at 10% 20%, color-mix(in srgb, var(--violet) 20%, transparent), transparent 68%);
}

/* The one split layout on the page: copy left, the money right. */
.sec__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  text-align: left;
}

.sec__lede--left { margin-left: 0; max-width: 54ch; }

.storepts {
  display: grid;
  gap: 16px;
  margin: clamp(26px, 3.4vh, 38px) 0 0;
  padding: 0;
  list-style: none;
}

.storepts li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 15px;
  align-items: center;
}

.storepts .ibadge { grid-row: 1 / 3; width: 38px; height: 38px; }

.storepts b {
  font-size: clamp(16px, 1.45vw, 19px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.storepts span:not(.ibadge) {
  color: var(--muted);
  font-size: clamp(13.5px, 1.4vw, 15px);
  font-weight: 500;
  line-height: 1.45;
}

/* Methods named in text. A row of brand marks would be someone else's
   trademarks on our sales page, which is a risk for no gain. */
.pays {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: clamp(24px, 3.2vh, 34px) 0 0;
  padding: 0;
  list-style: none;
}

.pays li {
  padding: 8px 15px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: var(--muted);
  font-size: clamp(12.5px, 1.3vw, 13.5px);
  font-weight: 600;
  white-space: nowrap;
}

/* --- the stack: product, the sale, the payout --- */
.store__stack {
  position: relative;
  display: grid;
  gap: 16px;
  justify-items: stretch;
}

.scard {
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) padding-box,
    linear-gradient(170deg, var(--bevel-lit) 0%, var(--border) 38%, var(--bevel-dark) 100%) border-box;
  box-shadow: var(--card-lift);
}

.scard--product { overflow: hidden; }

.scard--product img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 7;
  object-fit: cover;
}

.scard__body { padding: 18px 20px 20px; }

.scard__body b {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 700;
  letter-spacing: -0.022em;
}

.scard__body > span { display: block; margin-top: 4px; color: var(--muted); font-size: 13px; }

.scard__buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
}

.scard__buy em {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(22px, 2vw, 28px);
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.scard__btn {
  padding: 10px 20px;
  border-radius: 999px;
  background: var(--green);
  color: var(--green-ink);
  font-size: 13.5px;
  font-weight: 700;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--green) 28%, transparent);
}

/* The two notifications sit slightly inset and offset, so the three read as a
   sequence in time rather than three equal panels. */
.scard--order,
.scard--payout {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
}

.scard--order { margin-left: clamp(0px, 3vw, 44px); }
.scard--payout { margin-right: clamp(0px, 3vw, 44px); justify-content: space-between; }

.scard--payout .amount {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(24px, 2.2vw, 32px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--green);
}

.scard__cut {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  text-align: right;
}

.scard__cut em {
  display: block;
  margin-top: 2px;
  color: var(--green);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 19px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: -0.02em;
}

@media (max-width: 1000px) {
  .sec__inner--split { grid-template-columns: 1fr; gap: 34px; }
  .scard--order, .scard--payout { margin-left: 0; margin-right: 0; }
}

/* The small-card text block. These rules were lost when the hero's stat cards
   became the three step cards; section 10 reuses the same markup, and without
   them the three lines run together into one sentence. */
.cardtxt { display: block; line-height: 1.3; min-width: 0; }
.cardtxt small { display: block; color: var(--muted); font-size: 12px; }
.cardtxt b { display: block; font-size: 15px; font-weight: 650; letter-spacing: -0.015em; }
.cardtxt .sub { margin-top: 2px; font-size: 11.5px; }

.cardicon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--violet) 28%, transparent);
  color: #cbb6ff;
}

.cardicon--green { background: color-mix(in srgb, var(--green) 22%, transparent); color: var(--green); }
.cardicon .ficon { width: 17px; height: 17px; }

/* --- section 9: the generated card headers --- */
/* Each stage gets its own render at the top, with the icon tile straddling the
   seam so the image and the copy read as one card rather than two stacked
   blocks. The step number moves below the image for the same reason. */
.loop__step { padding: 0; }

.loop__shot {
  position: relative;
  display: block;
  margin: 7px 7px 0;
  overflow: hidden;
  border-radius: 18px;
  background: var(--page);
}

.loop__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* Fades the render into the card so the plate's edge never shows as a seam. */
.loop__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 52%, color-mix(in srgb, var(--surface-2) 92%, transparent) 100%);
}

.loop__ico {
  position: relative;
  z-index: 1;
  margin: -27px 0 0 clamp(20px, 2vw, 28px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.loop__step b,
.loop__step p { padding: 0 clamp(20px, 2vw, 28px); }
.loop__step b { margin-top: 14px; }
.loop__step p { padding-bottom: clamp(20px, 2vw, 28px); }

/* The number sits over the image, where there is room for it. */
.loop__n { top: 10px; right: 18px; font-size: 56px; color: rgba(255, 255, 255, 0.22); }

.loop__step--lit p { padding-bottom: 12px; }
.loop__clips { margin: 4px 0 0; padding: 0 0 clamp(18px, 2vw, 24px) clamp(20px, 2vw, 28px); }

@media (max-width: 1000px) {
  .loop__clips { margin-right: 0; }
}

/* Payment marks. Solid glyphs, so they take the pill's own colour rather than
   each brand's — six different brand colours in a row would pull the eye off
   the copy, and a recoloured mark is still the right shape. */
.payico {
  width: 16px;
  height: 16px;
  margin-right: 9px;
  flex: 0 0 auto;
  fill: currentColor;
  stroke: none;
  opacity: 0.92;
}

.pays li {
  display: inline-flex;
  align-items: center;
  color: var(--text);
}

.pays li:hover { border-color: color-mix(in srgb, var(--green) 50%, transparent); }

/* ---------- section 11 — the three steps, animated ---------- */
/* Weather: concentric arcs spreading from the centre, so this section does not
   reuse the square grid, the dot field or the diagonals already on the page.
   Tenth distinct treatment. */
.sec--steps {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--green) 7%, var(--page)) 0%,
    var(--page) 44%,
    color-mix(in srgb, var(--violet) 9%, var(--page)) 100%
  );
}

.sec--steps .sec__bg {
  background-image: repeating-radial-gradient(
    circle at 50% 18%,
    var(--grid-line) 0 1px,
    transparent 1px 86px
  );
}

.sec--steps .sec__bg::after {
  background:
    radial-gradient(ellipse 58% 40% at 50% 8%, color-mix(in srgb, var(--violet) 24%, transparent), transparent 68%),
    radial-gradient(ellipse 50% 40% at 84% 96%, color-mix(in srgb, var(--green) 18%, transparent), transparent 70%);
}

.steps3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 1.8vw, 28px);
  margin: clamp(34px, 5vh, 56px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.step3 {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.1vw, 28px);
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    var(--glass) padding-box,
    linear-gradient(170deg, var(--bevel-lit) 0%, var(--border) 38%, var(--bevel-dark) 100%) border-box;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  box-shadow: var(--card-lift);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.step3:hover {
  transform: translateY(-6px);
  box-shadow:
    var(--card-lift),
    0 0 42px color-mix(in srgb, var(--green) 13%, transparent);
}

/* The step index on the left, how long it takes on the right. The timing is
   the thing being sold here, so both are set as pills rather than loose text. */
.step3__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.step3__n {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--green);
  color: var(--green-ink);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(12px, 1.2vw, 13.5px);
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}

.step3__t {
  padding: 5px 13px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--muted);
  font-size: clamp(11.5px, 1.2vw, 13px);
  font-weight: 600;
  white-space: nowrap;
}

.step3 b {
  display: block;
  margin-top: 22px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.step3 p {
  margin: 11px 0 0;
  color: color-mix(in srgb, var(--text) 72%, transparent);
  font-size: clamp(14.5px, 1.5vw, 17px);
  font-weight: 500;
  line-height: 1.52;
}

@media (prefers-reduced-motion: reduce) {
  .step3 { transition: none; }
  .step3:hover { transform: none; }
}

/* --- the miniature app --- */
.mini {
  display: block;
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--page);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.mini__bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--text) 5%, transparent);
}

.mini__bar i { width: 7px; height: 7px; border-radius: 50%; }
.mini__bar i:first-child { background: #ff5f57; }
.mini__bar i:nth-child(2) { background: #febc2e; }
.mini__bar i:nth-child(3) { background: #28c840; }
.mini__bar em { margin-left: 8px; font-style: normal; font-size: 10px; font-weight: 600; color: var(--muted); }
/* The three cards carry the real create-website wizard, recorded in the
   product itself: choosing the niche, choosing the theme, and pressing publish.
   They sit under the chrome bar where a CSS mock-up used to stand in. */
.mini__v {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 560 / 660;
  background: var(--surface-2);
}

@media (max-width: 900px) {
  .steps3 { grid-template-columns: 1fr; }
}

/* ---------- section 12 — the markets behind the niches ---------- */
/* Weather: a field of columns standing on the floor of the section, like a bar
   chart seen from a long way off. Eleventh distinct treatment — none of the
   square grids, dot fields, diagonals or arcs already on the page are reused. */
.sec--mkt {
  background: radial-gradient(
    ellipse 130% 76% at 50% 0%,
    color-mix(in srgb, var(--violet) 11%, var(--page)) 0%,
    var(--page) 68%
  );
}

.sec--mkt .sec__bg {
  background-image:
    repeating-linear-gradient(90deg, var(--grid-line) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(90deg, var(--grid-line) 0 2px, transparent 2px 134px);
  background-size: 100% 34%, 100% 61%;
  background-position: left bottom, left bottom;
  background-repeat: repeat-x, repeat-x;
}

.sec--mkt .sec__bg::after {
  background:
    radial-gradient(ellipse 54% 38% at 16% 14%, color-mix(in srgb, var(--green) 16%, transparent), transparent 66%),
    radial-gradient(ellipse 52% 42% at 88% 80%, color-mix(in srgb, var(--violet) 20%, transparent), transparent 70%);
}

/* Six markets: three across, so the grid resolves to 3, 2 and 1 columns with a
   full last row at every one of them. */
.mkts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  margin: clamp(34px, 5vh, 56px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.mkt {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.mkt:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-lift-hover), 0 0 40px color-mix(in srgb, var(--cat, var(--green)) 18%, transparent);
}

.mkt__shot {
  position: relative;
  display: block;
  overflow: hidden;
}

/* height:auto is load-bearing: the width/height attributes on the <img> are a
   presentational hint and a used height would beat the aspect ratio. */
.mkt__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mkt:hover .mkt__shot img { transform: scale(1.06); }

/* The photograph dissolves into the card rather than stopping at an edge.
   Fading to the card's own surface rather than to black is what makes this work
   in both themes — a black ramp under a near-white surface leaves a grey smear. */
.mkt__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in srgb, var(--surface) 45%, transparent) 62%,
    var(--surface) 100%
  );
}

.mkt__body {
  display: block;
  padding: clamp(16px, 1.6vw, 22px) clamp(16px, 1.7vw, 24px) clamp(18px, 1.8vw, 24px);
}

.mkt__top {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(14px, 1.4vw, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}

.mkt__top .icon { flex: 0 0 auto; width: 17px; height: 17px; color: var(--cat, var(--green)); }

/* The figure. Proportional digits, not tabular: at this size tabular-nums gives
   every digit the width of a zero and the number reads loose. */
.mkt__v {
  display: block;
  margin-top: 12px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(38px, 4.2vw, 56px);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--text);
}

.mkt__basis {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  font-size: clamp(12px, 1.2vw, 13.5px);
  font-weight: 600;
}

.mkt__rate {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 16px;
}

/* One measure, one hue: the bars say how fast, nothing else, so they are all
   the same green on a dimmer step of itself and are read against a shared
   ceiling of 14% a year. */
.mkt__meter {
  flex: 1;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 14%, transparent);
}

.mkt__meter i {
  display: block;
  width: var(--g, 50%);
  height: 100%;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 12px color-mix(in srgb, var(--green) 45%, transparent);
}

.mkt__rate em {
  font-style: normal;
  font-size: clamp(12.5px, 1.25vw, 14px);
  font-weight: 700;
  white-space: nowrap;
  color: var(--green);
}

.mkt__buy {
  display: block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: color-mix(in srgb, var(--text) 70%, transparent);
  font-size: clamp(13.5px, 1.4vw, 15.5px);
  font-weight: 500;
  line-height: 1.5;
}

/* Three closing facts, one row — the things that are true of all six markets. */
.mfacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  margin: clamp(18px, 2vh, 26px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.mfact {
  padding: clamp(18px, 1.9vw, 26px);
  border: 1px solid var(--border);
  border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.mfact .ficon,
.mfact .icon { width: 20px; height: 20px; color: var(--green); }

.mfact b {
  display: block;
  margin-top: 11px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.mfact p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: clamp(13.5px, 1.35vw, 15px);
  font-weight: 500;
  line-height: 1.5;
}

@media (max-width: 1023px) {
  .mkts, .mfacts { grid-template-columns: repeat(2, 1fr); }
  /* Two across leaves the third fact alone on its row, so it takes the width. */
  .mfact:last-child { grid-column: 1 / -1; }
}

@media (max-width: 679px) {
  .mkts, .mfacts { grid-template-columns: 1fr; }
  .mfact:last-child { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .mkt, .mkt__shot img { transition: none; }
  .mkt:hover { transform: none; }
  .mkt:hover .mkt__shot img { transform: none; }
}

/* ---------- section 13 — what the sums actually come to ---------- */
/* Weather: a diamond lattice — two 45° rulings crossing. Twelfth distinct
   treatment; the page already has square grids, dot fields, single-direction
   diagonals, arcs and a column field, and none of them is this. */
.sec--earn {
  background: linear-gradient(
    180deg,
    var(--page) 0%,
    color-mix(in srgb, var(--gold) 6%, var(--page)) 52%,
    var(--page) 100%
  );
}

/* Layered back to front: the photograph, a scrim heavy enough to keep every
   word above it legible, then the lattice. The scrim is painted in the same
   background shorthand rather than as a separate element with opacity, because
   opacity on the parent would fade the scrim along with the picture. */
.sec--earn .sec__bg {
  background-image:
    repeating-linear-gradient(45deg, var(--grid-line) 0 1px, transparent 1px 58px),
    repeating-linear-gradient(-45deg, var(--grid-line) 0 1px, transparent 1px 58px),
    linear-gradient(
      180deg,
      rgba(var(--scrim), calc(var(--earn-veil) + 0.19)) 0%,
      rgba(var(--scrim), calc(var(--earn-veil) + 0.06)) 36%,
      rgba(var(--scrim), var(--earn-veil)) 58%,
      rgba(var(--scrim), calc(var(--earn-veil) + 0.15)) 80%,
      rgba(var(--scrim), calc(var(--earn-veil) + 0.21)) 100%
    ),
    url("/vv2/assets/earn/money.webp");
  background-position: 0 0, 0 0, 0 0, center bottom;
  background-size: auto, auto, auto, cover;
  background-repeat: repeat, repeat, no-repeat, no-repeat;
}

.sec--earn .sec__bg::after {
  background:
    radial-gradient(ellipse 48% 40% at 78% 12%, color-mix(in srgb, var(--gold) 15%, transparent), transparent 66%),
    radial-gradient(ellipse 56% 44% at 14% 84%, color-mix(in srgb, var(--green) 15%, transparent), transparent 70%);
}

/* The calculator: the two handles on the left, the answer on the right. */
.calc {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(16px, 2vw, 30px);
  align-items: stretch;
  margin: clamp(34px, 5vh, 56px) 0 0;
  text-align: left;
}

.calc__ctrl,
.calc__out {
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 26px;
  background:
    var(--glass) padding-box,
    linear-gradient(170deg, var(--bevel-lit) 0%, var(--border) 38%, var(--bevel-dark) 100%) border-box;
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  backdrop-filter: blur(22px) saturate(1.1);
  box-shadow: var(--card-lift);
}

/* A single sheen raked across the top corner. One light source, so both cards
   catch it from the same side and the pair reads as one surface. */
.calc__ctrl::before,
.calc__out::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 80% 58% at 12% -8%,
    rgba(255, 255, 255, 0.09),
    transparent 62%
  );
}

:root[data-theme="light"] .calc__ctrl::before,
:root[data-theme="light"] .calc__out::before {
  background: radial-gradient(ellipse 80% 58% at 12% -8%, rgba(255, 255, 255, 0.6), transparent 62%);
}

.calc__ctrl { padding: clamp(20px, 2.2vw, 30px); }

.calc__pre {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-bottom: clamp(18px, 2vw, 24px);
  border-bottom: 1px solid var(--border);
}

.cpre {
  padding: 8px 15px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--muted);
  font: inherit;
  font-size: clamp(12.5px, 1.25vw, 14px);
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}

.cpre:hover { border-color: var(--border-strong); color: var(--text); }

.cpre.is-on {
  border-color: color-mix(in srgb, var(--green) 60%, transparent);
  background: color-mix(in srgb, var(--green) 14%, transparent);
  color: var(--text);
}

.cpre:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

.cfield { display: block; margin-top: clamp(18px, 2vw, 26px); }

.cfield__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 600;
}

.cfield__top b {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--text);
}

.cfield__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
}

.cfield__scale i { font-style: normal; }

/* The slider. Styled rather than left at the browser default — a stock range
   control is the one thing on this page that would look borrowed. */
.crange {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  margin: 13px 0 0;
  border-radius: 999px;
  /* The travelled part of the track is filled. --f is set from the value in
     v2.js, because a range input gives CSS no way to know where its thumb is. */
  background: linear-gradient(
    to right,
    var(--green) 0 var(--f, 0%),
    color-mix(in srgb, var(--text) 11%, transparent) var(--f, 0%) 100%
  );
  cursor: pointer;
}

.crange::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border: 4px solid var(--page);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 16px color-mix(in srgb, var(--green) 50%, transparent);
}

.crange::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border: 4px solid var(--page);
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), 0 0 16px color-mix(in srgb, var(--green) 50%, transparent);
}

.crange:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }

/* The answer. One figure, and it is the biggest thing in the section. */
.calc__out {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 2.6vw, 36px);
  text-align: center;
  background:
    linear-gradient(170deg,
      color-mix(in srgb, var(--green) 10%, var(--surface)) 0%,
      var(--surface-2) 100%) padding-box,
    linear-gradient(170deg,
      color-mix(in srgb, var(--green) 55%, transparent) 0%,
      var(--border) 44%,
      var(--bevel-dark) 100%) border-box;
  box-shadow: var(--card-lift), 0 0 70px color-mix(in srgb, var(--green) 16%, transparent);
}

/* The figure gets a pool of light under it rather than sitting on a flat fill. */
.calc__out::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 70% 48% at 50% 42%,
    color-mix(in srgb, var(--green) 13%, transparent),
    transparent 70%
  );
}

.calc__out > * { position: relative; z-index: 1; }

.calc__lab {
  color: var(--muted);
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 600;
}

/* Proportional digits: tabular-nums would give every digit the width of a zero,
   and the figure reads loose at this size. */
.calc__big {
  display: block;
  margin-top: 6px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(52px, 7vw, 92px);
  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;
  color: var(--green);
}

.calc__per {
  display: block;
  margin-top: 8px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.calc__yr {
  display: block;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: clamp(13.5px, 1.4vw, 15.5px);
  font-weight: 600;
}

.calc__yr em { font-style: normal; font-weight: 700; color: var(--text); }

.calc__sum {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: clamp(12.5px, 1.25vw, 14px);
  font-weight: 600;
}

.calc__keep {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  margin-top: 18px;
  padding: 9px 16px;
  border: 1px solid color-mix(in srgb, var(--green) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--green) 13%, transparent);
  font-size: clamp(12px, 1.2vw, 13.5px);
  font-weight: 700;
  letter-spacing: -0.005em;
}

.calc__keep .ficon { width: 14px; height: 14px; color: var(--green); }

/* The qualifier sits directly under the number it qualifies, not at the foot of
   the section where it would read as fine print nobody meant. */
.sec__note--plain { margin-top: clamp(14px, 1.6vh, 20px); }

.earn__sub {
  margin: clamp(38px, 5vh, 60px) 0 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 700;
  letter-spacing: -0.028em;
}

/* Four steps: resolves to 4, 2 and 1 columns, each one a full row. */
.sell4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(13px, 1.5vw, 22px);
  margin: clamp(20px, 2.4vh, 30px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.sell {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 1.9vw, 26px);
  border-radius: 20px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.sell:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-lift-hover), 0 0 36px color-mix(in srgb, var(--green) 14%, transparent);
}

.sell__n {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--text) 16%, transparent);
}

/* Icon and step number share one row, pinned to opposite ends. Stacking them
   left the icon reading as a stray mark floating under the number. */
.sell__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.sell .ficon {
  display: block;
  box-sizing: content-box;
  width: 19px;
  height: 19px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--green) 26%, transparent);
  border-radius: 14px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--green) 20%, transparent),
    color-mix(in srgb, var(--green) 6%, transparent)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--green);
}

.sell b {
  display: block;
  margin-top: 18px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(16px, 1.55vw, 19.5px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.022em;
}

.sell p {
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--text) 68%, transparent);
  font-size: clamp(14px, 1.4vw, 15.5px);
  font-weight: 500;
  line-height: 1.55;
}

/* A green edge lights along the top of the card the hand is over. */
.sell::before {
  content: "";
  position: absolute;
  top: 0;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  opacity: 0;
  transition: opacity 0.35s ease, left 0.45s ease, right 0.45s ease;
}

.sell:hover::before { opacity: 0.75; left: 6%; right: 6%; }

@media (max-width: 1023px) {
  .calc { grid-template-columns: 1fr; }
  .sell4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 679px) {
  .sell4 { grid-template-columns: 1fr; }
  .cpre { flex: 1 1 100%; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .sell { transition: none; }
  .sell:hover { transform: none; }
}

/* Inline emphasis inside prose. `.u` simply raises a phrase out of the body
   colour; `.uu` adds a soft wash behind it — a highlighter held lightly, not a
   marker pen, which is the treatment this page uses everywhere else. */
.u {
  font-weight: 700;
  color: var(--text);
}

.uu {
  /* Without this, a highlight that wraps loses its padding and rounded ends on
     the second line and reads as two different treatments. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: 0.1em 0.34em;
  border-radius: 7px;
  background: color-mix(in srgb, var(--green) 16%, transparent);
  box-shadow: inset 0 -0.09em 0 color-mix(in srgb, var(--green) 45%, transparent);
  font-weight: 700;
  color: var(--text);
}

/* The lede over a photograph needs a touch more weight than over a flat panel. */
.sec--earn .sec__lede { color: color-mix(in srgb, var(--text) 80%, transparent); }

/* ============================================================
   PAGE-WIDE CARD + ICON POLISH
   One light source for the whole page, one icon treatment, and a hover on
   every card that has one to give. Added last so it lands on top of the
   per-section rules above.
   ============================================================ */

/* A single highlight raked across the top-left corner of every card. The same
   angle and the same strength everywhere, so the page reads as one lit surface
   rather than a set of separately styled panels. Kept very faint — it passes
   over copy, and anything stronger would wash it. */
.feat,
.way,
.step3,
.mkt,
.vs__card,
.mfact {
  position: relative;
}

.feat::after,
.way::after,
.step3::after,
.mkt::after,
.vs__card::after,
.mfact::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 76% 54% at 14% -6%, rgba(255, 255, 255, 0.07), transparent 62%);
}

:root[data-theme="light"] .feat::after,
:root[data-theme="light"] .way::after,
:root[data-theme="light"] .step3::after,
:root[data-theme="light"] .mkt::after,
:root[data-theme="light"] .vs__card::after,
:root[data-theme="light"] .mfact::after {
  background: radial-gradient(ellipse 76% 54% at 14% -6%, rgba(255, 255, 255, 0.55), transparent 62%);
}

/* ---- icon tiles ------------------------------------------------------- */
/* Every icon on the page now sits in the same kind of tile: a two-stop wash of
   its own accent, a hairline of that accent, and a lit top edge. Only the hue
   changes between sections. */
.feat__ico,
.way__ico {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 6px 16px rgba(0, 0, 0, 0.38);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.feat__ico {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--violet) 40%, transparent),
    color-mix(in srgb, var(--violet) 16%, transparent)
  );
}

.way__ico {
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--green) 28%, transparent),
    color-mix(in srgb, var(--green) 9%, transparent)
  );
}

/* The tile leans forward with the card it is on. */
.feat:hover .feat__ico,
.way:hover .way__ico { transform: translateY(-2px) scale(1.04); }

/* The three closing facts in section 12 get the same tile the selling steps
   use, instead of a bare icon floating above the heading. */
.mfact .ficon,
.mfact .icon {
  display: block;
  box-sizing: content-box;
  width: 19px;
  height: 19px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--green) 26%, transparent);
  border-radius: 14px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--green) 20%, transparent),
    color-mix(in srgb, var(--green) 6%, transparent)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--green);
}

/* ---- the cards that had no hover at all ------------------------------- */
.way,
.mfact {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.way:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-lift-hover), 0 0 40px color-mix(in srgb, var(--green) 15%, transparent);
}

.mfact:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--green) 40%, transparent);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.35);
}

/* ---- emphasis inside a note ------------------------------------------- */
/* The notes are already bold and centred, so a wash there needs to be lighter
   than the one used in body copy or it reads as a highlighter accident. */
.sec__note .uu {
  background: color-mix(in srgb, var(--green) 20%, transparent);
  box-shadow: inset 0 -0.09em 0 color-mix(in srgb, var(--green) 52%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .way,
  .mfact,
  .feat__ico,
  .way__ico { transition: none; }
  .way:hover,
  .mfact:hover { transform: none; }
  .feat:hover .feat__ico,
  .way:hover .way__ico { transform: none; }
}

/* ---------- section 14 — the tools visitors come back for ---------- */
/* Weather: a fan of fine rays thrown from a point below the section, like light
   off a dial. Thirteenth distinct treatment — the page already has square
   grids, dot fields, straight diagonals, concentric arcs, a column field and a
   diamond lattice, and a conic fan is none of them. */
.sec--tools {
  background: linear-gradient(
    180deg,
    var(--page) 0%,
    color-mix(in srgb, var(--cat-2) 8%, var(--page)) 54%,
    var(--page) 100%
  );
}

.sec--tools .sec__bg {
  background-image: repeating-conic-gradient(
    from 0deg at 50% 118%,
    var(--grid-line) 0deg 0.4deg,
    transparent 0.4deg 5deg
  );
}

.sec--tools .sec__bg::after {
  background:
    radial-gradient(ellipse 50% 42% at 50% 110%, color-mix(in srgb, var(--cat-2) 20%, transparent), transparent 68%),
    radial-gradient(ellipse 58% 34% at 20% 6%, color-mix(in srgb, var(--violet) 17%, transparent), transparent 66%);
}

/* Six panels: three across, so the grid resolves to 3, 2 and 1 columns and
   every row is full at each one. */
.tools6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  margin: clamp(34px, 5vh, 56px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.tool {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.tool:hover {
  transform: translateY(-6px);
  box-shadow: var(--card-lift-hover), 0 0 40px color-mix(in srgb, var(--cat, var(--green)) 18%, transparent);
}

/* The whole card is one link, so the hit target is the card and not a strip of
   picture — and the call to action can live in the body instead of covering the
   tool it points at. */
.tool__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.tool__link:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; border-radius: 22px; }

.tool__shot {
  position: relative;
  display: block;
  overflow: hidden;
  /* The panels are photographed from six differently designed sites, so each
     arrives on its own background colour. A hairline underneath keeps that from
     reading as a seam where the picture meets the card. */
  border-bottom: 1px solid var(--border);
}

/* height:auto is load-bearing: the width/height attributes are a presentational
   hint and a used height would beat the aspect ratio. */
.tool__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.tool:hover .tool__shot img { transform: scale(1.035); }

/* Always visible, because an affordance that only appears on hover does not
   exist on a touch screen or under reduced motion. The arrow is what moves. */
.tool__open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  color: var(--green);
  font-size: clamp(12.5px, 1.25vw, 14px);
  font-weight: 800;
}

.tool__open .icon {
  width: 15px;
  height: 15px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.tool:hover .tool__open .icon { transform: translateX(4px); }

.tool__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(15px, 1.6vw, 21px) clamp(16px, 1.7vw, 22px) clamp(17px, 1.8vw, 23px);
}

.tool__top {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: clamp(11.5px, 1.15vw, 13px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cat, var(--green));
}

.tool__top .icon { flex: 0 0 auto; width: 16px; height: 16px; }

.tool b {
  display: block;
  margin-top: 10px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(18px, 1.75vw, 23px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.028em;
}

.tool p {
  margin: 9px 0 0;
  color: color-mix(in srgb, var(--text) 68%, transparent);
  font-size: clamp(13.5px, 1.35vw, 15px);
  font-weight: 500;
  line-height: 1.55;
}

/* Three closing facts — what is true of all 282 of them. */
.tfacts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  margin: clamp(18px, 2vh, 26px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.tfact {
  position: relative;
  padding: clamp(18px, 1.9vw, 26px);
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    var(--glass) padding-box,
    linear-gradient(170deg, var(--bevel-lit) 0%, var(--border) 38%, var(--bevel-dark) 100%) border-box;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--card-lift);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.tfact::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(ellipse 76% 54% at 14% -6%, rgba(255, 255, 255, 0.07), transparent 62%);
}

:root[data-theme="light"] .tfact::after {
  background: radial-gradient(ellipse 76% 54% at 14% -6%, rgba(255, 255, 255, 0.55), transparent 62%);
}

.tfact:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-lift-hover), 0 0 36px color-mix(in srgb, var(--cat-2) 18%, transparent);
}

/* The same icon tile the rest of the page uses, in this section's own hue. */
.tfact .ficon {
  display: block;
  box-sizing: content-box;
  width: 19px;
  height: 19px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--cat-2) 30%, transparent);
  border-radius: 14px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--cat-2) 24%, transparent),
    color-mix(in srgb, var(--cat-2) 7%, transparent)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--cat-2);
}

.tfact b {
  display: block;
  margin-top: 14px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 700;
  letter-spacing: -0.024em;
}

.tfact p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: clamp(13.5px, 1.35vw, 15px);
  font-weight: 500;
  line-height: 1.52;
}

@media (max-width: 1023px) {
  .tools6, .tfacts { grid-template-columns: repeat(2, 1fr); }
  /* Two across leaves the third fact alone on its row, so it takes the width. */
  .tfact:last-child { grid-column: 1 / -1; }
}

@media (max-width: 679px) {
  .tools6, .tfacts { grid-template-columns: 1fr; }
  .tfact:last-child { grid-column: auto; }
  /* No hover on a touch screen, so the call to action is always showing. */
}

@media (prefers-reduced-motion: reduce) {
  .tool, .tool__shot img, .tool__open .icon, .tfact { transition: none; }
  .tool:hover, .tfact:hover { transform: none; }
  .tool:hover .tool__shot img { transform: none; }
  .tool:hover .tool__open .icon { transform: none; }
}

/* ---------- section 15 — what the money is actually for ---------- */
/* Weather: a scattered field of faint points, placed by hand rather than tiled.
   Fourteenth distinct treatment, and the first that does not repeat — every
   other texture on the page is a pattern, so an irregular scatter reads as sky
   rather than as grid, which is what this section wants. */
.sec--life {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cat-8) 10%, var(--page)) 0%,
    var(--page) 46%,
    color-mix(in srgb, var(--cat-8) 7%, var(--page)) 100%
  );
}

.sec--life .sec__bg {
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, color-mix(in srgb, var(--text) 26%, transparent), transparent),
    radial-gradient(1.2px 1.2px at 27% 9%, color-mix(in srgb, var(--text) 18%, transparent), transparent),
    radial-gradient(2px 2px at 41% 26%, color-mix(in srgb, var(--text) 22%, transparent), transparent),
    radial-gradient(1.2px 1.2px at 58% 12%, color-mix(in srgb, var(--text) 20%, transparent), transparent),
    radial-gradient(1.7px 1.7px at 73% 22%, color-mix(in srgb, var(--text) 24%, transparent), transparent),
    radial-gradient(1.1px 1.1px at 88% 8%, color-mix(in srgb, var(--text) 16%, transparent), transparent),
    radial-gradient(1.5px 1.5px at 7% 52%, color-mix(in srgb, var(--text) 20%, transparent), transparent),
    radial-gradient(1.2px 1.2px at 33% 61%, color-mix(in srgb, var(--text) 15%, transparent), transparent),
    radial-gradient(1.8px 1.8px at 64% 55%, color-mix(in srgb, var(--text) 22%, transparent), transparent),
    radial-gradient(1.3px 1.3px at 92% 47%, color-mix(in srgb, var(--text) 18%, transparent), transparent),
    radial-gradient(1.5px 1.5px at 18% 84%, color-mix(in srgb, var(--text) 19%, transparent), transparent),
    radial-gradient(1.1px 1.1px at 47% 91%, color-mix(in srgb, var(--text) 14%, transparent), transparent),
    radial-gradient(1.9px 1.9px at 79% 79%, color-mix(in srgb, var(--text) 21%, transparent), transparent),
    radial-gradient(1.2px 1.2px at 96% 93%, color-mix(in srgb, var(--text) 16%, transparent), transparent);
  background-repeat: no-repeat;
}

.sec--life .sec__bg::after {
  background:
    radial-gradient(ellipse 46% 40% at 76% 22%, color-mix(in srgb, var(--cat-8) 20%, transparent), transparent 68%),
    radial-gradient(ellipse 54% 44% at 16% 82%, color-mix(in srgb, var(--green) 12%, transparent), transparent 70%);
}

/* An editorial split rather than a fourth card grid: the picture holds one
   side while the list runs down the other. */
.life {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: clamp(20px, 3vw, 48px);
  align-items: start;
  margin: clamp(34px, 5vh, 56px) 0 0;
  text-align: left;
}

.life__frame {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    var(--surface-2) padding-box,
    linear-gradient(170deg, var(--bevel-lit) 0%, var(--border) 38%, var(--bevel-dark) 100%) border-box;
  box-shadow: var(--card-lift);
  /* The list is taller than the picture on a wide screen, so the picture rides
     down with the reader instead of stranding a column of empty space. */
  position: sticky;
  top: calc(var(--header-h) + 28px);
}

.life__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.life__cap {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: color-mix(in srgb, var(--page) 72%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--muted);
  font-size: clamp(12px, 1.2vw, 13.5px);
  font-weight: 600;
}

.lifelist {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Rows, not cards. Five cards would end on a half-empty row at every column
   count, and the page has had three card grids in a row. */
.lifeline {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(14px, 1.7vw, 24px);
  padding: clamp(18px, 2.1vw, 28px) 0;
  border-top: 1px solid var(--border);
}

.lifeline:first-child { border-top: 0; padding-top: 0; }

.lifeline__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

/* The same icon tile the rest of the page uses, in this section's own hue. */
.lifeline__mark .icon {
  display: block;
  box-sizing: content-box;
  width: 20px;
  height: 20px;
  padding: 11px;
  border: 1px solid color-mix(in srgb, var(--cat-8) 34%, transparent);
  border-radius: 15px;
  background: linear-gradient(
    160deg,
    color-mix(in srgb, var(--cat-8) 26%, transparent),
    color-mix(in srgb, var(--cat-8) 8%, transparent)
  );
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  color: var(--cat-8);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lifeline:hover .lifeline__mark .icon { transform: translateY(-3px) scale(1.05); }

.lifeline__mark em {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(12px, 1.2vw, 13.5px);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--text) 30%, transparent);
}

.lifeline__say b {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.03em;
}

.lifeline__say p {
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--text) 68%, transparent);
  font-size: clamp(14.5px, 1.5vw, 17px);
  font-weight: 500;
  line-height: 1.55;
}

/* The line the section exists to land. */
.life__end {
  margin: clamp(34px, 5vh, 56px) 0 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(24px, 3.4vw, 46px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: color-mix(in srgb, var(--text) 52%, transparent);
}

.life__end .u { color: var(--text); }

@media (max-width: 1023px) {
  .life { grid-template-columns: 1fr; }
  .life__frame {
    position: static;
    max-height: 460px;
  }
  .life__frame img { aspect-ratio: 16 / 10; object-position: center 62%; }
}

@media (prefers-reduced-motion: reduce) {
  .lifeline__mark .icon { transition: none; }
  .lifeline:hover .lifeline__mark .icon { transform: none; }
}

/* ---------- section 16 — the offer ---------- */
/* Weather: stage light. Two wide beams thrown from above the section and a
   pool of light at the top, because this is the one section that is meant to
   feel lit rather than textured. Fifteenth distinct treatment. */
.sec--offer {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--cat-4) 9%, var(--page)) 0%,
    var(--page) 52%,
    color-mix(in srgb, var(--cat-4) 6%, var(--page)) 100%
  );
}

.sec--offer .sec__bg {
  background-image:
    linear-gradient(104deg, transparent 32%, color-mix(in srgb, var(--text) 4%, transparent) 38%, transparent 44%),
    linear-gradient(76deg, transparent 56%, color-mix(in srgb, var(--text) 4%, transparent) 62%, transparent 68%);
}

.sec--offer .sec__bg::after {
  background:
    radial-gradient(ellipse 60% 34% at 50% -4%, color-mix(in srgb, var(--cat-4) 26%, transparent), transparent 70%),
    radial-gradient(ellipse 48% 38% at 50% 104%, color-mix(in srgb, var(--green) 14%, transparent), transparent 72%);
}

.offer {
  display: grid;
  grid-template-columns: 1.35fr 0.85fr;
  gap: clamp(18px, 2.4vw, 36px);
  align-items: start;
  margin: clamp(34px, 5vh, 56px) 0 0;
  text-align: left;
}

.offer__stack,
.offer__buy {
  position: relative;
  border: 1px solid transparent;
  border-radius: 26px;
  background:
    var(--glass) padding-box,
    linear-gradient(170deg, var(--bevel-lit) 0%, var(--border) 38%, var(--bevel-dark) 100%) border-box;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  box-shadow: var(--card-lift);
}

.offer__stack { padding: clamp(18px, 2.1vw, 28px); }

.stack {
  width: 100%;
  border-collapse: collapse;
}

.stack__cap {
  padding-bottom: 14px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700;
  letter-spacing: -0.026em;
  text-align: left;
  color: var(--text);
}

.stack thead th {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: clamp(11.5px, 1.15vw, 13px);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
}

.stack thead th:last-child { text-align: right; }

.stack tbody th {
  padding: 11px 16px 11px 0;
  border-bottom: 1px solid var(--border);
  color: color-mix(in srgb, var(--text) 82%, transparent);
  font-size: clamp(13.5px, 1.4vw, 15.5px);
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
}

/* Tabular figures here, and only here: a column of numbers has to line up. */
.stack tbody td {
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
  color: var(--muted);
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.stack tfoot th {
  padding: 16px 16px 0 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: left;
}

.stack tfoot td {
  padding: 16px 0 0;
  text-align: right;
  white-space: nowrap;
}

.stack tfoot b {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--text);
}

.stack__note {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(12.5px, 1.25vw, 14px);
  font-weight: 500;
  line-height: 1.5;
}

/* The price card. Sticky, so the button is still there when the reader reaches
   the bottom of a fourteen-row table. */
.offer__buy {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(22px, 2.6vw, 34px);
  text-align: center;
  background:
    linear-gradient(170deg,
      color-mix(in srgb, var(--green) 11%, var(--surface)) 0%,
      var(--surface-2) 100%) padding-box,
    linear-gradient(170deg,
      color-mix(in srgb, var(--green) 58%, transparent) 0%,
      var(--border) 44%,
      var(--bevel-dark) 100%) border-box;
  box-shadow: var(--card-lift), 0 0 70px color-mix(in srgb, var(--green) 16%, transparent);
  position: sticky;
  top: calc(var(--header-h) + 28px);
}

.offer__was {
  color: var(--muted);
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 600;
}

.offer__was s { text-decoration-thickness: 1.5px; }

/* Proportional figures: tabular-nums would give every digit the width of a zero
   and the price reads loose at this size. */
.offer__now {
  display: block;
  margin-top: 4px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(62px, 8vw, 104px);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.05em;
  color: var(--green);
}

.offer__once {
  display: block;
  margin-top: 8px;
  color: color-mix(in srgb, var(--text) 76%, transparent);
  font-size: clamp(13.5px, 1.4vw, 15.5px);
  font-weight: 600;
}

.offer__btn {
  width: 100%;
  justify-content: center;
  margin-top: clamp(18px, 2vw, 26px);
}

.offer__ticks {
  width: 100%;
  margin: clamp(18px, 2vw, 24px) 0 0;
  padding: clamp(16px, 1.8vw, 22px) 0 0;
  border-top: 1px solid var(--border);
  list-style: none;
  text-align: left;
}

.offer__ticks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 6px 0;
  color: color-mix(in srgb, var(--text) 80%, transparent);
  font-size: clamp(13.5px, 1.35vw, 15px);
  font-weight: 600;
}

.offer__ticks .ficon { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; color: var(--green); }

.offer__secure {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: clamp(12px, 1.2vw, 13.5px);
  font-weight: 600;
}

.offer__secure .icon { width: 15px; height: 15px; color: var(--green); }

@media (max-width: 1023px) {
  .offer { grid-template-columns: 1fr; }
  .offer__buy { position: static; }
}

@media (max-width: 519px) {
  /* The stack's second column is the first thing to go: the row label is the
     part that matters, and a wrapped price column makes both unreadable. */
  .stack thead th:last-child,
  .stack tbody td { display: none; }
  .stack tbody th { padding-right: 0; }
}

/* ---------- the call to action ---------- */
/* The same button the apex page sells with, rather than a second design of its
   own: one wide green button, centred at the foot of the section, with the
   terms as a second line inside it, flanked by the two "Click Here" arrows.
   Buyers of the $17 front end already know this control. */
.vvcta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.2vw, 30px);
  margin: clamp(34px, 5vh, 56px) 0 0;
  flex-wrap: nowrap;
}

.vvcta__btn {
  display: block;
  flex: 0 1 auto;
  max-width: 620px;
  padding: clamp(16px, 1.9vw, 24px) clamp(20px, 2.6vw, 38px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  background: linear-gradient(145deg, #7cab34 0%, #5d9a2c 48%, #3f6d1d 100%);
  color: #fff;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(17px, 1.9vw, 25px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.012em;
  text-align: center;
  text-decoration: none;
  box-shadow:
    0 0 0 5px rgba(95, 154, 47, 0.13),
    0 12px 30px rgba(48, 80, 20, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.18s, filter 0.18s;
}

.vvcta__btn:hover {
  transform: translateY(-3px);
  filter: saturate(1.08);
  box-shadow:
    0 0 0 8px rgba(95, 154, 47, 0.17),
    0 18px 40px rgba(48, 80, 20, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.vvcta__btn:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }

/* The terms ride inside the button, so the ask and what it costs are never
   separated by a scroll. */
.vvcta__btn span {
  display: block;
  margin-top: 7px;
  font-size: clamp(12px, 1.25vw, 14.5px);
  font-weight: 600;
  letter-spacing: 0;
  opacity: 0.9;
}

/* The arrows are two separate images, not one flipped with scaleX(-1): the
   artwork carries the words "Click Here", and mirroring in CSS mirrors the
   lettering with it. clickhere-left.png is the twin, drawn the right way round. */
.vvcta::before,
.vvcta::after {
  content: "";
  flex: none;
  width: clamp(84px, 9vw, 126px);
  height: clamp(74px, 8vw, 112px);
  background-image: url("/vv2/assets/cta/clickhere.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.vvcta::after { background-image: url("/vv2/assets/cta/clickhere-left.png"); }

@media (prefers-reduced-motion: no-preference) {
  .vvcta::before { animation: ctaPointR 1.5s ease-in-out infinite; }
  .vvcta::after { animation: ctaPointL 1.5s ease-in-out infinite; }

  @keyframes ctaPointR {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(7px); }
  }

  /* Negative, because this one nudges leftward toward the button. */
  @keyframes ctaPointL {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-7px); }
  }
}

/* Below this the button is nearly full width and the arrows would squeeze the
   label into two cramped lines. */
@media (max-width: 899px) {
  .vvcta { display: block; }
  .vvcta::before,
  .vvcta::after { display: none; }
  .vvcta__btn { max-width: none; }
}

/* The price card carries the same button, sized for its narrower column. */
.offer__btn {
  display: block;
  width: 100%;
  margin-top: clamp(18px, 2vw, 26px);
  padding: clamp(14px, 1.7vw, 20px) clamp(14px, 1.8vw, 24px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 16px;
  background: linear-gradient(145deg, #7cab34 0%, #5d9a2c 48%, #3f6d1d 100%);
  color: #fff;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(16px, 1.7vw, 21px);
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -0.012em;
  text-align: center;
  text-decoration: none;
  height: auto;
  box-shadow:
    0 0 0 5px rgba(95, 154, 47, 0.13),
    0 12px 30px rgba(48, 80, 20, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.18s, filter 0.18s;
}

.offer__btn:hover {
  transform: translateY(-3px);
  filter: saturate(1.08);
  box-shadow:
    0 0 0 8px rgba(95, 154, 47, 0.17),
    0 18px 40px rgba(48, 80, 20, 0.44),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.offer__btn .icon { display: none; }

@media (prefers-reduced-motion: reduce) {
  .vvcta__btn, .offer__btn { transition: none; }
  .vvcta__btn:hover, .offer__btn:hover { transform: none; }
}

/* The price card now carries enough to stand level with the table beside it,
   so it no longer needs to float: both columns stretch and end together. */
.offer { align-items: stretch; }
.offer__buy { position: static; }

/* The ticks take the slack, so the card's foot lines up with the table's. */
.offer__ticks { flex: 1 0 auto; }

.offer__next {
  width: 100%;
  margin-top: clamp(16px, 1.8vw, 22px);
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--border);
  text-align: left;
}

.offer__nexth {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: clamp(11.5px, 1.15vw, 13px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.offer__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

.offer__steps li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  padding: 9px 0;
}

.offer__steps em {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(12px, 1.2vw, 13.5px);
  font-style: normal;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--green);
}

.offer__steps b {
  display: block;
  font-size: clamp(13.5px, 1.4vw, 15px);
  font-weight: 700;
}

.offer__steps span {
  color: var(--muted);
  font-size: clamp(12.5px, 1.3vw, 14px);
  font-weight: 500;
  line-height: 1.45;
}

/* With both columns stretched, the slack moves to whichever card has less in
   it. Pushing the stack's footnote to the floor spreads it rather than leaving
   a block of empty card under the table. */
.offer__stack { display: flex; flex-direction: column; }

/* Let the table take the column's full height so the extra space is shared out
   between the fourteen rows, instead of pooling as a blank block above the
   footnote. A table only distributes height when it is given one. */
.offer__stack .stack { flex: 1 1 auto; height: 100%; }
.stack tbody { vertical-align: middle; }
.stack__note { padding-top: 16px; }

/* ---------- section 17 — no experience needed ---------- */
/* Weather: wide soft aurora bands, angled. No repeating pattern and no points —
   the two things the page has already used for atmosphere. */
.sec--who {
  background: linear-gradient(180deg, var(--page) 0%, color-mix(in srgb, var(--cat-6) 7%, var(--page)) 50%, var(--page) 100%);
}

.sec--who .sec__bg {
  background-image:
    linear-gradient(118deg, transparent 18%, color-mix(in srgb, var(--cat-6) 7%, transparent) 30%, transparent 42%),
    linear-gradient(118deg, transparent 48%, color-mix(in srgb, var(--violet) 8%, transparent) 60%, transparent 72%),
    linear-gradient(118deg, transparent 74%, color-mix(in srgb, var(--green) 6%, transparent) 86%, transparent 96%);
}

.sec--who .sec__bg::after {
  background:
    radial-gradient(ellipse 50% 40% at 84% 18%, color-mix(in srgb, var(--cat-6) 18%, transparent), transparent 68%),
    radial-gradient(ellipse 54% 42% at 12% 88%, color-mix(in srgb, var(--violet) 16%, transparent), transparent 70%);
}

/* A figure each side of the cards, both standing on the floor of the section.
   One figure on its own read as a stock headshot parked beside a grid; a pair
   framing the cards reads as the people the section is talking about. */
.whowrap {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: clamp(8px, 1.2vw, 20px);
  align-items: end;
  margin: clamp(34px, 5vh, 56px) 0 0;
}

.whogrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(13px, 1.5vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.who {
  padding: clamp(17px, 1.9vw, 25px);
  border-radius: 20px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.who:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-lift-hover), 0 0 36px color-mix(in srgb, var(--cat-6) 16%, transparent);
}

.who .icon {
  display: block;
  box-sizing: content-box;
  width: 19px;
  height: 19px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--cat-6) 30%, transparent);
  border-radius: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cat-6) 24%, transparent), color-mix(in srgb, var(--cat-6) 7%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--cat-6);
}

.who b {
  display: block;
  margin-top: 14px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(16px, 1.55vw, 20px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.024em;
}

.who p {
  margin: 9px 0 0;
  color: color-mix(in srgb, var(--text) 68%, transparent);
  font-size: clamp(13.5px, 1.35vw, 15px);
  font-weight: 500;
  line-height: 1.52;
}

.whofig { margin: 0; align-self: end; }

/* Scaled past the column they sit in, so they read as people standing beside
   the cards rather than thumbnails tucked into a gutter. Negative margins let
   them overhang the grid without widening it. */
.whofig img {
  display: block;
  width: 152%;
  max-width: none;
  height: auto;
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, 0.62));
}

.whofig--l img { margin-left: -46%; }
.whofig--r img { margin-right: -46%; }

/* One figure goes before the other: below this there is not enough room for
   cards and two people, but a single figure still frames the grid. */
@media (max-width: 1279px) {
  .whowrap { grid-template-columns: 2.1fr 0.8fr; }
  .whofig--l { display: none; }
  .whofig--r img { width: 124%; margin-right: -24%; }
}

@media (max-width: 1023px) {
  .whowrap { grid-template-columns: 1fr; }
  /* They are decoration; on a narrow screen they cost a screenful. */
  .whofig { display: none; }
}

@media (max-width: 679px) { .whogrid { grid-template-columns: 1fr; } }

/* ---------- section 18 — what the old way costs ---------- */
/* Weather: a ledger. Dashed horizontal rules at a wide pitch, like a printed
   statement — nothing else on the page is dashed. */
.sec--cost {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cat-9) 7%, var(--page)) 0%, var(--page) 48%, var(--page) 100%);
}

.sec--cost .sec__bg {
  background-image: repeating-linear-gradient(
    90deg,
    var(--grid-line) 0 14px,
    transparent 14px 26px
  );
  background-size: 100% 54px;
}

.sec--cost .sec__bg::after {
  background:
    radial-gradient(ellipse 54% 36% at 22% 10%, color-mix(in srgb, var(--cat-9) 17%, transparent), transparent 66%),
    radial-gradient(ellipse 46% 40% at 82% 88%, color-mix(in srgb, var(--green) 13%, transparent), transparent 70%);
}

.costwrap {
  display: grid;
  grid-template-columns: 1.4fr 0.8fr;
  gap: clamp(18px, 2.4vw, 36px);
  align-items: stretch;
  margin: clamp(34px, 5vh, 56px) 0 0;
  text-align: left;
}

.costs {
  width: 100%;
  border-collapse: collapse;
  padding: 0;
}

.costs__cap {
  padding-bottom: 14px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 700;
  letter-spacing: -0.026em;
  text-align: left;
  color: var(--text);
}

.costs tbody th {
  padding: 14px 16px 14px 0;
  border-bottom: 1px solid var(--border);
  text-align: left;
  font-weight: 500;
}

.costs tbody th b {
  display: block;
  font-size: clamp(14.5px, 1.5vw, 17px);
  font-weight: 700;
  letter-spacing: -0.018em;
}

.costs tbody th span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: clamp(12.5px, 1.3vw, 14px);
  font-weight: 500;
}

/* Tabular figures: a column of money has to line up. */
.costs tbody td {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  text-align: right;
  white-space: nowrap;
}

.costs tbody td em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-family: Inter, sans-serif;
  font-size: clamp(11.5px, 1.2vw, 13px);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.costsum {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(22px, 2.6vw, 34px);
  border: 1px solid transparent;
  border-radius: 26px;
  text-align: center;
  background:
    linear-gradient(170deg, color-mix(in srgb, var(--cat-9) 10%, var(--surface)) 0%, var(--surface-2) 100%) padding-box,
    linear-gradient(170deg, color-mix(in srgb, var(--cat-9) 42%, transparent) 0%, var(--border) 44%, var(--bevel-dark) 100%) border-box;
  box-shadow: var(--card-lift);
}

.costsum__lab, .costsum__vs {
  margin: 0;
  color: var(--muted);
  font-size: clamp(12px, 1.25vw, 14px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.costsum__vs {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.costsum__big, .costsum__now {
  display: block;
  margin-top: 6px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(42px, 5.4vw, 72px);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: -0.045em;
  color: var(--cat-9);
}

.costsum__now { color: var(--green); }

.costsum__sub {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: clamp(12.5px, 1.3vw, 14.5px);
  font-weight: 600;
  line-height: 1.4;
}

@media (max-width: 1023px) { .costwrap { grid-template-columns: 1fr; } }

/* ---------- section 19 — the bonuses ---------- */
/* Weather: the bonus photograph itself, veiled hard and thrown to one side. */
.sec--bonus {
  background: linear-gradient(180deg, var(--page) 0%, color-mix(in srgb, var(--gold) 8%, var(--page)) 55%, var(--page) 100%);
}

.sec--bonus .sec__bg {
  background-image:
    linear-gradient(
      180deg,
      rgba(var(--scrim), calc(var(--earn-veil) + 0.17)) 0%,
      rgba(var(--scrim), calc(var(--earn-veil) + 0.04)) 40%,
      rgba(var(--scrim), calc(var(--earn-veil) + 0.18)) 100%
    ),
    url("/vv2/assets/rest/bonuses.webp");
  background-position: 0 0, center 16%;
  background-size: auto, cover;
  background-repeat: no-repeat, no-repeat;
}

.sec--bonus .sec__bg::after {
  background:
    radial-gradient(ellipse 52% 36% at 78% 14%, color-mix(in srgb, var(--gold) 19%, transparent), transparent 68%),
    radial-gradient(ellipse 48% 40% at 16% 86%, color-mix(in srgb, var(--violet) 15%, transparent), transparent 70%);
}

/* Ten of them: two columns resolve to five full rows, one column to ten. */
.bonuses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(13px, 1.5vw, 22px);
  margin: clamp(34px, 5vh, 56px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.bonus {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: clamp(12px, 1.5vw, 18px);
  padding: clamp(16px, 1.8vw, 24px);
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    var(--glass) padding-box,
    linear-gradient(170deg, var(--bevel-lit) 0%, var(--border) 38%, var(--bevel-dark) 100%) border-box;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--card-lift);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.bonus:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-lift-hover), 0 0 36px color-mix(in srgb, var(--gold) 18%, transparent);
}

.bonus__n {
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: color-mix(in srgb, var(--gold) 70%, transparent);
}

.bonus__say b {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(15.5px, 1.5vw, 19px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.024em;
}

.bonus__say p {
  margin: 7px 0 0;
  color: color-mix(in srgb, var(--text) 68%, transparent);
  font-size: clamp(13px, 1.3vw, 14.5px);
  font-weight: 500;
  line-height: 1.5;
}

.bonus__v {
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--gold) 13%, transparent);
  color: var(--gold);
  font-size: clamp(12px, 1.2vw, 13.5px);
  font-weight: 800;
  white-space: nowrap;
}

.bonus__tot {
  margin: clamp(22px, 3vh, 32px) 0 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(19px, 2.1vw, 28px);
  font-weight: 700;
  letter-spacing: -0.028em;
  color: color-mix(in srgb, var(--text) 62%, transparent);
}

.bonus__tot .u { color: var(--gold); }

@media (max-width: 859px) { .bonuses { grid-template-columns: 1fr; } }

/* ---------- section 20 — proof ---------- */
/* Weather: fine vertical ticks at a tight pitch, like a ruler. */
.sec--proof {
  background: linear-gradient(180deg, var(--page) 0%, color-mix(in srgb, var(--violet) 8%, var(--page)) 50%, var(--page) 100%);
}

.sec--proof .sec__bg {
  background-image: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 22px);
  background-size: 100% 40%;
  background-position: center;
  background-repeat: no-repeat;
}

.sec--proof .sec__bg::after {
  background:
    radial-gradient(ellipse 56% 40% at 50% 6%, color-mix(in srgb, var(--violet) 20%, transparent), transparent 68%),
    radial-gradient(ellipse 48% 38% at 50% 100%, color-mix(in srgb, var(--green) 13%, transparent), transparent 72%);
}

.proofs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 24px);
  margin: clamp(34px, 5vh, 56px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.proof {
  display: flex;
  flex-direction: column;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid transparent;
  border-radius: 22px;
  background:
    var(--glass) padding-box,
    linear-gradient(170deg, var(--bevel-lit) 0%, var(--border) 38%, var(--bevel-dark) 100%) border-box;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: var(--card-lift);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.proof:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-lift-hover), 0 0 36px color-mix(in srgb, var(--violet) 20%, transparent);
}

.proof .ficon {
  display: block;
  box-sizing: content-box;
  width: 19px;
  height: 19px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--violet) 36%, transparent);
  border-radius: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--violet) 30%, transparent), color-mix(in srgb, var(--violet) 9%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: #cbb6ff;
}

.proof b {
  display: block;
  margin-top: 15px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(17px, 1.65vw, 21px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.026em;
}

.proof p {
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--text) 68%, transparent);
  font-size: clamp(13.5px, 1.35vw, 15px);
  font-weight: 500;
  line-height: 1.52;
}

.proof__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  color: var(--green);
  font-size: clamp(13px, 1.3vw, 14.5px);
  font-weight: 800;
  text-decoration: none;
}

.proof__go .icon { width: 15px; height: 15px; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.proof:hover .proof__go .icon { transform: translateX(4px); }
.proof__go:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }

@media (max-width: 859px) { .proofs { grid-template-columns: 1fr; } }

/* ---------- section 21 — the creator ---------- */
/* Weather: a fan of fine rays from a point behind the figure. Nothing else on
   the page is conic, and a spotlight is the right shape for the one section
   that is about a person rather than a feature. */
.sec--creator {
  background: linear-gradient(180deg, var(--page) 0%, color-mix(in srgb, var(--cat-5) 7%, var(--page)) 46%, var(--page) 100%);
}

.sec--creator .sec__bg {
  background-image: repeating-conic-gradient(from 196deg at 26% 94%, var(--grid-line) 0deg 1.3deg, transparent 1.3deg 7deg);
  /* Rays that run the full height read as a starburst sticker; faded out they
     read as light leaving a point. */
  -webkit-mask-image: radial-gradient(ellipse 78% 86% at 26% 94%, #000 8%, transparent 70%);
  mask-image: radial-gradient(ellipse 78% 86% at 26% 94%, #000 8%, transparent 70%);
}

.sec--creator .sec__bg::after {
  background:
    radial-gradient(ellipse 44% 48% at 25% 74%, color-mix(in srgb, var(--cat-5) 17%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 40% at 88% 14%, color-mix(in srgb, var(--violet) 14%, transparent), transparent 72%);
}

.maker {
  display: grid;
  grid-template-columns: 0.84fr 1.16fr;
  gap: clamp(16px, 3vw, 54px);
  align-items: end;
  margin: clamp(34px, 5vh, 56px) 0 0;
  text-align: left;
}

.maker__fig {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
}

/* A disc behind him. A black shirt on a near-black page has no edge of its
   own; the plate is what gives the figure a silhouette. The head clears the
   top of it on purpose — that overlap is what stops a portrait reading as a
   stock photo dropped into a circle. */
.maker__plate {
  position: absolute;
  bottom: 2%;
  left: 50%;
  z-index: 0;
  width: min(98%, 420px);
  aspect-ratio: 1;
  transform: translateX(-50%);
  border: 1px solid color-mix(in srgb, var(--cat-5) 52%, transparent);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, color-mix(in srgb, var(--cat-5) 26%, transparent), transparent 62%),
    linear-gradient(168deg, color-mix(in srgb, var(--violet) 30%, transparent), color-mix(in srgb, var(--cat-5) 15%, transparent));
  /* Two rings outside the edge rather than one hard line — the disc reads as
     lit from behind instead of as a sticker he is standing on. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 9px color-mix(in srgb, var(--cat-5) 7%, transparent),
    0 0 0 10px color-mix(in srgb, var(--cat-5) 17%, transparent),
    0 30px 70px rgba(0, 0, 0, 0.45);
}

.maker__fig img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 430px;
  height: auto;
  /* The cut-out ends in a straight line mid-thigh. Faded out, the cut reads as
     the figure going out of frame instead of as a crop. */
  -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
  mask-image: linear-gradient(180deg, #000 80%, transparent 99%);
  filter: drop-shadow(0 30px 52px var(--fig-shadow));
}

.maker__badge {
  position: absolute;
  bottom: 8%;
  left: 2%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border: 1px solid color-mix(in srgb, var(--cat-5) 42%, transparent);
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-card);
  color: var(--cat-5);
  font-size: clamp(11.5px, 1.1vw, 13px);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.maker__badge .ficon { width: 14px; height: 14px; }

.maker__hi {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.maker__hi .g {
  background: linear-gradient(96deg, var(--cat-5), var(--green) 72%, var(--green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.maker__role {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: clamp(13.5px, 1.4vw, 16px);
  font-weight: 700;
}

/* The rating and the count travel together — a score with nothing behind it is
   the sort of number a reader skips. */
.maker__rate {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin: clamp(14px, 2vh, 20px) 0 0;
  padding: 11px 16px;
  border: 1px solid transparent;
  border-radius: 999px;
  background:
    var(--glass) padding-box,
    linear-gradient(170deg, var(--bevel-lit) 0%, var(--border) 38%, var(--bevel-dark) 100%) border-box;
  color: color-mix(in srgb, var(--text) 70%, transparent);
  font-size: clamp(13px, 1.35vw, 15px);
  font-weight: 600;
}

.maker__rate b { color: var(--text); font-weight: 800; }

/* Four lit and the fifth part-lit, so 4.8 reads as 4.8 rather than as five. */
.stars--48 .icon:last-child { color: color-mix(in srgb, var(--gold) 42%, var(--muted)); }

.maker__text { margin: clamp(16px, 2.4vh, 24px) 0 0; }

.maker__text p {
  margin: 0 0 13px;
  color: color-mix(in srgb, var(--text) 74%, transparent);
  font-size: clamp(14.5px, 1.5vw, 17.5px);
  font-weight: 500;
  line-height: 1.58;
}

.maker__text p:last-child { margin-bottom: 0; }
.maker__text b { color: var(--text); font-weight: 700; }

.maker__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(9px, 1.1vw, 14px);
  margin: clamp(18px, 2.6vh, 28px) 0 0;
  padding: 0;
  list-style: none;
}

.mstat {
  padding: clamp(12px, 1.4vw, 17px) clamp(10px, 1.2vw, 15px);
  border-radius: 16px;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.mstat:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-lift-hover), 0 0 32px color-mix(in srgb, var(--cat-5) 18%, transparent);
}

.mstat b {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--cat-5);
}

.mstat span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: clamp(11.5px, 1.15vw, 13px);
  font-weight: 600;
  line-height: 1.35;
}

.maker__sign {
  margin: clamp(16px, 2.2vh, 22px) 0 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(15px, 1.6vw, 19px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: color-mix(in srgb, var(--text) 82%, transparent);
}

@media (max-width: 1023px) {
  .maker { grid-template-columns: 1fr; justify-items: center; }
  .maker__fig { max-width: 340px; }
  .maker__say { width: 100%; }
}

@media (max-width: 519px) {
  .maker__stats { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .mstat { transition: none; }
  .mstat:hover { transform: none; }
}

/* ---------- section 22 — support ---------- */
/* Weather: a field of chevrons, all pointing the same way. Nothing else on the
   page zigzags, and a row of arrows is the right shape for a section about
   something coming back to you. Masked on ::before so the glows on ::after are
   not clipped by it. */
.sec--help {
  background: linear-gradient(180deg, var(--page) 0%, color-mix(in srgb, var(--cat-7) 7%, var(--page)) 48%, var(--page) 100%);
}

.sec--help .sec__bg { background-image: none; }

.sec--help .sec__bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--grid-line);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='40'%3E%3Cpath d='M0 28L18 12l18 16 18-16 18 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='40'%3E%3Cpath d='M0 28L18 12l18 16 18-16 18 16' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-size: 72px 40px;
  mask-size: 72px 40px;
}

.sec--help .sec__bg::after {
  background:
    radial-gradient(ellipse 50% 40% at 50% 4%, color-mix(in srgb, var(--cat-7) 18%, transparent), transparent 70%),
    radial-gradient(ellipse 44% 36% at 86% 94%, color-mix(in srgb, var(--green) 11%, transparent), transparent 72%);
}

.helps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(13px, 1.5vw, 22px);
  margin: clamp(34px, 5vh, 56px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.help {
  position: relative;
  padding: clamp(18px, 2vw, 26px);
  border-radius: 22px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.help:hover {
  transform: translateY(-5px);
  box-shadow: var(--card-lift-hover), 0 0 36px color-mix(in srgb, var(--cat-7) 18%, transparent);
}

/* The waiting time is the whole promise of the section, so it is set as the
   largest thing on the card and pinned to the corner where a reader's eye
   lands before the heading. */
.help__clock {
  position: absolute;
  top: clamp(14px, 1.7vw, 22px);
  right: clamp(14px, 1.7vw, 22px);
  display: grid;
  place-items: center;
  width: clamp(60px, 6vw, 76px);
  height: clamp(60px, 6vw, 76px);
  border: 1px solid color-mix(in srgb, var(--cat-7) 40%, transparent);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, color-mix(in srgb, var(--cat-7) 22%, transparent), transparent 72%);
  text-align: center;
  line-height: 1.05;
}

.help__clock b {
  display: block;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--cat-7);
}

.help__clock small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: clamp(11px, 0.88vw, 11.5px);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.help > .icon {
  display: block;
  box-sizing: content-box;
  width: 19px;
  height: 19px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--cat-7) 34%, transparent);
  border-radius: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--cat-7) 26%, transparent), color-mix(in srgb, var(--cat-7) 8%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  color: var(--cat-7);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.help:hover > .icon { transform: translateY(-2px); }

.help > b {
  display: block;
  /* Clear of the clock, which overhangs the top-right corner of the card. */
  max-width: calc(100% - clamp(66px, 6.6vw, 84px));
  margin-top: 15px;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.026em;
}

.help p {
  margin: 10px 0 0;
  color: color-mix(in srgb, var(--text) 68%, transparent);
  font-size: clamp(13.5px, 1.35vw, 15px);
  font-weight: 500;
  line-height: 1.52;
}

@media (max-width: 959px) {
  .helps { grid-template-columns: 1fr; }
  .help > b { max-width: calc(100% - 92px); }
}

@media (prefers-reduced-motion: reduce) {
  .help,
  .help > .icon { transition: none; }
  .help:hover { transform: none; }
  .help:hover > .icon { transform: none; }
}

/* ---------- section 23 — the guarantee ---------- */
/* Weather: a single wide pool of light behind the seal, and nothing else. The
   section is one object; a texture would compete with it. */
.sec--grt {
  background: radial-gradient(ellipse 90% 70% at 50% 40%, color-mix(in srgb, var(--green) 9%, var(--page)) 0%, var(--page) 70%);
}

.sec--grt .sec__bg { background-image: none; }

.sec--grt .sec__bg::after {
  background: radial-gradient(ellipse 38% 44% at 26% 50%, color-mix(in srgb, var(--green) 22%, transparent), transparent 70%);
}

.grt {
  display: grid;
  grid-template-columns: 0.62fr 1.38fr;
  gap: clamp(20px, 3vw, 50px);
  align-items: center;
  margin: clamp(34px, 5vh, 56px) 0 0;
  text-align: left;
}

.grt__seal { margin: 0; }

.grt__seal img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, 0.5));
}

.grt__say p {
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--text) 76%, transparent);
  font-size: clamp(15px, 1.6vw, 18.5px);
  font-weight: 500;
  line-height: 1.55;
}

.grt__say p:last-child { margin-bottom: 0; }
.grt__say b { color: var(--text); font-weight: 700; }

.grt__why {
  padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--muted) !important;
  font-size: clamp(13.5px, 1.4vw, 15.5px) !important;
}

@media (max-width: 859px) {
  .grt { grid-template-columns: 1fr; text-align: center; }
  .grt__seal { max-width: 240px; margin: 0 auto; }
  .grt__say { text-align: left; }
}

/* ---------- section 22 — the questions ---------- */
/* Weather: fine vertical rules at a tight pitch — the page's other vertical
   ruling is at 110px, which reads as a different thing entirely. */
.sec--faq {
  background: linear-gradient(180deg, var(--page) 0%, color-mix(in srgb, var(--cat-8) 6%, var(--page)) 52%, var(--page) 100%);
}

.sec--faq .sec__bg {
  background-image: repeating-linear-gradient(90deg, var(--grid-line) 0 1px, transparent 1px 28px);
}

.sec--faq .sec__bg::after {
  background:
    radial-gradient(ellipse 50% 38% at 14% 14%, color-mix(in srgb, var(--cat-8) 16%, transparent), transparent 68%),
    radial-gradient(ellipse 50% 38% at 86% 86%, color-mix(in srgb, var(--green) 11%, transparent), transparent 70%);
}

.faqs {
  margin: clamp(34px, 5vh, 56px) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.faq + .faq { margin-top: 10px; }

.faq details {
  border: 1px solid transparent;
  border-radius: 18px;
  background:
    var(--glass) padding-box,
    linear-gradient(170deg, var(--bevel-lit) 0%, var(--border) 38%, var(--bevel-dark) 100%) border-box;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--card-lift);
}

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
  cursor: pointer;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(15.5px, 1.6vw, 19px);
  font-weight: 700;
  letter-spacing: -0.022em;
  list-style: none;
}

.faq summary::-webkit-details-marker { display: none; }
.faq summary:focus-visible { outline: 2px solid var(--green); outline-offset: -3px; border-radius: 18px; }

/* A plus that becomes a minus, drawn rather than set in a font so it cannot
   inherit a glyph the heading font does not have. */
.faq summary em {
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.faq summary em::before,
.faq summary em::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 2px;
  margin: -1px 0 0 -7px;
  border-radius: 2px;
  background: var(--green);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq summary em::after { transform: rotate(90deg); }
.faq details[open] summary em::after { transform: rotate(0deg); }

.faq details p {
  margin: 0;
  padding: 0 clamp(18px, 2vw, 26px) clamp(18px, 2vw, 24px);
  color: color-mix(in srgb, var(--text) 70%, transparent);
  font-size: clamp(14px, 1.45vw, 16px);
  font-weight: 500;
  line-height: 1.6;
}

/* ---------- section 23 — the last word ---------- */
/* Weather: one broad horizon, split warm over cool. Nothing is tiled. */
.sec--last {
  background: linear-gradient(
    180deg,
    var(--page) 0%,
    color-mix(in srgb, var(--green) 8%, var(--page)) 62%,
    color-mix(in srgb, var(--violet) 10%, var(--page)) 100%
  );
}

.sec--last .sec__bg { background-image: none; }

.sec--last .sec__bg::after {
  background:
    radial-gradient(ellipse 70% 46% at 50% 108%, color-mix(in srgb, var(--green) 26%, transparent), transparent 70%),
    radial-gradient(ellipse 56% 36% at 50% -6%, color-mix(in srgb, var(--violet) 20%, transparent), transparent 68%);
}

.lastbits {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 22px);
  margin: clamp(26px, 3.4vh, 38px) 0 0;
  padding: 0;
  list-style: none;
}

.lastbits li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 5%, transparent);
  font-size: clamp(13px, 1.35vw, 15px);
  font-weight: 700;
}

.lastbits .ficon { width: 15px; height: 15px; color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .who, .bonus, .proof { transition: none; }
  .who:hover, .bonus:hover, .proof:hover { transform: none; }
  .proof__go .icon, .faq summary em::before, .faq summary em::after { transition: none; }
  .proof:hover .proof__go .icon { transform: none; }
}

/* ---------- the pricing ribbon ---------- */
/* The value stack is a column of words; this is the same list as objects,
   travelling right to left under it. It fills the foot of the section that the
   two columns leave short, and it is the only moving thing in the section, so
   it reads as a strip of film rather than decoration. */
.ribbon {
  margin: clamp(22px, 3vh, 34px) 0 0;
  overflow: hidden;
  /* Fades at both ends, so cards enter and leave rather than being cut off. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.ribbon__track {
  display: flex;
  gap: clamp(12px, 1.4vw, 20px);
  width: max-content;
  margin: 0;
  padding: 10px 0 18px;
  list-style: none;
  animation: ribbonRun 46s linear infinite;
}

.ribbon:hover .ribbon__track { animation-play-state: paused; }

/* Exactly half: the track holds the set twice, so at -50% the copy sits where
   the original started and the jump back is invisible. */
@keyframes ribbonRun {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.rib {
  flex: 0 0 auto;
  width: clamp(190px, 19vw, 260px);
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%) padding-box,
    linear-gradient(170deg,
      color-mix(in srgb, var(--gold) 34%, transparent) 0%,
      var(--border-strong) 42%,
      var(--bevel-dark) 100%) border-box;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 14px 28px rgba(0, 0, 0, 0.5),
    0 34px 60px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.rib__shot { display: block; overflow: hidden; }

/* height:auto is load-bearing: the width/height attributes are a presentational
   hint and a used height would beat the aspect ratio. */
.rib__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.rib b {
  display: block;
  padding: 13px 15px 15px;
  border-top: 1px solid var(--border);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(13px, 1.3vw, 15px);
  font-weight: 700;
  letter-spacing: -0.018em;
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  /* Still readable, just not moving: the strip becomes a row you can scroll. */
  .ribbon__track { animation: none; }
  .ribbon { overflow-x: auto; }
}

/* ---------- the footer ---------- */
/* The page asks for money, so the things a buyer is entitled to find — the
   refund policy, the earnings disclaimer, an address that reaches a human —
   are not optional furniture. */
.foot {
  position: relative;
  z-index: 1;
  padding: clamp(40px, 6vh, 70px) clamp(16px, 4vw, 40px) clamp(28px, 4vh, 44px);
  border-top: 1px solid var(--border);
  background: linear-gradient(180deg, var(--page) 0%, color-mix(in srgb, var(--violet) 7%, var(--page)) 100%);
}

.foot__inner {
  width: min(1240px, 100%);
  margin: 0 auto;
  text-align: center;
}

.foot__brand { font-size: clamp(19px, 1.8vw, 24px); justify-content: center; }
.foot__brand em { font-style: normal; color: var(--green); }

.foot__tag {
  margin: 12px auto 0;
  max-width: 44ch;
  color: var(--muted);
  font-size: clamp(13.5px, 1.4vw, 15.5px);
  font-weight: 500;
  line-height: 1.5;
}

.foot__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.8vw, 26px);
  margin-top: clamp(22px, 3vh, 32px);
  padding-top: clamp(20px, 2.6vh, 28px);
  border-top: 1px solid var(--border);
}

.foot__nav a {
  color: color-mix(in srgb, var(--text) 78%, transparent);
  font-size: clamp(13px, 1.35vw, 15px);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s;
}

.foot__nav a:hover { color: var(--green); }
.foot__nav a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }

.foot__legal {
  margin: clamp(22px, 3vh, 30px) auto 0;
  max-width: 92ch;
  color: var(--muted);
  font-size: clamp(11.5px, 1.2vw, 13px);
  font-weight: 500;
  line-height: 1.6;
}

.foot__copy {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: clamp(11.5px, 1.2vw, 13px);
  font-weight: 600;
}

@media (prefers-reduced-motion: reduce) { .foot__nav a { transition: none; } }

.foot__sign {
  margin: clamp(22px, 3vh, 30px) 0 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: clamp(16px, 1.6vw, 20px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.5;
}

.foot__sign em {
  display: inline-block;
  margin-top: 4px;
  color: var(--muted);
  font-size: clamp(12.5px, 1.3vw, 14.5px);
  font-style: normal;
  font-weight: 600;
}

/* ============================================================
   PHONE PASS
   The page had no horizontal overflow at any width, which is not the same as
   working on a phone. These are the things an audit at 390px actually turned
   up: a note that collapsed into columns, sliders too thin to drag with a
   thumb, and a dozen controls under the 44px a finger needs.
   ============================================================ */

/* The note was inline-flex, so the icon, the words and the highlight each
   became a flex column. On a wide screen that looks like one sentence; on a
   phone it stacks into three cramped towers. It is prose — so it is laid out
   as prose, with the icon riding inline. */
.sec__note {
  display: inline-block;
  text-align: center;
  line-height: 1.5;
}

.sec__note .ficon {
  width: 17px;
  height: 17px;
  margin-right: 8px;
  vertical-align: -0.2em;
  color: var(--green);
}

/* ---- things a thumb has to hit ---------------------------------------- */
/* 44px is the smallest target most people can hit reliably. Padding is used
   rather than height so nothing moves on a desktop, where these are fine. */
@media (hover: none), (max-width: 859px) {
  .btn--green,
  .proof__go,
  .foot__nav a,
  .cpre {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .foot__nav a { padding: 10px 4px; }
  .proof__go { padding-top: 20px; }

  /* The sliders were an 8px track — findable with a mouse, not with a thumb.
     The track is thickened and the handle grown well past the 44px rule,
     because this is the one control on the page people are meant to play with. */
  .crange {
    height: 16px;
    margin-top: 16px;
    border-radius: 999px;
  }

  .crange::-webkit-slider-thumb {
    width: 34px;
    height: 34px;
    border-width: 5px;
  }

  .crange::-moz-range-thumb {
    width: 34px;
    height: 34px;
    border-width: 5px;
  }

  .cfield { margin-top: clamp(22px, 4vw, 30px); }

  /* The brand mark in the header and footer is a link; it needs a target too.
     Padding alone fell short once the wordmark shrinks at 360px, so the height
     is stated rather than accumulated. */
  .brand { min-height: 44px; padding: 6px 0; }
}

/* ---- the page is very long on a phone --------------------------------- */
/* Twenty-three sections at desktop rhythm comes to roughly 52,000px of
   scrolling. Tightening the vertical padding and the gaps between cards takes
   a meaningful bite out of that without making anything feel cramped. */
@media (max-width: 679px) {
  .sec { padding-top: clamp(46px, 9vw, 64px); padding-bottom: clamp(46px, 9vw, 64px); }

  .whogrid,
  .mkts,
  .tools6,
  .sell4,
  .bonuses,
  .proofs,
  .tfacts,
  .mfacts,
  .steps3 { gap: 12px; }

  .lifeline { padding: 18px 0; }

  /* Headlines carry the page on a phone; they should not shrink to body size. */
  .h2 { line-height: 1.08; }

  /* A full-width button with a second line inside it needs room to breathe. */
  .vvcta__btn { padding: 15px 18px; }
}

/* ---- the long tables -------------------------------------------------- */
@media (max-width: 519px) {
  /* The cost table's two columns do not both fit; the label is what matters,
     so the amount moves under it rather than being squeezed to one word a line. */
  .costs tbody th,
  .costs tbody td { display: block; width: 100%; }
  .costs tbody th { padding-bottom: 4px; border-bottom: 0; }
  .costs tbody td { padding-top: 0; text-align: left; }
  .costs tbody td em { display: inline; margin-left: 6px; }
}

/* The hamburger was a 38px square — the one control every phone visitor uses
   to navigate, and the only one still under the mark. */
@media (hover: none), (max-width: 1023px) {
  .iconbtn.burger { width: 44px; height: 44px; }
}

/* The slider's own box was 16px tall, so the hit area was 16px even though the
   handle is 34px. Giving the input real height and painting the track as a
   centred band keeps the thin look with a thumb-sized target behind it. */
@media (hover: none), (max-width: 859px) {
  .crange {
    height: 44px;
    margin-top: 6px;
    border-radius: 0;
    background-repeat: no-repeat;
    background-size: 100% 14px;
    background-position: 0 center;
  }
}

/* Small print is small by intent, but 11.5px is below what most people can
   read on a phone held at arm's length. */
@media (max-width: 679px) {
  .foot__legal,
  .foot__copy,
  .offer__nexth,
  .costsum__lab,
  .costsum__vs { font-size: 12.5px; }
}