/* The app's tokens, in mono. Dark follows the system unless the page says otherwise. */
:root {
  --color-canvas: oklch(100% 0 0);
  --color-ink: oklch(26% 0.05 264);
  --color-ink-dark: oklch(56% 0.014 260);
  --color-ink-light: oklch(84% 0.005 256);
  --color-ink-lighter: oklch(92% 0.003 254);
  --color-ink-lightest: oklch(96% 0.002 252);
  --color-link: oklch(57.02% 0.1895 260.46);
  --color-negative: oklch(59% 0.19 38);
  --color-night: oklch(17% 0.02 232.58);
  --color-night-ink: oklch(96.02% 0.0034 260);
  --color-night-dim: oklch(73.97% 0.009 260);
  --color-night-line: oklch(30% 0.0178 260);
  --color-night-accent: oklch(74% 0.1293 256);
  --color-highlight: oklch(92% 0.12 95);
  --color-highlight-ink: oklch(26% 0.05 264);
  --lch-black: 0% 0 0;
  --shadow: 0 0 0 1px oklch(var(--lch-black) / 5%), 0 0.2em 0.2em oklch(var(--lch-black) / 5%),
            0 0.4em 0.4em oklch(var(--lch-black) / 5%), 0 0.8em 0.8em oklch(var(--lch-black) / 5%);

  /* System faces only: nothing is downloaded. The system's own sans for the words, its own mono for code */
  --font-text: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
  --font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem);
  --size-display: clamp(2.4em, 6vw, 3.75em);
  --size-heading: clamp(1.6em, 3.5vw, 2.4em);
  --size-lead: 1.12em;
  --size-small: 0.92em;
  --size-x-small: 0.82em;
  --radius: 8px;
  --column: 42em;
  --prose-width: 36em;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-end: max(16px, env(safe-area-inset-right, 0px));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-canvas: oklch(20% 0.0195 232.58);
    --color-ink: oklch(96.02% 0.0034 260);
    --color-ink-dark: oklch(73.97% 0.009 260);
    --color-ink-light: oklch(40% 0.0148 260);
    --color-ink-lighter: oklch(30% 0.0178 260);
    --color-ink-lightest: oklch(25% 0.0204 260);
    --color-link: oklch(74% 0.1293 256);
    --color-negative: oklch(74% 0.15 40);
    --color-night: oklch(13% 0.02 232.58);
  --color-highlight: oklch(45% 0.09 95);
  --color-highlight-ink: oklch(98% 0.01 95);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-canvas: oklch(20% 0.0195 232.58);
  --color-ink: oklch(96.02% 0.0034 260);
  --color-ink-dark: oklch(73.97% 0.009 260);
  --color-ink-light: oklch(40% 0.0148 260);
  --color-ink-lighter: oklch(30% 0.0178 260);
  --color-ink-lightest: oklch(25% 0.0204 260);
  --color-link: oklch(74% 0.1293 256);
  --color-negative: oklch(74% 0.15 40);
  --color-night: oklch(13% 0.02 232.58);
  --color-highlight: oklch(45% 0.09 95);
  --color-highlight-ink: oklch(98% 0.01 95);
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; }
body {
  background: var(--color-canvas); color: var(--color-ink);
  font-family: var(--font-text); font-size: var(--font-size); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; }
a { color: var(--color-link); text-decoration-thickness: 0.07em; text-underline-offset: 0.15em; }
@media (any-hover: hover) { a:hover { text-decoration: none; } }
:focus-visible { outline: 2px solid var(--color-link); outline-offset: 2px; }
mark {
  background: linear-gradient(transparent 12%, var(--color-highlight) 12%, var(--color-highlight) 88%, transparent 88%);
  color: var(--color-highlight-ink); padding-inline: 0.15em; margin-inline: -0.15em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.scribble { position: relative; isolation: isolate; white-space: nowrap; }
.scribble__line {
  position: absolute; left: -0.08em; bottom: -0.12em; z-index: -1; width: calc(100% + 0.16em); height: 0.38em;
  overflow: visible; pointer-events: none;
}
.scribble__line path { stroke: var(--color-highlight); stroke-width: 5px; vector-effect: non-scaling-stroke; }
code { font-family: var(--font-mono); font-size: 0.92em; background: var(--color-ink-lightest); padding: 0.1em 0.35em; border-radius: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link { position: absolute; top: 0.5rem; left: var(--gutter); z-index: 1; translate: 0 -200%; }
.skip-link:focus { translate: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  padding: 0.5em 1.1em; border: 1px solid var(--color-ink-light); border-radius: var(--radius);
  background: var(--color-canvas); color: var(--color-ink); font: 600 1em var(--font-text);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn--link { background: var(--color-link); border-color: var(--color-link); color: var(--color-canvas); }
.btn--large { padding: 0.7em 1.4em; }
@media (any-hover: hover) { .btn:hover { filter: brightness(0.92); } }

.card { background: var(--color-canvas); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; }

/* Three columns, the outer two equal, so the tagline sits at the true centre whatever the logo and buttons measure */
.header {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 2ch;
  padding-block: 0.6rem; padding-left: var(--gutter); padding-right: var(--gutter-end);
}
.header__logo { grid-column: 1; justify-self: start; color: var(--color-ink); font-size: 1.15em; font-weight: bold; letter-spacing: -0.01em; text-decoration: none; }
.header__tagline { display: none; grid-column: 2; min-width: 0; color: var(--color-ink-dark); font-size: var(--size-small); font-weight: 500; text-align: center; }
.header__actions { grid-column: 3; justify-self: end; display: flex; gap: 1ch; font-size: var(--size-small); }
@media (width >= 64em) { .header__tagline { display: block; } }
@media (width < 30em) { .header__actions .btn:first-child { display: none; } }

/* Auditans' frame, one centred column: a grey canvas holding white cards with Fizzy's shadow */
.canvas {
  display: flex; flex-direction: column; gap: clamp(2.75rem, 6vw, 4.25rem);
  padding-block: clamp(1.75rem, 5vw, 3.5rem); padding-left: var(--gutter); padding-right: var(--gutter-end);
  background: var(--color-ink-lightest);
}
.canvas:focus { outline: none; }
@media (width >= 64em) { .canvas { margin-inline: 1rem; border-radius: var(--radius); } }
.canvas > * { width: 100%; max-width: var(--column); margin-inline: auto; min-width: 0; }

.hero { text-align: center; display: grid; gap: 2.25em; }
.hero__kicker { font-size: var(--size-small); font-weight: 700; color: var(--color-ink-dark); margin-bottom: 0.5em; }
.hero__title { font-size: var(--size-display); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; }
.hero__title mark { background: none; color: var(--color-link); padding: 0; margin: 0; }
.hero__lead { max-width: var(--prose-width); margin: 0.9em auto 0; font-size: var(--size-lead); color: var(--color-ink-dark); }
.hero__actions { margin-top: 1.75em; }
.hero__links {
  width: fit-content; max-width: 100%; margin: 1.75em auto 0; padding: 0; list-style: none;
  display: grid; gap: 0.25em; text-align: start; font-size: var(--size-small);
}
.hero__links a { font-weight: bold; }
.hero__links--after { margin-top: 0; display: block; }

.block { display: grid; gap: 1.35em; }
.block__head { text-align: center; }
.block__title { font-size: var(--size-heading); max-width: 22em; margin-inline: auto; margin-top: 0.5em; }
.block__lead { max-width: var(--prose-width); margin: 0.5em auto 0; font-size: var(--size-lead); color: var(--color-ink-dark); }
.block__more { text-align: center; font-weight: 700; }

.hero__intro { max-width: var(--prose-width); margin: 0.75em auto 0; color: var(--color-ink-dark); }
.steps { margin: 0; counter-reset: step; }
.step h3::before { counter-increment: step; content: counter(step) ". "; color: var(--color-link); }

.term__bar { display: flex; gap: 6px; padding: 0.6em 1em 0; }
.term__bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-ink-lighter); }

/* The home's conversation: a dark agent session in both themes. Scoped to .term so a doc's .article__code is untouched */
.term {
  min-width: 0; text-align: start; border-radius: var(--radius);
  background: var(--color-night); color: var(--color-night-ink);
  box-shadow: 0 0 0 1px var(--color-night-line), var(--shadow);
}
.term__title {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1em;
  padding: 0.55em 0.9em; border-bottom: 1px solid var(--color-night-line);
  font: var(--size-x-small)/1.4 var(--font-mono); color: var(--color-night-dim);
}
.term__dots { display: flex; gap: 6px; }
.term__dots span { width: 10px; height: 10px; border-radius: 50%; background: var(--color-night-line); }
/* Both pres scroll sideways together, inside the box */
.term__screen {
  overflow-x: auto; padding: 0.9em 1.25em 1em;
  font: var(--size-small)/1.45 var(--font-mono);
}
.term pre { margin: 0; font: inherit; color: inherit; width: max-content; min-width: 100%; }
.term__head { color: var(--color-night-dim); line-height: 1.2; }
.term__logo { color: var(--color-night-accent); line-height: 1; }
.term__name { color: var(--color-night-accent); font-weight: 700; }
/* Positioned with no offsets, the cursor sits where the text ends and takes no room, so moving it shifts nothing */
.term__cursor {
  position: absolute; width: 1ch; height: 1.3em; margin-top: 0.15em;
  background: var(--color-night-ink); opacity: 0.85;
}
.term__cursor.is-off { display: none; }
.term.is-live .term__cursor { animation: term-blink 1.1s steps(1) infinite; }
@keyframes term-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .term.is-live .term__cursor { animation: none; } }

/* While assets/site.js plays the session, what has not been reached yet keeps its room but is not shown */
.term.is-playing .term__line:not(.is-shown),
.term.is-playing .term__char:not(.is-shown) { visibility: hidden; }
.term.is-playing .term__line.is-reply { opacity: 0; transition: opacity 0.5s ease; }
.term.is-playing .term__line.is-reply.is-shown { opacity: 1; }
.term .m { display: inline-block; width: 1ch; text-align: center; }
.term .p { color: var(--color-night-accent); font-weight: 700; user-select: none; }
.term .you { font-weight: 700; }
.term .m { color: var(--color-night-accent); user-select: none; }
.term .r { color: var(--color-night-dim); user-select: none; }
.term .c { color: var(--color-night-dim); }
.term .ok { font-weight: 700; }
.term .no { color: var(--color-negative); font-weight: 700; }

.rows { list-style: none; padding: 0; }
.row { display: grid; gap: 0.3em; padding: 1em 1.35em; }
.row + .row { border-top: 1px solid var(--color-ink-lighter); }
.row h3 { font-size: 1em; font-weight: bold; }
.row h3 a { color: inherit; }
.row p { color: var(--color-ink-dark); font-size: var(--size-small); }
.row code { justify-self: start; max-width: 100%; overflow-x: auto; white-space: nowrap; font-size: var(--size-small); color: var(--color-ink); }

/* A comparison's side by side, in sentences: theirs in the quiet ink, ours after it in full */
.contrasts { list-style: none; padding: 0; margin-inline: auto; max-width: var(--prose-width); display: grid; gap: 1em; font-size: var(--size-lead); }
.contrasts > * { color: var(--color-ink-dark); overflow-wrap: break-word; }
.contrasts strong { color: var(--color-ink); }

/* The home's competitor, turning: what is out fades and blurs away, and is hidden once it has */
.rotor { transition: opacity 400ms ease, filter 400ms ease, visibility 400ms; }
.rotor.is-out { opacity: 0; filter: blur(3px); visibility: hidden; }
/* As wide as the longest name with room to spare, so the line around it never moves */
.rotor--fixed { display: inline-block; width: 11ch; text-align: left; white-space: nowrap; }
.rotor--question { width: 12ch; }
.block__title .rotor { color: var(--color-link); }
/* Every competitor's sentence in the same cell, so it is as tall as the tallest and nothing below it moves */
.rotor-stack { display: grid; }
.rotor-stack > * { grid-area: 1 / 1; }
@media (prefers-reduced-motion: reduce) { .rotor { transition: none; } }

/* Comparisons: one card per page */
.versus-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em; }
.versus-list li { padding: 0.8em 1.1em; display: grid; gap: 0.2em; align-content: start; }
.versus-list a { font-weight: bold; }
.versus-list p { font-size: var(--size-small); color: var(--color-ink-dark); }
@media (width < 40em) { .versus-list { grid-template-columns: minmax(0, 1fr); } }

.pairs { overflow: hidden; }
.pairs__head, .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pairs__head span { padding: 0.6em 1.1em; font-size: var(--size-x-small); font-weight: bold; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-dark); }
.pairs__head span + span, .pair p + p { color: var(--color-link); background: var(--color-ink-lightest); }
.pair p { min-height: 3.25em; display: flex; align-items: center; padding: 0.55em 1.1em; border-top: 1px solid var(--color-ink-lighter); font-size: var(--size-small); }
.pair p + p { color: var(--color-ink); font-weight: 700; }
/* On a phone each pair stacks, and each side carries the head's label */
@media (width < 40em) {
  .pairs__head { display: none; }
  .pair { grid-template-columns: minmax(0, 1fr); }
  .pair p { min-height: 0; display: block; }
  .pair + .pair p:first-child { border-top-color: var(--color-ink-light); }
  .pairs__head + .pair p:first-child { border-top: 0; }
  .pair p::before {
    content: attr(data-label); display: block; margin-bottom: 0.15em;
    font-size: 0.85em; font-weight: bold; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-dark);
  }
  .pair p + p::before { color: var(--color-link); }
}

.yes__title { font-size: var(--size-display); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; }
.yes__list { list-style: none; padding: 0; width: fit-content; margin-inline: auto; display: grid; gap: 0.35em; font-size: var(--size-small); }
.yes__list li { position: relative; padding-inline-start: 1.8em; line-height: 1.45; }
/* The check is cut out of the circle, so it shows the canvas in either theme */
.yes__list li::before {
  content: ""; position: absolute; top: 0.18em; left: 0; width: 1.15em; height: 1.15em; background: var(--color-link);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cmask id='m'%3E%3Crect width='16' height='16' fill='white'/%3E%3Cpath d='M4.2 8.6l2.5 2.5 5.1-5.6' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3Ccircle cx='8' cy='8' r='8' fill='white' mask='url(%23m)'/%3E%3C/svg%3E") center / 100% no-repeat;
}
.yes__list li::after {
  content: "Yes!"; display: inline-block; margin-inline-start: 0.4em; padding: 0 0.3em;
  background: var(--color-highlight); color: var(--color-highlight-ink); font-size: 0.8em; font-weight: 900; letter-spacing: 0.03em;
}

/* Letter: a sheet of paper on two more, each a little askew */
.letter {
  position: relative; isolation: isolate; max-width: var(--column); margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 2.25rem); border-radius: var(--radius); background: var(--color-canvas); box-shadow: var(--shadow);
  font-size: 0.95em;
}
.letter::before, .letter::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--color-canvas); box-shadow: var(--shadow);
}
.letter::before { rotate: -1.2deg; }
.letter::after { rotate: 0.9deg; }
.letter p + p { margin-top: 0.75em; }
.letter__signature { display: flex; align-items: flex-end; gap: 0.85em; margin-top: 1.5em; font-size: var(--size-small); }
.letter__picture { flex: none; width: 3em; height: 3em; border-radius: 50%; }
.letter__autograph { display: block; width: auto; max-width: 100%; height: 3.125em; margin-inline-start: -0.4em; }
.letter .letter__signature p { margin: 0; }
.letter__role { font-size: var(--size-small); color: var(--color-ink-dark); }

/* Ask your agent: dark in either theme */
.canvas > .ask {
  max-width: 64em; border-radius: var(--radius); padding: clamp(1.5rem, 4.5vw, 2.75rem) clamp(1rem, 4vw, 2.5rem);
  background: var(--color-night); color: var(--color-night-ink); color-scheme: dark; text-align: center;
  display: grid; gap: 1em; justify-items: center;
}
.ask__title {
  font-size: clamp(2.25rem, 8vw, 5.75rem); line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase;
  max-width: 11ch;
}
.ask__title span { color: var(--color-night-accent); }
.ask__lead { max-width: 34em; color: var(--color-night-dim); }
.ask__prompt {
  width: 100%; max-width: 40em; border: 1px solid var(--color-night-line); border-radius: var(--radius);
  display: grid; gap: 0;
}
.ask__prompt p { padding: 0.75em 1.1em; font-size: var(--size-small); }
.ask__prompt p::before { content: "> "; color: var(--color-night-dim); }
.ask__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.75em; padding: 1em 1.1em; border-top: 1px solid var(--color-night-line); }
.ask .btn { background: transparent; color: var(--color-night-ink); border-color: var(--color-night-line); font-size: var(--size-small); }
.ask .btn--link { background: var(--color-night-accent); border-color: var(--color-night-accent); color: var(--color-night); }

/* A comparison or a doc: a narrow column of prose under a centred header */
.canvas > .article { max-width: var(--column); display: grid; gap: 1em; }
/* One column that never grows past the prose width: a long command scrolls inside its own box instead of pushing the column off centre */
.article { grid-template-columns: minmax(0, 1fr); }
.article > * { min-width: 0; }
.article__header { text-align: center; }
.article__kicker { font-size: var(--size-small); font-weight: 700; }
.article__title { font-size: var(--size-display); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; margin-top: 0.15em; }
.article__tagline { font-size: var(--size-lead); font-weight: 700; color: var(--color-link); text-align: center; margin-top: 0.25em; }
.article__lead { font-size: var(--size-lead); color: var(--color-ink-dark); margin-top: 0.35em; }
.article__heading { font-size: 1.15em; font-weight: 900; letter-spacing: -0.01em; margin-bottom: 0.2em; }
/* Each section after the first sits apart from the one above it */
.article > section + section { margin-top: 1em; }
.article__answer { color: var(--color-ink); overflow-wrap: anywhere; }
.article__answer + .article__answer { margin-top: 0.5em; }
/* A doc's code: a card of its own in the system mono, as Auditans' integration code. Long lines scroll inside the card, never the page */
.article__code { margin-top: 0.5em; }
.article__code pre { margin: 0; padding: 0.75em 1.1em 1em; overflow-x: auto; font: var(--size-small)/1.6 var(--font-mono); }
.article__code code { background: none; padding: 0; font-size: inherit; }
/* A doc's prompt for the reader's agent: the home's ask box, light, with its copy button */
.article__prompt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.25em 1em; padding: 0.9em 1.1em; }
.article__prompt-label { grid-column: 1 / -1; font-size: var(--size-x-small); font-weight: 700; color: var(--color-ink-dark); }
.article__prompt-text { font-size: var(--size-small); overflow-wrap: anywhere; }
.article__prompt-text::before { content: "> "; color: var(--color-ink-dark); }
.article__prompt .btn { font-size: var(--size-small); }

/* Where mailing lists leaked: a year timeline, one block per incident, then the incidents by year */
.canvas > .leaks__header { text-align: center; }
.leaks__title { font-size: var(--size-display); font-weight: 900; letter-spacing: -0.02em; line-height: 1.05; }
.leaks__lead { max-width: var(--prose-width); margin: 0.9em auto 0; font-size: var(--size-lead); color: var(--color-ink-dark); }

.leaks__timeline { display: grid; gap: 1em; }
.leaks__chart {
  display: grid; grid-template-columns: repeat(var(--years), minmax(0, 1fr)); align-items: end; gap: 3px;
  border-bottom: 1px solid var(--color-ink-light);
}
.leaks__column { display: flex; flex-direction: column-reverse; gap: 3px; text-decoration: none; }
.leaks__dot { display: block; height: 0.62rem; border-radius: 2px; background: var(--color-ink-light); }
.leaks__column--recent .leaks__dot { background: var(--color-link); }
.leaks__column:hover .leaks__dot, .leaks__column:focus-visible .leaks__dot { background: var(--color-ink); }
.leaks__years {
  display: grid; grid-template-columns: repeat(var(--years), minmax(0, 1fr)); gap: 3px; margin-top: -0.5em;
  font-size: 0.7rem; color: var(--color-ink-dark); font-variant-numeric: tabular-nums; text-align: center;
}
.leaks__years span:nth-child(odd) { visibility: hidden; }
@media (width >= 40em) { .leaks__years span:nth-child(odd) { visibility: visible; } }
.leaks__stat { max-width: 34em; margin: 0.5em auto 0; text-align: center; }
.leaks__stat small { display: block; margin-top: 0.4em; color: var(--color-ink-dark); font-size: var(--size-x-small); }

.leaks__list { display: grid; gap: 2.25em; }
.leaks__year { display: grid; gap: 0.25em; scroll-margin-top: 1rem; }
.leaks__year-title { font-size: var(--size-heading); font-weight: 900; display: flex; align-items: baseline; gap: 0.4em; }
.leaks__year-title span { font-size: 0.45em; font-weight: 600; color: var(--color-ink-dark); }
.leaks__items { list-style: none; padding: 0; }
.leaks__items li {
  display: grid; grid-template-columns: 3.5em minmax(0, 1fr); gap: 0.75em;
  padding-block: 0.7em; border-top: 1px solid var(--color-ink-lighter);
}
.leaks__items time { padding-top: 0.15em; color: var(--color-ink-dark); font-size: var(--size-x-small); font-variant-numeric: tabular-nums; }
.leaks__items b { display: block; }
.leaks__items p { margin-top: 0.1em; font-size: var(--size-small); overflow-wrap: anywhere; }
.leaks__items a { font-size: var(--size-x-small); }

.canvas > .bands { max-width: var(--column); display: grid; gap: 1em; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (width < 48em) { .canvas > .bands { grid-template-columns: minmax(0, 1fr); } }
.canvas > .bands:has(> .band:only-child) { grid-template-columns: minmax(0, 1fr); }
.band { border-radius: var(--radius); padding: clamp(1rem, 3vw, 1.5rem); display: grid; gap: 0.5em; align-content: start; }
.band--before { background: var(--color-night); color: var(--color-night-ink); color-scheme: dark; }
.band--after { background: var(--color-canvas); box-shadow: var(--shadow); }
.band__label { font-size: var(--size-x-small); font-weight: bold; letter-spacing: 0.06em; text-transform: uppercase; }
.band--before .band__label { color: var(--color-night-dim); }
.band--after .band__label { color: var(--color-link); }
.band__title { font-size: 1.25em; font-weight: 900; letter-spacing: -0.01em; }
.band ul { padding: 0; list-style: none; display: grid; gap: 0.25em; font-size: var(--size-small); }
.band--before li { color: var(--color-night-dim); }
.band li::before { content: "- "; }
.band--after li::before { content: "+ "; color: var(--color-link); font-weight: 700; }

/* Pricing: a list-size picker over one plan card, as a pricing page lays them out */
.picker { display: grid; gap: 1.1em; padding: clamp(1.25rem, 4vw, 2rem) clamp(1rem, 4vw, 2.25rem); text-align: center; }
.picker__question { font-size: 1.15em; }
.picker__slider { display: grid; gap: 0.6em; justify-items: center; }
.picker__slider[hidden] { display: none; }
.picker__size { font-size: var(--size-heading); font-variant-numeric: tabular-nums; }
.picker__input { width: 100%; max-width: 32em; accent-color: var(--color-link); }
.picker__price, .plan__price { color: var(--color-ink-dark); }
.picker__price b, .plan__price b { font-size: var(--size-display); line-height: 1; color: var(--color-link); letter-spacing: -0.02em; }
.picker__sizes { list-style: none; padding: 0; text-align: start; font-variant-numeric: tabular-nums; }
.picker__sizes li { display: flex; justify-content: space-between; gap: 1em; padding: 0.35em 0; font-size: var(--size-small); }
.picker__sizes li + li { border-top: 1px solid var(--color-ink-lighter); }
.picker__sizes b { color: var(--color-link); }
.picker__note { max-width: 32em; margin-inline: auto; font-size: var(--size-small); color: var(--color-ink-dark); }

.plan { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.plan__head { display: grid; gap: 0.6em; justify-items: center; align-content: start; padding: clamp(1.25rem, 4vw, 2rem); text-align: center; }
.plan__name { font-size: var(--size-heading); }
.plan__tagline { max-width: 20em; color: var(--color-ink-dark); }
.plan__includes { padding: clamp(1.25rem, 4vw, 2rem); background: var(--color-ink-lightest); border-top: 1px solid var(--color-ink-lighter); }
.plan__includes-title { font-size: 1em; font-weight: bold; margin-bottom: 0.6em; }
.plan__includes ul { list-style: none; padding: 0; display: grid; gap: 0.45em; font-size: var(--size-small); }
.plan__includes li { padding-inline-start: 1.4em; text-indent: -1.4em; }
.plan__includes li::before { content: "✓"; display: inline-block; width: 1.4em; text-indent: 0; color: var(--color-link); font-weight: bold; }
@media (width >= 48em) {
  .plan { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .plan__includes { border-top: 0; border-inline-start: 1px solid var(--color-ink-lighter); }
}


/* The agents page: one column of sections, each a large heading over a short paragraph */
.agents { display: grid; gap: 0.75em; }
.agents__heading { font-size: var(--size-heading); font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; }
.agents__text { font-size: var(--size-lead); overflow-wrap: anywhere; text-wrap: wrap; }
.agents__more { font-weight: 700; }

.cta { display: grid; justify-items: center; gap: 1.25em; padding: clamp(1.75rem, 4.5vw, 2.75rem) clamp(1rem, 4vw, 2.5rem); text-align: center; }
.cta__title { font-size: var(--size-heading); max-width: 20em; }
.cta__alt { max-width: 32em; color: var(--color-ink-dark); }
.cta__next { color: var(--color-ink-dark); font-size: var(--size-small); }

.footer {
  display: grid; justify-items: center; gap: 1.75em; text-align: center;
  padding-block: 2.75em 2.25em; padding-left: var(--gutter); padding-right: var(--gutter-end);
}
.footer__signoff { font-size: var(--size-heading); }
.footer__nav { display: grid; gap: 0.9em; width: 100%; max-width: 40em; }
.footer__heading { margin-bottom: 0.25em; font-size: var(--size-x-small); font-weight: 900; letter-spacing: -0.25px; text-transform: uppercase; color: var(--color-ink-dark); }
.footer__heading a { color: inherit; text-decoration: none; }
.footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.1em 0.9ch; padding: 0; list-style: none; font-weight: 900; font-variant-caps: all-small-caps; letter-spacing: -0.25px; }
.footer__links a { color: var(--color-link); text-decoration: none; }
@media (any-hover: hover) { .footer__links a:hover, .footer__heading a:hover { color: var(--color-ink); } }
@media (width < 40em) {
  .footer__nav { font-size: var(--size-small); }
}
.footer__legal { font-size: var(--size-x-small); color: var(--color-ink-dark); }