/* Hallmark · shape: Bento Grid · genre: modern-minimal · theme: Coral (deal 1/3, seed rally-saas-pickleball-clubs-b3ae·053d0e18·2026-10-22·r0) · job: sign up · draw: 611f65
 * hero: Stage (swapped from Counter: the before and after is the prompt's strongest thing) · nav: floating bar · footer: index columns · imagery: the product built (court sheet, five bento samples, the evening queue); library had no pickleball frame · signature: the court sheet where Court 3's double booking at 6:00 slides to a free court and is pressed Booked
 * axes: light/grotesk-sans/warm · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4 · weakest: P, a booking tool's page argues little; it argues that the sheet is the product and lets the 6:00 clash on Court 3 make the case */
/* Hallmark · answered F4 · the second action is Coral's cotton card lying on the desk, the theme's quiet control; only the ink board is filled */
/* Hallmark · answered F15 · grids and tiles part at 32px; the three splits (hero, the pinned evening, the price board) part at 96px so the sheet and the price stand clear of their text */
/* Hallmark · dismissed 40 · the pressed Booked is 24px at weight 600, large text at 4.31:1 on cotton, past the 3:1 large-text line, and aria-hidden */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --color-sand: oklch(88.5% 0.03 72);
  --color-sand-ink: oklch(30% 0.03 60);
  --color-press-shade: oklch(30% 0.09 30);
  --nav-h: 64px;
  --color-board-rule: oklch(36% 0.012 40);
}

/* ---------- shared ---------- */
.defs { position: absolute; width: 0; height: 0; }
.press-shade { flood-color: var(--color-press-shade); flood-opacity: 0.55; }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: var(--radius-input); }
.skip:focus-visible { top: var(--space-md); }
.fig { font-family: var(--font-outlier); font-variant-numeric: tabular-nums; font-weight: 400; }

.desk { background-color: var(--color-desk); background-image: radial-gradient(90% 120% at 0% 30%, var(--color-cotton), transparent 62%), var(--tex-desk); }
.stock { background-color: var(--color-cotton); background-image: linear-gradient(100deg, var(--color-cotton), transparent 45%), var(--tex-cotton); color: var(--color-print); box-shadow: var(--edge-stock), var(--cast-stock); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 48px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); font: 500 var(--text-md)/1 var(--font-body); white-space: nowrap; text-decoration: none; cursor: pointer; transition: transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn--card { background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); text-shadow: 0.5px 0.75px 0 var(--color-cotton); box-shadow: var(--edge-stock), var(--cast-stock); }
.btn--ink { background: var(--color-board); color: var(--color-board-type); text-shadow: 0 -0.75px 0 var(--color-ink); box-shadow: var(--cast-stock); }
@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); box-shadow: var(--edge-stock), var(--cast-stock-lift); }
  .btn--ink:hover { box-shadow: var(--cast-stock-lift); }
}
.btn:active { transform: translateY(1px); box-shadow: var(--edge-stock); }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn[aria-busy="true"] { cursor: progress; }

.link { color: var(--color-ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--color-rule-2); text-underline-offset: 0.2em; transition: text-decoration-color var(--dur-short) var(--ease-out); }
.link:hover { text-decoration-color: var(--color-accent-2); }
.link:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }

/* ---------- nav: a floating bar of cotton ---------- */
.nav-wrap { position: fixed; inset-inline: 0; top: var(--space-md); z-index: var(--z-sticky-nav); pointer-events: none; }
.nav__bar { pointer-events: auto; display: flex; align-items: center; gap: var(--space-xl); height: var(--nav-h); padding-inline: var(--space-lg) var(--space-xs); border-radius: 12px; background-color: var(--color-cotton); background-image: var(--tex-cotton); box-shadow: var(--edge-stock), var(--cast-stock); }
.wordmark { font: 600 1.375rem/1 var(--font-display); letter-spacing: -0.035em; color: var(--color-ink); text-decoration: none; border-radius: 4px; }
.wordmark:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.nav__links { display: flex; gap: var(--space-xs); margin: 0 auto 0 0; padding: 0; list-style: none; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-sm); border-radius: var(--radius-input); font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out); }
.nav__links a:hover { background: var(--color-paper-2); color: var(--color-ink); }
.nav__links a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }
.btn--nav { min-height: 48px; box-shadow: var(--edge-stock); background-color: var(--color-paper-2); }

/* ---------- hero: Stage on the desk ---------- */
.hero { min-height: 100dvh; display: grid; align-items: center; padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--space-2xl); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.hero__text { display: grid; gap: var(--space-lg); justify-items: start; }
.hero h1 { max-width: 12ch; font-size: clamp(2.75rem, 4.3vw + 1rem, 5.25rem); }
.hero .lead { max-width: 30ch; color: var(--color-ink-2); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
.hero__terms { margin-top: calc(-1 * var(--space-xs)); font-size: var(--text-sm); color: var(--color-muted); }

/* the stage is drawn in one unit: 1em is a fortieth of its width */
.stage { container-type: inline-size; margin: 0; overflow: visible; background: none; }
.board { --row: 5.6em; --col: 4.95em; --gap: 0.3em; position: relative; height: 35em; font-size: calc(100cqi / 40); }

.sheet { position: absolute; left: 0; top: 1em; width: 38em; padding: 1.25em; border-radius: var(--radius-stock); transform: rotate(-0.6deg); z-index: 1; }
.sheet__head { display: flex; align-items: baseline; justify-content: space-between; height: 3.6em; }
.sheet__title { font-size: 1.15em; font-weight: 600; letter-spacing: -0.02em; }
.sheet__sub { font-size: 0.78em; color: var(--color-muted); }
.sheet__grid { display: grid; gap: var(--gap); }
.sheet__row { display: grid; grid-template-columns: 4em repeat(6, var(--col)); gap: var(--gap); height: var(--row); }
.sheet__row--head { height: 2.2em; align-items: center; }
.sheet__row--head > * { font-size: 0.74em; font-weight: 500; color: var(--color-muted); }
.sheet__time { font-size: 0.74em; color: var(--color-muted); padding-top: 0.45em; border-top: 1px solid var(--color-rule-2); }
.sheet__row--head .sheet__time { border-top: 0; }
.e { position: relative; display: block; padding: 0.5em 0.55em; border-radius: 4px; background: var(--color-paper-2); font-size: 0.8em; font-weight: 500; line-height: 1.2; color: var(--color-print); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.e--open { background: var(--color-paper-3); }
.e--league { background: var(--color-sand); color: var(--color-sand-ink); }
.e--free { background: none; outline: 1px dashed var(--color-rule-2); outline-offset: -1px; }
.e--clash { overflow: visible; font-size: 0.72em; padding-right: 0.3em; outline: 1.5px solid var(--color-ink); outline-offset: -1.5px; }
.clash { position: absolute; left: 0.55em; top: 2.5em; padding: 0.1em 0.4em; border: 1px solid var(--color-ink); border-radius: 3px; background: var(--color-cotton); font-size: 0.92em; color: var(--color-ink); }
.clash__word { text-decoration: line-through; text-decoration-thickness: 1.5px; }

.move { position: absolute; left: 0; top: 0; width: 38em; height: 32em; overflow: visible; pointer-events: none; transition: opacity var(--dur-long) var(--ease-out); }
.move__line, .move__head { fill: none; stroke: var(--color-ink); stroke-width: 0.09; stroke-linecap: round; stroke-linejoin: round; }
.move__line { stroke-dasharray: 0.35 0.25; }

.card-under { position: absolute; left: 24.5em; top: 30.2em; width: 12.5em; padding: 0.9em 1em 1.1em; display: grid; gap: 0.25em; border-radius: 6px; transform: rotate(3.5deg); z-index: 0; }
.card-under__title { font-size: 0.78em; color: var(--color-muted); padding-top: 2.4em; }
.card-under__who { font-size: 0.9em; font-weight: 500; }

.slip { position: absolute; left: 31.35em; top: 14.05em; width: 6.4em; height: 5.9em; display: grid; align-content: start; gap: 0.2em; padding: 0.55em 0.6em; border-radius: 4px; z-index: 2; transform: rotate(1.5deg); transition: transform 1.1s var(--ease-in-out); }
.slip__name { font-size: 0.8em; font-weight: 600; line-height: 1.15; white-space: nowrap; }
.slip__who { font-size: 0.72em; color: var(--color-muted); white-space: nowrap; }
.press { justify-self: start; margin-top: 0.12em; font-size: 1.45em; font-weight: 600; letter-spacing: -0.01em; line-height: 1; color: var(--color-paid); filter: url(#press); transform: rotate(-7deg); transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }

.js .stage.is-before .slip { transform: translate(-14.6em, 1.9em) rotate(-5deg); }
.js .stage.is-before .clash__word { text-decoration-color: transparent; }
.js .stage.is-before .move, .js .stage.is-moving .move { opacity: 0; }
.js .stage.is-before .press, .js .stage.is-moving .press { opacity: 0; transform: rotate(-7deg) scale(1.15); }

@container (max-width: 520px) {
  .board { font-size: calc(100cqi / 28); }
  .sheet { width: 27.5em; }
  .sheet__row { grid-template-columns: 4em repeat(4, var(--col)); }
  .sheet__row > :nth-child(2), .sheet__row > :nth-child(3) { display: none; }
  .sheet__sub { display: none; }
    .move { left: -10.5em; }
  .slip { left: 20.6em; }
  .card-under { left: 14.5em; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .slip, .press, .move { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}

@media (max-width: 60rem) {
  .nav__links { display: none; }
  .nav__bar { justify-content: space-between; }
  .hero { min-height: 0; padding-block: calc(var(--nav-h) + var(--space-2xl)) var(--space-2xl); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
}

/* ---------- what it runs: a bento of desks ---------- */
.runs { padding-block: var(--section-gap) var(--section-gap-s); }
.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: minmax(300px, auto); gap: var(--gap-columns); margin-top: var(--space-2xl); }
.tile { display: grid; grid-template-rows: auto 1fr; gap: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); background-color: var(--color-desk); background-image: radial-gradient(120% 140% at 0% 0%, var(--color-cotton), transparent 60%), var(--tex-desk); }
.tile h3 { font-size: var(--text-title); }
.tile--wait { grid-column: 1 / 8; grid-row: span 2; }
.tile--open, .tile--league { grid-column: 8 / 13; }
.tile--door { grid-column: 1 / 13; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto; align-items: center; column-gap: var(--gap-columns); }
.tile__sample { display: grid; align-items: start; }
.tile--wait { align-content: start; }
.tile__sample--pair { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: start; }
.paper { padding: var(--space-lg); border-radius: 6px; }
.tile--wait .paper { padding: var(--space-xl); transform: rotate(-0.8deg); }
.paper__title { font-weight: 600; letter-spacing: -0.01em; }
.paper__meta { margin-top: var(--space-2xs); font-size: var(--text-sm); color: var(--color-muted); }
.wl { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto 7.5rem; align-items: center; gap: var(--space-sm); min-height: 64px; border-top: 1px solid var(--color-rule); }
.tile--wait .paper__title { margin-bottom: var(--space-md); font-size: var(--text-lg); }
.wl__n { color: var(--color-muted); }
.wl__who { font-weight: 500; font-size: var(--text-lg); }
.wl__what { font-size: var(--text-sm); color: var(--color-muted); }
.wl__when { text-align: right; font-size: var(--text-sm); }
.wl--open .wl__who { color: var(--color-muted); font-weight: 400; }
.spots { margin-top: var(--space-md); height: 10px; border-radius: 5px; background: var(--color-paper-3); overflow: hidden; }
.spots__fill { display: block; height: 100%; background: var(--color-ink-2); transform-origin: left center; transform: scaleX(var(--of, 0)); }
.ladder { margin: var(--space-sm) 0 0; padding: 0; list-style: none; counter-reset: rung; }
.ladder li { counter-increment: rung; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: var(--space-xs); padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); }
.ladder li::before { content: counter(rung); font-family: var(--font-outlier); color: var(--color-muted); }
.ladder li > :last-child { color: var(--color-muted); }
.arrivals { margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.arrivals li { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--space-xs); padding-block: var(--space-xs); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); }
.arrivals .fig { color: var(--color-muted); }
.receipt { position: relative; padding: var(--space-lg); border-radius: 6px; transform: rotate(2deg); }
.receipt__line { display: flex; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-sm); padding-top: var(--space-xs); border-top: 1px solid var(--color-print); font-size: var(--text-sm); }
.press--paid { display: inline-block; margin-top: var(--space-md); font-size: var(--text-2xl); }

/* ---------- one evening: pinned ---------- */
.evening { padding-block: var(--section-gap-l) var(--section-gap); }
.pinned { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); margin-top: var(--space-2xl); align-items: start; }
.pinned__visual { position: sticky; top: calc(var(--nav-h) + var(--space-2xl)); margin: 0; display: grid; gap: var(--space-md); }
.pinned__shots { display: grid; gap: var(--space-md); padding: var(--space-xl); border-radius: var(--radius-card); background-color: var(--color-desk); background-image: radial-gradient(120% 140% at 0% 0%, var(--color-cotton), transparent 60%), var(--tex-desk); }
.shot { border-radius: var(--radius-stock); box-shadow: var(--edge-stock), var(--cast-stock); transition: opacity var(--dur-long) var(--ease-out), transform var(--dur-long) var(--ease-out); }
.shot picture { display: contents; }
.shot > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; border-radius: var(--radius-stock); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.shot > img { outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; border-radius: var(--radius-stock); }
[data-slot].shot picture { display: contents; }
.shot > picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; border-radius: var(--radius-stock); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
.shot > img { filter: none; }
.js .pinned__visual[data-active] .shot { opacity: 0.45; }
.js .pinned__visual[data-active="1"] .shot[data-step="1"], .js .pinned__visual[data-active="2"] .shot[data-step="2"], .js .pinned__visual[data-active="3"] .shot[data-step="3"] { opacity: 1; transform: translateX(var(--space-xs)); }
.caption { font-size: var(--text-sm); color: var(--color-ink-2); }
.pinned__steps { margin: 0; padding: 0; list-style: none; }
.step { min-height: 52vh; display: grid; align-content: center; gap: var(--space-sm); border-top: 1px solid var(--color-rule); padding-block: var(--space-xl); }
.step:first-child { border-top: 0; min-height: 50vh; align-content: start; padding-top: var(--space-lg); }
.step__time { font-size: var(--text-sm); color: var(--color-muted); }
.step h3 { font-size: var(--text-2xl); max-width: 16ch; }
.step p:last-child { max-width: 45ch; color: var(--color-ink-2); }

/* ---------- the price on the board ---------- */
.board-band { padding-block: var(--section-gap-s); background: var(--color-board); color: var(--color-board-type); }
.board-band h2 { color: var(--color-board-type); }
.price { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.price__left { display: grid; gap: var(--space-xl); }
.courts { display: grid; gap: var(--space-sm); }
.courts label { font-size: var(--text-sm); font-weight: 500; color: var(--color-board-type); }
.courts__row { display: grid; grid-template-columns: minmax(0, 1fr) 7rem; align-items: center; gap: var(--space-md); }
.courts input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--color-board-type); cursor: pointer; }
.courts input[type="range"]:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 4px; border-radius: 4px; }
.courts__out { font-family: var(--font-outlier); font-size: var(--text-lg); text-align: right; }
.trial { display: grid; gap: var(--space-xs); padding: var(--space-xl); border-radius: var(--radius-stock); box-shadow: var(--edge-stock), 8px 8px 18px -8px oklch(var(--deep) / 0.7); }
.trial label { font-size: var(--text-sm); font-weight: 500; }
.trial__row { display: flex; gap: var(--space-xs); }
.trial input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-input); background: var(--color-cotton); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; }
.trial input:hover { background: var(--color-paper); }
.trial input:focus-visible { outline-color: var(--color-focus); border-color: var(--color-ink-2); }
.trial input[aria-invalid] { border-color: var(--color-error); }
.trial input:disabled { opacity: 0.55; cursor: not-allowed; }
.trial__help { min-height: 1lh; font-size: var(--text-sm); color: var(--color-muted); }
.price__right { display: grid; gap: var(--space-xl); justify-items: start; }
.groove { display: inline-flex; gap: var(--space-2xs); padding: var(--space-2xs); border-radius: 12px; background: var(--color-ink-2); box-shadow: inset 1px 1.5px 3px oklch(var(--deep) / 0.6), 0 0 0 0.5px oklch(var(--deep) / 0.5); }
.groove__opt { min-height: 44px; padding: 0 var(--space-lg); border: 0; border-radius: var(--radius-stock); background: transparent; color: var(--color-board-type); font-weight: 500; cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.groove__opt:hover { background: oklch(var(--deep) / 0.35); }
.groove__opt:active { transform: translateY(1px); }
.groove__opt:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.groove__opt[aria-pressed="true"] { background-color: var(--color-cotton); background-image: var(--tex-cotton); color: var(--color-print); box-shadow: var(--edge-stock); }
.groove__opt:disabled { opacity: 0.55; cursor: not-allowed; }
.plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); align-items: end; width: 100%; }
.plan__price { display: flex; align-items: baseline; gap: var(--space-sm); }
.plan__fig { font: 600 clamp(5.5rem, 10vw, 10.5rem)/0.85 var(--font-display); letter-spacing: -0.05em; }
.plan__unit { font-size: var(--text-title); font-weight: 500; white-space: nowrap; }
.plan__list { margin: 0; padding: 0; list-style: none; }
.plan__list li { padding-block: var(--space-sm); border-top: 1px solid var(--color-board-rule); font-size: var(--text-lead); }
.plan + .plan { padding-top: var(--space-xl); border-top: 1px solid var(--color-board-rule); }
.js .plan + .plan { padding-top: 0; border-top: 0; }

/* ---------- questions: rows ---------- */
.faq { padding-block: var(--section-gap-l) var(--section-gap); }
.faq__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns); align-items: start; }
.faq__head { display: grid; gap: var(--space-lg); justify-items: start; }
.faq__rows { margin: 0; }
.faq__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap-columns); padding-block: var(--space-xl); border-top: 1px solid var(--color-rule); }
.faq__row:last-child { border-bottom: 1px solid var(--color-rule); }
.faq__row dt { font-size: var(--text-title); font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.faq__row dd { margin: 0; color: var(--color-ink-2); max-width: 40ch; padding-top: var(--space-2xs); }

/* ---------- footer: index columns ---------- */
.footer { padding-block: var(--space-3xl) var(--space-xl); background: var(--color-paper-2); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); gap: var(--gap-columns); }
.wordmark--big { font-size: var(--text-3xl); }
.footer__mast { display: grid; gap: var(--space-sm); align-content: start; justify-items: start; }
.footer__mast p { color: var(--color-ink-2); }
.footer__head { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-sm); }
.footer__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2xs); }
.footer__col a { white-space: nowrap; display: inline-flex; min-height: 32px; align-items: center; color: var(--color-ink); text-decoration: none; }
.footer__col a:hover { text-decoration: underline; text-decoration-color: var(--color-accent-2); }
.footer__col a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 2px; }
.footer__legal { grid-column: 1 / -1; margin-top: var(--space-2xl); padding-top: var(--space-md); border-top: 1px solid var(--color-rule-2); font-size: var(--text-sm); color: var(--color-muted); }

@media (prefers-reduced-motion: reduce) {
  .shot, .groove__opt, .link { transition: none; }
  .js .pinned__visual[data-active] .shot { transform: none; }
}

@media (max-width: 60rem) {
  .bento { grid-auto-rows: auto; }
  .tile--wait, .tile--open, .tile--league, .tile--door { grid-column: 1 / -1; grid-row: auto; }
  .tile--door { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .pinned, .price, .faq__grid, .faq__row { grid-template-columns: minmax(0, 1fr); }
  .pinned { gap: var(--space-xl); }
  .pinned__visual { position: static; }
  .js .pinned__visual[data-active] .shot { opacity: 1; transform: none; }
  .step, .step:first-child { min-height: 0; }
  .plan { grid-template-columns: minmax(0, 1fr); }
  .price__left { display: contents; }
  .price h2 { order: 1; } .courts { order: 2; } .price__right { order: 3; } .trial { order: 4; }
  .price { row-gap: var(--space-xl); }
  .shot[style] { aspect-ratio: auto !important; }
  .pinned__visual, .pinned__shots, .pinned__steps { display: contents; }
  .step[data-step="1"] { order: 1; } .shot[data-step="1"] { order: 2; }
  .step[data-step="2"] { order: 3; } .shot[data-step="2"] { order: 4; }
  .step[data-step="3"] { order: 5; } .shot[data-step="3"] { order: 6; }
  .pinned__visual > .caption { order: 7; }
  .step { padding-block: var(--space-lg) 0; }
  .shot > picture > img { position: static; height: auto; }
  .footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__mast { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .tile { padding: var(--space-lg); }
  .tile__sample--pair { grid-template-columns: minmax(0, 1fr); }
  .wl { grid-template-columns: 1.5rem minmax(0, 1fr) auto; }
  .wl__what { display: none; }
  .wl { grid-template-columns: 1.5rem minmax(0, 1fr); row-gap: 0; padding-block: var(--space-xs); }
  .wl__when { grid-column: 2; text-align: left; }
  .trial__row { flex-direction: column; }
  .pinned__shots { padding: var(--space-md); }
}