/* Metamorph site. Mobile is the base; wider layouts are layered on with min-width.
   Every value comes from tokens.css. */

/* ---------- base ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: var(--space-20); }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }

a { color: var(--color-primary); text-underline-offset: 0.2em; }
a:hover { color: var(--color-primary-hover); }

:focus-visible {
  outline: var(--focus-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-xs);
}

kbd {
  font-family: var(--font-mono);
  font-size: 0.86em;
  font-weight: var(--weight-medium);
  padding: 0.05em 0.45em;
  border: var(--border-hairline) solid var(--color-border-strong);
  border-bottom-width: var(--border-strong);
  border-radius: var(--radius-xs);
  background: var(--color-surface-raised);
  color: var(--color-text);
  white-space: nowrap;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--space-4); top: calc(-1 * var(--space-20));
  z-index: var(--z-nav);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary); color: var(--color-on-primary);
  border-radius: var(--radius-sm); font-weight: var(--weight-semibold);
}
.skip-link:focus { top: var(--space-4); }

.icon { width: var(--size-icon); height: var(--size-icon); flex: none; }

/* ---------- type ---------- */
/* At the narrowest widths a single long word can exceed the column: hyphenate rather than overflow. */
.display, .title { hyphens: auto; overflow-wrap: break-word; }
.display {
  margin: 0;
  max-width: var(--measure-display);
  font-size: var(--text-display);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.title {
  margin: 0;
  max-width: 20ch;
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.lead, .body-lg {
  margin: 0;
  max-width: var(--measure-body);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}
.body { margin: 0; max-width: var(--measure-body); color: var(--color-text-muted); }

/* ---------- buttons: default, hover, focus, active, disabled, loading, selected ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--size-touch);
  padding: var(--space-2) var(--space-5);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit; font-weight: var(--weight-semibold); text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), transform var(--dur-instant) var(--ease-out);
}
.button:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.button:active { background: var(--color-primary-pressed); transform: translateY(1px); }
.button:disabled, .button[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.button[aria-busy="true"] { cursor: progress; }
.button--ghost {
  background: transparent; color: var(--color-text); border-color: var(--color-border-strong);
}
.button--ghost:hover { background: var(--color-surface-hover); color: var(--color-text); border-color: var(--color-text-subtle); }
.button--ghost:active { background: var(--color-surface-pressed); }
.button--ghost[aria-pressed="true"], .button--ghost.is-done {
  border-color: var(--color-success); color: var(--color-success-text);
}
.button--small { min-height: var(--size-touch); padding: var(--space-1) var(--space-4); font-size: var(--text-sm); }
.button .icon { width: var(--size-icon); height: var(--size-icon); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav);
  background: var(--color-hud);
  border-bottom: var(--border-hairline) solid var(--color-hairline);
  backdrop-filter: blur(12px); /* ds-allow-hardcode: the one glass surface on the page */
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  max-width: var(--page-max); margin: 0 auto;
  padding: var(--space-2) var(--space-gutter);
}
.brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-text); text-decoration: none; }
.brand:hover { color: var(--color-text); }
.brand__logo { width: var(--size-logo); height: var(--size-logo); }
.brand__name { font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); }
.nav__links { display: flex; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.nav__links li:not(:last-child) { display: none; }
.nav__links a:not(.button) {
  display: inline-flex; align-items: center; min-height: var(--size-touch);
  padding: 0 var(--space-3); border-radius: var(--radius-sm);
  color: var(--color-text-muted); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium);
}
.nav__links a:not(.button):hover { color: var(--color-text); background: var(--color-surface-hover); }
.nav__links a:not(.button):active { background: var(--color-surface-pressed); }

/* ---------- sections ---------- */
main > section {
  max-width: var(--page-max); margin: 0 auto;
  padding: var(--space-section) var(--space-gutter) 0;
}

/* ---------- hero + demo ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); padding-top: var(--space-12) !important; }
.hero__copy { display: grid; gap: var(--space-6); }

.demo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }

.stage {
  --stage-pad: var(--space-3);
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(80% 70% at 20% 0%, var(--color-accent-tint), transparent 70%),
    radial-gradient(60% 60% at 90% 100%, var(--color-primary-tint), transparent 70%),
    var(--color-bg-deep);
  padding: var(--stage-pad);
  user-select: none;
  -webkit-user-select: none;
}

.window {
  position: relative;
  display: flex; flex-direction: column;
  min-height: var(--size-stage-min);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-window);
  overflow: hidden;
}
.window__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-bottom: var(--border-hairline) solid var(--color-hairline);
  background: var(--color-surface-raised);
  font-size: var(--text-sm);
}
.window__crumb { color: var(--color-text-subtle); }
.window__crumb--current { color: var(--color-text); font-weight: var(--weight-semibold); }
.window__sep { color: var(--color-border-strong); }
.window__reset { margin-left: auto; }

.files {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-file), 1fr));
  align-content: start;
  gap: var(--space-2);
  margin: 0; padding: var(--space-4);
  list-style: none;
  flex: 1;
}

/* file: default, hover, focus, active, selected, dragging, new, disabled */
.file {
  display: grid; justify-items: center; gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-1);
  border: var(--border-hairline) solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text);
  font: inherit; font-size: var(--text-xs); line-height: var(--leading-snug);
  text-align: center;
  cursor: grab;
  touch-action: none;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}
.file:hover { background: var(--color-surface-hover); }
.file:active { cursor: grabbing; background: var(--color-surface-pressed); }
.file:focus-visible { outline-offset: 0; }
.file[data-selected="true"] { background: var(--color-surface-pressed); border-color: var(--color-primary); }
.file.is-dragging { opacity: 0.35; }
.file:disabled { opacity: 0.45; cursor: not-allowed; }
.file__thumb {
  display: grid; place-items: center;
  width: var(--size-thumb); height: var(--size-thumb);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.file__thumb img { width: 100%; height: 100%; object-fit: cover; }
.file__thumb--doc {
  position: relative;
  border: var(--border-hairline) solid var(--color-border-strong);
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
}
.file__thumb--doc .icon { width: var(--size-icon-lg); height: var(--size-icon-lg); }
.file__badge {
  position: absolute; bottom: var(--space-1);
  padding: 0 var(--space-1);
  border-radius: var(--radius-xs);
  background: var(--color-accent-tint);
  color: var(--color-accent-text);
  font-family: var(--font-mono); font-size: 0.625rem; font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.file__name { max-width: 100%; overflow-wrap: anywhere; }
.file--new { animation: file-in var(--dur-slow) var(--ease-spring); }
@keyframes file-in {
  from { opacity: 0; transform: scale(0.6); }
  to { opacity: 1; transform: scale(1); }
}

.window__cue {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2);
  max-width: var(--measure-body);
  margin: auto auto var(--space-8);
  padding: 0 var(--space-4);
  color: var(--color-text-subtle); font-size: var(--text-sm); text-align: center;
  pointer-events: none;
}
.window__cue .icon { color: var(--color-primary); }
.dropzone-hint {
  position: absolute; inset: auto var(--space-4) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: var(--border-strong) dashed var(--color-glow);
  border-radius: var(--radius-md);
  background: var(--color-hud);
  color: var(--color-text-muted); font-size: var(--text-sm); text-align: center;
}

/* ghost that follows the pointer while dragging */
.ghost {
  position: fixed; left: 0; top: 0; z-index: var(--z-ghost);
  width: var(--size-ghost); height: var(--size-ghost);
  border-radius: var(--radius-sm);
  overflow: hidden;
  pointer-events: none;
  box-shadow: var(--shadow-overlay);
  /* like a desktop drag icon: beside the cursor, never covering what it points at */
  transform: translate(var(--space-3), var(--space-3));
  opacity: 0.9;
}
.ghost img { width: 100%; height: 100%; object-fit: cover; }
.ghost .file__thumb { width: 100%; height: 100%; }

.is-wheel-open .ghost { opacity: 0.25; }

/* ---------- the wheel ---------- */
.wheel-layer { position: absolute; inset: 0; z-index: var(--z-wheel); pointer-events: none; }
.wheel {
  position: absolute;
  width: var(--size-wheel); height: var(--size-wheel);
  transform: translate(-50%, -50%);
  animation: wheel-in var(--dur-base) var(--ease-spring);
}
.wheel:focus { outline: none; }
.wheel:focus-visible .wheel__rim { stroke: var(--color-focus-ring); stroke-width: 3; }
@keyframes wheel-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.wheel svg { width: 100%; height: 100%; overflow: visible; }
.wheel__disc { fill: var(--color-hud); }
.wheel__rim { fill: none; stroke: var(--color-hairline); stroke-width: 1; }
.wheel__slice { fill: var(--color-surface-hover); transition: fill var(--dur-instant) linear; }
.wheel__slice.is-hot { fill: var(--color-primary); }
.wheel__label {
  fill: var(--color-text);
  font-family: var(--font-sans); font-size: 13px; /* ds-allow-hardcode: SVG user units, scaled with the wheel */
  font-weight: var(--weight-semibold);
  text-anchor: middle; dominant-baseline: central;
  pointer-events: none;
}
.wheel__label.is-hot { fill: var(--color-on-primary); }
.wheel__label--small { font-size: 11px; } /* ds-allow-hardcode: SVG user units */
.wheel__hub { fill: var(--color-surface); }
.wheel__mode {
  fill: var(--color-primary); font-family: var(--font-sans); font-weight: var(--weight-bold);
  font-size: 15px; /* ds-allow-hardcode: SVG user units */
  text-anchor: middle;
}
.wheel__hint {
  fill: var(--color-text-muted); font-family: var(--font-sans);
  font-size: 11px; /* ds-allow-hardcode: SVG user units */
  text-anchor: middle;
}
.wheel__keys {
  fill: var(--color-text-subtle); font-family: var(--font-mono);
  font-size: 9.5px; /* ds-allow-hardcode: SVG user units */
  text-anchor: middle;
}

/* ---------- toasts ---------- */
.toasts {
  position: absolute; right: calc(var(--stage-pad) + var(--space-3)); bottom: calc(var(--stage-pad) + var(--space-3)); z-index: var(--z-dialog);
  display: grid; gap: var(--space-2);
  width: var(--size-toast);
  margin: 0; padding: 0; list-style: none;
}
.toast {
  display: grid; gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-overlay);
  font-size: var(--text-sm);
  animation: toast-in var(--dur-base) var(--ease-out);
}
@keyframes toast-in { from { opacity: 0; transform: translateY(8%); } to { opacity: 1; transform: none; } }
.toast__head { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-semibold); }
.toast__head .icon { color: var(--color-primary); }
.toast.is-done .toast__head .icon { color: var(--color-success); }
.toast.is-error .toast__head .icon { color: var(--color-error-text); }
.toast__status { margin: 0; color: var(--color-text-muted); overflow-wrap: anywhere; }
.toast__bar { height: var(--space-1); border-radius: var(--radius-pill); background: var(--color-surface-pressed); overflow: hidden; }
.toast__bar span {
  display: block; height: 100%; width: 0;
  border-radius: inherit;
  background: var(--gradient-brand);
}
.toast__actions { display: flex; gap: var(--space-2); }
.toast__actions .button { min-height: var(--space-10); }
.spin { animation: spin 0.9s linear infinite; } /* ds-allow-hardcode: spinner period, not a UI transition */
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- float shelf ---------- */
.shelf {
  position: absolute; top: calc(var(--stage-pad) + var(--space-16)); right: calc(var(--stage-pad) + var(--space-3)); z-index: var(--z-dialog);
  padding: var(--space-2) var(--space-3) var(--space-3);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-overlay);
}
.shelf__title { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-text-muted); }
.shelf__items { display: flex; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.shelf__items .file__thumb { width: var(--space-12); height: var(--space-12); }

/* ---------- crop dialog ---------- */
.crop {
  position: absolute; inset: 0; z-index: var(--z-dialog);
  display: grid; place-items: center;
  padding: var(--space-3);
  background: var(--color-scrim);
}
.crop__panel {
  display: grid; gap: var(--space-3);
  width: 100%; max-width: 46rem;
  padding: var(--space-3);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-overlay);
}
.crop__head { display: flex; align-items: center; gap: var(--space-2); }
.crop__title { margin: 0; font-size: var(--text-base); font-weight: var(--weight-semibold); }
.crop__size { margin-left: auto; color: var(--color-text-subtle); font-family: var(--font-mono); font-size: var(--text-xs); }
.crop__canvas {
  position: relative;
  touch-action: none;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--color-bg-deep);
  cursor: crosshair;
}
.crop__canvas img { width: 100%; height: auto; pointer-events: none; }
.crop__shade { position: absolute; background: var(--color-scrim); pointer-events: none; }
.crop__box {
  position: absolute;
  border: var(--border-hairline) solid var(--color-text);
  cursor: move;
  touch-action: none;
}
.crop__box:focus-visible { outline-offset: 0; }
.crop__handle {
  position: absolute; width: var(--space-4); height: var(--space-4);
  border: var(--border-hairline) solid var(--color-bg);
  background: var(--color-primary);
  transform: translate(-50%, -50%);
  touch-action: none;
}
.crop__handle[data-h="nw"] { left: 0; top: 0; cursor: nwse-resize; }
.crop__handle[data-h="ne"] { left: 100%; top: 0; cursor: nesw-resize; }
.crop__handle[data-h="sw"] { left: 0; top: 100%; cursor: nesw-resize; }
.crop__handle[data-h="se"] { left: 100%; top: 100%; cursor: nwse-resize; }
.crop__foot { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.crop__foot .hint { margin-right: auto; }

/* ---------- controls under the stage ---------- */
.controls { display: grid; gap: var(--space-3); }
.keys { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
/* key toggles: default, hover, focus, active, pressed (selected), disabled */
.key {
  display: grid; justify-items: center; gap: var(--space-1);
  min-height: var(--size-touch);
  padding: var(--space-3) var(--space-2);
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font: inherit; font-size: var(--text-sm);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.key:hover { background: var(--color-surface-hover); color: var(--color-text); }
.key:active { background: var(--color-surface-pressed); }
.key[aria-pressed="true"], .key.is-held {
  border-color: var(--color-primary); background: var(--color-primary-tint); color: var(--color-text);
}
.key:disabled { opacity: 0.45; cursor: not-allowed; }
.key__cap { font-size: var(--text-sm); }
.key[aria-pressed="true"] .key__cap, .key.is-held .key__cap { border-color: var(--color-primary); color: var(--color-primary); }
.key__label { font-weight: var(--weight-medium); overflow-wrap: anywhere; }
.hint { margin: 0; max-width: var(--measure-body); color: var(--color-text-muted); font-size: var(--text-sm); }
.footnote { margin: 0; color: var(--color-text-subtle); font-size: var(--text-sm); max-width: var(--measure-body); }

/* ---------- wheels section ---------- */
.wheels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); }
.wheels__lead { display: grid; gap: var(--space-6); align-content: start; }
.wheels__intro { display: grid; gap: var(--space-6); }
.wheels__side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-content: center; }
.wheels__side .wheel__hint, .wheels__side .wheel__mode { display: none; }
.wheel-figure { display: grid; gap: var(--space-4); margin: 0; }
.wheel-figure figcaption { color: var(--color-text-muted); font-size: var(--text-sm); }
.figcaption__strong { color: var(--color-text); font-weight: var(--weight-semibold); }
.wheel-static { position: relative; width: min(100%, 22rem); aspect-ratio: 1; }
.wheel-figure--large .wheel-static { width: min(100%, 40rem); }
.wheel-static .wheel { position: absolute; left: 50%; top: 50%; width: 100%; height: 100%; animation: none; }
.wheel-static .wheel__slice.is-hot { fill: var(--color-primary-tint); stroke: var(--color-primary); stroke-width: 1.5; }
.wheel-static .wheel__label.is-hot { fill: var(--color-text); }
.wheel-static .wheel__keys { display: none; }

/* ---------- formats ---------- */
.formats { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
.formats__figure { display: grid; gap: var(--space-4); align-content: start; }
.figure {
  margin: 0;
  font-size: var(--text-figure);
  font-weight: var(--weight-black);
  line-height: 0.9;
  letter-spacing: var(--tracking-display);
  background: var(--gradient-brand);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.facts { display: grid; gap: var(--space-3); margin: var(--space-4) 0 0; padding: 0; list-style: none; color: var(--color-text); }
.facts li { display: flex; align-items: center; gap: var(--space-3); }
.facts .icon { color: var(--color-primary); }
.formats__table-wrap { overflow-x: auto; }
.formats__table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.formats__table th {
  padding: 0 var(--space-3) var(--space-3) 0;
  text-align: left; color: var(--color-text-subtle);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.formats__table td, .formats__table tbody th {
  padding: var(--space-3) var(--space-3) var(--space-3) 0;
  border-top: var(--border-hairline) solid var(--color-hairline);
  vertical-align: top;
}
.formats__table tbody th { color: var(--color-text); font-size: var(--text-sm); letter-spacing: normal; text-transform: none; white-space: nowrap; }
.formats__table td { color: var(--color-text-muted); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-body); }

/* ---------- tour ---------- */
.tour { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.tour__copy { display: grid; gap: var(--space-4); align-content: start; }
.tour__download { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch); font-weight: var(--weight-medium); }
.tour__media video {
  width: 100%; height: auto;
  border-radius: var(--radius-lg);
  background: var(--color-bg-deep);
  box-shadow: var(--shadow-media);
}

/* ---------- install ---------- */
.install { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
.install__copy { display: grid; gap: var(--space-4); }
.requirements { display: grid; gap: var(--space-2); margin: 0; padding-left: var(--space-5); color: var(--color-text-muted); }
.terminal {
  align-self: start;
  border: var(--border-hairline) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-deep);
  overflow: hidden;
}
.terminal__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border-bottom: var(--border-hairline) solid var(--color-hairline);
}
.terminal__title { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-subtle); font-size: var(--text-sm); }
.terminal__body {
  margin: 0; padding: var(--space-5) var(--space-4);
  overflow-x: auto;
  font-family: var(--font-mono); font-size: var(--text-sm); line-height: 1.9;
  color: var(--color-text);
}
.terminal__prompt { color: var(--color-primary); user-select: none; -webkit-user-select: none; }

/* ---------- footer ---------- */
.footer { margin-top: var(--space-section); border-top: var(--border-hairline) solid var(--color-hairline); }
.footer__inner {
  display: grid; gap: var(--space-4);
  max-width: var(--page-max); margin: 0 auto;
  padding: var(--space-10) var(--space-gutter) var(--space-12);
}
.footer__text { margin: 0; color: var(--color-text-subtle); font-size: var(--text-sm); max-width: var(--measure-body); }
.footer__link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--size-touch); font-size: var(--text-sm); }

/* ---------- wider screens ---------- */
@media (min-width: 40rem) {
  .nav__links li:not(:last-child) { display: list-item; }
  .controls { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-6); }
  .keys { grid-template-columns: repeat(3, minmax(7rem, auto)); }
  .stage { --stage-pad: var(--space-5); }
}

@media (min-width: 64rem) {
  .hero { padding-top: var(--space-12) !important; }
  .hero__copy { grid-template-columns: 8fr 4fr; align-items: end; gap: var(--space-10); }
  .stage { --stage-pad: var(--space-8); }
  .window { min-height: 27rem; }
  .wheels { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-16); row-gap: var(--space-10); }
  .wheels__lead { display: contents; }
  .wheels__intro { grid-column: 1 / -1; }
  .wheels__side { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
  .wheels__side .wheel__hint, .wheels__side .wheel__mode { display: initial; }
  .formats { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-16); }
  .formats__figure { position: sticky; top: var(--space-20); }
  .tour { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; column-gap: var(--space-12); }
  .install { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-16); align-items: start; }
  .footer__inner { grid-template-columns: auto 1fr auto; align-items: center; column-gap: var(--space-10); }
}