/* ==========================================================================
   Blonde Pal — landing page
   Ported from "Blonde Pal Landing FINAL.dc.html" (Claude Design canvas).
   ========================================================================== */

:root {
  --ink:        #0e0f12;
  --ink-2:      #1c1f25;
  --ink-line:   #2a2d34;

  --pink:       #ff6fb5;
  --blue:       #2874c6;
  --blue-ink:   #2f5fd0;

  --text:       #4c5563;
  --text-2:     #656e7d;
  --muted:      #8b93a1;
  --muted-2:    #8f97a5;
  --muted-3:    #9aa1ad;

  --line:       #e8ebf1;
  --line-2:     #dde2ea;
  --surface:    #f4f6f9;

  --maxw:       1440px;
  --gutter:     clamp(16px, 3.2vw, 40px);

  /* Rail: 6 cards × (260px card + 14px gap) = 1644px per loop */
  --rail-card:  260px;
  --rail-gap:   14px;
  --rail-shift: 1644px;

  --grad-pink:  linear-gradient(115deg, #ffd0e6 0%, #ff8cc4 22%, #ff5fa8 46%, #ffa8d3 62%, #ff6fb5 80%, #ffd9ec 100%);
  --grad-blue:  linear-gradient(180deg, #5aa9ea, #2874c6);
  --grad-blue-h:linear-gradient(180deg, #4a9be2, #1d63b4);
  --grad-gold:  linear-gradient(100deg, #fffdf6 0%, #f1e6c8 15%, #dccb96 32%, #fffaf0 48%, #d2be86 64%, #f4ead0 82%, #ddcb99 100%);
  --plate-a:    linear-gradient(160deg, #9ed0f7, #2874c6 55%, #7cc0f2);
  --plate-b:    linear-gradient(160deg, #7cc0f2, #2874c6 60%, #9ed0f7);
  --plate-c:    linear-gradient(150deg, #7cc0f2, #2874c6 55%, #9ed0f7);
}

/* --------------------------------------------------------------- reset -- */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: #ffffff;
  color: var(--ink);
  font-family: 'Archivo', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3, h4, p, blockquote, figure, dl, dd { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }
img { display: block; max-width: 100%; }

a { color: var(--blue-ink); text-decoration: none; }
a:hover { color: var(--pink); }

::selection { background: #ffe1ef; }

:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 14px 20px; font-weight: 800;
}
.skip-link:focus { left: 0; color: #fff; }

@keyframes sheen {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes rail {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--rail-shift) * -1), 0, 0); }
}

/* ------------------------------------------------------------- layout -- */

.wrap    { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(56px, 7.6vw, 110px) var(--gutter); }
.section--tight { padding-top: 0; }

/* ------------------------------------------------------- image frames -- */
/* Reproduces the <image-slot> crop model. The stored view — scale `data-s` and
   pan `data-x`/`data-y`, the latter as a percentage of the frame — is applied by
   assets/app.js, which sizes the image to its full cover-scaled dimensions and
   offsets its centre, the same maths the slot used. The rule below is the
   pre-script baseline: a centred cover crop, exactly what the slot itself shows
   before its own geometry lands. */

.frame { position: relative; overflow: hidden; width: 100%; height: 100%; background: var(--line); }
.frame > img {
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover;
  transform: translate(-50%, -50%);
}
.frame--r16 { border-radius: 16px; }
.frame--r18 { border-radius: 18px; }

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

.btn {
  display: inline-flex; align-items: center; gap: 12px;
  border: 0; cursor: pointer; text-align: left;
  font-family: inherit; font-size: 18px; font-weight: 800;
  border-radius: 12px; padding: 20px 30px;
  transition: background .18s ease, box-shadow .18s ease;
}
.btn--lg { padding: 22px 34px; font-size: 19px; }

.btn--blue {
  color: #ffffff;
  background: var(--grad-blue);
  box-shadow: 0 14px 32px rgba(40, 116, 198, .36);
}
.btn--blue:hover { background: var(--grad-blue-h); color: #ffffff; }

.btn--ghost {
  font-weight: 700; color: var(--ink); background: #ffffff;
  box-shadow: inset 0 0 0 1.5px #d5dae3;
}
.btn--ghost:hover { background: var(--surface); color: var(--ink); }

.btn--gold {
  color: #2e2510;
  background: var(--grad-gold);
  background-size: 200% 100%;
  box-shadow: 0 12px 28px rgba(190, 170, 110, .35),
              inset 0 1px 0 rgba(255, 255, 255, .9),
              inset 0 -1px 0 rgba(140, 120, 60, .25);
}
.btn--gold:hover { color: #2e2510; animation: sheen 1.5s linear infinite; }

/* ---------------------------------------------------------------- nav -- */

.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav__inner {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(14px, 1.8vw, 26px) var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: clamp(16px, 2.4vw, 40px); white-space: nowrap;
}
.nav__brand {
  display: flex; align-items: center; gap: 11px;
  color: var(--ink); font-weight: 900; font-size: 19px; letter-spacing: -.045em;
}
.nav__brand:hover { color: var(--ink); }
.nav__brand img { width: 44px; height: 44px; object-fit: contain; }

.nav__links {
  display: flex; justify-content: center;
  gap: clamp(18px, 2.6vw, 44px);
  font-size: 17px; font-weight: 600;
}
.nav__links a { color: var(--text-2); }
.nav__links a:hover { color: var(--pink); }

.nav__cta {
  justify-self: end;
  border-radius: 999px; padding: 17px 28px; font-size: 16px;
  box-shadow: 0 10px 26px rgba(40, 116, 198, .34);
}

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

.hero { max-width: 1560px; margin: 0 auto; padding: clamp(40px, 4.9vw, 70px) var(--gutter) clamp(48px, 5.6vw, 80px); text-align: center; }
.hero__eyebrow { font-size: clamp(14px, 3.2vw, 19px); line-height: 1.3; letter-spacing: .02em; font-weight: 700; color: var(--muted); }
.hero__title {
  margin-top: 28px;
  font-size: clamp(56px, 10.2vw, 178px); line-height: .82;
  letter-spacing: -.065em; font-weight: 900;
}
.pink { color: var(--pink); }
.hero__sub { margin: 34px auto 0; max-width: 680px; font-size: 20px; line-height: 1.5; color: var(--text); }
.hero__actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; justify-content: center; }

/* -------------------------------------------------------- media strip -- */

.strip { background: var(--grad-pink); }
.strip__bar {
  max-width: var(--maxw); margin: 0 auto; padding: clamp(22px, 2.4vw, 34px) var(--gutter) clamp(14px, 1.5vw, 22px);
  display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  color: #ffffff; font-size: 13px; font-weight: 800; letter-spacing: .16em;
}
.strip__viewport { overflow: hidden; padding-bottom: clamp(24px, 2.8vw, 40px); }
.rail {
  display: flex; gap: var(--rail-gap); width: max-content;
  animation: rail 34s linear infinite;
  will-change: transform; backface-visibility: hidden;
}
.rail__card {
  flex: 0 0 var(--rail-card); width: var(--rail-card);
  height: 400px; background: #ffffff; border-radius: 22px; padding: 6px;
}

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

.proof__title {
  margin: 0 auto; text-align: center; max-width: 1240px;
  font-size: clamp(40px, 5.6vw, 88px); line-height: .94; letter-spacing: -.05em; font-weight: 900;
}
.proof__lede { margin-top: 22px; text-align: center; font-size: 22px; font-weight: 600; color: var(--text); }

.kicker { font-size: 13px; font-weight: 800; letter-spacing: .16em; }
.kicker--grey    { color: var(--muted); }
.kicker--blue    { font-size: 12px; letter-spacing: .2em; color: var(--blue-ink); }
.kicker--dim     { font-size: 12px; letter-spacing: .2em; color: var(--muted-2); }
.kicker--dimgrey { font-size: 12px; letter-spacing: .2em; color: var(--muted-2); }
.mech__card .kicker--blue { color: var(--blue); }
.compare__col--new .kicker--blue { color: var(--blue); }

.body { font-size: 19px; line-height: 1.55; color: var(--text); }
.body + .body { margin-top: 18px; }
.body--lg { font-size: 21px; }

/* Four children in one grid: head, image, socials, prose. Desktop pins each to a
   cell so the image sits beside the copy; mobile clears the placement and the DOM
   order (proof before prose) becomes the reading order. */
.proof__case {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  column-gap: 56px; row-gap: 0; margin-top: 72px; align-items: start;
}
.proof__caseHead      { grid-column: 1; grid-row: 1; }
.proof__case > .plate { grid-column: 2; grid-row: 1 / 3; }
.proof__caseBody      { grid-column: 1; grid-row: 2; margin-top: 20px; }
.proof__caseTitle {
  margin-top: 14px; font-size: clamp(28px, 3.2vw, 46px);
  line-height: 1.02; letter-spacing: -.04em; font-weight: 900;
}
.plate {
  border-radius: 24px; padding: 8px; background: var(--plate-a);
  box-shadow: 0 22px 54px rgba(40, 116, 198, .28);
}
.plate--alt  { background: var(--plate-b); }
.plate--wall { background: var(--plate-c); box-shadow: 0 26px 60px rgba(40, 116, 198, .26); }
.plate--sq   { aspect-ratio: 1 / 1; }
.plate--sq > .frame { height: 100%; }

.proof__socials {
  grid-column: 1 / -1; grid-row: 3;
  display: grid; grid-template-columns: minmax(0, .653fr) minmax(0, 1fr);
  gap: 28px; margin-top: 28px; align-items: start;
}

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 2px solid var(--ink); margin-top: 64px; }
.stats__item { padding: 36px 28px 34px; border-right: 1px solid var(--line); }
.stats__item:first-child { padding-left: 0; }
.stats__item:last-child  { padding-right: 0; border-right: 0; }
.stats__num { font-size: clamp(40px, 4.6vw, 68px); font-weight: 900; letter-spacing: -.05em; line-height: 1; }
.stats__num--blue { color: var(--blue-ink); }
.stats__label { margin-top: 14px; font-size: 16px; font-weight: 600; color: var(--text-2); }

.proof__insight {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: 56px; margin-top: 80px; align-items: center;
}
.statement { font-size: clamp(26px, 2.8vw, 40px); line-height: 1.28; font-weight: 700; letter-spacing: -.025em; }

.proof__wall { margin-top: 72px; padding-top: 44px; border-top: 2px solid var(--ink); }
.proof__wallHead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.proof__wallHead h3 { font-size: clamp(26px, 3vw, 44px); line-height: 1; letter-spacing: -.04em; font-weight: 900; }
.proof__wallHead p  { font-size: 15px; font-weight: 700; color: var(--text-2); }
.proof__wall .plate { margin-top: 28px; }

/* ------------------------------------------------------------- thesis -- */

.thesis { background: var(--ink); color: #ffffff; padding: clamp(72px, 9vw, 130px) 0; }
.thesis__title { font-size: clamp(40px, 6.4vw, 104px); line-height: .92; letter-spacing: -.055em; font-weight: 900; max-width: 1180px; }
.thesis__body  { margin-top: 44px; max-width: 820px; font-size: clamp(18px, 1.6vw, 24px); line-height: 1.5; color: var(--muted-3); }
.thesis__chain {
  display: flex; align-items: center; gap: 14px; margin-top: 56px; flex-wrap: wrap;
  font-size: 14px; font-weight: 800; letter-spacing: .1em; color: var(--muted-2);
}
.thesis__chain .sep { color: #4a4f58; }
.thesis__chain .on  { color: #ffffff; }

/* ---------------------------------------------------------- messenger -- */

.messenger { background: var(--grad-pink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
/* Give the portrait its own ratio. Left to stretch, its height came from
   whatever the copy column happened to be, so the box grew more landscape the
   wider the window and sliced further into a 3:4 photo. */
.messenger__media { position: relative; aspect-ratio: 4 / 5; }
.messenger__media .frame { position: absolute; inset: 0; background: transparent; }
.messenger__copy { padding: clamp(48px, 6.7vw, 96px) var(--gutter); text-align: right; }
.messenger__title {
  font-size: clamp(40px, 6vw, 104px); line-height: .9; letter-spacing: -.055em;
  font-weight: 900; color: #ffffff; text-shadow: 0 2px 24px rgba(190, 40, 110, .28);
}
.messenger__sub { margin: 28px 0 0 auto; max-width: 520px; font-size: 21px; line-height: 1.5; color: #5c1235; }

/* ------------------------------------------------------------- choose -- */

.h2    { font-size: clamp(40px, 5.6vw, 88px); line-height: .94; letter-spacing: -.05em; font-weight: 900; }
.h2--sm { font-size: clamp(34px, 4.4vw, 68px); line-height: .98; letter-spacing: -.045em; }
.h2--xl { font-size: clamp(40px, 6vw, 96px); line-height: .92; }
.lede  { margin-top: 22px; font-size: 22px; font-weight: 600; color: var(--text); }
.lede--sm { margin-top: 18px; font-size: 20px; }

.choose__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 56px; }
.pick { border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; }
.pick--light { background: #ffffff; box-shadow: inset 0 0 0 1.5px var(--line); }
.pick--dark  { background: var(--ink); color: #ffffff; }
/* .frame sets height:100%, which in this flex column resolves against the card
   and beats aspect-ratio — the two media panes then render at different heights.
   Let the ratio own the box.
   Square rather than the design's 5/4: both photos are portrait, and the wider
   box cropped them to 58% / 65% of the frame. */
.pick__media { aspect-ratio: 1 / 1; height: auto; flex: none; }
.pick__body  { padding: clamp(24px, 2.5vw, 36px); display: flex; flex-direction: column; flex: 1; }
.pick--dark .pick__body { padding: clamp(26px, 2.8vw, 40px) clamp(24px, 2.5vw, 36px); }
.pick__title { margin-top: 18px; font-size: clamp(32px, 3.4vw, 52px); line-height: .98; letter-spacing: -.04em; font-weight: 900; }
.pick__desc  { margin-top: 18px; font-size: 19px; line-height: 1.5; color: var(--text); }
.pick--dark .pick__desc { color: var(--muted-3); }
.pick .btn { margin-top: 28px; align-self: flex-start; }

.tags { display: flex; gap: 8px; margin-top: 26px; flex-wrap: wrap; }
.tags li { padding: 9px 14px; border-radius: 8px; background: var(--surface); font-size: 14px; font-weight: 700; white-space: nowrap; }
.tags--dark li { background: var(--ink-2); }

/* --------------------------------------------------------- mechanisms -- */

.mech__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.mech__gradient {
  border-radius: 26px; padding: 2.5px;
  background: linear-gradient(140deg, #f9d144, #f47133 24%, #e33062 50%, #c034a6 74%, #6b4ce0);
}
.mech__card { border-radius: 24px; padding: clamp(24px, 2.5vw, 36px); background: #ffffff; height: 100%; }
.mech__card--outline { box-shadow: inset 0 0 0 2.5px var(--blue); }
.mech__icons { display: flex; align-items: center; gap: 12px; }
.mech__icons img { width: 34px; height: 34px; object-fit: contain; }
.mech__card .kicker--blue,
.mech__card .kicker--dimgrey { margin-top: 26px; }
.mech__title { margin-top: 14px; font-size: clamp(26px, 2.8vw, 40px); line-height: 1; letter-spacing: -.04em; font-weight: 900; }
.mech__card .body { margin-top: 16px; }
.mech__card .tags { margin-top: 24px; }

/* -------------------------------------------------------- how it works -- */

.how { background: var(--surface); padding: clamp(56px, 7.6vw, 110px) 0; }
.how__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.how__tabs { display: flex; gap: 2px; }
.how__tab {
  padding: 16px 28px; border: 0; cursor: pointer; border-radius: 12px;
  font-family: inherit; font-size: 16px; font-weight: 800;
  background: #ffffff; color: var(--text-2);
  transition: background .18s ease, color .18s ease;
}
.how__tab.is-on { background: var(--blue); color: #ffffff; }

.steps { margin-top: 52px; border-top: 2px solid var(--ink); }
.step {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 32px; padding: 34px 0; border-bottom: 1px solid var(--line-2); align-items: baseline;
}
.step:last-child { border-bottom: 0; }
.step__n { font-size: 38px; font-weight: 900; letter-spacing: -.04em; color: var(--blue-ink); }
.step__t { font-size: clamp(24px, 2.4vw, 34px); letter-spacing: -.03em; font-weight: 900; line-height: 1.05; }
.step__d { font-size: 18px; line-height: 1.55; color: var(--text); }

/* ----------------------------------------------------------- startups -- */

.startups__intro { max-width: 1080px; }
.startups__intro .body { margin-top: 26px; max-width: 720px; }

.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 64px; }
.compare__col { border-radius: 24px; padding: clamp(24px, 2.5vw, 36px); }
.compare__col--old { background: var(--surface); }
.compare__col--new { background: #ffffff; box-shadow: inset 0 0 0 2.5px var(--blue); }
.compare__list { margin-top: 24px; }
.compare__list li { padding: 16px 0; border-top: 1px solid var(--line-2); font-size: 18px; }
.compare__col--old .compare__list li { font-weight: 600; color: var(--muted); }
.compare__col--new .compare__list li { font-weight: 700; }

/* ----------------------------------------------------------- creators -- */

.creators { background: var(--ink); color: #ffffff; padding: clamp(64px, 8.3vw, 120px) 0 0; }
.creators__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 64px; align-items: end; }
.creators__title { font-size: clamp(42px, 6.4vw, 110px); line-height: .88; letter-spacing: -.055em; font-weight: 900; }
.creators__body  { font-size: 20px; line-height: 1.55; color: var(--muted-3); }
.creators__head .btn { margin-top: 34px; }
.creators__words {
  display: flex; gap: 34px; flex-wrap: wrap; margin-top: 56px; padding-top: 30px;
  border-top: 2px solid var(--ink-line);
  font-size: 17px; font-weight: 800; letter-spacing: .02em; color: var(--muted-3);
}
.creators__words .on      { color: #ffffff; }
.creators__words .spacer  { flex: 1; }
.creators__words .powered { font-size: 12px; letter-spacing: .2em; color: #e3d7b4; }

.creators__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: 90px; }
.creators__cell { aspect-ratio: 1 / 1; min-width: 0; background: var(--ink-2); }

/* ------------------------------------------------------------- quotes -- */

.quotes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; background: var(--line); }
.quote { background: #ffffff; }
.quote:first-child { padding: 0 40px 0 0; }
.quote:last-child  { padding: 0 0 0 40px; }
.quote blockquote { font-size: clamp(24px, 2.6vw, 38px); line-height: 1.25; font-weight: 800; letter-spacing: -.03em; }
.quote figcaption { margin-top: 26px; font-size: 14px; font-weight: 800; letter-spacing: .14em; color: var(--muted-3); }

/* ---------------------------------------------------------------- faq -- */

/* full-width container, matching .section — the design capped this at 1080px */
.faq { max-width: var(--maxw); margin: 0 auto; padding: 20px var(--gutter) clamp(56px, 7.6vw, 110px); }
.faq__list { margin-top: 44px; border-top: 2px solid var(--ink); }
.faq__item { padding: 26px 0; border-bottom: 1px solid var(--line-2); }
.faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  font-size: clamp(20px, 2vw, 26px); font-weight: 800; letter-spacing: -.02em;
  list-style: none; cursor: pointer;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item p { margin-top: 16px; max-width: 760px; font-size: 18px; line-height: 1.6; color: var(--text); }
.faq__plus { font-size: 26px; color: var(--blue-ink); transition: transform .2s ease; }
.faq__item[open] .faq__plus { transform: rotate(45deg); }

.faq__item--hero { padding: 34px 0 0; border-bottom: 0; }
.faq__item--hero summary { font-size: clamp(28px, 3.4vw, 52px); font-weight: 900; letter-spacing: -.04em; }
.faq__item--hero .faq__plus { font-size: 34px; color: var(--pink); }
.faq__item .faq__answer {
  margin-top: 20px; font-size: clamp(26px, 3vw, 44px); line-height: 1.1;
  letter-spacing: -.04em; font-weight: 900; color: var(--pink);
}
.faq__item .faq__note { margin-top: 20px; max-width: 760px; font-size: 19px; line-height: 1.6; color: var(--text); }

/* ------------------------------------------------------------ CTA/foot -- */

.final { background: var(--ink); color: #ffffff; padding: clamp(72px, 9vw, 130px) 0; }
.final__title { font-size: clamp(44px, 7.4vw, 128px); line-height: .86; letter-spacing: -.06em; font-weight: 900; max-width: 1180px; }
.final__sub   { margin-top: 26px; font-size: clamp(30px, 3.6vw, 58px); line-height: 1; letter-spacing: -.045em; font-weight: 900; color: var(--muted-2); }
.final__actions { display: flex; align-items: center; gap: 18px; margin-top: 56px; flex-wrap: wrap; }
.final .btn--lg { padding: 24px 38px; border-radius: 14px; font-size: 20px; }

.footer { background: var(--ink); color: var(--muted-2); border-top: 1px solid var(--ink-line); padding: clamp(28px, 3vw, 40px) 0; }
.footer__inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; font-size: 14px; }
.footer__brand { font-size: 16px; font-weight: 900; color: #ffffff; letter-spacing: -.04em; }
.footer a { color: var(--muted-2); }
.footer a:hover { color: var(--pink); }

/* =========================================================== responsive == */
/* Spacing and most type are fluid (clamp) above, so these tiers only need to
   handle the points where a *layout* genuinely stops working. Each collapse sits
   at the width the probe showed it breaking at, not at one shared guess. */

/* --- 900px: the nav links no longer fit, and 4 stat columns get too narrow --- */
@media (max-width: 900px) {
  /* Opaque, unblurred nav on touch-sized screens. The 72%-white fill tints with
     whatever scrolls under it, so it no longer matches the pure-white status bar
     above (a visible seam), and re-sampling the blur every frame lags the scroll
     on phone GPUs, which reads as the bar drifting. */
  .nav { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* The CTA's 0/10/26 shadow is offset further down than the bar has padding, so
     it saturates the 14px below the button while the 14px above stays white. The
     gaps are equal but read unequal, and the button looks pushed to the top edge.
     Keep a lift, lose the spill. */
  .nav__cta { box-shadow: 0 3px 10px rgba(40, 116, 198, .24); }

  /* With the links gone the brand must keep its natural width — leaving it in a
     1fr track squeezes the wordmark and it spills past its own box. */
  .nav__links { display: none; }
  .nav__inner { grid-template-columns: auto 1fr; }

  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats__item { padding: 28px 20px 28px 0; border-right: 0; }
  .stats__item:nth-child(odd)  { border-right: 1px solid var(--line); }
  .stats__item:nth-child(even) { padding-left: 24px; padding-right: 0; }
  .stats__item:nth-child(n+3)  { border-top: 1px solid var(--line); }

  /* text-beside-image pairs: the text column is the half that suffers first */
  .proof__case,
  .proof__insight,
  .creators__head { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .proof__insight { align-items: start; }

  /* proof imagery leads, the explanation follows — DOM order takes over */
  .proof__caseHead, .proof__case > .plate,
  .proof__socials, .proof__caseBody { grid-column: 1; grid-row: auto; }
  .proof__caseBody, .proof__socials { margin-top: 0; }
}

/* --- 720px: the remaining side-by-side pairs run out of room --- */
@media (max-width: 720px) {
  .proof__socials,
  .choose__grid,
  .mech__grid,
  .compare,
  .messenger { grid-template-columns: minmax(0, 1fr); }

  .quotes__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; background: transparent; }
  .quote:first-child, .quote:last-child { padding: 0; }
  .quote:last-child { padding-top: 32px; border-top: 1px solid var(--line); }

  .step { grid-template-columns: 64px minmax(0, 1fr); gap: 10px 22px; }
  .step__d { grid-column: 2; }

  .how__head { align-items: stretch; }
  .how__tabs { width: 100%; }
  .how__tab { flex: 1; padding: 14px 18px; }

  :root { --rail-card: 200px; --rail-gap: 12px; --rail-shift: 1272px; } /* 6 × (200 + 12) */
  .rail__card { height: 308px; border-radius: 18px; }

  .hero__sub br { display: none; }
  .creators__words { gap: 18px; }
  .creators__words .spacer { flex: 1 0 100%; }
  .footer__inner { gap: 14px; }
}

/* --- 640px: phone. Four creator tiles become two; body type steps down --- */
@media (max-width: 640px) {
  .creators__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 56px; }

  /* the full-size CTA and the wordmark stop fitting side by side here */
  .nav__cta { padding: 13px 18px; font-size: 14px; gap: 8px; }

  .lede, .proof__lede            { font-size: 19px; }
  .body, .pick__desc             { font-size: 17px; }
  .hero__sub, .messenger__sub,
  .creators__body                { font-size: 18px; }
  .statement                     { font-size: 22px; }
  .step__d, .compare__list li,
  .faq__item p                   { font-size: 16px; }
  .stats__label                  { font-size: 14px; }
  .mech__icons img               { width: 30px; height: 30px; }
}

/* --- 420px: small phones. The display type is what overflows here --- */
@media (max-width: 420px) {
  .hero__title { font-size: clamp(40px, 13.4vw, 56px); }
  .stats__num  { font-size: clamp(28px, 8.6vw, 40px); }

  .nav__brand img  { width: 34px; height: 34px; }
  .nav__brand span { font-size: 16px; }

  .strip__bar    { font-size: 12px; letter-spacing: .12em; }

  .btn     { padding: 17px 22px; font-size: 16px; }
  .btn--lg { padding: 18px 24px; font-size: 17px; }
  .final .btn--lg { padding: 18px 24px; font-size: 17px; }

  /* after .btn — same specificity, so source order decides */
  .nav__cta { padding: 12px 16px; font-size: 13px; gap: 8px; }

  .tags li { padding: 8px 11px; font-size: 13px; }
}

/* --- 360px: brand mark + CTA is all that fits across the top --- */
@media (max-width: 360px) {
  .nav__brand span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rail { animation: none; }
  .btn--gold:hover { animation: none; }
  * { transition-duration: .01ms !important; }
}