/* Services + Approach. Night arcade: a retro site, not a retro theme.
   Each hero sits in a terminal window like the homepage; art is flat pixel
   art from /assets/px at whole-number scales; signs are echo text (term.css),
   never glow. Namespaced so nothing collides: pg- (window, page top, section
   next steps and close, both pages), sv- (services), ap- (approach), pxs (the
   pixel screen in both heroes). Theme tokens only, so every theme works.
   Pixel type stays on Departure's 11px grid: 11, 16.5, 22, 27.5, 33, 44, 55,
   66, 77, 88, 99. */

.nw { white-space: nowrap; }
.px { image-rendering: pixelated; }

/* Bigger tap targets for text links, with no change to layout */
main .link { position: relative; }
main .link::before { content: ""; position: absolute; inset: -12px -6px; }
main .btn--arcade { max-width: 100%; }

/* ---------- Top (both pages): a big pixel headline, a clear line, the booking button ---------- */
.pg-hero__h { margin-top: 18px; font: 400 88px/1.02 var(--pixel); letter-spacing: -.01em; color: var(--fg-0); max-width: 12ch; }
.pg-hero__h--wide { max-width: none; }
.pg-hero__h span { display: block; }
.pg-hero__cta { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.pg-hero__cta .link, .pg-close__cta .link { align-self: center; margin-bottom: 5px; }

/* ---------- Terminal window (both heroes), the homepage's frame: 2px border, the title and a live
   status set into the top border like btop, pause on the bottom border, faint scanlines, deep-night fill ---------- */
.pg-win { position: relative; padding: clamp(32px, 4vw, 48px); border: 2px solid var(--line-2); background: color-mix(in srgb, var(--bg-0) 52%, #020507); box-shadow: 0 0 0 1px color-mix(in srgb, var(--bg-0) 80%, #000), 0 30px 80px rgba(0, 0, 0, .35); }
.pg-win::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); opacity: .5; }
.pg-win > .win__t, .pg-win > .win__r, .pg-win > .win__b { position: absolute; z-index: 2; padding: 0 8px; font: 400 11px/14px var(--pixel); letter-spacing: .06em; background: var(--bg-0); white-space: nowrap; }
.pg-win > .win__t { top: -8px; left: 16px; color: var(--fg-1); }
.pg-win > .win__t::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; background: var(--rose, var(--accent)); vertical-align: 0; animation: pulse 2.4s steps(2) infinite; }
.pg-win > .win__r { top: -8px; right: 16px; color: var(--accent); }
.pg-win > .win__b { bottom: -8px; right: 16px; margin: 0; border: 0; border-radius: 0; cursor: pointer; color: var(--fg-2); }
.pg-win > .win__b::after { content: ""; position: absolute; inset: -15px 0; }
.pg-win > .win__b:hover { color: var(--fg-0); }
.pg-win > .win__b[hidden] { display: none; }
/* paper: a light window so the headline keeps its contrast */
[data-theme="paper"] .pg-win { background: var(--bg-1); box-shadow: 0 0 0 1px var(--line); }
[data-theme="paper"] .pg-win::after { opacity: .12; }
.pg-win .pg-hero__h { font-size: 77px; }
.pg-win .lede, .pg-close .body-l, .pg-go__t { text-wrap: pretty; }

/* ---------- The pixel screen (both heroes). Scenes morph into each other; drawn by the inline script ---------- */
.pxs { display: none; }
.pxs.pxs--on { display: grid; justify-items: end; align-content: end; }
.pxs__cv { display: block; max-width: 100%; height: auto; image-rendering: pixelated; }
.pxs--sv, .pxs--ap { width: 480px; max-width: 100%; }
.pxs--sv .pxs__cv { width: 480px; aspect-ratio: 16 / 9; }
.pxs--ap .pxs__cv { width: 480px; aspect-ratio: 8 / 5; }

/* Services top: one window holds the headline and the level-select screen; the staircase stands below */
.sv-hero { padding: clamp(28px, 3vw, 40px) 0 clamp(72px, 8vw, 112px); }
.sv-hero__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 48px; align-items: end; margin-bottom: clamp(24px, 3vw, 36px); }
.sv-hero__copy { display: grid; gap: 22px; justify-items: start; }
.sv-hero__copy .pg-hero__h { margin-top: -6px; }
.sv-hero__copy .lede { max-width: 40ch; }

/* Approach top: headline across, then the line on the left and the screen on the right */
.ap-hero { padding: clamp(28px, 3vw, 40px) 0 clamp(56px, 6vw, 88px); }
.ap-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "h h" "c p"; gap: 28px 48px; align-items: end; }
.ap-hero__h { grid-area: h; }
.ap-hero__copy { grid-area: c; display: grid; gap: 26px; justify-items: start; align-self: start; padding-top: 8px; }
.ap-hero__copy .lede { max-width: 40ch; }
.pxs--ap { grid-area: p; }

/* ---------- Shared section head: heading left, a line of copy right ---------- */
.sv-head { display: grid; grid-template-columns: 1fr 1fr; gap: 20px clamp(32px, 5vw, 80px); align-items: end; margin-bottom: clamp(48px, 6vw, 80px); }
.sv-head .label { margin-bottom: 14px; }

/* ---------- Lists, facts, verdicts, rules (both pages) ---------- */
.sv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 16.5px; color: var(--fg-1); }
.sv-list li { position: relative; padding-left: 26px; }
.sv-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 10px; height: 10px; background: var(--accent); }
.sv-list--n { counter-reset: n; gap: 0; }
.sv-list--n li { padding: 16px 0 16px 58px; border-top: 1px solid var(--line); }
.sv-list--n li:last-child { border-bottom: 1px solid var(--line); }
.sv-list--n li::before { counter-increment: n; content: counter(n, decimal-leading-zero); top: 16px; width: auto; height: auto; background: none; font: 400 22px/1.2 var(--pixel); color: var(--accent); }
.sv-list--rows { gap: 0; }
.sv-list--rows li { padding: 20px 0 20px 30px; border-top: 1px solid var(--line); font-size: 18px; color: var(--fg-0); }
.sv-list--rows li:last-child { border-bottom: 1px solid var(--line); }
.sv-list--rows li::before { top: 29px; }

.sv-facts { margin: 0; display: grid; gap: 12px; font-size: 15.5px; }
.sv-facts div { display: grid; grid-template-columns: 132px 1fr; gap: 16px; }
.sv-facts dt { font: 600 15.5px/1.6 var(--sans); color: var(--fg-0); }
.sv-facts dd { margin: 0; color: var(--fg-1); }

.sv-verdicts { display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; font-size: 15px; color: var(--fg-2); }
.sv-verdicts span { margin-right: 4px; }
.sv-verdicts b { font: 400 11px/1 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-0); border: 1px solid var(--line-2); padding: 7px 9px; }

.sv-rule { padding-left: 18px; border-left: 3px solid var(--accent); font-size: 16.5px; color: var(--fg-1); max-width: 56ch; }
.sv-rule b { color: var(--fg-0); font-weight: 600; }

/* Pixel checkbox that ticks itself when its row scrolls in (Day One Setup: every item is delivered).
   Checked by default (no JS, reduced motion); unchecked only while waiting. */
.qbox { display: inline-grid; place-items: center; width: 22px; height: 22px; flex: none; background: var(--accent); border: 2px solid var(--accent); transition: background-color 0s linear calc(.45s + var(--i, 0) * .14s), border-color 0s linear calc(.45s + var(--i, 0) * .14s); }
.qbox svg { width: 14px; height: 12px; fill: var(--accent-ink); transition: opacity 0s linear calc(.45s + var(--i, 0) * .14s); }
.js [data-reveal]:not(.is-in) .qbox { background: transparent; border-color: var(--line-2); }
.js [data-reveal]:not(.is-in) .qbox svg { opacity: 0; }

/* ---------- Services top: the level select staircase ----------
   One power-up per level, in the homepage's order. The screen above plays each level in turn;
   the step on screen lights and its power-up hops up and hovers. Everything moves in whole art
   pixels on stepped frames, like hardware. Level 1 keeps a quiet start-here label in accent. */
.sv-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sv-step { position: relative; display: flex; flex-direction: column; min-width: 0; }
.sv-step__art { height: 188px; display: flex; flex-direction: column; justify-content: flex-end; }
.sv-step__pu { display: block; width: 64px; height: 64px; margin-left: 20px; }
.sv-step__pu img {
  display: block; width: 64px; height: 64px; image-rendering: pixelated;
  opacity: .5; filter: saturate(.55); transition: opacity .2s steps(2, end), filter .2s steps(2, end), transform .12s steps(3, end);
}
.sv-step__block {
  height: calc(16px + var(--i) * 24px);
  background: color-mix(in srgb, var(--fg-0) 7%, transparent);
  border-top: 4px solid color-mix(in srgb, var(--fg-0) 30%, transparent);
  transition: border-color .15s steps(2), background-color .15s steps(2);
}
.sv-step:hover .sv-step__pu img { opacity: .8; filter: none; }
.sv-step.is-live .sv-step__pu img { opacity: 1; filter: none; transform: translateY(-22px); animation: sv-hop .48s steps(1, end) both, sv-bob 1.2s steps(1, end) .48s infinite; }
.sv-step.is-live .sv-step__block { border-top-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
/* the hop: a table of whole-pixel heights, one per frame (40ms), up past the hover height and back */
@keyframes sv-hop {
  0% { transform: translateY(0); } 8% { transform: translateY(-12px); } 17% { transform: translateY(-22px); }
  25% { transform: translateY(-30px); } 33% { transform: translateY(-36px); } 42% { transform: translateY(-40px); }
  50% { transform: translateY(-42px); } 58% { transform: translateY(-40px); } 67% { transform: translateY(-36px); }
  75% { transform: translateY(-30px); } 83% { transform: translateY(-24px); } 92% { transform: translateY(-20px); }
  100% { transform: translateY(-22px); }
}
@keyframes sv-bob { 0%, 100% { transform: translateY(-22px); } 50% { transform: translateY(-26px); } }
.sv-step__txt { display: grid; gap: 10px; align-content: start; padding: 26px 26px 0 0; }
.sv-step__n { font: 400 11px/1.4 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-2); }
.sv-step--pick .sv-step__n { color: var(--accent); }
.sv-step__name { font: 400 27.5px/1.1 var(--pixel); min-height: 2.2em; }
.sv-step__name a { color: var(--fg-0); text-decoration: none; transition: color .15s; }
.sv-step__name a::after { content: ""; position: absolute; inset: 0; }
.sv-step__price { font: 400 13.5px/1.4 var(--mono); color: var(--fg-2); }
.sv-step__price b { font-weight: 500; color: var(--fg-0); }
.sv-step__for { font-size: 15.5px; line-height: 1.55; color: var(--fg-1); }
.sv-step__also { margin-top: 8px; padding-top: 14px; border-top: 1px solid color-mix(in srgb, var(--fg-0) 14%, transparent); font: 400 13.5px/1.4 var(--mono); color: var(--fg-2); }
.sv-step__also a { position: relative; z-index: 1; display: inline-block; padding: 11px 4px; margin: -11px 4px -11px -4px; font: 400 16.5px/1.2 var(--pixel); color: var(--fg-0); text-decoration: none; }
.sv-step__also a:hover { color: var(--accent); }
.sv-step:hover .sv-step__name a, .sv-step.is-live .sv-step__name a, .sv-step__name a:focus-visible { color: var(--accent); }

/* Each level's power-up, beside its name further down; it pops in once when it scrolls into view */
.sv-pu { display: block; width: 64px; height: 64px; image-rendering: pixelated; }
.js .sv-pu[data-reveal] { transform: none; transition: none; }
.js .sv-pu[data-reveal].is-in { animation: sv-pop .4s steps(1, end) both; }
@keyframes sv-pop {
  0% { opacity: 0; transform: translateY(0); } 10% { opacity: 1; transform: translateY(-6px); } 20% { transform: translateY(-12px); }
  30% { transform: translateY(-16px); } 40% { transform: translateY(-18px); } 50% { transform: translateY(-16px); }
  60% { transform: translateY(-12px); } 70% { transform: translateY(-6px); } 80% { transform: translateY(0); }
  90% { transform: translateY(-2px); } 100% { opacity: 1; transform: translateY(0); }
}

/* ---------- Next step (both pages): the one action, where a section ends ---------- */
.pg-go {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px;
  margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(28px, 3vw, 36px);
  background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px) top left / 100% 2px no-repeat;
}
.pg-go__t { font: 400 27.5px/1.2 var(--pixel); color: var(--fg-0); max-width: 26ch; }
.pg-go .btn--arcade { flex: none; }

/* ---------- Services 2: one spread per level ---------- */
.sv-levels { padding: clamp(88px, 10vw, 140px) 0 clamp(8px, 2vw, 24px); }
.sv-lvl { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px clamp(32px, 6vw, 96px); padding: clamp(56px, 6vw, 88px) 0; border-top: 1px solid var(--line); }
.sv-lvl__id { display: grid; gap: 16px; align-content: start; justify-items: start; align-self: start; position: sticky; top: 104px; }
.sv-lvl__id .sv-pu { margin-bottom: 4px; }
.sv-lvl__tag { font: 400 11px/1.4 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.sv-lvl__name { font: 400 55px/1.02 var(--pixel); letter-spacing: -.01em; }
.sv-lvl__price { font: 400 14px/1.5 var(--mono); color: var(--fg-2); }
.sv-lvl__price b { font-weight: 500; color: var(--fg-0); }
.sv-lvl__lead { font-size: 17px; color: var(--fg-1); max-width: 42ch; margin-bottom: 6px; }
.sv-lvl__fine { font-size: 14.5px; color: var(--fg-2); max-width: 40ch; }
.sv-lvl__body { display: grid; gap: 26px; align-content: start; color: var(--fg-1); font-size: 16.5px; }
.sv-lvl__body > p { max-width: 60ch; }
.sv-lvl__big { font: 400 33px/1.2 var(--pixel); color: var(--fg-0); max-width: 18ch; }
.sv-lvl .sv-facts { padding-top: 20px; border-top: 1px solid var(--line); }
.sv-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.sv-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 18px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); color: var(--fg-0); }
.sv-checks li:last-child { border-bottom: 1px solid var(--line); }
.sv-checks .qbox { margin-top: 2px; }
.sv-form { display: grid; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); }
.sv-form__t { color: var(--fg-0); font-size: 16px; }
/* Rollout Session: a compact full-width row, not another spread */
.sv-lvl--row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.sv-lvl--row .sv-lvl__id { position: static; display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 24px; }
.sv-lvl--row .sv-lvl__tag { flex-basis: 100%; }
.sv-lvl--row .sv-lvl__lead { flex-basis: 100%; max-width: 64ch; margin: 0; }
.sv-lvl--row .sv-lvl__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(32px, 6vw, 96px); align-items: start; }
.sv-lvl--row .sv-list { align-self: start; }

/* ---------- Services 3: First Quarter, under its sign ---------- */
.sv-fq__head { display: grid; grid-template-columns: auto 1fr; gap: 24px clamp(40px, 7vw, 112px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.sv-fq__head .sv-pu { margin-bottom: 18px; }
/* echo steps are whole pixels (never em), so every layer lands on the pixel grid and stays crisp */
.sv-fq__sign { --es: 2px; margin: 14px 0 12px; font: 400 77px/1 var(--pixel); letter-spacing: .01em; white-space: nowrap; color: var(--fg-0); }
.sv-cmp { width: 100%; border-collapse: collapse; font-size: 16px; }
.sv-cmp th, .sv-cmp td { text-align: left; vertical-align: top; padding: 18px 28px 18px 0; border-top: 1px solid color-mix(in srgb, var(--fg-0) 14%, transparent); }
.sv-cmp thead th { border-top: 0; padding-bottom: 28px; vertical-align: bottom; }
.sv-cmp tbody tr:last-child > * { border-bottom: 1px solid color-mix(in srgb, var(--fg-0) 14%, transparent); }
.sv-cmp tbody th { width: 22%; font: 600 15px/1.45 var(--sans); color: var(--fg-0); }
.sv-cmp td { width: 39%; color: var(--fg-1); }
.sv-cmp__plan { display: block; font: 400 44px/1 var(--pixel); color: var(--fg-0); }
.sv-cmp__price { display: block; margin-top: 12px; font: 400 14px var(--mono); color: var(--fg-1); }
.sv-cmp__price b { color: var(--accent); font-weight: 500; }
[data-theme="paper"] .sv-cmp__price b { color: var(--accent-2); }
.sv-cmp__for { display: block; margin-top: 10px; font: 400 15.5px/1.5 var(--sans); color: var(--fg-1); max-width: 36ch; }
.sv-fq__foot { display: flex; flex-wrap: wrap; gap: 22px 40px; align-items: center; justify-content: space-between; margin-top: 40px; }
.sv-fq__foot p { max-width: 62ch; color: var(--fg-1); font-size: 15.5px; }
/* Small text on the slate band: fg-2 drops under 4.5:1 in some themes, so it steps up to fg-1 */
.band--slate .label { color: var(--fg-1); }

/* ---------- Services 4: Build ---------- */
.sv-build { padding: clamp(96px, 11vw, 160px) 0; }
.sv-build .sv-pu { margin-bottom: 18px; }
.sv-build__h { margin-top: 18px; font: 400 55px/1.04 var(--pixel); letter-spacing: -.01em; max-width: 22ch; }
.sv-build__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(40px, 6vw, 96px); margin-top: clamp(40px, 5vw, 64px); align-items: start; }
.sv-build__copy { display: grid; gap: 22px; justify-items: start; }
.sv-build__copy .pg-hero__cta { margin-top: 6px; }
.sv-agencies { margin-top: clamp(56px, 6vw, 80px); color: var(--fg-2); font-size: 15.5px; max-width: 78ch; }
.sv-agencies .link { white-space: nowrap; display: inline-block; }

/* ---------- Services 5: questions in the open ---------- */
.sv-faq__head { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: baseline; justify-content: space-between; margin-bottom: clamp(36px, 4vw, 56px); }
.sv-qa { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 80px); }
.sv-qa div { display: grid; gap: 12px; align-content: start; padding: 28px 0 30px; border-top: 1px solid color-mix(in srgb, var(--fg-0) 14%, transparent); }
.sv-qa dt { font: 400 22px/1.3 var(--pixel); color: var(--fg-0); }
.sv-qa dd { margin: 0; color: var(--fg-1); font-size: 16.5px; max-width: 56ch; }

/* ---------- Close: the booking call, by an arcade cabinet standing on the footer's rule ---------- */
.pg-close { position: relative; overflow: hidden; padding: clamp(104px, 12vw, 176px) 0 clamp(120px, 12vw, 176px); }
.pg-close__in { position: relative; z-index: 1; display: grid; gap: 26px; justify-items: start; }
.pg-close__sign { --es: 1px; margin-bottom: -4px; font: 400 22px/1 var(--pixel); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-0); }
.pg-close__h { font: 400 77px/1.02 var(--pixel); letter-spacing: -.01em; max-width: 20ch; }
.pg-close .body-l { max-width: 56ch; }
.pg-close__cta { justify-self: stretch; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; margin-top: 4px; }
.pg-close__fine { color: var(--fg-2); font-size: 15.5px; }
/* the art stands on the footer's rule: a player at a cabinet (services, 4 frames), and on approach the
   pong cabinet from cabinet-row.png (its middle cabinet, x 58 to 110), idle and waiting for a player */
.pg-close__art { --s: 3; position: absolute; right: clamp(16px, 8vw, 150px); bottom: 0; pointer-events: none; image-rendering: pixelated; background-repeat: no-repeat; }
.pg-close__art--player { bottom: calc(-8px * var(--s)); width: calc(64px * var(--s)); height: calc(80px * var(--s)); background-image: url(/assets/px/player-at-cabinet.png); background-size: calc(256px * var(--s)) calc(80px * var(--s)); animation: pg-play 1.2s steps(4, end) infinite; }
@keyframes pg-play { to { background-position: calc(-256px * var(--s)) 0; } }
.pg-close__art--cab { --s: 2; width: calc(53px * var(--s)); height: calc(88px * var(--s)); background-image: url(/assets/px/cabinet-row.png); background-size: calc(169px * var(--s)) calc(88px * var(--s)); background-position: calc(-58px * var(--s)) 0; }

/* ---------- Approach 1: the two halves, on a two-sided court ---------- */
.ap-halves { padding-top: clamp(16px, 2vw, 32px); }
.ap-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(40px, 6vw, 96px); align-items: start; margin-bottom: clamp(56px, 7vw, 96px); }
.ap-intro__h { grid-column: 1 / -1; font: 400 55px/1.08 var(--pixel); letter-spacing: -.01em; max-width: 22ch; margin-bottom: 8px; }
.ap-court { position: relative; background: color-mix(in srgb, var(--bg-0) 62%, #000); padding: clamp(72px, 8vw, 120px) 0; }
[data-theme="paper"] .ap-court { background: var(--bg-2); }
.ap-court__in { display: grid; grid-template-columns: 1fr 1fr; }
.ap-half { display: grid; gap: 20px; align-content: start; }
.ap-half:first-child { padding-right: clamp(40px, 6vw, 104px); }
.ap-half:last-child { padding-left: clamp(40px, 6vw, 104px); border-left: 1px solid var(--line-2); }
.ap-half h3 { font: 400 38.5px/1.1 var(--pixel); }
.ap-half > p:not([class]) { font-size: 17.5px; color: var(--fg-1); max-width: 44ch; }
.ap-half__note { margin-top: 10px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--fg-0) 12%, transparent); font-size: 15px; color: var(--fg-2); max-width: 50ch; }
.ap-half__note .link { display: table; margin-top: 14px; }

/* ---------- Approach 2: the method, down a rail ---------- */
.ap-method { padding: clamp(96px, 11vw, 156px) 0 clamp(72px, 8vw, 112px); }
.ap-steps { list-style: none; margin: 0; padding: 0 0 0 52px; position: relative; }
.ap-steps::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 60px; width: 2px; background: var(--line-2); }
.ap-step { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 20px clamp(28px, 5vw, 80px); padding-bottom: clamp(56px, 6vw, 88px); }
.ap-step::before { content: ""; position: absolute; left: -52px; top: 12px; width: 16px; height: 20px; background: var(--accent); transition: background-color .3s steps(2); }
.ap-step__k { display: grid; gap: 12px; align-content: start; }
.ap-step__n { font: 400 66px/1 var(--pixel); color: var(--accent); transition: color .3s steps(2); }
.ap-step__k h3 { font: 400 33px/1.1 var(--pixel); }
.ap-step__when { font: 400 13.5px/1.4 var(--mono); color: var(--fg-2); }
.ap-step__b { display: grid; gap: 18px; align-content: start; color: var(--fg-1); font-size: 17px; max-width: 66ch; }
.js .ap-step:not(.is-in)::before { background: var(--line-2); }
.js .ap-step:not(.is-in) .ap-step__n { color: var(--fg-2); }

/* ---------- Approach 3: principles, under a wait sign ---------- */
.ap-princ__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 48px clamp(40px, 7vw, 112px); align-items: start; }
.ap-sign { display: grid; gap: 4px; justify-items: start; align-self: start; position: sticky; top: 140px; margin-top: 44px; font: 400 99px/1 var(--pixel); text-transform: uppercase; letter-spacing: .02em; user-select: none; }
.ap-sign__go { color: color-mix(in srgb, var(--fg-0) 12%, transparent); }
.ap-sign__wait { --es: 2px; color: var(--fg-0); padding-bottom: .14em; }
.ap-rows { list-style: none; margin: 36px 0 0; padding: 0; }
.ap-rows li { display: grid; gap: 10px; padding: 28px 0; border-top: 1px solid color-mix(in srgb, var(--fg-0) 14%, transparent); }
.ap-rows li:last-child { padding-bottom: 0; }
.ap-rows h3 { font: 400 27.5px/1.2 var(--pixel); }
.ap-rows p { color: var(--fg-1); font-size: 16.5px; max-width: 58ch; }
.ap-rows .ap-rows__in { color: var(--fg-2); font-size: 15px; }
.ap-rows__in b { color: var(--fg-1); font-weight: 600; }

/* ---------- Approach 4: six open questions ---------- */
.ap-pick { padding: clamp(96px, 11vw, 156px) 0; }
.ap-pick__lede { display: grid; gap: 14px; }
.ap-pick__fine { color: var(--fg-2); font-size: 15.5px; }
.ap-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(32px, 5vw, 80px); }
.ap-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 8px 20px; align-content: start; padding: 28px 0 30px; border-top: 1px solid var(--line); }
.ap-checks li::before { content: "?"; grid-row: span 2; font: 400 22px/1.3 var(--pixel); color: var(--accent); }
.ap-checks h3 { font: 400 22px/1.3 var(--pixel); }
.ap-checks p { color: var(--fg-1); font-size: 16px; max-width: 50ch; }

/* ---------- Approach 5: security basics ---------- */
.ap-secure__grid { display: grid; grid-template-columns: 5fr 7fr; gap: 40px clamp(40px, 7vw, 112px); align-items: start; }
.ap-secure__head { display: grid; gap: 18px; align-content: start; position: sticky; top: 104px; }
.ap-secure__head .label { margin-bottom: -4px; }
.ap-rules { list-style: none; margin: 0; padding: 0; }
.ap-rules li { display: grid; gap: 8px; padding: 26px 0; border-top: 1px solid color-mix(in srgb, var(--fg-0) 16%, transparent); }
.ap-rules li:last-child { border-bottom: 1px solid color-mix(in srgb, var(--fg-0) 16%, transparent); }
.ap-rules h3 { font: 400 22px/1.3 var(--pixel); }
.ap-rules p { color: var(--fg-1); font-size: 16px; max-width: 56ch; }
.ap-data { margin-top: 36px; padding-left: 18px; border-left: 3px solid var(--info); color: var(--fg-1); font-size: 16px; max-width: 64ch; }
.ap-data strong { color: var(--fg-0); font-weight: 600; }

/* ---------- Responsive ---------- */
@media (max-width: 1239px) {
  .pg-hero__h, .pg-win .pg-hero__h { font-size: 66px; }
  .pg-close__h { font-size: 66px; }
  .ap-sign { font-size: 88px; }
}
/* laptops and tablets: the screen steps down to a whole 2x so the copy keeps its column */
@media (max-width: 1140px) {
  .pxs--sv, .pxs--ap, .pxs--sv .pxs__cv, .pxs--ap .pxs__cv { width: 320px; }
}
@media (max-width: 920px) {
  .sv-hero__top { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ap-hero__grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "c" "p"; gap: 28px; }
  .ap-hero__copy { padding-top: 0; }
  .pxs.pxs--sv, .pxs.pxs--ap { justify-items: start; }
  .pxs--sv, .pxs--ap, .pxs--sv .pxs__cv, .pxs--ap .pxs__cv { width: 480px; }
}
@media (max-width: 1000px) {
  .sv-head, .sv-fq__head, .sv-build__grid, .ap-intro, .ap-princ__grid, .ap-secure__grid { grid-template-columns: minmax(0, 1fr); }
  .ap-secure__head { position: static; }
  .sv-lvl { grid-template-columns: minmax(0, 1fr); }
  .sv-lvl__id { position: static; }
  .sv-lvl--row .sv-lvl__body { grid-template-columns: minmax(0, 1fr); }
  .sv-step__txt { padding-right: 16px; }
  .sv-step__name { font-size: 22px; }
  .ap-step { grid-template-columns: minmax(0, 1fr); }
  .ap-intro__h { font-size: 44px; }
  .ap-sign { position: static; margin-top: 0; grid-auto-flow: column; justify-content: start; gap: 40px; font-size: 77px; }
  .pg-close__art { --s: 2; }
}
@media (max-width: 760px) {
  .pg-hero__h, .pg-win .pg-hero__h { font-size: 44px; }
  .sv-hero__copy { gap: 20px; }
  .pg-win { padding: 30px 16px 26px; }
  /* the screen uses the window's full inner width, so it keeps a whole 2x scale on phones */
  .pxs.pxs--sv, .pxs.pxs--ap { margin-inline: -16px; width: auto; max-width: none; justify-items: center; }

  .sv-steps { grid-template-columns: minmax(0, 1fr); }
  .sv-step { flex-direction: row; align-items: flex-start; gap: 18px; padding: 22px 0; border-top: 1px solid color-mix(in srgb, var(--fg-0) 12%, transparent); }
  .sv-step__art { height: auto; flex: none; padding-top: 8px; }
  .sv-step__block { display: none; }
  .sv-step__pu { margin: 0; }
  .sv-step.is-live .sv-step__pu img { transform: translateY(-4px); animation-name: sv-hop-s, sv-bob-s; }
  .sv-step__txt { padding: 0; gap: 8px; }
  .sv-step__name { min-height: 0; }
  .sv-verdicts span { flex-basis: 100%; }

  .sv-lvl__name { font-size: 44px; }
  .sv-lvl__big { font-size: 27.5px; }
  .sv-facts div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .sv-fq__sign { font-size: 38.5px; --es: 1px; }
  .sv-build__h, .pg-close__h { font-size: 44px; }
  .ap-intro__h { font-size: 33px; }
  .sv-qa { grid-template-columns: minmax(0, 1fr); }
  .pg-go__t { font-size: 22px; }

  .sv-cmp, .sv-cmp thead, .sv-cmp tbody { display: block; }
  .sv-cmp tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
  .sv-cmp thead th:first-child { display: none; }
  .sv-cmp thead th { padding: 0 0 20px; }
  .sv-cmp__plan { font-size: 33px; }
  .sv-cmp__for { font-size: 14.5px; }
  .sv-cmp tbody th { grid-column: 1 / -1; width: auto; padding: 18px 0 6px; }
  .sv-cmp td[colspan] { grid-column: 1 / -1; }
  .sv-cmp tbody tr > * { border: 0 !important; }
  .sv-cmp tbody tr { border-top: 1px solid color-mix(in srgb, var(--fg-0) 14%, transparent); }
  .sv-cmp tbody tr:last-child { border-bottom: 1px solid color-mix(in srgb, var(--fg-0) 14%, transparent); }
  .sv-cmp td { width: auto; padding: 4px 0 18px; font-size: 15px; }
  .sv-cmp td::before { content: attr(data-plan); display: block; margin-bottom: 4px; font: 400 11px/1.4 var(--pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--fg-1); }

  .pg-close { padding-bottom: 0; display: grid; }
  .pg-close__art { position: relative; right: auto; bottom: auto; justify-self: end; margin: 40px 24px 0 0; }
  .pg-close__art--player { margin-bottom: calc(-8px * var(--s)); }

  .ap-court__in { grid-template-columns: minmax(0, 1fr); }
  .ap-half:first-child { padding: 0 0 56px; }
  .ap-half:last-child { padding: 56px 0 0; border-left: 0; border-top: 1px solid var(--line-2); }
  .ap-half h3 { font-size: 33px; }
  .ap-steps { padding-left: 36px; }
  .ap-steps::before { left: 5px; }
  .ap-step::before { left: -36px; width: 12px; height: 16px; top: 8px; }
  .ap-step__n { font-size: 44px; }
  .ap-step__k h3 { font-size: 27.5px; }
  .ap-sign { font-size: 66px; gap: 28px; }
  .ap-rows h3 { font-size: 22px; }
  .ap-checks { grid-template-columns: minmax(0, 1fr); }
}
@keyframes sv-hop-s {
  0% { transform: translateY(0); } 12% { transform: translateY(-6px); } 25% { transform: translateY(-10px); }
  37% { transform: translateY(-12px); } 50% { transform: translateY(-14px); } 62% { transform: translateY(-12px); }
  75% { transform: translateY(-8px); } 87% { transform: translateY(-2px); } 100% { transform: translateY(-4px); }
}
@keyframes sv-bob-s { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(-8px); } }
/* phones: the booking button spans its column in one line, like the homepage hero */
@media (max-width: 480px) {
  main .btn--arcade { font-size: 16.5px; padding-inline: 14px; white-space: normal; text-align: center; justify-content: center; line-height: 1.2; }
  .pg-win .btn--arcade, .pg-go .btn--arcade, .pg-close .btn--arcade, .sv-build .btn--arcade { width: 100%; }
  .pg-win .win__nm { display: none; }
}
@media (max-width: 380px) {
  .pg-hero__h, .pg-win .pg-hero__h { font-size: 38.5px; }
  .pg-win { padding-inline: 12px; }
  .pxs.pxs--sv, .pxs.pxs--ap { margin-inline: -12px; }
  main .btn--arcade { padding-inline: 10px; }
  .sv-fq__sign { font-size: 33px; }
}
/* reduced motion: still frames. The live power-up hovers without hopping; nothing loops */
@media (prefers-reduced-motion: reduce) {
  .pg-win > .win__t::before, .pg-close__art--player { animation: none; }
  .sv-step.is-live .sv-step__pu img, .js .sv-pu[data-reveal].is-in { animation: none; }
  .sv-step__pu img { transition: none; }
}