/* Off Your Plate - design tokens and components
   Theme: one theme for the whole page, auto via prefers-color-scheme.
   Accent: signal amber, identical on both pages.
   Radius: one scale, 10px everywhere. */

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --surface: #f6f9fc;
  --surface-2: #eef3f8;
  --text: #0d253d;
  --muted: #64748d;
  --line: #e3e8ee;
  --accent: #533afd;
  --accent-hover: #4434d4;
  --accent-on: #ffffff;
  --accent-wash: rgba(83, 58, 253, 0.07);

  --radius: 8px;
  --maxw: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --step-1: clamp(1.15rem, 1.06rem + 0.45vw, 1.35rem);
  --step-2: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --step-3: clamp(2rem, 1.55rem + 2.2vw, 3.2rem);
  --step-4: clamp(2.4rem, 1.7rem + 3vw, 3.7rem);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1628;
    --surface: #10203a;
    --surface-2: #16294a;
    --text: #f4f7fb;
    --muted: #9db0c9;
    --line: #1e3355;
    --accent: #8b7bff;
    --accent-hover: #a494ff;
    --accent-on: #0d1024;
    --accent-wash: rgba(139, 123, 255, 0.14);
  }
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}

/* Thin display weights with tight tracking are the Stripe signature.
   Sub-headings stay at 500 so they keep their job as labels. */
h1, h2 { line-height: 1.05; letter-spacing: -0.025em; margin: 0; font-weight: 300; text-wrap: balance; }
h3 { line-height: 1.15; letter-spacing: -0.012em; margin: 0; font-weight: 500; text-wrap: balance; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }

.mono {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }
.wrap.narrow { max-width: 760px; }
.lede { font-size: var(--step-1); color: var(--muted); max-width: 56ch; }
.body-text { color: var(--muted); max-width: 66ch; }

section { padding-block: clamp(52px, 7.5vw, 124px); }
.band { background: var(--surface); border-block: 1px solid var(--line); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

.eyebrow {
  font-family: "Geist Mono", monospace; font-size: 0.6875rem;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted);
  margin-bottom: 14px;
}

/* ---------- navigation ---------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  height: 68px; display: flex; align-items: center;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 28px; }
.brand { font-weight: 620; letter-spacing: -0.03em; text-decoration: none; font-size: 1.0625rem; margin-right: auto; }
.brand span { color: var(--accent); }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--muted); text-decoration: none; font-size: 0.9375rem; transition: color 0.2s var(--ease); }
.nav-links a:hover { color: var(--text); }
@media (max-width: 760px) { .nav-links { display: none; } }

/* ---------- buttons ---------- */

/* Documented shape rule for this theme: buttons and chips are full pills,
   containers are 8px. Applied everywhere, no exceptions. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  padding: 12px 22px; border-radius: 999px;
  font-size: 0.9375rem; font-weight: 520; text-decoration: none;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: background-color 0.2s var(--ease), transform 0.12s var(--ease), border-color 0.2s var(--ease);
}
.btn-primary { background: var(--accent); color: var(--accent-on); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border-color: var(--line); color: var(--text); background: transparent; }
.btn-ghost:hover { border-color: var(--muted); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

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

.hero {
  position: relative;
  /* The drifting mesh below reaches past the edges on purpose; without this it
     widens the whole page and the reader gets a sideways scrollbar. */
  overflow: clip;
  padding-top: clamp(40px, 6vw, 84px); padding-bottom: clamp(52px, 7vw, 100px);
  /* The atmospheric gradient mesh across the upper third of the page. */
  background:
    radial-gradient(70% 120% at 12% -20%, rgba(83, 58, 253, 0.16), transparent 60%),
    radial-gradient(50% 90% at 78% -10%, rgba(249, 107, 238, 0.13), transparent 62%),
    radial-gradient(60% 100% at 45% 0%, rgba(56, 200, 255, 0.10), transparent 65%);
}
@media (prefers-color-scheme: dark) {
  .hero {
    background:
      radial-gradient(70% 120% at 12% -20%, rgba(139, 123, 255, 0.22), transparent 60%),
      radial-gradient(50% 90% at 78% -10%, rgba(249, 107, 238, 0.12), transparent 62%),
      radial-gradient(60% 100% at 45% 0%, rgba(56, 200, 255, 0.10), transparent 65%);
  }
}
/* The mesh drifts. Stripe's own gradient is never still, and a hero that
   does not move is the difference between a page and a printed page. */
.hero::before {
  content: ""; position: absolute; inset: -20% -10% auto -10%; height: 140%;
  z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 60% at 20% 30%, rgba(83, 58, 253, 0.20), transparent 62%),
    radial-gradient(32% 52% at 72% 22%, rgba(249, 107, 238, 0.16), transparent 64%),
    radial-gradient(36% 56% at 50% 60%, rgba(56, 200, 255, 0.14), transparent 66%);
  filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference) {
  .hero::before { animation: drift 22s ease-in-out infinite alternate; }
}
@keyframes drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.12); }
}

.hero .wrap {
  position: relative;
  display: grid; gap: clamp(36px, 5vw, 60px);
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  align-items: center;
}
.hero h1 { max-width: 19ch; }
.hero .lede { margin-top: 20px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (max-width: 900px) { .hero .wrap { grid-template-columns: 1fr; } }

/* ---------- hero photograph ---------- */

.hero-media { display: block; }
.hero-media img {
  width: 100%; height: auto; display: block;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(13, 37, 61, 0.06), 0 22px 60px rgba(13, 37, 61, 0.14);
}

/* ---------- scroll reveal, native ---------- */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: reveal-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
  }
}
@keyframes reveal-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- examples: said / done pairs ---------- */

.swap { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 0; }
.swap li { padding-block: 26px; border-top: 1px solid var(--line); display: grid; gap: 10px 40px; }
.swap li:last-child { border-bottom: 1px solid var(--line); }
.said { font-size: var(--step-1); max-width: 40ch; }
.done { color: var(--muted); max-width: 48ch; }
.done::before { content: "→ "; color: var(--accent); }

@media (min-width: 860px) {
  .swap li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
}

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

.video-slot {
  margin-top: 34px; aspect-ratio: 16 / 9; border-radius: var(--radius);
  border: 1px dashed var(--line); background: var(--surface-2);
  display: grid; place-items: center; color: var(--muted); font-size: 0.8125rem;
}

/* ---------- integrations ----------
   Brand colours on white tiles, so the marks read the same in both themes and
   look like the tools they are rather than grey stickers. They arrive one at a
   time when the row is reached, which is the only motion in this section. */

.logos {
  margin-top: 38px;
  display: flex; flex-wrap: wrap; gap: 14px;
}
.logo-tile {
  display: grid; place-items: center;
  width: 68px; height: 68px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(13, 37, 61, 0.05), 0 8px 22px rgba(13, 37, 61, 0.06);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.logo-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(13, 37, 61, 0.12); }
.logo-tile img { width: 34px; height: 34px; display: block; }

@media (prefers-color-scheme: dark) {
  .logo-tile { border-color: #24365c; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }
}

/* They arrive one at a time as the row comes up. Each tile runs on its own
   view() timeline with a slightly later range than the one before it, so the
   stagger follows the scroll instead of a timer. Where scroll timelines are
   unsupported the tiles are simply there, never hidden. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .logo-tile {
      animation: tile-in linear both;
      animation-timeline: view();
    }
    .logo-tile:nth-child(1) { animation-range: entry 2%  cover 16%; }
    .logo-tile:nth-child(2) { animation-range: entry 6%  cover 20%; }
    .logo-tile:nth-child(3) { animation-range: entry 10% cover 24%; }
    .logo-tile:nth-child(4) { animation-range: entry 14% cover 28%; }
    .logo-tile:nth-child(5) { animation-range: entry 18% cover 32%; }
    .logo-tile:nth-child(6) { animation-range: entry 22% cover 36%; }
    .logo-tile:nth-child(7) { animation-range: entry 26% cover 40%; }
    .logo-tile:nth-child(8) { animation-range: entry 30% cover 44%; }
  }
}
@keyframes tile-in {
  from { opacity: 0; transform: translateY(18px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}

/* ---------- pricing ---------- */

.tiers {
  margin-top: 40px; display: grid; gap: 20px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
}
@media (max-width: 820px) { .tiers { grid-template-columns: 1fr; } }

.tier { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.tier-lit { border-color: var(--accent); background: var(--accent-wash); }
.tier-name { font-weight: 560; }
.tier-price { font-size: var(--step-2); margin-block: 10px 14px; letter-spacing: -0.02em; }
.price-note { margin-top: 32px; max-width: 68ch; }

/* ---------- partner terms ---------- */

.terms { margin-top: 40px; display: grid; gap: 30px; }
@media (min-width: 760px) { .terms { grid-template-columns: 1fr 1fr; gap: 38px 44px; } }
.term h3 { margin-bottom: 10px; }

.quote {
  margin: 26px 0; padding: 22px 26px;
  border-left: 2px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: var(--step-1);
}

/* ---------- form ---------- */

.ask-form { margin-top: 34px; display: grid; gap: 22px; max-width: 560px; }
.field { display: grid; gap: 8px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field label, .field legend { font-size: 0.9375rem; font-weight: 520; padding: 0; }
.field input, .field textarea {
  font: inherit; color: var(--text); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; width: 100%;
}
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); opacity: 0.75; }
.help { font-size: 0.875rem; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.chip {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 40px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 0.875rem; line-height: 1.2; cursor: pointer;
  background: var(--surface); color: var(--muted);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background-color 0.18s var(--ease);
}
.chip:hover { border-color: var(--muted); color: var(--text); }
.chip input {
  position: absolute; opacity: 0; pointer-events: none;
  width: 1px; height: 1px; margin: 0;
}
.chip:has(input:checked) {
  border-color: var(--accent); background: var(--accent-wash); color: var(--text);
}
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- footer ---------- */

.foot { border-top: 1px solid var(--line); padding-block: 34px; }
.foot .wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; color: var(--muted); font-size: 0.875rem; }
.foot a { color: var(--muted); }
.foot-contact { display: flex; align-items: center; gap: 14px; }
.foot .btn-sm {
  padding: 7px 16px; font-size: 0.8125rem; color: var(--muted); text-decoration: none;
}
.foot .btn-sm:hover { color: var(--text); }

/* ---------- the answer that replaces the form ---------- */

.answered {
  margin-top: 34px; max-width: 560px;
  padding: 26px 28px; border-radius: var(--radius);
  border: 1px solid var(--accent); background: var(--accent-wash);
  outline: none;
}
.answered-tag {
  font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--accent); margin-bottom: 12px;
}
.form-note { margin-top: 12px; font-size: 0.9375rem; }
.form-note.error { color: #c41c1c; }
@media (prefers-color-scheme: dark) { .form-note.error { color: #ff9c9c; } }

/* ---------- running strip of complaints ---------- */
/* Motivation: it is the voice of the audience moving past you. One marquee
   on the page, carrying real content rather than decoration. */

.strip {
  overflow: hidden; border-block: 1px solid var(--line);
  background: var(--surface); padding-block: 20px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.strip-track { display: flex; width: max-content; gap: 0; }
.strip-track span {
  white-space: nowrap; font-size: var(--step-1); color: var(--muted);
  padding-inline: 28px;
}
.strip-track span::after { content: "·"; color: var(--accent); margin-left: 28px; }

@media (prefers-reduced-motion: no-preference) {
  .strip-track { animation: slide 46s linear infinite; }
  .strip:hover .strip-track { animation-play-state: paused; }
}
@keyframes slide { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ---------- who this is for ----------
   Same two-beat idea as the complaints above, deliberately built differently:
   there the halves meet from the sides, here the answer unfolds underneath the
   trade. There it is one thing fixed, here it is what a whole setup looks like. */

.who { background: var(--accent); color: #fff; border: 0; }
.who h2 { color: #fff; }
.who .kicker { color: rgba(255,255,255,0.72); margin-bottom: 26px; }
.who .tail { margin-top: 30px; color: rgba(255,255,255,0.82); max-width: 60ch; }

.roles { list-style: none; margin: 0; padding: 0; }
.roles li {
  border-bottom: 1px solid rgba(255,255,255,0.18);
  padding-block: 22px;
  display: grid; gap: 8px;
  transition: padding-left 0.28s var(--ease);
}
.roles li:hover { padding-left: 12px; }
.role {
  font-size: clamp(1.45rem, 0.95rem + 2.2vw, 2.5rem);
  font-weight: 300; letter-spacing: -0.025em; line-height: 1.18;
}
.fix { color: rgba(255,255,255,0.78); max-width: 62ch; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .roles li .role {
      animation: role-in linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 24%;
    }
    .roles li .fix {
      animation: fix-in linear both;
      animation-timeline: view();
      animation-range: entry 26% cover 52%;
    }
  }
}
@keyframes role-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fix-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- the sequence that stands in for the recording ---------- */

.sequence { margin-top: 34px; display: grid; gap: 12px; max-width: 560px; }
.seq-step {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg);
}
/* Hidden only once JavaScript is alive and able to bring it back.
   Without the js class the four lines are simply visible, which is the
   behaviour anyone with a blocked or failed script must get. */
.js .sequence:not(.played):not(.playing) .seq-step { opacity: 0; transform: translateY(10px); }
@media (prefers-reduced-motion: no-preference) {
  .sequence.playing .seq-step { animation: step-in 0.5s var(--ease) forwards; }
  .sequence.playing .seq-step:nth-child(2) { animation-delay: 0.5s; }
  .sequence.playing .seq-step:nth-child(3) { animation-delay: 1.1s; }
  .sequence.playing .seq-step:nth-child(4) { animation-delay: 1.7s; }
}
@keyframes step-in { to { opacity: 1; transform: none; } }

.seq-dot { width: 9px; height: 9px; border-radius: 999px; background: var(--accent); flex: none; }
.seq-text { flex: 1; }
.seq-time { color: var(--muted); font-size: 0.875rem; }
.seq-note { margin-top: 14px; font-size: 0.875rem; color: var(--muted); }

.tier-price [data-count]::before { content: "$"; }

/* ---------- shared drawing language for the diagrams ----------
   These were written for the big diagram that has since been removed. The hero
   card still uses them, so they live here on their own now. */

.dg-box { fill: #151c47; stroke: #2b3572; }
.dg-lit { fill: rgba(124, 102, 255, 0.22); stroke: #7c66ff; }
.dg-core { fill: #533afd; stroke: none; }
.dg-t { fill: #d6dbff; font-size: 15px; text-anchor: middle; }
.dg-core-t { fill: #fff; font-size: 19px; text-anchor: middle; font-weight: 500; }
.dg-core-s { fill: rgba(255,255,255,0.72); font-size: 12.5px; text-anchor: middle; }

.wire { fill: none; stroke: #33408a; stroke-width: 1.5; stroke-dasharray: 4 6; }
.pulse { fill: #9d8bff; opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .wire { animation: flow 1.6s linear infinite; }
  .pulse { animation: run 4.2s var(--ease) infinite; }
  .pulse.d2 { animation-delay: 0.7s; }
  .pulse.d3 { animation-delay: 1.4s; }
  .pulse.d4 { animation-delay: 2.1s; }
  .pulse.d5 { animation-delay: 2.5s; }
}
@keyframes flow { to { stroke-dashoffset: -20; } }
@keyframes run {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ---------- the drafting diagram in the first screen ---------- */
/* A dark card so the drawing keeps the same palette as the big diagram below,
   and so the hero keeps the light/dark contrast the photograph used to give it. */

.hero-card {
  background: #0b1030;
  border: 1px solid #1b2358;
  border-radius: 14px;
  padding: 18px 16px;
  box-shadow: 0 2px 6px rgba(13, 37, 61, 0.06), 0 22px 60px rgba(13, 37, 61, 0.16);
}
/* In dark mode the page background (#0a1628) sits almost on top of the card's
   own navy, so the card needs its own light and a brighter edge to read as a
   separate surface instead of a hole in the page. */
@media (prefers-color-scheme: dark) {
  .hero-card {
    background: #141b45;
    border-color: #34408f;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3), 0 22px 60px rgba(0, 0, 0, 0.45),
      0 0 0 1px rgba(139, 123, 255, 0.1);
  }
}
.diagram-mini { display: block; width: 100%; height: auto; }
.diagram-mini .dg-t { font-size: 14px; }
.diagram-mini .dg-core-t { font-size: 17px; }
.diagram-mini .dg-core-s { font-size: 11.5px; }
.diagram-mini .dg-core { fill: url(#core-mini); }

/* ---------- the complaint arrives, then the answer is pulled in after it ----------
   Each half runs on its own view() timeline, so the timing follows the reader's
   scroll rather than a fixed delay. They enter from opposite sides and meet in
   the middle: on a phone the complaint comes in from the right and the answer
   from the left, on a wide screen each half enters from its own outer edge.
   Falls back to plain visible text where scroll timelines are unsupported. */

/* The travel distance would otherwise widen the page for a moment. */
#examples { overflow-x: clip; }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .swap li .said,
    .swap li .done {
      animation-duration: 1ms;
      animation-fill-mode: both;
      animation-timing-function: linear;
      animation-timeline: view();
    }
    .swap li .said { animation-range: entry 0% cover 26%; }
    .swap li .done { animation-range: entry 28% cover 56%; }

    .swap li .done::before {
      animation: arrow-in linear both;
      animation-timeline: view();
      animation-range: entry 34% cover 54%;
    }

    /* phone: question from the right, answer from the left */
    @media (max-width: 859px) {
      .swap li .said { animation-name: in-from-right; }
      .swap li .done { animation-name: in-from-left; }
    }
    /* wide: each column enters from its own side */
    @media (min-width: 860px) {
      .swap li .said { animation-name: in-from-left-soft; }
      .swap li .done { animation-name: in-from-right-soft; }
    }
  }
}

@keyframes in-from-right {
  from { opacity: 0; transform: translateX(72px); }
  to   { opacity: 1; transform: none; }
}
@keyframes in-from-left {
  from { opacity: 0; transform: translateX(-72px); }
  to   { opacity: 1; transform: none; }
}
@keyframes in-from-left-soft {
  from { opacity: 0; transform: translateX(-52px); }
  to   { opacity: 1; transform: none; }
}
@keyframes in-from-right-soft {
  from { opacity: 0; transform: translateX(52px); }
  to   { opacity: 1; transform: none; }
}
@keyframes arrow-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

.done::before { display: inline-block; }

/* ---------- the recording ---------- */

.proof-grid {
  margin-top: 34px; display: grid; gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
@media (min-width: 860px) {
  .proof-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); }
}

.measured {
  margin-top: 20px; font-size: var(--step-2); color: var(--accent);
  letter-spacing: -0.02em;
}
.seq-note { margin-top: 10px; font-size: 0.875rem; color: var(--muted); max-width: 46ch; }

.demo { margin: 0; }
.demo video {
  display: block; width: 100%; height: auto; max-width: 330px;
  margin-inline: auto;
  border-radius: 18px;
  border: 1px solid var(--line);
  box-shadow: 0 2px 6px rgba(13, 37, 61, 0.06), 0 26px 70px rgba(13, 37, 61, 0.18);
  background: var(--bg);
}

@media (max-width: 700px) {
  .demo video { max-width: 268px; }
}

/* ---------- the referral fee, stated plainly ---------- */

.fees {
  margin-top: 36px; display: grid; gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) { .fees { grid-template-columns: 1fr 1fr; } }

.fee {
  padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.fee:hover { transform: translateY(-3px); box-shadow: 0 18px 44px rgba(13, 37, 61, 0.10); }
.fee-num {
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.4rem);
  letter-spacing: -0.03em; color: var(--accent); margin-bottom: 10px;
}

/* ---------- a photograph inside a text section ----------
   Lost once already when a neighbouring block was deleted wholesale; it lives
   here on its own so the next tidy-up cannot take it by accident. */

.inline-photo { display: block; margin: 34px 0 4px; max-width: 560px; }
.inline-photo img {
  width: 100%; height: auto; display: block;
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(13, 37, 61, 0.06), 0 22px 60px rgba(13, 37, 61, 0.14);
}

/* ---------- page switch ----------
   The old nav links vanished below 760px, which left no way back from the
   partner page on a phone. This is visible at every width and says which of
   the two pages you are on. */

.pageswitch {
  display: flex; gap: 2px; padding: 3px;
  border-radius: 999px; border: 1px solid var(--line);
  background: var(--surface);
  margin-right: auto;
}
.pageswitch a {
  padding: 7px 15px; border-radius: 999px;
  font-size: 0.875rem; font-weight: 500; text-decoration: none;
  color: var(--muted); white-space: nowrap;
  transition: color 0.2s var(--ease), background-color 0.2s var(--ease);
}
.pageswitch a:hover { color: var(--text); }
.pageswitch a.current { background: var(--accent); color: var(--accent-on); }

.nav .wrap { gap: 16px; }
.brand { margin-right: 4px; }

@media (max-width: 560px) {
  .pageswitch a { padding: 7px 11px; font-size: 0.8125rem; }
  .nav .btn-primary { display: none; }
}