/* Composa product page. One family (Instrument Sans), Apple's neutrals, Composa's own interface blue as the only accent. */

:root {
  --paper: #ffffff;
  --mist: #f5f5f7;
  --ink: #1d1d1f;
  --slate: #6e6e73;
  --hair: #d2d2d7;
  --night: #000000;
  --night-ink: #f5f5f7;
  --night-slate: #a1a1a6;
  --night-hair: #333336;
  --accent: #3d9bff;
  --link: #0b6bcb;
  --link-night: #6cb4ff;

  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --gutter: clamp(16px, 5vw, 56px);
  --wide: 1180px;
  --section: clamp(96px, 11vw, 168px);

  --t-hero: clamp(3.25rem, 1.4rem + 7.4vw, 7.25rem);
  --t-display: clamp(2.5rem, 1.35rem + 4.6vw, 4.75rem);
  --t-lede: clamp(1.1875rem, 1rem + 0.75vw, 1.5rem);
  --t-intro: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
  --t-h3: 1.1875rem;
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 64px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }
h1, h2, h3, p, dl, dd, ol, ul { margin: 0; }
ol, ul { padding: 0; list-style: none; }

h1, h2 {
  font-weight: 600;
  text-wrap: balance;
}

h2 {
  font-size: var(--t-display);
  line-height: 1.04;
  letter-spacing: -0.038em;
}

h3 {
  font-size: var(--t-h3);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -0.012em;
}

p { text-wrap: pretty; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
}
.skip:focus { top: 12px; }

/* Navigation */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgb(255 255 255 / 0.76);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgb(0 0 0 / 0.08);
}

.nav-inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  height: 52px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  font-size: var(--t-small);
}

.nav-back {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--slate);
}
.nav-back svg { width: 14px; height: 14px; }
.nav-back:hover { color: var(--ink); text-decoration: none; }

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.nav-brand:hover { text-decoration: none; }

.nav-links {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
}
.nav-links a { color: var(--ink); opacity: 0.8; }
.nav-links a:hover { opacity: 1; text-decoration: none; }

.nav-links .nav-download {
  opacity: 1;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
}

/* Buttons */

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background-color 160ms ease, border-color 160ms ease;
}
.button:hover { text-decoration: none; }
.button svg { width: 18px; height: 18px; flex: none; }
/* Tux is a narrow shape; drawn a little larger it weighs the same as the other marks. */
.button .icon-tux { width: 21px; height: 21px; margin: -2px -1px; }

.button-primary { background: var(--ink); color: var(--paper); }
.button-primary:hover { background: #3a3a3c; }

.button-secondary {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--hair);
}
.button-secondary:hover { border-color: #b0b0b5; }

/* Hero */

.hero {
  padding: clamp(64px, 9vw, 120px) var(--gutter) 0;
  text-align: center;
  overflow: clip;
}

.hero-icon {
  width: clamp(72px, 8vw, 96px);
  height: auto;
  margin: 0 auto 28px;
}

.hero h1 {
  font-size: var(--t-hero);
  line-height: 0.98;
  letter-spacing: -0.05em;
}

.hero-lede {
  max-width: 27em;
  margin: 24px auto 40px;
  font-size: var(--t-lede);
  line-height: 1.38;
  color: var(--slate);
  letter-spacing: -0.01em;
}

.showcase {
  position: relative;
  max-width: var(--wide);
  margin: clamp(56px, 7vw, 88px) auto 0;
  padding-bottom: clamp(56px, 8vw, 120px);
}

.showcase-window {
  position: relative;
  z-index: 1;
  border-radius: clamp(8px, 1.1vw, 14px);
  overflow: hidden;
  background: #1f1f1f;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.1),
    0 2px 6px rgb(0 0 0 / 0.08),
    0 40px 90px -30px rgb(29 29 31 / 0.55);
}

.showcase-panel {
  position: absolute;
  z-index: 2;
  width: clamp(200px, 21vw, 264px);
  border-radius: 10px;
  overflow: hidden;
  background: #2a2a2a;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.14),
    0 30px 70px -20px rgb(0 0 0 / 0.45);
}

/* The panels hang off the window's sides, clear of its Layers panel, and the page edge cuts them as a desk would. */
.showcase-panel-left {
  left: calc(-1 * clamp(40px, 8.5vw, 140px));
  top: 28%;
}
.showcase-panel-left img {
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent);
  mask-image: linear-gradient(to bottom, #000 78%, transparent);
}

.showcase-panel-right {
  right: calc(-1 * clamp(40px, 8.5vw, 140px));
  bottom: 0;
}

@media (max-width: 1024px) {
  .showcase-panel { display: none; }
}

/* Shared section heads */

.section-head {
  max-width: 50rem;
  margin: 0 auto clamp(48px, 6vw, 80px);
  text-align: center;
}
.section-head p {
  max-width: 36em;
  margin: 22px auto 0;
  font-size: var(--t-intro);
  line-height: 1.45;
  color: var(--slate);
}

/* The exploded stack. Without script, or with reduced motion, it shows exploded and still. */

.stack {
  --t: 1;
  --e: 1;
  --l: 1;
  background: var(--night);
  color: var(--night-ink);
}

.stack-pin {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(8px, 2vh, 24px);
  padding: var(--section) var(--gutter) 0;
}

.is-animated .stack-track { height: 320vh; }
.is-animated .stack-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  padding-top: calc(52px + clamp(24px, 6vh, 64px));
  padding-bottom: clamp(16px, 4vh, 40px);
  overflow: hidden;
}

/* While the stack is pinned, a hint at its foot says there is more to scroll, and its line fills as the layers come
   apart. It fades once they are apart and labelled, and returns on the way back up. */
.stack-hint { display: none; }
.is-animated .stack-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(16px, 3.5vh, 32px);
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 10px;
  transform: translateX(-50%);
  opacity: var(--h, 1);
  pointer-events: none;
}
.stack-hint-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 8px 16px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  color: var(--night-ink);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
.stack-hint-pill svg {
  width: 16px;
  height: 16px;
  animation: stack-hint-bob 1.6s ease-in-out infinite;
}
.stack-hint-track {
  width: 96px;
  height: 2px;
  border-radius: 1px;
  background: rgb(255 255 255 / 0.18);
  overflow: hidden;
}
.stack-hint-track span {
  display: block;
  height: 100%;
  background: var(--night-ink);
  transform: scaleX(var(--k, 0));
  transform-origin: left center;
}
.is-hint-gone .stack-hint-pill svg { animation: none; }

@keyframes stack-hint-bob {
  0%, 100% { transform: translateY(-1px); }
  50% { transform: translateY(3px); }
}

.stack-copy {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}
.stack-copy p {
  max-width: 34em;
  margin: 18px auto 0;
  font-size: var(--t-intro);
  line-height: 1.45;
  color: var(--night-slate);
}

.stack-scene {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  perspective: 2600px;
  perspective-origin: 50% 40%;
  /* Room around a still, exploded stack for the planes that rise out of its frame. */
  padding: clamp(80px, 12vw, 180px) 0 clamp(80px, 10vw, 150px);
}
.is-animated .stack-scene { padding: 0; }

.stack-planes {
  --w: min(46vw, 640px);
  --gap: calc(var(--w) * 0.085);
  position: relative;
  width: var(--w);
  aspect-ratio: 16 / 10;
  transform-style: preserve-3d;
  --shift: -9%;
  transform:
    translateX(calc(var(--t) * var(--shift)))
    rotateX(calc(var(--t) * 57deg))
    rotateZ(calc(var(--t) * -34deg));
}
.is-animated .stack-planes { --w: min(46vw, 640px, (100svh - 400px) * 1.05); }

.plane {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc((var(--i) - 3.5) * var(--gap) * var(--e)));
  outline: 1px solid rgb(255 255 255 / calc(var(--e) * 0.2));
}

.plane img {
  width: 100%;
  height: 100%;
}

/* The rightmost corner once the stack is turned, where a label's leader line starts. */
.plane-anchor {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1px;
  height: 1px;
}

.plane-adjustment {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .4 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(135deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02));
  opacity: calc(var(--e) * 0.35);
}

/* Without script the labels are a plain list under the stack; the script lines them up with their planes. */
.stack-labels {
  display: grid;
  grid-template-columns: repeat(4, max-content);
  justify-content: center;
  gap: 16px 32px;
  margin-top: 24px;
  font-size: 0.9375rem;
  line-height: 1.3;
}
.stack-labels li { display: grid; gap: 1px; }
.stack-labels b { font-weight: 600; color: var(--night-ink); }
.stack-labels span { color: var(--night-slate); font-size: 0.8125rem; }

.stack-leaders { display: none; }

.is-placed .stack-labels {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
  pointer-events: none;
  opacity: var(--l);
}
.is-placed .stack-labels li {
  position: absolute;
  left: 0;
  top: 0;
  width: max-content;
  will-change: transform;
}
.is-placed .stack-leaders {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: var(--l);
}
.stack-leaders line { stroke: rgb(255 255 255 / 0.32); stroke-width: 1; }
.stack-leaders circle { fill: var(--night-ink); }

.stack-facts {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(40px, 6vw, 72px) var(--gutter) var(--section);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px clamp(24px, 3vw, 40px);
}
.stack-facts > div { padding-top: 20px; border-top: 1px solid var(--night-hair); }
.stack-facts p { margin-top: 8px; color: var(--night-slate); font-size: 1rem; }

/* Tools */

.tools {
  padding: var(--section) var(--gutter);
}

.rail-diagram {
  --row: 49px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(20px, 4vw, 48px);
}

.rail-image {
  width: 78px;
  height: auto;
  padding: 0;
  border-radius: 16px;
  background: #282828;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.08), 0 24px 50px -24px rgb(0 0 0 / 0.5);
}

.rail-list {
  width: min(100%, 460px);
}
.rail-list li {
  display: flex;
  align-items: center;
  gap: 6px;
  height: var(--row);
  border-bottom: 1px solid var(--mist);
  font-size: 1.0625rem;
}
.rail-list li:first-child { border-top: 1px solid var(--mist); }
.rail-list li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

kbd {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid var(--hair);
  border-radius: 7px;
  background: linear-gradient(#ffffff, #f5f5f7);
  box-shadow: 0 1px 0 var(--hair);
  color: var(--ink);
  font: 600 0.8125rem/1 var(--font);
}

.habits {
  max-width: 52rem;
  margin: clamp(56px, 7vw, 88px) auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 48px;
  color: var(--slate);
}
.habits li { line-height: 1.9; }
.habits kbd { min-width: 26px; height: 26px; margin: 0 2px; font-size: 0.75rem; vertical-align: 1px; }

/* Filters */

.filters {
  padding: var(--section) var(--gutter);
  background: var(--mist);
}

.compare {
  max-width: 1200px;
  margin: 0 auto;
}

.compare-frame {
  --pos: 50%;
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: clamp(12px, 1.6vw, 20px);
  overflow: hidden;
  background: #1a1230;
  box-shadow: 0 40px 80px -40px rgb(26 18 48 / 0.6);
  touch-action: pan-y;
  cursor: ew-resize;
  -webkit-user-select: none;
  user-select: none;
}

.compare-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The frame takes the pointer, so a drag moves the divider instead of picking up the picture. */
  pointer-events: none;
  -webkit-user-drag: none;
}

.compare-before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos);
  width: 2px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 12px rgb(0 0 0 / 0.35);
  pointer-events: none;
}
.compare-handle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 44'%3E%3Cpath d='M18 16l-6 6 6 6M26 16l6 6-6 6' fill='none' stroke='%231d1d1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 44px no-repeat,
    #fff;
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.3);
}
.compare-frame:has(.compare-range:focus-visible) .compare-handle::after {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.compare-range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
}

.compare-tag {
  position: absolute;
  top: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.42);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 500;
  pointer-events: none;
}
.compare-tag-before { left: 16px; }
.compare-tag-after { right: 16px; }

.segmented {
  display: flex;
  width: max-content;
  max-width: 100%;
  margin: 28px auto 0;
  padding: 4px;
  gap: 2px;
  border-radius: 999px;
  background: #e8e8ed;
}
.segmented button {
  min-height: 36px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 500 0.9375rem/1 var(--font);
  cursor: pointer;
}
.segmented button[aria-checked="true"] {
  background: var(--paper);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12), 0 0 0 0.5px rgb(0 0 0 / 0.06);
}

.filter-notes {
  max-width: var(--wide);
  margin: clamp(64px, 8vw, 104px) auto 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px clamp(24px, 3vw, 40px);
}
.filter-notes > div { padding-top: 20px; border-top: 1px solid var(--hair); }
.filter-notes p { margin-top: 8px; color: var(--slate); font-size: 1rem; }

/* Files */

.files {
  padding: var(--section) var(--gutter);
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.files .section-head {
  position: sticky;
  top: 96px;
  margin: 0;
  text-align: left;
}
.files h2 { font-size: clamp(2.5rem, 1.6rem + 2.6vw, 3.75rem); }
.files .section-head p { margin-left: 0; }

.formats > div {
  padding: 26px 0;
  border-top: 1px solid var(--hair);
}
.formats > div:last-child { border-bottom: 1px solid var(--hair); }
.formats dt {
  font-size: 1.3125rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.formats dt span {
  display: block;
  margin-top: 2px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--slate);
  letter-spacing: 0;
}
.formats dd {
  margin-top: 10px;
  color: var(--slate);
  max-width: 36em;
}

/* AI control */

.agents {
  padding: var(--section) var(--gutter);
  background: var(--night);
  color: var(--night-ink);
}
.agents .section-head p { color: var(--night-slate); }

.agent-grid {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px clamp(24px, 3vw, 40px);
}
.agent-grid > div { padding-top: 20px; border-top: 1px solid var(--night-hair); }
.agent-grid p { margin-top: 8px; color: var(--night-slate); font-size: 1rem; }

.terminal {
  max-width: 44rem;
  margin: clamp(56px, 7vw, 88px) auto 0;
  text-align: center;
}
.terminal code {
  display: inline-flex;
  gap: 14px;
  padding: 18px 28px;
  border-radius: 14px;
  background: #1c1c1e;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
  color: var(--night-ink);
  font: 500 1.125rem/1.2 var(--mono);
}
.terminal-prompt { color: #6e6e73; user-select: none; }
.terminal p {
  max-width: 32em;
  margin: 18px auto 0;
  color: var(--night-slate);
  font-size: 0.9375rem;
}

/* Open source */

.open {
  padding: var(--section) var(--gutter);
  background: var(--mist);
}
.open-inner {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}
.open-inner p {
  margin-top: 20px;
  font-size: var(--t-intro);
  line-height: 1.5;
  color: var(--slate);
}
.open-inner h2 + p { margin-top: 24px; }

/* Download */

.download {
  padding: var(--section) var(--gutter);
}

.platforms {
  max-width: var(--wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(40px, 5vw, 72px);
}

.platform h3 {
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink);
}

.builds li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 0;
  border-bottom: 1px solid var(--hair);
}
.builds li > div:first-child { display: grid; gap: 2px; }
.builds b { font-weight: 600; }
.builds span { color: var(--slate); font-size: 0.9375rem; }

.arch { display: flex; gap: 8px; flex: none; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--hair);
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
}
.chip:hover { text-decoration: none; background: var(--mist); border-color: #b0b0b5; }
.chip[data-suggested] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip[data-suggested]:hover { background: #3a3a3c; }

.platform-note {
  margin-top: 18px;
  color: var(--slate);
  font-size: var(--t-small);
  max-width: 34em;
}

.download-foot {
  max-width: var(--wide);
  margin: clamp(48px, 6vw, 72px) auto 0;
  text-align: center;
  color: var(--slate);
  font-size: 0.9375rem;
}

/* Footer */

.footer {
  padding: 56px var(--gutter) 40px;
  background: var(--mist);
}
.footer-inner {
  max-width: var(--wide);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: -0.025em;
}
.footer-legal {
  max-width: var(--wide);
  margin: 40px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--hair);
  color: var(--slate);
  font-size: 0.8125rem;
}

/* Smaller screens */

@media (max-width: 1024px) {
  .stack-facts,
  .filter-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .files { grid-template-columns: minmax(0, 1fr); }
  .files .section-head { position: static; text-align: center; }
  .files .section-head p { margin-left: auto; }
}

@media (max-width: 760px) {
  .nav-links a:not(.nav-download) { display: none; }
  .nav-inner { grid-template-columns: auto 1fr auto; }
  .nav-brand { justify-self: center; }
  .agent-grid,
  .platforms { grid-template-columns: minmax(0, 1fr); }
  .habits { grid-template-columns: minmax(0, 1fr); }
  /* A phone has no room beside the stack, so the labels become a legend under it. */
  .stack-planes { --w: 64vw; --shift: 0%; }
  .is-animated .stack-planes { --w: min(58vw, (100svh - 560px) * 1.1); }
  .stack-scene { gap: 28px; }
  /* Room under the legend for the scroll hint, which would otherwise cover its last row. */
  .is-animated .stack-pin { padding-bottom: calc(clamp(16px, 3.5vh, 32px) + 64px); }
  .stack-labels { grid-template-columns: repeat(2, max-content); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 8px 32px; margin-top: 0; font-size: 0.8125rem; }
  .stack-labels span { display: none; }
}

@media (max-width: 560px) {
  .nav-back span,
  .nav-back { font-size: 0; gap: 0; }
  .nav-back svg { width: 18px; height: 18px; }
  .stack-facts,
  .filter-notes { grid-template-columns: minmax(0, 1fr); }
  .rail-image { display: none; }
  .rail-list { width: 100%; }
  .builds li { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer .actions { justify-content: flex-start; }
  .segmented button { padding: 0 10px; font-size: 0.875rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .chip { transition: none; }
}