/* Vurb (vurb.me)
   Palette comes from the bird logo: ink tile, cream bird, orange beak.
   Orange is the only accent. Use it for primary buttons, focus, active states and small markers.
   (The waveform pill in the product demo keeps its rainbow bars because it depicts the real app.) */
:root {
  --ink: #111113;
  --cream: #f5f5f2;
  --orange: #ff5a1f;            /* fills only; put ink text on it */

  --bg: #f5f5f2;
  --bg-sunk: #ecebe5;
  --paper: #fbfbf8;
  --text: #111113;
  --muted: #5c5b57;
  --rule: #dedcd4;
  --rule-strong: #c8c6bd;
  --accent: var(--orange);
  --on-accent: var(--ink);
  --accent-line: #d4420c;       /* orange for lines/rings/text on cream (4.2:1) */
  --screen: #111113;            /* product-shot desktop */
  --editor: #fbfbf8;
  --focus: var(--accent-line);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --measure: 68ch;
  --gutter: 32px;
  --maxw: 1120px;
  --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 88px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg: #111113;
  --bg-sunk: #0b0b0d;
  --paper: #1a1a1d;
  --text: #f5f5f2;
  --muted: #a3a29c;
  --rule: #2a2a2e;
  --rule-strong: #3b3b40;
  --accent-line: #ff5a1f;
  --screen: #1a1a1d;
  --editor: #222226;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 500; }
h1, h2 { font-family: var(--serif); letter-spacing: -0.015em; line-height: 1.08; }
p, ul, ol, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: var(--text); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); }
a:hover { text-decoration-color: var(--accent-line); text-decoration-thickness: 2px; }
kbd {
  font-family: var(--mono); font-size: 0.82em; padding: 1px 5px;
  border: 1px solid var(--rule-strong); border-radius: 4px; background: var(--paper);
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--orange); color: var(--ink); }
.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.skip-link { position: absolute; left: 8px; top: -40px; background: var(--accent); color: var(--on-accent); padding: 6px 10px; z-index: 10; }
.skip-link:focus { top: 8px; }

/* Buttons */
.btn {
  display: inline-block; padding: 11px 18px; border-radius: 6px;
  background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent);
  font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; text-align: center; cursor: pointer;
}
.btn:hover { background: #ff6d38; border-color: #ff6d38; }
.btn:active { transform: translateY(1px); }
.btn-outline { background: transparent; color: var(--text); border-color: var(--text); }
.btn-outline:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn-small { padding: 7px 12px; font-size: 14px; }
.text-btn { background: none; border: 0; padding: 4px 2px; font: inherit; font-size: 14px; color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule-strong); }
.text-btn:hover { color: var(--text); text-decoration-color: var(--accent-line); }
.quiet-link { font-size: 15px; }

/* Header (markup injected by layout.js) */
.site-header { position: relative; z-index: 30; border-bottom: 1px solid var(--rule); background: var(--bg); }
.header-inner { display: flex; align-items: center; gap: 32px; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 16px; color: var(--text); text-decoration: none; letter-spacing: -0.01em; }
.brand img { height: 20px; width: auto; }
.site-nav { flex: 1; display: flex; align-items: center; gap: 24px; }
.nav-list { display: flex; align-items: center; gap: 22px; }
.nav-item > a, .nav-menu-btn { font: inherit; font-size: 14px; color: var(--muted); text-decoration: none; background: none; border: 0; padding: 4px 0; cursor: pointer; }
.nav-item > a:hover, .nav-menu-btn:hover, .nav-item > a[aria-current="page"], .nav-item.is-active > .nav-menu-btn { color: var(--text); }
.nav-item > a[aria-current="page"], .nav-item.is-active > .nav-menu-btn { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; text-decoration-color: var(--accent); }
.has-menu { position: relative; }
.caret-down { display: inline-block; width: 6px; height: 6px; margin-left: 3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.nav-menu {
  display: none; position: absolute; top: calc(100% + 10px); left: -14px; min-width: 220px; padding: 8px 0;
  background: var(--paper); border: 1px solid var(--rule-strong); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.menu-open .nav-menu { display: block; }
.nav-menu a { display: block; padding: 7px 14px; font-size: 14px; color: var(--text); text-decoration: none; }
.nav-menu a:hover { background: var(--bg); }
.nav-menu a[aria-current="page"] { font-weight: 650; box-shadow: inset 2px 0 0 var(--accent); }
.nav-menu li:first-child { border-bottom: 1px solid var(--rule); margin-bottom: 4px; padding-bottom: 4px; }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.nav-toggle { display: none; margin-left: auto; font: inherit; font-size: 14px; padding: 6px 10px; border: 1px solid var(--rule-strong); border-radius: 6px; background: transparent; color: var(--text); cursor: pointer; }

/* Hero */
.hero { padding: 88px 0 96px; }
.hero-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
.hero h1 { font-size: clamp(2.6rem, 5.2vw, 4.1rem); }
.lede { margin-top: 24px; font-size: 18px; max-width: 30em; }
.hero-actions { display: flex; align-items: center; gap: 20px; margin: 32px 0 16px; flex-wrap: wrap; }

/* Product shot */
.shot { margin: 0; }
.screen {
  position: relative; aspect-ratio: 16 / 10.5; padding: 7% 8% 0;
  background: var(--screen); border: 1px solid var(--rule); border-radius: 14px; overflow: hidden;
}
.editor {
  background: var(--editor); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 18px 40px rgba(0, 0, 0, 0.35); overflow: hidden;
}
.editor-bar { position: relative; display: flex; align-items: center; height: 32px; padding: 0 10px; border-bottom: 1px solid var(--rule); background: var(--bg-sunk); }
:root[data-theme="dark"] .editor-bar { background: #1c1c20; }
.dots { display: flex; gap: 6px; }
.dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--rule-strong); }
.editor-title { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--muted); pointer-events: none; }
.editor-title img { width: 16px; height: 16px; }
.editor-body { padding: 20px 22px 26px; min-height: 190px; }
.typed-line { font-family: var(--mono); font-size: 14px; line-height: 1.65; }
.caret { display: inline-block; width: 2px; background: var(--accent) !important; height: 1.1em; margin-left: 1px; vertical-align: -0.2em; background: var(--text); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* The waveform pill depicts the real app, so it keeps the app's rainbow bars. Nowhere else. */
.pill {
  position: absolute; left: 50%; bottom: 7%; transform: translateX(-50%);
  display: flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 15px;
  background: #0d0d0f; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: opacity .25s ease, transform .25s ease;
}
.pill.off { opacity: 0; transform: translateX(-50%) translateY(6px); }
.bars { display: flex; align-items: center; gap: 3px; height: 16px; }
.bars b {
  width: 3px; height: 100%; border-radius: 2px;
  background: hsl(calc(345deg + var(--i) * 26deg) 90% 60%);
  transform: scaleY(0.3); animation: bar 1s ease-in-out infinite; animation-delay: calc(var(--i) * -0.17s);
}
.bars b:nth-child(3n) { animation-duration: 0.8s; }
@keyframes bar { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

/* Sections */
.section { padding: 80px 0; border-top: 1px solid var(--rule); }
.section h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); margin-bottom: 36px; }
.intro { margin: -20px 0 28px; }

/* Steps */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.step-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: 13px; font-weight: 600; margin-bottom: 14px; }
.steps h3 { font-size: 18px; font-weight: 650; margin-bottom: 6px; }
.steps p { color: var(--muted); font-size: 16px; }
.aside { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); color: var(--muted); font-size: 15px; }

/* Note */
.note { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.note h2 { margin-bottom: 0; }
.note-body { max-width: 36em; font-family: var(--serif); font-size: 20px; line-height: 1.55; }
.note-body p + p { margin-top: 18px; }
.sig { font-style: italic; color: var(--muted); }

/* Features */
.features { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; }
.features > div { display: grid; grid-template-columns: 11em 1fr; gap: 20px; padding: 18px 0; border-top: 1px solid var(--rule); }
.features dt { font-weight: 650; font-size: 15px; }
.features dd { color: var(--muted); font-size: 15px; }

/* Pricing */
.section-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.section-top h2 { margin-bottom: 8px; }
.billing { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: 6px; overflow: hidden; }
.billing button { font: inherit; font-size: 14px; padding: 7px 14px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.billing button + button { border-left: 1px solid var(--rule-strong); }
.billing button[aria-pressed="true"] { background: var(--text); color: var(--bg); font-weight: 600; }
.billing button[aria-pressed="true"] .muted { color: inherit; opacity: 0.75; }
.billing button[aria-pressed="true"] .muted { font-weight: 400; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule-strong); border-radius: 8px; background: var(--paper); }
.plan { display: flex; flex-direction: column; padding: 28px 24px; }
.plan + .plan { border-left: 1px solid var(--rule); }
.plan h3 { font-size: 15px; font-weight: 650; }
.price { margin-top: 14px; display: flex; align-items: baseline; gap: 4px; }
.amount { font-family: var(--serif); font-size: 40px; font-weight: 500; line-height: 1; letter-spacing: -0.02em; }
.per { font-size: 14px; color: var(--muted); }
.price-note { margin-top: 8px; font-size: 13.5px; color: var(--muted); min-height: 2.6em; }
.plan ul { flex: 1; margin: 18px 0 26px; border-top: 1px solid var(--rule); }
.plan li { padding: 9px 0; border-bottom: 1px solid var(--rule); font-size: 14.5px; line-height: 1.45; }
.plan li.later { color: var(--muted); }
.plan li em { font-style: italic; }

/* Comparison */
.table-wrap { overflow-x: auto; border-top: 1px solid var(--rule-strong); }
.compare { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14px; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule); }
.compare thead th { font-weight: 650; padding-top: 12px; }
.compare tbody th { font-weight: 500; color: var(--muted); white-space: nowrap; }
.compare td:nth-child(2), .compare th:nth-child(2) { font-weight: 650; }
.sources { margin-top: 20px; max-width: 52em; font-size: 13px; color: var(--muted); }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.faq details { border-top: 1px solid var(--rule); }
.faq details:last-child { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding: 16px 0; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--muted); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 18px; color: var(--muted); max-width: 40em; }

/* Download */
.download-inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.download h2 { margin-bottom: 6px; }
.platforms { display: flex; gap: 10px; flex-wrap: wrap; }
.platforms .btn { min-width: 120px; }

/* Footer (markup injected by layout.js) */
.site-footer { border-top: 1px solid var(--rule); padding: 48px 0 40px; font-size: 14px; color: var(--muted); }
.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(5, 1fr); gap: 32px; }
.footer-brand p { margin-top: 10px; max-width: 14em; }
.footer-h { font-family: var(--sans); font-size: 13px; font-weight: 650; color: var(--text); margin: 0 0 10px; letter-spacing: 0; }
.footer-cols li { margin: 6px 0; }
.footer-cols a { color: var(--muted); text-decoration: none; }
.footer-cols a:hover, .footer-cols a[aria-current="page"] { color: var(--text); text-decoration: underline; }
.footer-legal { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--rule); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 20;
  max-width: calc(100% - 32px); width: max-content; padding: 10px 14px; border-radius: 6px;
  background: var(--text); color: var(--bg); font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.toast.show { opacity: 1; }

/* Legal pages */
.legal { padding: 56px 0 96px; }
.legal .container { max-width: 760px; }
.legal h1 { font-size: clamp(2.2rem, 4.5vw, 3rem); margin-bottom: 8px; }
.legal h2 { font-family: var(--sans); font-size: 18px; font-weight: 650; letter-spacing: 0; margin: 36px 0 8px; }
.legal p, .legal li { color: var(--muted); }
.legal p + p { margin-top: 12px; }
.draft-banner { background: #fbefc9; color: #4d3a00; border-bottom: 1px solid #e6d18f; padding: 10px 0; font-size: 14px; }
:root[data-theme="dark"] .draft-banner { background: #2f2610; color: #f1dc9c; border-color: #4f4320; }

/* Responsive */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .plans { grid-template-columns: 1fr 1fr; }
  .plan:nth-child(3) { border-left: 0; }
  .plan:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .features { grid-template-columns: 1fr; }
  .note, .faq-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 680px) {
  :root { --gutter: 16px; }
  body { font-size: 16px; }
  .hero { padding: 48px 0 64px; }
  .lede { font-size: 17px; }
  .section { padding: 56px 0; }
  .section h2 { margin-bottom: 24px; }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .features > div { grid-template-columns: 1fr; gap: 4px; }
  .note-body { font-size: 18px; }
  .plans { grid-template-columns: 1fr; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--rule); }
  .screen { aspect-ratio: auto; padding: 18px 14px 64px; }
  .editor-body { padding: 14px 14px 18px; min-height: 120px; }
  .typed-line { font-size: 13px; }
  .editor-title { font-size: 11px; padding-left: 50px; }
  .compare tbody th, .compare thead th:first-child { position: sticky; left: 0; background: var(--bg); padding-right: 12px; }
  .platforms { width: 100%; }
  .platforms li { flex: 1; }
  .platforms .btn { width: 100%; min-width: 0; }
}


/* ---------- Inner pages ---------- */
.page-hero { padding: 64px 0 48px; }
.page-hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.5rem); max-width: 16em; }
.page-hero .lede { max-width: 36em; }
.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.prose { max-width: 40em; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 14px; }
.prose ul { list-style: disc; padding-left: 1.2em; }
.prose li { margin: 6px 0; }
.serif-prose { font-family: var(--serif); font-size: 20px; line-height: 1.55; }
.section-lede { margin: -20px 0 32px; color: var(--muted); max-width: 40em; }
.more { margin-top: 28px; font-size: 15px; }
.tag { display: inline-block; font-family: var(--mono); font-size: 11.5px; padding: 1px 6px; border: 1px solid var(--rule-strong); border-radius: 4px; color: var(--muted); vertical-align: 2px; white-space: nowrap; font-weight: 400; }
.two-col { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; }
.two-col h2 { margin-bottom: 0; }

/* Plain bordered card grid */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.cards.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cards.cols-2 { grid-template-columns: repeat(2, 1fr); }
.card { padding: 22px 22px 24px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { background: var(--paper); }
a.card:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.card h3 { font-size: 16px; font-weight: 650; margin-bottom: 6px; }
.card p { color: var(--muted); font-size: 15px; }

/* Spoken -> typed examples */
.workflows { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.workflow { display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; padding: 28px 0; border-bottom: 1px solid var(--rule); }
.workflow h3 { font-size: 18px; font-weight: 650; margin-bottom: 6px; }
.workflow > div > p { color: var(--muted); font-size: 15.5px; }
.example { display: grid; gap: 10px; }
.example-row { display: grid; grid-template-columns: 4.5em 1fr; gap: 12px; align-items: baseline; }
.example-label { font-family: var(--mono); font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.example-said { font-family: var(--serif); font-size: 18px; font-style: italic; color: var(--muted); }
.example-typed { font-family: var(--mono); font-size: 14px; line-height: 1.6; background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: 10px 12px; white-space: pre-wrap; }

/* Speaking vs typing */
.rates { display: grid; gap: 18px; max-width: 760px; }
.rate { display: grid; grid-template-columns: 9em 1fr 7em; gap: 16px; align-items: center; }
.rate-label { font-weight: 600; font-size: 15px; }
.rate-bar { height: 10px; background: var(--bg-sunk); border-radius: 2px; overflow: hidden; }
.rate-bar span { display: block; height: 100%; background: var(--muted); }
.rate:first-child .rate-bar span { background: var(--accent); }
.rate-num { font-family: var(--mono); font-size: 14px; color: var(--muted); }
.footnote { margin-top: 16px; font-size: 13px; color: var(--muted); }

/* Simple key/value table */
.kv { width: 100%; border-collapse: collapse; font-size: 15px; }
.kv th, .kv td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0; border-bottom: 1px solid var(--rule); }
.kv th { width: 30%; font-weight: 600; }
.kv td { color: var(--muted); }
.kv thead th { border-bottom-color: var(--rule-strong); color: var(--text); }

/* Numbered instructions */
.ol-steps { list-style: none; counter-reset: s; max-width: 44em; }
.ol-steps li { counter-increment: s; position: relative; padding: 0 0 18px 2.2em; }
.ol-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.callout { border-left: 2px solid var(--rule-strong); padding: 4px 0 4px 18px; color: var(--muted); max-width: 44em; }

.faq-group + .faq-group { margin-top: 44px; }
.faq-group h3 { font-family: var(--serif); font-size: 24px; font-weight: 500; margin-bottom: 8px; }
.cta-band { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-band h2 { margin-bottom: 6px; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.changelog-entry { display: grid; grid-template-columns: 12em 1fr; gap: 40px; }
.changelog-entry h2 { font-size: 26px; margin-bottom: 4px; }

@media (max-width: 960px) {
  .cards, .cards.cols-3 { grid-template-columns: 1fr 1fr; }
  .two-col, .workflow, .changelog-entry { grid-template-columns: 1fr; gap: 16px; }
}
@media (max-width: 680px) {
  .page-hero { padding: 40px 0 32px; }
  .cards, .cards.cols-3, .cards.cols-2 { grid-template-columns: 1fr; }
  .rate { grid-template-columns: 1fr auto; gap: 6px 12px; }
  .rate-bar { grid-column: 1 / -1; grid-row: 2; }
  .example-row { grid-template-columns: 1fr; gap: 4px; }
  .serif-prose { font-size: 18px; }
  .kv th { width: 40%; }
}

/* Mobile navigation */
@media (max-width: 900px) {
  .nav-toggle { display: inline-block; }
  .site-nav {
    display: none; position: absolute; top: 60px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--rule); padding: 8px var(--gutter) 20px;
  }
  .site-nav.open { display: flex; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--rule); }
  .nav-item > a, .nav-menu-btn { display: block; width: 100%; text-align: left; padding: 12px 0; font-size: 16px; color: var(--text); }
  .nav-menu { position: static; display: none; min-width: 0; box-shadow: none; border: 0; border-radius: 0; background: transparent; padding: 0 0 10px 12px; }
  .menu-open .nav-menu { display: block; }
  .nav-menu li:first-child { border: 0; margin: 0; padding: 0; }
  .nav-menu a { padding: 8px 0; font-size: 15px; }
  .header-actions { margin: 16px 0 0; justify-content: space-between; }
  .footer-cols { grid-template-columns: repeat(3, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bars b, .caret { animation: none; }
  .bars b:nth-child(odd) { transform: scaleY(0.75); }
  .pill { transition: none; }
}

/* Page-specific bits */
.features.single { grid-template-columns: 1fr; }
.h1-inline { font-size: clamp(2.3rem, 4.6vw, 3.5rem); margin-bottom: 8px; }
.h3-plain { font-size: 17px; font-weight: 650; margin: 0 0 12px; }
.ol-steps + .h3-plain { margin-top: 12px; }
.dl-platforms { margin: 28px 0 14px; }
.faq-wrap { max-width: 820px; }
.fine { font-size: 14px; color: var(--muted); }

/* ---------- Bird touches ---------- */
.hero-mark { width: 112px; height: 112px; margin: 0 0 20px -11px; }  /* tile has ~10% padding in the SVG */
.plan:nth-child(3) { box-shadow: inset 0 3px 0 var(--accent); }
.bird-list { list-style: none; padding: 0; }
.bird-list li { position: relative; padding-left: 30px; margin: 10px 0; }
.bird-list li::before { content: ""; position: absolute; left: 0; top: 0.2em; width: 20px; height: 20px; background: url("assets/logo.svg") center / contain no-repeat; }
.not-found { padding: 96px 0 120px; }
.not-found img { width: 160px; height: 160px; margin: 0 0 24px -16px; }
.not-found h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
.not-found .lede { max-width: var(--measure); }
.not-found ul { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 28px; }

/* ---------- Rhythm and measure ---------- */
.prose, .page-hero .lede, .section-lede, .faq details p, .callout, .sources { max-width: var(--measure); }
.serif-prose { max-width: 62ch; }
h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
@media (max-width: 680px) {
  .hero-mark { width: 88px; height: 88px; margin: 0 0 14px -9px; }
}
.prose .bird-list { list-style: none; padding-left: 0; }