/* Fonts are self-hosted, not pulled from Google. The hosted version cost
   a render-blocking stylesheet plus a three-level critical chain across
   two third-party origins (HTML -> googleapis CSS -> gstatic woff2);
   PageSpeed put it at ~490ms. Serving the same files from this origin
   removes the blocking request and both extra DNS+TLS handshakes.
   Both families are OFL, so redistribution is fine. The @font-face
   blocks below are Google's own, with the URLs pointed local, so the
   variable axes (Archivo wght 100-900 / wdth 62-125%) still work.
   Archivo italic is deliberately omitted: nothing on the page is
   italic, so it would be 99KB nobody downloads. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url(/fonts/archivo-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/martian-mono-normal.woff2) format("woff2");
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/martian-mono-normal.woff2) format("woff2");
}
:root {
  --paper: #f4eee3;
  --paper-hi: #faf6ec;
  --ink: #1d1510;
  --ink-soft: #4a3a2f;
  /* Darkened from #7c6a5c, which measured 4.46:1 on --paper and so
   missed WCAG AA for body text by a hair. 4.74:1. Both users of this
   token (.cmd-note, .tag.next) sit on light surfaces, so this only
   ever helps. */
  --ink-faint: #786658;
  --clay: #b0492c;
  --clay-deep: #8f3a22;
  --clay-lift: #e8926f;
  --line: #d9cdb9;
  --line-ink: #3a2d24;
  --mono: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", ui-sans-serif, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection {
  background: rgba(176, 73, 44, 0.25);
}
a {
  color: inherit;
}
.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

/* ── type voices ─────────────────────────────────────────────── */
.display {
  font-stretch: 125%;
  font-weight: 900;
  line-height: 0.96;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.kicker {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.num {
  font-stretch: 118%;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ── masthead ────────────────────────────────────────────────── */
header.masthead {
  border-bottom: 2px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
}
.masthead .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}
.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  font-stretch: 125%;
  font-weight: 900;
  font-size: 20px;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.wordmark svg {
  display: block;
}
.mast-links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 14px;
  font-weight: 600;
}
.mast-links a {
  text-decoration: none;
  color: var(--ink-soft);
}
/* Hidden until the 640px breakpoint turns it on, so desktop keeps the
   inline links and never renders a hamburger. */
.mast-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
}
.mast-toggle:hover {
  background: var(--ink);
  color: var(--paper);
}
/* Closed by default, and only ever openable below the breakpoint. Note
   the `display` here must stay `none`: a bare `display:flex` beats the
   `hidden` attribute's UA `display:none`, which renders the drawer open
   on load and on desktop. The media query below is what opens it. */
.mobile-menu {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 10px clamp(20px, 4vw, 48px) 18px;
  border-top: 2px solid var(--ink);
  background: var(--paper);
}
.mobile-menu a {
  padding: 12px 0;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mast-links a:hover {
  color: var(--clay);
}
/* The CTA is a .btn inside .mast-links; without this the link color
   rule wins and paints its label ink-on-ink. */
.mast-links a.btn,
.mast-links a.btn:hover {
  color: var(--paper);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  padding: 12px 22px;
  border: 2px solid var(--ink);
  transition:
    background-color 150ms cubic-bezier(0.22, 1, 0.36, 1),
    color 150ms cubic-bezier(0.22, 1, 0.36, 1);
}
.btn:hover {
  background: var(--clay);
  border-color: var(--clay);
}
.btn.ghost {
  background: transparent;
  color: var(--ink);
}
.btn.ghost:hover {
  background: var(--ink);
  color: var(--paper);
}
.btn.on-clay {
  background: var(--paper);
  color: var(--clay-deep);
  border-color: var(--paper);
}
.btn.on-clay:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
/* Secondary action on the clay section. Outlined rather than filled so
   the pair reads as primary + secondary instead of two equal buttons —
   "Open the registry" is still the one most visitors want. */
.btn.on-clay-ghost {
  background: transparent;
  color: var(--paper);
  border-color: var(--paper);
}
.btn.on-clay-ghost:hover {
  background: var(--paper);
  color: var(--clay-deep);
}
/* Wrap rather than overflow when two buttons meet a narrow screen. */
.sec-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
/* Sitting side by side costs 359px (170 + 177 + a 12px gap), and a phone
   reporting 360 CSS px leaves roughly a 320px container — so the pair
   wraps. Left alone each button then shrink-wraps its own label and the
   result is a ragged stack of two different widths. Letting them grow
   fixes both ends of that: where the row fits they sit side by side and
   fill it, and where it doesn't each takes its own line at full width, so
   the stack is at least even. `1 0 auto` (grow, never shrink) is what
   stops a label breaking mid-phrase to force a fit — better to wrap the
   line than to hyphenate the button. Desktop is left out on purpose: the
   pair sits in a text column there, and stretching it reads as a banner. */
@media (max-width: 640px) {
  .sec-actions .btn {
    flex: 1 0 auto;
    justify-content: center;
  }
}
.btn.on-ink {
  background: var(--clay-lift);
  color: var(--ink);
  border-color: var(--clay-lift);
}
.btn.on-ink:hover {
  background: var(--paper);
  border-color: var(--paper);
}
@media (max-width: 640px) {
  .mast-links .hide-sm {
    display: none;
  }
  .mast-toggle {
    display: inline-flex;
  }
  /* The only rule that opens the drawer — so it cannot appear on desktop
     even if the `hidden` attribute is somehow out of sync. */
  .mobile-menu:not([hidden]) {
    display: flex;
  }
}

/* ── hero ────────────────────────────────────────────────────── */
.hero {
  padding: clamp(56px, 9vw, 120px) 0 clamp(48px, 7vw, 96px);
  border-bottom: 2px solid var(--ink);
}
.hero h1 {
  font-size: clamp(32px, 6.6vw, 88px);
  max-width: 15ch;
}
.hero h1 .turn {
  color: var(--clay);
}
.hero .stand {
  margin-top: 28px;
  max-width: 58ch;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
}
.hero .stand strong {
  color: var(--ink);
}
.launchline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  padding: 7px 14px;
  border: 2px solid var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.launchline .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--clay);
}
.hero-actions {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.cmd {
  margin-top: 40px;
  max-width: 760px;
  border: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  font-family: var(--mono);
  font-size: clamp(12px, 1.4vw, 14px);
  min-width: 0;
}
#cmdtext {
  min-width: 0;
  flex: 1;
  overflow-x: auto;
  white-space: nowrap;
}
.cmd .p {
  color: var(--clay-lift);
  user-select: none;
}
.cmd button {
  margin-left: auto;
  flex-shrink: 0;
  cursor: pointer;
  background: transparent;
  color: var(--paper);
  border: 1px solid rgba(244, 238, 227, 0.4);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
}
.cmd button:hover {
  border-color: var(--paper);
}
.cmd-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-faint);
}

/* Grid children must be allowed to shrink below their nowrap content
     (the eval report rows scroll internally instead of widening the page). */
.reg-grid > *,
.eval-grid > *,
.involve-grid > * {
  min-width: 0;
}
@media (max-width: 480px) {
  .hero h1 {
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

/* ── section scaffolding ─────────────────────────────────────── */
section {
  padding: clamp(64px, 9vw, 128px) 0;
}
.sec-head {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.sec-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
}
.sec-head h1,
.sec-head h2 {
  font-size: clamp(34px, 5.4vw, 72px);
}
.lede {
  max-width: 60ch;
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
}

/* ── 01 registry (clay drench) ───────────────────────────────── */
.sec-registry,
.sec-observe {
  background: var(--clay);
  color: var(--paper-hi);
  border-bottom: 2px solid var(--ink);
}
.sec-registry .sec-num,
.sec-observe .sec-num {
  color: var(--paper-hi);
}
.sec-registry .lede,
.sec-observe .lede {
  color: rgba(250, 246, 236, 0.92);
}
.sec-registry .lede strong {
  color: #fff8ef;
}
.reg-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 860px) {
  .reg-grid {
    grid-template-columns: 1fr;
  }
}
.figures {
  margin-top: 44px;
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 30px 48px;
  width: fit-content;
}
@media (max-width: 640px) {
  .figures {
    grid-template-columns: repeat(2, auto);
  }
}
.figures .num {
  display: block;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1;
}
.figures .lbl {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 246, 236, 0.75);
}
.reg-steps {
  margin-top: 48px;
  border-top: 1px solid rgba(250, 246, 236, 0.35);
}
.reg-steps li {
  list-style: none;
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(250, 246, 236, 0.35);
  font-size: 16.5px;
}
.reg-steps .n {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.reg-steps code {
  font-family: var(--mono);
  font-size: 13px;
  background: rgba(29, 21, 16, 0.28);
  padding: 2px 7px;
}
.hub-figure {
  text-align: center;
}
.hub-figure figcaption {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(250, 246, 236, 0.7);
}

/* ── 02 evals (ink drench) ───────────────────────────────────── */
.sec-evals {
  background: var(--ink);
  color: var(--paper);
  border-bottom: 2px solid var(--clay);
}
.sec-evals .sec-num {
  color: var(--clay-lift);
}
.sec-evals .lede {
  color: rgba(244, 238, 227, 0.85);
}
.sec-evals .lede strong {
  color: var(--paper);
}
.eval-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 860px) {
  .eval-grid {
    grid-template-columns: 1fr;
  }
}
.report {
  border: 1px solid var(--line-ink);
  background: #171009;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.9;
}
.report .bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line-ink);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a08b78;
}
.report .body {
  scrollbar-width: thin;
  padding: 18px 20px;
  overflow-x: auto;
}
.report .row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  white-space: nowrap;
}
.report .k {
  color: #cbb9a4;
}
.report .pass {
  color: #7fc98b;
}
.report .warn {
  color: #e8b04b;
}
.report .score {
  color: var(--clay-lift);
  font-weight: 700;
}
.report .row .cmt {
  white-space: normal;
}
.report .cmt {
  /* #6d5c4c measured 2.95:1 against the report's ink background —
     well under AA. Reuses the same muted tone the report's other
     dark-block labels already use, which clears it at 5.8:1. */
  color: #a08b78;
}
/* ── 03 observability panel — the .report ink-panel language reused:
     the dashboard is the same dark product surface the eval report
     established. Demo figures mirror the registry homepage card so the
     two surfaces never quote different numbers. */
.obs-figure {
  margin: 0;
}
.obs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--line-ink);
}
.obs-stats > div {
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.obs-stats > div + div {
  border-left: 1px solid var(--line-ink);
}
.obs-stats .v {
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--paper-hi);
}
.obs-stats .l {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a08b78;
}
.obs-model {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
.obs-track {
  flex: 1;
  height: 4px;
  min-width: 40px;
  background: #2a1f16;
}
.obs-track > span {
  display: block;
  height: 100%;
  background: var(--clay-lift);
}

.eval-points {
  margin-top: 8px;
}
.eval-points li {
  list-style: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-ink);
  font-size: 16.5px;
  color: rgba(244, 238, 227, 0.88);
}
.eval-points li strong {
  color: var(--paper);
}
.eval-points .kicker {
  color: var(--clay-lift);
  display: block;
  margin-bottom: 4px;
}

/* ── 03 road (paper) ─────────────────────────────────────────── */
.road {
  border-bottom: 2px solid var(--ink);
}
.road-list {
  border-top: 2px solid var(--ink);
}
.road-item {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 640px) {
  .road-item {
    grid-template-columns: 64px 1fr;
  }
  .road-item .tag {
    grid-column: 2;
    justify-self: start;
  }
}
.road-item .idx {
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  color: var(--line);
}
.road-item.live .idx,
.road-item.opening .idx {
  color: var(--clay);
}
.road-item h3 {
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 800;
}
.road-item p {
  margin-top: 6px;
  color: var(--ink-soft);
  max-width: 56ch;
  font-size: 16px;
}
.tag {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 2px solid var(--ink);
  white-space: nowrap;
}
.tag.live {
  background: var(--ink);
  color: var(--paper);
}
.tag.opening {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--paper);
}
.tag.next {
  color: var(--ink-faint);
  border-color: var(--line);
}

/* ── 04 get involved ─────────────────────────────────────────── */
.involve-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
}
@media (max-width: 860px) {
  .involve-grid {
    grid-template-columns: 1fr;
  }
}
.track {
  border: 2px solid var(--ink);
  padding: clamp(24px, 3vw, 40px);
  background: var(--paper-hi);
}
.track.clay {
  background: var(--clay);
  border-color: var(--clay);
  color: var(--paper-hi);
}
.track h3 {
  font-stretch: 118%;
  font-weight: 900;
  font-size: clamp(24px, 2.6vw, 34px);
  text-transform: uppercase;
}
.track > p {
  margin-top: 10px;
  font-size: 16px;
}
.track.clay > p {
  color: rgba(250, 246, 236, 0.88);
}
.track ol {
  margin-top: 22px;
  counter-reset: step;
}
.track ol li {
  list-style: none;
  counter-increment: step;
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
}
.track.clay ol li {
  border-top-color: rgba(250, 246, 236, 0.35);
}
.track ol li::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--clay);
}
.track.clay ol li::before {
  color: var(--paper-hi);
}
.track code {
  font-family: var(--mono);
  font-size: 13px;
  background: rgba(29, 21, 16, 0.08);
  padding: 2px 6px;
}
.track.clay code {
  background: rgba(29, 21, 16, 0.28);
}
.track .cta-row {
  margin-top: 26px;
}

/* ── footer ──────────────────────────────────────────────────── */
footer {
  background: var(--ink);
  color: var(--paper);
}
footer .wrap {
  padding-top: 56px;
  padding-bottom: 40px;
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 64px;
  justify-content: space-between;
  align-items: flex-end;
}
.foot-big {
  font-stretch: 125%;
  font-weight: 900;
  font-size: clamp(40px, 7vw, 88px);
  line-height: 0.95;
  text-transform: uppercase;
}
.foot-big span {
  color: var(--clay-lift);
}
.foot-links {
  display: grid;
  gap: 8px;
  font-size: 15px;
}
.foot-links a {
  color: rgba(244, 238, 227, 0.8);
  text-decoration: none;
}
.foot-links a:hover {
  color: var(--clay-lift);
}
.foot-meta {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--line-ink);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  /* No uppercase here: the brand name is lowercase everywhere, including
     this line. Tracking + mono carry the microcopy register on their own. */
  color: #a08b78;
}

/* ── feedback callout ────────────────────────────────────────── */
.fb-callout {
  margin-bottom: clamp(28px, 4vw, 48px);
  border: 2px solid var(--ink);
  background: var(--paper-hi);
  padding: clamp(20px, 3vw, 30px) clamp(20px, 3vw, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 56px);
  flex-wrap: wrap;
}
.fb-callout .fb-line {
  margin-top: 8px;
  max-width: 62ch;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--ink-soft);
}
.fb-callout .fb-line strong {
  color: var(--ink);
}
.fb-callout .btn {
  flex-shrink: 0;
}

/* ── hub diagram draw-in ─────────────────────────────────────── */
/* Spokes sweep out from the center when the clay section reveals
   (the .in class the observer adds), then nodes and labels arrive. */
.hub-figure .sp {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 800ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hub-figure.in .sp {
  stroke-dashoffset: 0;
}
.hub-figure .sp:nth-of-type(2) {
  transition-delay: 90ms;
}
.hub-figure .sp:nth-of-type(3) {
  transition-delay: 180ms;
}
.hub-figure .sp:nth-of-type(4) {
  transition-delay: 270ms;
}
.hub-figure .sp:nth-of-type(5) {
  transition-delay: 360ms;
}
.hub-figure .nds,
.hub-figure .lbs {
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1) 550ms;
}
.hub-figure.in .nds,
.hub-figure.in .lbs {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .hub-figure .sp {
    stroke-dashoffset: 0;
    transition: none;
  }
  .hub-figure .nds,
  .hub-figure .lbs {
    opacity: 1;
    transition: none;
  }
}

/* ── reveal motion ───────────────────────────────────────────── */
.rv {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 550ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms),
    transform 550ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
}
.rv.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* FAQ, About and Contact pages. Class-scoped, not id-scoped: these
   sections became standalone pages, so the homepage anchors they used
   to hang off are gone. Answers stay visible: text a crawler must expand is
   text it may not count, and hidden answers void FAQPage markup. */
.faq-grid,
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 34px 56px;
  margin-top: 34px;
}
.faq-item h3,
.about-grid h3 {
  font: 700 17px/1.35 var(--sans);
  color: var(--ink);
  margin: 0 0 8px;
}
.faq-item p,
.about-grid p {
  font: 400 15px/1.65 var(--sans);
  color: var(--ink-soft);
  margin: 0;
  max-width: 62ch;
}
.about-grid p + p {
  margin-top: 12px;
}
.foot-updated {
  margin-top: 16px;
  font: 400 13px/1.5 var(--mono);
  color: var(--ink-faint);
}
@media (max-width: 860px) {
  .faq-grid,
  .about-grid {
    grid-template-columns: 1fr;
  }
}