/* OvARlay — aus Papier ausgeschnitten.
 *
 * The visual system is the redesign in `.claude/skills/ovarlay-design`: a warm
 * paper canvas, everything interactive a pill, and elevation done with a 2px
 * cut-out outline instead of a shadow. Nothing floats, nothing glows, nothing
 * has a gradient.
 *
 * The *structure* of this file is the one that was already here and works: the
 * colours live as tokens, stated three times — once for a phone that says
 * "dark" and was never asked, once for the switch, once for a switch that says
 * "light" on a phone set to dark. Element rules take their colours from the
 * tokens and never from a media query; that is what made a switch possible in
 * the first place, and it is why the redesign is a change of values rather
 * than a rewrite.
 *
 * The accent comes out of the app icon, and that is the one place this file
 * departs from the design system it follows. The redesign proposed a coral of
 * its own — invented without ever having seen the icon, which was not supplied
 * with it. But the icon already carries the answer: inside the teal pin lies a
 * cream old map with a gold cross on it. Gold is the same warmth coral was
 * chosen for, it is already one of the five colours the app is built from (see
 * brand.dart), and in the game it already means target, find, reward.
 *
 * So the page and the icon stop arguing at the cost of one token, rather than
 * at the cost of a new icon, two store listings and a review.
 *
 * What is still open is the *style*: the icon has gradients, a glow and a drop
 * shadow, and this page has none of those on purpose. That is a redraw, and it
 * belongs after the stores are through, together with the question of whether
 * the icon follows the page or the page follows the icon.
 */

/* Served from this server, all of it. A page that pulls a font from Google
   hands every reader's IP address to a third party before a word is read, and
   this site's whole subject is that the position never leaves the phone. Both
   families are SIL Open Font License; the licence texts are in /fonts/. */
@font-face {
  font-family: "Lilita One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/lilita-one-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Lilita One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/lilita-one-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url("/fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Warm paper, and exactly one accent that carries every main action. */
  --cream: #efe6da;
  --paper-white: #ffffff;
  --oat: #e3d5c3;
  --sunken: #e6d9c8;
  --ink: #1f1c19;
  --gold: #d7a442;
  --gold-hover: #c08f2e;

  /* The four game signals. They mark states and never decorate. */
  --map: #8fbdf0;
  --found: #4f8f5f;
  --warn: #e0a32a;
  --chaser: #7d5fd3;

  /* Roles, so the palette above stays readable as a palette. */
  --bg: var(--cream);
  --card: var(--paper-white);
  --card-ink: #4a443d;
  --heading: #141210;
  --tagline: #4a443d;
  --muted: #6b6459;
  --footer-ink: #6b6459;
  --accent: var(--gold);
  --accent-hover: var(--gold-hover);
  --accent-ink: #141210;
  /* Gold fills a pill and is read as ink on top of it — 8.3:1, the easiest
     pairing on the page. Gold *as writing* on paper is 2.4:1 and unreadable
     for anybody who needs contrast, so a link is the same colour taken down
     until it carries 14px text on cream, on oat and on white alike: 5.5, 4.7,
     6.8. The accent stays where it belongs, which is behind text rather than
     in it. */
  --link: #7a5410;
  --sticker: #000000;
  --hairline: #dbc9b2;
  --focus: #6a9fe0;
  --note-bg: var(--oat);

  /* Radii: sharp corners do not occur, and anything interactive is a pill. */
  --radius: 24px;
  --radius-card: 40px;
  --radius-small: 16px;
  --pill: 9999px;

  color-scheme: light dark;
}

/* What those roles are in the dark. Not inverted grey but a warm brown-black,
   so the paper character survives — and the sticker outline flips from black
   to paper, because the cut-out silhouette is the elevation and has to stay
   readable on a dark ground. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17140f;
    --card: #221e18;
    --oat: #2e2820;
    --sunken: #100e0a;
    --ink: #f0e7da;
    --card-ink: #a89c8a;
    --heading: #fdf8f1;
    --tagline: #a89c8a;
    --muted: #a89c8a;
    --footer-ink: #a89c8a;
    --accent: #e5b452;
    --accent-hover: #f0c46a;
    --accent-ink: #1a0f0a;
    --link: #f0c46a;
    --sticker: #f0e7da;
    --hairline: #3a332a;
    --focus: #7fb0e8;
    --note-bg: #2e2820;
    --map: #7fb0e8;
    --found: #6fb47f;
    --warn: #e5b452;
    --chaser: #a68bec;
  }
}

[data-theme="dark"] {
  --bg: #17140f;
  --card: #221e18;
  --oat: #2e2820;
  --sunken: #100e0a;
  --ink: #f0e7da;
  --card-ink: #a89c8a;
  --heading: #fdf8f1;
  --tagline: #a89c8a;
  --muted: #a89c8a;
  --footer-ink: #a89c8a;
  --accent: #e5b452;
  --accent-hover: #f0c46a;
  --accent-ink: #1a0f0a;
  --link: #f0c46a;
  --sticker: #f0e7da;
  --hairline: #3a332a;
  --focus: #7fb0e8;
  --note-bg: #2e2820;
  --map: #7fb0e8;
  --found: #6fb47f;
  --warn: #e5b452;
  --chaser: #a68bec;
}

/* And the light values again, so the switch also wins on a phone set to dark. */
[data-theme="light"] {
  --bg: var(--cream);
  --card: var(--paper-white);
  --oat: #e3d5c3;
  --sunken: #e6d9c8;
  --ink: #1f1c19;
  --card-ink: #4a443d;
  --heading: #141210;
  --tagline: #4a443d;
  --muted: #6b6459;
  --footer-ink: #6b6459;
  --accent: var(--gold);
  --accent-hover: var(--gold-hover);
  --accent-ink: #141210;
  --link: #7a5410;
  --sticker: #000000;
  --hairline: #dbc9b2;
  --focus: #6a9fe0;
  --note-bg: #e3d5c3;
  --map: #8fbdf0;
  --found: #4f8f5f;
  --warn: #e0a32a;
  --chaser: #7d5fd3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Focus is a ring in map blue, always visible and never removed. */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--pill);
}

a { color: var(--link); }
a:hover { color: var(--ink); }

/* ---------------------------------------------------------------- header -- */

/* Floating, transparent, not fixed: no bar and no shadow, exactly as the rest
   of the page refuses them. */
header.site {
  padding: 24px 0 8px;
}

header.site .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* The pin itself, cut free of its tile.
   
   It was the whole app icon: a navy square with a gradient and a glow, drawn
   for a phone's home screen, and on cream it read as a hole in the paper. A
   circle at 36 points made it a stamp rather than a hole, which was a way of
   living with it. Klaus then cut the pin out of the tile, which is the actual
   answer — there is nothing left to live with.
   
   It needs no frame either: a free-standing mark on paper is already an
   object, and an outline around it would only be the tile again. Taller than
   the wordmark's cap height on purpose, because a pin is read as a pin by its
   point. */
header.site img {
  height: 42px;
  width: auto;
}

.brand {
  font-family: "Lilita One", ui-rounded, system-ui, sans-serif;
  font-size: 40px;
  line-height: 1;
  color: var(--heading);
  text-decoration: none;
  letter-spacing: -0.01em;
}

/* The wordmark is always OvARlay with the AR coloured — the one place where
   the middle of a word is set apart on purpose, in the same gold that marks
   the treasure on the map inside the icon beside it, and the same gold the
   toggles are drawn in.
   
   It is the *fill* tone here, not the writing tone, and that is a deliberate
   exception rather than an oversight: on cream it carries 1.8:1, which no
   sentence on this site would be allowed. A logotype may. WCAG says so in as
   many words — text that is part of a logo or brand name has no contrast
   requirement — and this is a brand name set at 32 to 40 points in a heavy
   display face, where the letters read as shapes rather than as small print.
   
   The line it must not cross is the rest of the page: nothing that has to be
   *read* is allowed this tone. Links, captions and body text keep `--link`,
   which is the same colour taken down until it carries. */
.brand .ar { color: var(--accent); }
.brand:hover { color: var(--heading); }

/* The two toggles and the menu, in the bar beside the wordmark. */
.tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* One state, not two. A segmented control has to show every option to work,
   which for two options is twice the furniture for one bit of information —
   and on a phone it filled a row of its own. A toggle shows where you *are*
   and switches when pressed; what pressing does is in its label, where a
   screen reader finds it and a mouse finds it as a tooltip. */
.toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 2px solid var(--sticker);
  border-radius: var(--pill);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(.2,.8,.3,1);
}

.toggle:hover { background: var(--sunken); }
.toggle:active { transform: scale(0.97); }

.toggle.theme { font-size: 18px; }

/* Which half of the theme toggle is showing follows the theme itself, in the
   same three blocks as every other value in this file: the phone that was
   never asked, the switch, and the switch overruling a dark phone. No script
   is involved, so the right glyph is there in the first painted frame. */
.toggle.theme .in-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .toggle.theme .in-light { display: none; }
  :root:not([data-theme="light"]) .toggle.theme .in-dark { display: block; }
}

[data-theme="dark"] .toggle.theme .in-light { display: none; }
[data-theme="dark"] .toggle.theme .in-dark { display: block; }
[data-theme="light"] .toggle.theme .in-light { display: block; }
[data-theme="light"] .toggle.theme .in-dark { display: none; }

/* The menu is a `details`, so it opens without a line of JavaScript and closes
   with the keyboard. On a wide screen there is nothing to hide: the summary
   goes away and the two links stand in the bar as they always did. */
.menu { position: relative; }

.menu summary {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--sticker);
  border-radius: var(--pill);
  font-size: 18px;
  cursor: pointer;
  list-style: none;
}

.menu summary::-webkit-details-marker { display: none; }
.menu summary:hover { background: var(--sunken); }
.menu[open] summary { background: var(--sunken); }

.menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 2;
  display: grid;
  gap: 6px;
  min-width: 200px;
  padding: 10px;
  background: var(--card);
  border: 2px solid var(--sticker);
  border-radius: var(--radius);
}

.menu nav a {
  font-size: 15px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: var(--pill);
  color: var(--ink);
  text-decoration: none;
}

.menu nav a:hover:not([aria-current]) { background: var(--sunken); }

/* Gold still means "you are here" — now inside the menu rather than in the
   bar, because that is where the pages went. */
.menu nav a[aria-current="page"] {
  background: var(--accent);
  color: var(--accent-ink);
  cursor: default;
}

/* The menu is a menu at every width, and that is deliberate rather than
   lazy. The first attempt let the two links stand in the bar on a wide screen
   and hid only the summary — and a *closed* `details` does not render its
   content, so on the desktop the links were laid out at zero width, off the
   right edge, visible to nobody. A control whose behaviour depends on the
   viewport is a control with two ways to be wrong; this one has one. */

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

main.wrap { padding-bottom: 64px; }

.hero { padding: 48px 0 8px; }

/* The display face, and the only place on the page it is allowed to be this
   big. Never in buttons, nav, inputs or running text. */
.hero h1 {
  font-family: "Lilita One", ui-rounded, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(48px, 9vw, 76px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--heading);
  /* The headline breaks where the display face wants it to, the sentence under
     it reads at its own measure — one column for both would set the tagline in
     a gutter. */
  max-width: 15ch;
  margin: 0 0 20px;
}

.tagline {
  font-size: 20px;
  line-height: 1.4;
  color: var(--tagline);
  max-width: 52ch;
  margin: 0;
}

/* German compounds are longer than a phone is wide, and the display face has
   no small size to fall back on. "Datenschutzerklärung" simply ran off the
   right of the screen — there is no space in it to break at, so nothing broke.
   Hyphenation gives the word the break it does not have; `break-word` is the
   backstop for the one that has no hyphenation dictionary either. */
h1,
h2,
.legal h1 {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

h2 {
  font-family: "Lilita One", ui-rounded, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 5vw, 52px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--heading);
  margin: 64px 0 24px;
}

/* ----------------------------------------------------------------- cards -- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 48px;
}

.card {
  background: var(--card);
  border: 2px solid var(--sticker);
  border-radius: var(--radius);
  padding: 28px;
}

.card h3 {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.33;
  color: var(--heading);
}

.card p {
  margin: 0;
  color: var(--card-ink);
}

/* One emoji marks each heading, as the site has always done. It carries no
   side bearing of its own, so the air after it has to be given — and given
   here rather than as `word-spacing`, which would also push "Der" away from
   "Verfolger". */
.card h3 .mark {
  margin-right: 10px;
}

/* A bordered pill, not the download box's hard shadow — that lift is spoken
   for already (see the comment where it is defined) and stays the one place
   on the page that pulls the eye that hard. This still has to read as a
   button and not a sentence, so a border and a hover fill do the work
   instead. */
.link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 28px;
  border: 2px solid var(--sticker);
  /* The card radius, not the pill: stretched to the note's height in
     `.cta-row`, a pill radius rounds a box that tall into an ellipse rather
     than a button. This one is short of its own accord wherever `.cta-row`
     is absent, so the card radius has to look right there too — and it
     does, the same corner every `.card` beside it already has. */
  border-radius: var(--radius);
  padding: 12px 24px;
  background: var(--card);
  font-size: 16px;
  font-weight: 600;
  color: var(--heading);
  text-decoration: none;
}

.link-button:hover,
.link-button:focus-visible {
  background: var(--sunken);
}

/* ------------------------------------------------------------ the strip -- */

/* The arrows sit *outside* the strip, so the pictures start and end on the
   same lines as every other section. Inside the row they stole 120 pixels
   from the content width and the gallery alone was narrower than the page.
   Below the width where there is room beside the column they move onto the
   strip's own edges rather than disappearing — a mouse still needs them, and
   a finger has been swiping all along. */
.shots-frame {
  position: relative;
}

.shots-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

.shots-arrow[data-shots-step="-1"] { left: -60px; }
.shots-arrow[data-shots-step="1"] { right: -60px; }

@media (max-width: 1330px) {
  .shots-arrow[data-shots-step="-1"] { left: 8px; }
  .shots-arrow[data-shots-step="1"] { right: 8px; }
}

.shots {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 8px;
}

.shots::-webkit-scrollbar { display: none; }

.shots figure {
  margin: 0;
  flex: 0 0 264px;
  scroll-snap-align: start;
}

/* The picture is a second cut-out inside the card, not part of it: its own
   3px outline, its own radius. */
.shots img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--sticker);
  border-radius: var(--radius);
  background: var(--sunken);
}

.shots figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.43;
  color: var(--muted);
}

.shots-arrow {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: var(--pill);
  border: 2px solid var(--sticker);
  background: var(--card);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 120ms cubic-bezier(.2,.8,.3,1);
}

.shots-arrow:hover:not(:disabled) { background: var(--sunken); }
/* Both transforms at once, because the arrow is held in place by one of
   them: a press that dropped the centring would jump the button downward. */
.shots-arrow:active:not(:disabled) {
  transform: translateY(-50%) scale(0.97);
}

/* A dead control that looks dead. */
.shots-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

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

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

.steps li {
  counter-increment: step;
  background: var(--card);
  border: 2px solid var(--sticker);
  border-radius: var(--radius);
  padding: 20px 24px 20px 76px;
  position: relative;
  color: var(--card-ink);
}

/* The number is a sticker of its own, sitting on the card's edge. */
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 18px;
}

/* ------------------------------------------------------------- the pills -- */

.pill-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pill-list li {
  border: 2px solid var(--sticker);
  border-radius: var(--pill);
  padding: 10px 18px;
  background: var(--card);
  font-size: 14px;
  font-weight: 500;
}

/* On the homepage the pill button and the note sit beside each other rather
   than stacked — there is width to spare next to a button this narrow, and a
   note this wide does not need the whole row to itself. Only there: the
   use-cases page ends on the note alone, with no button above it to share a
   row with, so this wrapper is absent and `.download-box` keeps its own
   margin. */
.cta-row {
  display: flex;
  /* Stretched, not centred: the button matches the note's own height rather
     than floating at its natural, much shorter one beside it. Its text stays
     centred regardless, since that is what `.link-button`'s own flex rules
     already do to its content. */
  align-items: stretch;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 48px;
}

.cta-row .link-button,
.cta-row .download-box {
  margin-top: 0;
}

.cta-row .download-box {
  flex: 1 1 340px;
}

/* ------------------------------------------------------------ the notice -- */

/* The one paper lift on the page. A hard 5px offset in the sticker colour —
   never a soft shadow — and only here, so it stays an event.

   The text and the badges sit in one row on a screen wide enough for both,
   rather than the badges stacked under the text: on the homepage this box
   sits in `.cta-row` beside the pill button stretched to match its height,
   so a box any taller than it has to be drags that button tall with it for
   no reason. `flex-wrap` alone folds the badges back underneath the text
   the moment a line does not fit both — no separate breakpoint needed, the
   same way `.store-links` already wraps its own two badges. */
.download-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px 32px;
  margin-top: 64px;
  background: var(--note-bg);
  border: 2px solid var(--sticker);
  border-radius: var(--radius-card);
  box-shadow: 5px 5px 0 var(--sticker);
  padding: 32px;
  font-size: 20px;
  line-height: 1.5;
}

.download-text { margin: 0; }

.download-box strong { color: var(--heading); }

.download-box a {
  color: var(--link);
  text-underline-offset: 3px;
}

.store-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

/* Apple and Google's own artwork, not a homemade approximation of either
   mark — see the guidelines both platforms publish for why a hand-drawn one
   would be worse than none. Only the height is ours: 40px for the App Store
   badge is Apple's own stated on-screen minimum, and Google's needs the extra
   height to stay legible since its wordmark sits smaller in the frame. */
.store-badge {
  display: inline-flex;
  line-height: 0;
  border-radius: var(--radius-small);
}

.store-badge img { display: block; }
.store-badge:first-child img { height: 40px; width: auto; }
.store-badge:last-child img { height: 54px; width: auto; }

.store-badge:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 4px;
}

/* Which App Store badge shows follows the theme in the same three blocks as
   the sun/moon toggle above — a black badge all but disappears against the
   dark theme's near-black background, so it swaps for Apple's own white one
   rather than staying put and fighting the page. Google's badge carries its
   own light border in the artwork and reads fine on both. */
.store-badge .in-dark { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .store-badge .in-light { display: none; }
  :root:not([data-theme="light"]) .store-badge .in-dark { display: block; }
}

[data-theme="dark"] .store-badge .in-light { display: none; }
[data-theme="dark"] .store-badge .in-dark { display: block; }
[data-theme="light"] .store-badge .in-light { display: block; }
[data-theme="light"] .store-badge .in-dark { display: none; }

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

/* The rule under the page follows the same column as everything above it.
   Full-bleed it ran past the content on a wide screen, which reads as a line
   belonging to the window rather than to the page. */

footer.site {
  border-top: 2px solid var(--sticker);
  max-width: 1200px;
  margin: 64px auto 0;
  padding: 24px 24px 40px;
  text-align: center;
  color: var(--footer-ink);
  font-size: 14px;
}

/* ------------------------------------------------------- the legal pages -- */

/* They are text, and text wants a column rather than a canvas. Same paper,
   same outline, nothing else. */
/* The reading measure stays — 1200 pixels of running text is about 180
   characters a line, which nobody reads twice — but the column is *left
   aligned* inside the page rather than centred. Centring it moved the left
   edge inward, and clicking from the front page to the privacy statement
   looked as though the whole site had shifted. Now only the line endings
   change, which is what a text column is allowed to do. */
.legal {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px 64px;
}

.legal > * {
  max-width: 76ch;
}

.legal h1 {
  font-family: "Lilita One", ui-rounded, system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(40px, 6vw, 56px);
  line-height: 1;
  color: var(--heading);
  margin: 32px 0 24px;
}

.legal h2 {
  font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.33;
  margin: 40px 0 12px;
}

.legal h3 {
  font-size: 20px;
  margin: 28px 0 8px;
}

.legal p,
.legal li { color: var(--card-ink); }

/* A stored key is a literal, and a literal is read letter by letter. */
.legal code {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.92em;
  background: var(--sunken);
  border-radius: 6px;
  padding: 1px 6px;
}

.legal .box {
  background: var(--card);
  border: 2px solid var(--sticker);
  border-radius: var(--radius);
  padding: 24px 28px;
}

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.legal th,
.legal td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.legal th { color: var(--heading); }

/* ---------------------------------------------------------------- motion -- */

/* Sparing and short. No parallax, no scroll animation, no bounce. */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 620px) {
  .hero { padding-top: 32px; }
  h2 { font-size: 34px; }
  .download-box { padding: 24px; box-shadow: 4px 4px 0 var(--sticker); }
  .shots figure { flex-basis: 210px; }

  /* The display face's floor is 40px by the design's own rule, and on a
     360-point phone a single German noun blows through it. Hyphenation covers
     most of them; this covers the rest. */
  .legal h1 { font-size: clamp(32px, 9vw, 44px); }

  /* One row on a phone: the wordmark, then the two toggles and the menu at
     the far end of it. That is the whole header now — it used to be three
     rows, and they started at three different places.

     It only just fits, and on a 360-point phone — Klaus's, and the commonest
     Android width there is — it did not: the row came to 365 points and the
     three circles dropped onto a second line, five points short. Hence the
     tighter gaps and the two points off the wordmark and the pin. Measured at
     360 there are now 22 points to spare, which is enough for the fallback
     face to be a little wider than Lilita One if the font ever fails to load.

     The circles stay 44: that is the touch target, and it is not negotiable
     for a header that is mostly buttons. Below about 340 points the row wraps
     again — flex-wrap is deliberately left on, because two tidy rows are a
     better answer than three circles pushed off the edge. */
  header.site .wrap { gap: 8px; }
  .tools { gap: 6px; }
  .brand { font-size: 30px; }
  header.site img { height: 40px; }
}