/* walkabout.run — marketing stylesheet.
   Values are lifted from design/design_handoff_walkabout (README tokens +
   the Marketing prototype's inline styles). The prototype is desktop-first at
   1440px; the breakpoints at the bottom are ours, added so the same markup
   degrades without horizontal scroll. */

:root {
  /* light — "bone paper" */
  --bone: #faf6ee;
  --sand: #f2ebdc;
  --card: #fffdf7;
  --row-hover: #fcf9f1;
  --line: #e3d9c6;
  --line-soft: #efe7d6;
  --ink: #2b2620;
  --ink-hover: #443c32;
  --mulga: #6b6155;
  --eucalyptus: #4e7a5a;
  --ochre: #b8862b;
  --terracotta: #bf5b3c;
  --terracotta-hover: #a84b2f;
  /* Terracotta as INK rather than as a fill. #bf5b3c is 4.08:1 on bone — right
     behind bone-coloured button text, not enough for a link or a label, which
     need 4.5:1. The darkened pair is 6.88:1 on bone and 6.25:1 on sand, so it
     works everywhere the light palette goes. Fills keep #bf5b3c: the button
     colour is the brand's, and nothing about it changes. */
  --terracotta-text: #8c3e24;

  /* dark — "night hike" */
  --d-raised: #383126;
  --d-border: #3d362a;
  --d-text: #f0e9db;
  --d-soft: #a99c87;
  --d-eucalyptus: #7fa98a;
  --d-terracotta: #d98f63;
  --d-gold: #e3c98b;

  --sans: 'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bone);
}

body {
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a {
  color: var(--terracotta-text);
  text-decoration: none;
}

a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* The prototype paints focus with the ochre ring from the token set; browsers
   only give us an outline by default, and the ring is part of the design.
   The previous version of this rule set `outline: none` and then drew the ring
   with `border-color` — which does nothing at all on a link, since a link has
   no border to colour. So it removed the browser's focus indicator and put
   nothing in its place: keyboard focus was a faint cream glow and nothing
   more. The ring is now a real outline (2px ochre, offset so it clears the
   text) and the cream halo stays behind it, which is the designed look. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--ochre);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px #f3e7cb;
  border-radius: 6px;
}

/* On the dark sections the cream halo reads as a smudge; the ring carries it
   alone there, at 4.63:1 against #2b2620. */
.dark a:focus-visible,
.dark button:focus-visible,
.footer a:focus-visible,
.footer button:focus-visible,
.terminal-card a:focus-visible {
  box-shadow: none;
}

/* ---------- skip link ----------
   First thing in the tab order on every page, invisible until it is focused.
   Without it a keyboard or switch user tabs the whole nav — brand, three
   links, two buttons — before reaching the content, on every single page. */

.skip-link {
  position: absolute;
  left: 12px;
  top: 12px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--bone);
  color: var(--ink);
  border: 1.5px solid var(--ink);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  /* Off-screen rather than `display: none`, so it stays focusable. */
  transform: translateY(-200%);
}

/* `:focus`, not `:focus-visible`: the whole point of this link is to become
   visible whenever it holds focus. `:focus-visible` would hide it from anything
   that focuses it without a key press — a browser's "skip to content" affordance,
   a switch device, a script restoring focus — which is exactly the audience. */
.skip-link:focus {
  transform: translateY(0);
  color: var(--ink);
  text-decoration: none;
}

/* ---------- lists that are lists ----------
   The nav, the footer columns, the loop, the feature and FAQ cards, the setup
   waypoints, the hero's claims and the 404's trail markers are all lists of
   peers, and are now marked up as such — they were `<div>`s, so a screen
   reader announced a wall of text with no count and no boundaries.

   Every one of them sits in a layout that expects the children directly, so
   the markers and the UA padding come off here, and the markup carries
   `role="list"` to put back the semantics that `list-style: none` removes in
   Safari/VoiceOver. Purely presentational: the rendering is unchanged. */

.nav-links,
.footer-links,
.loop,
.cards-3,
.faq-grid,
.steps,
.hero-checks,
.mono-checks,
.cap-points,
.notfound-links,
.legal-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* In the rows of links, the `<li>` is a pass-through: it becomes the flex item
   the anchor used to be, so the anchors' own padding keeps laying out exactly
   as it did when they were direct children. */
.nav-links > li,
.legal-tabs > li,
.notfound-links > li {
  display: flex;
}

/* The footer's links took their spacing from `.footer-col`'s gap when they
   were siblings of the label; now they are inside a list, which carries it. */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* The heading-shaped `<div>`s are real headings now — a page whose only
   heading was its `<h1>` gave a screen-reader user no way to jump between
   sections, and the visual hierarchy was already there in the type. The
   classes carry the size and weight; only the UA margin needs cancelling for
   the rendering to be identical to the divs they replace. */
.loop-title,
.card-title,
.cta-title,
.faq-q,
.setup-title,
.terminal-label,
.panel-label,
.sheet-label,
/* …and the same for the `<div>`s that became paragraphs. Every one of these
   sits in a flex or grid container whose `gap` already provides the spacing,
   so a UA margin would be a visible change; zeroing it keeps every page
   pixel-identical to the divs it replaces. */
.hero-kicker,
.kicker,
.loop-text,
.card-text,
.setup-text,
.setup-cmd,
.faq-a,
.step-caption,
.shot,
.sheet-foot,
.prompt-line,
.prompt-note,
.legal-meta,
.legal-contact,
.help-contact {
  margin: 0;
}

.mono {
  font-family: var(--mono);
}

/* ---------- layout ---------- */

.shell {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
}

main {
  flex: 1;
  position: relative;
}

/* The light canvas carries the topo overlay behind everything. */
.canvas-topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('/assets/topo-light.svg');
}

.canvas-inner {
  position: relative;
}

.page {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 40px;
  display: flex;
  flex-direction: column;
}

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #faf6eef2;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.brand:hover {
  color: var(--ink);
  text-decoration: none;
}

/* compass mark — circle outline, rotated square needle in terracotta */
.compass {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.compass i {
  width: 8px;
  height: 8px;
  background: var(--terracotta);
  transform: rotate(45deg);
  display: block;
}

.wordmark {
  font-stretch: 125%;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: 0.08em;
}

.nav-links {
  display: flex;
  gap: 4px;
  margin-left: 12px;
}

.nav-link {
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mulga);
  background: transparent;
}

.nav-link:hover {
  background: var(--sand);
  color: var(--mulga);
  text-decoration: none;
}

.nav-link[aria-current='page'] {
  font-weight: 700;
  color: var(--ink);
  background: var(--sand);
}

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-appdomain {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mulga);
}

.nav-appdomain:hover {
  color: var(--ink);
}

/* ---------- buttons ---------- */

.btn {
  font-family: var(--sans);
  border-radius: 6px;
  cursor: pointer;
  display: inline-block;
  border: none;
  text-decoration: none;
}

.btn:hover {
  text-decoration: none;
}

.btn-accent {
  font-weight: 700;
  font-size: 14px;
  background: var(--terracotta);
  color: var(--bone);
  padding: 9px 18px;
}

.btn-accent:hover {
  background: var(--terracotta-hover);
  color: var(--bone);
}

.btn-accent-lg {
  font-weight: 700;
  font-size: 16px;
  background: var(--terracotta);
  color: var(--bone);
  padding: 14px 26px;
}

/* The hero sits on the dark section, so this once lightened to the dark
   palette's terracotta on hover — which put bone text on #d98f63 at 2.42:1
   and made the button HARDER to read the moment you pointed at it. It darkens
   like every other accent button now (5.25:1); the dark-palette tint is for
   text ON the dark ground, not for a fill with light text over it. */
.btn-accent-lg:hover {
  background: var(--terracotta-hover);
  color: var(--bone);
}

.btn-accent-md {
  font-weight: 700;
  font-size: 14px;
  background: var(--terracotta);
  color: var(--bone);
  padding: 12px 22px;
}

.btn-accent-md:hover {
  background: var(--terracotta-hover);
  color: var(--bone);
}

.btn-paper {
  font-weight: 700;
  font-size: 15px;
  background: var(--d-text);
  color: var(--ink);
  padding: 13px 24px;
}

.btn-paper:hover {
  background: var(--card);
  color: var(--ink);
}

.btn-outline {
  font-weight: 600;
  font-size: 14px;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 11px 20px;
}

.btn-outline:hover {
  background: var(--card);
  color: var(--ink);
}

/* ---------- dark sections ---------- */

.dark {
  background: var(--ink);
  position: relative;
  overflow: hidden;
}

.dark-topo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: url('/assets/topo-dark.svg');
}

/* ---------- home: hero ---------- */

.hero-inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 96px 40px 88px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero-kicker {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--d-terracotta);
  letter-spacing: 0.12em;
}

.hero-h1 {
  margin: 0;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 60px;
  line-height: 1.05;
  color: var(--d-text);
  max-width: 760px;
  text-wrap: pretty;
}

.hero-sub {
  margin: 0;
  font-size: 18px;
  line-height: 1.6;
  color: var(--d-soft);
  max-width: 560px;
  text-wrap: pretty;
}

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

.cmd-chip {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--d-soft);
  background: var(--d-raised);
  border-radius: 6px;
  padding: 12px 18px;
}

.hero-checks {
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--d-soft);
  margin-top: 8px;
}

/* ---------- home: the loop ---------- */

.section {
  max-width: 1120px;
  margin: 0 auto;
  padding: 88px 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 620px;
}

.h2 {
  margin: 0;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 36px;
}

.h2-sm {
  margin: 0;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 32px;
}

.lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--mulga);
}

.loop {
  display: flex;
  align-items: flex-start;
}

.loop-item {
  display: flex;
  align-items: flex-start;
}

.loop-item.grows {
  flex: 1;
}

.loop-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 190px;
  flex-shrink: 0;
}

/* waypoint pin — numbered circle, Space Mono bold */
.pin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.loop-title {
  font-weight: 700;
  font-size: 16px;
}

.loop-text {
  font-size: 13.5px;
  color: var(--mulga);
  line-height: 1.55;
}

/* dashed route line joining waypoints */
.route-h {
  flex: 1;
  border-top: 2px dashed var(--ochre);
  margin: 16px 14px 0;
}

.loop-note {
  display: flex;
  gap: 8px;
  align-items: center;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mulga);
}

.route-stub {
  display: inline-block;
  width: 32px;
  border-top: 2px dashed var(--ochre);
  flex-shrink: 0;
}

/* ---------- home: feature cards ---------- */

.band-sand {
  background: var(--sand);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.band-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 80px 40px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* trail blaze — two stacked painted rectangles */
.blaze {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.blaze span {
  width: 26px;
  height: 9px;
  display: block;
}

.card-title {
  font-weight: 700;
  font-size: 16.5px;
}

.card-text {
  font-size: 13.5px;
  color: var(--mulga);
  line-height: 1.6;
}

.link-more {
  align-self: flex-start;
  font-weight: 600;
  font-size: 14px;
  color: var(--terracotta-text);
}

/* ---------- home: security ---------- */

.split {
  max-width: 1120px;
  margin: 0 auto;
  padding: 88px 40px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 56px;
  align-items: center;
}

.stack-16 {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.kicker {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--terracotta-text);
  letter-spacing: 0.1em;
}

.body-15 {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--mulga);
}

.mono-checks {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--mulga);
  line-height: 2;
}

.terminal-card {
  background: var(--ink);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.terminal-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--d-terracotta);
  letter-spacing: 0.1em;
}

.terminal-body {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--d-text);
  line-height: 2;
}

/* ---------- home: example teaser ---------- */

.teaser-inner {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 80px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.teaser-copy {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
}

.on-dark {
  color: var(--d-text);
}

.on-dark-soft {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--d-soft);
}

/* ---------- page headers ---------- */

.page-head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 680px;
}

.page-h1 {
  margin: 0;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 44px;
  white-space: nowrap;
}

/* ---------- product ---------- */

.product-page {
  gap: 64px;
}

.cap-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
}

.cap-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--terracotta-text);
}

.cap-title {
  margin: 0;
  font-stretch: 125%;
  font-weight: 700;
  font-size: 24px;
}

.cap-text {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 560px;
}

.cap-points {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--mulga);
  line-height: 2;
}

.cta-card {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 36px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-title {
  font-weight: 800;
  font-stretch: 125%;
  font-size: 22px;
}

.cta-sub {
  font-size: 14px;
  color: var(--mulga);
  margin-top: 4px;
}

.cta-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---------- examples ---------- */

.examples-page {
  gap: 48px;
}

.examples-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}

/* min-width:0 or the <pre> panels blow the grid track out and the page
   scrolls sideways. */
.examples-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}

.panel-head {
  padding: 12px 20px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.panel-label {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--terracotta-text);
  letter-spacing: 0.08em;
}

.panel-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mulga);
}

.panel-body {
  padding: 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prompt-line {
  font-size: 16px;
  line-height: 1.5;
}

.prompt-note {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--mulga);
}

.panel-dark {
  background: var(--ink);
  border-radius: 10px;
  overflow: hidden;
}

.panel-dark .panel-head {
  border-bottom: 1px solid var(--d-raised);
}

.panel-dark .panel-label {
  color: var(--d-terracotta);
}

.code {
  margin: 0;
  padding: 20px 22px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
  color: var(--d-text);
  overflow: auto;
}

.c-terracotta {
  color: var(--d-terracotta);
}

.c-euc {
  color: var(--d-eucalyptus);
}

.c-gold {
  color: var(--d-gold);
}

.c-dim {
  color: var(--d-soft);
}

/* the rendered guide "paper" sheet */
.guide-sheet {
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 44px 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  box-shadow: 0 8px 28px rgba(43, 38, 32, 0.08);
  min-width: 0;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sheet-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--mulga);
}

/* passport stamp verdict */
.stamp {
  transform: rotate(3deg);
  border: 2px solid var(--eucalyptus);
  color: var(--eucalyptus);
  border-radius: 6px;
  padding: 3px 10px;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.12em;
  box-shadow:
    inset 0 0 0 1.5px var(--bone),
    inset 0 0 0 2.5px var(--eucalyptus);
  white-space: nowrap;
}

.sheet-title {
  margin: 0;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 26px;
  line-height: 1.2;
}

.steps {
  display: flex;
  flex-direction: column;
}

.step {
  display: flex;
  gap: 16px;
}

.step-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pin-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.route-v {
  flex: 1;
  border-left: 2px dashed var(--ochre);
  margin: 6px 0;
}

.step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 22px;
  min-width: 0;
}

.step-caption {
  font-size: 14.5px;
  line-height: 1.5;
  padding-top: 3px;
}

/* screenshot placeholder — real PNGs from R2 replace these in the product */
.shot {
  height: 150px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: repeating-linear-gradient(45deg, #fffdf7 0 14px, #f2ebdc 14px 28px);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mulga);
  text-align: center;
  padding: 0 12px;
}

.sheet-foot {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--mulga);
}

/* ---------- setup & help ---------- */

.help-page {
  gap: 56px;
}

.setup-step {
  display: flex;
  gap: 24px;
}

.pin-lg {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.route-v-lg {
  flex: 1;
  border-left: 2px dashed var(--ochre);
  margin: 8px 0;
}

.setup-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 40px;
  max-width: 720px;
  min-width: 0;
}

.setup-title {
  font-weight: 700;
  font-size: 19px;
  padding-top: 5px;
}

.setup-text {
  font-size: 14.5px;
  color: var(--mulga);
  line-height: 1.65;
}

.setup-cmd {
  font-family: var(--mono);
  font-size: 13px;
  background: var(--ink);
  color: var(--d-text);
  border-radius: 8px;
  padding: 12px 16px;
  align-self: flex-start;
  max-width: 100%;
  overflow-x: auto;
}

.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.faq-q {
  font-weight: 700;
  font-size: 15px;
}

.faq-a {
  font-size: 13.5px;
  color: var(--mulga);
  line-height: 1.6;
}

.help-contact {
  font-size: 14px;
  color: var(--mulga);
}

/* ---------- legal ---------- */

.legal-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 72px 40px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.legal-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.legal-tab {
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  background: var(--card);
  color: var(--mulga);
  border: 1px solid var(--line);
}

.legal-tab:hover {
  background: var(--row-hover);
  color: var(--ink);
  text-decoration: none;
}

.legal-tab[aria-current='page'] {
  background: var(--ink);
  color: var(--bone);
}

.legal-tab[aria-current='page']:hover {
  background: var(--ink-hover);
  color: var(--bone);
}

.legal-title-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.legal-h1 {
  margin: 0;
  font-stretch: 125%;
  font-weight: 800;
  font-size: 38px;
}

.legal-meta {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--mulga);
}

.legal-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

.legal-h2 {
  margin: 0;
  font-weight: 700;
  font-size: 18px;
}

.legal-p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-hover);
}

.legal-contact {
  font-size: 13.5px;
  color: var(--mulga);
}

/* ---------- 404 ---------- */

.notfound {
  position: relative;
  max-width: 1120px;
  margin: 0 auto;
  padding: 120px 40px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.notfound-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 14px;
  margin-top: 8px;
}

/* ---------- footer ---------- */

.footer {
  background: var(--ink);
  color: var(--d-soft);
}

.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 40px;
  display: flex;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.compass-sm {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--d-text);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.compass-sm i {
  width: 7px;
  height: 7px;
  background: var(--d-terracotta);
  transform: rotate(45deg);
  display: block;
}

.wordmark-sm {
  font-stretch: 125%;
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--d-text);
}

.footer-tagline {
  font-family: var(--mono);
  font-size: 12px;
}

.footer-cols {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
}

/* Was `--mulga`, the LIGHT palette's grey, on the dark footer: 2.47:1. A
   token mix-up, not a design choice — the prototype's dark-ground grey is
   `--d-soft` (5.56:1), which is what these three now use. */
.footer-col-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--d-soft);
  margin: 0;
}

.footer-col a {
  color: var(--d-soft);
}

.footer-col a:hover {
  color: var(--d-text);
}

.footer-bar {
  border-top: 1px solid var(--d-raised);
}

.footer-bar-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 16px 40px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--d-soft);
}

/* ---------- responsive ----------
   The design is 1440-wide and desktop-first. These breakpoints stack the
   fixed-width pieces (the five 190px loop columns, the two-up grids, the
   280px capability gutter) so nothing overflows on a phone. */

@media (max-width: 1080px) {
  /* The page headings are held on one line at the design width, where they
     fit. Below it they do not, and `nowrap` turns "not fitting" into a
     horizontal scrollbar on the whole page — worse, one that stays when a
     reader zooms to 200%, which is the case WCAG 1.4.10 is about. Released
     here: the heading wraps, which is what a heading is supposed to do. */
  .page-h1 {
    white-space: normal;
  }

  .cards-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .loop {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 24px;
  }

  .loop-item,
  .loop-item.grows {
    flex: none;
  }

  /* `width: auto` alone was not enough: `.loop-col` also carries
     `flex-shrink: 0` (right at the design width, where the five columns are a
     fixed 190px), and a flex item that refuses to shrink sizes itself to its
     max-content text — so the loop pushed the whole home page about 570px wide
     at 375px, a horizontal scrollbar on every phone. Both the shrink refusal
     and the automatic min-width have to come off for the grid cell to be the
     thing that decides the width. */
  .loop-col {
    width: auto;
    min-width: 0;
    flex-shrink: 1;
  }

  /* horizontal route lines only make sense in the single row they connect */
  .route-h {
    display: none;
  }

  .split {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .examples-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .nav-inner {
    gap: 16px;
    height: auto;
    padding: 12px 24px;
    flex-wrap: wrap;
  }

  .nav-links {
    margin-left: 0;
    order: 3;
    width: 100%;
    overflow-x: auto;
  }

  .nav-right {
    gap: 12px;
  }

  .nav-appdomain {
    display: none;
  }

  .shell,
  .nav-inner,
  .footer-inner,
  .footer-bar-inner {
    padding-left: 24px;
    padding-right: 24px;
  }

  .page,
  .legal-page,
  .section,
  .band-inner,
  .split,
  .hero-inner,
  .teaser-inner,
  .notfound {
    padding-left: 24px;
    padding-right: 24px;
  }

  .hero-inner {
    padding-top: 64px;
    padding-bottom: 56px;
  }

  .page,
  .legal-page {
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .section,
  .band-inner,
  .split {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .hero-h1 {
    font-size: 40px;
  }

  /* Released at 1080 already; here it is only a size step. */
  .page-h1 {
    font-size: 32px;
  }

  .legal-h1 {
    font-size: 30px;
  }

  .h2 {
    font-size: 28px;
  }

  .h2-sm {
    font-size: 26px;
  }

  .hero-checks {
    flex-direction: column;
    gap: 8px;
  }

  .cards-3,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .loop {
    grid-template-columns: 1fr;
  }

  .cap-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .guide-sheet {
    padding: 28px 24px;
  }

  .cta-card {
    padding: 28px 24px;
  }

  .terminal-card {
    padding: 24px;
  }

  .footer-cols {
    gap: 32px;
  }
}

@media (max-width: 480px) {
  /* Keep the brand and the CTA on one row; only the links wrap below. */
  .nav-inner {
    gap: 12px;
  }

  .compass {
    width: 24px;
    height: 24px;
  }

  .wordmark {
    font-size: 14px;
  }

  .btn-accent {
    font-size: 13px;
    padding: 8px 14px;
  }

  .nav-link {
    padding: 6px 10px;
  }

  .hero-h1 {
    font-size: 34px;
  }

  .page-h1 {
    font-size: 28px;
  }

  .guide-sheet {
    padding: 24px 18px;
  }
}