/* Fiaba — the landing page.
 *
 * Direction (tasteskill v2, type-only-statement, seed 383748844):
 * type and nothing else. Cabinet Grotesk in oxblood on grey; FIABA across the
 * middle of the first screen with everything else in the corners; pictures
 * arrive later, large and few; one long section and the footer invert to pale
 * grey on solid red.
 *
 * One face, five type steps (13 / 17 / 26 / the head step / the fitted display
 * sizes), square corners everywhere, one pair of margins, no gradients, no
 * shadows, no hairlines.
 */

/* --- the face, self-hosted so the fit is exact and the page needs no network */

@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('./fonts/cabinet-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('./fonts/cabinet-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('./fonts/cabinet-800.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* --- tokens ---------------------------------------------------------------- */

:root {
  /* oxblood and grey */
  --paper: #e2e2e2;
  --surface: #d6d6d6;
  --ink: #7d0c14;
  --muted: #7a4a4e;
  --accent: #7d0c14;
  --accent-ink: #e2e2e2;
  --field: #7d0c14;
  --field-ink: #e2e2e2;

  --face: 'Cabinet Grotesk', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* five steps, and the fitted display sizes come from their own blueprints */
  --step-small: 13px;
  --step-body: 17px;
  --step-lead: 26px;
  --step-head: clamp(2.5rem, 1.2rem + 5vw, 5.5rem);

  --gutter: 32px;
  --colgap: 24px;
  --gap-section: clamp(104px, 13vh, 184px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --stagger: 80ms;
}

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

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

html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: auto; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--face);
  font-weight: 400;
  font-size: var(--step-body);
  line-height: 1.5;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, figure, blockquote, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, video { display: block; max-width: 100%; }

::selection { background: var(--ink); color: var(--paper); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
.on-red :focus-visible { outline-color: var(--paper); }

/* --- type ----------------------------------------------------------------- */

.display {
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.9;
  text-wrap: balance;
}

.h2 {
  font-size: var(--step-head);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-wrap: balance;
}

.heading-small {
  font-size: var(--step-lead);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.lead {
  font-size: var(--step-lead);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  text-wrap: pretty;
}

p { text-wrap: pretty; }

.note {
  font-size: var(--step-small);
  line-height: 1.45;
  color: var(--muted);
}
.on-red .note { color: var(--accent-ink); opacity: 0.86; }

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

.wrap { padding-inline: var(--gutter); }
.g12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--colgap);
  align-items: start;
}

.section { padding-block: var(--gap-section) 0; }
.section:last-of-type { padding-bottom: var(--gap-section); }

/* one pair of margins, and the page's own step for a new chapter */
.red { background: var(--field); color: var(--field-ink); }

/* --- links and the one button -------------------------------------------- */

.link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 34%, transparent);
  transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
.link:hover { text-decoration-color: currentColor; }
.link:active { text-decoration-color: currentColor; }

.btn {
  display: inline-block;
  padding: 0.72em 1.15em 0.78em;
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--step-body);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.005em;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease,
    color var(--t-hover) ease;
}
.btn:hover { background: color-mix(in srgb, var(--accent) 88%, var(--accent-ink)); }
.btn:active { transform: scale(0.97); }

.on-red .btn { background: var(--paper); color: var(--ink); }
.on-red .btn:hover { background: color-mix(in srgb, var(--paper) 88%, var(--ink)); }

/* a text button, for the small controls */
.tbtn {
  padding: 0.55em 0.8em 0.6em;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--step-small);
  font-weight: 500;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.tbtn:hover { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.tbtn:active { transform: scale(0.97); }
.tbtn[aria-pressed='true'] { background: var(--ink); color: var(--paper); }

/* --- motion primitives ---------------------------------------------------- */

.lines .line {
  display: block;
  overflow: hidden;
  padding: 0.09em 0 0.12em;
  margin: -0.09em 0 -0.12em;
}
.lines .line > span { display: block; }

@media (prefers-reduced-motion: no-preference) {
  /* the signature move: each line rises from behind its own baseline */
  .js .lines [data-line] {
    transform: translateY(105%);
    animation: line-up 900ms var(--ease-expo) forwards;
    animation-delay: calc(var(--i, 0) * 110ms + 140ms);
  }
  .js [data-load] {
    opacity: 0;
    transform: translateY(14px);
    animation: rise 560ms var(--ease-out) forwards;
    animation-delay: var(--d, 420ms);
  }
  /* an entrance for the parts of every section, once, on the way in */
  .js [data-rise] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 640ms var(--ease-out), transform 840ms var(--ease-out);
    transition-delay: var(--d, 0ms);
  }
  .js [data-rise].is-in { opacity: 1; transform: none; }
  .js .drift img,
  .js .drift video { animation: drift 26s var(--ease-soft) infinite alternate; }
  .js .drift.is-in img,
  .js .drift.is-in video { animation-play-state: running; }
  .js .band { transition: opacity 900ms var(--ease-out); }
}

@keyframes line-up { to { transform: none; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1.035) translate3d(0, 0, 0); } to { transform: scale(1.075) translate3d(0, -1.4%, 0); } }

/* --- the hero: the name across the middle --------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  padding: 28px var(--gutter) 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: var(--colgap);
  row-gap: 22px;
}

.hero__corner { font-size: var(--step-small); line-height: 1.5; }

.hero__lead { grid-area: 1 / 1 / 2 / 2; }
.hero__navwrap { grid-area: 1 / 2 / 2 / 3; justify-self: end; }
.hero__mid { grid-area: 2 / 1 / 3 / 3; }
.hero__foot {
  grid-area: 3 / 1 / 4 / 3;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
}

.hero__say {
  max-width: 36ch;
  font-size: var(--step-lead);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.24;
}

.hero__act { margin-top: 16px; }
/* The trial terms, under the one action: the price block says what the plan
   costs, this says what trying it costs (nothing, no card). Same .note type as
   the rest of the utility text; only the spacing is set here. */
.hero__trial { margin-top: 10px; max-width: 34ch; }

.hero__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 1.15em;
  font-size: var(--step-small);
  justify-content: flex-end;
}

.hero__mid { display: flex; align-items: center; }

.hero__fit { width: 100%; container-type: inline-size; }

.hero__name {
  display: block;
  font-size: calc(100cqw / var(--r-fiaba, 3.16));
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.86;
  white-space: nowrap;
  text-transform: uppercase;
}

.hero__links { display: flex; gap: 1.15em; }

.hero__cornerblock { display: flex; flex-direction: column; gap: 10px; }

/* Three words in the bottom corner, at the size of the small print they sit
   with: the language the page is in is the only one underlined. */
.hero__lang { display: flex; align-items: baseline; gap: 1.15em; font-size: var(--step-small); }
.langbtn {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  font: inherit;
  font-size: var(--step-small);
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.22em;
  text-decoration-color: transparent;
  transition: color var(--t-hover) ease, text-decoration-color var(--t-hover) ease;
}
.langbtn:hover { color: var(--ink); text-decoration-color: color-mix(in srgb, currentColor 34%, transparent); }
.langbtn[aria-pressed='true'] { color: var(--ink); text-decoration-color: currentColor; }

/* --- how it works: lines that step across --------------------------------- */

/* Four stages, each one indented further than the last, so the block descends
   as a staircase. The indent is a share of the column, not a grid line, so each
   stage keeps the room its line needs at every width. */
.how__stage { grid-column: 1 / -1; margin-bottom: 56px; }
.how__stage:last-child { margin-bottom: 0; }
.how__stage:nth-child(2) { margin-left: 12%; }
.how__stage:nth-child(3) { margin-left: 24%; }
.how__stage:nth-child(4) { margin-left: 36%; }
.how__line {
  font-size: var(--step-head);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}
.how__say {
  margin-top: 12px;
  max-width: 34ch;
  font-size: var(--step-body);
}

/* --- picture bands -------------------------------------------------------- */

.band { position: relative; }
.band__frame { background: var(--ink); overflow: hidden; }
.band__frame img,
.band__frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: luminosity;
  opacity: 0.92;
}
.band__cap {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  margin-top: 14px;
}
/* No credit sits with a picture any more: every photographer and source is in
   the one credits block at the foot of the page (see .credits). */
.band__say { font-size: var(--step-lead); font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; max-width: 30ch; }

.band--wide .band__frame { height: 78svh; min-height: 420px; }
.band--pair { padding-inline: var(--gutter); }
.band--pair .band__a { grid-column: 1 / 8; }
.band--pair .band__b { grid-column: 9 / 13; margin-top: 16vh; }
.band--pair .band__frame { height: 46svh; min-height: 260px; }
.band--clip { padding-inline: var(--gutter); }
.band--clip .band__text { grid-column: 1 / 6; }
.band--clip .band__media { grid-column: 7 / 13; }
.band--clip .band__frame { height: auto; aspect-ratio: 4 / 3; }

/* --- showcase: two giant words compared, and the live thing --------------- */

.show { padding-inline: var(--gutter); }
.show__head { grid-column: 1 / 6; }
.show__intro {
  grid-column: 7 / 13;
  font-size: var(--step-body);
  max-width: 52ch;
}
.show__listen { grid-column: 1 / 7; margin-top: 36px; }

/* The specimen column and the intro paragraph share column 7/13, the intro in
   grid row 1 and the specimen in row 2, so without this the giant word starts on
   the very line the paragraph's last line ends on, so the paragraph reads as
   clipped against the word under it. The gap is the section's own rhythm, not a
   nudge for one breakpoint. */
.show__specs { grid-column: 7 / 13; margin-top: clamp(48px, 6vw, 112px); }
.show__col {
  container-type: inline-size;
  /* The fitted display size: the word fills a SHARE of the panel, not all of it,
     so a fitted line never runs into the panel's edge. --r-spec is measured from
     the words actually on the page, in the language the page is in. */
  --spec: calc(100cqw / (var(--r-spec, 5.3) * 1.06));
}
.show__box { display: block; }
/* The caption keeps a constant step from its own word, and the next specimen
   starts a share of a display line below the caption. Whitespace is what says
   which word a caption belongs to; it does not have to grow with the type. It
   was the negative bottom margin on the word (a crop .3em deep, 40px at 1440),
   not the caption's own step. */
.show__cap { font-size: var(--step-body); margin-top: 16px; }
.show__cap + .show__box { margin-top: calc(var(--spec) * 0.26 + 28px); }
.show__crop { overflow: hidden; }
.show__word {
  display: block;
  font-size: var(--spec);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.94;
  white-space: nowrap;
}
.show__word--wrong { text-decoration: none; }
.show__word--wrong > span { text-decoration: line-through; text-decoration-thickness: 0.055em; }

/* the live thing */
.listen { background: var(--surface); padding: 18px 18px 16px; }
.listen__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.listen__play { background: var(--ink); color: var(--paper); font-size: var(--step-body); }
.listen__play:hover { background: color-mix(in srgb, var(--ink) 86%, var(--paper)); }
.listen__who { font-size: var(--step-small); margin-left: auto; color: var(--muted); }
.listen__lines { margin-top: 14px; }
.listen__line { padding: 10px 12px; margin-bottom: 6px; }
.listen__line[data-active='true'] { background: var(--ink); color: var(--paper); }
.listen__who2 { display: block; font-size: var(--step-small); font-weight: 500; color: var(--muted); }
.listen__line[data-active='true'] .listen__who2 { color: var(--paper); }
.listen__txt { display: block; font-size: var(--step-body); }
.listen__note { margin-top: 12px; font-size: var(--step-small); color: var(--muted); max-width: 46ch; }

/* --- what it does: the command list --------------------------------------- */

.does { padding-inline: var(--gutter); }
.does__head { grid-column: 1 / 7; }
.does__panel { grid-column: 1 / 13; margin-top: 40px; }
.does__find {
  width: 100%;
  padding: 0.42em 0.5em 0.5em;
  background: color-mix(in srgb, var(--paper) 14%, var(--field));
  color: var(--paper);
  font-family: inherit;
  font-size: clamp(20px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  border: 0;
  border-radius: 0;
  appearance: none;
}
.does__find::placeholder { color: color-mix(in srgb, var(--paper) 62%, var(--field)); }
.does__find:focus-visible { outline: 3px solid var(--paper); outline-offset: 3px; }
.does__list { margin-top: 22px; }
.does__item { transition: background-color var(--t-hover) ease, color var(--t-hover) ease; }
.does__item[data-selected='true'] { background: var(--paper); color: var(--ink); }
.does__item[hidden] { display: none; }
.does__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  padding: 8px 14px 10px;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-size: var(--step-head);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  text-align: left;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background-color var(--t-hover) ease, color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.does__row:active { transform: scale(0.995); }
.does__key {
  flex: none;
  font-size: 0.3em;
  width: 1.15em;
  height: 1.15em;
  line-height: 1.15em;
  text-align: center;
  background: var(--paper);
  color: var(--ink);
}
.does__item[data-selected='true'] .does__key { background: var(--ink); color: var(--paper); }
.does__say {
  padding: 0 14px 18px;
  font-size: var(--step-body);
  max-width: 62ch;
}
.does__item[data-selected='false'] .does__say { display: none; }
.does__empty { margin-top: 14px; font-size: var(--step-body); }

/* --- the price, very large ------------------------------------------------ */

.price { padding-inline: var(--gutter); padding-block-start: calc(var(--gap-section) + 64px); }
.price__side { grid-column: 1 / 5; }
.price__side p { margin-top: 18px; font-size: var(--step-body); max-width: 40ch; }
.price__body { grid-column: 6 / 13; position: relative; }
.price__figure {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.06em;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
  font-size: clamp(72px, 15vw, 230px);
}
.price__cur {
  font-size: 0.42em;
  line-height: 1;
  padding-bottom: 0.62em;
  letter-spacing: -0.02em;
}
.price__per {
  font-size: var(--step-body);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
  padding-bottom: 0.28em;
}
.price__per .note { display: block; margin-top: 2px; }
.price__alt {
  display: block;
  margin-top: 16px;
  font-size: var(--step-body);
  max-width: 34ch;
}
.price__map {
  position: absolute;
  bottom: 84%;
  left: 46%;
  width: clamp(120px, 13vw, 190px);
  z-index: 1;
}
.price__map .band__frame { height: auto; }
.price__map img { width: 100%; height: auto; }
.price__incl { margin-top: 40px; max-width: 44ch; }
.price__incl li { font-size: var(--step-body); margin-bottom: 6px; }
.price__act { margin-top: 26px; }

/* --- questions ------------------------------------------------------------ */

.ask { padding-inline: var(--gutter); }
.ask__row { grid-column: 1 / -1; }
.ask__row + .ask__row { margin-top: 76px; }
.ask__q {
  grid-column: 1 / 7;
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}
.ask__a { grid-column: 8 / 13; margin-top: 12px; font-size: var(--step-body); max-width: 46ch; }
.ask__head { color: var(--muted); }

/* --- the closing sentence ------------------------------------------------- */

.cta { padding-inline: var(--gutter); }
.cta .heading-small { grid-column: 1 / 12; }
.cta__line {
  grid-column: 1 / 12;
  margin-top: 18px;
  font-size: clamp(24px, 3.4vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: pretty;
}
.cta__blank {
  display: inline-block;
  vertical-align: baseline;
  width: 7em;
  max-width: 100%;
}
.cta__input {
  width: 100%;
  padding: 0.1em 0.24em;
  background: var(--surface);
  color: var(--ink);
  font-family: inherit;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0;
  border: 0;
  border-radius: 0;
  appearance: none;
}
.cta__input::placeholder { color: var(--muted); }
.cta__input:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.cta__go {
  font-size: 1em;
  font-weight: 800;
  letter-spacing: -0.03em;
  padding: 0.1em 0.5em;
  line-height: 1.1;
  vertical-align: baseline;
}
.cta__note { grid-column: 1 / 8; margin-top: 22px; font-size: var(--step-body); max-width: 50ch; }

/* --- the footer: the name first, cropped, places under it ----------------- */

.foot {
  margin-top: var(--gap-section);
  padding: 0 var(--gutter) 0;
  background: var(--field);
  color: var(--field-ink);
}
.foot__fit { width: 100%; container-type: inline-size; }
.foot__name {
  display: block;
  font-size: calc(100cqw / var(--r-fiaba, 3.16));
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
  text-transform: uppercase;
  overflow: hidden;
  margin-bottom: -0.34em; /* the letters are cut by the page's bottom edge */
}
.foot__row { padding-block: 72px 0; }
.foot__places { grid-column: 1 / 6; }
.foot__places li { margin-bottom: 10px; }
.foot__place { font-size: clamp(24px, 3vw, 36px); font-weight: 500; letter-spacing: -0.02em; line-height: 1.2; }
.foot__cols { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }

/* --- the credits: one block, at the foot of the page ---------------------- */

.foot__credits { padding-top: 56px; }
.credits__side { grid-column: 1 / 4; }
.credits__side h3 { font-size: var(--step-small); font-weight: 500; color: var(--accent-ink); margin: 0 0 8px; }
.credits__lead { font-size: var(--step-small); color: var(--accent-ink); opacity: 0.78; max-width: 30ch; }
.credits__list { grid-column: 6 / 13; font-size: var(--step-small); color: var(--accent-ink); opacity: 0.78; }
.credits__list li { margin-bottom: 5px; }
.credits__list .link { text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.foot__cols h3 { font-size: var(--step-small); font-weight: 500; color: var(--accent-ink); margin-bottom: 8px; }
.foot__cols li { font-size: var(--step-small); margin-bottom: 5px; }
.foot__legal {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: 0;
  padding-block: 40px 26px;
  font-size: var(--step-small);
}
.foot__legal p { max-width: 60ch; }

/* --- a phone is its own composition -------------------------------------- */

@media (max-width: 900px) {
  :root { --gutter: 20px; --colgap: 16px; }
}

@media (max-width: 700px) {
  .g12 { grid-template-columns: minmax(0, 1fr); }
  .g12 > * { grid-column: 1 / -1 !important; }

  /* a phone is its own composition: the name near the top, the sentence and
     the action under it, the small links closing the bottom. */
  .hero { display: flex; flex-direction: column; padding-top: 22svh; }
  .hero__mid { order: 1; align-items: flex-start; }
  .hero__lead { order: 2; margin-top: 26px; }
  .hero__say { max-width: 34ch; font-size: 24px; }
  .hero__act .btn { display: block; text-align: center; }
  .hero__navwrap { order: 3; margin-top: auto; justify-self: stretch; }
  .hero__nav { justify-content: flex-start; }
  .hero__foot { order: 4; flex-direction: column; align-items: flex-start; gap: 10px; }

  .how__stage { margin-bottom: 40px; }
  .how__line { font-size: 8.4vw; max-width: 100%; }
  .how__stage:nth-child(2) { margin-left: 6vw; }
  .how__stage:nth-child(3) { margin-left: 12vw; }
  .how__stage:nth-child(4) { margin-left: 18vw; }
  .how__say { max-width: 32ch; }

  .band--wide .band__frame { height: 56svh; }
  .band--pair .band__b { margin-top: 34px; }
  .band--pair .band__frame { height: auto; aspect-ratio: 4 / 3; }
  .band__say, .band--clip .lead { font-size: var(--step-body); }
  .band__cap { flex-direction: column; gap: 6px; }

  .show__specs { margin-top: 48px;
    /* one specimen pair, stacked: the caption step and the pair gap above are
       already in display-relative units and stay right on a phone. */ }

  .does__key { display: none; }
  .does__row { padding: 6px 10px 8px; }
  .does__say { padding: 0 10px 14px; }

  .price__figure { font-size: clamp(64px, 19vw, 130px); }
  .price { padding-block-start: var(--gap-section); }
  .price__map { position: static; order: -1; flex: 0 0 100%; display: flex; justify-content: flex-end; width: auto; margin: 0 0 18px; }
  .price__map .band__frame { width: 44vw; }
  .price__alt { margin-top: 26px; }

  .ask__row + .ask__row { margin-top: 52px; }

  .cta__line { margin-top: 14px; }
  .cta__blank { display: block; width: 100%; margin: 8px 0; }

  .foot__row { padding-block: 44px 0; }
  .foot__cols { grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 28px; }
  .foot__credits { padding-top: 40px; }
  .credits__side { margin-bottom: 18px; }
  .foot__legal { flex-direction: column; gap: 10px; }
}

/* --- reduced motion: the finished page, no travel ------------------------- */

@media (prefers-reduced-motion: reduce) {
  .js .lines [data-line],
  .js [data-load],
  .js [data-rise] { opacity: 1; transform: none; animation: none; transition: none; }
  .js .drift img,
  .js .drift video { animation: none; transform: none; }
  .btn, .link, .tbtn, .does__row { transition: color var(--t-hover) ease, background-color var(--t-hover) ease; }
}