/* ==========================================================================
   Typebar: your keys, on screen.
   A white exhibit page. Every picture on it is a Mac screen at the size a Mac
   draws it, each on a coloured desktop of its own (assets/wall-*.webp,
   Scripts/site-art.py), and the words sit outside the pictures in large type.
   The colour lives in the desktops and in the forty real themes; the page
   itself stays white and ink. No amber, no orange, no cream.
   ========================================================================== */

:root {
  --paper: #ffffff;
  --mist: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #424245;
  --graphite: #6e6e73;
  --rule: rgba(29, 29, 31, 0.12);
  --rule-2: rgba(29, 29, 31, 0.07);
  --link: #0066cc;
  --focus: #0071e3;
  --mac-blue: #007aff;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", system-ui, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --max: 1200px;
  /* the pictures run wider than the words */
  --wide: min(100vw - var(--gut) * 2, 1400px);
  --inset: calc((var(--wide) - min(100vw - var(--gut) * 2, var(--max))) / 2);
  --gut: clamp(16px, 4.4vw, 40px);
  --gap-plate: clamp(104px, 13vw, 184px);
  --picture-shadow: 0 0 0 1px rgba(29, 29, 31, 0.06), 0 2px 6px rgba(30, 42, 64, 0.06), 0 30px 60px -24px rgba(30, 42, 64, 0.32);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ---------------------------------------------------------------- the desktops */
.w-cobalt { --wall: url(../assets/wall-cobalt.webp); --wall-tone: #2f62f2; }
.w-blush { --wall: url(../assets/wall-blush.webp); --wall-tone: #fb6197; }
.w-ice { --wall: url(../assets/wall-ice.webp); --wall-tone: #80bdff; }
.w-meadow { --wall: url(../assets/wall-meadow.webp); --wall-tone: #2fb873; }
.w-rose { --wall: url(../assets/wall-rose.webp); --wall-tone: #f2416d; }
.w-mint { --wall: url(../assets/wall-mint.webp); --wall-tone: #86e2b6; }
.w-midnight { --wall: url(../assets/wall-midnight.webp); --wall-tone: #131e5a; }
.w-silver { --wall: url(../assets/desk.jpg); --wall-tone: #9badc5; }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 17px / 1.55 var(--sans);
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, p, ul, dl, dd, figure { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 2.5px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.wrap { width: min(100% - var(--gut) * 2, var(--max)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -48px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--ink); color: #fff; font-weight: 600; }
.skip-link:focus { top: 12px; text-decoration: none; }

/* An inline keycap, as on a Magic Keyboard. */
kbd {
  display: inline-grid;
  place-items: center;
  min-width: 1.62em;
  height: 1.5em;
  padding: 0 0.34em;
  margin: 0 0.06em;
  border-radius: 0.32em;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.13), 0 1.5px 0 rgba(29, 29, 31, 0.16);
  color: var(--ink);
  font: 600 0.8em / 1 var(--sans);
  vertical-align: 0.12em;
  letter-spacing: 0;
}

/* ---------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  padding: 0 24px;
  border-radius: 999px;
  border: 0;
  font: 600 17px / 1 var(--sans);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.18s, box-shadow 0.18s, transform 0.18s var(--ease);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #000000; }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.22); }
.btn--line:hover { box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.5); }
.btn--sm { height: 34px; padding: 0 15px; font-size: 14px; gap: 6px; }
.btn--accent { background: var(--ink); color: #fff; }
.btn--accent:hover { background: #000000; }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(29, 29, 31, 0.22); }
.btn__price { font-weight: 500; opacity: 0.62; }

/* ---------------------------------------------------------------- nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow 0.25s;
}
.nav.is-stuck { box-shadow: 0 1px 0 var(--rule-2); }
.nav__in { display: flex; align-items: center; gap: 28px; height: 60px; }
.wordmark { display: flex; align-items: center; gap: 10px; color: var(--ink); font: 600 18px / 1 var(--display); letter-spacing: -0.02em; }
.wordmark:hover { text-decoration: none; }
.wordmark img { width: 28px; height: 28px; }
.nav__links { display: flex; gap: 26px; margin-left: 12px; }
.nav__links a { color: var(--ink-2); font-size: 14px; }
.nav__links a:hover { color: var(--ink); text-decoration: none; }
.nav__cta { display: flex; align-items: center; gap: 10px; margin-left: auto; }

/* ---------------------------------------------------------------- hero */
.hero { padding: clamp(32px, 3.8vw, 52px) 0 0; }
.hero__head {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: end;
  gap: 28px 56px;
}
.hero__title {
  font: 600 clamp(54px, 7.9vw, 112px) / 0.93 var(--display);
  letter-spacing: -0.043em;
  margin-left: -0.045em;
}
.hero__title .l { display: block; white-space: nowrap; }
/* The headline types itself on the board once (js): hidden until the script splits it, and shown anyway
   after a moment if the script never runs. */
.js .hero__title[data-type]:not(.is-ready) { visibility: hidden; animation: tb-show 0s 1.6s forwards; }
@keyframes tb-show { to { visibility: visible; } }
.hero__title .ch { transition: opacity 60ms linear; }
.hero__title.is-typing .ch { opacity: 0; }
.hero__title.is-typing .ch.on { opacity: 1; }
.hero__title .caret { display: inline-block; width: 0.055em; height: 0.78em; margin-left: 0.03em; background: var(--mac-blue); vertical-align: -0.04em; border-radius: 1px; animation: blink 1.05s steps(1) infinite; }
.hero__aside { padding-bottom: 0.6em; max-width: 30em; }
.hero__lede { font-size: clamp(18px, 1.55vw, 21px); line-height: 1.48; color: var(--ink-2); letter-spacing: -0.016em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero__fine { margin-top: 16px; font-size: 14px; color: var(--graphite); }

/* ---------------------------------------------------------------- the stage: a Mac screen at the size a Mac draws it */
.stage { position: relative; isolation: isolate; margin-top: clamp(32px, 3.4vw, 44px); }
/* The screen's own light on the page round it, in the desktop's colours. */
.glow {
  position: absolute;
  inset: 0 0 auto;
  aspect-ratio: 1300 / 548;
  z-index: -1;
  background: var(--wall-tone) var(--wall) center / cover no-repeat;
  border-radius: 40px;
  filter: blur(64px) saturate(1.35);
  opacity: 0.5;
  transform: translateY(5%) scale(0.96, 0.92);
  transition: background-color 0.6s;
  pointer-events: none;
}
.screen {
  position: relative;
  aspect-ratio: 1300 / 548;
  container: screen / inline-size;
  overflow: hidden;
  border-radius: clamp(10px, 1.4vw, 18px);
  background: var(--wall-tone) var(--wall) center 58% / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(29, 29, 31, 0.08), 0 2px 8px rgba(30, 42, 64, 0.08), 0 50px 100px -40px rgba(30, 42, 64, 0.45);
  outline-offset: 6px;
  isolation: isolate;
}
.screen:focus { outline: none; }
.screen:focus-visible { outline: 2.5px solid var(--focus); }
.screen > * { --p: calc(100cqw / 1300); }
/* When the look changes, the old desktop fades out over the new one. */
.screen__fade { position: absolute; inset: 0; z-index: 0; background: center 58% / cover no-repeat; opacity: 0; transition: opacity 0.7s var(--ease); pointer-events: none; }

.menubar {
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--p) * 24);
  display: flex;
  align-items: center;
  gap: calc(var(--p) * 19);
  padding: 0 calc(var(--p) * 18);
  background: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  backdrop-filter: blur(30px) saturate(160%);
  color: var(--ink);
  font: 400 calc(var(--p) * 13) / 1 var(--sans);
  letter-spacing: -0.01em;
  z-index: 3;
}
.menubar b { font-weight: 700; }
.w-midnight .menubar { background: rgba(10, 14, 30, 0.28); color: #ffffff; }
.w-midnight .desk-icon { color: #ffffff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.menubar svg { height: calc(var(--p) * 15); width: auto; }
.menubar__apple { height: calc(var(--p) * 16) !important; margin-right: calc(var(--p) * 3); }
.menubar__right { margin-left: auto; display: flex; align-items: center; gap: calc(var(--p) * 17); }

/* A Finder window, in front. */
.win {
  position: absolute;
  overflow: hidden;
  background: #ffffff;
  border-radius: calc(var(--p) * 11);
  box-shadow: 0 0 0 calc(var(--p) * 0.6) rgba(0, 0, 0, 0.16), 0 calc(var(--p) * 24) calc(var(--p) * 60) rgba(26, 36, 58, 0.26), 0 calc(var(--p) * 4) calc(var(--p) * 14) rgba(26, 36, 58, 0.12);
  color: var(--ink);
  font: 400 calc(var(--p) * 13) / 1 var(--sans);
  letter-spacing: -0.01em;
}
.lights { display: flex; gap: calc(var(--p) * 8); }
.lights i { width: calc(var(--p) * 12); height: calc(var(--p) * 12); border-radius: 50%; background: #dcdde1; box-shadow: inset 0 0 0 calc(var(--p) * 0.6) rgba(0, 0, 0, 0.1); }
.finder { left: calc(var(--p) * 46); top: calc(var(--p) * 50); width: calc(var(--p) * 660); height: calc(var(--p) * 204); display: grid; grid-template-columns: calc(var(--p) * 168) 1fr; }
.finder__side { background: rgba(236, 238, 242, 0.96); padding: calc(var(--p) * 18) calc(var(--p) * 10) 0; box-shadow: inset calc(var(--p) * -0.6) 0 0 rgba(0, 0, 0, 0.08); }
.finder__side .lights { margin: 0 0 calc(var(--p) * 20) calc(var(--p) * 8); }
.finder__group { margin: 0 0 calc(var(--p) * 7) calc(var(--p) * 10); color: rgba(29, 29, 31, 0.45); font-size: calc(var(--p) * 11); font-weight: 600; }
.finder__item { display: flex; align-items: center; gap: calc(var(--p) * 7); height: calc(var(--p) * 26); padding: 0 calc(var(--p) * 9); border-radius: calc(var(--p) * 6); }
.finder__item svg { width: calc(var(--p) * 15); height: calc(var(--p) * 15); color: var(--mac-blue); }
.finder__item.sel { background: rgba(29, 29, 31, 0.1); }
.finder__main { display: flex; flex-direction: column; min-width: 0; }
.finder__bar { display: flex; align-items: center; gap: calc(var(--p) * 14); height: calc(var(--p) * 52); padding: 0 calc(var(--p) * 16); }
.finder__bar svg { width: calc(var(--p) * 15); height: calc(var(--p) * 15); color: rgba(29, 29, 31, 0.55); }
.finder__bar b { font-size: calc(var(--p) * 15); font-weight: 700; }
.finder__bar .push { margin-left: auto; }
.finder__head, .finder__row { display: grid; grid-template-columns: minmax(0, 1fr) calc(var(--p) * 180) calc(var(--p) * 52); align-items: center; gap: calc(var(--p) * 10); padding: 0 calc(var(--p) * 16); }
.finder__head { height: calc(var(--p) * 26); color: rgba(29, 29, 31, 0.5); font-size: calc(var(--p) * 11); font-weight: 500; box-shadow: inset 0 calc(var(--p) * -0.6) 0 rgba(0, 0, 0, 0.08); }
.finder__row { height: calc(var(--p) * 25); }
.finder__row:nth-child(odd) { background: #f4f5f7; }
.finder__row span:first-child { display: flex; align-items: center; gap: calc(var(--p) * 8); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.finder__row span + span { color: rgba(29, 29, 31, 0.5); white-space: nowrap; overflow: hidden; }
.finder__rows { overflow: hidden; }
.finder__row svg { width: calc(var(--p) * 17); height: calc(var(--p) * 17); flex: none; }

/* Two things on the desktop. */
.desk-icons { position: absolute; right: calc(var(--p) * 30); top: calc(var(--p) * 44); display: grid; gap: calc(var(--p) * 18); justify-items: center; }
.desk-icon { display: grid; justify-items: center; gap: calc(var(--p) * 5); width: calc(var(--p) * 92); color: var(--ink); font: 500 calc(var(--p) * 12) / 1.2 var(--sans); text-align: center; letter-spacing: -0.01em; }
.desk-icon svg { width: calc(var(--p) * 60); height: calc(var(--p) * 60); filter: drop-shadow(0 calc(var(--p) * 2) calc(var(--p) * 4) rgba(26, 36, 58, 0.22)); }
.desk-icon .shot { width: calc(var(--p) * 62); height: calc(var(--p) * 40); margin: calc(var(--p) * 10) 0; border: calc(var(--p) * 2.5) solid #fff; border-radius: calc(var(--p) * 2); background: var(--wall-tone) var(--wall) center 70% / cover; box-shadow: 0 calc(var(--p) * 2) calc(var(--p) * 6) rgba(26, 36, 58, 0.3); }

/* Typebar itself: the pill over the board, at the bottom of the screen. */
.overlay {
  --u: calc(var(--p) * 46);
  position: absolute;
  left: 50%;
  bottom: calc(var(--p) * 22);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--u) * 0.3);
}
.overlay__pillrow { display: flex; align-items: flex-end; justify-content: center; min-height: calc(var(--u) * 1.3); width: 100%; }
.overlay__board { position: relative; }
.overlay__tag {
  position: absolute;
  left: 50%;
  bottom: calc(var(--u) * -0.62);
  transform: translateX(-50%);
  padding: calc(var(--u) * 0.06) calc(var(--u) * 0.22);
  border-radius: 999px;
  background: rgba(22, 23, 27, 0.86);
  color: #f1f2f5;
  font: 600 max(10px, calc(var(--u) * 0.25)) / 1.3 var(--sans);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.overlay.is-layer .overlay__tag { opacity: 1; }
.screen noscript img { position: absolute; left: 50%; bottom: 3%; width: 62%; transform: translateX(-50%); }

/* On a phone the screen crops to Typebar: the board as wide as the screen, the window off to the side. */
@container screen (max-width: 640px) {
  .finder, .desk-icons, .menubar .wide { display: none; }
  .screen > * { --p: calc(100cqw / 640); }
  .overlay { --u: calc((100cqw - 14px) / 15.12); bottom: calc(var(--u) * 0.9); }
}
@media (max-width: 700px) {
  .screen { aspect-ratio: 4 / 3.25; background-position: 30% 62%; }
  .glow { aspect-ratio: 4 / 3.25; filter: blur(40px) saturate(1.3); }
}

.stage__under { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: 22px; font-size: 15px; color: var(--graphite); }
.stage__hint { max-width: 40em; }
.stage__hint .touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .stage__hint .desk-hint { display: none; }
  .stage__hint .touch { display: inline; }
}
.replay { margin-left: 4px; padding: 0; border: 0; background: none; color: var(--link); font-size: 15px; }
.replay:hover { text-decoration: underline; text-underline-offset: 3px; }
.looks { display: flex; align-items: center; gap: 8px; }
.looks__label { margin-right: 6px; font-size: 13px; }
.look { position: relative; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--wall-tone) var(--wall) 30% 70% / 260% auto no-repeat; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); }
.look i { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.9), 0 1px 3px rgba(0, 0, 0, 0.3); }
.look[aria-pressed="true"]::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px var(--ink); }
.look span { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 4px 8px; border-radius: 6px; background: var(--ink); color: #fff; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.look:hover span, .look:focus-visible span { opacity: 1; }

/* ---------------------------------------------------------------- the board (theme-driven) */
.kb {
  --plate: linear-gradient(180deg, #2b2c30, #18191b);
  --plate-shadow: 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --plate-blur: 0px;
  --plate-radius: 0.39;
  --cap: #2c2d31;
  --cap-mod: #26272b;
  --cap-accent: #26272b;
  --cap-side: #0b0b0d;
  --depth: 0.0435;
  --radius: 0.13;
  --ring: transparent;
  --legend: #ececef;
  --legend-mod: #b9bac0;
  --legend-accent: #ececef;
  --font: -apple-system, "SF Pro Text", "Helvetica Neue", sans-serif;
  --weight: 500;
  --lsize: 0.326;
  --modsize: 0.2065;
  --press: #3d4351;
  --press-legend: #ffffff;
  --glow: rgba(120, 160, 255, 0.45);
  --glow-size: 0.217;
  --trail: 260ms;
  --cheat: #a9bdff;
  --cheat-bg: #2f3548;
  --tshadow: none;
  position: relative;
  padding: calc(var(--u) * 0.304);
  background: var(--plate);
  border-radius: calc(var(--u) * var(--plate-radius));
  box-shadow: var(--plate-shadow);
  -webkit-backdrop-filter: blur(var(--plate-blur));
  backdrop-filter: blur(var(--plate-blur));
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.keys { position: relative; width: calc(var(--u) * 14.5); height: calc(var(--u) * 5.62); }
.key {
  position: absolute;
  left: calc(var(--x) * var(--u) + var(--u) * 0.054);
  top: calc(var(--y) * var(--u) + var(--u) * 0.054);
  width: calc(var(--w) * var(--u) - var(--u) * 0.109);
  height: calc(var(--h) * var(--u) - var(--u) * 0.109);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cap);
  color: var(--legend);
  border-radius: calc(var(--u) * var(--radius));
  font: var(--weight) calc(var(--u) * var(--lsize)) / 1 var(--font);
  letter-spacing: 0;
  text-shadow: var(--tshadow);
  box-shadow: inset 0 0 0 1px var(--ring), 0 max(1px, calc(var(--u) * var(--depth))) 0 var(--cap-side), 0 calc(var(--u) * var(--depth) + 1px) 2px rgba(0, 0, 0, 0.18);
  transition: transform 90ms ease-out, box-shadow var(--trail) ease-out, color var(--trail) ease-out, opacity 0.15s;
  cursor: pointer;
}
.key::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--press); opacity: 0; transition: opacity var(--trail) ease-out; pointer-events: none; }
.key.mod, .key.fn { background: var(--cap-mod); color: var(--legend-mod); }
.key.accent { background: var(--cap-accent); color: var(--legend-accent); }
.key > span { position: relative; z-index: 1; }
.key.down {
  transform: translateY(calc(var(--u) * var(--depth) * 0.8));
  color: var(--press-legend);
  transition: none;
  box-shadow: inset 0 0 0 1px var(--ring), 0 calc(var(--u) * var(--depth) * 0.2) 0 var(--cap-side), 0 0 calc(var(--u) * var(--glow-size)) var(--glow);
}
.key.down::after { opacity: 1; transition: none; }
.base { display: block; text-align: center; }
.dual { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.06); font-size: calc(var(--u) * var(--lsize) * 0.78); }
.m { position: absolute !important; inset: calc(var(--u) * 0.11) calc(var(--u) * 0.15); font-size: calc(var(--u) * var(--modsize)); }
.m em { position: absolute; left: 0; bottom: 0; font-style: normal; letter-spacing: 0.01em; white-space: nowrap; }
.m b { position: absolute; right: 0; top: 0; font-weight: 400; font-size: calc(var(--u) * var(--modsize) * 1.3); }
.m.r em { left: auto; right: 0; }
.m.r b { right: auto; left: 0; }
.fnk { display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.04); font-size: calc(var(--u) * 0.174); }
.fnk svg { width: calc(var(--u) * 0.28); height: calc(var(--u) * 0.28); }
.led { position: absolute !important; left: calc(var(--u) * 0.15); top: calc(var(--u) * 0.13); width: calc(var(--u) * 0.087); height: calc(var(--u) * 0.087); border-radius: 50%; background: rgba(127, 127, 127, 0.35); z-index: 2; }
.key.caps-on .led { background: #30d158; box-shadow: 0 0 6px #30d158; }
.arrow { font-size: calc(var(--u) * 0.174); }
.kb[data-align="tl"] .key.alpha .base { position: absolute; top: calc(var(--u) * 0.15); left: calc(var(--u) * 0.2); text-align: left; }
.kb[data-align="tl"] .key.alpha .dual { position: absolute; top: calc(var(--u) * 0.13); left: calc(var(--u) * 0.2); align-items: flex-start; }
.cheat {
  position: absolute !important;
  inset: calc(var(--u) * 0.09) calc(var(--u) * 0.08) calc(var(--u) * 0.1);
  display: none;
  align-items: flex-end;
  font: 600 calc(var(--u) * 0.18) / 1.1 var(--sans);
  letter-spacing: -0.01em;
  color: var(--cheat);
  text-align: left;
  overflow: hidden;
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}
.cheat i { position: absolute; top: 0; left: 0; font-style: normal; font-size: calc(var(--u) * 0.185); opacity: 0.6; font-family: var(--font); }
.kb.layer .key .base, .kb.layer .key .m, .kb.layer .key .fnk { opacity: 0; }
.kb.layer .key.has .cheat { display: flex; }
.kb.layer .key.has { background: var(--cheat-bg); }
.kb.layer .key.has::after { background: var(--press); }
.kb.layer .key:not(.has):not(.held) { opacity: 0.42; }
.kb.layer .key.held .base, .kb.layer .key.held .m { opacity: 1; }
.kb.sym .cheat { align-items: center; justify-content: center; font: 500 calc(var(--u) * 0.35) / 1 var(--font); color: var(--legend); }
.kb.sym .cheat i { display: none; }
.kb.layer.sym .key.has { background: var(--cap); }
/* A layer with fill=blank: the keys it leaves out show nothing at all. */
.kb.blank .key:not(.has) { opacity: 0.3; }
.kb.blank .key:not(.has) > span { visibility: hidden; }
/* On a narrow board a name on a key would be a few pixels tall: the keys that have a shortcut light,
   keep their own legend, and tapping one names it in the pill. */
@container screen (max-width: 640px) {
  .kb.layer .key .cheat { display: none !important; }
  .kb.layer .key .base, .kb.layer .key .m, .kb.layer .key .fnk { opacity: 1; }
  .kb.layer .key.has { color: var(--cheat); }
  .overlay__tag::after { content: ": tap a lit key"; }
}

/* ---------------------------------------------------------------- the pill (theme-driven) */
.pill {
  --pill-bg: rgba(22, 23, 27, 0.88);
  --pill-fg: #f1f2f5;
  --chip: #2a2c32;
  --chip-fg: #f1f2f5;
  --kbd: #3a3d45;
  --kbd-fg: #ffffff;
  --name: #a9aebb;
  --pf: max(11px, calc(var(--u) * 0.41));
  display: flex;
  align-items: center;
  gap: calc(var(--pf) * 0.42);
  padding: calc(var(--pf) * 0.42);
  max-width: 100%;
  overflow: hidden;
  background: var(--pill-bg);
  color: var(--pill-fg);
  border-radius: calc(var(--pf) * 0.84);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  font-family: var(--sans);
  letter-spacing: -0.01em;
}
.pill:empty { display: none; }
.chip {
  display: flex;
  align-items: center;
  gap: calc(var(--pf) * 0.42);
  padding: calc(var(--pf) * 0.37) calc(var(--pf) * 0.63);
  min-height: calc(var(--pf) * 2.2);
  background: var(--chip);
  color: var(--chip-fg);
  border-radius: calc(var(--pf) * 0.53);
  font: 600 var(--pf) / 1 var(--sans);
  white-space: pre;
  flex: none;
  animation: chipin 0.18s ease-out;
  transition: opacity 0.3s, transform 0.3s;
}
.chip.out { opacity: 0; transform: translateY(6px); }
@keyframes chipin { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
.kc { display: inline-grid; place-items: center; min-width: calc(var(--pf) * 1.47); height: calc(var(--pf) * 1.58); padding: 0 calc(var(--pf) * 0.37); border-radius: calc(var(--pf) * 0.37); background: var(--kbd); color: var(--kbd-fg); font: 600 calc(var(--pf) * 0.9) / 1 var(--sans); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.14); }
.kcs { display: flex; gap: calc(var(--pf) * 0.2); }
.nm { font: 500 calc(var(--pf) * 0.84) / 1 var(--sans); color: var(--name); }
.rep { font: 600 calc(var(--pf) * 0.74) / 1 var(--mono); color: var(--name); }
.caret { display: inline-block; width: 2px; height: calc(var(--pf) * 1.1); background: currentColor; margin-left: 1px; animation: blink 1s steps(1) infinite; vertical-align: middle; }
@keyframes blink { 50% { opacity: 0; } }
/* The pill's three styles, as Settings names them. */
.pill--light { --pill-bg: rgba(250, 251, 253, 0.92); --chip: #ffffff; --chip-fg: #1d2128; --kbd: #eceef3; --kbd-fg: #1d2128; --name: #5a6170; }
.pill--dark { --pill-bg: rgba(22, 23, 27, 0.88); --chip: #2a2c32; --chip-fg: #f1f2f5; --kbd: #3a3d45; --kbd-fg: #ffffff; --name: #a9aebb; }
.pill--glass { --pill-bg: rgba(255, 255, 255, 0.3); --chip: rgba(255, 255, 255, 0.36); --chip-fg: #0f1729; --kbd: rgba(255, 255, 255, 0.64); --kbd-fg: #0f1729; --name: rgba(15, 23, 41, 0.72); }
.pill--still .chip { animation: none; }

/* ---------------------------------------------------------------- plates: one picture, one label */
.plate { margin-top: var(--gap-plate); }
.plate--first { margin-top: clamp(120px, 15vw, 200px); }
.scene {
  position: relative;
  container: scene / inline-size;
  overflow: hidden;
  border-radius: clamp(12px, 1.6vw, 22px);
  background: var(--wall-tone, #b9c5d5) var(--wall, url(../assets/desk.jpg)) center / cover no-repeat;
  box-shadow: var(--picture-shadow);
  isolation: isolate;
}
.plate > .scene, .pair { width: var(--wide); margin-inline: calc((100% - var(--wide)) / 2); }
.scene > * { --p: calc(100cqw / 1200); }
.scene--wide { aspect-ratio: 1200 / 600; }
.scene--tall { aspect-ratio: 1200 / 760; }
.scene--half { aspect-ratio: 600 / 470; }
.scene--half > * { --p: calc(100cqw / 600); }
.scene img.cut { position: absolute; left: 50%; top: 50%; width: 80%; height: auto; transform: translate(-50%, -48%); }

.label { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px 56px; margin-top: clamp(28px, 3.4vw, 44px); }
.label h2 { font: 600 clamp(32px, 3.9vw, 52px) / 1.04 var(--display); letter-spacing: -0.038em; }
.label__body { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--ink-2); }
.label__body > p + p, .label__body > p + .facts { margin-top: 18px; }
.facts { display: grid; gap: 0; margin-top: 22px; }
.facts li { padding: 13px 0; border-top: 1px solid var(--rule-2); font-size: 16px; color: var(--graphite); line-height: 1.5; }
.facts li b { color: var(--ink); font-weight: 600; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 3.2vw, 44px); }
.pair .label { display: block; margin-top: 26px; }
/* the pair's words keep to the page's own column, under pictures that run wider */
.pair > :first-child .label { padding-left: var(--inset); }
.pair > :last-child .label { padding-right: var(--inset); }
.pair .label h2 { font-size: clamp(28px, 2.7vw, 38px); }
.pair .label__body { margin-top: 12px; }

/* The pill plate: the three styles on the desk. */
.pills-scene { position: absolute; inset: 0; display: grid; place-content: center; gap: calc(var(--p) * 24); --u: calc(var(--p) * 41); }
.pills-scene .pill:nth-child(1) { transform: translateX(calc(var(--p) * -120)); }
.pills-scene .pill:nth-child(3) { transform: translateX(calc(var(--p) * 110)); }

/* Clicks: a window, the pointer, a ripple, a halo, and the pill naming the click. */
.clicks { position: absolute; inset: 0; }
.clicks .win { left: calc(var(--p) * 70); top: calc(var(--p) * 70); width: calc(var(--p) * 460); height: calc(var(--p) * 250); padding: calc(var(--p) * 18) calc(var(--p) * 22); }
.clicks .lights { margin-bottom: calc(var(--p) * 26); }
.clicks h4 { margin: 0 0 calc(var(--p) * 10); font: 700 calc(var(--p) * 22) / 1.1 var(--display); letter-spacing: -0.02em; }
.clicks .lines i { display: block; height: calc(var(--p) * 9); margin-bottom: calc(var(--p) * 9); border-radius: 99px; background: #e9ebef; }
.clicks .lines i:nth-child(2) { width: 84%; }
.clicks .lines i:nth-child(3) { width: 62%; }
.clicks .publish { position: absolute; right: calc(var(--p) * 22); bottom: calc(var(--p) * 20); padding: calc(var(--p) * 7) calc(var(--p) * 16); border-radius: calc(var(--p) * 7); background: var(--mac-blue); color: #fff; font: 600 calc(var(--p) * 14) / 1.2 var(--sans); }
.ptr { position: absolute; left: 0; top: 0; width: calc(var(--p) * 22); height: auto; z-index: 3; transform: translate(calc(var(--p) * 318), calc(var(--p) * 398)); }
.halo { position: absolute; left: 0; top: 0; width: calc(var(--p) * 70); height: calc(var(--p) * 70); margin: calc(var(--p) * -33) 0 0 calc(var(--p) * -33); border-radius: 50%; background: rgba(0, 122, 255, 0.16); box-shadow: 0 0 0 calc(var(--p) * 1.5) rgba(0, 122, 255, 0.35); z-index: 2; transform: translate(calc(var(--p) * 320), calc(var(--p) * 400)); }
.ripple { position: absolute; left: calc(var(--p) * 466); top: calc(var(--p) * 285); width: calc(var(--p) * 60); height: calc(var(--p) * 60); margin: calc(var(--p) * -30) 0 0 calc(var(--p) * -30); border-radius: 50%; border: calc(var(--p) * 2.5) solid rgba(0, 122, 255, 0.9); opacity: 0; z-index: 2; }
.clicks .pill { position: absolute; left: 50%; bottom: calc(var(--p) * 26); transform: translateX(-50%); --u: calc(var(--p) * 46); }
.clicks .pill .chip { animation: none; }
.is-playing .ptr, .is-playing .halo { animation: tb-pointer 4.2s var(--ease) infinite; }
.is-playing .ripple { animation: tb-ripple 4.2s ease-out infinite; }
.is-playing .clicks .pill { animation: tb-pillclick 4.2s linear infinite; }
@keyframes tb-pointer {
  0%, 8% { transform: translate(calc(var(--p) * 320), calc(var(--p) * 400)); }
  40%, 70% { transform: translate(calc(var(--p) * 466), calc(var(--p) * 285)); }
  100% { transform: translate(calc(var(--p) * 320), calc(var(--p) * 400)); }
}
.is-playing .ptr { animation-name: tb-pointer-tip; }
@keyframes tb-pointer-tip {
  0%, 8% { transform: translate(calc(var(--p) * 318), calc(var(--p) * 398)); }
  40%, 70% { transform: translate(calc(var(--p) * 464), calc(var(--p) * 283)); }
  100% { transform: translate(calc(var(--p) * 318), calc(var(--p) * 398)); }
}
@keyframes tb-ripple {
  0%, 44% { opacity: 0; transform: scale(0.3); }
  45% { opacity: 1; transform: scale(0.3); }
  62% { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; transform: scale(1.5); }
}
@keyframes tb-pillclick {
  0%, 44% { opacity: 0; }
  46%, 86% { opacity: 1; }
  92%, 100% { opacity: 0; }
}
.clicks .pill { opacity: 1; }
.is-playing .clicks .pill { opacity: 0; }

/* Sounds: keys spread from left to right, with the place each one sounds from. */
.sounds { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: calc(var(--p) * 30); --u: calc(var(--p) * 44); }
.sounds .kb { --plate-radius: 0.3; padding: calc(var(--u) * 0.2); }
.sounds .row { position: relative; display: flex; gap: calc(var(--u) * 0.11); }
.sounds .key { position: relative; left: auto; top: auto; width: calc(var(--u) * 0.89); height: calc(var(--u) * 0.89); }
.sounds .key.wide { width: calc(var(--u) * 2.4); }
.pan { position: relative; width: calc(var(--p) * 380); height: calc(var(--p) * 30); }
.pan::before { content: ""; position: absolute; left: calc(var(--p) * 22); right: calc(var(--p) * 22); top: 50%; height: calc(var(--p) * 2); border-radius: 2px; background: rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 calc(var(--p) * 0.5) rgba(26, 36, 58, 0.12); }
.pan b { position: absolute; top: 50%; transform: translateY(-50%); color: rgba(29, 29, 31, 0.6); font: 600 calc(var(--p) * 12) / 1 var(--sans); }
.w-midnight .pan b { color: rgba(255, 255, 255, 0.72); }
.w-midnight .pan::before { background: rgba(255, 255, 255, 0.35); }
.pan b:first-child { left: 0; }
.pan b:last-of-type { right: 0; }
.pan i { position: absolute; top: 50%; left: 50%; width: calc(var(--p) * 14); height: calc(var(--p) * 14); margin: calc(var(--p) * -7) 0 0 calc(var(--p) * -7); border-radius: 50%; background: #ffffff; box-shadow: 0 calc(var(--p) * 1) calc(var(--p) * 4) rgba(26, 36, 58, 0.35); transition: left 0.18s var(--ease); }

/* Privacy: a sign-in sheet, the password field in focus, and the pill keeping it to itself. */
.privacy { position: absolute; inset: 0; }
.privacy .menubar .rec { color: var(--ink); }
.signin { left: 50%; top: calc(var(--p) * 110); width: calc(var(--p) * 420); transform: translateX(-50%); padding: calc(var(--p) * 18) calc(var(--p) * 28) calc(var(--p) * 26); }
.signin .lights { margin-bottom: calc(var(--p) * 22); }
.signin h4 { margin: 0 0 calc(var(--p) * 4); font: 700 calc(var(--p) * 19) / 1.2 var(--display); letter-spacing: -0.02em; text-align: center; }
.signin p { margin: 0 0 calc(var(--p) * 20); color: rgba(29, 29, 31, 0.55); font-size: calc(var(--p) * 13); text-align: center; }
.field { display: flex; align-items: center; height: calc(var(--p) * 32); margin-bottom: calc(var(--p) * 10); padding: 0 calc(var(--p) * 10); border-radius: calc(var(--p) * 7); background: #ffffff; box-shadow: 0 0 0 calc(var(--p) * 0.8) rgba(0, 0, 0, 0.16); color: var(--ink); font-size: calc(var(--p) * 14); }
.field.focus { box-shadow: 0 0 0 calc(var(--p) * 0.8) rgba(0, 122, 255, 0.8), 0 0 0 calc(var(--p) * 3.5) rgba(0, 122, 255, 0.28); letter-spacing: 0.18em; }
.field .caret { height: calc(var(--p) * 16); width: calc(var(--p) * 1.5); margin-left: calc(var(--p) * 1); background: var(--ink); }
.signin .go { display: block; margin: calc(var(--p) * 18) auto 0; padding: calc(var(--p) * 7) calc(var(--p) * 22); border-radius: calc(var(--p) * 7); background: var(--mac-blue); color: #fff; font: 600 calc(var(--p) * 14) / 1.2 var(--sans); width: max-content; }
.privacy .pill { position: absolute; left: 50%; bottom: calc(var(--p) * 56); transform: translateX(-50%); --u: calc(var(--p) * 52); }

/* Automation: a light Terminal, and the layer its link put on the board. */
.auto { position: absolute; inset: 0; }
.term { left: calc(var(--p) * 56); top: calc(var(--p) * 56); width: calc(var(--p) * 640); height: calc(var(--p) * 238); }
.term__bar { display: grid; grid-template-columns: auto 1fr auto; align-items: center; height: calc(var(--p) * 30); padding: 0 calc(var(--p) * 12); background: #ececee; box-shadow: inset 0 calc(var(--p) * -0.6) 0 rgba(0, 0, 0, 0.1); color: rgba(29, 29, 31, 0.6); font-size: calc(var(--p) * 13); font-weight: 600; }
.term__bar span { text-align: center; }
.term pre { margin: 0; padding: calc(var(--p) * 12) calc(var(--p) * 14); color: #1d1d1f; font: 400 calc(var(--p) * 13) / 1.5 var(--mono); white-space: pre-wrap; word-break: break-all; }
.term pre .dim { color: rgba(29, 29, 31, 0.5); }
.auto .stack { position: absolute; right: calc(var(--p) * 44); bottom: calc(var(--p) * 40); --u: calc(var(--p) * 34); }

/* Themes: all forty, lightest row first, each board at the same scale (Scripts/site-art.py). */
.wall {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 22px) clamp(8px, 1.6vw, 28px);
  width: var(--wide);
  margin-inline: calc((100% - var(--wide)) / 2);
}
.wall li { display: grid; justify-items: center; }
.wall img { width: 100%; height: auto; }
.wall span { margin-top: -5.5%; font-size: 13px; line-height: 1.3; color: var(--graphite); letter-spacing: -0.005em; }
.studio { margin-top: clamp(56px, 6vw, 88px); }

/* Themes: Theme Studio's own window. */
.studio-shot { position: absolute; left: 50%; top: 54%; width: 78%; height: auto; transform: translate(-50%, -50%); border-radius: calc(var(--p) * 12); box-shadow: 0 0 0 calc(var(--p) * 0.6) rgba(0, 0, 0, 0.4), 0 calc(var(--p) * 30) calc(var(--p) * 70) rgba(10, 16, 32, 0.45); }
.scene > .studio-shot { --p: calc(100cqw / 1200); }

/* ---------------------------------------------------------------- compare */
.section { margin-top: var(--gap-plate); }
.section__head { max-width: 46em; }
.section__head h2 { font: 600 clamp(32px, 3.9vw, 52px) / 1.04 var(--display); letter-spacing: -0.038em; }
.section__head p { margin-top: 16px; font-size: clamp(17px, 1.4vw, 19px); color: var(--ink-2); }
/* Positioned, so the table's hidden screen-reader words stay inside its scroller and never widen the page. */
.compare-wrap { position: relative; margin-top: 40px; overflow-x: auto; }
.compare { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.compare th, .compare td { padding: 16px 18px 16px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--rule-2); }
.compare thead th { padding-top: 0; border-top: 0; font: 600 15px / 1.3 var(--sans); color: var(--graphite); }
.compare thead th.us { color: var(--ink); }
.compare tbody th { width: 22%; font-weight: 600; color: var(--ink); }
.compare td { width: 26%; color: var(--graphite); }
.compare td.us { color: var(--ink); }
.compare td.none::before { content: ""; display: block; width: 14px; height: 1.5px; margin-top: 10px; background: rgba(29, 29, 31, 0.22); }
.compare-notes { margin-top: 26px; max-width: 54em; font-size: 14px; color: var(--graphite); }
.compare-notes p + p { margin-top: 8px; }
.compare-notes b { color: var(--ink-2); font-weight: 600; }

/* ---------------------------------------------------------------- price */
.price { text-align: center; }
.price__lede { max-width: 30em; margin: 18px auto 0; font-size: clamp(17px, 1.4vw, 19px); }
.terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 940px; margin: 48px auto 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.terms li { padding: 22px 16px; font-size: 15px; color: var(--graphite); }
.terms li + li { box-shadow: inset 1px 0 0 var(--rule-2); }
.terms b { display: block; margin-bottom: 4px; color: var(--ink); font: 600 19px / 1.25 var(--display); letter-spacing: -0.02em; }
.terms a { color: var(--link); }
.price__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; }
.price__note { margin-top: 18px; font-size: 14px; }

/* ---------------------------------------------------------------- specs */
.specs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 56px; margin-top: 36px; }
.specs div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 20px 0; border-top: 1px solid var(--rule-2); }
.specs dt { font-weight: 600; color: var(--ink); }
.specs dd { color: var(--graphite); }

/* ---------------------------------------------------------------- faq */
.faq { max-width: 860px; margin-top: 32px; border-bottom: 1px solid var(--rule-2); }
.faq details { border-top: 1px solid var(--rule-2); }
.faq summary { position: relative; display: block; padding: 22px 44px 22px 0; cursor: pointer; font: 600 clamp(18px, 1.6vw, 21px) / 1.3 var(--display); letter-spacing: -0.02em; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 14px; height: 1.6px; background: var(--ink); border-radius: 2px; transition: transform 0.25s var(--ease); }
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); }
.faq__body { padding: 0 44px 24px 0; color: var(--ink-2); }
.faq__body p + p { margin-top: 12px; }

/* ---------------------------------------------------------------- the last word, footer */
.coda {
  margin-top: var(--gap-plate);
  padding: clamp(80px, 10vw, 136px) 0;
  /* a soft shade behind the words, so no fold's edge runs through them */
  background: radial-gradient(56% 52% at 50% 50%, rgba(4, 8, 28, 0.6), rgba(4, 8, 28, 0) 100%), var(--wall-tone) var(--wall) center 70% / cover no-repeat;
  color: #ffffff;
  text-align: center;
}
.coda img { width: 104px; height: 104px; margin: 0 auto 24px; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }
.coda h2 { font: 600 clamp(40px, 5.6vw, 76px) / 1 var(--display); letter-spacing: -0.045em; }
.coda p { margin-top: 14px; color: rgba(255, 255, 255, 0.74); }
.coda img + .price__lede { margin-top: 0; }
.coda { --rule: rgba(255, 255, 255, 0.2); --rule-2: rgba(255, 255, 255, 0.14); }
.coda .terms li { color: rgba(255, 255, 255, 0.7); }
.coda .terms b { color: #ffffff; }
.coda .terms a, .coda .price__note a { color: #a9c7ff; }
.coda .btn--ink { background: #ffffff; color: var(--ink); }
.coda .btn--ink:hover { background: #eef1f6; }
.coda .btn--line { color: #ffffff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45); }
.coda .btn--line:hover { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85); }
.coda :focus-visible { outline-color: #ffffff; }
.footer { padding: 28px 0 40px; background: var(--mist); color: var(--graphite); font-size: 13px; }
.coda + .footer { padding-top: 0; }
.footer__in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--rule); }
.footer a { color: var(--ink-2); }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* ---------------------------------------------------------------- pages (thanks, privacy) */
.page { padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 120px); }
.page .wrap { max-width: 760px; }
.page h1 { font: 600 clamp(40px, 5.4vw, 64px) / 1.03 var(--display); letter-spacing: -0.045em; }
.page .lede { margin-top: 18px; font-size: clamp(18px, 1.55vw, 21px); color: var(--ink-2); }
.page h2 { margin: 44px 0 12px; font: 600 24px / 1.2 var(--display); letter-spacing: -0.025em; }
.page p { margin-top: 12px; }
.page ul { margin-top: 12px; }
.page ul li { position: relative; padding: 10px 0 10px 20px; border-top: 1px solid var(--rule-2); color: var(--ink-2); }
.page ul li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 6px; height: 6px; border-radius: 50%; background: rgba(29, 29, 31, 0.28); }
.card { margin-top: 28px; padding: 26px 28px; border-radius: 18px; background: var(--mist); }
.card h2 { margin: 0 0 8px; font-size: 21px; }
.card .btn { margin-top: 18px; }

/* ---------------------------------------------------------------- narrow screens */
@media (max-width: 1020px) {
  .nav__links { display: none; }
  .hero__head { grid-template-columns: 1fr; align-items: start; }
  .hero__aside { padding-bottom: 0; }
  .label { grid-template-columns: 1fr; }
  .specs { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pair { grid-template-columns: 1fr; gap: var(--gap-plate); }
  .scene--wide { aspect-ratio: 1200 / 760; }
  .scene img.cut { width: 94%; }
  .pills-scene { --u: calc(var(--p) * 74); }
  .pills-scene .pill:nth-child(1), .pills-scene .pill:nth-child(3) { transform: none; }
  .pills-scene .pill .chip:nth-child(-n + 2) { display: none; }
  .term { left: calc(var(--p) * 30); top: calc(var(--p) * 30); width: calc(var(--p) * 1140); height: calc(var(--p) * 480); }
  .term pre, .term__bar { font-size: calc(var(--p) * 26); }
  .term__bar { height: calc(var(--p) * 56); }
  .auto .stack { right: 50%; transform: translateX(50%); bottom: calc(var(--p) * 30); --u: calc(var(--p) * 60); }
  .studio-shot { width: 94%; }
  .wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .wall span { font-size: 11px; }
  .terms { grid-template-columns: 1fr 1fr; }
  .terms li:nth-child(3) { box-shadow: none; }
  .terms li:nth-child(n + 3) { border-top: 1px solid var(--rule-2); }
  .specs div { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 520px) {
  .nav__cta .btn--line { display: none; }
  .hero__title { font-size: clamp(46px, 14vw, 64px); }
  .hero__title .l { white-space: normal; }
  .hero__cta .btn { flex: 1 1 auto; }
  .stage__under { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero__title[data-type]:not(.is-ready) { visibility: visible; animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}