/* Voxy — hand-written, no framework, no CDN.
   Palette lifted from Sources/Voxy/Theme.swift so site and app match. */

/* ---------- Fonts: self-hosted, so the site leaks nothing about visitors ---- */

@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/GeneralSans-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/GeneralSans-Semibold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "General Sans";
  src: url("/assets/fonts/GeneralSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/Inter-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens ---------------------------------------------------------- */

:root {
  --accent: #E8590C;
  --accent-deep: #D9480F;
  --accent-wash: #FDEEE3;
  --ink: #1C1C21;
  --ink-2: #6B6B74;
  --ink-3: #9B9BA4;
  --canvas: #FFFFFF;
  --wash: #F6F6F8;
  --wash-deep: #EDEDF0;
  --hairline: #E6E6EA;

  --display: "General Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --body: "Inter", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --radius: 16px;
  --radius-sm: 10px;
  --pill: 999px;
  --unit: 4px;
  --gap-section: 96px;
  --wrap: 1200px;
}

/* ---------- Reset ----------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  overflow-x: hidden;
  background: var(--canvas);
  color: var(--ink-2);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

html { scroll-behavior: smooth; }

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

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff;
  padding: 12px 20px; z-index: 100; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- Layout ---------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

section { padding-block: var(--gap-section); }
section.tinted { background: var(--wash); }
section.warm { background: var(--accent-wash); }

.eyebrow {
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.lede { font-size: 19px; color: var(--ink-2); max-width: 58ch; }
.small { font-size: 15px; color: var(--ink-3); }

/* ---------- Nav ------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.nav-inner {
  display: flex; align-items: center; gap: 32px;
  min-height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 600; font-size: 18px;
  color: var(--ink); text-decoration: none; letter-spacing: -0.01em;
}
.mark { width: 26px; height: 26px; }
.nav-links { display: flex; gap: 28px; margin-right: auto; }
.nav-links a {
  text-decoration: none; font-size: 15px; color: var(--ink-2);
  padding-block: 4px;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="page"] { color: var(--ink); font-weight: 500; }

/* ---------- Buttons --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: 16px;
  padding: 13px 26px; border-radius: var(--pill);
  text-decoration: none; border: 1px solid transparent;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn-sm { font-size: 15px; padding: 9px 18px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); }
.btn-quiet { border-color: var(--hairline); color: var(--ink); background: var(--canvas); }
.btn-quiet:hover { border-color: var(--ink-3); }

.cta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* The platforms the one button covers: each mark beside its name, split by a
   hairline. The visitor's own platform is the darker of the two. */
.platforms { display: flex; align-items: center; }
.platform {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--ink-3);
  white-space: nowrap; padding-inline: 16px;
}
.platform:first-child { padding-left: 0; }
.platform + .platform { border-left: 1px solid var(--hairline); }
.platform-mark { width: 15px; height: 15px; fill: currentColor; flex: none; }
.platform.is-yours { color: var(--ink); }

/* ---------- Hero ------------------------------------------------------------ */

.hero { padding-block: 104px 72px; position: relative; overflow: hidden; }
.hero h1 {
  font-size: clamp(44px, 7.2vw, 90px);
  font-weight: 700;
  max-width: 15ch;
}
.hero .lede { margin-top: 24px; font-size: 21px; }
.hero .cta-row { margin-top: 36px; }
.hero .req { margin-top: 16px; font-size: 14px; color: var(--ink-3); }

/* ---------- Proof strip ----------------------------------------------------- */

.proof { border-block: 1px solid var(--hairline); padding-block: 0; }
.proof-inner {
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.proof-item { padding: 32px 28px; min-width: 0; overflow: hidden; }
.proof-item + .proof-item { border-left: 1px solid var(--hairline); }
.proof-item h3 { font-size: 17px; margin-bottom: 6px; }
.proof-item p { font-size: 15px; }

/* ---------- The app marquee -------------------------------------------------
   Two identical runs side by side, translated by exactly half the track: when
   the first run has scrolled away the second sits precisely where it started,
   so the loop has no seam. Clipped to its own column, and faded at both ends
   so icons enter and leave instead of being chopped. */

.marquee {
  position: relative; overflow: hidden; margin-top: 14px;
  display: flex; width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-run {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: 18px; padding-right: 18px;
  flex: none;
  animation: marquee 26s linear infinite;
}
.marquee-run img { width: 34px; height: 34px; }
@keyframes marquee { to { transform: translateX(-100%); } }

/* Hovering gives someone a chance to actually look at one. */
.marquee:hover .marquee-run { animation-play-state: paused; }

/* ---------- Feature blocks -------------------------------------------------- */

.feature-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: center;
}
.feature-grid.flip .feature-copy { order: 2; }
.feature h2 { font-size: clamp(30px, 3.6vw, 44px); margin-bottom: 20px; }
.feature ul {
  margin: 28px 0 0; padding: 0; list-style: none;
  display: grid; gap: 12px;
}
.feature li {
  position: relative; padding-left: 26px; font-size: 16px;
}
.feature li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.shot {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  overflow: hidden; background: var(--canvas);
}
.shot > img { width: 100%; height: auto; }
/* The pill is a small, fixed-size artifact — upscaling it to the column width
   only makes it soft. Sit it in the middle of the panel at its own size. */
.shot-pill { display: grid; place-items: center; padding: 56px 24px; background: var(--wash); }
.shot-pill img { width: auto; max-width: 100%; }

/* ---------- Section headers ------------------------------------------------- */

.section-head { max-width: 62ch; margin-bottom: 56px; }
.section-head h2 { font-size: clamp(32px, 4vw, 56px); }
.section-head p { margin-top: 18px; font-size: 19px; }

/* The keys, laid out so the two platforms sit side by side. */
.keys { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.keys li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  border-top: 1px solid var(--hairline); padding-top: 14px;
}
.key-what {
  font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: 15px; min-width: 9.5em;
}
.key-combo { font-size: 15px; color: var(--ink-2); }
kbd {
  font-family: var(--body); font-size: 13px; font-weight: 600; color: var(--ink);
  background: var(--wash); border: 1px solid var(--hairline);
  border-bottom-width: 2px; border-radius: 6px; padding: 3px 8px;
}

/* ---------- Cards ----------------------------------------------------------- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.card {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  background: var(--canvas); padding: 28px;
}
.card h3 { font-size: 19px; margin-bottom: 10px; }
.card p { font-size: 15px; }

/* ---------- The assembly ----------------------------------------------------
   The app's Home screen, redrawn from the real thing (main-home.png) so it can
   assemble piece by piece on scroll. Everything is sized in cqw against the
   window, so it holds together at any width. */

.assembly { position: relative; }
.stage {
  position: relative;
  margin-top: 56px;
  aspect-ratio: 1060 / 680;
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: var(--canvas);
  overflow: hidden;
  container-type: inline-size;
  box-shadow: 0 30px 70px rgba(28, 28, 33, 0.10);
}
.stage-bar {
  height: 3.4cqw; border-bottom: 1px solid var(--hairline);
  background: var(--wash); display: flex; align-items: center; gap: 0.7cqw;
  padding-inline: 1.5cqw;
}
.dot { width: 0.85cqw; height: 0.85cqw; border-radius: 50%; background: var(--wash-deep); }
.stage-body { display: flex; height: calc(100% - 3.4cqw); }

/* Sidebar */
.app-side {
  width: 18.6%; border-right: 1px solid var(--hairline); background: var(--wash);
  padding: 1.8cqw 1.2cqw; display: flex; flex-direction: column; gap: 1.4cqw;
}
.side-brand { display: flex; align-items: center; gap: 0.7cqw; }
.side-mark { width: 2.6cqw; height: 2.6cqw; }
.side-name {
  font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: 1.5cqw; letter-spacing: -0.01em;
}
.side-badge {
  font-size: 0.95cqw; font-weight: 600; color: var(--accent);
  background: var(--accent-wash); border-radius: var(--pill);
  padding: 0.25cqw 0.7cqw;
}
.side-nav { display: grid; gap: 0.35cqw; margin-top: 0.6cqw; }
.side-link {
  font-size: 1.2cqw; color: var(--ink-2); padding: 0.65cqw 0.8cqw;
  border-radius: 8px;
}
/* Which section is lit follows the window's data-active, so all three windows
   can share one sidebar file. */
.stage[data-active="home"] .side-link[data-key="home"],
.stage[data-active="stats"] .side-link[data-key="stats"],
.stage[data-active="vocabulary"] .side-link[data-key="vocabulary"] {
  background: var(--canvas); color: var(--ink); font-weight: 500;
  border: 1px solid var(--hairline);
}
.side-privacy {
  margin-top: auto; background: var(--accent-wash); border-radius: 10px;
  padding: 0.9cqw; font-size: 1cqw; color: var(--ink-2); line-height: 1.35;
}
.side-privacy-title { color: var(--accent-deep); font-weight: 600; margin-bottom: 0.3cqw; }
.side-foot { display: grid; gap: 0.2cqw; }

/* Main column */
.app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.app-head {
  height: 4.6cqw; border-bottom: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: 2.2cqw;
}
.app-head-right { display: flex; align-items: center; gap: 1.1cqw; }
.app-bell { width: 1.5cqw; height: 1.5cqw; fill: var(--ink-3); }
.app-avatar {
  width: 2cqw; height: 2cqw; border-radius: 50%; background: var(--wash-deep);
  border: 1px solid var(--hairline); display: block;
}
.app-title {
  font-family: var(--display); font-weight: 600; color: var(--ink);
  font-size: 2cqw; letter-spacing: -0.02em;
}
.app-cols { flex: 1; display: flex; gap: 1.6cqw; padding: 2cqw 2.2cqw; min-height: 0; }
.app-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1.2cqw; }
.app-rail { width: 26%; display: flex; flex-direction: column; gap: 1.1cqw; }

.app-greet {
  font-family: var(--display); font-size: 1.55cqw; font-weight: 600;
  color: var(--ink); display: flex; align-items: center; gap: 0.7cqw;
  flex-wrap: wrap; letter-spacing: -0.01em;
}
.app-chip {
  font-size: 1.05cqw; font-weight: 500; color: var(--ink-2);
  border: 1px solid var(--hairline); border-radius: 8px; padding: 0.3cqw 0.7cqw;
}
.app-chip.is-accent {
  color: var(--accent-deep); border-color: var(--accent);
  background: var(--accent-wash);
}
.app-tip { font-size: 1.05cqw; color: var(--ink-2); }
.app-search {
  border: 1px solid var(--hairline); border-radius: 10px;
  padding: 0.85cqw 1cqw; font-size: 1.15cqw; color: var(--ink-3);
}
.app-today {
  font-size: 1cqw; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); display: flex; align-items: center; gap: 0.6cqw;
}
.app-count {
  background: var(--wash-deep); border-radius: var(--pill);
  padding: 0.15cqw 0.6cqw; letter-spacing: 0;
}

/* Cards */
.piece {
  border: 1px solid var(--hairline); border-radius: 12px;
  background: var(--canvas); padding: 1.1cqw 1.2cqw;
}
.piece.is-well { background: var(--wash); border-color: transparent; }
.piece-title {
  font-size: 1.1cqw; font-weight: 600; color: var(--ink);
}
.piece-sub { font-size: 1cqw; color: var(--ink-2); margin-top: 0.35cqw; }
.status-row {
  font-size: 1cqw; color: var(--ink-2); margin-top: 0.45cqw;
  display: flex; align-items: center; gap: 0.5cqw;
}
.status-row strong { color: var(--ink); font-weight: 600; }
.status-dot { width: 0.6cqw; height: 0.6cqw; border-radius: 50%; background: #2F9E44; }
.stat-row {
  font-size: 1cqw; color: var(--ink-2); margin-top: 0.5cqw;
  display: flex; align-items: baseline; gap: 0.6cqw;
}
.stat-row:first-child { margin-top: 0; }
.stat-row strong {
  font-family: var(--display); font-size: 1.9cqw; font-weight: 700;
  color: var(--ink); letter-spacing: -0.02em;
}
.goal-bar {
  display: block; height: 0.7cqw; border-radius: var(--pill);
  background: var(--wash-deep); margin-top: 0.8cqw; overflow: hidden;
}
.goal-bar i { display: block; height: 100%; width: 100%; background: var(--accent); }

/* The orange card */
.piece-hero {
  background: linear-gradient(135deg, #F2620F, var(--accent-deep));
  border-color: transparent; color: #fff; padding: 1.6cqw;
  display: flex; align-items: center; justify-content: space-between; gap: 1.2cqw;
}
.hero-card-title {
  font-family: var(--display); font-size: 1.7cqw; font-weight: 600;
  letter-spacing: -0.01em;
}
.hero-card-body { font-size: 1.05cqw; margin-top: 0.5cqw; line-height: 1.4; opacity: 0.92; }
.hero-card-wave {
  display: flex; align-items: center; gap: 0.4cqw; height: 4cqw; flex: none;
}
.hero-card-wave i {
  width: 0.55cqw; border-radius: var(--pill); background: #fff; opacity: 0.9;
}

/* The pill, sitting where it sits on screen: bottom centre, floating. Sized in
   cqw like everything else in the window, so it stays in proportion instead of
   swelling to half the width on a phone. */
.pill-stage {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  gap: 0.85cqw; padding: 0.7cqw 1cqw; font-size: 1.1cqw;
  border-radius: var(--pill);
}
.pill-stage .pill-icon { width: 2.2cqw; height: 2.2cqw; }
.pill-stage .pill-mic { width: 1.3cqw; height: 1.3cqw; }
.pill-stage .wave { height: 2.4cqw; gap: 0.22cqw; }
.pill-stage .wave i { flex-basis: 0.28cqw; width: 0.28cqw; }
.pill-stage .wave i:nth-child(1) { height: 0.50cqw; }
.pill-stage .wave i:nth-child(2) { height: 1.10cqw; }
.pill-stage .wave i:nth-child(3) { height: 0.70cqw; }
.pill-stage .wave i:nth-child(4) { height: 1.70cqw; }
.pill-stage .wave i:nth-child(5) { height: 0.90cqw; }
.pill-stage .wave i:nth-child(6) { height: 2.20cqw; }
.pill-stage .wave i:nth-child(7) { height: 1.30cqw; }
.pill-stage .wave i:nth-child(8) { height: 0.60cqw; }
.pill-stage .wave i:nth-child(9) { height: 1.90cqw; }
.pill-stage .wave i:nth-child(10) { height: 1.00cqw; }
.pill-stage .wave i:nth-child(11) { height: 2.40cqw; }
.pill-stage .wave i:nth-child(12) { height: 0.80cqw; }
.pill-stage .wave i:nth-child(13) { height: 1.50cqw; }
.pill-stage .wave i:nth-child(14) { height: 2.00cqw; }
.pill-stage .wave i:nth-child(15) { height: 0.60cqw; }
.pill-stage .wave i:nth-child(16) { height: 1.20cqw; }
.pill-stage .wave i:nth-child(17) { height: 1.80cqw; }
.pill-stage .wave i:nth-child(18) { height: 0.90cqw; }
.pill-stage .wave i:nth-child(19) { height: 1.40cqw; }
.pill-stage .wave i:nth-child(20) { height: 0.70cqw; }
.pill-stage .wave i:nth-child(21) { height: 0.40cqw; }

/* Assembly. Pieces start offset; JS adds .assembled when the section scrolls
   in. Reduced motion skips straight to the final position. */
.piece, .app-side, .pill-stage, .app-head, .app-body > * {
  transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .7s ease;
}
.stage:not(.assembled) .piece,
.stage:not(.assembled) .app-side,
.stage:not(.assembled) .app-head,
.stage:not(.assembled) .app-body > *,
.stage:not(.assembled) .pill-stage { opacity: 0; }
.stage:not(.assembled) .app-side { transform: translateX(-40px); }
.stage:not(.assembled) .app-head { transform: translateY(-20px); }
.stage:not(.assembled) .piece-hero { transform: translate(-26px, 30px) scale(.96); }
.stage:not(.assembled) .app-body > :not(.piece) { transform: translateY(24px); }
.stage:not(.assembled) .piece-status { transform: translate(30px, -22px) scale(.96); }
.stage:not(.assembled) .piece-stats { transform: translate(34px, -10px) scale(.96); }
.stage:not(.assembled) .piece-goal { transform: translate(30px, 18px) scale(.96); }
.stage:not(.assembled) .piece-mic { transform: translate(26px, 30px) scale(.96); }
.stage:not(.assembled) .pill-stage { transform: translate(-50%, 40px) scale(.92); }

/* A window used as a feature illustration: same drawing, no extra frame. A
   whole app screen needs more room than a caption does, so these rows give the
   window the larger share and let it run past the text column's edge. */
.shot-window .stage { margin-top: 0; }
.feature-grid.has-window { grid-template-columns: 0.78fr 1.22fr; gap: 48px; }
.feature-grid.has-window.flip { grid-template-columns: 1.22fr 0.78fr; }
.feature-grid.has-window .shot-window { margin-right: -40px; }
.feature-grid.has-window.flip .shot-window { margin-right: 0; margin-left: -40px; }

@media (max-width: 1100px) {
  .feature-grid.has-window .shot-window,
  .feature-grid.has-window.flip .shot-window { margin-inline: 0; }
}

/* Single-column screens (Vocabulary, Stats) */
.app-single {
  flex: 1; padding: 2cqw 2.2cqw; display: flex; flex-direction: column;
  gap: 1.4cqw; min-height: 0;
}

/* Vocabulary */
.piece-banner {
  background: linear-gradient(120deg, #2A1509 0%, #3A1B0B 55%, #7A2E0C 100%);
  border-color: transparent; color: #fff; padding: 1.8cqw;
}
.banner-title {
  font-family: var(--display); font-size: 1.9cqw; font-weight: 600;
  letter-spacing: -0.01em;
}
.banner-title em { font-style: italic; }
.banner-body {
  font-size: 1.05cqw; margin-top: 0.6cqw; line-height: 1.45; opacity: 0.86;
  max-width: 48ch;
}
.banner-chips { display: flex; gap: 0.7cqw; margin-top: 1.2cqw; }
.banner-chips span {
  font-size: 1cqw; padding: 0.45cqw 1cqw; border-radius: 7px;
  background: rgba(255, 255, 255, 0.14);
}
.term-row {
  background: var(--wash); border-radius: 8px; padding: 0.75cqw 1cqw;
  font-size: 1.1cqw; color: var(--ink); margin-top: 0.7cqw;
}
.term-add { display: flex; gap: 0.8cqw; margin-top: 0.9cqw; align-items: center; }
.term-field {
  flex: 1; border: 1px solid var(--hairline); border-radius: 8px;
  padding: 0.75cqw 1cqw; font-size: 1.1cqw; color: var(--ink-3);
}
.term-button {
  background: var(--accent); color: #fff; border-radius: 8px;
  padding: 0.75cqw 1.6cqw; font-size: 1.1cqw; font-weight: 600;
}

/* Stats */
.app-tabs { display: flex; gap: 1.6cqw; font-size: 1.2cqw; color: var(--ink-3); }
.app-tabs .is-on {
  color: var(--ink); font-weight: 500;
  border-bottom: 2px solid var(--accent); padding-bottom: 0.5cqw;
}
.stat-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; }
.stat-big {
  font-family: var(--display); font-size: 3cqw; font-weight: 700;
  color: var(--ink); letter-spacing: -0.02em; line-height: 1;
}
.stat-label {
  font-size: 0.95cqw; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ink-3); margin-top: 0.5cqw;
}
.speed-arc {
  display: block; width: 60%; aspect-ratio: 2 / 1; margin: 1.2cqw auto 0;
  border-radius: 100% 100% 0 0 / 200% 200% 0 0;
  border: 0.9cqw solid var(--accent); border-bottom: 0;
}
.stat-speed {
  text-align: center; font-size: 1.3cqw; font-weight: 700; color: var(--accent);
  margin-top: 0.5cqw;
}
.stat-speed span { font-size: 0.95cqw; font-weight: 500; color: var(--ink-3); display: block; }
.total-row {
  display: flex; justify-content: space-between; font-size: 1cqw;
  color: var(--ink-2); margin-top: 0.7cqw;
  border-top: 1px solid var(--hairline); padding-top: 0.7cqw;
}
.usage-bar {
  display: flex; gap: 0.3cqw; height: 1.6cqw; margin: 1cqw 0 1.2cqw;
}
.usage-bar i { display: block; border-radius: 6px; background: var(--accent); }
.usage-bar i:nth-child(2) { background: var(--accent-deep); }
.usage-bar i:nth-child(3) { background: #F5A97C; }
.usage-bar i:nth-child(4) { background: #F8C3A3; }
.usage-bar i:nth-child(5) { background: #FBDDC9; }
.usage-row {
  display: flex; align-items: center; gap: 0.7cqw; font-size: 1cqw;
  color: var(--ink); margin-top: 0.6cqw;
}
.usage-row span:last-child { margin-left: auto; color: var(--ink-3); }
.usage-dot { width: 0.7cqw; height: 0.7cqw; border-radius: 50%; background: var(--accent); }
.usage-dot.is-pale { background: #F5A97C; }

/* Their pieces fly in from the side they sit on, like Home's do. */
.stage:not(.assembled) .piece-banner { transform: translateY(-26px) scale(.97); }
.stage:not(.assembled) .piece-terms { transform: translateY(34px) scale(.97); }
.stage:not(.assembled) .app-single > :not(.piece) { opacity: 0; transform: translateY(18px); }
.stage:not(.assembled) .piece-wpm { transform: translate(-30px, 22px) scale(.96); }
.stage:not(.assembled) .piece-count { transform: translateY(-26px) scale(.96); }
.stage:not(.assembled) .piece-total { transform: translate(30px, 22px) scale(.96); }
.stage:not(.assembled) .piece-usage { transform: translateY(38px) scale(.97); }
.app-single > *, .stat-cards > * { transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .7s ease; }

/* ---------- Reveal ---------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Privacy panel --------------------------------------------------- */

.privacy-panel { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.leaves { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.leaves li {
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: var(--radius-sm); padding: 16px 20px; font-size: 16px;
}
.leaves strong { color: var(--ink); font-family: var(--display); }

/* ---------- Prose (download / manage / privacy / changelog) ----------------- */

.prose { max-width: 74ch; }
.prose h1 { font-size: clamp(38px, 5vw, 60px); margin-bottom: 20px; }
.prose h2 { font-size: 26px; margin-top: 52px; margin-bottom: 14px; }
.prose h3 { font-size: 18px; margin-top: 32px; margin-bottom: 8px; }
.prose p, .prose ul, .prose ol { margin-top: 14px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-top: 8px; }
.prose code {
  font-family: var(--mono); font-size: 0.9em;
  background: var(--wash); border: 1px solid var(--hairline);
  border-radius: 6px; padding: 1px 5px; color: var(--ink);
}
.prose a { color: var(--accent-deep); text-underline-offset: 3px; }
.prose hr { border: 0; border-top: 1px solid var(--hairline); margin: 48px 0; }

.note {
  border: 1px solid var(--hairline); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); background: var(--wash);
  padding: 20px 24px; margin-top: 28px;
}
.note h3 { margin-top: 0; }

/* ---------- Footer ---------------------------------------------------------- */

.footer { border-top: 1px solid var(--hairline); padding-top: 56px; background: var(--wash); }
.footer-inner { display: flex; gap: 64px; flex-wrap: wrap; justify-content: space-between; }
.footer-brand { max-width: 34ch; }
.footer-brand .mark { width: 28px; height: 28px; margin-bottom: 14px; }
.footer-brand p { font-size: 15px; }
.footer-cols { display: flex; gap: 72px; }
.footer-cols h2 {
  font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 14px; font-weight: 600;
}
.footer-cols a { display: block; font-size: 15px; text-decoration: none; margin-bottom: 10px; }
.footer-cols a:hover { color: var(--ink); }
.footer-legal {
  border-top: 1px solid var(--hairline); margin-top: 48px; padding-block: 24px;
}
.footer-legal p { font-size: 14px; color: var(--ink-3); }

/* ---------- Narrower --------------------------------------------------------- */

@media (max-width: 900px) {
  :root { --gap-section: 72px; }
  .feature-grid, .privacy-panel { grid-template-columns: 1fr; gap: 36px; }
  .feature-grid.has-window { grid-template-columns: 1fr; gap: 36px; }
  .feature-grid.flip .feature-copy { order: 0; }
  .cards { grid-template-columns: 1fr; }
  .proof-inner { grid-template-columns: 1fr; }
  .proof-item + .proof-item { border-left: 0; border-top: 1px solid var(--hairline); }
  /* No burger menu: the links simply wrap onto a second row, so every page
     stays reachable without any JavaScript. */
  .nav-inner { flex-wrap: wrap; gap: 8px 16px; padding-block: 8px; min-height: 0; }
  .nav .btn-sm { font-size: 14px; padding: 8px 16px; }
  .nav-links {
    order: 3; width: 100%; gap: 18px; margin-right: 0;
    border-top: 1px solid var(--hairline); padding-top: 8px;
    font-size: 14px; overflow-x: auto;
  }
  .nav-links a { white-space: nowrap; }
  .footer-cols { gap: 48px; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero { padding-block: 64px 48px; }
  /* The window keeps its real proportions and simply gets smaller: a phone
     screenshot of a Mac app is what this is. */
  .stage { margin-top: 32px; border-radius: 12px; }
  .app-side { padding: 1.8cqw 1cqw; }
  .side-privacy, .side-foot { display: none; }
  .pill-stage { bottom: 2%; }
}

/* ---------- Back to top ----------------------------------------------------- */

/* Visible by default, because with JavaScript off nothing is ever going to
   come along and reveal it. The script hides it at the top of the page and
   brings it back once there is something to scroll back up to. */
/* The anchor the button aims at. The header is sticky, so it is never anywhere
   but the top of the viewport and makes a useless target; this sits at the real
   top of the document. Out of flow, so it changes no layout, and no focus ring
   because there is nothing here to see. */
#top {
  position: absolute; top: 0; left: 0; width: 0; height: 0;
}
#top:focus, #top:focus-visible { outline: none; }

.to-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--canvas); color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: 50%;
  box-shadow: 0 6px 20px rgb(28 28 33 / .12);
  transition: opacity .25s ease, transform .25s ease,
              background-color .15s ease, color .15s ease;
}
.to-top svg { width: 20px; height: 20px; }
.to-top:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

/* 44px is the smallest comfortable tap target, so the button keeps its size
   on phones and only moves in from the edge. */
@media (max-width: 640px) {
  .to-top { right: 14px; bottom: 14px; }
}

/* Only the script adds this, so a no-JS visitor never loses the button. */
.to-top.is-away {
  opacity: 0; transform: translateY(8px) scale(.9);
  pointer-events: none;
}

/* ---------- Reduced motion: everything lands, nothing moves ------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
  /* The marquee stops dead rather than crawling; the row still shows the apps,
     and the fade at the end says there are more. */
  .marquee-run { animation: none; }
  .stage:not(.assembled) .piece,
  .stage:not(.assembled) .app-side,
  .stage:not(.assembled) .app-head,
  .stage:not(.assembled) .app-body > *,
  .stage:not(.assembled) .app-single > *,
  .stage:not(.assembled) .pill-stage { opacity: 1; transform: none; }
  .stage:not(.assembled) .pill-stage { transform: translateX(-50%); }
}

/* ---------- The pill ---------------------------------------------------------
   Drawn to the app's own spec (Sources/Voxy/PillHUD.swift): a white capsule
   with a hairline border, the target app's icon, an orange mic, and 21 bars
   3px wide, 2.5px apart, 24px tall at full level. Not a dark bubble. */

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: var(--pill);
  background: var(--canvas); border: 1px solid var(--hairline);
  font-size: 13px; font-weight: 500; color: var(--ink);
  box-shadow: 0 10px 30px rgba(28, 28, 33, 0.12);
}

/* The app being dictated into, shown with its own icon exactly as the pill
   does on screen. */
.pill-icon { width: 22px; height: 22px; flex: none; }

.pill-mic { width: 13px; height: 13px; flex: none; fill: var(--accent); }

.pill .wave {
  display: flex; align-items: center; gap: 2.5px;
  height: 24px; width: auto; margin: 0; color: var(--accent);
}
.pill .wave i {
  flex: 0 0 3px; width: 3px; height: 3px; border-radius: var(--pill);
  background: var(--accent); opacity: 0.9; transition: height .05s linear;
}

.pill-text { white-space: nowrap; }

/* Transcribing spins the same small ring the app shows. */
.pill-spinner {
  width: 13px; height: 13px; flex: none; border-radius: 50%;
  border: 2px solid var(--wash-deep); border-top-color: var(--accent);
  animation: pill-spin .7s linear infinite;
}
@keyframes pill-spin { to { transform: rotate(360deg); } }

/* The editors and terminals code mode knows, as chips. There is no single app
   screen that lists them, so this stands in for a screenshot. */
.app-list { padding: 28px; }
.app-list .label {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.app-list ul {
  list-style: none; margin: 18px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 8px;
}
.app-list li {
  position: static; padding-left: 0; font-size: 14px; color: var(--ink);
  border: 1px solid var(--hairline); border-radius: var(--pill);
  padding: 6px 14px; background: var(--wash);
}
.app-list li::before { content: none; }
.app-list .small { margin-top: 18px; }

/* One dictation, three places it could have landed. Static on purpose — the
   hero already carries the moving version, and two loops on one page compete. */
.anywhere { position: relative; padding: 32px 28px 64px; background: var(--wash); }
.anywhere-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
/* The feature bullet does not belong on these — they are cards, not points. */
.anywhere-list li::before { content: none; }
.anywhere-list li {
  position: static; padding-left: 18px;
  display: flex; align-items: flex-start; gap: 14px;
  background: var(--canvas); border: 1px solid var(--hairline);
  border-radius: 12px; padding: 16px 18px;
}

.anywhere-list img { width: 26px; height: 26px; flex: none; }
.anywhere-app {
  font-family: var(--display); font-size: 13px; font-weight: 600; color: var(--ink);
}
.anywhere-line { font-size: 15px; color: var(--ink-2); margin-top: 4px; }
.anywhere-line.is-code { font-family: var(--mono); font-size: 13.5px; }
.anywhere-pill {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
}

/* ---------- Pricing tiers --------------------------------------------------- */

/* Stretch, so the two cards are the same height whatever the copy does. */
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.tier {
  border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 32px; background: var(--canvas);
  display: flex; flex-direction: column;
}
/* The last thing in each card — the button, or the "buying opens shortly"
   line — sits on the floor of the card, so both bottoms line up. */
.tier > :last-child { margin-top: auto; }
.tier .btn { align-self: flex-start; }
.tier-lead { background: var(--accent-wash); border-color: transparent; }
.tier-name {
  font-family: var(--display); font-size: 13px; font-weight: 600;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3);
}
.tier-price {
  font-family: var(--display); font-size: 56px; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1.05; margin-top: 8px;
  display: flex; align-items: baseline; gap: 14px;
}
.tier-was {
  font-size: 22px; font-weight: 500; color: var(--ink-3);
  text-decoration: line-through;
}
.tier-note { font-size: 15px; color: var(--ink-2); margin-top: 6px; }
.tier ul {
  list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 12px;
}
.tier li { position: relative; padding-left: 26px; font-size: 16px; }
.tier li::before {
  content: ""; position: absolute; left: 0; top: 9px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}
.tier li strong { color: var(--ink); }
.tier-soon {
  font-size: 15px; color: var(--ink-2);
  border-top: 1px solid rgba(28,28,33,0.1); padding-top: 18px;
}
.tier-soon a { color: var(--accent-deep); }

@media (max-width: 900px) {
  .tiers { grid-template-columns: 1fr; }
}

/* ---------- Hero demo: one dictation, landing in one app after another ------
   The window and the pill are drawn, not screenshotted, so the typing is real
   text and everything stays sharp at any size. */

/* The headline shares the row with the demo, so it is set smaller here than a
   full-width hero would take — four stacked lines of 90px read as shouting. */
.hero-grid {
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 56px;
  align-items: center;
}
.hero-copy h1 { font-size: clamp(40px, 4.4vw, 62px); max-width: 13ch; }
.hero-copy .lede { font-size: 19px; }

.hero-demo { position: relative; padding-bottom: 34px; }

.demo-window {
  border: 1px solid var(--hairline); border-radius: 18px;
  background: var(--canvas); overflow: hidden;
  box-shadow: 0 24px 60px rgba(28, 28, 33, 0.10);
}
.demo-bar {
  display: flex; align-items: center; gap: 7px;
  height: 40px; padding-inline: 16px;
  background: var(--wash); border-bottom: 1px solid var(--hairline);
}
.demo-icon { width: 18px; height: 18px; margin-left: 10px; transition: opacity .25s ease; }
.demo-app {
  margin-left: 8px; font-family: var(--display); font-size: 13px;
  font-weight: 600; color: var(--ink-2); letter-spacing: -0.01em;
  transition: opacity .25s ease;
}
.demo-body { padding: 24px 26px 30px; min-height: 208px; }
.demo-meta {
  font-size: 13px; color: var(--ink-3); padding-bottom: 14px;
  border-bottom: 1px solid var(--hairline); transition: opacity .25s ease;
}
.demo-text {
  margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--ink);
  min-height: 4.65em;
}
.demo-text.is-code { font-family: var(--mono); font-size: 15px; }
.demo-caret {
  display: inline-block; width: 2px; height: 1.1em; margin-left: 1px;
  background: var(--accent); vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Fading the window out and back is how one app becomes the next. */
.demo-window.is-swapping .demo-app,
.demo-window.is-swapping .demo-icon,
.demo-window.is-swapping .demo-meta { opacity: 0; }

.pill-float {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  white-space: nowrap;
}
/* The pill is only on screen while Voxy is working, exactly as in the app:
   it appears to listen and goes away once the text has landed. */
.pill-float { transition: opacity .3s ease, transform .3s ease; }
.pill-float.is-gone { opacity: 0; transform: translate(-50%, 10px); }

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hero-demo { max-width: 560px; }
}

/* ---------- Docs ------------------------------------------------------------
   Three columns: sidebar, article, on-this-page. The two side columns are the
   first things to go as the viewport narrows — the article is the point.       */

.docs-body { background: var(--canvas); }

.docs-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--canvas) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.docs-nav-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 24px;
  height: 60px;
}
.brand-tag {
  font: 600 11px/1 var(--body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-wash);
  border-radius: var(--pill);
  padding: 5px 8px;
  margin-left: 2px;
}
.docs-nav-links { margin-left: auto; }

/* Search ------------------------------------------------------------------- */

.docs-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 420px;
}
.docs-search > svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink-3);
  pointer-events: none;
}
.docs-search input {
  width: 100%;
  height: 38px;
  padding: 0 40px 0 34px;
  font: 400 14px/1 var(--body);
  color: var(--ink);
  background: var(--wash);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  appearance: none;
}
.docs-search input::-webkit-search-cancel-button { display: none; }
.docs-search input:focus {
  outline: none;
  background: var(--canvas);
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.docs-search kbd {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font: 500 11px/1 var(--mono);
  color: var(--ink-3);
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: 5px;
  padding: 4px 6px;
  pointer-events: none;
}
.docs-search input:focus ~ kbd { display: none; }

.docs-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: 60vh;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(20, 20, 30, .14);
}
.docs-search-results a {
  display: block;
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink);
}
.docs-search-results a:hover,
.docs-search-results a.is-active { background: var(--wash); }
.docs-search-results strong {
  display: block;
  font: 600 13.5px/1.3 var(--body);
}
.docs-search-results span {
  display: block;
  font: 400 12px/1.45 var(--body);
  color: var(--ink-2);
  margin-top: 2px;
}
.docs-search-results .docs-search-group {
  font-size: 10.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 3px;
}
.docs-search-empty {
  padding: 12px;
  font: 400 13px/1.4 var(--body);
  color: var(--ink-2);
}

/* Shell -------------------------------------------------------------------- */

.docs-shell {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr) 232px;
  gap: 48px;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: start;
}

.docs-sidebar,
.docs-toc {
  position: sticky;
  top: 60px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  padding: 32px 0 48px;
  scrollbar-width: thin;
}

.docs-sidebar a {
  display: block;
  padding: 6px 12px;
  border-radius: 8px;
  font: 400 13.5px/1.45 var(--body);
  color: var(--ink-2);
  text-decoration: none;
}
.docs-sidebar a:hover { background: var(--wash); color: var(--ink); }
.docs-sidebar a.is-current {
  background: var(--accent-wash);
  color: var(--accent-deep);
  font-weight: 600;
}
.docs-nav-home { font-weight: 600 !important; color: var(--ink) !important; }
.docs-nav-home.is-current { color: var(--accent-deep) !important; }
.docs-nav-group {
  margin: 22px 0 6px;
  padding: 0 12px;
  font: 600 11px/1 var(--body);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.docs-sidebar ul { margin: 0; padding: 0; list-style: none; }

/* Article ------------------------------------------------------------------ */

.docs-main { min-width: 0; padding: 40px 0 80px; }
.docs-article { max-width: 760px; }
.docs-eyebrow {
  margin: 0 0 8px;
  font: 600 11.5px/1 var(--body);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--accent);
}
.docs-article h1 {
  margin: 0 0 12px;
  font: 600 clamp(30px, 4vw, 40px)/1.12 var(--display);
  letter-spacing: -.02em;
  color: var(--ink);
}
.docs-lede {
  margin: 0 0 34px;
  font: 400 17.5px/1.6 var(--body);
  color: var(--ink-2);
}
.docs-article h2 {
  margin: 46px 0 14px;
  padding-top: 10px;
  font: 600 23px/1.25 var(--display);
  letter-spacing: -.015em;
  color: var(--ink);
  scroll-margin-top: 80px;
}
.docs-article h3 {
  margin: 30px 0 10px;
  font: 600 17px/1.35 var(--display);
  color: var(--ink);
}
.docs-article p,
.docs-article li {
  font: 400 15.5px/1.72 var(--body);
  color: var(--ink-2);
}
.docs-article p { margin: 0 0 16px; }
.docs-article strong { color: var(--ink); font-weight: 600; }
.docs-article ul,
.docs-article ol { margin: 0 0 18px; padding-left: 22px; }
.docs-article li { margin-bottom: 7px; }
.docs-article li > ul,
.docs-article li > ol { margin: 7px 0 0; }
.docs-article a { color: var(--accent-deep); text-decoration-thickness: 1px; }
.docs-article a:hover { color: var(--accent); }
.docs-article code {
  font: 500 .88em/1.4 var(--mono);
  background: var(--wash-deep);
  border-radius: 5px;
  padding: 2px 5px;
  color: var(--ink);
}
.docs-article pre {
  margin: 0 0 20px;
  padding: 16px 18px;
  background: var(--ink);
  border-radius: var(--radius-sm);
  overflow-x: auto;
}
.docs-article pre code {
  background: none;
  padding: 0;
  color: #F2F2F5;
  font-size: 13px;
  line-height: 1.6;
}
.docs-article img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin: 4px 0 22px;
}

/* Tables ------------------------------------------------------------------- */

.table-scroll { overflow-x: auto; margin: 0 0 22px; }
.docs-article table {
  width: 100%;
  border-collapse: collapse;
  font: 400 14.5px/1.55 var(--body);
}
.docs-article th,
.docs-article td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.docs-article th {
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom-color: var(--wash-deep);
  white-space: nowrap;
}
.docs-article td { color: var(--ink-2); }
.docs-article tbody tr:last-child td { border-bottom: none; }

/* Callouts ----------------------------------------------------------------- */

.callout {
  margin: 0 0 22px;
  padding: 14px 18px;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--accent-wash);
}
.callout p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.callout strong { color: var(--accent-deep); }
.callout-warning { border-left-color: #B4500C; }
.callout-tip { border-left-color: #1C7C54; background: #E9F5EF; }
.callout-tip strong { color: #12603F; }

/* Pager -------------------------------------------------------------------- */

.docs-pager {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline);
}
.docs-pager a {
  display: block;
  flex: 0 1 48%;
  padding: 13px 17px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  text-decoration: none;
}
.docs-pager a:hover { border-color: var(--accent); background: var(--wash); }
.docs-pager-next { text-align: right; }
.docs-pager span {
  display: block;
  font: 500 11px/1 var(--body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 5px;
}
.docs-pager strong {
  font: 600 14.5px/1.35 var(--body);
  color: var(--ink);
}

/* On this page ------------------------------------------------------------- */

.docs-toc-title {
  margin: 0 0 10px;
  font: 600 11px/1 var(--body);
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.docs-toc ul { margin: 0; padding: 0; list-style: none; }
.docs-toc a {
  display: block;
  padding: 5px 0 5px 12px;
  border-left: 2px solid var(--hairline);
  font: 400 13px/1.45 var(--body);
  color: var(--ink-2);
  text-decoration: none;
}
.docs-toc a:hover { color: var(--ink); }
.docs-toc a.is-current {
  border-left-color: var(--accent);
  color: var(--accent-deep);
  font-weight: 500;
}

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

.docs-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 12px;
  margin: 0 0 34px;
}
.docs-card {
  display: block;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}
.docs-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.docs-card strong {
  display: block;
  font: 600 15px/1.3 var(--body);
  color: var(--ink);
  margin-bottom: 5px;
}
.docs-card span {
  font: 400 13.5px/1.5 var(--body);
  color: var(--ink-2);
}

.docs-footer { margin-top: 0; border-top: 1px solid var(--hairline); }
.docs-menu-btn { display: none; }

/* Narrower ----------------------------------------------------------------- */

@media (max-width: 1180px) {
  .docs-shell { grid-template-columns: 240px minmax(0, 1fr); gap: 40px; }
  .docs-toc { display: none; }
}

@media (max-width: 860px) {
  .docs-shell { grid-template-columns: minmax(0, 1fr); padding: 0 20px; }
  .docs-nav-links { display: none; }
  .docs-nav-inner { gap: 12px; padding: 0 20px; }

  .docs-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 11px;
    font: 500 13px/1 var(--body);
    color: var(--ink);
    background: var(--wash);
    border: 1px solid var(--hairline);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .docs-menu-btn svg { width: 16px; height: 16px; }

  .docs-sidebar {
    display: none;
    position: static;
    max-height: none;
    padding: 16px 0;
    border-bottom: 1px solid var(--hairline);
  }
  .docs-sidebar.is-open { display: block; }

  .docs-main { padding: 28px 0 64px; }
  .docs-pager { flex-direction: column; }
  .docs-pager a { flex: 1 1 auto; }
  .docs-pager-next { text-align: left; }
}

@media (max-width: 640px) {
  /* The bar has to wrap at this width, and a sticky bar of changing height
     overlaps whatever is under it — so it stops being sticky here instead. */
  .docs-nav { position: static; }
  .docs-nav-inner {
    flex-wrap: wrap;
    height: auto;
    padding: 12px 20px;
    gap: 10px;
    row-gap: 12px;
  }
  .docs-search {
    order: 3;
    flex: 1 0 100%;
    max-width: none;
  }
  .docs-search kbd { display: none; }
  /* Brand, Menu and Download have to share one row, so the row loses the
     things it can spare: the "Docs" chip, and some button padding. */
  .brand-tag { display: none; }
  .docs-menu-btn { margin-left: auto; padding: 0 9px; }
  .docs-nav-inner .btn { padding: 0 14px; }
  .docs-sidebar, .docs-toc { top: 0; }
  .docs-article h2 { scroll-margin-top: 16px; }
}