/* grounder: schematic on engineering paper. Shared by the site, OAuth screens and the private viewer. */

/* Overpass and Overpass Mono, Latin plus arrows; see assets/fonts/README.md. */
@font-face { font-family: "Overpass"; src: url('/assets/fonts/overpass-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass"; src: url('/assets/fonts/overpass-latin-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass"; src: url('/assets/fonts/overpass-latin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass"; src: url('/assets/fonts/overpass-latin-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass Mono"; src: url('/assets/fonts/overpass-mono-latin-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
/* Size-adjusted fallbacks: same line length and line box as Overpass, so the swap does not shift layout. */
@font-face { font-family: "Overpass Fallback"; src: local('Arial'); font-weight: 400 500; font-style: normal; size-adjust: 100.72%; ascent-override: 87.67%; descent-override: 38.03%; line-gap-override: 0%; }
@font-face { font-family: "Overpass Fallback"; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600 700; font-style: normal; size-adjust: 97.35%; ascent-override: 90.71%; descent-override: 39.34%; line-gap-override: 0%; }
@font-face { font-family: "Overpass Mono Fallback"; src: local('Menlo Regular'), local('Menlo-Regular'), local('Courier New'); font-weight: 400; font-style: normal; size-adjust: 102.65%; ascent-override: 86.02%; descent-override: 37.31%; line-gap-override: 0%; }

:root {
  color-scheme: light;

  --paper:       #F7F8F6; /* page; current theme-color, kept */
  --paper-2:     #EEF2EB; /* code blocks, inputs, tab track */
  --grid-minor:  #E3E9DF; /* engineering grid, hero panel only */
  --grid-major:  #D3DCCD;
  --graphite:    #262B29; /* text and strokes, 13.5:1 on paper */
  --pencil:      #59615C; /* secondary text, input borders, 6.0:1 */
  --rule:        rgb(38 43 41 / 0.14); /* hairlines */
  /* The site's existing green, copied exactly. Measured: 2.13:1 on paper, 2.00:1 on paper-2;
     paper on it 2.13:1, graphite on it 6.35:1. It fails 4.5:1 for text and 3:1 for graphics,
     so green text and green graphics use --earth-ink, and labels on green fills use graphite. */
  --earth:       #83b7a3;
  /* 85% black left graphite labels at 4.2:1 on hover; 88% keeps them at 4.5:1. */
  --earth-hover: color-mix(in oklab, var(--earth) 88%, black);
  /* --earth's OKLCH hue and chroma, lightness 0.737 stepped down to 0.527: 4.55:1 on paper-2, 4.84:1 on paper. */
  --earth-ink:   #447765;
  --on-earth:    var(--graphite); /* paper on --earth is 2.13:1 */
  /* The account page's Preferred routing (Harlan, 2026-10-13: "preferred should have a pastel-ish blue"): --earth's OKLCH
     lightness 0.737 and chroma at hue 245, so the pair reads as one family. Like --earth it fails 3:1 for graphics
     (2.17:1 on paper) and only fills, under graphite labels (6.23:1); its graphics use --sky-ink, at --earth-ink's
     lightness 0.527: 4.97:1 on paper, 4.67:1 on paper-2. */
  --sky:         #89afcf;
  --sky-ink:     #4c6f8d;
  --ochre:       #8A5A00; /* timeouts, numbers in code, 5.2:1 on paper-2 */
  --danger:      #B42318; /* errors only */

  --sans: "Overpass", "Overpass Fallback", Arial, sans-serif;
  --mono: "Overpass Mono", "Overpass Mono Fallback", Menlo, Consolas, monospace;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 72px;
  --space-9: 112px;

  --radius-badge: 4px;
  --radius-control: 8px;
  --radius-panel: 12px;
  --panel-shadow: 0 1px 2px rgb(38 43 41 / .06), 0 12px 32px -16px rgb(38 43 41 / .22);
  --stroke: 1.5px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-ui: 160ms;
  --t-switch: 150ms;
  --t-fade: 200ms;
  --t-wire: 600ms;

  --gutter: 24px;
  --nav-height: 64px;
}

::selection { background: color-mix(in srgb, var(--earth) 18%, transparent); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--paper); color: var(--graphite); font: 400 18px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
main { flex: 1; }
h1, h2, h3, h4 { margin: 0; text-wrap: balance; }
h1 { font-size: 72px; font-weight: 700; line-height: 1; letter-spacing: -0.025em; }
h2 { font-size: 36px; font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; }
h3 { font-size: 21px; font-weight: 600; line-height: 1.25; }
p { margin: 0; max-width: 64ch; text-wrap: pretty; }
p + p { margin-top: var(--space-4); }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
code, kbd, pre { font-family: var(--mono); }
.num, time { font-variant-numeric: tabular-nums; }

a { color: var(--earth-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--graphite); outline-offset: 2px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 30; padding: var(--space-2) var(--space-3); background: var(--paper); color: var(--graphite); font-size: 14px; font-weight: 600; }
.skip-link:focus-visible { top: var(--space-3); }

.wrap { width: min(100% - 2 * var(--gutter), 1120px); max-width: none; margin-inline: auto; }

/* Navigation */
.nav { position: sticky; top: 0; z-index: 20; height: var(--nav-height); background: color-mix(in srgb, var(--paper) 85%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color var(--t-ui) var(--ease); }
.nav.is-scrolled { border-bottom-color: var(--rule); }
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); }
.nav-links { display: flex; align-items: center; gap: var(--space-5); }
.nav-links > a:not(.btn) { color: var(--graphite); font-size: 14px; font-weight: 500; line-height: 1.45; text-decoration: none; padding-block: var(--space-3); }
.nav-links > a:not(.btn):hover, .nav-links > a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--earth-ink); text-decoration-thickness: 2px; }

/* Wordmark: mark at cap height, 8px gap, one color */
.wordmark { display: inline-flex; align-items: baseline; gap: var(--space-2); color: var(--graphite); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; line-height: 1; text-decoration: none; white-space: nowrap; }
.wordmark:hover { text-decoration: none; }
/* The mark's viewBox is cropped to its artwork, so a 0.7em box sits on the baseline at Overpass's cap height. */
.mark { flex: none; width: calc(0.7em * 19.5 / 12.75); height: 0.7em; overflow: visible; }
.mark-node { fill: var(--graphite); }
/* The logo's bars are the landing page's green exactly (Harlan, 2026-10-09); a logotype, so the 3:1 graphics rule does not bind it. */
.mark-bar { fill: var(--earth); }

/* Buttons and controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 44px; padding: 0 var(--space-5); border: 1px solid transparent; border-radius: var(--radius-control); font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--t-ui) var(--ease), border-color var(--t-ui) var(--ease); }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--earth); color: var(--on-earth); }
.btn-primary:hover { background: var(--earth-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: transparent; border-color: var(--pencil); color: var(--graphite); }
.btn-secondary:hover { border-color: var(--graphite); }
.btn[disabled] { cursor: progress; }
.text-button { min-height: 44px; padding: 0; border: 0; background: none; color: var(--pencil); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; text-decoration: underline; text-underline-offset: 3px; }
.text-button:hover { color: var(--graphite); }

.input, .select, .textarea { width: 100%; min-height: 48px; padding: 0 var(--space-4); border: 1px solid var(--pencil); border-radius: var(--radius-control); background: var(--paper); color: var(--graphite); font: 400 17px/1.45 var(--sans); }
.textarea { min-height: 120px; padding: var(--space-3) var(--space-4); resize: vertical; }
.select { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23262B29' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; text-overflow: ellipsis; }
.input::placeholder, .textarea::placeholder { color: var(--pencil); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }

.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 1px 6px; border: 1px solid var(--pencil); border-radius: var(--radius-badge); color: var(--pencil); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; line-height: 1.3; white-space: nowrap; }
.badge-licensed { border-color: var(--earth-ink); color: var(--earth-ink); }
.ground-glyph { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: square; }
.method { display: inline-block; padding: 1px 6px; border-radius: var(--radius-badge); background: var(--paper-2); color: var(--graphite); font: 400 12px/1.5 var(--mono); }

/* Sections */
.section { padding-block: var(--space-9); border-top: 1px solid var(--rule); }
[id] { scroll-margin-top: 80px; }
.section-head { display: grid; gap: var(--space-4); margin-bottom: var(--space-7); }
.section-head p { color: var(--pencil); }

/* Hero */
.hero { padding-block: var(--space-8) var(--space-9); }
.hero-grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.hero-copy { grid-column: 1 / span 5; position: relative; z-index: 1; }
.hero-copy .lede { margin-top: var(--space-5); color: var(--pencil); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.hero-note { margin-top: var(--space-4); color: var(--pencil); font-size: 14px; line-height: 1.45; }
.hero-wire { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hero-wire path { fill: none; stroke: var(--pencil); stroke-width: var(--stroke); stroke-linejoin: miter; stroke-linecap: square; opacity: 0.4; }
/* The wire is grey like an unlit leg; a search's route lights it, from the headline on into the router (landing.js `play`). */
.hero-wire .wire-lit { stroke: var(--earth-ink); opacity: 0; }
.hero-wire .wire-lit.is-flowing, .hero-wire.is-lit .wire-lit { opacity: 1; }
.hero-wire .wire-end { fill: var(--paper); stroke: var(--earth-ink); stroke-width: var(--stroke); }
/* The landing page's last run of the way back (Harlan, 2026-10-16: "have a line that loops all the way back, still 90 degree angles only, to the your ai"):
   from the gate's exit on to an arrow at the end of the headline, grey like the wire until the results come back through the gate. */
.hero-wire .wire-back-arrow { fill: var(--pencil); stroke: none; opacity: 0.4; }
.hero-wire .wire-back-lit { stroke: var(--earth-ink); opacity: 0; }
.hero-wire .wire-back-lit.is-flowing, [data-hero]:has([data-schematic][data-returned="true"]) .hero-wire .wire-back-lit { opacity: 1; }
[data-hero]:has([data-schematic][data-returned="true"]) .hero-wire .wire-back-arrow, .hero-wire .wire-back-arrow.is-flowing { fill: var(--earth-ink); opacity: 1; }
[data-schematic] [data-gate="exit"] .arrow { display: none; }

/* Schematic */
.schematic { grid-column: 6 / span 7; position: relative; margin: 0; padding: var(--space-6) var(--space-5) var(--space-3); }
.schematic::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid-minor) 1px, transparent 1px), linear-gradient(90deg, var(--grid-minor) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
  mask-image: radial-gradient(closest-side, #000 55%, transparent); }
.schematic-query { display: flex; gap: var(--space-2); align-items: baseline; min-height: var(--query-h, 2.9em); color: var(--graphite); font-size: 15px; font-weight: 600; line-height: 1.45; }
.schematic-query .label { flex: none; color: var(--pencil); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
/* A query that is one long URL breaks anywhere rather than pushing a phone's page sideways. */
.schematic-query [data-query] { min-width: 0; overflow-wrap: anywhere; }
.schematic-stage { position: relative; }
.schematic-art { position: relative; width: 100%; height: auto; overflow: visible; }
.sch-line { fill: none; stroke: var(--graphite); stroke-width: var(--stroke); stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
/* The wire in, the router's pins and the bus are grey like an unlit leg (Harlan, 2026-10-15: "the black vertical line should be grey, unless lit up"); the route lights them. One path, so the grey does not double where they meet. */
.sch-bus { fill: none; stroke: var(--pencil); stroke-width: var(--stroke); stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; opacity: 0.4; }
.sch-router { fill: var(--paper); stroke: var(--graphite); stroke-width: var(--stroke); stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.sch-routed { fill: none; stroke: var(--earth-ink); stroke-width: var(--stroke); stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--t-switch) var(--ease); }
.leg { color: var(--pencil); opacity: 0.4; transition: opacity var(--t-switch) var(--ease) var(--delay, 0ms), color var(--t-switch) var(--ease) var(--delay, 0ms); }
.leg .leg-wire, .leg .switch-lever { fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: square; vector-effect: non-scaling-stroke; }
.leg .contact { fill: var(--paper); stroke: currentColor; stroke-width: var(--stroke); vector-effect: non-scaling-stroke; }
.leg .arrow { fill: currentColor; }
/* Open by default; a lever closes only where the query was routed. */
.switch-lever { transform-box: view-box; transform-origin: 0 0; transform: rotate(-24deg); transition: transform var(--t-switch) var(--ease) var(--delay, 0ms); }
.sch-routed { fill: none; stroke: var(--earth-ink); stroke-width: var(--stroke); stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; opacity: 0; transition: opacity var(--t-switch) var(--ease) var(--delay, 0ms); }
.junction { fill: var(--earth-ink); opacity: 0; transition: opacity var(--t-switch) var(--ease) var(--delay, 0ms); }
.leg-labels li { position: absolute; left: var(--label-x, 63.125%); top: var(--y); display: flex; align-items: center; gap: var(--space-2); transform: translateY(-50%); color: var(--graphite); opacity: 0.72; transition: opacity var(--t-switch) var(--ease) var(--delay, 0ms); }
.leg-labels .plogo { height: calc(16px * var(--optical, 1)); }
.leg-status { display: none; color: var(--ochre); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }

[data-routed~="ozone"] [data-leg="ozone"],
[data-routed~="tavily"] [data-leg="tavily"],
[data-routed~="exa"] [data-leg="exa"],
[data-routed~="brave"] [data-leg="brave"],
[data-routed~="perplexity"] [data-leg="perplexity"],
[data-routed~="you"] [data-leg="you"],
[data-routed~="firecrawl"] [data-leg="firecrawl"],
[data-routed~="octen"] [data-leg="octen"],
[data-routed~="parallel"] [data-leg="parallel"],
[data-routed~="valyu"] [data-leg="valyu"] { color: var(--earth-ink); opacity: 1; }
[data-routed~="ozone"] [data-leg="ozone"] .switch-lever,
[data-routed~="tavily"] [data-leg="tavily"] .switch-lever,
[data-routed~="exa"] [data-leg="exa"] .switch-lever,
[data-routed~="brave"] [data-leg="brave"] .switch-lever,
[data-routed~="perplexity"] [data-leg="perplexity"] .switch-lever,
[data-routed~="you"] [data-leg="you"] .switch-lever,
[data-routed~="firecrawl"] [data-leg="firecrawl"] .switch-lever,
[data-routed~="octen"] [data-leg="octen"] .switch-lever,
[data-routed~="parallel"] [data-leg="parallel"] .switch-lever,
[data-routed~="valyu"] [data-leg="valyu"] .switch-lever { transform: rotate(0deg); }
[data-routed~="ozone"] [data-route="ozone"],
[data-routed~="tavily"] [data-route="tavily"],
[data-routed~="exa"] [data-route="exa"],
[data-routed~="brave"] [data-route="brave"],
[data-routed~="perplexity"] [data-route="perplexity"],
[data-routed~="you"] [data-route="you"],
[data-routed~="firecrawl"] [data-route="firecrawl"],
[data-routed~="octen"] [data-route="octen"],
[data-routed~="parallel"] [data-route="parallel"],
[data-routed~="valyu"] [data-route="valyu"],
[data-merge="true"][data-routed~="ozone"] [data-junction="ozone"],
[data-merge="true"][data-routed~="tavily"] [data-junction="tavily"],
[data-merge="true"][data-routed~="exa"] [data-junction="exa"],
[data-merge="true"][data-routed~="brave"] [data-junction="brave"],
[data-merge="true"][data-routed~="perplexity"] [data-junction="perplexity"],
[data-merge="true"][data-routed~="you"] [data-junction="you"],
[data-merge="true"][data-routed~="firecrawl"] [data-junction="firecrawl"],
[data-merge="true"][data-routed~="octen"] [data-junction="octen"],
[data-merge="true"][data-routed~="parallel"] [data-junction="parallel"],
[data-merge="true"][data-routed~="valyu"] [data-junction="valyu"] { opacity: 1; }
[data-routed~="ozone"] [data-label="ozone"],
[data-routed~="tavily"] [data-label="tavily"],
[data-routed~="exa"] [data-label="exa"],
[data-routed~="brave"] [data-label="brave"],
[data-routed~="perplexity"] [data-label="perplexity"],
[data-routed~="you"] [data-label="you"],
[data-routed~="firecrawl"] [data-label="firecrawl"],
[data-routed~="octen"] [data-label="octen"],
[data-routed~="parallel"] [data-label="parallel"],
[data-routed~="valyu"] [data-label="valyu"] { opacity: 1; }
/* A fanout leg that missed timeout_ms: open, ochre, labeled. */
[data-timeout~="ozone"] [data-leg="ozone"],
[data-timeout~="tavily"] [data-leg="tavily"],
[data-timeout~="exa"] [data-leg="exa"],
[data-timeout~="brave"] [data-leg="brave"],
[data-timeout~="perplexity"] [data-leg="perplexity"],
[data-timeout~="you"] [data-leg="you"],
[data-timeout~="firecrawl"] [data-leg="firecrawl"],
[data-timeout~="octen"] [data-leg="octen"],
[data-timeout~="parallel"] [data-leg="parallel"],
[data-timeout~="valyu"] [data-leg="valyu"] { color: var(--ochre); opacity: 1; }
[data-timeout~="ozone"] [data-label="ozone"] .leg-status,
[data-timeout~="tavily"] [data-label="tavily"] .leg-status,
[data-timeout~="exa"] [data-label="exa"] .leg-status,
[data-timeout~="brave"] [data-label="brave"] .leg-status,
[data-timeout~="perplexity"] [data-label="perplexity"] .leg-status,
[data-timeout~="you"] [data-label="you"] .leg-status,
[data-timeout~="firecrawl"] [data-label="firecrawl"] .leg-status,
[data-timeout~="octen"] [data-label="octen"] .leg-status,
[data-timeout~="parallel"] [data-label="parallel"] .leg-status,
[data-timeout~="valyu"] [data-label="valyu"] .leg-status { display: inline; }

.router-label { position: absolute; left: var(--router-x, 24.2%); top: 58.52%; transform: translateX(-50%); margin: 0; max-width: var(--router-room, none); text-align: center; line-height: 1.3; }
.router-label strong { display: block; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.router-label span { display: block; color: var(--pencil); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.schematic-stage > .schematic-art { display: block; }
/* What each group is: the providers' bus carries a 12px pencil label. */
.stage-label { position: absolute; top: 0; left: calc(var(--bus-x, 35.9375%) + var(--space-2)); margin: 0; color: var(--pencil); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.01em; }
/* The specialized APIs (GRO-75; Harlan, 2026-10-14: "a single row below the current list of grounding servers that rotates
   through the specialized apis, make a subtle visual difference to show visually its not the same as other grounding
   servers"; "dont make a separate path that goes to the specialized apis, should be organized the exact same as the regular
   grounding servers"). The last leg of the art's one bus, 40 below the last provider's: a switch like every provider's, its wire
   dashed (one call for the question, not a grounding server). Its label, in the providers' column, names one API at a time
   (its logo, or its mark and its name set as You.com's is), closed and lit where a search asked it. */
.leg-call .leg-wire { stroke-dasharray: 4 3; }
.spec-names { position: absolute; top: var(--y); left: var(--label-x, 63.125%); margin: 0; padding: 0; list-style: none; transform: translateY(-50%); }
.spec-names li { display: flex; align-items: center; color: var(--graphite); opacity: 0.72; transition: opacity var(--t-switch) var(--ease) var(--delay, 0ms); }
.spec-names li:hover { opacity: 1; }
.spec-names a { display: inline-flex; align-items: center; gap: var(--space-2); color: inherit; text-decoration: none; }
.spec-api { font-size: 16px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; }
.smark { flex: none; height: 16px; width: auto; }
.slogo { flex: none; height: 14px; width: auto; }
/* Lit: on the home page where a search asked the API it names (Specialized joins the routed legs), on the account page as
   that API's setting draws it (data-called): On in --earth-ink, Always in --sky-ink; Off or keyless stays open and faint. */
[data-routed~="specialized"] [data-call="specialized"], [data-called="on"] [data-call="specialized"] { color: var(--earth-ink); opacity: 1; }
[data-called="always"] [data-call="specialized"] { color: var(--sky-ink); opacity: 1; }
[data-routed~="specialized"] [data-call="specialized"] .switch-lever, [data-called="on"] [data-call="specialized"] .switch-lever, [data-called="always"] [data-call="specialized"] .switch-lever { transform: rotate(0deg); }
[data-routed~="specialized"] [data-route="specialized"], [data-called="on"] [data-route="specialized"], [data-called="always"] [data-route="specialized"] { opacity: 1; }
[data-called="always"] [data-route="specialized"] { stroke: var(--sky-ink); }
[data-routed~="specialized"] .spec-names li, [data-called="on"] .spec-names li, [data-called="always"] .spec-names li { opacity: 1; }
.schematic-static .spec-names li { transition: none; }
/* The replay's line (landing.js `flow`): a routed path drawn from the router to its leg, left to right, before its switch closes. */
.sch-routed.is-flowing { opacity: 1; }
/* A search lit anywhere lights the way in: the wire, the router and its output (the bus lights from its junction to each routed leg's row, `data-route`). */
[data-routed]:not([data-routed=""]) [data-lit] { opacity: 1; }
/* The way back (Harlan, 2026-10-15: a loop back on both heroes, with a gate that lets through only allowed data or not; 2026-10-16:
   "do a, but say Grounder routes and then Grounder filters"): every row carries on past its logo and mode to a rail on its right
   (`data-rungs`, grey; `data-rung`, each row's own run lit once its results come back), and the rail feeds a second funnel, the
   router mirrored, drawn beside the rows on the router's row (fan.js `wayBack`). Inside it the results split into two lanes (`data-return`): the allowed lane is a
   plain wire, the disallowed lane carries one switch, drawn like every other. They meet at the funnel's tip and one line runs down and
   along the bottom to an arrow at the left edge. Allowed sources only on (`data-allowed="on"`): the switch is open and the lane stays
   unlit past it, so only allowed results reach the arrow, and the funnel says "Allowed scraping only"; off: the switch is closed,
   everything passes, and it says "Allowed scraping" over it and "Disallowed scraping" under it. Grey like an unlit leg until the results have come back
   (`data-returned`; on the account page, any provider lit), then --earth-ink, or --sky-ink under Preferred; the switch shows the
   setting whether or not anything is lit. */
.sch-return { fill: none; stroke: var(--pencil); stroke-width: var(--stroke); stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; opacity: 0.4; }
.gate-label { position: absolute; left: var(--filter-x, 80%); margin: 0; color: var(--pencil); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.01em; white-space: nowrap; }
.gate-allowed { top: var(--filter-top, 32%); transform: translateY(calc(-100% - 4px)); }
.gate-disallowed { top: calc(var(--filter-bottom, 56%) + 4px); }
[data-allowed="on"] .gate-disallowed { visibility: hidden; }
/* "Allowed scraping only" with Allowed sources only on, "Allowed scraping" with it off (Harlan, 2026-10-16); the word keeps its room either way, so nothing moves. */
[data-allowed="off"] .gate-only { visibility: hidden; }
/* The stage keeps 16px under the art: the landing page's way back runs under it on a phone (landing.js `drawWire`), and the foot, or the note under the diagram, starts below. */
.schematic-stage { margin-bottom: var(--space-4); }
/* The funnel and the line home may stand past the art by the schematic's own right padding and no further, so they end on the page
   column's edge, the same margin left and right (Harlan, 2026-10-16: "even out margins so they are equal sizes on both sides, ensure
   it doesn't misalign with the entire page below"; never past the window, fan.js `reach`); on the stacked landing page the hero's
   wire runs down the stage's right edge, so they stay 8px inside it. */
.schematic-stage { --brace-edge: 24px; }
[data-returned="true"] [data-return], [data-called="on"] [data-return], [data-called="always"] [data-return] { opacity: 1; }
[data-allowed="on"] [data-return="passed"] { opacity: 0; }
[data-returned="true"][data-routed~="ozone"]:not([data-timeout~="ozone"]) [data-rung="ozone"],
[data-returned="true"][data-routed~="tavily"]:not([data-timeout~="tavily"]) [data-rung="tavily"],
[data-returned="true"][data-routed~="exa"]:not([data-timeout~="exa"]) [data-rung="exa"],
[data-returned="true"][data-routed~="brave"]:not([data-timeout~="brave"]) [data-rung="brave"],
[data-returned="true"][data-routed~="perplexity"]:not([data-timeout~="perplexity"]) [data-rung="perplexity"],
[data-returned="true"][data-routed~="you"]:not([data-timeout~="you"]) [data-rung="you"],
[data-returned="true"][data-routed~="firecrawl"]:not([data-timeout~="firecrawl"]) [data-rung="firecrawl"],
[data-returned="true"][data-routed~="octen"]:not([data-timeout~="octen"]) [data-rung="octen"],
[data-returned="true"][data-routed~="parallel"]:not([data-timeout~="parallel"]) [data-rung="parallel"],
[data-returned="true"][data-routed~="valyu"]:not([data-timeout~="valyu"]) [data-rung="valyu"],
[data-returned="true"][data-routed~="specialized"] [data-rung="specialized"], [data-called="on"] [data-rung="specialized"], [data-called="always"] [data-rung="specialized"] { opacity: 1; }
[data-returned="true"] [data-gate="exit"], [data-called="on"] [data-gate="exit"], [data-called="always"] [data-gate="exit"],
[data-allowed="off"][data-returned="true"] [data-gate="switch"], [data-allowed="off"][data-called="on"] [data-gate="switch"], [data-allowed="off"][data-called="always"] [data-gate="switch"],
[data-gate].is-flowing { color: var(--earth-ink); opacity: 1; }
[data-allowed="off"] [data-gate="switch"] .switch-lever { transform: rotate(0deg); }
/* Sources' toggle beside the providers' toggle (Harlan, 2026-10-16: "make the sources the same format as optimized vs
   perferred, with the toggle"). */
.route-controls { display: grid; grid-template-columns: minmax(0, max-content); gap: var(--space-3); }
.route-controls .route-toggle-option { white-space: nowrap; }
/* A provider's mode beside its logo, on its row (Harlan, 2026-10-14: "make the mode be to the right of each provider, so it goes
   through the provider, lighting up the provider left to right, and goes to a mode"; fan.js): the route lights the bus, the
   leg, the switch, the arrow and the logo, then a wire and an arrow (the leg's own, drawn on past the logo) on to the mode's
   name. Nothing moves: an unrouted row shows nothing past its logo. While a replay plays the arrow and the name wait for the
   wire to arrive. Where the stage is narrow the legs are drawn shorter (fan.js `reach`) so the longest name fits. */
[data-merge="true"][data-routed~="specialized"] [data-junction="specialized"], [data-called="on"]:not([data-routed=""]) [data-junction="specialized"], [data-called="always"]:not([data-routed=""]) [data-junction="specialized"] { opacity: 1; }
[data-called="always"] [data-junction="specialized"] { fill: var(--sky-ink); }
.leg-labels .trail-gap { flex: none; height: 1px; }
.leg-labels .trail-mode { min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--graphite); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: 0.01em; white-space: nowrap; }
.leg-labels .trail-bolt { display: inline-block; width: 8px; height: 11px; margin-right: 4px; vertical-align: -1px; fill: currentColor; }
.trail-arrow, .leg-labels .trail-mode { transition: opacity var(--t-fade) var(--ease); }
.is-loading .trail-arrow, .is-loading .leg-labels .trail-mode { opacity: 0; }
.schematic-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-3); }
.schematic-result { display: flex; gap: var(--space-4); margin: 0; color: var(--graphite); font-size: 14px; font-weight: 500; line-height: 1.45; white-space: nowrap; }
.schematic-result .latency { color: var(--pencil); }
.merged-count { min-width: 8.6em; transition: opacity var(--t-fade) var(--ease); }
.is-loading .merged-count, .is-returning .merged-count { opacity: 0; }

/* Provider marks */
.pmark { display: inline-block; width: 14px; height: 14px; color: var(--graphite); }
.plogo { display: inline-block; height: calc(16px * var(--optical, 1)); width: auto; color: var(--graphite); }
/* Official logos keep their own proportions (viewBox width / height). --optical scales a logo to read at the size of the rest: down for a wordmark set in capitals or a heavy weight, up for Ozone's stacked lockup, whose wordmark is a quarter of its height. You.com is set in type. */
.plogo-ozone { aspect-ratio: 1.578; --optical: 1.5; }
.plogo-tavily { aspect-ratio: 3.312; }
.plogo-exa { aspect-ratio: 3.202; }
.plogo-brave { aspect-ratio: 3.212; }
.plogo-perplexity { aspect-ratio: 4.437; }
.plogo-firecrawl { aspect-ratio: 4.288; }
.plogo-octen { aspect-ratio: 3.970; }
.plogo-parallel { aspect-ratio: 6.367; --optical: 0.8; }
.plogo-valyu { aspect-ratio: 5.401; --optical: 0.75; }
.pname { color: var(--graphite); font-size: 16px; font-weight: 700; line-height: 1; letter-spacing: -0.01em; }
.pmark-text { width: auto; height: auto; font-size: 12px; font-weight: 700; }
/* A provider's logo in the schematic or the side-by-side table opens its page; it looks the same until pointed at. */
.leg-labels a, .provider-link { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }
.leg-labels li:hover, .provider-link:hover .plogo-row, .provider-link:hover .pname { opacity: 1; }

/* Demo */
.demo-panel { border: 1px solid var(--rule); border-radius: var(--radius-panel); background: var(--paper); box-shadow: var(--panel-shadow); }
.demo-bar { display: grid; gap: var(--space-3); padding: var(--space-5); border-bottom: 1px solid var(--rule); }
.demo-bar label { color: var(--pencil); font-size: 14px; font-weight: 500; }
.demo-search { display: grid; gap: var(--space-3); }
.demo-search-row { display: flex; gap: var(--space-2); }
.demo-search-row .input { flex: 1; min-width: 0; }
.demo-search-row .btn { height: 48px; }
@media (max-width: 479px) {
  .demo-search-row { flex-direction: column; }
  .demo-search-row .btn { align-self: flex-start; }
}
/* The demo's search options (Harlan, 2026-10-19: "boxes and then sub boxes, more organized"): a row of one box per group,
   each saying what is set in it; under it the open group's panel, its options in sub-boxes, each choice a chip of a
   segmented radio group, the checked one a paper pill on the grey track; under them, the same search as an API request. */
.demo-options { display: grid; gap: var(--space-2); }
.demo-option-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); gap: var(--space-2); }
.demo-option-box { display: grid; gap: 2px; min-width: 0; min-height: 56px; padding: var(--space-2) var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--paper); color: var(--graphite); text-align: left; cursor: pointer; }
.demo-option-box:hover { border-color: var(--pencil); }
.demo-option-box[aria-expanded="true"] { border-color: var(--graphite); background: var(--paper-2); }
.demo-option-box-name { color: var(--pencil); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.demo-option-box-value { overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.demo-option-panel { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-2); border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--paper-2); }
.demo-option-panel[hidden] { display: none; }
.demo-option-sub { display: grid; flex: 1 1 auto; align-content: start; gap: var(--space-2); min-width: 0; max-width: 100%; padding: var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--paper); }
.demo-option-sub.has-rows { flex-basis: 100%; }
.demo-option-sub-title { margin: 0; color: var(--graphite); font-size: 13px; font-weight: 600; line-height: 1.4; }
.demo-option-row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: var(--space-2); }
.demo-option-label { color: var(--pencil); font-size: 13px; font-weight: 500; }
.demo-chips { display: flex; flex-wrap: wrap; justify-self: start; gap: 2px; max-width: 100%; padding: 3px; border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--paper-2); }
.demo-chip { position: relative; display: flex; align-items: center; min-height: 32px; padding-inline: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-badge); color: var(--pencil); font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.demo-chip:hover { color: var(--graphite); }
.demo-chip:has(input:checked) { border-color: var(--pencil); background: var(--paper); color: var(--graphite); }
.demo-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.demo-chips:has(input:focus-visible) { outline: 2px solid var(--graphite); outline-offset: 2px; }
.demo-sites-input.input { min-height: 40px; padding-left: var(--space-3); font-size: 15px; }
@media (max-width: 719px) {
  .demo-option-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
}
@media (max-width: 479px) {
  .demo-option-panel { padding: var(--space-1); }
  .demo-option-sub { padding: var(--space-2); }
  .demo-chip { padding-inline: 6px; font-size: 13px; }
}
.demo-request pre { padding: var(--space-3) var(--space-4); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
.demo-request .code-lang { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 479px) { .demo-request .code-lang { display: none; } }
@media (max-width: 719px) {
  .demo-option-group { display: grid; gap: var(--space-2); }
  .demo-option-group-name { width: auto; padding-top: 0; }
  .demo-option-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-option-sites { grid-column: 1 / -1; }
  .demo-option .select, .demo-sites .input { width: 100%; min-width: 0; }
  .demo-sites .select { width: auto; flex: none; }
}
.demo-status { color: var(--pencil); font-size: 14px; line-height: 1.45; }
.demo-status:empty { display: none; }
.demo-status.is-error { color: var(--danger); }
.demo-panel[aria-busy="true"] .demo-body { opacity: 0.5; transition: opacity var(--t-ui) var(--ease); }
.demo-route { color: var(--graphite); font-size: 15px; line-height: 1.5; }
.demo-route strong { font-weight: 700; }
.demo-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.demo-results, .demo-providers { padding: var(--space-5); }
.demo-providers { border-left: 1px solid var(--rule); }
.demo-body h3 { margin-bottom: var(--space-4); font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--pencil); }
.result { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3); padding-block: var(--space-3); border-top: 1px solid var(--rule); }
.result:first-child { border-top: 0; padding-top: 0; }
.result-rank { color: var(--pencil); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.6; }
.result-body { display: grid; gap: 2px; min-width: 0; }
.result-title { color: var(--graphite); font-size: 16px; font-weight: 600; line-height: 1.4; text-decoration: none; overflow-wrap: anywhere; }
.result-title:hover { text-decoration: underline; text-decoration-color: var(--earth-ink); }
.result-title .ext { margin-left: 4px; color: var(--pencil); font-weight: 400; }
.result-domain { color: var(--pencil); font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
.result-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin-top: var(--space-1); }
/* Many providers wrap onto a second line; "Found by" itself never breaks. */
.found-by { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--pencil); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; }
.provider-compare { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.45; }
.provider-compare th, .provider-compare td { padding: var(--space-2) 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: middle; font-weight: 500; }
.provider-compare thead th { border-top: 0; padding-top: 0; color: var(--pencil); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.provider-compare td.num, .provider-compare th.num { text-align: right; padding-left: var(--space-3); }
.provider-compare thead th { white-space: nowrap; }
.provider-row { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; }
.provider-compare .plogo-row { height: calc(14px * var(--optical, 1)); }
.provider-compare .pname { font-size: 14px; }
.provider-compare .plogo-row, .provider-compare .pname { opacity: 0.72; }
.provider-compare .is-picked .plogo-row, .provider-compare .is-picked .pname { opacity: 1; }
.picked-label { color: var(--earth-ink); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.latency { width: 42%; padding-left: var(--space-3) !important; }
.latency .num { display: block; color: var(--graphite); font-size: 13px; white-space: nowrap; }
.latency-bar { display: block; width: var(--w); height: 4px; margin-bottom: 4px; background: var(--pencil); }
.is-picked .latency-bar { background: var(--earth-ink); }
.latency-bar.is-timeout { background: var(--ochre); }
.demo-overlap { margin-top: var(--space-4); color: var(--pencil); font-size: 14px; line-height: 1.45; }
.demo-source { max-width: none; padding: var(--space-3) var(--space-5); border-top: 1px solid var(--rule); color: var(--pencil); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
/* A provider page with nothing recorded yet has no recording to date until a live search answers. */
.demo-source:empty { display: none; }

/* Results: a tab per benchmark, SimpleQA first, each a table with grounder's row first and in earth-ink, every live provider's default search under it. */
.results-section { display: grid; gap: var(--space-3); }
.results-method { max-width: 52em; color: var(--pencil); font-size: 14px; line-height: 1.45; }
.results-tables { min-width: 0; max-width: 760px; margin-top: var(--space-4); }
.results-tabs .tab-track { padding: 0; margin-bottom: var(--space-4); }
.results-tabs .tab { padding: 0 var(--space-2); }
.results-table { min-width: 0; overflow-x: auto; }
.results-compare caption { padding: 0 0 var(--space-3) var(--space-2); text-align: left; color: var(--pencil); font-size: 14px; }
.results-compare td.num { color: var(--graphite); white-space: nowrap; }
.results-compare thead th { white-space: normal; vertical-align: bottom; }
.results-compare .grounder-name { font-size: 14px; font-weight: 600; }
/* Grounder's row on the 18% --earth tint (the selection's), graphite on it, the cells padded so nothing meets its edge. */
.results-compare th:first-child, .results-compare td:first-child { padding-left: var(--space-2); }
.results-compare th:last-child, .results-compare td:last-child { padding-right: var(--space-2); }
.results-compare .is-grounder th, .results-compare .is-grounder td { background: color-mix(in srgb, var(--earth) 18%, transparent); color: var(--graphite); font-weight: 600; }
.results-compare .is-grounder + tr th, .results-compare .is-grounder + tr td { border-top-color: transparent; }
/* Grounder's two rows (licensed sources only, then every source) stay two rows: the hairline between them shows. */
.results-compare .is-grounder + .is-grounder th, .results-compare .is-grounder + .is-grounder td { border-top-color: var(--rule); }
/* The sentence under the table, in the caption's pencil and inset. */
.results-note { margin-top: var(--space-3); padding-left: var(--space-2); color: var(--pencil); font-size: 14px; line-height: 1.45; }

/* Code blocks and tabs */
.code-block { min-width: 0; border: 1px solid var(--rule); border-radius: var(--radius-panel); background: var(--paper-2); overflow: hidden; }
.tab-track { position: relative; display: flex; gap: var(--space-1); padding: 0 var(--space-3); border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tab-track::-webkit-scrollbar { display: none; }
.tab { flex: none; min-height: 44px; padding: 0 var(--space-3); border: 0; background: none; color: var(--pencil); font-size: 14px; font-weight: 500; line-height: 1.45; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--graphite); font-weight: 600; }
.tab:hover { color: var(--graphite); }
.tab-indicator { position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--earth-ink); transform: translateX(0); transition: transform var(--t-fade) var(--ease), width var(--t-fade) var(--ease); }
/* Grouped tabs (the MCP setup): a named row per kind of client, its tabs wrapping beside the name. */
.tab-groups { display: grid; padding: var(--space-1) var(--space-3); overflow: visible; }
.tab-group { display: flex; align-items: flex-start; gap: var(--space-2); }
.tab-group-name { flex: none; width: 6rem; padding-top: var(--space-3); color: var(--pencil); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.tab-group-tabs { display: flex; flex-wrap: wrap; gap: 0 var(--space-1); min-width: 0; }
.tab-groups .tab { padding: 0 var(--space-2); }
.tab-groups .tab-indicator { top: 0; bottom: auto; }
.code-head { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding-left: var(--space-4); border-bottom: 1px solid var(--rule); }
.code-file { color: var(--graphite); font: 400 12px/1.5 var(--mono); }
.code-lang { color: var(--pencil); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.code-head .grow { flex: 1; }
.copy { display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px; width: 92px; min-height: 44px; padding: 0 var(--space-4); border: 0; border-left: 1px solid var(--rule); background: none; color: var(--graphite); font-size: 14px; font-weight: 600; }
.copy svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.75; }
.copy:hover { background: var(--paper); }
.code-body { position: relative; }
.code-block pre { margin: 0; padding: var(--space-4); overflow-x: auto; color: var(--graphite); font: 400 14px/1.6 var(--mono); tab-size: 2; }
.tok-str { color: var(--earth-ink); }
.tok-num { color: var(--ochre); }
.tok-punct, .tok-comment { color: var(--pencil); }
.tok-key { color: var(--graphite); }

/* Quickstart */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.split > :first-child { grid-column: 1 / span 5; }
.split > :last-child { grid-column: 6 / span 7; }
.steps { display: grid; gap: var(--space-4); margin-top: var(--space-6); counter-reset: step; }
.steps li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--space-2); font-size: 17px; }
.steps li::before { counter-increment: step; content: counter(step); color: var(--earth-ink); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Provider pages: the demo panel for one provider, then how to pin a query to it. */
.provider-demo { padding-bottom: var(--space-9); }
[data-provider] .demo-body { grid-template-columns: minmax(0, 1fr); }
.provider-copy h2 + p, .provider-copy .steps + p { margin-top: var(--space-5); color: var(--pencil); }
.provider-copy .table-scroll { margin-top: var(--space-5); }

/* Tables */
.table { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.5; }
.table th, .table td { padding: var(--space-4) var(--space-4) var(--space-4) 0; border-top: 1px solid var(--rule); text-align: left; vertical-align: top; }
.table thead th { padding-top: 0; border-top: 0; color: var(--pencil); font-size: 14px; font-weight: 600; }
.table tbody th { font-weight: 600; }
.table td:last-child, .table th:last-child { padding-right: 0; }
.table .muted { color: var(--pencil); }
.table-scroll { overflow-x: auto; }

/* FAQ */
.faq { max-width: 860px; border-bottom: 1px solid var(--rule); }
.faq details { border-top: 1px solid var(--rule); }
.faq summary { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; padding-block: var(--space-4); font-size: 18px; font-weight: 600; line-height: 1.4; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq .switch-glyph { flex: none; width: 28px; height: 14px; color: var(--pencil); fill: none; stroke: currentColor; stroke-width: var(--stroke); stroke-linecap: square; }
.faq .switch-glyph circle { fill: var(--paper); }
.faq .switch-glyph .switch-lever { transform-box: view-box; transform-origin: 0 0; transform: rotate(-28deg); transition: transform var(--t-switch) var(--ease); }
.faq details[open] .switch-glyph { color: var(--earth-ink); }
.faq details[open] .switch-glyph .switch-lever { transform: rotate(0deg); }
.faq .answer { padding: 0 0 var(--space-5) 44px; color: var(--pencil); }
.faq .answer p { max-width: 64ch; }

/* Data use */
.data-use { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-7); margin: 0; }
.data-use div { padding-top: var(--space-4); border-top: 1px solid var(--rule); }
.data-use dt { margin-bottom: var(--space-2); font-size: 18px; font-weight: 600; }
.data-use dd { margin: 0; color: var(--pencil); font-size: 17px; }
.data-use code, .prose code, .faq code, .provider-copy code { padding: 1px 4px; border-radius: var(--radius-badge); background: var(--paper-2); color: var(--graphite); font-size: 0.85em; }

/* Footer */
.footer { padding-block: var(--space-7); border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.45; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-6); }
.footer .wordmark { font-size: 17px; }
.footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); flex: 1; }
.footer nav a { color: var(--graphite); text-decoration: none; font-weight: 500; }
.footer nav a:hover { text-decoration: underline; text-decoration-color: var(--earth-ink); }
.status-pill { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-badge); color: var(--graphite); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; }
.status-pill:hover { border-color: var(--pencil); text-decoration: none; }
.status-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--pencil); }
.is-ok .status-dot, .status-dot.is-ok { background: var(--earth-ink); }
.is-down .status-dot, .status-dot.is-down { background: var(--danger); }
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin-top: var(--space-5); color: var(--pencil); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: var(--graphite); text-decoration: underline; text-decoration-color: var(--earth-ink); }

/* Interior pages: docs, status, access, not found */
.page-head { padding-block: var(--space-8) var(--space-7); }
.page-head p { margin-top: var(--space-4); color: var(--pencil); }
.docs { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-bottom: var(--space-9); }
.docs-toc { grid-column: 1 / span 3; }
.docs-toc nav { position: sticky; top: calc(var(--nav-height) + var(--space-5)); display: grid; gap: var(--space-1); font-size: 14px; line-height: 1.45; }
.docs-toc a { padding-block: 6px; color: var(--pencil); font-weight: 500; text-decoration: none; }
.docs-toc a:hover { color: var(--graphite); text-decoration: underline; text-decoration-color: var(--earth-ink); }
.docs-body { grid-column: 4 / span 9; min-width: 0; }
.docs-body > section { padding-block: var(--space-7); border-top: 1px solid var(--rule); }
.docs-body > section:first-child { padding-top: 0; border-top: 0; }
.docs-body h2 { margin-bottom: var(--space-4); font-size: 28px; }
.docs-body h3 { margin: var(--space-6) 0 var(--space-3); font-size: 18px; }
.docs-body p, .docs-body li { color: var(--graphite); font-size: 17px; }
.docs-body p + .code-block, .docs-body .code-block + p, .docs-body p + .table-scroll, .docs-body .table-scroll + p, .docs-body .code-pair { margin-top: var(--space-5); }
.prose ul { display: grid; gap: var(--space-2); padding-left: 1.2em; list-style: square; }
.prose li::marker { color: var(--pencil); }
/* Privacy and terms: the docs' layout for long text, bullets held to the paragraphs' measure and set apart from them. */
.legal ul { max-width: 64ch; }
.legal p + ul, .legal ul + p { margin-top: var(--space-4); }
.legal strong { font-weight: 600; }
.endpoints { border-top: 1px solid var(--rule); }
.endpoints a { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--rule); color: var(--graphite); text-decoration: none; }
.endpoints a:hover .endpoint-path { text-decoration: underline; text-decoration-color: var(--earth-ink); }
.endpoint-path { font: 400 15px/1.5 var(--mono); overflow-wrap: anywhere; }
.endpoint-desc { color: var(--pencil); font-size: 14px; }
.code-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.matrix td { text-align: center; }
.matrix th:first-child, .matrix td:last-child { text-align: left; }
.cap-yes, .cap-no { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.cap-yes { background: var(--earth-ink); }
.cap-no { border: 1.5px solid var(--pencil); }

.status-now { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.015em; }
.status-now .status-dot { width: 14px; height: 14px; }
.status-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-top: var(--space-3); color: var(--pencil); font-size: 14px; }
.status-checks { margin-bottom: var(--space-9); }
.status-checks td:first-child { white-space: nowrap; }
.check-state { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 600; }

.form { display: grid; gap: var(--space-5); max-width: 560px; }
.field { display: grid; gap: var(--space-2); }
.field label, .field .label { font-size: 14px; font-weight: 500; line-height: 1.45; }
.field .hint { color: var(--pencil); font-size: 14px; line-height: 1.45; }
.check { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-3); align-items: start; font-size: 17px; }
.check input { width: 18px; height: 18px; margin: 4px 0 0; accent-color: var(--earth-ink); }
.form-error { color: var(--danger); font-size: 15px; font-weight: 600; }
.form-note { color: var(--pencil); font-size: 14px; line-height: 1.45; }
.form-done { max-width: 560px; padding: var(--space-5); border-left: 2px solid var(--earth-ink); background: var(--paper-2); }
.form-done h2 { font-size: 21px; margin-bottom: var(--space-2); }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.account { padding-bottom: var(--space-9); }
.account-body { display: grid; justify-items: start; gap: var(--space-5); max-width: 640px; }
/* The account page (docs/accounts.md): usage, billing while Stripe is configured, the MCP address, search keys and training,
   one section after another set apart by a hairline, never boxes. The sections stay hidden until account.js has all they show. */
.account-sections { width: 100%; min-width: 0; }
.account-section { padding-block: var(--space-6); border-top: 1px solid var(--rule); }
.account-section:last-child { padding-bottom: 0; }
.account-section h2 { margin-bottom: var(--space-3); font-size: 28px; }
.account-section > * + * { margin-top: var(--space-4); }
.account-section > h2 + * { margin-top: 0; }
/* Stripe's embedded Checkout takes the section's whole width; left to its content it shrinks to its iframe's default. */
.billing-checkout { width: 100%; }
.account-section .code-block { margin-top: var(--space-4); }
/* The account's own figures (account-stats.js): the results table's columns, a row for all time and one for this month,
   then each benchmark's average provider, scrolling inside its own box where a phone is narrower than the table. On a phone
   the row names step down to 13px and the headers lose their tracking, so the table fits a 390px screen whole. */
.stats-compare th:first-child { padding-right: var(--space-3); }
.stats-compare thead th { white-space: normal; vertical-align: bottom; }
.stats-compare tbody th { color: var(--graphite); font-weight: 600; }
.stats-compare td.num { color: var(--graphite); white-space: nowrap; }
@media (max-width: 480px) {
  .stats-compare th:first-child { padding-right: 0; }
  .stats-compare td.num, .stats-compare th.num { padding-left: var(--space-1); }
  .stats-compare thead th { letter-spacing: 0; }
  .stats-compare tbody th { font-size: 13px; }
}
.keys { border-top: 1px solid var(--rule); }
.key { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--rule); }
.key-name { display: block; font-size: 17px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.key-dates { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); color: var(--pencil); font-size: 14px; line-height: 1.45; }
.key-actions { display: flex; justify-content: flex-end; }
.key-actions .text-button { padding-inline: var(--space-2); }
.key.is-confirming { grid-template-columns: minmax(0, 1fr); }
.key.is-confirming .key-actions { justify-content: flex-start; }
.key-confirm { display: grid; justify-items: start; gap: var(--space-3); }
.key-warning { color: var(--pencil); font-size: 14px; line-height: 1.45; }
.key-confirm-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
.provider-key-form { display: grid; gap: var(--space-4); max-width: 420px; padding-bottom: var(--space-2); }
.provider-key-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); }
.account-section > .settings-block { margin-top: var(--space-6); }
/* Routing on the account page (Harlan, 2026-10-13): an Optimized / Preferred toggle, the fill sliding between the two
   (--earth under Optimized, --sky under Preferred), over the hero schematic copied exactly. The schematic is drawn, not
   played: the routes are lit at once and never travel from left to right. */
.route-toggle { position: relative; display: inline-grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 288px; margin: 0; padding: 3px; border: 1px solid var(--rule); border-radius: var(--radius-control); background: var(--paper-2); }
.route-toggle::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: var(--radius-badge); background: var(--earth); transition: transform var(--t-switch) var(--ease), background-color var(--t-switch) var(--ease); }
.route-toggle:has(.route-toggle-option:last-of-type input:checked)::before { transform: translateX(100%); }
.route-toggle:has([value="preferred"]:checked)::before { transform: translateX(100%); background: var(--sky); }
.route-toggle-option { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 40px; padding-inline: var(--space-4); color: var(--pencil); font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; }
.route-toggle-option:has(input:checked) { color: var(--graphite); }
.route-toggle-option input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.route-toggle:has(input:focus-visible) { outline: 2px solid var(--graphite); outline-offset: 2px; }
.route-toggle:has(input:disabled) .route-toggle-option { cursor: default; }
/* Each provider once, in one table: its use, mode and key dropdowns, and the key's field or confirmation under them. */
.provider-settings-head, .provider-setting, .provider-mode { display: grid; grid-template-columns: minmax(0, 1fr) 120px 152px; align-items: center; gap: var(--space-2) var(--space-3); }
.provider-settings-head { padding-bottom: var(--space-2); color: var(--pencil); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; }
.provider-settings { border-top: 1px solid var(--rule); }
.provider-setting { padding-block: var(--space-3); border-bottom: 1px solid var(--rule); }
.provider-setting-name { display: grid; min-width: 0; }
.provider-setting .select { width: 100%; padding-left: var(--space-3); padding-right: 36px; background-position: right 12px center; font-size: 14px; font-weight: 500; }
.provider-key-state { color: var(--pencil); font-size: 14px; line-height: 1.45; }
.provider-key-fixed { padding-inline: var(--space-3); color: var(--pencil); font-size: 14px; font-weight: 500; }
.provider-setting > .provider-key-form, .provider-setting > .key-confirm, .provider-setting > .provider-modes { grid-column: 1 / -1; }
.provider-key-fields { display: grid; gap: var(--space-4); }
/* A provider's name is the disclosure for its modes (Harlan, 2026-10-14: "expand to see modes using an arrow or something more
   intuitive, allow bulk on and off"): a chevron that turns from pointing right to pointing down, the whole name one button, and
   once a mode is changed how many are off, or which is Always, beside it. The modes' names sit under the provider's own. */
.settings-block { --disclosure: 20px; }
.provider-settings-head:not(.specialized-head) > :first-child { padding-left: var(--disclosure); }
.provider-disclosure { display: flex; align-items: center; gap: var(--space-2) var(--space-3); width: 100%; min-height: 44px; padding: 0; border: 0; background: none; color: var(--graphite); text-align: left; cursor: pointer; }
.provider-disclosure .setting-name { flex: none; max-width: 100%; }
.provider-disclosure:hover:not(:disabled) .setting-name { text-decoration: underline; text-underline-offset: 3px; }
.disclosure-chevron { flex: none; width: 8px; height: 8px; border-right: 1.5px solid var(--graphite); border-bottom: 1.5px solid var(--graphite); transform: rotate(-45deg); transition: transform var(--t-switch) var(--ease); }
.provider-disclosure[aria-expanded="true"] .disclosure-chevron { transform: rotate(45deg); }
.provider-disclosure:disabled { color: var(--pencil); cursor: default; }
.provider-disclosure:disabled .disclosure-chevron { border-color: var(--pencil); }
.provider-setting-name .provider-key-state { padding-left: var(--disclosure); }
.provider-modes-state { min-width: 0; overflow: hidden; color: var(--pencil); font-size: 14px; font-weight: 500; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.provider-setting .select:disabled { border-color: var(--rule); color: var(--pencil); cursor: default; }
.provider-mode { padding-top: var(--space-2); }
.provider-mode-name { min-width: 0; padding-left: var(--disclosure); color: var(--pencil); font-size: 14px; font-weight: 500; line-height: 1.4; }
.provider-modes-bulk-actions { display: flex; align-items: center; gap: var(--space-4); }
.provider-modes-bulk .text-button { font-size: 14px; }
.provider-modes-bulk .text-button:disabled { color: var(--pencil); text-decoration: none; cursor: default; opacity: 0.55; }
.settings-block > .schematic-static { grid-column: auto; margin: var(--space-4) 0 0; padding: var(--space-4) 0 0; }
.schematic-static .leg, .schematic-static .switch-lever, .schematic-static .sch-routed, .schematic-static .junction, .schematic-static .leg-labels li { transition: none; }
.schematic[data-tone="preferred"] .sch-routed { stroke: var(--sky-ink); }
.schematic[data-tone="preferred"] .junction { fill: var(--sky-ink); }
[data-tone="preferred"][data-routed~="ozone"] [data-leg="ozone"],
[data-tone="preferred"][data-routed~="tavily"] [data-leg="tavily"],
[data-tone="preferred"][data-routed~="exa"] [data-leg="exa"],
[data-tone="preferred"][data-routed~="brave"] [data-leg="brave"],
[data-tone="preferred"][data-routed~="perplexity"] [data-leg="perplexity"],
[data-tone="preferred"][data-routed~="you"] [data-leg="you"],
[data-tone="preferred"][data-routed~="firecrawl"] [data-leg="firecrawl"],
[data-tone="preferred"][data-routed~="octen"] [data-leg="octen"],
[data-tone="preferred"][data-routed~="parallel"] [data-leg="parallel"],
[data-tone="preferred"][data-routed~="valyu"] [data-leg="valyu"] { color: var(--sky-ink); }
[data-tone="preferred"][data-returned="true"] [data-gate="exit"], [data-tone="preferred"][data-called="on"] [data-gate="exit"], [data-tone="preferred"][data-called="always"] [data-gate="exit"],
[data-tone="preferred"][data-allowed="off"][data-returned="true"] [data-gate="switch"], [data-tone="preferred"][data-allowed="off"][data-called="on"] [data-gate="switch"], [data-tone="preferred"][data-allowed="off"][data-called="always"] [data-gate="switch"] { color: var(--sky-ink); }
/* An Always specialized API under Optimized with no provider lit draws its bus in --sky-ink, so what comes back down it is --sky-ink too (the one line does not change hue at its corner); with providers lit as well the bus is --earth-ink and stays so. */
[data-called="always"][data-routed=""] .sch-routed[data-return], [data-called="always"][data-routed=""] .sch-routed[data-rung] { stroke: var(--sky-ink); }
[data-called="always"][data-routed=""] [data-gate="exit"], [data-called="always"][data-routed=""][data-allowed="off"] [data-gate="switch"] { color: var(--sky-ink); }
.settings-block > * + * { margin-top: var(--space-3); }
.settings { border-top: 1px solid var(--rule); }
.setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-2) var(--space-4); padding-block: var(--space-3); border-bottom: 1px solid var(--rule); }
.setting-name { font-size: 17px; font-weight: 600; line-height: 1.4; }
.setting-controls { display: flex; justify-content: flex-end; gap: var(--space-3); }
.setting .select { width: 200px; font-size: 14px; font-weight: 500; }
/* Providers per search: a wire the thumb, a dot, slides along; its number above it, its two ends' words under it. */
.range-setting { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--space-4); padding-block: var(--space-3); border-block: 1px solid var(--rule); }
.range-value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.range { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.range::-webkit-slider-runnable-track { height: 1.5px; background: var(--graphite); }
.range::-moz-range-track { height: 1.5px; background: var(--graphite); }
.range::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -9.25px; border: 0; border-radius: 50%; background: var(--earth-ink); -webkit-appearance: none; appearance: none; }
.range::-moz-range-thumb { width: 20px; height: 20px; border: 0; border-radius: 50%; background: var(--earth-ink); }
.range:disabled { cursor: default; }
.range:disabled::-webkit-slider-thumb { background: var(--pencil); }
.range:disabled::-moz-range-thumb { background: var(--pencil); }
.range-ends { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: var(--space-4); margin: 0; color: var(--pencil); font-size: 14px; line-height: 1.45; }
.range-ends span:last-child { text-align: right; }

.not-found { padding-block: var(--space-9); }
.not-found .lede { margin-top: var(--space-5); color: var(--pencil); }
.not-found .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* OAuth consent and error screens (served from api.grounder.net) */
.auth-page { min-height: 100svh; display: grid; place-items: center; padding: var(--space-7) var(--gutter); }
.auth-shell { width: min(100%, 480px); }
.auth-shell .wordmark { margin-bottom: var(--space-8); }
.auth-shell h1 { margin-bottom: var(--space-4); font-size: 36px; line-height: 1.1; letter-spacing: -0.015em; }
.auth-description { margin-bottom: var(--space-5); color: var(--pencil); overflow-wrap: anywhere; }
.auth-form { display: grid; gap: var(--space-3); }
.auth-form label { font-size: 14px; font-weight: 500; }
.auth-form .btn { margin-top: var(--space-2); }
.auth-error { margin-bottom: var(--space-5); padding: var(--space-3) var(--space-4); border-left: 2px solid var(--danger); background: var(--paper-2); color: var(--danger); font-size: 15px; font-weight: 600; }
.auth-shell > .back { display: inline-block; margin-top: var(--space-5); }
.auth-account { color: var(--graphite); font-weight: 600; }
.signin-options { display: grid; gap: var(--space-3); }
.signin-mark { width: 18px; height: 18px; flex: none; fill: currentColor; }
.auth-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.auth-alternatives { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); margin-top: var(--space-4); }
.auth-alternatives .text-button { display: inline-flex; align-items: center; }
.auth-legal { margin-top: var(--space-4); color: var(--pencil); font-size: 14px; line-height: 1.45; }
.auth-legal { margin-top: var(--space-5); }

/* Signed in or out (session.js). The header's and footer's Get started, which reads Account when signed in, and the sign-up
   page's content are hidden from the first paint, keeping their space, until the API has said which it is, however long
   that takes. session.js is a deferred module and cannot run before the first paint, so the page never shows the wrong
   one first. Without script they show as written. If session.js never starts (its file did not load) nothing else would
   show them, so after 4s they show as written (the one animation on the site; it changes visibility, once, and moves nothing); the
   script, once it runs, sets html[data-session-wait] and the failsafe stands down. Get started and Account take the width
   of the wider, so nothing beside them moves when one replaces the other. */
[data-account-link], [data-account-gate] > :not(.wordmark) { visibility: hidden; animation: session-failsafe 0s 4s forwards; }
html[data-session-wait] [data-account-link], html[data-session-wait] [data-account-gate] > :not(.wordmark) { animation: none; }
html[data-session] [data-account-link], html[data-session="out"] [data-account-gate] > :not(.wordmark) { visibility: visible; }
@keyframes session-failsafe { to { visibility: visible; } }
@media (scripting: none) {
  [data-account-link], [data-account-gate] > :not(.wordmark) { visibility: visible; }
}
.nav [data-account-link] { min-width: 129px; }
.footer [data-account-link] { min-width: 72px; white-space: nowrap; }

@media (max-width: 1023px) {
  .demo-body { grid-template-columns: 1fr; }
  .demo-providers { border-left: 0; border-top: 1px solid var(--rule); }
}

@media (max-width: 899px) {
  /* The stacked wire's run along the top of the art passes through this label. */
  .stage-label { display: none; }
  [data-schematic] .schematic-stage { --brace-edge: -8px; }
  .hero-copy, .schematic { grid-column: 1 / -1; }
  .hero-copy { padding-right: var(--space-5); }
  .schematic { margin-top: var(--space-7); }
  .split > :first-child, .split > :last-child { grid-column: 1 / -1; }
  .split > :last-child { margin-top: var(--space-6); }
  .docs-toc { display: none; }
  .docs-body { grid-column: 1 / -1; }
  .code-pair { grid-template-columns: 1fr; }
  .data-use { grid-template-columns: 1fr; }
}

@media (max-width: 719px) {
  .spec-api { font-size: 14px; }
  .smark { height: 14px; }
  .slogo { height: 12px; }
  body { font-size: 17px; }
  h1 { font-size: 44px; }
  h2 { font-size: 28px; }
  .section { padding-block: var(--space-8); }
  .hero { padding-block: var(--space-7) var(--space-8); }
  .page-head { padding-block: var(--space-7) var(--space-6); }
  .provider-demo { padding-bottom: var(--space-8); }
  .nav-links .nav-secondary { display: none; }
  .wordmark { font-size: 19px; }
  .code-body::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 28px; background: linear-gradient(to right, transparent, var(--paper-2)); pointer-events: none; }
  .demo-bar, .demo-results, .demo-providers { padding: var(--space-4); }
  .demo-source { padding-inline: var(--space-4); }
  .schematic { padding-inline: 0; }
  .schematic-query { padding-right: var(--space-5); }
  .router-label strong { font-size: 12px; }
  .gate-label { max-width: 84px; white-space: normal; }
  .leg-labels .trail-mode { font-size: 11px; line-height: 14px; }
  .leg-labels li { gap: var(--space-1); }
  .latency { width: 34%; }
  .schematic::before { inset: 0 calc(-1 * var(--gutter)); }
  .faq .answer { padding-left: 0; }
  .table { font-size: 15px; }
  .table th, .table td { padding-block: var(--space-3); }
  .endpoints a { grid-template-columns: 56px minmax(0, 1fr); }
  .endpoint-desc { grid-column: 2; }
  .status-now { font-size: 24px; }
}

@media (max-width: 479px) {
  :root { --gutter: 16px; }
  .tab-group-name { width: 4.5rem; }
  .setting .select { width: 160px; }
  .setting-pair { grid-template-columns: minmax(0, 1fr); }
  .setting-pair .setting-controls { justify-content: flex-start; }
  .setting-pair .select { width: auto; flex: 1; min-width: 0; }
  .provider-settings-head { display: none; }
  .provider-setting, .provider-mode { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .provider-setting-name { grid-column: 1 / -1; }
  .route-controls .route-toggle { min-width: 0; }
  .route-controls .route-toggle-option { padding-inline: var(--space-3); }
  .results-compare, .results-compare .grounder-name, .results-compare caption, .results-note { font-size: 13px; }
  .results-compare td.num, .results-compare th.num { padding-left: var(--space-1); }
  .results-compare th:first-child, .results-compare td:first-child, .results-compare caption, .results-note { padding-left: var(--space-1); }
  .results-compare th:last-child, .results-compare td:last-child { padding-right: var(--space-1); }
  .results-compare .plogo-row { height: calc(12px * var(--optical, 1)); }
}
/* Seven columns at 360px with no sideways scroll: figures at 12px, headers at 11px, 3px gaps and edges, and 11px logos. */
@media (max-width: 400px) {
  .results-compare, .results-compare .grounder-name, .results-note { font-size: 12px; }
  .results-compare thead th { font-size: 11px; letter-spacing: 0; }
  .results-compare td.num, .results-compare th.num { padding-left: 3px; }
  .results-compare th:first-child, .results-compare td:first-child, .results-compare caption, .results-note { padding-left: 3px; }
  .results-compare th:last-child, .results-compare td:last-child { padding-right: 3px; }
  .results-compare .plogo-row { height: calc(11px * var(--optical, 1)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}