/* ==========================================================================
   Autonomo: shared design system (see DESIGN.md)
   One stylesheet for every page. Mobile-first. Tokens only; no raw colour
   values outside :root.

   Contents
   1. Fonts                       9. Page hero (non-home pages)
   2. Tokens                     10. Cards, pills, chips, labels, icons
   3. Base                       11. Lists, steps, timeline, ledger
   4. Section tones, hero        12. FAQ, comparison table
      background                 13. Home: hero, bento, CTA rows,
   5. Typography helpers             closing panel
   6. Buttons                    14. Light sections (component colours)
   7. Nav (glass pills)          15. Confirmation, subpages, privacy, 404
   8. Footer, sections           16. Cookie notice, test button
                                 17. Motion, preferences
   ========================================================================== */

/* ---------- 1. Fonts ----------
   Self-hosted (assets/fonts, OFL). Archivo is variable, so one file covers
   400 and 600. Latin-ext files only download if a page needs them. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("assets/fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Tokens ---------- */

:root {
  /* Colour */
  --color-pitch: #0D100E;
  --color-surface: #171B18;
  --color-edge: #243029;
  --color-chalk: #E8EDE9;
  --color-moss: #8FA096;
  --color-signal: #2FBF71;
  --color-bright: #4FD98E;

  /* Derived from the tokens above */
  --line-strong: color-mix(in srgb, var(--color-moss) 50%, var(--color-edge)); /* ghost borders, visible over the shader */
  --chalk-80: color-mix(in srgb, var(--color-chalk) 80%, transparent); /* .lead */
  --tint-signal: color-mix(in srgb, var(--color-signal) 12%, transparent); /* pill fills */
  --line-signal: color-mix(in srgb, var(--color-signal) 45%, var(--color-edge)); /* pill and highlight borders */

  /* Light sections: Paper bands with near-white cards and Pitch text */
  --color-paper: #F5F7F5;      /* light section background */
  --color-paper-card: #FCFDFC; /* cards and light glass on Paper */
  --color-ink-soft: #313834;   /* body text on Paper (12:1) */
  --color-ink-muted: #5B665F;  /* second line of two-tone headings on Paper (5.6:1) */
  --line-light: color-mix(in srgb, var(--color-pitch) 9%, transparent);
  --shadow-soft: 0 1px 2px color-mix(in srgb, var(--color-pitch) 6%, transparent), 0 18px 40px -22px color-mix(in srgb, var(--color-pitch) 22%, transparent);

  /* Glass (nav pills, mobile menu) */
  --glass-dark: color-mix(in srgb, var(--color-surface) 64%, transparent);
  --glass-light: color-mix(in srgb, var(--color-paper-card) 88%, transparent);

  /* Depth: one glow and one shadow, nothing else */
  --glow-signal: color-mix(in srgb, var(--color-signal) 12%, transparent);
  --shadow-float: 0 30px 80px -30px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.25);

  /* Type */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Type scale (rem, so a larger browser text size scales the page) */
  --text-display: clamp(2.5rem, 1.625rem + 3.4vw, 4.75rem); /* 40 to 76px, home hero only */
  --text-h1: clamp(2.25rem, 1.75rem + 2vw, 3.25rem); /* 36 to 52px, page headers */
  --text-h2: clamp(1.875rem, 1.5rem + 1.4vw, 2.75rem); /* 30 to 44px */
  --text-h3: clamp(1.25rem, 1.125rem + 0.4vw, 1.375rem); /* 20 to 22px */
  --text-title: 1.125rem; /* 18px: step titles, FAQ questions */
  --text-lead: clamp(1.125rem, 1.0625rem + 0.3vw, 1.25rem); /* 18 to 20px */
  --text-body: 1rem; /* 16px */
  --text-small: 0.875rem; /* 14px */
  --text-label: 0.75rem; /* 12px */
  --text-micro: 0.6875rem; /* 11px: pills, example labels */

  /* Spacing and layout */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;
  --space-14: 112px;
  --space-15: 120px;
  --page-max: 1120px;
  --measure-centred: 46rem; /* centred leads and intros: two to three lines on desktop */
  --page-pad: var(--space-3);
  --section-gap: var(--space-10);
  --card-pad: var(--space-3);
  --panel-pad: var(--space-4);
  --header-top: var(--space-12);
  --nav-height: 72px; /* 16px from the top + a 56px pill */
  --nav-top: 16px;
  --pill-h: 52px;

  /* Motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-glide: cubic-bezier(0.22, 1, 0.36, 1); /* nav compress, menu */

  /* Radius */
  --radius-button: 4px; /* pills, chips, labels */
  --radius-pill: 999px; /* buttons */
  --radius-card: 18px;
  --radius-panel: 28px;
}

@media (min-width: 721px) {
  :root {
    --page-pad: var(--space-4);
    --section-gap: var(--space-15);
    --card-pad: var(--space-4);
    --panel-pad: var(--space-7);
    --header-top: var(--space-14);
    --pill-h: 56px;
  }
}

/* ---------- 3. Base ---------- */

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

html {
  color-scheme: dark;
  background: var(--color-pitch);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-pitch);
  color: var(--color-moss);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd {
  margin: 0;
}

h1, h2, h3, h4 {
  color: var(--color-chalk);
  font-weight: 600;
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  line-height: 1.1;
  letter-spacing: -0.025em;
}

h2 {
  font-size: var(--text-h2);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

p,
li {
  text-wrap: pretty;
}

a {
  color: inherit;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
}

img,
svg {
  display: block;
}

[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--color-chalk);
  outline-offset: 2px;
}

/* Text for screen readers only, e.g. "(opens in a new tab)" */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Keeps "AI-" compounds and "follow-ups" from breaking at the hyphen */
.nowrap {
  white-space: nowrap;
}

.container {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--page-pad));
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* ---------- 4. Section tones, hero background ----------
   Every section is dark (Pitch) or light (Paper); the nav reads the tone
   under it. The hero and each page header add the fluted-glass background:
   fine vertical ribs over a slow, soft light (WebGL in script.js). The CSS
   below is its static fallback and stays under the canvas. */

.tone-dark {
  background: var(--color-pitch);
  color: var(--color-moss);
}

.tone-light {
  background: var(--color-paper);
  color: var(--color-ink-soft);
}

/* Dark sections after the hero: a faint glow from the top edge */
.section.tone-dark {
  background:
    radial-gradient(80% 45% at 50% 0%, color-mix(in srgb, var(--color-signal) 6%, transparent), transparent 70%),
    var(--color-pitch);
}

.hero,
.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% -5%, color-mix(in srgb, var(--color-signal) 14%, transparent), transparent 70%),
    repeating-linear-gradient(90deg,
      transparent 0 15px,
      color-mix(in srgb, var(--color-pitch) 45%, transparent) 21px,
      color-mix(in srgb, var(--color-chalk) 4%, transparent) 22px),
    var(--color-pitch);
}

/* Fades the ribs out into the section edge */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 30%;
  background: linear-gradient(to bottom, transparent, var(--color-pitch));
}

.hero-bg__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1200ms ease;
}

.hero-bg.is-live .hero-bg__canvas {
  opacity: 1;
}

/* ---------- 5. Typography helpers ---------- */

/* Geist Mono label above a heading */
.eyebrow {
  margin-bottom: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-moss);
}

.lead {
  max-width: var(--measure-centred);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--chalk-80);
  text-wrap: pretty;
}

/* Long-form text (privacy policy and any text-heavy page) */
.prose {
  max-width: 40rem;
}

.prose h2 {
  font-size: var(--text-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: var(--space-6) 0 var(--space-2);
  scroll-margin-top: calc(var(--nav-height) + var(--space-4));
}

.prose > :first-child {
  margin-top: 0;
}

.prose p,
.prose ul {
  margin-bottom: var(--space-2);
}

.prose ul {
  padding-left: 20px;
}

.prose li + li {
  margin-top: var(--space-1);
}

.prose a {
  color: var(--color-chalk);
  text-underline-offset: 2px;
}

.prose strong {
  color: var(--color-chalk);
  font-weight: 600;
}

/* ---------- 6. Buttons ----------
   Primary (Signal, the only green button), ghost, light, compact. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.005em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.btn--primary {
  --shimmer-color: var(--color-chalk);
  --shimmer-speed: 3s;
  --shimmer-spread: 90deg;
  --shimmer-cut: 0.1em; /* width of the edge ring the glint shows through */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--color-signal);
  color: var(--color-pitch);
  border: 0;
  transition: background-color 150ms var(--ease-out), transform 160ms var(--ease-out);
}

/* Shimmer (plain-CSS port of the ShimmerButton component): the fill sits on
   ::before, inset by --shimmer-cut, so the glint only shows in a thin ring. */
.btn--primary::before {
  content: "";
  position: absolute;
  inset: var(--shimmer-cut);
  z-index: -1;
  border-radius: inherit;
  background: inherit;
}

.btn__shimmer {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: visible;
  container-type: size;
  filter: blur(2px);
  pointer-events: none;
}

.btn__shimmer::before {
  content: "";
  position: absolute;
  top: -100cqh;
  left: -100cqh;
  width: 300cqh;
  height: 300cqh;
  background: conic-gradient(
    from calc(270deg - (var(--shimmer-spread) * 0.5)),
    transparent 0,
    var(--shimmer-color) var(--shimmer-spread),
    transparent var(--shimmer-spread)
  );
  animation:
    shimmer-slide var(--shimmer-speed) ease-in-out infinite alternate,
    shimmer-spin calc(var(--shimmer-speed) * 2) linear infinite;
}

@keyframes shimmer-slide {
  from { translate: 0 0; }
  to   { translate: calc(100cqw - 100cqh) 0; }
}

@keyframes shimmer-spin {
  0%       { rotate: 0deg; }
  15%, 35% { rotate: 90deg; }
  65%, 85% { rotate: 270deg; }
  100%     { rotate: 360deg; }
}

.btn--ghost {
  background: transparent;
  color: var(--color-chalk);
  border: 1px solid var(--line-strong);
  padding: 13px 21px; /* same outer size as primary with the border */
  transition: border-color 150ms var(--ease-out), transform 160ms var(--ease-out);
}

.btn--light {
  background: var(--color-chalk);
  color: var(--color-pitch);
  border: 0;
  transition: background-color 150ms var(--ease-out), transform 160ms var(--ease-out);
}

.btn--compact {
  padding: 10px 16px;
}

.btn--large {
  padding: 18px 28px;
  font-size: 1rem;
}

.btn--ghost.btn--large {
  padding: 17px 27px;
}

/* Arrow on primary CTAs: nudges up and right on hover */
.btn .btn__arrow {
  width: 16px;
  height: 16px;
  margin-right: -2px;
  color: inherit;
  stroke-width: 2;
  transition: transform 200ms var(--ease-out);
}

.btn--ghost.btn--compact {
  padding: 9px 15px;
}

/* Press feedback: lands in 100ms, eases back in 160ms */
.btn:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}

@media (pointer: coarse) {
  .btn {
    min-height: 44px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: var(--color-bright); }
  .btn:hover .btn__arrow { transform: translate(2px, -2px); }
  .btn--ghost:hover { border-color: var(--color-moss); }
  .btn--light:hover { background: var(--color-moss); }
}

/* ---------- 7. Nav (glass pills) ----------
   Fixed over the page. At the top it is transparent and spans the page:
   logo, links, button. Scrolled past 24px (.is-compact) it eases into a
   centred group of glass pills: the logo becomes the mark, the links and
   the button sit in their own pills. Over light sections (data-theme=
   "light") the glass turns white. script.js sets both and --nav-compact-w.
   Web approximation of a glass material: blur, a 1px edge and a top highlight. */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 10;
  padding-top: var(--nav-top);
  pointer-events: none;
}

/* Without JS the nav never compacts, so it stays at the top of the page */
html:not(.js) .nav {
  position: absolute;
}

.nav__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--color-chalk);
  transition: color 350ms ease;
}

/* Desktop: the bar narrows to the group's width, so the pills meet in the middle */
@media (min-width: 960px) {
  .nav__bar {
    transition: max-width 520ms var(--ease-glide), color 350ms ease;
  }

  .nav.is-compact .nav__bar {
    max-width: var(--nav-compact-w, calc(var(--page-max) + 2 * var(--page-pad)));
  }
}

.nav__pill {
  display: flex;
  align-items: center;
  height: var(--pill-h);
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(0) saturate(100%);
  backdrop-filter: blur(0) saturate(100%);
  transition:
    background-color 350ms ease,
    border-color 350ms ease,
    box-shadow 350ms ease,
    -webkit-backdrop-filter 350ms ease,
    backdrop-filter 350ms ease,
    padding 520ms var(--ease-glide),
    width 520ms var(--ease-glide);
}

.nav.is-compact .nav__pill {
  background: var(--glass-dark);
  border-color: color-mix(in srgb, var(--color-chalk) 10%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-chalk) 7%, transparent),
    0 12px 32px -16px color-mix(in srgb, var(--color-pitch) 80%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}

.nav.is-compact[data-theme="light"] .nav__bar {
  color: var(--color-pitch);
}

.nav.is-compact[data-theme="light"] .nav__pill {
  background: var(--glass-light);
  border-color: var(--line-light);
  box-shadow:
    inset 0 1px 0 var(--color-paper-card),
    0 12px 32px -18px color-mix(in srgb, var(--color-pitch) 28%, transparent);
}

/* Logo: the lockup at the top, the mark in a square pill once compact */
/* --brand-w is the lockup's width plus the pill's two 1px borders, so the
   wordmark is never clipped */
.nav__brand {
  --brand-w: 177px;
  position: relative;
  flex: none;
  justify-content: center;
  width: var(--brand-w);
  overflow: hidden;
  color: inherit;
}

.nav.is-compact .nav__brand {
  width: var(--pill-h);
}

.nav__lockup {
  position: absolute;
  top: 50%;
  left: 0;
  width: auto;
  height: 28px;
  transform: translateY(-50%);
  transition: opacity 260ms ease, transform 520ms var(--ease-glide);
}

.nav__mark {
  width: 28px;
  height: auto;
  fill: currentColor;
  opacity: 0;
  transform: scale(0.7);
  transition: opacity 260ms ease, transform 520ms var(--ease-glide);
}

.nav__mark-upright {
  fill: var(--color-signal);
}

.nav.is-compact .nav__lockup {
  opacity: 0;
  transform: translate(-8px, -50%) scale(0.96);
}

.nav.is-compact .nav__mark {
  opacity: 1;
  transform: none;
  transition-delay: 80ms;
}

/* Links */
.nav__menu ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: var(--space-4);
}

.nav__menu a:not(.btn) {
  display: block;
  color: inherit;
  opacity: 0.8;
  font-size: var(--text-small);
  line-height: 1.3;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: 2px;
  transition: opacity 150ms var(--ease-out);
}

.nav__menu a:not(.btn):focus-visible {
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .nav__menu a:not(.btn):hover { opacity: 1; }
}

.nav__menu-cta {
  display: none;
}

/* Button pill: the button sits 5px inside its own glass pill */
.nav__cta .btn {
  height: calc(var(--pill-h) - 12px);
}

.nav.is-compact .nav__cta {
  padding-inline: 5px;
}

.nav.is-compact[data-theme="light"] .btn--ghost {
  color: var(--color-pitch);
  border-color: color-mix(in srgb, var(--color-pitch) 22%, transparent);
}

.nav.is-compact[data-theme="light"] :focus-visible {
  outline-color: var(--color-pitch);
}

.nav__toggle {
  display: none;
  justify-content: center;
  width: var(--pill-h);
  padding: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

.nav__toggle .icon {
  width: 22px;
  height: 22px;
  color: inherit;
}

.nav__toggle-close,
.nav__toggle[aria-expanded="true"] .nav__toggle-open {
  display: none;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-close {
  display: block;
}

.nav__toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}

@media (min-width: 960px) {
  .nav__menu {
    padding-inline: 4px;
  }

  .nav.is-compact .nav__menu {
    padding-inline: 26px;
  }
}

/* Below 960px: logo and menu button; the links (and the Book button) open in
   a glass panel anchored under the menu button */
@media (max-width: 959px) {
  .js .nav__toggle {
    display: flex;
  }

  .nav:not(.nav--minimal) .nav__cta {
    display: none;
  }

  .nav .nav__bar .nav__menu {
    position: absolute;
    top: calc(100% + 8px);
    left: var(--page-pad);
    right: var(--page-pad);
    display: block;
    height: auto;
    padding: 6px 20px 20px;
    border-radius: 20px;
    background: var(--glass-dark);
    border-color: color-mix(in srgb, var(--color-chalk) 10%, transparent);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb, var(--color-chalk) 7%, transparent),
      0 24px 48px -20px color-mix(in srgb, var(--color-pitch) 85%, transparent);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    backdrop-filter: blur(24px) saturate(160%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(0.98);
    transform-origin: top right;
    transition: opacity 220ms ease, transform 420ms var(--ease-glide), visibility 0s 420ms;
  }

  .nav[data-theme="light"] .nav__bar .nav__menu {
    background: var(--glass-light);
    border-color: var(--line-light);
    box-shadow:
      inset 0 1px 0 var(--color-paper-card),
      0 24px 48px -20px color-mix(in srgb, var(--color-pitch) 30%, transparent);
  }

  .nav.is-open .nav__bar .nav__menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity 220ms ease, transform 420ms var(--ease-glide), visibility 0s;
  }

  .nav__menu ul {
    flex-direction: column;
    gap: 0;
  }

  .nav__menu li + li {
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  }

  .nav__menu a:not(.btn) {
    padding-block: 14px;
    font-size: var(--text-body);
    opacity: 1;
  }

  .nav__menu .nav__menu-cta {
    display: block;
    padding-top: 14px;
    border-top: 0;
  }

  .nav__menu-cta .btn {
    width: 100%;
    padding-block: 16px;
  }
}

/* The menu panel takes its theme even before the nav compacts */
.nav[data-theme="light"].is-open .nav__bar {
  color: var(--color-pitch);
}

/* Small phones: the lockup shrinks so the pills keep their size */
@media (max-width: 400px) {
  .nav__brand { --brand-w: 127px; }
  .nav__lockup { height: 20px; }
  .nav--minimal .nav__cta .btn { padding-inline: 14px; font-size: 0.875rem; }
  .nav--minimal .nav__cta .btn__arrow { display: none; }
}

@media (max-width: 340px) {
  .nav__brand { --brand-w: 102px; }
  .nav__lockup { height: 16px; }
}

/* Marker at the top of the page; script.js watches it instead of scroll events */
.nav-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 24px;
  pointer-events: none;
}

/* ---------- 8. Footer, sections ---------- */

.footer {
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-edge);
  overflow: hidden;
}

.footer__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.footer__mark {
  width: auto;
  height: 24px;
}

.footer__links {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-small);
}

.footer__links a {
  color: var(--color-moss);
  text-decoration: none;
  transition: color 150ms var(--ease-out);
}

@media (pointer: coarse) {
  .footer__links a {
    display: inline-block;
    padding-block: 11px;
    margin-block: -11px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .footer__links a:hover { color: var(--color-chalk); }
}

.footer__tagline {
  margin-top: var(--space-3);
  font-size: var(--text-small);
}

.footer__copy {
  margin-top: var(--space-1);
  font-size: var(--text-label);
  letter-spacing: 0.02em;
}

/* Outlined mark + wordmark across the container, under a hairline. The
   outline is brightest at the top and fades out towards the bottom. */
.footer {
  padding-bottom: var(--space-4);
}

.footer__wordmark {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-edge);
  user-select: none;
}

.footer__wordmark svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.footer__wordmark g {
  fill: none;
  stroke-width: 1.25;
}

.footer__wordmark rect,
.footer__wordmark text {
  vector-effect: non-scaling-stroke;
}

.footer__wordmark text {
  font-family: var(--font-sans);
  font-size: 200px;
  font-weight: 600;
  letter-spacing: -8px;
}

.footer__fade-top { stop-color: var(--color-chalk); stop-opacity: 0.75; }
.footer__fade-mid { stop-color: var(--color-chalk); stop-opacity: 0.3; }
.footer__fade-end { stop-color: var(--color-chalk); stop-opacity: 0; }

/* A section: the same gap above and below, centred header, then content */
.section {
  padding-block: var(--section-gap);
}

/* Follows a section of the same tone: no second gap */
.section--join {
  padding-top: 0;
}

/* Anchors land with the heading 96px from the top, clear of the nav */
.section[id] {
  scroll-margin-top: calc(96px - var(--section-gap));
}

.section--join[id] {
  scroll-margin-top: 96px;
}

.section__head {
  max-width: 50rem;
  margin: 0 auto var(--space-6);
  text-align: center;
}

.section__head h2 {
  font-size: clamp(2.125rem, 1.5rem + 2.2vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
}

/* Two-tone headings: the second line is muted */
.h-tone {
  display: block;
  color: var(--color-moss);
}

.section__intro {
  max-width: var(--measure-centred);
  margin: var(--space-2) auto 0;
  font-size: var(--text-lead);
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---------- 9. Page hero (every non-home page) ----------
   A dark band with the fluted-glass background holding the page header
   (eyebrow, H1, lead). --full fills the screen (404, confirmation page). */

.page-hero {
  padding: calc(var(--nav-height) + var(--space-10)) 0 var(--section-gap);
}

.page-hero--full {
  min-height: 100svh;
  display: grid;
  align-content: center;
}

.page-header {
  max-width: 50rem;
  margin: 0 auto;
  text-align: center;
}

.page-hero--full .page-header,
.confirm .page-header {
  margin-bottom: var(--space-6);
}

.page-header h1 {
  margin-bottom: var(--space-3);
}

.page-header h1:last-child {
  margin-bottom: 0;
}

.page-header .lead {
  margin-inline: auto;
}

.page-header__meta {
  margin-top: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  color: var(--color-moss);
}

/* ---------- 10. Cards, pills, chips, labels, icons ---------- */

.card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}

/* Floating mock card: the float shadow plus a soft Signal halo */
.card--floating {
  box-shadow: var(--shadow-float), 0 0 160px -24px var(--glow-signal);
}

/* Frosted variant for cards over the shader */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card--frosted {
    background: color-mix(in srgb, var(--color-surface) 82%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
  }
}

/* Spotlight: on fine pointers a soft Signal border highlight follows the
   cursor (script.js sets --mx / --my). A masked ring, so only the border glows. */
.card--spotlight::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--line-signal), transparent 70%);
  -webkit-mask: linear-gradient(black 0 0) content-box, linear-gradient(black 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(black 0 0) content-box exclude, linear-gradient(black 0 0);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .card--spotlight:hover::after {
    opacity: 1;
  }
}

/* Status pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 7px;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-button);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-moss);
}

.pill--signal {
  color: var(--color-signal);
  background: var(--tint-signal);
  border-color: var(--line-signal);
}

.pill--muted {
  color: var(--color-moss);
  background: transparent;
  border-color: var(--color-edge);
}

.pill .icon {
  width: 12px;
  height: 12px;
}

/* "Example" label on every vignette */
.example-label {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-button);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-moss);
}

/* Meeting chip: the recurring diary motif */
.chip-meeting {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 10px 12px 10px 14px;
  background: var(--color-pitch);
  border: 1px solid var(--color-edge);
  border-radius: 6px;
  text-align: left;
  font-size: var(--text-label);
  line-height: 1.35;
  overflow: hidden;
}

/* Signal rule down the left edge */
.chip-meeting::before {
  content: "";
  position: absolute;
  inset: 8px auto 8px 0;
  width: 2px;
  border-radius: 0 2px 2px 0;
  background: var(--color-signal);
}

.chip-meeting__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
}

.chip-meeting__title {
  color: var(--color-chalk);
  font-weight: 600;
  font-size: 0.8125rem; /* 13px */
}

.chip-meeting__time {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--color-moss);
}

.chip-meeting__company {
  color: var(--color-chalk);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip-meeting__role {
  color: var(--color-moss);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip-meeting__foot {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

/* Icons: Lucide inline copies, stroke 1.5, Moss unless set to Chalk */
.icon {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--color-moss);
}

.icon--chalk { color: var(--color-chalk); }
.icon--signal { color: var(--color-signal); }

/* Icon + text row */
.icon-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ---------- 11. Lists, steps, timeline, ledger ---------- */

/* Marker list: Signal 6px square echoing the logo's upright */
.marker-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: var(--text-body);
  line-height: 1.5;
}

.marker-list li {
  position: relative;
  padding-left: 18px;
}

.marker-list li::before {
  content: "";
  position: absolute;
  top: calc(0.75em - 3px);
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--color-signal);
}

.marker-list strong {
  color: var(--color-chalk);
  font-weight: 600;
}

/* Next steps row: 01 to 04. Light variant inside the Chalk panel; .is-done
   items swap their number for a Signal tick. */
.next-steps {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-3);
  max-width: 50rem;
  margin-inline: auto;
  text-align: left;
}

@media (min-width: 721px) {
  .next-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.next-steps li {
  display: grid;
  align-content: start;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--color-edge);
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--color-chalk);
}

.next-steps__num {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  color: var(--color-signal);
}

.next-steps__num .icon {
  width: 14px;
  height: 14px;
  color: var(--color-signal);
}

.next-steps .is-done {
  color: var(--color-moss);
}

.next-steps--light li {
  color: var(--color-pitch);
  border-top-color: color-mix(in srgb, var(--color-pitch) 18%, transparent);
}

.next-steps--light .next-steps__num {
  color: var(--color-edge);
}

/* Timeline: four steps, horizontal from 960px, vertical below. The Signal
   progress line fills on scroll (GSAP, script.js); static and full under
   reduced motion or without GSAP. */
.timeline {
  --dot: 12px;
  position: relative;
  max-width: 45rem;
  margin-inline: auto;
  padding-left: var(--space-6);
}

.timeline__steps {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-6);
}

.timeline__track,
.timeline__fill {
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: calc(var(--dot) / 2 - 0.5px);
  width: 1px;
  background: var(--color-edge);
}

.timeline__fill {
  left: calc(var(--dot) / 2 - 1px);
  width: 2px;
  background: var(--color-signal);
  transform-origin: top center;
}

.timeline__step {
  position: relative;
  text-align: left;
}

/* Square marker on the line (echoes the logo's upright) */
.timeline__step::before {
  content: "";
  position: absolute;
  top: 3px;
  left: calc(-1 * var(--space-6));
  width: var(--dot);
  height: var(--dot);
  border-radius: 3px;
  background: var(--color-pitch);
  border: 1px solid var(--line-signal);
  box-shadow: inset 0 0 0 2px var(--color-pitch), inset 0 0 0 6px var(--color-signal);
}

.timeline__marker {
  display: block;
  margin-bottom: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-signal);
}

.timeline__title {
  margin-bottom: var(--space-1);
  font-size: var(--text-title);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

.timeline__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.04em;
  color: var(--color-moss);
}

.timeline__status .icon {
  width: 14px;
  height: 14px;
  color: var(--color-signal);
}

@media (min-width: 960px) {
  .timeline {
    max-width: none;
    padding-left: 0;
    padding-top: var(--space-6);
  }

  .timeline__steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .timeline__track,
  .timeline__fill {
    top: calc(var(--dot) / 2 - 0.5px);
    bottom: auto;
    left: 0;
    right: 0;
    width: auto;
    height: 1px;
  }

  .timeline__fill {
    top: calc(var(--dot) / 2 - 1px);
    height: 2px;
    transform-origin: left center;
  }

  .timeline__step::before {
    top: calc(-1 * var(--space-6));
    left: 0;
  }
}

/* Ledger: the weekly statement. A real table; on phones each row restacks. */
.ledger {
  max-width: 50rem;
  margin-inline: auto;
  padding: 0;
  overflow: hidden;
}

.ledger__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 18px var(--card-pad);
  border-bottom: 1px solid var(--color-edge);
}

.ledger__title {
  font-size: var(--text-body);
  font-weight: 600;
  color: var(--color-chalk);
  letter-spacing: 0;
}

.ledger__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
  line-height: 1.4;
  text-align: left;
}

.ledger__table th,
.ledger__table td {
  padding: 14px var(--card-pad);
  vertical-align: middle;
}

.ledger__table thead th {
  padding-block: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-moss);
  border-bottom: 1px solid var(--color-edge);
}

.ledger__table tbody tr + tr {
  border-top: 1px solid var(--color-edge);
}

.ledger__meeting {
  color: var(--color-chalk);
}

.ledger__meeting span {
  display: block;
  color: var(--color-moss);
  font-size: var(--text-label);
}

.ledger__date {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  white-space: nowrap;
}

.ledger__billing {
  text-align: right;
  white-space: nowrap;
}

.ledger__table .is-billed {
  color: var(--color-chalk);
  font-weight: 600;
}

@media (max-width: 640px) {
  .ledger__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .ledger__table tbody tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
    padding: 14px var(--card-pad);
  }

  .ledger__table tbody td {
    display: block;
    padding: 0;
  }

  .ledger__table .ledger__date { grid-column: 2; grid-row: 1; text-align: right; }
  .ledger__table .ledger__meeting { grid-column: 1; grid-row: 1; }
  .ledger__table .ledger__status { grid-column: 1; grid-row: 2; }
  .ledger__table .ledger__billing { grid-column: 2; grid-row: 2; }
}

/* Small phones: the widest row ("Disputed within 48h" + "Not billed") needs the room */
@media (max-width: 360px) {
  .ledger__table tbody tr {
    padding-inline: var(--space-2);
  }

  .ledger__head {
    padding-inline: var(--space-2);
  }
}

/* Qualified-meeting card (id="qualified") */
.qualified {
  max-width: 45rem;
  margin: var(--space-6) auto 0;
  text-align: left;
}

.qualified__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--space-3);
}

/* H3 on the home page, H2 on How it works: same size either way */
.qualified__head :is(h2, h3) {
  font-size: var(--text-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.qualified__head .icon {
  width: 24px;
  height: 24px;
  color: var(--color-chalk);
}

.qualified[id] {
  scroll-margin-top: var(--space-3);
}

/* ---------- 12. FAQ, comparison table ---------- */

/* FAQ accordion: native details/summary */
.faq {
  max-width: 45rem;
  margin-inline: auto;
  border-bottom: 1px solid var(--color-edge);
  text-align: left;
}

.faq__item {
  border-top: 1px solid var(--color-edge);
}

.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-3);
  color: var(--color-chalk);
  font-size: var(--text-title);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  list-style: none;
  cursor: pointer;
  border-radius: var(--radius-button);
}

.faq__q::-webkit-details-marker {
  display: none;
}

/* Plus that turns into a minus */
.faq__icon {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 6px;
}

.faq__icon::before,
.faq__icon::after {
  content: "";
  position: absolute;
  border-radius: 1px;
  background: var(--color-moss);
  transition:
    transform 200ms var(--ease-out),
    opacity 200ms var(--ease-out),
    background-color 150ms var(--ease-out);
}

.faq__icon::before {
  left: 0;
  right: 0;
  top: calc(50% - 0.75px);
  height: 1.5px;
}

.faq__icon::after {
  top: 0;
  bottom: 0;
  left: calc(50% - 0.75px);
  width: 1.5px;
}

.faq__item[open] .faq__icon::after {
  transform: rotate(90deg);
  opacity: 0;
}

.faq__a {
  max-width: 40rem;
  padding-bottom: var(--space-3);
}

.faq__a a {
  color: var(--color-chalk);
  text-underline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
  .faq__q:hover .faq__icon::before,
  .faq__q:hover .faq__icon::after {
    background: var(--color-chalk);
  }
}

.faq-note {
  margin-top: var(--space-4);
  text-align: center;
  font-size: var(--text-small);
}

/* Comparison table. --compare-tint and --compare-line lift the Autonomo
   column: the card colour with 8% Signal, and a Signal-leaning border. */
.compare {
  --compare-bg: var(--color-surface);
  --compare-tint: color-mix(in srgb, var(--color-signal) 8%, var(--compare-bg));
  --compare-line: color-mix(in srgb, var(--color-signal) 55%, var(--color-edge));
  position: relative;
  background: var(--compare-bg);
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.tone-dark .compare {
  --compare-bg: var(--color-pitch);
}

/* Desktop: a tinted, Signal-edged panel behind the Autonomo column. The table
   is fixed-layout (row labels 22%, three columns of 26%), so the panel sits on
   those percentages and the transparent cells show it through. */
.compare::before {
  content: "";
  position: absolute;
  top: var(--space-1);
  bottom: var(--space-1);
  left: calc(22% + 6px);
  width: calc(26% - 12px);
  background: var(--compare-tint);
  border: 1px solid var(--compare-line);
  border-radius: var(--radius-card);
  pointer-events: none;
}

.compare__table {
  position: relative;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--text-small);
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-align: left;
}

.compare__table th,
.compare__table td {
  padding: 20px var(--space-3);
  vertical-align: top;
}

.compare__table thead > tr > :first-child {
  width: 22%;
}

.compare__table thead tr {
  border-bottom: 1px solid var(--color-edge);
}

.compare__table thead th {
  font-weight: 600;
  color: var(--color-moss);
}

.compare__table tbody tr + tr {
  border-top: 1px solid var(--color-edge);
}

.compare__table tbody th {
  font-weight: 600;
  color: var(--color-chalk);
}

.compare__table .is-ours {
  color: var(--color-chalk);
}

/* Check and x icons beside clearly positive or negative answers */
.compare__table .cell-icon {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 8px;
  vertical-align: -2px;
}

.compare__table td:has(> .cell-icon) {
  position: relative;
  padding-left: calc(var(--space-3) + 23px);
}

.compare__table td > .cell-icon {
  position: absolute;
  top: 23px;
  left: var(--space-3);
  margin: 0;
}

.compare__table .is-ours .cell-icon {
  color: var(--color-chalk);
}

.compare__abbr {
  display: none;
}

.compare__note {
  margin-top: var(--space-2);
  font-size: var(--text-label);
  letter-spacing: 0.02em;
  text-align: center;
}

.compare__heading {
  margin: var(--space-8) 0 var(--space-3);
  text-align: center;
}

/* Phones and small tablets (under 900px): Autonomo next to one alternative
   at a time, picked by the switch (script.js sets data-vs). Without JS all
   columns show. */
.compare__switch {
  display: none;
}

@media (max-width: 899px) {
  .js .compare__switch {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px 12px;
    margin-bottom: var(--space-3);
    font-size: var(--text-small);
    letter-spacing: 0.01em;
  }

  /* Segmented pill: a Chalk thumb slides under the chosen option */
  .compare__switch-buttons {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-pill);
  }

  .compare__switch-buttons::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    border-radius: var(--radius-pill);
    background: var(--color-chalk);
    transition: transform 360ms var(--ease-glide);
  }

  .compare__switch-buttons:has([data-vs="sdr"][aria-pressed="true"])::before {
    transform: translateX(100%);
  }

  .compare__switch button {
    position: relative;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-moss);
    font: 600 var(--text-small) / 1 var(--font-sans);
    letter-spacing: 0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: color 200ms var(--ease-out);
  }

  .compare__switch button[aria-pressed="true"] {
    color: var(--color-pitch);
  }

  .compare__switch button:focus-visible {
    outline-offset: 2px;
  }

  .js .compare[data-vs="agency"] :is(th, td):nth-child(4),
  .js .compare[data-vs="sdr"] :is(th, td):nth-child(3) {
    display: none;
  }

  .js .compare__table thead > tr > :first-child {
    width: 34%;
  }

  .js .compare::before {
    top: 6px;
    bottom: 6px;
    left: calc(34% + 4px);
    width: calc(33% - 8px);
  }

  .compare__table th,
  .compare__table td {
    padding: 14px 12px;
  }

  .js .compare__full {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .js .compare__abbr {
    display: inline;
  }

  /* The tick or cross sits beside the answer, not above it */
  .compare__table td:has(> .cell-icon) {
    padding-left: calc(12px + 21px);
  }

  .compare__table td > .cell-icon {
    top: 17px;
    left: 12px;
  }
}

/* Phones (under 600px): each row restacks. The row name runs across the top,
   then the Autonomo answer (tinted, Signal-edged) beside the alternative's.
   Explicit table roles keep the semantics. */
@media (max-width: 599px) {
  .js .compare::before {
    display: none;
  }

  .js .compare__table thead tr,
  .js .compare__table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .js .compare__table thead > tr > :first-child {
    display: none;
  }

  .js .compare__table thead th {
    padding: 14px 12px 12px;
  }

  .js .compare__table tbody th {
    grid-column: 1 / -1;
    padding: 12px 12px 6px;
  }

  /* The group's aria-label still says "Compare Autonomo with" */
  .compare__switch-label {
    display: none;
  }

  .js .compare__table tbody td {
    padding: 0 12px 12px calc(12px + 21px);
  }

  .js .compare__table tbody td > .cell-icon {
    top: 3px;
  }

  .js .compare__table tbody td.is-ours {
    margin: 0 6px 10px 8px;
    padding: 8px 10px 8px calc(10px + 21px);
    border: 1px solid var(--compare-line);
    border-radius: 12px;
    background: var(--compare-tint);
  }

  .js .compare__table tbody td.is-ours > .cell-icon {
    top: 11px;
    left: 10px;
  }

  .js .compare__table tbody td:not(.is-ours) {
    padding-top: 9px;
  }

  .js .compare__table tbody td:not(.is-ours) > .cell-icon {
    top: 12px;
  }

  .js .compare__table thead th.is-ours {
    padding-left: 9px;
    color: var(--color-chalk);
  }
}

/* The alternative's column fades in when the switch changes it */
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  .js .compare :is(th, td):is(:nth-child(3), :nth-child(4)) {
    animation: compare-in 320ms var(--ease-out);
  }
}

@keyframes compare-in {
  from { opacity: 0; transform: translateX(6px); }
}

@media (max-width: 899px) and (pointer: coarse) {
  .compare__switch button {
    min-height: 44px;
  }
}

/* No JS on a phone: all four columns, the panel moved to match */
@media (max-width: 599px) {
  html:not(.js) .compare__table thead > tr > :first-child {
    width: 28%;
  }

  html:not(.js) .compare::before {
    left: calc(28% + 4px);
    width: calc(24% - 8px);
  }

  html:not(.js) .compare__table th,
  html:not(.js) .compare__table td {
    padding: 12px 6px;
    font-size: var(--text-label);
    letter-spacing: 0;
    hyphens: auto;
    overflow-wrap: break-word;
  }

  html:not(.js) .compare__table td:has(> .cell-icon) {
    padding-left: 6px;
  }

  html:not(.js) .compare__table td > .cell-icon {
    position: static;
    display: block;
    margin: 0 0 4px;
  }
}

/* ---------- 13. Home ---------- */

/* Hero: text on the left, the weekly statement on the right (stacked below 1180px,
   where half the width is too narrow for the statement) */
.hero {
  padding: calc(var(--nav-height) + var(--space-8)) 0 var(--section-gap);
}

@media (min-width: 1180px) {
  .hero {
    min-height: min(100svh, 60rem);
    display: grid;
    align-content: center;
    padding-bottom: var(--space-12);
  }
}

.hero__grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}

@media (min-width: 1180px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-10);
  }
}

.hero__title {
  max-width: 12em;
  margin-bottom: var(--space-3);
  font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem); /* 40 to 68px: four lines in the half column */
  line-height: 1.02;
  letter-spacing: -0.035em;
}

.hero .lead {
  max-width: 34rem;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

/* Hero statement: floats on the background; from 641px it shows meeting,
   status and billing only so it fits half the width */
.ledger--hero {
  max-width: 44rem;
  margin-inline: 0; /* aligned with the text when stacked */
  box-shadow: var(--shadow-float), 0 0 160px -24px var(--glow-signal);
}

@media (min-width: 641px) {
  .ledger--hero .ledger__date,
  .ledger--hero thead th:nth-child(2),
  .ledger--hero .ledger__meeting span {
    display: none;
  }

  .ledger--hero .ledger__meeting {
    white-space: nowrap;
  }

  .ledger--hero .ledger__table th,
  .ledger--hero .ledger__table td {
    padding-inline: 12px;
  }

  .ledger--hero .ledger__table th:first-child,
  .ledger--hero .ledger__table td:first-child {
    padding-left: var(--space-3);
  }

  .ledger--hero .ledger__table th:last-child,
  .ledger--hero .ledger__table td:last-child {
    padding-right: var(--space-3);
  }
}

/* Repeated call to action at the end of each home section */
.cta-row {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin-top: var(--space-8);
  text-align: center;
}

.cta-row__note {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-moss);
}

/* What you get: bento. Desktop 3 columns (large + small, small + large),
   2 columns on tablets, 1 on phones. */
.bento {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
  text-align: left;
}

@media (min-width: 721px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento__tile--wide {
    grid-column: span 2;
  }
}

@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.bento__tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bento__tile h3 {
  margin-bottom: var(--space-1);
}

/* Vignette frame inside a card */
.vignette {
  position: relative;
  display: grid;
  align-content: center;
  flex: 1;
  min-height: 200px;
  padding: 16px;
  border: 1px solid var(--color-edge);
  border-radius: 12px;
  background: var(--color-pitch);
  color: var(--color-moss);
  overflow: hidden;
  font-size: var(--text-label);
  line-height: 1.4;
}

.vignette .example-label {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* a. Prospect table: Verified ticks run down */
.v-prospects {
  width: 100%;
  margin-top: 24px;
  border-collapse: collapse;
}

.v-prospects th {
  padding: 0 8px 8px 0;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--color-moss);
}

.v-prospects td {
  padding: 9px 8px 9px 0;
  border-top: 1px solid var(--color-edge);
  color: var(--color-chalk);
  white-space: nowrap;
}

.v-prospects td:nth-child(2) {
  color: var(--color-moss);
}

.v-prospects th:last-child,
.v-prospects td:last-child {
  text-align: right;
  padding-right: 0;
}

/* Columns drop by the frame's own width (it varies with the bento layout,
   not just the window): Role first, then Company, so the Verified pills
   never touch the edge. */
.vignette--table {
  container-type: inline-size;
}

@container (max-width: 539px) {
  .v-prospects .v-hide-sm {
    display: none;
  }
}

@container (max-width: 379px) {
  .v-prospects .v-hide-xs {
    display: none;
  }
}

/* b. Inboxes: SPF, DKIM, DMARC turn Signal; warm-up bar */
.v-inboxes {
  display: grid;
  gap: 10px;
  margin-top: 24px;
}

.v-inbox {
  display: grid;
  gap: 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-edge);
}

.v-inbox__addr {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--color-chalk);
}

.v-inbox__checks {
  display: flex;
  gap: 6px;
}

.v-warmup {
  display: grid;
  gap: 6px;
  margin-top: 4px;
}

.v-warmup__row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--color-moss);
}

.v-warmup__bar {
  height: 2px;
  background: var(--color-edge);
  border-radius: 1px;
  overflow: hidden;
}

.v-warmup__bar span {
  display: block;
  width: 72%;
  height: 100%;
  background: var(--color-signal);
  transform-origin: left center;
}

/* c. Email snippet: the personalised line is underlined in Signal */
.v-email {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  font-size: var(--text-small);
  color: var(--color-chalk);
}

.v-email__meta {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--color-moss);
}

.v-email__line--personal {
  position: relative;
  justify-self: start;
}

.v-email__line--personal::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 1px;
  background: var(--color-signal);
  transform-origin: left center;
}

.v-email__ghost {
  height: 8px;
  border-radius: 2px;
  background: var(--color-edge);
}

.v-email__ghost--short {
  width: 60%;
}

/* d. Reply becomes a booked chip */
.v-reply {
  display: grid;
  gap: 14px;
  align-items: center;
  margin-top: 24px;
}

@media (min-width: 721px) {
  .v-reply {
    grid-template-columns: 1fr auto 1fr;
  }
}

.v-reply__bubble {
  justify-self: start;
  max-width: 300px;
  padding: 12px 14px;
  border: 1px solid var(--color-edge);
  border-radius: 10px 10px 10px 2px;
  background: var(--color-surface);
  color: var(--color-chalk);
  font-size: var(--text-small);
}

.v-reply__from {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  color: var(--color-moss);
}

.v-reply__arrow {
  justify-self: center;
  color: var(--color-moss);
}

.v-reply__arrow .icon {
  width: 18px;
  height: 18px;
}

@media (max-width: 720px) {
  .v-reply__arrow {
    transform: rotate(90deg);
  }
}

.v-reply .chip-meeting {
  justify-self: stretch;
  max-width: 280px;
}

/* Stagger order for vignette ticks */
.v-prospects tr:nth-child(2) .v-tick { --i: 1; }
.v-prospects tr:nth-child(3) .v-tick { --i: 2; }
.v-prospects tr:nth-child(4) .v-tick { --i: 3; }
.v-prospects tr:nth-child(5) .v-tick { --i: 4; }
.v-check:nth-child(2) { --i: 1; }
.v-check:nth-child(3) { --i: 2; }
.v-inbox:nth-child(2) .v-check { --i: 3; }
.v-inbox:nth-child(2) .v-check:nth-child(2) { --i: 4; }
.v-inbox:nth-child(2) .v-check:nth-child(3) { --i: 5; }
.v-inbox:nth-child(3) .v-check { --i: 6; }
.v-inbox:nth-child(3) .v-check:nth-child(2) { --i: 7; }
.v-inbox:nth-child(3) .v-check:nth-child(3) { --i: 8; }
.v-email__line--personal::after { --i: 1; }
.v-reply .chip-meeting { --i: 2; }

/* Vignette play states: final state is the default (reduced motion, no JS).
   With motion, script.js adds .is-armed (start state) then .is-playing. */
.motion .vignette.is-armed .v-tick,
.motion .vignette.is-armed .v-check {
  opacity: 0;
  transform: scale(0.85);
}

.motion .vignette.is-armed .v-check {
  color: var(--color-moss);
  background: transparent;
  border-color: var(--color-edge);
  opacity: 1;
  transform: none;
}

.motion .vignette.is-armed .v-warmup__bar span,
.motion .vignette.is-armed .v-email__line--personal::after {
  transform: scaleX(0);
}

.motion .vignette.is-armed .v-reply .chip-meeting {
  opacity: 0;
  transform: translateY(8px);
}


.motion .vignette .v-tick,
.motion .vignette .v-check,
.motion .vignette .v-warmup__bar span,
.motion .vignette .v-email__line--personal::after,
.motion .vignette .v-reply .chip-meeting {
  transition:
    opacity 400ms var(--ease-out),
    transform 600ms var(--ease-out),
    color 300ms var(--ease-out),
    background-color 300ms var(--ease-out),
    border-color 300ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 180ms + 200ms);
}

.motion .vignette .v-warmup__bar span {
  transition-duration: 1600ms;
}


/* Pricing model: ledger, comparison, qualified card */
/* Closing CTA panel (Chalk): next steps above the Cal.com embed */
.cta-panel {
  background: var(--color-chalk);
  border-radius: var(--radius-panel);
  padding: var(--panel-pad);
  text-align: center;
}

.cta-panel > * {
  max-width: var(--measure-centred);
  margin-inline: auto;
}

.cta-panel h2 {
  color: var(--color-pitch);
  margin-bottom: var(--space-2);
}

.cta-panel p {
  text-wrap: pretty;
  color: var(--color-edge);
  font-size: var(--text-lead);
  line-height: 1.5;
  margin-bottom: var(--space-4);
}

.cta-panel > .next-steps {
  max-width: 50rem;
  margin-bottom: var(--space-4);
}

/* The calendar uses the full panel width */
.cta-panel > .booking {
  max-width: none;
  width: auto;
  min-height: 480px;
}

/* Phones: a Surface frame 12px in from the panel edges around Cal's iframe */
@media (max-width: 720px) {
  .cta-panel > .booking {
    margin-inline: calc(12px - var(--panel-pad));
    background: var(--color-surface);
    border-radius: var(--radius-card);
    overflow: hidden;
  }

  .cta-panel:has(> .booking-fallback[hidden]) > .booking {
    margin-bottom: calc(12px - var(--panel-pad));
  }
}

.cta-panel > .booking:not([hidden]) + .booking-fallback {
  margin-top: var(--space-3);
}

.cta-panel .booking-status {
  font-size: var(--text-small);
  margin-bottom: var(--space-2);
}

.cta-panel .btn:focus-visible,
.cta-panel :focus-visible {
  outline-color: var(--color-pitch);
}

/* ---------- 14. Light sections (component colours) ----------
   Components default to dark. Inside .tone-light, text turns Pitch and Ink,
   cards become near-white with a soft tinted shadow, and the example
   vignettes stay dark like small screens. */

.tone-light h2,
.tone-light h3,
.tone-light .timeline__title,
.tone-light .faq__q,
.tone-light .prose strong,
.tone-light .prose a {
  color: var(--color-pitch);
}

.tone-light .h-tone {
  color: var(--color-ink-muted);
}

.tone-light :focus-visible {
  outline-color: var(--color-pitch);
}

.tone-light .card {
  background: var(--color-paper-card);
  border-color: var(--line-light);
  box-shadow: var(--shadow-soft);
}

.tone-light .vignette {
  border-color: color-mix(in srgb, var(--color-pitch) 70%, var(--color-edge));
}

.tone-light .cta-row__note,
.tone-light .faq-note,
.tone-light .toc a,
.tone-light .timeline__status {
  color: var(--color-ink-soft);
}

.tone-light .toc__title {
  color: var(--color-ink-muted);
}

@media (hover: hover) and (pointer: fine) {
  .tone-light .toc a:hover { color: var(--color-pitch); }
}

.tone-light .btn--ghost {
  color: var(--color-pitch);
  border-color: color-mix(in srgb, var(--color-pitch) 22%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .tone-light .btn--ghost:hover { border-color: color-mix(in srgb, var(--color-pitch) 50%, transparent); }
}

/* Timeline on Paper: the step labels go Ink (Signal text fails on Paper) */
.tone-light .timeline__track { background: var(--line-light); }
.tone-light .timeline__marker { color: var(--color-ink-soft); }
.tone-light .timeline__step::before {
  background: var(--color-paper);
  box-shadow: inset 0 0 0 2px var(--color-paper), inset 0 0 0 6px var(--color-signal);
}

/* FAQ on Paper: two columns of cards from 900px */
.tone-light .faq {
  max-width: none;
  display: grid;
  gap: 12px;
  align-items: start;
  border: 0;
}

@media (min-width: 900px) {
  .tone-light .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tone-light .faq__item {
  padding-inline: var(--space-3);
  background: var(--color-paper-card);
  border: 1px solid var(--line-light);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.tone-light .faq__icon::before,
.tone-light .faq__icon::after,
.tone-light .faq__q:hover .faq__icon::before,
.tone-light .faq__q:hover .faq__icon::after {
  background: var(--color-pitch);
}

/* ---------- 15. Confirmation page, subpages, privacy, 404 ---------- */

/* Booking confirmation page */
.confirm {
  max-width: 45rem;
  margin-inline: auto;
  text-align: center;
}

.confirm__chip {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-3);
}

.confirm__chip .chip-meeting {
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  box-shadow: var(--shadow-float);
}

.confirm__chip .chip-meeting__title {
  font-size: var(--text-small);
}

.confirm__chip .icon {
  width: 20px;
  height: 20px;
  color: var(--color-chalk);
}

.confirm__video {
  position: relative;
  aspect-ratio: 16 / 9;
  padding: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.confirm__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.confirm__placeholder {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-moss);
}

.confirm__next {
  margin: var(--space-10) 0 var(--space-3);
  font-size: var(--text-h3);
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.confirm .next-steps {
  margin-bottom: var(--space-4);
}

/* Two ghost buttons: stacked (max 320px) on phones, side by side from 600px */
.confirm__actions {
  display: grid;
  gap: 12px;
  max-width: 20rem;
  margin: 0 auto;
}

@media (min-width: 600px) {
  .confirm__actions {
    display: flex;
    justify-content: center;
    gap: var(--space-2);
    max-width: none;
  }

  .confirm__actions .btn {
    min-width: 10rem;
  }
}

.confirm__ready {
  max-width: 35rem;
  margin: var(--space-6) auto 0;
  text-align: left;
}

.confirm__inbox {
  margin-top: var(--space-6);
  font-size: var(--text-small);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

/* How it works and FAQs pages: end with "Back to the video" */
.page-next {
  margin-top: var(--space-10);
  text-align: center;
}

.page-next .btn {
  min-width: 10rem;
}

/* Privacy: sticky contents on the left from 960px, above the text on phones */
.legal {
  display: grid;
  gap: var(--space-6);
  max-width: 64rem;
  margin-inline: auto;
}

@media (min-width: 960px) {
  .legal {
    grid-template-columns: 14rem minmax(0, 40rem);
    justify-content: center;
    gap: var(--space-8);
    align-items: start;
  }
}

.toc {
  padding: 18px 20px;
}

@media (min-width: 960px) {
  .toc {
    position: sticky;
    top: calc(var(--nav-height) + var(--space-4));
  }
}

.toc__title {
  margin-bottom: 10px;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-moss);
}

.toc ol {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 2px;
  font-size: var(--text-small);
}

.toc a {
  display: block;
  padding: 5px 0;
  color: var(--color-moss);
  text-decoration: none;
  transition: color 150ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .toc a:hover { color: var(--color-chalk); }
}

@media (pointer: coarse) {
  .toc a { padding-block: 11px; }
}

/* 404: the home button under the page header */
.not-found__home {
  margin-top: var(--space-4);
  text-align: center;
}

/* ---------- 16. Cookie notice, test button ---------- */

/* Built by script.js. Shared card look, frosted at 92% Surface (keeps Moss at
   5.1:1 over the Chalk panel), light OK button. */
.cookie-banner {
  position: fixed;
  z-index: 20;
  left: var(--space-2);
  right: var(--space-2);
  bottom: var(--space-2);
  max-width: 400px;
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-edge);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-float);
  animation: notice-in 300ms var(--ease-out) both;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cookie-banner {
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    backdrop-filter: blur(16px) saturate(140%);
  }
}

.cookie-banner.is-leaving {
  animation: notice-out 200ms var(--ease-out) both;
}

@keyframes notice-in {
  from { opacity: 0; transform: translateY(12px); }
}

@keyframes notice-out {
  to { opacity: 0; transform: translateY(12px); }
}

@keyframes notice-fade-in {
  from { opacity: 0; }
}

@keyframes notice-fade-out {
  to { opacity: 0; }
}

.cookie-banner .eyebrow {
  margin-bottom: var(--space-1);
}

.cookie-banner__text {
  font-size: var(--text-small);
  line-height: 1.5;
}

.cookie-banner__text a {
  color: var(--color-chalk);
  text-underline-offset: 2px;
}

.cookie-banner__actions {
  display: flex;
  gap: 12px;
  margin-top: var(--space-2);
}

.cookie-banner .btn {
  padding: 10px 16px;
}

/* Only added by script.js on the home page opened with ?test=1 */
.test-redirect {
  position: fixed;
  z-index: 20;
  top: calc(var(--nav-height) + var(--space-2));
  right: var(--space-2);
  padding: 10px 16px;
}

/* ---------- 17. Motion, preferences ---------- */

/* Page load: hero and page-header children fade up 8px, 60ms apart */
@media (prefers-reduced-motion: no-preference) {
  .js .hero__content > *,
  .js .page-header > * {
    animation: rise 500ms var(--ease-out) both;
  }

  .js .hero__content > :nth-child(2),
  .js .page-header > :nth-child(2) { animation-delay: 60ms; }
  .js .hero__content > :nth-child(3),
  .js .page-header > :nth-child(3) { animation-delay: 120ms; }
  .js .hero__content > :nth-child(4),
  .js .page-header > :nth-child(4) { animation-delay: 180ms; }
  .js .hero__content > :nth-child(n + 5),
  .js .page-header > :nth-child(n + 5) { animation-delay: 240ms; }

  /* The hero statement rises after the text, a little slower */
  .js .hero__visual {
    animation: rise-far 900ms var(--ease-glide) 200ms both;
  }

  /* Shared reveal (script.js adds .reveal, then .is-in on first view) */
  .reveal {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 500ms var(--ease-out),
      transform 500ms var(--ease-out);
    transition-delay: calc(var(--reveal-index, 0) * 50ms);
  }

  .reveal.is-in {
    opacity: 1;
    transform: none;
  }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(8px); }
}

@keyframes rise-far {
  from { opacity: 0; transform: translateY(24px); }
}

/* No nav transitions until the first frame, so a reload mid-page does not animate */
.nav:not(.is-ready) *,
.nav:not(.is-ready) {
  transition: none !important;
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .nav.is-compact .nav__pill,
  .nav .nav__bar .nav__menu,
  .cookie-banner,
  .card--frosted {
    background: var(--color-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav.is-compact[data-theme="light"] .nav__pill,
  .nav[data-theme="light"] .nav__bar .nav__menu {
    background: var(--color-paper-card);
  }
}

@media (prefers-contrast: more) {

  .btn--ghost {
    border-color: var(--color-chalk);
  }
}

/* Reduced motion: everything static and visible in its final state */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .cookie-banner { animation-name: notice-fade-in; }
  .cookie-banner.is-leaving { animation-name: notice-fade-out; }
  .btn__shimmer { display: none; }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}