/* fitourish.com (docs/design.md "Website fitourish.com"). Composition: The split stage, tasteskill seed 945651048.
   Colour, type and logo: the Fitourish brand "Apple Runner": appelrood #DC2626 (actions), bladgroen #16A34A, inkt #1C1917,
   warm wit #FFF8F3; Figtree (ExtraBold for the wordmark and headings, Medium and SemiBold for text). Self-hosted.
   The phone is a fragment of the real app ([data-ui]): its own face (Manrope) and the gym's colour (--gym). */
@font-face { font-family: Figtree; src: url(assets/figtree-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Figtree; src: url(assets/figtree-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: Figtree; src: url(assets/figtree-800.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: Figtree; src: url(assets/figtree-500-italic.woff2) format("woff2"); font-weight: 500; font-style: italic; font-display: swap; }
@font-face { font-family: Manrope; src: url(assets/manrope.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  --paper: #fff8f3; --bg: #f3e9e0; --surface: #eadcd0; --ink: #1c1917; --muted: #57534e;
  --red: #dc2626; --red-dark: #b91c1c; --green: #16a34a; --on-red: #ffffff;
  --gym: #0f766e;
  /* Five sizes: small, body, lead, head, display. */
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --step-display: clamp(3rem, 1rem + 5.6vw, 6.5rem);
  --radius: 20px; --m: 12px; --gap: clamp(72px, 8vw, 112px); /* per side: two sections together leave 144-224px */
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bg); color: var(--ink); font: 500 var(--step-body)/1.5 Figtree, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 4px; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: var(--step-head); }
h3 { font-size: var(--step-lead); letter-spacing: -0.02em; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--red); color: var(--on-red); }
.skip { position: absolute; left: -999px; } .skip:focus { left: 16px; top: 16px; z-index: 9; background: var(--paper); padding: 8px 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 28px; background: var(--red); color: var(--on-red);
  font-weight: 700; text-decoration: none; transition: transform .2s cubic-bezier(.2, .8, .2, 1), background-color .2s; }
.button:hover { background: var(--red-dark); } .button:active { transform: scale(.97); }
.button.light { background: var(--paper); color: var(--ink); } .button.light:hover { background: #fff; }

/* ---- The split: the stage on the right never moves; the reading column scrolls past it ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--m); padding: var(--m); }
.stage { grid-column: 2; grid-row: 1; position: sticky; top: var(--m); height: calc(100svh - 2 * var(--m)); border-radius: var(--radius); overflow: hidden; background: var(--ink); }
.stage-photos { position: absolute; inset: 0; overflow: hidden; }
.stage-photos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.6s ease; }
.stage-photos img.on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .stage-photos img.on { animation: drift 24s ease-in-out infinite alternate; } }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.1) translate(-1.5%, -1%); } }
.stage-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 24px; background: var(--paper); font-size: var(--step-small); }
.stage-bar > span:first-child { font-weight: 700; }
.stage .phone { position: absolute; left: 50%; top: calc(50% - 28px); transform: translate(-50%, -50%); }
.read { grid-column: 1; grid-row: 1; min-width: 0; }

/* The hero sheet: a card in warm white, everything centred. */
.sheet { background: var(--paper); border-radius: var(--radius); }
.hero { min-height: calc(100svh - 2 * var(--m)); display: flex; flex-direction: column; padding: 28px clamp(24px, 4vw, 56px); text-align: center; }
.nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; font-weight: 600; }
.nav a { text-decoration: none; padding: 8px 0; } .nav a:hover { text-decoration: underline; }
.nav a:first-child { justify-self: start; } .nav a:last-child { justify-self: end; }
.wordmark { display: inline-flex; align-items: center; gap: 6px; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.035em; }
.nav .wordmark:hover { text-decoration: none; }
.wordmark img { width: 1.35em; height: 1.35em; margin-top: -0.25em; }
.hero-body { margin-top: 20svh; display: grid; justify-items: center; gap: 28px; padding-bottom: 18svh; }
.hero h1 { font-size: var(--step-head); max-width: 18ch; text-wrap: balance; }
.hero .lead { max-width: 40ch; color: var(--muted); }

/* The reading column's sections: generous space, a narrow measure. */
.intro, .showcase { padding: var(--gap) clamp(24px, 5vw, 72px) 0; }
.intro > *, .showcase > * { max-width: 46ch; }
.intro h2, .showcase h2 { font-size: var(--step-lead); letter-spacing: -0.02em; margin-bottom: 24px; }
.intro p { margin-top: 18px; color: var(--muted); }
.intro p.first { font-weight: 600; color: var(--ink); margin-top: 0; }

/* The live thing: a name and a colour, and the stage repaints. */
.try { margin-top: 56px; padding: 28px; background: var(--paper); border-radius: var(--radius); display: grid; gap: 12px; }
.try h3 { margin-bottom: 4px; }
.try label[for] { font-size: var(--step-small); font-weight: 700; }
.try input[type="text"] { font: inherit; padding: 12px 14px; border: 2px solid var(--muted); border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
.try input[type="text"]:focus { border-color: var(--ink); outline: 0; }
.try fieldset { border: 0; padding: 0; } .try legend { font-size: var(--step-small); font-weight: 700; margin-bottom: 8px; }
.swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.swatches label { cursor: pointer; }
.swatches input { position: absolute; opacity: 0; }
.swatches span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px; border-radius: 99px; background: var(--bg); font-size: var(--step-small); font-weight: 600; transition: transform .15s; }
.swatches span::before { content: ""; width: 26px; height: 26px; border-radius: 99px; background: var(--c); }
.swatches label:hover span { transform: translateY(-2px); }
.swatches input:checked + span { background: var(--ink); color: var(--paper); }
.swatches input:focus-visible + span { outline: 3px solid var(--ink); outline-offset: 2px; }
.try .note { font-size: var(--step-small); color: var(--muted); }

/* Showcase: the names of the screens, large; the selected one in full ink. The stage shows it. */
.showcase { padding-bottom: var(--gap); }
.screens { display: grid; justify-items: start; }
.screens button { font: 800 var(--step-head)/1.1 Figtree, system-ui, sans-serif; letter-spacing: -0.035em; color: var(--muted); opacity: .5; background: none; border: 0; padding: 2px 0; cursor: pointer;
  transition: opacity .2s, transform .2s cubic-bezier(.2, .8, .2, 1); }
.screens button:hover { opacity: .8; transform: translateX(6px); }
.screens button[aria-selected="true"] { color: var(--ink); opacity: 1; }
.screen-note { margin-top: 28px; max-width: 40ch; min-height: 4.5em; }
.phone-inline { display: none; }

/* ---- Features: the split breaks; one red field, the heading pinned, the capabilities passing ---- */
.features { background: var(--red); color: var(--on-red); padding: var(--gap) clamp(16px, 4vw, 56px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.features > h2 { grid-column: 1 / 6; align-self: start; position: sticky; top: 32px; font-size: var(--step-display); max-width: 9ch; }
.blocks { grid-column: 7 / 13; display: grid; gap: 96px; }
.block h3 { margin-bottom: 20px; }
.row { display: grid; grid-template-columns: 200px 1fr; gap: 28px; align-items: start; }
.row img { width: 200px; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; background: var(--red-dark); }
.block.flip .row { grid-template-columns: 1fr 200px; } .block.flip .row img { order: 2; object-position: center; }
.row ul { list-style: none; padding: 0; display: grid; gap: 14px; }

/* ---- About: a letter on a sheet, on the leaf-green field, with a tear-off strip ---- */
.letter-section { background: var(--green); padding: var(--gap) 16px; display: grid; justify-items: center; }
.letter { width: min(640px, 100%); background: var(--paper); padding: clamp(28px, 5vw, 60px); display: grid; gap: 18px; line-height: 1.55; }
.letter h2 { font-size: var(--step-lead); letter-spacing: -0.02em; }
.portrait { width: 44px; height: 44px; border-radius: 99px; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-weight: 800; font-size: var(--step-small); margin-bottom: 10px; }
.letter mark { background: #fde2e2; color: inherit; padding: 0 3px; }
.sign { font-style: italic; font-size: var(--step-lead); margin-top: 6px; } .sign span { display: block; font-style: normal; font-size: var(--step-small); color: var(--muted); }
.tear { margin: 18px calc(-1 * clamp(28px, 5vw, 60px)) calc(-1 * clamp(28px, 5vw, 60px)); padding: 26px clamp(28px, 5vw, 60px); background: var(--bg); position: relative; }
.tear::before { content: "• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •"; position: absolute; left: 0; right: 0; top: -14px; overflow: hidden; white-space: nowrap;
  color: var(--green); font-size: 14px; letter-spacing: 2px; line-height: 1; text-align: center; }
.tear a { font-weight: 800; font-size: var(--step-lead); letter-spacing: -0.02em; text-decoration: none; } .tear a:hover { text-decoration: underline; }

/* ---- How it works: an itinerary on a slip, on the ink field ---- */
.how { background: var(--ink); color: var(--paper); padding: var(--gap) clamp(16px, 4vw, 56px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
.how-text { grid-column: 1 / 6; } .how-text p { margin-top: 24px; max-width: 30ch; color: #e7ded6; }
.slip { grid-column: 7 / 12; background: var(--paper); color: var(--ink); padding: 36px 32px 56px; font-variant-numeric: tabular-nums;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 97.5% 100%, 95% calc(100% - 12px), 92.5% 100%, 90% calc(100% - 12px), 87.5% 100%, 85% calc(100% - 12px), 82.5% 100%, 80% calc(100% - 12px), 77.5% 100%, 75% calc(100% - 12px), 72.5% 100%, 70% calc(100% - 12px), 67.5% 100%, 65% calc(100% - 12px), 62.5% 100%, 60% calc(100% - 12px), 57.5% 100%, 55% calc(100% - 12px), 52.5% 100%, 50% calc(100% - 12px), 47.5% 100%, 45% calc(100% - 12px), 42.5% 100%, 40% calc(100% - 12px), 37.5% 100%, 35% calc(100% - 12px), 32.5% 100%, 30% calc(100% - 12px), 27.5% 100%, 25% calc(100% - 12px), 22.5% 100%, 20% calc(100% - 12px), 17.5% 100%, 15% calc(100% - 12px), 12.5% 100%, 10% calc(100% - 12px), 7.5% 100%, 5% calc(100% - 12px), 2.5% 100%, 0 calc(100% - 12px)); }
.slip h3 { font-size: var(--step-body); letter-spacing: 0; margin: 28px 0 8px; } .slip h3:first-child { margin-top: 0; }
.line { display: flex; align-items: baseline; gap: 8px; padding: 4px 0; }
.line i { flex: 1; overflow: hidden; white-space: nowrap; color: var(--muted); }
.line i::before { content: "· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·"; }
.line span:last-child { white-space: nowrap; }
.total { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 44px; margin: 28px -32px 0; padding: 0 32px; background: var(--red); color: var(--on-red); font-weight: 700; }

/* ---- Pricing: a ticket for one of three places ---- */
.pricing { background: var(--bg); padding: var(--gap) 16px; display: grid; justify-items: center; }
.ticket { --ground: var(--bg); width: min(64vw, 980px); aspect-ratio: 2.3; display: grid; grid-template-columns: 7fr 3fr; background: var(--red); color: var(--on-red); position: relative; }
.ticket-main { padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; border-right: 6px dotted var(--ground); }
.ticket-main h2 { font-size: var(--step-head); max-width: 12ch; }
.ticket-main ul { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; }
.ticket-stub { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 0 0; text-align: center; }
/* The notches, in the ground colour. */
.ticket-stub::before, .ticket-stub::after { content: ""; position: absolute; left: -17px; width: 28px; height: 28px; border-radius: 99px; background: var(--ground); }
.ticket-stub::before { top: -14px; } .ticket-stub::after { bottom: -14px; }
.seats { font-size: var(--step-lead); font-weight: 600; } .seats b { display: block; font-size: var(--step-display); font-weight: 800; line-height: 1; letter-spacing: -0.04em; }
.bar { display: flex; align-items: center; justify-content: center; min-height: 56px; background: var(--paper); color: var(--ink); font-weight: 800; text-decoration: none; transition: background-color .2s; }
.bar:hover { background: #fff; }
/* The sign-up under the ticket (docs/design.md "Website: aanmelden voor de pilot"): a paper card like "Probeer het". */
.signup { width: min(64vw, 980px); margin-top: 48px; padding: clamp(24px, 3vw, 40px); background: var(--paper); border-radius: var(--radius); display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; scroll-margin-top: 24px; }
.signup h3 { grid-column: 1 / -1; font-size: var(--step-lead); letter-spacing: -0.02em; }
.signup label, .signup .field { display: grid; gap: 6px; font-size: var(--step-small); font-weight: 700; }
.signup input, .signup select { font: inherit; font-size: 1.0625rem; font-weight: 500; min-height: 48px; padding: 10px 14px; border: 2px solid var(--muted); border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
.signup input:focus, .signup select:focus { border-color: var(--ink); outline: 2px solid var(--ink); outline-offset: 1px; }
.signup .opt { font-weight: 500; color: var(--muted); }
.signup .button { border: 0; font: inherit; font-weight: 700; cursor: pointer; }
.signup .send { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin-top: 4px; }
.signup .send p { font-size: var(--step-small); color: var(--muted); max-width: 46ch; } .signup .send a { color: var(--ink); font-weight: 600; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- FAQ: answers as reading text ---- */
.faq { background: var(--paper); padding: var(--gap) clamp(16px, 4vw, 56px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.faq h2 { grid-column: 1 / 4; font-size: var(--step-lead); letter-spacing: -0.02em; align-self: start; }
.answers { grid-column: 5 / 13; columns: 2; column-gap: 56px; }
.answers p { break-inside: avoid; margin-bottom: 20px; line-height: 1.55; color: var(--muted); }
.answers b { font-weight: 700; color: var(--ink); }

/* ---- The close: the gym, full width, the words on its calm right half ---- */
.cta { position: relative; height: 90svh; min-height: 560px; overflow: hidden; }
.cta img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; filter: brightness(.6); }
.cta-text { position: absolute; left: 58%; right: clamp(16px, 4vw, 56px); bottom: 14%; color: var(--paper); display: grid; gap: 20px; justify-items: start; }
.cta-text h2 { font-size: var(--step-head); max-width: 12ch; }
.cta-text p { max-width: 36ch; }

.foot { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: baseline; padding: 18svh clamp(16px, 4vw, 56px) 30px; font-size: var(--step-small); color: var(--muted); }
.foot nav { display: flex; gap: 24px; } .foot a { color: var(--ink); } .foot > span:last-child { justify-self: end; }

/* ---- Privacy and 404: one reading column ---- */
.legal { max-width: 46rem; margin: 0 auto; padding: 48px 20px 120px; display: grid; gap: 18px; }
.legal .wordmark { margin-bottom: 40px; text-decoration: none; justify-self: start; }
.legal h1 { font-size: var(--step-head); max-width: 16ch; } .legal h2 { font-size: var(--step-lead); margin-top: 22px; letter-spacing: -0.02em; }
.legal p { color: var(--muted); max-width: 62ch; } .legal a:not(.button):not(.wordmark) { color: var(--ink); font-weight: 600; }

/* ---- The phone: a fragment of the real app, in the gym's own name and colour (its own lines and radii) ---- */
.phone { width: min(300px, 62%); aspect-ratio: 300 / 620; background: var(--paper); border-radius: 44px; padding: 10px; }
.phone-screen { width: 100%; height: 100%; border-radius: 34px; overflow: hidden; background: #f4f6f8; color: #0f172a; font: 500 12px/1.35 Manrope, system-ui, sans-serif; letter-spacing: 0; position: relative; }
.phone-screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.ui { padding: 16px 14px 70px; height: 100%; display: flex; flex-direction: column; gap: 10px; transition: opacity .2s; }
.ui.fade, .ui-kiosk.fade { opacity: 0; }
.ui-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ui-brand { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12px; }
.ui-mark { width: 22px; height: 22px; border-radius: 7px; background: var(--gym); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.ui small { color: #5b6478; font-size: 10.5px; font-weight: 600; }
.ui h4 { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.ui-card { background: #fff; border-radius: 16px; padding: 12px; display: grid; gap: 8px; border: 1px solid #e2e6ec; } /* taste-skill-ignore: the app's own card edge */
.ui-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; font-size: 10px; font-weight: 700; color: #5b6478; }
.ui-days span { background: #fff; border-radius: 9px; padding: 5px 0; border: 1px solid #e2e6ec; } /* taste-skill-ignore: the app's own day pills */
.ui-days svg { display: block; margin: 2px auto 0; width: 10px; height: 10px; }
.ui-days .done { color: var(--gym); } .ui-days .now { background: var(--gym); color: #fff; border-color: var(--gym); }
.ui-ex { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; align-items: center; font-size: 11px; font-weight: 700; }
.ui-ex b { width: 18px; height: 18px; border-radius: 6px; background: #eef1f4; display: grid; place-items: center; font-size: 9.5px; color: #5b6478; }
.ui-ex em { font-style: normal; color: #5b6478; font-weight: 600; }
.ui-btn { background: var(--gym); color: #fff; border-radius: 12px; text-align: center; padding: 9px; font-weight: 800; font-size: 12px; }
.ui-tab { position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: #fff; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; text-align: center; font-size: 9.5px; font-weight: 700; color: #5b6478; box-shadow: 0 -1px 0 #e2e6ec; } /* taste-skill-ignore: the app's tab bar */
.ui-tab .on { color: var(--gym); }
.ui-ring { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.ui-ring svg { width: 74px; height: 74px; }
.ui-bars { display: grid; gap: 7px; font-size: 10.5px; font-weight: 700; }
.ui-bar { height: 6px; border-radius: 9px; background: #eef1f4; overflow: hidden; } .ui-bar i { display: block; height: 100%; background: var(--gym); border-radius: 9px; }
.ui-msg { max-width: 82%; padding: 8px 10px; border-radius: 14px; font-size: 11px; font-weight: 600; }
.ui-msg.me { align-self: flex-end; background: var(--gym); color: #fff; border-bottom-right-radius: 4px; }
.ui-msg.coach { align-self: flex-start; background: #fff; border: 1px solid #e2e6ec; border-bottom-left-radius: 4px; } /* taste-skill-ignore: the app's own bubble */
.ui-kiosk { height: 100%; background: var(--gym); color: #fff; padding: 22px 16px; display: flex; flex-direction: column; gap: 12px; transition: opacity .2s; }
.ui-kiosk h4 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.ui-kiosk .ui-card { color: #0f172a; }
.ui-qr { width: 86px; height: 86px; flex: none; background: #fff; border-radius: 10px; padding: 8px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.ui-qr i { background: #0f172a; border-radius: 1px; } .ui-qr i.o { background: transparent; }
.ui-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ui-kpis div { background: #fff; border: 1px solid #e2e6ec; border-radius: 12px; padding: 8px; } /* taste-skill-ignore: the app's own numbers strip */
.ui-kpis b { display: block; font-size: 17px; font-weight: 800; }
.ui-flow { display: flex; align-items: center; gap: 3px; height: 54px; }
.ui-flow span { flex: 1; display: grid; align-content: center; gap: 1px; }
.ui-flow i { display: block; border-radius: 2px; } .ui-flow .n { background: var(--gym); } .ui-flow .s { background: #9aa4b2; }

/* ---- Entrances (app.js adds .in once a part is on screen); without the script nothing hides ---- */
@media (prefers-reduced-motion: no-preference) {
  .js .rise { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--d, 0ms); }
  .js .rise.in { opacity: 1; transform: none; }
}

/* ---- Tablet and phone ---- */
@media (max-width: 1000px) {
  .features > h2 { font-size: var(--step-head); }
  .row, .block.flip .row { grid-template-columns: 140px 1fr; } .block.flip .row img { order: 0; } .row img { width: 140px; }
  .ticket, .signup { width: min(92vw, 760px); }
}
@media (max-width: 860px) {
  .split { display: block; padding: var(--m); }
  .stage { position: sticky; top: var(--m); height: 56svh; z-index: 0; }
  /* The phone keeps its true size and is scaled as a whole, so the app inside never squeezes. */
  .stage .phone { width: 300px; transform: translate(-50%, -50%) scale(min(.62, calc((56svh - 76px) / 620px))); top: calc(50% - 28px); }
  .read { position: relative; z-index: 1; margin-top: -12svh; }
  .hero { min-height: auto; padding: 22px 20px 56px; }
  .hero-body { margin-top: 56px; padding-bottom: 0; gap: 22px; }
  .hero h1 { font-size: 9vw; }
  .hero .button { width: 100%; }
  .wordmark { font-size: 1.75rem; }
  .intro, .showcase { padding: 96px 8px 0; background: var(--bg); }
  .showcase { padding-bottom: 96px; }
  .screens { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .screens button { font-size: 1.5rem; scroll-snap-align: start; white-space: nowrap; }
  .screens button:hover { transform: none; }
  .screen-note { min-height: 0; }
  .phone-inline { display: block; margin: 28px auto 0; width: min(300px, 82%); }
  .features { display: block; padding: 96px 20px; }
  .features > h2 { position: sticky; top: 0; z-index: 2; background: var(--red); padding: 12px 20px; font-size: 9vw; max-width: none; margin: 0 -20px 40px; }
  .blocks { gap: 72px; }
  .row, .block.flip .row { grid-template-columns: 1fr; } .row img { width: 100%; aspect-ratio: 4 / 3; }
  .how, .faq { display: block; padding: 96px 20px; }
  .how-text { margin-bottom: 40px; }
  .faq h2 { margin-bottom: 24px; } .answers { columns: 1; }
  .ticket { width: 100%; aspect-ratio: auto; grid-template-columns: 1fr; }
  .ticket-main { border-right: 0; border-bottom: 6px dotted var(--ground); padding: 28px 22px; }
  .ticket-main h2 { font-size: 9vw; } .ticket-main ul { grid-template-columns: 1fr; }
  .ticket-stub { padding-top: 40px; gap: 28px; } .ticket-stub::before, .ticket-stub::after { top: -17px; bottom: auto; }
  .ticket-main ul { margin-bottom: 8px; }
  .ticket-stub::before { left: -14px; } .ticket-stub::after { left: auto; right: -14px; }
  .seats b { font-size: 16vw; }
  .signup { width: 100%; grid-template-columns: 1fr; margin-top: 32px; padding: 24px 20px; } .signup .button { width: 100%; }
  .cta { height: auto; min-height: 0; display: grid; background: var(--ink); }
  .cta img { position: static; height: 70svh; filter: none; }
  .cta-text { position: static; padding: 40px 20px 56px; }
  .cta-text h2 { font-size: 1.75rem; } .cta .button { width: 100%; }
  .foot { grid-template-columns: 1fr; gap: 8px; padding: 20svh 20px 24px; } .foot > span:last-child { justify-self: start; }
}