/* Civic Mosaic home page: the world, the stage and the reading sheets. Shared rules are in base.css; colours and fonts
   come from tokens.css (generated from the app's theme). */

:root { --device-w: 344px; --device-h: 718px; --s: 1; }

/* Country: the radios in the hero choose which bank the page shows. Works without JavaScript. */
body:has(#country-uk:checked) [data-country='us'],
body:not(:has(#country-uk:checked)) [data-country='uk'] { display: none !important; }

/* ---------- The world ---------- */
/* Navy in the dark theme (the accepted world), cool light neutrals in the light one (tokens.css, --world). */
.world { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--world); }
.world-glow {
  position: absolute; inset: 0;
  background:
    radial-gradient(34% 42% at 50% 44%, rgb(79 70 229 / calc(0.42 * var(--glow-a))), rgb(79 70 229 / 0) 72%),
    radial-gradient(90% 60% at 50% 108%, var(--world-deep), transparent 70%),
    linear-gradient(var(--world-far), var(--world) 55%);
}
.world-floor {
  position: absolute; left: 50%; bottom: -2vh;
  width: max(92vw, 600px); aspect-ratio: 336 / 132;
  transform: translateX(-50%) perspective(900px) rotateX(58deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: radial-gradient(70% 90% at 50% 70%, #000 45%, transparent 100%);
  mask-image: radial-gradient(70% 90% at 50% 70%, #000 45%, transparent 100%);
}
.floor { display: block; width: 100%; height: 100%; }
.floor .fg { fill: var(--floor-ground); }
.floor .fs { fill: var(--floor-slab); }
.floor .f0 { fill: var(--floor-0); } .floor .f1 { fill: var(--floor-1); } .floor .f2 { fill: var(--floor-2); } .floor .f3 { fill: var(--floor-3); }
.floor .g0 { stroke: var(--floor-g0); } .floor .g1 { stroke: var(--floor-g1); } .floor .g2 { stroke: var(--floor-g2); } .floor .g3 { stroke: var(--floor-g3); }
.floor [data-tile].is-hit rect:first-child { fill: var(--hit, var(--t1)); }
.floor [data-tile].is-hit .glyph { stroke: #F6F7FF; }
.world canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Phones (world.js sets --over): the canvas reaches a little past the screen's top and bottom, hidden while the world is
   fixed. While the device moves with the page, the world is placed in the page instead, so the browser scrolls it with
   the text, and the canvas's extra height covers the edges until the next frame is drawn. */
html.webgl .world canvas { top: calc(-1 * var(--over, 0px)); height: calc(100% + 2 * var(--over, 0px)); background: var(--world); }
html.webgl .world.is-anchored { position: absolute; inset: 0 0 auto; overflow: visible; overflow-x: clip; }
html.webgl .world-floor { opacity: 0; transition: opacity 700ms var(--ease-out); }
/* The still version's hero (Stage C: reduced motion, no WebGL), composed as the WebGL hero is: on wide screens the map
   lies near and large under and beside the device, and leaves with the hero (home.js sets --lift to the scroll, so it
   moves with the page, not on its own); the device stands in an indigo glow. Without JavaScript the map stays low. */
@media (min-width: 1024px) {
  html.js:not(.webgl) .world-floor { width: max(150vw, 1100px); bottom: -4vh; transform: translateX(-46%) perspective(800px) rotateX(52deg); translate: 0 calc(var(--lift, 0) * -1px); }
}
html:not(.webgl) .device-sticky::before {
  content: ''; position: absolute; inset: -14% -55%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgb(79 70 229 / calc(0.45 * var(--glow-a))), rgb(79 70 229 / 0));
}
/* With WebGL the glow is drawn inside the canvas, between the map and the device (world.js). */
html.webgl .world-glow { opacity: 0; transition: opacity 700ms var(--ease-out); }
.world-labels { position: absolute; inset: 0; }
/* Depth: the world recedes behind a reading sheet that fills most of the screen (home.js sets --recede, 0 to 1). */
.world::after { content: ''; position: absolute; inset: 0; background: var(--world-far); opacity: calc(var(--recede, 0) * 0.5); pointer-events: none; }
.tile-label {
  position: absolute; left: 0; top: 0;
  padding: 6px 12px; border-radius: 999px;
  background: var(--on-world); color: var(--world);
  font: 800 0.875rem/1.2 'Nunito', sans-serif; white-space: nowrap;
  box-shadow: 0 10px 24px -8px var(--drop-label);
}



/* ---------- Stage: hero, device and the daily session ---------- */
.stage {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: [left] minmax(0, 1.3fr) [dev] var(--device-w) [right] minmax(0, 0.85fr);
  column-gap: clamp(32px, 4.5vw, 88px);
  max-width: 1440px; margin-inline: auto; padding-inline: var(--margin);
}
.hero { grid-column: 1 / -1; grid-row: 1; display: grid; grid-template-columns: subgrid; min-height: 100svh; padding-block: 104px 48px; }
.hero-copy { grid-column: left; align-self: start; margin-top: clamp(24px, 9vh, 120px); display: grid; gap: 24px; max-width: 34rem; }
.hero h1 { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.03em; }
.lead { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); color: var(--on-world-muted); max-width: 32rem; }
.hero-copy .actions { margin-top: 8px; }
.hero-side { grid-column: right; align-self: start; margin-top: clamp(24px, 16vh, 200px); display: grid; gap: 22px; font-size: 1rem; color: var(--on-world-muted); }
.country { border: 0; padding: 0; min-width: 0; }
.country legend { padding: 0; margin-bottom: 10px; font-weight: 700; color: var(--on-world); }
.country-options { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 4px; border-radius: 16px; background: var(--seg-track); box-shadow: inset 0 0 0 1px var(--world-edge); }
.country input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.country label { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border-radius: 12px; font-weight: 700; color: var(--on-world); cursor: pointer; transition: background-color 180ms ease, color 180ms ease; }
.country input:checked + label { background: var(--world-action); color: var(--on-world-action); }
.country input:focus-visible + label { outline: 2px solid var(--world-action); outline-offset: 3px; }
.map-note { display: grid; gap: 10px; max-width: 22rem; }
.map-note strong { color: var(--on-world); font-weight: 700; }
.map-change:empty { display: none; }
.map-change { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--world-sink) 72%, transparent); box-shadow: inset 0 0 0 1px var(--world-edge); color: var(--on-world); }
.map-change .mt { width: 16px; flex: none; margin-top: 4px; }
.drag-hint { display: none; font-size: 0.9375rem; }
@media (hover: hover) and (pointer: fine) { html.webgl .drag-hint { display: block; } }

.sample { grid-column: dev; grid-row: 1 / span 2; padding-top: max(16px, calc((100svh - var(--device-h)) / 2)); }
.device-sticky { position: sticky; top: max(16px, calc((100svh - var(--device-h)) / 2)); width: var(--device-w); height: var(--device-h); margin-inline: auto; }
.device-handle { position: absolute; inset: -28px; border-radius: 72px; pointer-events: none; }
html.webgl .device-handle { pointer-events: auto; cursor: grab; touch-action: pan-y; }
html.webgl .device-handle.is-dragging { cursor: grabbing; }
.device {
  position: absolute; inset: 0;
  transform: scale(var(--s)); transform-origin: var(--s-origin, 50% 50%);
  border-radius: 52px; padding: 11px 12px;
  /* Copper aluminium, the prototype's own finish (as world.js): the drawn device for no WebGL, reduced motion and no
     JavaScript. The stops follow the WebGL frame's lit, mid and shaded tones. */
  background: linear-gradient(150deg, #E3B193 0%, #BC7C56 16%, #84492C 46%, #A8663F 74%, #6B3820 100%);
  box-shadow: inset 0 0 0 1px rgb(255 226 206 / 0.55), inset 0 -3px 8px rgb(0 0 0 / 0.3), 0 60px 90px -40px var(--drop-device);
  transition: transform 500ms var(--ease-out);
}
.device::before { content: ''; position: absolute; inset: 3px; border-radius: 49px; background: #030409; }
html.webgl .device { background: none; box-shadow: none; transform: none; transition: none; pointer-events: none; }
html.webgl .screen { pointer-events: auto; }
html.webgl .device::before { display: none; }

/* The screen: the app's own look, in the visitor's light or dark scheme. */
.screen {
  position: absolute; left: 12px; top: 11px; width: 320px; height: 696px;
  border-radius: 40px; overflow: hidden; transform-origin: 0 0;
  background: var(--ground); color: var(--ink);
  font-size: 15px; line-height: 1.45;
}
/* With the WebGL world, the screen is a fixed layer that world.js maps onto the 3D device each frame, in the same frame
   as the canvas, so screen and bezel cannot drift apart while the page scrolls. While the world is placed in the page
   (phones, see .world.is-anchored), the screen is placed in the page too, mapped from the device box. */
html.webgl .screen { position: fixed; left: 0; top: 0; backface-visibility: hidden; }
html.webgl .screen.is-anchored { position: absolute; }
.screen :focus-visible { outline-color: var(--indigo); }
/* The Dynamic Island of the accepted device, measured on Apple's product image (about 22% of the phone's width). Drawn on
   the screen itself, so it moves exactly with it. The alternative (mosaic) has an uninterrupted display: no island, and
   the screens keep their layout. */
.screen::before { content: ''; position: absolute; z-index: 2; left: calc(50% - 38px); top: 12px; width: 76px; height: 27px; border-radius: 14px; background: #000; pointer-events: none; }
html[data-device='generic'] .screen::before, html[data-device='mosaic'] .screen::before { display: none; }
.view { position: absolute; inset: 0; display: none; flex-direction: column; gap: 10px; padding: var(--view-top, 46px) 16px 15px; }
html[data-device='generic'] .view { --view-top: 24px; }
.screen[data-active='sample'] .view--sample { display: flex; }
html.js .view { display: flex; opacity: 0; visibility: hidden; transition: opacity 280ms ease, visibility 0s linear 280ms; }
html.js .view.is-active { opacity: 1; visibility: visible; transition-delay: 0s; }
/* The sample is on screen from the first paint, before home.js has run. */
html.js .screen[data-active='sample'] .view--sample { opacity: 1; visibility: visible; transition-delay: 0s; }

.app-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.app-title { font-weight: 800; font-size: 1.0625rem; }
.view--sample[data-country] .chip .sw { background: var(--c); }

/* The illustrative app screens. */
.app-h { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.app-studying { font-size: 0.8125rem; color: var(--muted); display: flex; gap: 6px; align-items: baseline; }
.app-studying b { color: var(--ink); }
.app-link { color: var(--indigo); font-weight: 700; margin-left: auto; }
.app-link--center { margin: 2px auto 0; font-size: 0.875rem; }
.harbour-card { display: grid; gap: 9px; padding: 14px; border-radius: 20px; background: var(--harbour); color: var(--on-harbour); }
.hc-row { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--on-harbour-muted); font-weight: 600; }
.hc-value { font-size: 0.875rem; color: var(--on-harbour-muted); }
.hc-value b { font-size: 1.875rem; color: var(--on-harbour); letter-spacing: -0.02em; margin-right: 4px; }
.mini-map { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 2px; }
.mini-map .mt { border-width: 1px; border-radius: 2px; }
.legend--app { font-size: 0.6875rem; color: var(--on-harbour-muted); gap: 3px 10px; }
.legend--app .mt { width: 10px; border-width: 1px; }
.hc-session { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--harbour-rule); }
.hc-title { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.8125rem; color: var(--on-harbour-muted); }
.hc-title b { font-size: 1.0625rem; color: var(--on-harbour); }
.hc-sub { font-size: 0.8125rem; color: var(--on-harbour-muted); }
.app-btn { display: flex; align-items: center; justify-content: center; min-height: 40px; border-radius: 12px; font-weight: 800; font-size: 0.875rem; }
.app-btn--harbour { background: var(--harbour-action); color: var(--on-harbour-action); }
.app-btn--quiet { border: 1.5px solid var(--harbour-rule); color: var(--on-harbour); }
.app-btn--primary { margin-top: auto; background: var(--indigo); color: var(--on-indigo); min-height: 46px; }
.rhythm { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px; border-radius: 16px; background: var(--surface); font-size: 0.75rem; color: var(--muted); }
.rhythm p { display: grid; }
.rhythm b { color: var(--ink); font-size: 0.875rem; }
.days { display: flex; gap: 5px; }
.days i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--line); }
.days i.on { background: var(--indigo); border-color: var(--indigo); }
.quiz-head { display: flex; align-items: center; justify-content: space-between; font-weight: 800; }
.x { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); border: 1px solid var(--line); position: relative; }
.x::before, .x::after { content: ''; position: absolute; left: 8px; right: 8px; top: 13px; height: 1.5px; background: var(--ink); rotate: 45deg; }
.x::after { rotate: -45deg; }
.qh-count { font-size: 0.8125rem; color: var(--muted); }
.qbar { display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.qbar i { display: block; height: 100%; background: var(--indigo); }
.q-of { font-size: 0.75rem; color: var(--muted); font-weight: 600; }
.view--question .q-text, .view--explain .q-text { float: none; margin: 0; }
.feedback { display: grid; gap: 5px; padding: 12px; border-radius: 14px; background: var(--success-bg); font-size: 0.8125rem; }
.fb-title { font-weight: 800; color: var(--success); font-size: 0.875rem; }
.fb-src { color: var(--muted); font-size: 0.75rem; }
.fb-change { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.fb-change .mt { width: 14px; flex: none; }
.done-mark { display: inline-flex; align-items: center; gap: 6px; }

/* Daily session steps. */
.daily { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: subgrid; }
.daily-intro { grid-column: left; display: grid; gap: 14px; align-content: center; min-height: 60svh; max-width: 30rem; }
.daily-intro h2, .method-panel h2 { font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem); line-height: 1.04; letter-spacing: -0.025em; }
.daily-intro p { color: var(--on-world-text); }
.steps { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; list-style: none; padding: 0; }
.step { display: flex; align-items: center; min-height: 88svh; }
.step:nth-child(1) { grid-column: left; grid-row: 1; }
.step:nth-child(2) { grid-column: right; grid-row: 2; }
.step:nth-child(3) { grid-column: left; grid-row: 3; }
.step:nth-child(4) { grid-column: right; grid-row: 4; }
/* The cards stand at the outer edges, so the device has the other half of the screen to itself. */
.step:nth-child(even) .step-card { margin-left: auto; }
.step-card { display: grid; gap: 12px; max-width: 28rem; transition: opacity 260ms ease; }
.step-card h3 { font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; letter-spacing: -0.02em; }
.step-card p { color: var(--on-world-text); }
/* The world shows behind the daily session's text on wide screens, as it does behind the map's steps. */
.daily-intro > *, .step-card > * { text-shadow: var(--world-halo); }
html.js .step .step-card { opacity: 0.4; }
html.js .step.is-active .step-card { opacity: 1; }
/* With the WebGL world: room after the last step for the device to turn to its back and be put down. */
html.webgl .daily { padding-bottom: 70svh; }

/* ---------- Reading sheets ---------- */
.sheet { position: relative; z-index: 1; padding-inline: var(--margin); margin-block: clamp(80px, 14vh, 180px); color: var(--ink); }
.sheet-inner {
  max-width: 1200px; margin-inline: auto; padding: clamp(28px, 5.5vw, 80px);
  border-radius: 28px; background: var(--surface);
  box-shadow: 0 50px 90px -50px var(--drop-sheet);
}
.sheet-inner--narrow { max-width: 920px; }
.sheet ::selection { background: var(--selected); color: var(--ink); }
.sheet :focus-visible { outline-color: var(--indigo); }
.sheet h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); line-height: 1.04; letter-spacing: -0.025em; }
.sheet-lede { margin-top: 16px; font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem); max-width: 40rem; }
.sheet a { color: var(--indigo); }
.cv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(40px, 5vw, 80px); margin-top: clamp(40px, 5vw, 64px); }
.cv { display: grid; gap: 16px; align-content: start; scroll-margin-top: 32px; }
.cv h3 { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem); letter-spacing: -0.015em; }
.cv-lede { font-size: 1.1875rem; }
.notice { padding: 14px 16px; border-radius: 14px; background: var(--ground); font-size: 1rem; }
/* Availability: a filled mark for the tests launching first, an outline for the planned ones. */
.cv-status { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 700; color: var(--indigo); }
.cv-status .status-dot { background: var(--indigo); }
.cv-status--planned { color: var(--muted); }
.status-ring { width: 9px; height: 9px; border-radius: 3px; border: 1.5px solid currentColor; flex: none; }
/* Planned countries: lighter cards below the two launch tests, side by side where they fit. */
.cv-grid--planned { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(20px, 3vw, 32px); margin-top: clamp(48px, 6vw, 72px); }
.cv--planned { gap: 12px; padding: clamp(20px, 3vw, 28px); border-radius: 20px; border: 1.5px dashed var(--line); font-size: 1rem; }
.cv--planned h3 { font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem); }
.topics--plain { gap: 8px; margin-top: 0; }
.topics--plain .tp-name { font-weight: 600; }
.cv-test { font-size: 1rem; color: var(--muted); }
.topics { list-style: none; padding: 0; display: grid; gap: 14px; margin-top: 8px; }
.topics li { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; }
.tp-name { display: inline-flex; align-items: baseline; gap: 10px; font-weight: 700; }
.tp-name .sw { background: var(--c); transform: translateY(1px); }
.tp-count { font-weight: 800; font-variant-numeric: tabular-nums; }
.strip { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 3px; }
.strip i { width: 10px; height: 10px; border-radius: 2.5px; background: var(--c); }
.sp-heading { margin-top: 16px; font-size: 1.125rem; }
.specimen { display: grid; gap: 10px; padding: 20px; border-radius: 18px; background: var(--ground); }
.specimen h4 { font-size: 1.1875rem; line-height: 1.3; }
.sp-topic { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 700; color: var(--muted); }
.sp-options { padding-left: 1.6em; display: grid; gap: 2px; }
.reveal--sheet summary { justify-content: flex-start; min-height: 44px; }
.reveal--sheet .reveal-body { font-size: 1rem; background: var(--surface); }
.src-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: clamp(32px, 4vw, 64px); margin-top: 40px; }
.src-block { display: grid; gap: 16px; align-content: start; }
.src-block h3 { font-size: 1.375rem; }
.src-block dl { display: grid; gap: 14px; }
.src-block dt { font-weight: 800; font-size: 0.9375rem; }
.src-block dd { color: var(--ink); }
.sheet-inner--split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: clamp(32px, 5vw, 80px); align-items: start; }
.sheet-inner--split > div > p + p { margin-top: 16px; }
.free-list { list-style: none; padding: 0; display: grid; gap: 28px; }
.free-list li { display: grid; gap: 6px; padding-left: 22px; border-left: 0; position: relative; }
.free-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; border-radius: 3px; background: var(--indigo); }
.free-list h3 { font-size: 1.25rem; }
.faq-list { display: grid; margin-top: 32px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; padding: 14px 0; font-weight: 800; font-size: 1.1875rem; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 2.5px solid var(--indigo); border-bottom: 2.5px solid var(--indigo); rotate: 45deg; translate: 0 -3px; transition: rotate 200ms var(--ease-out); }
.faq-list details[open] summary::after { rotate: 225deg; translate: 0 3px; }
.faq-list details p { padding: 0 0 22px; max-width: 62ch; }
/* Links from the home page's sheets to the reading pages. */
.sheet-more, .cv-page { margin-top: 28px; font-weight: 700; }
.cv-page { margin-top: 4px; }

/* ---------- How the map grows ---------- */
.method {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: [text] minmax(0, 30rem) [gap] 1fr [panel] minmax(0, 25rem);
  column-gap: 32px;
  max-width: 1440px; margin-inline: auto; padding-inline: var(--margin);
}
.method-sticky { grid-column: panel; grid-row: 1; align-self: start; position: sticky; top: max(24px, calc((100svh - 560px) / 2)); }
.method-panel { display: grid; gap: 14px; }
.demo-label { font-size: 0.9375rem; color: var(--on-world-muted); }
/* The app's map: navy in both themes, as in the app. */
.method-card { display: grid; gap: 12px; padding: 18px; border-radius: 22px; background: var(--map-card); }
.mc-head { display: flex; justify-content: space-between; gap: 12px; font-size: 0.875rem; font-weight: 700; color: var(--on-harbour-muted); }
.mini-map--method { gap: 3px; }
.mini-map--method .mt { transition: background-color 260ms ease, border-color 260ms ease; }
.legend--method { font-size: 0.875rem; color: var(--on-harbour); gap: 6px 14px; }
.legend-n { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 1.6em; }
.legend-n:empty { display: none; }
.method-steps { grid-column: text; grid-row: 1; list-style: none; padding: 0; padding-block: 10svh 30svh; }
.mstep { min-height: 80svh; display: grid; align-content: center; gap: 12px; }
.mstep h3 { font-size: clamp(1.75rem, 1.2rem + 1.5vw, 2.5rem); line-height: 1.08; letter-spacing: -0.02em; }
.mstep p { color: var(--on-world-text); max-width: 30rem; }
.mstep > * { text-shadow: var(--world-halo); }

/* ---------- Closing and footer ---------- */
.closing { position: relative; z-index: 1; display: grid; place-items: center; min-height: 100svh; padding: 15vh var(--margin); text-align: center; }
.closing-inner { display: grid; gap: 22px; justify-items: center; max-width: 46rem; }
.closing h2 { font-size: clamp(2.75rem, 1.6rem + 4.5vw, 5.75rem); line-height: 1; letter-spacing: -0.035em; }
.closing .lead { color: var(--on-world); }
.closing h2, .closing .lead, .closing .status { text-shadow: var(--world-halo); }
/* With the WebGL world the closing mirrors the hero: the text in the left column, the device standing on the right,
   both above the footer at the end of the page. */
html.webgl .closing { place-items: end start; text-align: left; max-width: 1440px; margin-inline: auto; padding-bottom: 12vh; }
html.webgl .closing-inner { justify-items: start; max-width: 36rem; }

/* ---------- Phone and tablet ---------- */
@media (max-width: 1023px) {
  .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 104svh auto; }
  .hero { grid-row: 1; min-height: 0; padding-block: 128px 32px; gap: 28px; }
  .hero-copy, .hero-side { grid-column: 1; }
  .hero-side { align-self: start; padding-bottom: 0; }
  /* The drag handle reaches past the device and the device past a narrow column: neither may widen the page. */
  .sample { grid-column: 1; grid-row: 2 / span 2; padding-top: 0; overflow-x: clip; }
  .device-sticky { top: 12px; margin-inline: calc((100% - var(--device-w)) / 2); }
  .daily { grid-column: 1; grid-row: 3; position: relative; z-index: 2; }
  .daily-intro, .step-card, .step:nth-child(odd) .step-card { margin: 0; max-width: none; text-align: left; padding: 18px 20px; border-radius: 20px; background: color-mix(in srgb, var(--world-raise) 96%, transparent); box-shadow: 0 0 0 1px var(--world-edge), 0 18px 36px -24px var(--card-drop); }
  .daily-intro { min-height: 0; align-self: end; margin-top: 70svh; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .step, .step:nth-child(n) { grid-column: 1; min-height: 100svh; align-items: flex-end; padding-bottom: 16px; }
  .step-card { position: sticky; bottom: 16px; width: 100%; }
  .step-card h3 { font-size: 1.5rem; }
  .daily-intro > *, .step-card > * { text-shadow: none; }
  html.js .step .step-card { opacity: 0; }
  html.js .step.is-active .step-card { opacity: 1; }
  .method { grid-template-columns: minmax(0, 1fr); }
  /* Solid on phones: the steps scroll under the panel, and no text may show through it. */
  .method-sticky {
    grid-column: 1; top: 0; z-index: 2;
    margin-inline: calc(-1 * var(--margin)); padding: 8px var(--margin) 14px;
    background: var(--world); box-shadow: 0 14px 24px -14px var(--drop-device);
  }
  .method-steps { grid-column: 1; grid-row: 2; padding-block: 0 20svh; }
  .mstep { min-height: 70svh; align-content: end; }
  .mstep > * { text-shadow: none; }
  .mstep { padding: 0; }
  .mstep h3, .mstep p { background: color-mix(in srgb, var(--world-raise) 94%, transparent); }
  .mstep h3 { padding: 18px 20px 4px; border-radius: 20px 20px 0 0; font-size: 1.5rem; }
  .mstep p { padding: 0 20px 18px; border-radius: 0 0 20px 20px; }
  .mstep { gap: 0; }
  .method-card { padding: 14px; }
  .mini-map--method { gap: 2px; }
  /* Shorter on phones and tablets: each test's page holds its sample questions (the card links to it) and the method
     page the sources' full detail; the home keeps the counts, versions, dates and rules. */
  .cv .sp-heading, .cv .specimen, .src-detail { display: none; }
  /* The device stands at the top of the closing (world.js), the text below it; then both go up with the page. */
  html.webgl .closing { place-items: start; padding-block: calc(47svh + 48px) 24px; }
}
@media (max-width: 420px) {
  .hero h1 { font-size: 2.375rem; }
}

/* ---------- Reduced motion: gentler, not none ---------- */
@media (prefers-reduced-motion: reduce) {
  .device { transition: none; }
  html.js .view { transition-duration: 150ms; }
  .step-card { transition-duration: 150ms; }
}