/* Cues site shell: tokens, base, zoom, announcement bar, header, mobile menu,
   hero text, essay grid (TOC rail, drop cap, H2s, margin note, lists,
   link rows) and footer. Component CSS lives in banner.css, product.css and
   waitlist.css. */

/* ---------- fonts (self-hosted; no third-party requests) ---------- */
@font-face {
  font-family: "Geist";
  src: url("/fonts/geist.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* metric-matched fallback while Geist loads (same overrides as next/font) */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  ascent-override: 94.56%;
  descent-override: 27.76%;
  line-gap-override: 0%;
  size-adjust: 106.28%;
}
@font-face {
  font-family: "EB Garamond";
  src: url("/fonts/eb-garamond.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens (display face = EB Garamond, font-matched) ---------- */
:root {
  /* colour: raw tonal */
  --tonal-10: #fcfcfc;
  --tonal-20: #fafaf8;
  --tonal-30: #fdfcf3;
  --tonal-40: #f0f0f0;
  --tonal-100: #000;

  /* colour: text */
  --text-primary: #282828;
  --text-secondary: #676767;
  --text-essay: #6b6b6b;
  --text-tertiary: rgb(0 0 0 / .40);
  --text-strong: #000;
  --text-inverse: #fcfcfc;
  --text-dropcap: #121212;
  --link-announce: #246bfd;
  --link-announce-hover: #1557d6;

  /* colour: surfaces */
  --surface-primary: var(--tonal-10);
  --surface-secondary: var(--tonal-20);
  --surface-tertiary: var(--tonal-30);
  --surface-quaternary: var(--tonal-40);
  --surface-inverse: #242424;
  --surface-inverse-hover: rgb(0 0 0 / .90);
  --surface-subtle: rgb(0 0 0 / .02);
  --surface-hover: rgb(0 0 0 / .04);
  --surface-pressed: rgb(0 0 0 / .06);
  --surface-header: rgb(252 252 252 / .70);
  --surface-menu: rgb(252 252 252 / .80);
  --surface-product-scene: rgb(0 0 0 / .04);

  /* colour: borders */
  --border-subtle: rgb(0 0 0 / .08);
  --border-default: rgb(0 0 0 / .10);
  --border-strong: rgb(0 0 0 / .20);
  --focus-ring: #000;

  /* colour: hero banner and diagram components */
  --hl-ink: #1a1817;
  --hl-bubble: #f5f5f4;
  --hl-chip-ink: #58524e;
  --hl-agent: #2563eb;
  --sva-ink: #1b212c;
  --sva-blue: #2563eb;
  --sva-track: #7f9ceb;
  --sva-agent: #4172ea;
  --sva-ring: #d9d6d4;
  --sva-line: #aeb9d2;          /* drawn spokes are #aeb9d2, not #b5afaa */
  --sva-text-faint: #b5afaa;
  --sva-text-dim: #8a827b;

  /* shadows and effects */
  --shadow-cookie: 0 10px 35px rgb(22 25 29 / .14);
  --shadow-app-window: 0 4px 16px -2px rgb(0 0 0 / .08), 0 12px 40px -8px rgb(0 0 0 / .16), 0 0 0 .5px rgb(0 0 0 / .02);
  --header-fade: linear-gradient(to bottom, rgb(252 252 252 / .40), transparent);
  --header-backdrop: blur(40px) saturate(1.5);
  --menu-backdrop: blur(24px);

  /* fonts */
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-display-h1: 450;          /* EB Garamond weight that matches the reference serif's 400 at H1 size */
  --fw-display-h2: 475;
  --ls-h1: .015em;
  --ls-h2: .018em;               /* sets identical H2 strings within 1 px of the reference width */

  /* type scale (size / line-height) */
  --fs-2xs: 10px;  --lh-2xs: 12px;
  --fs-xs: 12px;   --lh-xs: 18px;
  --fs-sm: 14px;   --lh-sm: 21px;
  --lh-sm-tight: 20px;
  --lh-sm-heading: 18px;
  --fs-caption: 13px; --lh-caption: 19px;
  --fs-md: 16px;   --lh-md: 24px;
  --fs-lg: 18px;   --lh-lg: 27px;
  --fs-xl: 20px;   --lh-xl: 30px;
  /* Display sizes are the reference's (36/1.08, 72/72, 22/27, 24/27) re-matched for EB Garamond:
     the font size grows by 76/72 (H1) and 25.5/24 (H2); the line boxes stay the same. */
  --fs-h2: 23.375px; --lh-h2: 27px;      /* 25.5px at >=768 */
  --fs-h1: 38px;     --lh-h1: 38.88px;   /* 76px / 72px at >=768 */
  --fs-dropcap: 49px; --lh-dropcap: .781; --pt-dropcap: 2px;  /* 53.5px / .768 / 0 at >=768: ink and baseline land on the reference's */
  --mr-dropcap: 6px;   /* 4 px + the narrower EB Garamond A, so body text starts at the reference x */

  /* spacing scale (Tailwind 4px base) */
  --sp-0_5: 2px; --sp-1: 4px; --sp-1_5: 6px; --sp-2: 8px; --sp-2_5: 10px; --sp-3: 12px; --sp-3_5: 14px;
  --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px;
  --sp-11: 44px; --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-28: 112px; --sp-32: 128px;

  /* radii */
  --r-sm: 4px; --r-md: 6px; --r-lg: 8px; --r-2xl: 16px; --r-3xl: 24px; --r-full: 9999px;
  --r-bubble: 12px 12px 12px 8px; --r-app-window: 10px;

  /* layout */
  --container-canvas: 1536px;
  --container-reading: 640px;
  --wide-block-max: 888px;
  --banner-w: calc(100vw - 40px);
  --wide-media-w: calc(100vw - 40px);
  --frame-px: 30px;
  --header-py: 12px;
  --header-h: 52px;
  --logo-h: 18px;
  --getaccess-h: 28px;
  --toc-sticky-top: 96px;
  --margin-note-w: 330px; --margin-note-gap: 40px;
  --banner-pt: 32px; --banner-mb: -28px; --banner-h: 156px;
  --hero-pt: 48px; --hero-pb: 40px; --hero-p-mt: 24px;
  --para-gap: 24px;
  --h2-1-mt: 36px;
  --h2-2-mt: 80px;
  --section-pt: 36px;
  --after-h2: 12px;
  --ol-mt: 24px;
  --list-indent: 28px; --list-gap: 12px;
  --diagram-mt: 16px;
  --product-mt: 48px; --product-min-h: 811px;
  --links-nav-mt: 48px; --links-nav-pt: 32px; --links-nav2-mt: 32px; --links-gap-x: 24px; --links-gap-y: 12px;
  --essay-pb: 56px;
  --footer-pt: 48px; --footer-pb: 48px; --footer-gap: 40px;
  --scroll-target-mt: 96px;      /* anchor targets clear the sticky header */
}
@media (max-width: 600px) { :root { --banner-h: 126px; } }
@media (min-width: 640px) { :root { --frame-px: 32px; } }
@media (min-width: 768px) {
  :root {
    --header-py: 20px; --header-h: 68px; --logo-h: 20px;
    --banner-pt: 40px; --banner-mb: -24px;
    --hero-pt: 56px; --hero-pb: 74px;
    --fs-h1: 76px; --lh-h1: 72px;
    --fs-h2: 25.5px;
    --fs-dropcap: 53.5px; --lh-dropcap: .768; --pt-dropcap: 0px;
    --h2-1-mt: 48px; --h2-2-mt: 96px; --section-pt: 96px; --after-h2: 24px; --ol-mt: 32px;
    --wide-media-w: calc(100vw - 64px);
    --diagram-mt: 20px; --product-mt: 56px;
    --essay-pb: 112px;
  }
}
@media (min-width: 1024px) { :root { --frame-px: 48px; --product-min-h: 590px; } }
@media (min-width: 1280px) { :root { --frame-px: 64px; --getaccess-h: 45px; --header-h: 85px; } }
@media (min-width: 1536px) { :root { --frame-px: 128px; } }

/* ---------- the 0.875 zoom: 1024–1600 px is drawn at 87.5 % ---------- */
@media (min-width: 1024px) and (max-width: 1600px) {
  :root { zoom: .875; }
  [data-native-zoom] { zoom: calc(1 / .875); }
}

/* ---------- base (Tailwind preflight + @layer base) ---------- */
@layer base {
  *, ::after, ::before, ::backdrop { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
  html {
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    -webkit-tap-highlight-color: transparent;
    font-family: var(--font-sans);
    font-feature-settings: "kern" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    tab-size: 4;
    color: var(--text-primary);
    background-color: var(--surface-primary);
  }
  body {
    min-height: 100dvh;
    background-color: var(--surface-primary);
    font-family: var(--font-sans);
    font-size: 16px;
    line-height: 24px;
    color: var(--text-primary);
  }
  h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; }
  ol, ul, menu { list-style: none; }
  img, svg, video, canvas, audio, iframe, embed, object { display: block; vertical-align: middle; }
  img, video { max-width: 100%; height: auto; }
  svg, svg * { shape-rendering: geometricPrecision; }
  a { color: inherit; -webkit-text-decoration: inherit; text-decoration: inherit; }
  b, strong { font-weight: bolder; }
  sup { vertical-align: baseline; font-size: 75%; line-height: 0; position: relative; top: -.5em; }
  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  button, [role="button"] { cursor: pointer; }
  ::placeholder { opacity: 1; color: var(--text-tertiary); }
  [hidden]:where(:not([hidden="until-found"])) { display: none !important; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border-width: 0;
}

/* focus ring token */
.focus-ring { outline: 1px solid transparent; }
.focus-ring:focus-visible { outline-color: var(--focus-ring); outline-offset: 2px; }

/* skip link: invisible until focused, so the layout is unchanged */
.skip-link {
  position: fixed;
  left: 16px;
  top: 8px;
  z-index: 100;
  padding: 8px 12px;
  border-radius: 8px;
  background-color: var(--surface-primary);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 21px;
}
.skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#main-content { scroll-margin-top: var(--header-h); }
#main-content:focus { outline: none; }

/* ---------- content frame ---------- */
.content-frame {
  width: 100%;
  max-width: var(--container-canvas);
  margin-inline: auto;
  padding-inline: 30px;
}
@media (min-width: 640px) { .content-frame { padding-inline: 32px; } }
@media (min-width: 1024px) { .content-frame { padding-inline: 48px; } }
@media (min-width: 1280px) { .content-frame { padding-inline: 64px; } }
@media (min-width: 1536px) { .content-frame { padding-inline: 128px; } }

/* ---------- 1. announcement bar (not sticky) ---------- */
.announce {
  border-bottom: 1px solid var(--border-default);
  background-color: var(--surface-secondary);
}
.announce-link {
  display: flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 8px 20px;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  color: var(--link-announce);
  text-decoration-line: underline;
  text-underline-offset: 4px;
  outline-offset: -3px;
}
.announce-link:focus-visible { outline: 2px solid var(--text-primary); outline-offset: -3px; }
@media (hover: hover) {
  .announce-link:hover { background-color: var(--surface-tertiary); color: var(--link-announce-hover); }
}
.announce-short { white-space: nowrap; }
.announce-statement, .announce-cta { display: none; }
@media (min-width: 640px) {
  .announce-link {
    min-height: 44px;
    flex-wrap: wrap;
    gap: 4px 16px;
    padding-block: 10px;
    color: var(--text-primary);
    text-decoration-line: none;
  }
  .announce-short { display: none; }
  .announce-statement { display: inline; font-weight: 500; }
  .announce-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    color: var(--link-announce);
  }
  .announce-cta-text {
    text-decoration-line: underline;
    text-decoration-color: currentColor;
    text-underline-offset: 4px;
  }
}
@media (hover: hover) and (min-width: 640px) {
  .announce-link:hover { color: var(--text-primary); }
  .announce-link:hover .announce-cta { color: var(--link-announce-hover); }
}

/* ---------- 2. sticky header (no scrolled state) ---------- */
.header-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background-color: var(--surface-header);
  -webkit-backdrop-filter: var(--header-backdrop);
  backdrop-filter: var(--header-backdrop);
}
.header-bar::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  top: 100%;
  height: 16px;
  background-image: var(--header-fade);
}
.site-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 12px;
}
@media (min-width: 768px) { .site-header { padding-block: 20px; } }
.header-left {
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  align-items: center;
}
.header-right {
  display: flex;
  min-width: 0;
  flex: 1 1 0%;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}
@media (min-width: 768px) { .header-right { gap: 16px; } }

/* logo: wordmark 18 px (<768, nudged 2 px) / 20 px; hit padding -m-2 p-2 */
.brand {
  display: inline-flex;
  align-items: center;
  margin: -8px;
  padding: 8px;
  border-radius: 8px;
  color: var(--text-primary);
  transition: opacity .15s ease;
}
@media (hover: hover) { .brand:hover { opacity: .7; } }
.brand-wordmark {
  height: 18px;
  width: auto;
  flex-shrink: 0;
  translate: 0 2px;
  fill: currentColor;
}
@media (min-width: 768px) { .brand-wordmark { height: 20px; translate: none; } }

/* centred nav (>=1280) */
.site-nav { display: none; flex-shrink: 0; }
@media (min-width: 1280px) { .site-nav { display: block; } }
.site-nav-list { display: flex; align-items: center; gap: 24px; }
.site-nav-link {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  transition: color .15s ease;
}
.site-nav-link::before {
  content: "";
  position: absolute;
  inset: -4px -8px;
  pointer-events: inherit;
}
@media (hover: hover) { .site-nav-link:hover { color: var(--text-primary); } }
.site-nav-link[aria-current="page"] { color: var(--text-primary); }

/* Get access slot: waitlist.js renders the pill and the email field into it */
.header-access {
  position: relative;
  display: block;
  flex-shrink: 0;
  min-height: 28px;
}
html.js .header-access:empty { width: 88px; }
@media (min-width: 1280px) {
  .header-access { width: 160px; height: 45px; min-height: 0; }
  html.js .header-access:empty { width: 160px; }
}

/* hamburger (<1280) */
.menu-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity .15s ease, scale .15s ease;
}
.menu-toggle::before { content: ""; position: absolute; inset: -12px; pointer-events: inherit; }
@media (hover: hover) { .menu-toggle:hover { opacity: .7; } }
.menu-toggle:active { scale: .95; }
.menu-toggle[aria-expanded="true"] { visibility: hidden; pointer-events: none; }
@media (min-width: 1280px) { .menu-toggle { display: none; } }
.menu-toggle-bars { position: relative; display: block; width: 20px; height: 20px; }
.menu-toggle-bars > span {
  position: absolute;
  top: calc(50% - .75px);
  left: 50%;
  width: 15px;
  height: 1.5px;
  border-radius: 9999px;
  background-color: currentColor;
  translate: -50% -4px;
  transition: translate .2s cubic-bezier(.4, 0, .2, 1), rotate .2s cubic-bezier(.4, 0, .2, 1);
}
.menu-toggle-bars > span + span { translate: -50% 4px; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars > span { translate: -50% 0; rotate: 45deg; }
.menu-toggle[aria-expanded="true"] .menu-toggle-bars > span + span { rotate: -45deg; }

/* ---------- mobile menu overlay ---------- */
.menu-sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background-color: var(--surface-menu);
  -webkit-backdrop-filter: var(--menu-backdrop);
  backdrop-filter: var(--menu-backdrop);
  outline: none;
  opacity: 1;
  transition: opacity .2s cubic-bezier(0, 0, .2, 1);
}
.menu-sheet[data-starting], .menu-sheet[data-ending] { opacity: 0; }
.menu-sheet[data-ending] { transition-duration: .15s; }
.menu-close {
  position: fixed;
  top: 16px;
  right: 30px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--text-primary);
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity .15s ease, scale .15s ease;
}
.menu-close::before { content: ""; position: absolute; inset: -12px; }
@media (hover: hover) { .menu-close:hover { opacity: .7; } }
.menu-close:active { scale: .95; }
@media (min-width: 640px) { .menu-close { right: 32px; } }
@media (min-width: 768px) { .menu-close { top: 24px; } }
@media (min-width: 1280px) { .menu-close--visual { display: none; } }
/* keyboard close: sr-only until focused, then at the same spot as the visual X */
.menu-close--sr:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.menu-close--sr:focus { z-index: 70; outline: 1px solid var(--focus-ring); outline-offset: 2px; }
.menu-nav {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
  padding: 80px 30px 32px;
}
@media (min-width: 640px) { .menu-nav { padding-inline: 32px; } }
.menu-group { display: flex; flex-direction: column; gap: 12px; }
.menu-heading { font-size: 14px; line-height: 21px; font-weight: 400; color: var(--text-tertiary); }
.menu-list { display: flex; flex-direction: column; gap: 4px; }
.menu-list > li { display: flex; }
.menu-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border-radius: 8px;
  padding-block: 2px;
  color: var(--text-primary);
  font-size: 18px;
  line-height: 27px;
  touch-action: manipulation;
  transition: color .15s ease;
}
@media (min-width: 640px) { .menu-link { font-size: 20px; line-height: 30px; } }
@media (hover: hover) { .menu-link:hover { color: var(--text-strong); } }
.menu-link[aria-current="page"] { color: var(--text-strong); }

/* ---------- 3a. hero banner slot ----------
   The .landing-hero-banner wrapper geometry (pt 32/40, mb -28/-24, reserved
   height 156, 126 at <=600) lives in banner.css only, next to the banner it
   reserves space for; banner.js renders section.hl-banner into it. */

/* ---------- 3b. hero text ---------- */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 48px;
  padding-bottom: 40px;
}
@media (min-width: 768px) { .hero { padding-top: 56px; padding-bottom: 74px; } }
.hero-title {
  max-width: 720px;
  font-family: var(--font-display);
  font-weight: var(--fw-display-h1);
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  color: var(--text-primary);
  text-wrap: balance;
}
.br-md { display: none; }
@media (min-width: 768px) { .br-md { display: block; } }
.hero-sub {
  margin-top: 24px;
  max-width: 620px;
  font-size: 16px;
  line-height: 24px;
  color: var(--text-secondary);
  text-wrap: pretty;
}
.hero-cta { margin-top: 24px; }
@media (min-width: 768px) { .hero-cta { display: none; } }
.hero-cta-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 8px 0 16px;
  border: 1px solid var(--border-default);
  border-radius: 9999px;
  background-color: var(--surface-primary);
  color: var(--text-primary);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  touch-action: manipulation;
  transition: background-color .15s ease, color .15s ease, opacity .15s ease, scale .15s ease, translate .15s ease;
}
@media (hover: hover) { .hero-cta-button:hover { background-color: var(--surface-subtle); color: var(--text-primary); } }
.hero-cta-button:active { translate: 0 1px; scale: .97; background-color: var(--surface-hover); transition-duration: 50ms; }
.hero-cta-button [data-label] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; line-height: 24px; }
.hero-cta-dot {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9999px;
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
}
.hero-cta-dot svg { width: 18px; height: 18px; flex-shrink: 0; }   /* 18 x 18 inside the 28 px disc */
@media (min-width: 768px) { .hero-cta-button { display: none; } }

/* page heroes on /faq and /privacy: same type, no banner above */
.hero--page { padding-top: 56px; }
@media (min-width: 768px) { .hero--page { padding-top: 96px; } }

/* ---------- 3c. essay grid ---------- */
.essay { padding-bottom: 56px; }
@media (min-width: 768px) { .essay { padding-bottom: 112px; } }
.essay-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: 40px;
}
@media (min-width: 1280px) {
  .essay-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 640px) minmax(0, 1fr); }
}
.essay-article {
  margin-inline: auto;
  width: 100%;
  max-width: var(--container-reading);
}
@media (min-width: 1280px) { .essay-article { grid-column-start: 2; } }

/* TOC rail (>=1280; data-native-zoom keeps it at real 14 px / 96 px under the zoom) */
.toc-col { display: none; }
@media (min-width: 1280px) { .toc-col { display: block; grid-column-start: 1; grid-row-start: 1; } }
.toc-reveal { display: contents; }
.toc-nav {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.toc-list { display: flex; flex-direction: column; }
.toc-list > li { padding-block: 4px; }
.toc-link {
  display: flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  outline: none;
  color: var(--text-tertiary);
  transition: color .8s ease;
}
.toc-link.is-active { color: var(--text-primary); transition: color .1s ease; }
.toc-link:focus-visible { outline: 1px solid var(--focus-ring); outline-offset: 2px; }  /* visible keyboard focus */
.toc-link > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  line-height: 21px;
}
/* reveal; hidden states only when JS runs */
html.js [data-toc-reveal="hidden"] .toc-nav { visibility: hidden; transition: visibility 0s .27s; }
html.js [data-toc-reveal] .toc-nav li { opacity: 0; transform: translateY(6px); transition: opacity .18s, transform .18s; }
html.js [data-toc-reveal="revealed"] .toc-nav li {
  opacity: 1;
  transform: none;
  transition: opacity .35s, transform .35s cubic-bezier(.2, 0, 0, 1);
}
html.js [data-toc-reveal="revealed"] .toc-nav li:nth-child(2) { transition-delay: 50ms; }
html.js [data-toc-reveal="revealed"] .toc-nav li:nth-child(3) { transition-delay: .1s; }
html.js [data-toc-reveal="revealed"] .toc-nav li:nth-child(4) { transition-delay: .15s; }
html.js [data-toc-reveal="revealed"] .toc-nav li:nth-child(5) { transition-delay: .2s; }
html.js [data-toc-reveal="revealed"] .toc-nav li:nth-child(n+6) { transition-delay: .25s; }
html.js [data-toc-reveal="hidden"] .toc-nav li:nth-last-child(2) { transition-delay: 20ms; }
html.js [data-toc-reveal="hidden"] .toc-nav li:nth-last-child(3) { transition-delay: 40ms; }
html.js [data-toc-reveal="hidden"] .toc-nav li:nth-last-child(4) { transition-delay: 60ms; }
html.js [data-toc-reveal="hidden"] .toc-nav li:nth-last-child(n+5) { transition-delay: 80ms; }

/* body text */
.para {
  font-size: 16px;
  line-height: 24px;
  color: var(--text-essay);
  word-spacing: .025em;    /* reproduces the reference line breaks with this Geist build (11/13 blocks at 1920, 7/8 at 1440) */
}
.intro-paras { display: flex; flex-direction: column; gap: 24px; }
.intro-paras--after { margin-top: 12px; }
@media (min-width: 768px) { .intro-paras--after { margin-top: 24px; } }
.scroll-target, #intro, #leave-email { scroll-margin-top: var(--scroll-target-mt); }

/* drop cap, tuned for EB Garamond: baseline on body line 2, 2 lines tall */
.dropcap::first-letter {
  float: left;
  margin-right: var(--mr-dropcap);
  padding-top: var(--pt-dropcap);
  font-family: var(--font-display);
  font-weight: var(--fw-display-h1);
  font-size: var(--fs-dropcap);
  line-height: var(--lh-dropcap);
  color: var(--text-dropcap);
}

/* H2 */
.h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-display-h2);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  color: var(--text-primary);
  text-wrap: pretty;   /* a heading that wraps never leaves one word alone on its last line */
}
.h2--a { margin-top: 36px; }
.h2--b { margin-top: 80px; scroll-margin-top: var(--scroll-target-mt); }
@media (min-width: 768px) { .h2--a { margin-top: 48px; } .h2--b { margin-top: 96px; } }

/* sections with a TOC'd H2 */
.essay-section { padding-top: 36px; }
@media (min-width: 768px) { .essay-section { padding-top: 96px; } }
.essay-section > .h2 { scroll-margin-top: var(--scroll-target-mt); }
.essay-section > .para { margin-top: 12px; }
.essay-section > .list { margin-top: 12px; }
.essay-section > .para + .list { margin-top: 24px; }
@media (min-width: 768px) {
  .essay-section > .para { margin-top: 24px; }
  .essay-section > .list { margin-top: 24px; }
  .essay-section > .para + .list { margin-top: 32px; }
}

/* lists: plain " - " lead-ins, default outside markers */
.list {
  padding-left: 28px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  color: var(--text-essay);
  word-spacing: .025em;
}
.list--decimal { list-style-type: decimal; }
.list--disc { list-style-type: disc; }
.list > li:not(:last-child) { margin-bottom: 12px; }

/* citation block, footnote marker and margin note */
.cite-block { position: relative; margin-top: 16px; }
.fn-marker {
  margin-left: 2px;
  vertical-align: super;
  font-size: 10px;
  line-height: 12px;
  color: var(--text-tertiary);
}
@media (min-width: 768px) { .fn-marker { font-size: 12px; line-height: 18px; } }
.fn-link { position: relative; border-radius: 2px; }
.fn-link--mobile::before { content: ""; position: absolute; inset: -8px; }
.fn-link--desktop { display: none; }
@media (min-width: 1280px) {
  .fn-link--mobile { display: none; }
  .fn-link--desktop { display: inline; }
}
.cite {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
  scroll-margin-top: var(--scroll-target-mt);
}
.cite--inline { margin-top: 8px; }
.cite--margin { display: none; position: absolute; left: calc(100% + 40px); width: 330px; }
@media (min-width: 1280px) {
  .cite--inline { display: none; }
  .cite--margin { display: block; }
}
.cite-link {
  text-decoration-line: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: .75px;
  text-underline-offset: 2px;
  transition: color .15s cubic-bezier(.4, 0, .2, 1), text-decoration-color .15s cubic-bezier(.4, 0, .2, 1);
}
@media (hover: hover) { .cite-link:hover { color: var(--text-tertiary); } }
.cite-link sup {
  position: relative;
  top: 0;
  vertical-align: baseline;
  font-size: 10px;
  line-height: 12px;
  color: var(--text-tertiary);
}
@media (min-width: 768px) { .cite-link sup { font-size: 12px; line-height: 18px; } }
html.js .cite {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .5s cubic-bezier(0, 0, .2, 1), transform .5s cubic-bezier(0, 0, .2, 1);
}
html.js .cite.is-in { opacity: 1; transform: none; }
html.js .cite--margin:not(.is-placed) { visibility: hidden; }

/* wide blocks: 888 max, centred on the viewport, breaking out of the 640 column.
   A negative margin centres the box, so no transform is needed for centring and the
   lazy-reveal transform can run on it. */
.wide-block {
  position: relative;
  width: calc(100vw - 40px);
  max-width: 888px;
  margin-left: calc(50% - min(444px, 50vw - 20px));
}
@media (min-width: 768px) {
  .wide-block { width: calc(100vw - 64px); margin-left: calc(50% - min(444px, 50vw - 32px)); }
}

/* sync diagram block: the figure is the 720:377 box; diagram.js draws into [data-diagram-mount] */
.landing-diagram {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  aspect-ratio: 720 / 377;
  min-height: 0;
  padding: 4px 32px 16px;
}
@media (min-width: 768px) { .landing-diagram { margin-top: 20px; } }
.diagram-canvas {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 860px;
  margin-inline: auto;
}
.diagram-caption {
  display: grid;
  max-width: 468px;   /* the reference caption box (52ch in its own font) */
  margin: 6px auto 0;
  text-align: center;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 19px;
  color: var(--sva-text-dim);
}
.diagram-caption > span { grid-area: 1 / 1; }

/* product mock block: product.js/product.css render the frame inside */
.product-block {
  margin-top: 48px;
  min-height: 811px;
}
@media (min-width: 768px) { .product-block { margin-top: 56px; } }
@media (min-width: 1024px) { .product-block { min-height: 590px; } }

/* lazy reveal; hidden only when JS runs */
html.js [data-lazy-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .8s cubic-bezier(.165, .84, .44, 1), transform .8s cubic-bezier(.165, .84, .44, 1);
}
html.js [data-lazy-reveal].is-revealed { opacity: 1; transform: none; }

/* link rows after the divider */
.link-row {
  margin-top: 32px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 21px;
}
.link-row--first {
  margin-top: 48px;
  border-top: 1px solid var(--border-default);
  padding-top: 32px;
}
.link-row-label { margin-bottom: 12px; color: var(--text-secondary); }
.link-row-links { display: flex; flex-wrap: wrap; gap: 12px 24px; }
.link-row-links a {
  color: var(--text-primary);
  text-decoration-line: underline;
  text-underline-offset: 4px;
}

/* inline links inside body text (/faq and /privacy only; the homepage essay has none) */
.prose-link {
  color: var(--text-primary);
  text-decoration-line: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: text-decoration-color .15s ease;
}
@media (hover: hover) { .prose-link:hover { text-decoration-color: currentColor; } }

/* /faq and /privacy body */
.page-section > .h2 { margin-top: 36px; scroll-margin-top: var(--scroll-target-mt); }
@media (min-width: 768px) { .page-section > .h2 { margin-top: 48px; } }
.page-section:first-child > .h2 { margin-top: 0; }
.page-section > .h2 + * { margin-top: 16px; }
.page-section > * + .para,
.page-section > * + .list,
.page-section > * + .leave-form { margin-top: 16px; }
.page-section > .h2 + .list { margin-top: 16px; }
.answer { display: flex; flex-direction: column; gap: 24px; }

/* /privacy: remove-me form (same look as the header email field) */
.leave-form { max-width: 420px; }
.leave-field {
  display: flex;
  height: 45px;
  align-items: center;
  border: 1px solid var(--border-default);
  border-radius: 9999px;
  background-color: var(--surface-primary);
  padding: 4px;
  transition: border-color .15s ease;
}
.leave-field:focus-within { border-color: var(--border-strong); }
.leave-form.is-error .leave-field { border-color: #f66; }
.leave-input {
  height: 100%;
  min-width: 0;
  flex: 1 1 0%;
  padding: 0 12px 0 16px;
  font-size: 14px;
  line-height: 21px;
  color: var(--text-primary);
  outline: none;
}
.leave-input::placeholder { color: rgb(0 0 0 / .55); }   /* its only visible label: 4.7:1 (AA), not tertiary 2.8:1 */
.leave-button {
  display: inline-flex;
  height: 35px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0 16px;
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .15s ease, scale .15s ease, opacity .15s ease;
}
@media (hover: hover) { .leave-button:hover { background-color: var(--surface-inverse-hover); } }
.leave-button:active { scale: .97; background-color: var(--tonal-100); transition-duration: 50ms; }
.leave-button:disabled, .leave-button[aria-disabled="true"] { opacity: .6; cursor: default; }
.leave-msg {
  min-height: 18px;
  margin-top: 8px;
  padding-left: 17px;
  font-size: 12px;
  line-height: 18px;
  color: var(--text-secondary);
}
.leave-form.is-error .leave-msg { color: #cc3333; }   /* 5:1 on the page; borders stay #f66 */

/* ---------- 4. footer (container queries on the footer's own width) ---------- */
.site-footer {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--surface-primary);
}
.footer-frame {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-top: 48px;
  padding-bottom: 48px;
}
.footer-top { display: flex; flex-direction: column; gap: 32px; }
.footer-mark {
  display: none;
  width: fit-content;
  align-items: center;
  align-self: flex-start;
  margin: -8px;
  padding: 8px;
  border-radius: 8px;
  color: var(--text-primary);
  transition: opacity .15s ease;
}
@media (hover: hover) { .footer-mark:hover { opacity: .7; } }
.footer-mark svg { width: 32px; height: 32px; }
.footer-nav {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 32px;
}
.footer-col { display: flex; flex-direction: column; gap: 16px; }
.footer-col--social { display: none; }
.footer-heading {
  font-size: 14px;
  line-height: 18px;
  font-weight: 400;
  color: var(--text-tertiary);
}
.footer-list { display: flex; flex-direction: column; gap: 12px; }
.footer-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  color: var(--text-primary);
  transition: color .15s;
}
.footer-link > span:first-child { font-size: 14px; line-height: 20px; }
.footer-link-arrow {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: 0;
  transform: translate(-4px);
  transition: opacity .15s, transform .15s cubic-bezier(.23, 1, .32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .footer-link-group:has(.footer-link:hover) .footer-link { color: var(--text-tertiary); }
  .footer-link-group:has(.footer-link:hover) .footer-link:hover { color: var(--text-primary); }
  .footer-link:hover .footer-link-arrow { opacity: 1; transform: translate(0); }
}
.footer-link-group:has(.footer-link:focus-visible) .footer-link { color: var(--text-tertiary); }
.footer-link-group:has(.footer-link:focus-visible) .footer-link:focus-visible { color: var(--text-primary); }
.footer-link:focus-visible .footer-link-arrow { opacity: 1; transform: translate(0); }
.footer-bottom { display: flex; flex-direction: column; gap: 16px; }
.copyright { font-size: 12px; line-height: 18px; color: var(--text-tertiary); }

@container (min-width: 42rem) {
  .footer-frame { gap: 48px; }
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
  .footer-bottom { align-items: flex-start; }
}
@container (min-width: 64rem) {
  .footer-frame { gap: 56px; padding-top: 64px; padding-bottom: 64px; }
  .footer-top { flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 48px; }
  .footer-mark { display: inline-flex; }
  .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-col--social { display: flex; }
  .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- without JavaScript: no dead controls, no empty media boxes ----------
   The menu, the waitlist and the remove-me form all need JS; the diagram and the product
   frame are drawn by JS, so only the diagram caption stays. */
html:not(.js) .menu-toggle,
html:not(.js) .hero-cta,
html:not(.js) .leave-form { display: none; }
html:not(.js) .product-block { min-height: 0; margin-top: 0; }
html:not(.js) .landing-diagram { aspect-ratio: auto; }
html:not(.js) .diagram-canvas { display: none; }
.noscript-note { margin-top: 16px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .brand, .site-nav-link, .menu-toggle, .menu-toggle-bars > span, .menu-sheet, .menu-close, .menu-link,
  .hero-cta-button, .toc-link, .cite-link, .footer-link, .footer-link-arrow, .footer-mark,
  .leave-field, .leave-button, .prose-link { transition: none; }
  html.js [data-toc-reveal] .toc-nav li { opacity: 1; transform: none; transition: none; }
  html.js [data-toc-reveal="hidden"] .toc-nav { transition: none; }
  html.js .cite { opacity: 1; transform: none; transition: none; }
  html.js [data-lazy-reveal] { opacity: 1; transform: none; transition: none; }
}