/*
  Public landing page for alert.kuub.win.

  Deliberately separate from the dashboard stylesheet: this page is read once,
  by a stranger, on a phone, often on a bad connection - so it carries no
  framework, no CDN and no build step, and every colour here is a token that
  also exists in the app so the two never drift apart.
*/

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-variable-cyrillic.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  src: url('/fonts/Manrope-variable-latin.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2212;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-400-cyrillic.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/JetBrainsMono-400-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F;
}

:root {
  --bg: #0a0b0c;
  --surface: #131417;
  --surface-2: #191b1f;
  --line: #282a30;
  --text: #eef0f0;
  --text-dim: #a4a7ad;
  --muted: #8b8f98;
  --accent: #ff6a2b;
  /* Ink for text/icons sitting ON the amber fill. White on #ff6a2b is only
     2.86:1 - below AA - so the primary CTA carries a deep warm near-black
     instead, which keeps the brand fill exactly and reads at 6.6:1. */
  --on-accent: #1a0d05;
  --accent-soft: #3a2314;
  --green: #5cb176;
  --info: #6b7790;
  --yellow: #f0c000;
  --orange: #f0820e;
  --red: #ff4438;
  --radius: 14px;
  --radius-sm: 10px;
  --gutter: 16px;
  --maxw: 1120px;
  --shadow: 0 18px 40px rgba(0, 0, 0, .45);
  --display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
  color-scheme: dark;
}

/* Light is a real supported theme, not an afterthought: half of Ukraine reads
   a phone outdoors in daylight with the system theme set to light. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f4f2ee;
    --surface: #fffdfa;
    --surface-2: #f7f4ef;
    --line: #e1dcd3;
    --text: #17181a;
    --text-dim: #55585e;
    --muted: #6a6e77;
    --on-accent: #2b1207;
    --accent: #e2551a;
    --accent-soft: #fbe6da;
    --green: #3f8a58;
    --info: #5c6779;
    --yellow: #c79700;
    --orange: #d1700a;
    --red: #d8362b;
    --shadow: 0 18px 40px rgba(23, 24, 26, .10);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f4f2ee;
  --surface: #fffdfa;
  --surface-2: #f7f4ef;
  --line: #e1dcd3;
  --text: #17181a;
  --text-dim: #55585e;
  --muted: #6a6e77;
  --on-accent: #2b1207;
  --accent: #e2551a;
  --accent-soft: #fbe6da;
  --green: #3f8a58;
  --info: #5c6779;
  --yellow: #c79700;
  --orange: #d1700a;
  --red: #d8362b;
  --shadow: 0 18px 40px rgba(23, 24, 26, .10);
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Headings wrap into even lines instead of a long line and an orphan; body text
   avoids a single-word last line where the browser supports it. */
h1, h2, h3, .section h2 { text-wrap: balance; }
p, li { text-wrap: pretty; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--display);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  padding: 12px 18px;
  background: var(--accent);
  color: var(--on-accent);
  border-radius: 0 0 var(--radius-sm) 0;
  font-weight: 700;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, background .2s ease;
}
.nav[data-stuck="1"] { border-bottom-color: var(--line); }
.nav__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-right: auto;
}
/* The mark is the approved gem render - the same one the launcher and the store
   listing carry - not a line-art stand-in for it. */
.brand__mark { width: 28px; height: auto; display: block; }
.download__mark { width: 46px; height: auto; display: block; }
.footer__mark { width: 22px; height: auto; display: block; }
.brand__name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__links a {
  text-decoration: none;
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
}
.nav__links a:hover { color: var(--text); background: var(--surface); }
@media (max-width: 720px) { .nav__links { display: none; } }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); }
.icon-btn svg { width: 17px; height: 17px; }
.icon-btn .theme-moon { display: none; }
:root[data-theme="light"] .icon-btn .theme-moon { display: block; }
:root[data-theme="light"] .icon-btn .theme-sun { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .icon-btn .theme-moon { display: block; }
  :root:not([data-theme="dark"]) .icon-btn .theme-sun { display: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background .16s ease, border-color .16s ease;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: color-mix(in srgb, var(--accent) 88%, #fff); }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); }
.btn--quiet { background: transparent; color: var(--text-dim); border-color: var(--line); }
.btn--quiet:hover { color: var(--text); }
.btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }
.btn__sub {
  display: block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 400;
  opacity: .8;
  text-transform: uppercase;
}

/* ---------- hero ---------- */

.hero { position: relative; padding: 56px 0 24px; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px;
  align-items: center;
}
.hero h1 {
  font-size: clamp(34px, 6vw, 56px);
  line-height: 1.08;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 14px 0 0;
}
.hero__lead {
  margin: 18px 0 0;
  font-size: clamp(16px, 2.2vw, 19px);
  color: var(--text-dim);
  max-width: 34em;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero__micro {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 20px;
}
.hero__micro span { display: inline-flex; align-items: center; gap: 7px; }
.hero__micro svg { width: 14px; height: 14px; color: var(--green); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 22%, transparent);
}
.eyebrow[data-state="active"] .dot { background: var(--red); box-shadow: 0 0 0 4px color-mix(in srgb, var(--red) 22%, transparent); }
.eyebrow[data-state="partial"] .dot { background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange) 22%, transparent); }
.eyebrow[data-state="unknown"] .dot { background: var(--muted); box-shadow: none; }
/* The hero pill stays calm on purpose: it signals that state is live, not how
   many oblasts are alarmed. The real count and its colour live with the map
   card below, so the loudest element is never the first thing above the H1. */
.eyebrow[data-state="live"] .dot { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }

/* The diamond motif behind the hero: the logo's own geometry, enormous and
   almost invisible. No gradient fireworks - the product is a calm one. */
.hero__glow {
  position: absolute;
  inset: -80px 0 auto;
  height: 620px;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(520px 320px at 78% 22%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    radial-gradient(420px 280px at 12% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 72%);
  opacity: .75;
}

/* ---------- phone mockup ---------- */

.phone {
  position: relative;
  width: min(300px, 78vw);
  margin: 0 auto;
  aspect-ratio: 9 / 19.5;
  border-radius: 38px;
  padding: 9px;
  background: linear-gradient(170deg, #2a2d33, #101114 60%);
  box-shadow: var(--shadow), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.phone__screen {
  position: relative;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
  background: var(--surface);
  display: block;
}
/* contain, not cover: the capture is 1:1.87 and the frame 9:19.5, and cover
   would shave the app's own header off the side of its own screenshot. */
.phone__screen img { width: 100%; height: 100%; object-fit: contain; object-position: center top; display: block; background: #0a0b0c; }
.phone__notch {
  position: absolute;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  width: 84px; height: 20px;
  border-radius: 12px;
  background: #0b0c0e;
  z-index: 2;
}
.phone--tilt { transform: rotate(-2.2deg); }

/* ---------- sections ---------- */

.section { padding: 72px 0; }
.section__head { max-width: 46em; }
.section h2 {
  font-size: clamp(25px, 3.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -.015em;
  font-weight: 800;
  margin: 10px 0 0;
}
.section__lead { margin: 12px 0 0; color: var(--text-dim); font-size: 17px; }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ---------- live map ---------- */

.map-card { margin-top: 26px; padding: 18px; display: grid; gap: 16px; }
.map-card__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.map-card__state { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.map-holder {
  position: relative;
  background: var(--surface-2);
  border-radius: var(--radius-sm);
  padding: 8px;
  min-height: 220px;
  /* The tooltip is clamped in JS, but this guarantees nothing inside the map
     can ever give the page a horizontal scrollbar. */
  overflow: hidden;
}
.map-holder svg { width: 100%; height: auto; display: block; }
.map-holder path {
  fill: color-mix(in srgb, var(--info) 18%, var(--surface));
  stroke: var(--line);
  stroke-width: 1.1;
  stroke-linejoin: round;
  transition: fill .4s ease;
}
.map-holder path[data-status="clear"] { fill: color-mix(in srgb, var(--green) 20%, var(--surface)); }
.map-holder path[data-status="partial"] { fill: color-mix(in srgb, var(--orange) 45%, var(--surface)); }
.map-holder path[data-status="active"] { fill: color-mix(in srgb, var(--red) 62%, var(--surface)); }
.map-holder path[data-status="unknown"] { fill: color-mix(in srgb, var(--muted) 16%, var(--surface)); }
.map-holder path:hover { stroke: var(--accent); stroke-width: 1.8; }
/* The regions are focusable so a keyboard or touch user gets the same per-oblast
   status a mouse gets on hover. */
.map-holder path:focus { outline: none; stroke: var(--accent); stroke-width: 2; }
.map-holder path[data-active="1"] { stroke: var(--accent); stroke-width: 2; }
/* MapLibre, same basemap and fills as the app's own map. It is an upgrade over
   the inline SVG, loaded only when the section comes into view, so the page
   still paints instantly and still works when the tiles never arrive. */
/* Two class names deep on purpose: maplibre-gl.css is appended to <head> at
   runtime, so its own .maplibregl-map { position: relative } would otherwise
   win on source order and collapse this box to zero height. */
.map-holder > .map-gl { position: absolute; inset: 8px; border-radius: var(--radius-sm); overflow: hidden; }
.map-gl .maplibregl-ctrl-attrib { font-size: 10px; }
.map-gl .maplibregl-popup-content {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-family: var(--display);
  font-size: 13px;
  box-shadow: var(--shadow);
}
.map-gl .maplibregl-popup-tip { border-top-color: var(--surface); border-bottom-color: var(--surface); }
.map-gl .maplibregl-popup-close-button { color: var(--text-dim); font-size: 17px; padding: 2px 7px; }
.map-gl .mp-name { font-weight: 700; display: block; }
.map-gl .mp-status { color: var(--text-dim); }
/* In map mode the box is sized by the card, not by the SVG's own ratio: the
   fallback drawing goes out of flow so a phone can have a taller map than a
   1000x660 drawing would allow. */
.map-holder[data-mode="gl"] { aspect-ratio: 16 / 10; }
.map-holder[data-mode="gl"] svg { position: absolute; inset: 8px; visibility: hidden; }
@media (max-width: 640px) {
  /* Ukraine is wider than it is tall, so a portrait box only adds empty sea and
     shrinks the country; 5:4 is about as tall as the shape can use. */
  .map-holder[data-mode="gl"] { aspect-ratio: 5 / 4; }
}

.map-list__toggle { justify-self: start; padding: 9px 14px; font-size: 14px; }
/* .map-list sets display:grid, which beats the UA sheet's [hidden]{display:none}
   on specificity - without this the list would never actually hide. */
.map-list[hidden] { display: none; }
.map-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 6px 18px;
}
.map-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.map-list i { width: 9px; height: 9px; border-radius: 50%; flex: none; display: block; }
.map-list b { font-weight: 600; margin-right: auto; }
.map-list span { color: var(--text-dim); font-size: 13px; }

.map-note { color: var(--muted); font-size: 13px; margin: 0; }
.map-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.map-legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text-dim); }
.map-legend i { width: 11px; height: 11px; border-radius: 3px; display: block; }
.map-tooltip {
  position: absolute;
  pointer-events: none;
  padding: 7px 10px;
  border-radius: 9px;
  background: var(--bg);
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translate(-50%, -130%);
  transition: opacity .12s ease;
  z-index: 3;
}
/* Near the top edge the tooltip would clip above the map, so it flips below. */
.map-tooltip[data-flip="1"] { transform: translate(-50%, 30%); }
.map-tooltip[data-show="1"] { opacity: 1; }
.map-skeleton {
  display: grid;
  place-items: center;
  min-height: 260px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ---------- features ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 30px;
}
.feature { padding: 22px; display: grid; gap: 10px; align-content: start; }
.feature__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 11px;
  background: var(--accent-soft);
  color: var(--accent);
}
.feature__icon svg { width: 21px; height: 21px; }
.feature h3 { margin: 4px 0 0; font-size: 18px; font-weight: 700; }
.feature p { margin: 0; color: var(--text-dim); font-size: 15px; }

/* ---------- levels strip ---------- */

.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.level { padding: 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-2); }
.level b { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.level i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.level p { margin: 8px 0 0; font-size: 14px; color: var(--text-dim); }

/* ---------- screens strip ---------- */

.screens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 30px;
}
.screen { margin: 0; display: grid; gap: 12px; justify-items: center; }
.screen img {
  width: 100%;
  max-width: 280px;
  height: auto;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: #0a0b0c;
  box-shadow: var(--shadow);
  display: block;
}
.screen figcaption { text-align: center; }

/* ---------- privacy ---------- */

.privacy { background: var(--surface); border-block: 1px solid var(--line); }
.privacy__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.checklist { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.checklist li { display: flex; gap: 11px; align-items: flex-start; }
.checklist svg { width: 19px; height: 19px; color: var(--green); flex: none; margin-top: 2px; }
.privacy__note { color: var(--text-dim); font-size: 15px; }

/* ---------- steps ---------- */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 30px; counter-reset: step; }
.step { padding: 22px; position: relative; }
.step__num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--accent);
}
.step h3 { margin: 10px 0 0; font-size: 18px; font-weight: 700; }
.step p { margin: 8px 0 0; color: var(--text-dim); font-size: 15px; }

/* ---------- download ---------- */

.download { text-align: center; padding: 34px 22px; display: grid; gap: 16px; justify-items: center; }
.download h2 { margin: 0; }
.download .hero__cta { justify-content: center; }
.download__meta { color: var(--muted); font-size: 13px; margin: 0; }
/* The closing card sits on a night scene from the same world as the app's
   status art (radio telescope over the steppe, generated, no text in it).
   The scene is dark in both themes, so the card carries its own light ink
   instead of the theme's, and a scrim keeps the copy above AA contrast. */
.download { position: relative; overflow: hidden; isolation: isolate; padding: 76px 22px 64px;
  border-color: rgba(120, 200, 170, .18); }
.download::before { content: ""; position: absolute; inset: 0; z-index: -2;
  background: #071110 url("/landing/assets/scene-night.webp?v=20261004") 72% 62% / cover no-repeat; }
.download::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(ellipse 70% 80% at 38% 46%, rgba(5, 10, 10, .82) 0%, rgba(5, 10, 10, .55) 55%, rgba(5, 10, 10, .25) 100%); }
.download h2 { color: #eef3f1; }
.download .section__lead { color: #c3cdca; }
.download .download__meta { color: #a9b5b1; }
@media (max-width: 720px) {
  .download::before { background-image: url("/landing/assets/scene-night-1200.webp?v=20261004"); background-position: 80% 60%; }
  .download::after { background: rgba(5, 10, 10, .66); }
}

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--line); padding: 34px 0 44px; color: var(--text-dim); font-size: 14px; }
.footer__grid { display: flex; flex-wrap: wrap; gap: 18px 40px; justify-content: space-between; }
.footer a { color: var(--text-dim); }
.footer a:hover { color: var(--accent); }
.footer__links { display: flex; flex-wrap: wrap; gap: 2px 20px; }
/* Vertical padding lifts each link to a ~38px tap target (WCAG 2.5.8). */
.footer__links a { padding: 8px 0; }
/* Safety-relevant legal copy takes the AA-passing dimmed text, not the quieter
   muted, so the disclaimer is never the least-legible line on the page. */
/* 62em at 13px measured out to 99 characters - far past the 65-75 a reader
   tracks comfortably, on the one paragraph that carries the safety caveat. */
.footer__disclaimer { margin: 18px 0 0; color: var(--text-dim); font-size: 13px; max-width: 68ch; }

/* ---------- responsive ---------- */

@media (max-width: 980px) {
  /* On a phone the headline comes first: a stranger arriving from a link needs
     to read what this is before they look at a picture of it. */
  .hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .grid, .steps, .levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .screens { gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .privacy__grid { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 640px) {
  .hero { padding-top: 34px; }
  .section { padding: 54px 0; }
  .grid, .steps, .levels { grid-template-columns: 1fr; }
  /* Three phones side by side stop being readable below ~640px; one column
     with a wide image beats three thumbnails nobody can see. */
  .screens { grid-template-columns: 1fr; gap: 26px; }
  .hero__cta .btn { flex: 1 1 100%; }
}