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

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

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

:root {
  color-scheme: dark;
  --bg: #0f1013;
  --ink: #e9ebf1;
  --muted: #8a8fa0;
  --accent: #8fa6ff;
  --panel: #15171c;
  --line: #262a33;
  --faint: #1b1e24;
  --bubble: #1a1d23;
  --chipbg: #ffffff;
  --card: #1d2027;
  --cardline: #2c303a;
  --gridline: rgba(143, 166, 255, 0.025);
  --r-sm: 3px;
  --r-md: 6px;
  --r-lg: 12px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f9;
  --ink: #16181d;
  --muted: #5c6270;
  --accent: #35509e;
  --panel: #ffffff;
  --line: #e2e4ea;
  --faint: #eef0f4;
  --bubble: #eceef4;
  --chipbg: #ffffff;
  --card: #fafbfc;
  --cardline: #e0e2e8;
  --gridline: rgba(53, 80, 158, 0.03);
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
  background-color: var(--bg);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--gridline) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size: 42px 42px;
  font-family: "Public Sans", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.3s ease, color 0.3s ease;
}

button,
a {
  font: inherit;
}

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

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

.page {
  min-height: 100vh;
  background: transparent;
  color: var(--ink);
  transition: color 0.3s ease;
}

.wide-shell {
  width: min(100%, 1336px);
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
}

.narrow-shell {
  max-width: 688px;
  margin: 0 auto;
  padding: 0 24px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Brand mark */
.mark {
  display: block;
  overflow: visible;
}

.mark--nav {
  width: 27px;
  height: 27px;
}

.mark--hero {
  width: 58px;
  height: 58px;
}

.mark--beta {
  width: 40px;
  height: 40px;
}

.mark__piece {
  animation: af-seat 5s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 26px;
}

/* The links group is pushed right rather than spaced apart from the theme
   toggle, which is a sibling now: on a narrow screen the two have to be laid
   out separately, and they cannot be while the toggle sits inside the group. */
.nav__actions {
  margin-left: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
}

.brand__name {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
}

.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav__link {
  color: var(--muted);
  font-size: 13px;
  text-decoration: none;
}

.nav__link:hover,
.nav__link[aria-current="page"] {
  color: var(--ink);
}

.nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--accent);
}

.button {
  display: inline-block;
  border-radius: var(--r-md);
  background: var(--accent);
  color: var(--bg);
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
}

.button:hover {
  color: var(--bg);
  text-decoration: none;
}

.button--small {
  padding: 7px 18px;
  font-size: 13px;
}

.button--large {
  margin-top: 26px;
  padding: 12px 28px;
  font-size: 15px;
}

.theme-toggle {
  display: inline-flex;
  width: 34px;
  height: 34px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--muted);
  background: transparent;
  cursor: pointer;
}

.theme-icon {
  display: none;
}

/* Hero */
.hero {
  padding-top: clamp(44px, 7vh, 80px);
  text-align: center;
}

.hero__mark {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}

.hero h1,
.private-beta h2 {
  margin: 0;
  font-family: "Newsreader", serif;
  font-weight: 500;
}

.hero h1 {
  max-width: 100%;
  font-size: clamp(40px, 5.6vw, 68px);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

.hero h1 em {
  color: var(--accent);
  font-style: italic;
}

/*
  The headline sets on two lines: "Become" then the accent phrase. It reads
  stronger as a two-line lockup than as one wrapped line, and it gives the
  accent phrase its own weight.
*/
.hero__lead {
  display: block;
}

.hero h1 em {
  display: block;
}

.hero__copy {
  max-width: 32em;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: 18px;
  text-wrap: pretty;
}

/* Animated product pipeline */
.pipeline-section {
  margin-top: 56px;
}

.stage {
  display: grid;
  grid-template-columns: minmax(192px, 1fr) 28px minmax(200px, 1.15fr) 28px minmax(190px, 1.05fr);
  grid-template-areas: "chat c1 site c2 rank";
  gap: 14px;
  align-items: start;
}

.stage-panel {
  min-width: 0;
}

.chat-panel {
  grid-area: chat;
}

.site-panel {
  grid-area: site;
}

.rank-panel {
  grid-area: rank;
}

.eyebrow,
.section-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-transform: uppercase;
}

.panel {
  margin-top: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
}

.panel--floating {
  animation: af-float 5.5s ease-in-out infinite;
}

.panel-bar {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: var(--faint);
}

.chat-bar {
  gap: 9px;
  padding: 10px 14px;
}

.provider-chip {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--chipbg);
}

.provider-chip--main {
  width: 26px;
  height: 26px;
}

.provider-chip img {
  display: block;
}

.platform-name {
  font-size: 13px;
  font-weight: 600;
}

.modality {
  position: relative;
  display: inline-block;
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  color: var(--muted);
  opacity: 0.6;
}

.modality svg {
  position: absolute;
  inset: 0;
  width: 13px;
  height: 13px;
  opacity: 0;
  visibility: hidden;
}

.asked-from {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  /* nowrap with no shrink allowance overflowed the bar once the 3-up layout was
     made to survive down to ~840px, and the panel clipped it mid-character
     ("7:42an"). Let it ellipsise instead: a shortened label reads as deliberate,
     a half-drawn glyph reads as broken. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-body {
  display: flex;
  min-height: 176px;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

.question-bubble,
.reply {
  max-width: 92%;
  padding: 9px 13px;
  font-size: 14px;
  line-height: 1.45;
}

.question-bubble {
  min-height: 60px;
  align-self: flex-end;
  border: 1px solid var(--line);
  border-radius: 12px 12px 3px 12px;
  background: var(--bubble);
}

.typing-cursor {
  display: inline-block;
  width: 4px;
  height: 0.7em;
  margin-left: 3px;
  border-radius: 1px;
  background: var(--accent);
  vertical-align: -0.02em;
  opacity: 0;
  visibility: hidden;
  animation: af-blink 1.1s step-end infinite;
}

.response-slot {
  display: grid;
  min-height: 44px;
  align-items: start;
}

.thinking,
.reply {
  grid-area: 1 / 1;
  justify-self: start;
  opacity: 0;
  visibility: hidden;
}

.thinking {
  display: flex;
  gap: 4px;
  padding: 10px 13px;
}

.thinking span {
  width: 6px;
  height: 6px;
  border-radius: var(--r-sm);
  background: var(--muted);
  animation: af-think 1s ease-in-out infinite;
}

.thinking span:nth-child(2) {
  animation-delay: 0.15s;
}

.thinking span:nth-child(3) {
  animation-delay: 0.3s;
}

.reply {
  border: 1px solid var(--line);
  border-radius: 12px 12px 12px 3px;
  background: var(--faint);
}

.reply-stack {
  display: grid;
}

.reply-normal,
.final-copy {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
}

.final-copy strong {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 10px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--bg);
  font-size: 13px;
  font-weight: 600;
}

.reasked {
  margin-top: -6px;
  padding-left: 4px;
  color: var(--muted);
  font-size: 11px;
  opacity: 0;
  visibility: hidden;
}

.sampled-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-top: 1px solid var(--line);
}

.sampled-row > span:first-child {
  color: var(--muted);
  font-size: 11px;
}

@property --stream-peak {
  syntax: "<number>";
  inherits: true;
  initial-value: 0.35;
}

.connector {
  position: relative;
  align-self: center;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  --t-from: 0 0;
  --t-to: 20px 0;
  transition: --stream-peak 0.55s ease;
}

.connector--first {
  grid-area: c1;
}

.connector--second {
  grid-area: c2;
}

.connector span {
  position: absolute;
  top: -1px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: var(--r-sm);
  background: var(--accent);
  pointer-events: none;
  animation: af-stream 2.3s linear infinite;
}

.connector span:nth-child(1) {
  animation-delay: -0.4s;
}

.connector span:nth-child(2) {
  animation-duration: 3.1s;
  animation-delay: -1.7s;
  animation-direction: reverse;
}

.connector span:nth-child(3) {
  animation-duration: 2.7s;
  animation-delay: -2.9s;
}

.connector span:nth-child(4) {
  animation-duration: 3.7s;
  animation-delay: -0.9s;
  animation-direction: reverse;
}

.connector--second span:nth-child(1) {
  animation-delay: -1.05s;
}

.connector--second span:nth-child(2) {
  animation-delay: -2.35s;
}

.connector--second span:nth-child(3) {
  animation-delay: -0.15s;
}

.connector--second span:nth-child(4) {
  animation-delay: -3.2s;
}

.site-bar {
  gap: 8px;
  padding: 9px 14px;
}

.window-block {
  width: 8px;
  height: 8px;
  border-radius: var(--r-sm);
  background: var(--line);
}

.site-url {
  margin-left: 8px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-body {
  min-height: 168px;
  padding: 16px 18px;
}

.original-line,
.refined-line {
  font-family: "Newsreader", serif;
  font-size: 18px;
  line-height: 1.35;
}

.original-line {
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  transition: color 0.4s ease;
}

.refined-line {
  margin-top: 8px;
  color: var(--accent);
  opacity: 0;
  visibility: hidden;
}

.skeleton-lines {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 14px;
}

.skeleton-lines span {
  width: 82%;
  height: 7px;
  border-radius: var(--r-sm);
  background: var(--faint);
}

.skeleton-lines span:last-child {
  width: 64%;
}

.media-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  color: var(--muted);
  transition: border-color 0.5s ease, color 0.5s ease;
}

.media-row svg {
  flex: 0 0 auto;
}

.media-row span {
  font-size: 13px;
}

.evidence-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}

.evidence-block {
  padding: 4px 0 4px 12px;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-size: 13px;
  opacity: 0;
  visibility: hidden;
}

.suggestion-space {
  min-height: 20px;
  margin-top: 10px;
}

.suggestion {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  opacity: 0;
  visibility: hidden;
}

.suggestion > span {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.suggestion strong {
  padding: 4px 12px;
  border: 1px dashed var(--accent);
  border-radius: var(--r-sm);
  color: var(--accent);
  font-size: 13px;
  font-weight: 400;
}

/* The rank stage is the third of three, and it was the only one whose contents
   sat loose on the page while the other two were framed. Inside the shared
   panel now, so the sequence reads as three of the same kind of thing. */
.rank-panel .panel {
  padding: 16px 18px 0;
}

.rank-list {
  position: relative;
  height: 294px;
}

.rank-row {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  height: 36px;
  align-items: center;
  gap: 10px;
  padding: 0 12px;
  border-radius: var(--r-md);
  opacity: 0;
  visibility: hidden;
}

.ghost-row {
  border: 1px dashed var(--cardline);
  transition: opacity 0.5s ease;
}

.ghost-row span {
  color: var(--muted);
  font-size: 12px;
  opacity: 0.6;
}

.product-row {
  border: 1px solid var(--cardline);
  background: var(--card);
  font-size: 14px;
  transition: transform 0.7s cubic-bezier(0.35, 0, 0.15, 1), opacity 0.4s ease;
}

.product-row > span:last-of-type {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.competitor-rank {
  min-width: 20px;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.competitor-rank:empty,
.you-rank:empty {
  display: none;
  min-width: 0;
}

.you-row {
  border: 1px solid var(--cardline);
  background: var(--card);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.9s cubic-bezier(0.35, 0, 0.15, 1), opacity 0.4s ease, border-color 0.5s ease;
}

.you-rank {
  min-width: 30px;
  flex: 0 0 auto;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  transition: color 0.4s ease;
}

.rank-mark {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  opacity: 0;
  overflow: visible;
  transition: opacity 0.5s ease;
}

.your-product {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.you-tag {
  overflow: hidden;
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
  text-overflow: ellipsis;
  transition: color 0.5s ease;
}

.phase-label {
  min-height: 20px;
  margin: 0 -18px;
  padding: 11px 18px;
  border-top: 1px solid var(--line);
  background: var(--faint);
  color: var(--accent);
  font-size: 13px;
}

/* Tied to the sequence it describes with a hairline. Centred small grey text
   with nothing above it reads as though it belongs to no section at all, which
   is most obvious on a phone where it lands alone under a tall stack. */
.disclaimer {
  max-width: 52ch;
  margin: 32px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  text-wrap: pretty;
}

/* Supporting sections */
.how-it-works {
  margin-top: clamp(96px, 14vw, 150px);
}

.section-label {
  margin: 0;
  font-size: 13px;
  text-align: center;
}

.feature-grid {
  position: relative;
  left: 50%;
  display: grid;
  width: min(1000px, calc(100vw - 48px));
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-top: 32px;
  transform: translateX(-50%);
}

.feature-card {
  padding: 18px;
  border: 1px solid var(--cardline);
  border-radius: var(--r-lg);
  background: var(--card);
  transition: transform 0.25s ease, border-color 0.25s ease;
}

.feature-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

.feature-card h3 {
  margin: 10px 0 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
}

.feature-card p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.glyph {
  display: block;
  overflow: visible;
}

.glyph--questions rect {
  animation: af-float 3s ease-in-out infinite;
}

.glyph--questions rect:nth-child(2) {
  animation-delay: 0.4s;
}

.glyph--questions rect:nth-child(3) {
  animation-delay: 0.8s;
}

.glyph--models g {
  transform-origin: 12px 12px;
  animation: af-spin 4.5s linear infinite;
}

.glyph--evidence rect {
  animation: af-drop 2.8s ease-in-out infinite;
}

.glyph--evidence rect:nth-child(2) {
  animation-delay: 0.5s;
}

.glyph--evidence rect:nth-child(3) {
  animation-delay: 1s;
}

.glyph--gaps rect:nth-child(3) {
  animation: af-think 1.6s ease-in-out infinite;
}

.glyph--experiments rect {
  animation: af-think 2.4s ease-in-out infinite;
}

.glyph--experiments rect:nth-child(2) {
  animation-delay: 0.4s;
}

.glyph--experiments rect:nth-child(3) {
  animation-delay: 0.8s;
}

.glyph--fit rect:last-child {
  animation: af-seat 3.5s cubic-bezier(0.3, 0, 0.2, 1) infinite;
}

.version-note {
  margin: 28px 0 0;
  color: var(--muted);
  font-size: 15px;
  text-align: center;
}

/* Methodology */
.methodology {
  padding-top: clamp(68px, 9vw, 120px);
}

.method-kicker,
.method-index {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.6;
  text-transform: uppercase;
}

.method-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, 0.75fr);
  gap: clamp(40px, 7vw, 112px);
  align-items: end;
  padding-bottom: clamp(72px, 10vw, 128px);
  border-bottom: 1px solid var(--line);
}

.method-hero h1,
.method-section h2 {
  font-family: "Newsreader", serif;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.method-hero h1 {
  max-width: 760px;
  margin: 18px 0 0;
  font-size: clamp(43px, 6vw, 76px);
  line-height: 1.02;
}

.method-hero__copy {
  padding-left: 22px;
  border-left: 2px solid var(--accent);
}

.method-hero__copy p {
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  text-wrap: pretty;
}

.method-hero__copy p + p {
  margin-top: 18px;
  color: var(--ink);
}

.method-section {
  display: grid;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(36px, 7vw, 112px);
  padding: clamp(68px, 9vw, 112px) 0;
  border-bottom: 1px solid var(--line);
}

.method-section h2 {
  margin: 14px 0 0;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.08;
}

.method-prose {
  max-width: 720px;
}

.method-prose p {
  margin: 0;
  color: var(--muted);
  line-height: 1.75;
  text-wrap: pretty;
}

.method-prose p:first-child {
  color: var(--ink);
}

.method-prose p + p {
  margin-top: 24px;
}

.question-table {
  margin: 32px 0;
  overflow-x: auto;
  border: 1px solid var(--cardline);
  border-radius: var(--r-md);
  background: var(--card);
}

.question-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.55;
  text-align: left;
}

.question-table th {
  padding: 13px 16px;
  color: var(--muted);
  background: var(--faint);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.question-table th:first-child {
  width: 42%;
}

.question-table th:nth-child(2) {
  width: 20%;
}

/* The base widths assume the two-column comparison on the methodology page.
   A four-column table (the subprocessor list) needs them released, or the
   first column takes 42% for a single provider name. */
.question-table--wide th:first-child,
.question-table--wide th:nth-child(2) {
  width: auto;
}

.question-table--wide th:first-child {
  width: 18%;
}

.question-table td {
  padding: 18px 16px;
  border-top: 1px solid var(--cardline);
  color: var(--muted);
  vertical-align: top;
}

.question-table td:first-child {
  color: var(--ink);
}

.question-table strong {
  color: var(--accent);
  font-weight: 600;
}

.fit-map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr);
  align-items: stretch;
  margin: 32px 0;
}

.fit-map__panel,
.surface-card {
  padding: 24px;
  border: 1px solid var(--cardline);
  border-radius: var(--r-md);
  background: var(--card);
}

.fit-map__panel--observed,
.surface-card--search {
  background: var(--panel);
}

.fit-map__panel h3,
.surface-card h3 {
  margin: 12px 0 0;
  font-family: "Newsreader", serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.12;
}

.fit-map__panel--observed h3,
.surface-card--search h3 {
  color: var(--accent);
}

.method-prose .fit-map__panel > p:last-child,
.method-prose .surface-card p {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.fit-map__comparison {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}

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

.method-section--last {
  border-bottom: 0;
  padding-bottom: 0;
}

.private-beta {
  margin-top: clamp(72px, 10vw, 112px);
  text-align: center;
}

.private-beta__mark {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.private-beta h2 {
  font-size: clamp(28px, 4vw, 38px);
  letter-spacing: -0.01em;
}

.private-beta p {
  max-width: 28em;
  margin: 16px auto 0;
  color: var(--muted);
  text-wrap: pretty;
}

.footer {
  margin-top: clamp(72px, 10vw, 112px);
  padding-bottom: 72px;
}

.footer hr {
  margin: 0 0 20px;
  border: 0;
  border-top: 1px solid var(--line);
}

.footer__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* The attribution shares the row with the Anphase mark and sits hard right,
   so the two ownership statements read as one line rather than a stack. */
.footer__inner .attribution {
  margin-left: auto;
  text-align: right;
}

.legal-links {
  margin-top: 14px;
  text-align: center;
}

.legal-links a {
  white-space: nowrap;
}

@media (max-width: 560px) {
  /* Side by side stops working once the attribution wraps, so both statements
     centre and stack rather than leaving a ragged half-row. */
  .footer__inner {
    justify-content: center;
    text-align: center;
  }

  .footer__inner .attribution {
    margin-left: 0;
    text-align: center;
    flex-basis: 100%;
  }
}

.footer p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.footer a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  text-decoration: none;
}

/* The creator attribution is prose, so its link keeps a visible underline. */
.footer .attribution a {
  display: inline;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.anphase-logo {
  height: 18px;
  /* The width/height attributes are the *displayed* 14x18, not the file's
     intrinsic 62x80: for a replaced element `width: auto` resolves to the
     attribute, so the intrinsic width squashed the mark against the 18px
     height. 14:18 still matches the file's ratio, so the box is reserved
     without distortion. */
  width: auto;
}

.anphase-logo--light {
  display: none;
}

:root[data-theme="light"] .anphase-logo--light {
  display: block;
}

:root[data-theme="light"] .anphase-logo--dark {
  display: none;
}

/* Motion vocabulary */
@keyframes af-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

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

@keyframes af-think {
  0%, 100% { opacity: 0.25; }
  50% { opacity: 1; }
}

/*
  Stream particles use the standalone `translate` property so the axis is data
  (`--t-from` / `--t-to`), not a second keyframe. Opacity is 0 at both ends:
  the loop reset is invisible even though the animation never stops. Peak
  opacity is `--stream-peak`, transitioned when `routing` changes, so intensity
  eases and position is never reset from JS.
*/
@keyframes af-stream {
  0% { translate: var(--t-from); opacity: 0; }
  18% { opacity: var(--stream-peak); }
  82% { opacity: var(--stream-peak); }
  100% { translate: var(--t-to); opacity: 0; }
}

@keyframes af-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes af-spin {
  to { transform: rotate(360deg); }
}

@keyframes af-drop {
  0% { transform: translateY(-8px); opacity: 0; }
  40% { transform: translateY(0); opacity: 1; }
  85% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(0); opacity: 0; }
}

@keyframes af-seat {
  0% { transform: translateX(11px); opacity: 0; }
  38% { transform: translateX(-0.6px); opacity: 1; }
  50%, 100% { transform: translateX(0); opacity: 1; }
}

/*
  Two tiers below the 3-up desktop layout, so the panels don't jump straight
  from a full row to a single column. Between 839px and 620px there's still
  room to pair two panels per row; below that everything stacks, and the
  horizontal connectors (which only make sense pointing at a neighbour in the
  same row) become a single vertical line running down the stack instead.
*/
@media (max-width: 839px) {
  .stage {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "chat site"
      "rank rank";
    gap: 16px;
  }

  .connector {
    display: none;
  }

  .method-hero,
  .method-section {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .method-hero {
    align-items: start;
  }

  .method-hero__copy {
    max-width: 700px;
  }
}

@media (max-width: 619px) {
  .stage {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "chat" "c1" "site" "c2" "rank";
    max-width: 420px;
    margin-right: auto;
    margin-left: auto;
    gap: 0;
  }

  .connector {
    display: block;
    justify-self: center;
    width: 2px;
    height: 32px;
    background: repeating-linear-gradient(180deg, var(--line) 0 6px, transparent 6px 12px);
    --t-to: 0 24px;
  }

  .connector span {
    top: 0;
    left: -1px;
  }

  .fit-map,
  .surface-grid {
    grid-template-columns: 1fr;
  }

  .fit-map {
    gap: 14px;
  }

  .fit-map__comparison {
    min-height: 24px;
  }

  .question-table {
    overflow: visible;
    border: 0;
    background: transparent;
  }

  .question-table table,
  .question-table tbody,
  .question-table tr,
  .question-table td {
    display: block;
    width: 100%;
  }

  .question-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  .question-table tbody {
    display: grid;
    gap: 12px;
  }

  .question-table tr {
    padding: 20px;
    border: 1px solid var(--cardline);
    border-radius: var(--r-md);
    background: var(--card);
  }

  .question-table td {
    padding: 0;
    border: 0;
  }

  .question-table td + td {
    margin-top: 16px;
  }

  .question-table td::before {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    content: attr(data-label);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
}

@media (max-width: 560px) {
  .wide-shell {
    padding-right: 20px;
    padding-left: 20px;
  }

  .narrow-shell {
    padding-right: 20px;
    padding-left: 20px;
  }

  /* Five items in one row do not fit a phone: the wordmark ran into the first
     link and "Join the fit" broke across two lines inside its own button. Two
     rows, with the brand and the theme toggle above the links and the call to
     action, which needs no disclosure widget and no JavaScript. */
  .nav {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    row-gap: 16px;
    column-gap: 12px;
    padding-top: 20px;
  }

  .brand {
    grid-column: 1;
    grid-row: 1;
  }

  .theme-toggle {
    grid-column: 2;
    grid-row: 1;
  }

  .nav__actions {
    grid-column: 1 / -1;
    grid-row: 2;
    gap: 18px;
    margin-left: 0;
  }

  .nav__actions .button--small {
    margin-left: auto;
    padding-right: 16px;
    padding-left: 16px;
    white-space: nowrap;
  }

  .nav__link {
    font-size: 13px;
    white-space: nowrap;
  }

  .hero h1 {
    font-size: clamp(40px, 12vw, 58px);
  }

  .hero__copy {
    font-size: 17px;
  }

  .sampled-row {
    gap: 5px;
    padding-right: 10px;
    padding-left: 10px;
  }

  .asked-from {
    max-width: 112px;
  }

  .feature-grid {
    width: calc(100vw - 40px);
    grid-template-columns: 1fr;
  }

  .methodology {
    padding-top: 54px;
  }

  .method-hero {
    padding-bottom: 68px;
  }

  .method-hero h1 {
    font-size: clamp(40px, 13vw, 58px);
  }

  .method-section {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .fit-map__panel,
  .surface-card {
    padding: 20px;
  }
}

/* The wordmark used to be hidden here because it collided with the links.
   It has its own row now, so it fits at any width this site supports. */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

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

  .feature-card:hover,
  .button:hover {
    transform: none;
  }

  /*
    The global `animation: none` would freeze particles wherever they happened
    to be. Pin them to an even dotted path instead, so reduced motion still
    reads as a connector rather than a stalled mid-flight block.
  */
  .connector {
    --rest-step: 7px;
  }

  .connector span {
    opacity: 0.4;
    translate: var(--rest, 0px) 0;
  }

  .connector span:nth-child(1) { --rest: 0px; }
  .connector span:nth-child(2) { --rest: var(--rest-step); }
  .connector span:nth-child(3) { --rest: calc(var(--rest-step) * 2); }
  .connector span:nth-child(4) { --rest: calc(var(--rest-step) * 3); }
}

@media (prefers-reduced-motion: reduce) and (max-width: 619px) {
  .connector {
    --rest-step: 8px;
  }

  .connector span {
    translate: 0 var(--rest, 0px);
  }
}

/* --- Notes -------------------------------------------------------------
   A reading layout rather than the methodology page's two-column reference
   layout. Headings belong above the text they introduce: put them in a side
   column and the eye has to travel sideways to find out what it is reading,
   which is fine for a spec and wrong for an essay. Measure is capped near 68
   characters because longer lines make the return sweep unreliable. */

.article {
  max-width: 43rem;
  margin: 0 auto;
  padding: 0 24px;
}

.article__header {
  padding: 56px 0 28px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 40px;
}

.article__kicker {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 18px;
}

.article__kicker a { color: inherit; }

.article h1 {
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin: 0 0 20px;
  text-wrap: balance;
}

.article__standfirst {
  font-size: 19px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 20px;
}

.article__meta {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

.article__body {
  font-size: 18px;
  line-height: 1.72;
  color: var(--ink);
}

.article__body > p { margin: 0 0 1.35em; }

.article__body h2 {
  font-family: Newsreader, Georgia, serif;
  font-size: 26px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 2.2em 0 0.7em;
  text-wrap: balance;
}

.article__body ul {
  margin: 0 0 1.35em;
  padding-left: 1.2em;
}

.article__body li {
  margin-bottom: 0.5em;
  padding-left: 0.2em;
}

.article__body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: var(--faint);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 0.1em 0.35em;
  overflow-wrap: anywhere;
}

.article__body strong { color: var(--ink); font-weight: 600; }

.article__foot {
  margin: 48px 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--muted);
}

/* Index */
.article-list { list-style: none; padding: 0; margin: 0; }

.article-list li {
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}

.article-list li:last-child { border-bottom: 0; }

.article-list h2 {
  font-family: Newsreader, Georgia, serif;
  font-size: 25px;
  line-height: 1.28;
  margin: 0 0 10px;
  text-wrap: balance;
}

.article-list h2 a { color: var(--ink); text-decoration: none; }
.article-list h2 a:hover { color: var(--accent); }

.article-list p { margin: 0 0 10px; color: var(--muted); line-height: 1.62; }

.article-list time { font-size: 13px; color: var(--muted); }

@media (max-width: 600px) {
  .article { padding: 0 20px; }
  .article__header { padding-top: 36px; }
  .article__body { font-size: 17px; }
  .article__body h2 { font-size: 23px; }
}

/* --- Article figures ---------------------------------------------------
   Charts are inline SVG and comparisons are real tables, never images of
   either. Text inside a raster image cannot be indexed, quoted by a model or
   read by a screen reader, which would be an odd thing to publish on a site
   arguing that machine-readable evidence is what gets you into answers. Every
   figure repeats its numbers in the caption so nothing exists only in the
   graphic. */

.figure {
  margin: 2em 0;
  padding: 22px 22px 18px;
  background: var(--card);
  border: 1px solid var(--cardline);
  border-radius: var(--r-md);
}

.figure svg { display: block; width: 100%; height: auto; }

.figure figcaption {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--cardline);
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.figure figcaption strong { color: var(--ink); font-weight: 600; }

.figure__scroll { overflow-x: auto; }

.figure table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  text-align: left;
}

.figure th {
  padding: 0 14px 10px 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--cardline);
  vertical-align: bottom;
}

.figure td {
  padding: 13px 14px 13px 0;
  border-top: 1px solid var(--cardline);
  color: var(--muted);
  vertical-align: top;
}

.figure tbody tr:first-child td { border-top: 0; }
.figure td:first-child { color: var(--ink); font-weight: 500; padding-right: 20px; }
.figure td:last-child, .figure th:last-child { padding-right: 0; }

/* SVG text has to be styled here: currentColor does not reach it reliably
   across themes when the chart is authored as markup. */
.chart-label { fill: var(--muted); font-size: 13px; font-family: inherit; }
.chart-value { fill: var(--ink); font-size: 13px; font-weight: 600; font-family: inherit; }
.chart-track { fill: var(--faint); stroke: var(--cardline); }
.chart-fill { fill: var(--accent); }
.chart-rule { stroke: var(--cardline); stroke-width: 1; }

@media (max-width: 600px) {
  .figure { padding: 16px 16px 14px; }
  .figure table { font-size: 14px; }
}