/* =============================================================================
   about.css — the About page, art-directed.

   Concept: the page is an instrument, and scrolling is the reading. The site's
   argument is that most of this market guesses and we measure, so the whole
   visual language is evidence: solid strokes are measured, dashed strokes are
   guessed, and a ruled spine down the page advances as the argument is proven.

   Theme: token-derived end to end, so the page is light when the site is light
   (like the homepage) and deepens in dark mode. Banded sections change SURFACE,
   never theme. Only --ab-* names are declared, so tests/theme-lint.mjs sees no
   second source of truth for a token colour.

   Motion: every effect is additive. With prefers-reduced-motion the page still
   reads top to bottom with nothing hidden, because the JS reveals on a class
   the CSS also grants immediately under the reduced-motion query.
   ========================================================================== */

.about-page {
  /* layout */
  --ab-wrap: 1180px;
  --ab-wide: 1400px;
  --ab-gut: clamp(20px, 5vw, 64px);

  /* The banded sections are a change of SURFACE, not a change of theme. In light
     mode they are a tinted light band; in dark mode they deepen. Everything is
     token-derived so the page is light when the site is light, exactly like the
     homepage, and never a black slab dropped into a light page. */
  --ab-stage: var(--bg-2);
  --ab-stage-2: var(--panel);
  --ab-stage-ink: var(--text);
  --ab-stage-ink-2: var(--text-3);
  --ab-stage-ink-3: var(--muted);
  --ab-stage-line: var(--border);
  --ab-stage-hair: var(--hairline);

  /* meaning */
  --ab-measured: var(--cyan);
  --ab-good: var(--green);
  --ab-guess: var(--muted);
  --ab-alarm: var(--red);

  --ab-tint: color-mix(in srgb, var(--brand) 9%, transparent);
  --ab-tint-2: color-mix(in srgb, var(--brand) 16%, transparent);

  --ab-ease: cubic-bezier(.22, 1, .36, 1);
}

/* The page's base typography used to live in the inline <style> this file
   replaced. Without it the body falls back to the UA serif, so it is restored
   here rather than assumed from the chrome stylesheet. */
.about-page {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.about-page *, .about-page *::before, .about-page *::after { box-sizing: border-box; }
.about-page img, .about-page svg { max-width: 100%; }

.about-main { overflow: clip; }
/* Grid and flex children default to min-width:auto, which lets a long line of
   text push a column past its track instead of wrapping inside it. */
.ab-hero-grid > *, .ab-prov > * { min-width: 0; }
.ab-answer { max-width: 100%; }

/* ---------- shared type ------------------------------------------------- */
.ab-wrap { width: 100%; max-width: var(--ab-wrap); margin-inline: auto; padding-inline: var(--ab-gut); }
.ab-wrap--wide { max-width: var(--ab-wide); }

.ab-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font: 700 10.5px/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted);
}
.ab-kicker::before {
  content: ""; width: 22px; height: 1px; background: currentColor; opacity: .55;
}
.ab-stage-band .ab-kicker { color: var(--ab-stage-ink-3); }

.ab-h {
  font-family: var(--font-heading);
  font-weight: 800; letter-spacing: -0.035em; line-height: 1.02;
  font-size: clamp(32px, 5.4vw, 62px);
  color: var(--text); margin: 18px 0 0; text-wrap: balance;
}
.ab-stage-band .ab-h { color: var(--ab-stage-ink); }
.ab-h em {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400;
  letter-spacing: -0.02em;
  background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ab-h b { font-weight: 800; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

.ab-lede {
  font-size: clamp(15px, 1.35vw, 17.5px); line-height: 1.72; color: var(--text-3);
  max-width: 62ch; margin: 20px 0 0;
}
.ab-stage-band .ab-lede { color: var(--ab-stage-ink-2); }
.ab-lede + .ab-lede { margin-top: 14px; }
.ab-lede strong { color: var(--text); font-weight: 600; }
.ab-stage-band .ab-lede strong { color: var(--ab-stage-ink); }

/* ---------- the ruled spine --------------------------------------------- */
.ab-spine {
  position: fixed; left: max(14px, 2.1vw); top: 0; bottom: 0; width: 1px; z-index: 5;
  background: linear-gradient(180deg, transparent, var(--border) 8%, var(--border) 92%, transparent);
  pointer-events: none;
}
.ab-spine i {
  position: absolute; left: -1px; top: 0; width: 3px; border-radius: 2px;
  height: var(--ab-progress, 0%);
  background: var(--gradient);
  box-shadow: 0 0 14px color-mix(in srgb, var(--brand) 55%, transparent);
}
@media (max-width: 1080px) { .ab-spine { display: none; } }

/* ---------- reveal ------------------------------------------------------ */
.ab-rise { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ab-ease), transform .8s var(--ab-ease); }
.ab-rise.in { opacity: 1; transform: none; }
.ab-stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ab-ease), transform .7s var(--ab-ease); }
.ab-stagger.in > * { opacity: 1; transform: none; }
.ab-stagger.in > *:nth-child(2) { transition-delay: .09s; }
.ab-stagger.in > *:nth-child(3) { transition-delay: .18s; }
.ab-stagger.in > *:nth-child(4) { transition-delay: .27s; }
.ab-stagger.in > *:nth-child(5) { transition-delay: .36s; }

/* =========================================================================
   ACT 1 — HERO. An answer engine writes an answer, and the brand is not in it.
   ========================================================================= */
.ab-stage-band {
  position: relative; background: var(--ab-stage); color: var(--ab-stage-ink);
  isolation: isolate; overflow: hidden;
}
.ab-stage-band::before {
  /* faint measurement grid */
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image: linear-gradient(var(--ab-stage-hair) 1px, transparent 1px),
                    linear-gradient(90deg, var(--ab-stage-hair) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 20%, transparent 78%);
}
/* A soft brand wash keeps a light band from reading as an accidental grey box. */
.ab-stage-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(72% 58% at 76% 16%, var(--ab-tint-2), transparent 68%);
}
.ab-stage-band > * { position: relative; z-index: 1; }

.ab-hero { padding: clamp(72px, 10vh, 118px) 0 clamp(56px, 8vh, 92px); }
.ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
@media (max-width: 940px) { .ab-hero-grid { grid-template-columns: minmax(0, 1fr); } }

.ab-hero .ab-h { font-size: clamp(38px, 6.4vw, 78px); }
.ab-hero-sub { margin-top: 26px; max-width: 46ch; }


/* the answer card */
.ab-answer {
  border: 1px solid var(--ab-stage-line); border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.ab-answer-bar {
  display: flex; align-items: center; gap: 9px; padding: 12px 15px;
  border-bottom: 1px solid var(--ab-stage-hair);
}
.ab-answer-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--ab-stage-line); flex: none; }
.ab-answer-bar b {
  margin-left: 6px; font: 700 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ab-stage-ink-3);
}
.ab-answer-q {
  display: flex; align-items: center; gap: 10px; padding: 16px 18px;
  border-bottom: 1px solid var(--ab-stage-hair);
  font: 500 14.5px/1.4 var(--font); color: var(--ab-stage-ink);
}
.ab-answer-q svg { color: var(--ab-stage-ink-3); flex: none; }
.ab-caret { display: inline-block; width: 2px; height: 1.05em; background: var(--brand-2); vertical-align: -2px; animation: ab-blink 1s steps(1) infinite; }
@keyframes ab-blink { 50% { opacity: 0; } }
.ab-answer-body { padding: 18px; min-height: 178px; font: 400 14.5px/1.85 var(--font); color: var(--ab-stage-ink-2); }
.ab-answer-body .n { color: var(--ab-stage-ink); font-weight: 600; }
.ab-answer-body .rival {
  color: var(--ab-stage-ink); font-weight: 600;
  background: linear-gradient(180deg, transparent 62%, color-mix(in srgb, var(--brand) 42%, transparent) 62%);
  padding: 0 2px;
}
.ab-answer-foot {
  display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 13px 18px;
  border-top: 1px solid var(--ab-stage-hair);
  font: 600 12px/1 var(--font); color: var(--ab-stage-ink-3);
  opacity: 0; transform: translateY(6px); transition: opacity .6s var(--ab-ease), transform .6s var(--ab-ease);
}
.ab-answer-foot.in { opacity: 1; transform: none; }
.ab-answer-foot .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ab-alarm); box-shadow: 0 0 10px var(--ab-alarm); flex: none; }
.ab-answer-foot em { font-style: normal; color: var(--ab-stage-ink-2); }

/* =========================================================================
   ACT 2 — PREMISE. Ten links collapse into one answer, driven by scroll.
   ========================================================================= */
.ab-act { padding: clamp(60px, 8vh, 100px) 0; position: relative; }
.ab-act--tight { padding-block: clamp(52px, 6.5vh, 84px); }

/* No pinning and no scroll scrubbing: the stage sits in normal flow and plays
   once when it comes into view. The results keep occupying their space while
   they fade, so the answer arrives without the page jumping under the reader. */
.ab-morph { position: relative; margin: 44px auto 0; width: min(100%, 720px); }
.ab-morph-stage { position: relative; }

.ab-serp { display: grid; gap: 10px; }
.ab-serp-row {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel);
  padding: 13px 16px; display: grid; gap: 7px;
  transform-origin: 50% 50%;
  box-shadow: var(--shadow-sm);
}
/* Real result text, not grey bars. The whole page argues against placeholder
   thinking, so the illustration has to be the actual thing it depicts. */
.ab-serp-row .u { font: 500 11.5px/1.3 var(--font-mono); color: var(--muted); letter-spacing: .01em; }
.ab-serp-row .t { font: 600 15px/1.35 var(--font); color: var(--purple-bright); }
.ab-serp-row .d { font: 400 12.5px/1.5 var(--font); color: var(--text-3); }
@media (max-width: 620px) {
  .ab-serp-row .t { font-size: 13.5px; }
  .ab-serp-row .d { display: none; }
}

.ab-serp-row {
  transition: opacity .6s var(--ab-ease), transform .6s var(--ab-ease);
  transition-delay: calc(var(--n, 0) * 55ms);
}
.ab-morph.is-collapsing .ab-serp-row { opacity: 0; transform: translateY(calc(var(--pull, 0) * 1px)) scale(.94); }
.ab-serp-row:nth-child(1) { --n: 0; --pull: 74; }
.ab-serp-row:nth-child(2) { --n: 1; --pull: 44; }
.ab-serp-row:nth-child(3) { --n: 2; --pull: 15; }
.ab-serp-row:nth-child(4) { --n: 2; --pull: -15; }
.ab-serp-row:nth-child(5) { --n: 1; --pull: -44; }
.ab-serp-row:nth-child(6) { --n: 0; --pull: -74; }

/* 1fr to 0fr collapses the results to nothing without measuring anything, so
   the answer simply takes their place and the page never jumps. */
.ab-serp-wrap { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .7s var(--ab-ease), opacity .5s ease; }
.ab-serp-wrap > * { min-height: 0; overflow: hidden; }
.ab-morph.is-collapsing .ab-serp-wrap { grid-template-rows: 0fr; opacity: 0; }
.ab-morph-answer {
  opacity: 0; transform: translateY(12px);
  transition: opacity .55s var(--ab-ease), transform .55s var(--ab-ease);
}
.ab-morph.is-answered .ab-morph-answer { opacity: 1; transform: none; }
.ab-morph-cap { position: static; transform: none; display: block; text-align: center; margin-top: 20px; }
.ab-morph-card {
  width: 100%; border: 1px solid var(--ab-tint-2); border-radius: var(--radius-lg);
  background: var(--panel); box-shadow: var(--shadow-lg);
  padding: 26px 28px; display: grid; gap: 12px;
}
.ab-morph-card .lbl {
  font: 700 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brand-2);
}
.ab-morph-card p { margin: 0; font: 400 15px/1.75 var(--font); color: var(--text-2); }
.ab-morph-card p b { color: var(--text); font-weight: 600; background: linear-gradient(180deg, transparent 62%, var(--ab-tint-2) 62%); padding: 0 2px; }
.ab-morph-card .src { font: 500 11.5px/1 var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.ab-morph-cap {
  position: absolute; left: 50%; bottom: -46px; transform: translateX(-50%);
  font: 700 10.5px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
}

/* =========================================================================
   ACT 3 — THE BLIND SPOT. A flat line that is hiding a month of citations.
   ========================================================================= */
.ab-flat { margin-top: 46px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); padding: clamp(18px, 2.6vw, 30px); box-shadow: var(--shadow-sm); }
.ab-flat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.ab-flat-head b { font: 700 11px/1 var(--font-mono); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.ab-flat-head span { font-size: 12.5px; color: var(--text-3); }
.ab-flat-plot { position: relative; height: 260px; }
.ab-flat-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ab-flat-line { fill: none; stroke: var(--ab-guess); stroke-width: 2; stroke-dasharray: 5 5; opacity: .85; }
.ab-flat-zero { font: 700 10px/1 var(--font-mono); letter-spacing: .12em; fill: var(--muted); text-transform: uppercase; }

.ab-cites { position: absolute; inset: auto 0 34px; display: flex; align-items: flex-end; gap: clamp(3px, .8vw, 9px); height: 190px; }
.ab-cite { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.ab-cite b {
  display: block; width: 100%; border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  height: 0; transition: height .9s var(--ab-ease); transition-delay: var(--d, 0ms);
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 62%, transparent), color-mix(in srgb, var(--brand) 12%, transparent));
  border: 1px solid var(--ab-tint-2); border-bottom: 0;
}
.ab-cites.in .ab-cite b { height: var(--h, 30%); }
.ab-cite:hover b { background: var(--gradient); }
.ab-cite-tip {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--ab-stage); color: var(--ab-stage-ink); border: 1px solid var(--ab-stage-line);
  border-radius: var(--radius-sm); padding: 8px 11px; white-space: nowrap;
  font: 600 11.5px/1.5 var(--font); opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease;
  box-shadow: var(--shadow-lg); z-index: 3;
}
.ab-cite-tip s { display: block; font-weight: 500; color: var(--ab-stage-ink-3); text-decoration: none; }
.ab-cite:hover .ab-cite-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

.ab-flat-legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline); }
.ab-flat-legend span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-3); }
.ab-flat-legend i { width: 18px; height: 0; border-top: 2px dashed var(--ab-guess); flex: none; }
.ab-flat-legend i.solid { border-top: 0; height: 11px; width: 11px; border-radius: 3px; background: var(--gradient); }

.ab-count { display: flex; gap: clamp(18px, 4vw, 54px); flex-wrap: wrap; margin-top: 34px; }
.ab-count div { min-width: 130px; }
.ab-count b {
  display: block; font-family: var(--font-heading); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(34px, 4.6vw, 54px); line-height: 1; color: var(--text);
}
.ab-count b.alarm { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-count span { display: block; margin-top: 9px; font-size: 13px; color: var(--text-3); max-width: 24ch; line-height: 1.55; }

/* =========================================================================
   ACT 4 — THE STANDARD. Every number carries where it came from.
   ========================================================================= */
.ab-prov { margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(20px, 3vw, 40px); align-items: start; }
@media (max-width: 900px) { .ab-prov { grid-template-columns: minmax(0, 1fr); } }

.ab-prov-panel { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--panel); overflow: hidden; box-shadow: var(--shadow-sm); }
.ab-prov-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--hairline); }
.ab-prov-head b { font: 700 10.5px/1 var(--font-mono); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.ab-prov-head .live { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font: 700 10px/1 var(--font-mono); letter-spacing: .12em; color: var(--ab-good); text-transform: uppercase; }
.ab-prov-head .live i { width: 6px; height: 6px; border-radius: 50%; background: var(--ab-good); box-shadow: 0 0 9px var(--ab-good); animation: ab-pulse 2s ease-in-out infinite; }
@keyframes ab-pulse { 50% { opacity: .35; } }

.ab-prov-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  width: 100%; text-align: left; padding: 16px 18px; border: 0; border-top: 1px solid var(--hairline);
  background: none; cursor: pointer; font: inherit; color: inherit;
  transition: background .18s ease;
}
.ab-prov-row:first-of-type { border-top: 0; }
.ab-prov-row:hover { background: var(--ab-tint); }
.ab-prov-row.on { background: var(--ab-tint); }
.ab-prov-row .k { font-size: 14px; color: var(--text-2); }
.ab-prov-row .v { font-family: var(--font-heading); font-weight: 800; font-size: 19px; letter-spacing: -.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.ab-badge {
  font: 700 9.5px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  padding: 5px 9px; border-radius: var(--radius-pill); border: 1px solid currentColor; white-space: nowrap;
}
.ab-badge.m { color: var(--ab-good); }
.ab-badge.l { color: var(--ab-measured); }
.ab-badge.e { color: var(--gold); }

.ab-prov-out { border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 20px 22px; background: var(--bg-2); min-height: 210px; position: sticky; top: 96px; }
.ab-prov-out .lab { font: 700 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ab-prov-out h4 { font-family: var(--font-heading); font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin: 12px 0 8px; color: var(--text); }
.ab-prov-out p { font-size: 13.5px; line-height: 1.65; color: var(--text-3); margin: 0; }
.ab-prov-chain { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.ab-prov-chain li { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--text-3); line-height: 1.5; }
.ab-prov-chain li svg { flex: none; margin-top: 2px; color: var(--brand-2); }
.ab-prov-swap { animation: ab-swap .42s var(--ab-ease); }
@keyframes ab-swap { from { opacity: 0; transform: translateY(8px); } }

/* =========================================================================
   ACT 5 — THE REFUSALS.
   ========================================================================= */
.ab-refuse { margin-top: 40px; display: grid; gap: 0; border-top: 1px solid var(--hairline); }
.ab-refuse li { list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(16px, 3vw, 34px); align-items: baseline; padding: clamp(20px, 2.6vw, 30px) 0; border-bottom: 1px solid var(--hairline); }
.ab-refuse .no {
  position: relative; font-family: var(--font-heading); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(19px, 2.3vw, 27px); color: var(--text-3); white-space: nowrap;
}
.ab-refuse .no::after {
  content: ""; position: absolute; left: -3px; top: 52%; height: 2px; width: 0;
  background: var(--ab-alarm); border-radius: 2px;
  transition: width .6s var(--ab-ease); transition-delay: var(--d, 0ms);
}
.ab-refuse.in .no::after { width: calc(100% + 6px); }
.ab-refuse .why { font-size: 14.5px; line-height: 1.7; color: var(--text-3); }
.ab-refuse .why b { color: var(--text); font-weight: 600; }


/* =========================================================================
   ACT 7 — THE ADDRESS.
   ========================================================================= */
.ab-addr { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
.ab-addr div { background: var(--panel); padding: 22px; }
.ab-addr dt { font: 700 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ab-addr dd { margin: 11px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text); }
.ab-addr a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--ab-tint-2); }
.ab-addr a:hover { color: var(--brand-2); border-bottom-color: var(--brand-2); }

/* =========================================================================
   ACT 8 — THE CLOSE.
   ========================================================================= */
.ab-close { padding: clamp(72px, 10vh, 118px) 0; text-align: center; }
.ab-close .ab-kicker { justify-content: center; }
.ab-close .ab-h { font-size: clamp(34px, 5.6vw, 66px); }
.ab-close .ab-lede { margin-inline: auto; text-align: center; }
.ab-cta { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; margin-top: 34px; }
.ab-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 14px 26px;
  border-radius: var(--radius-pill); font: 700 14px/1 var(--font); text-decoration: none;
  border: 1px solid var(--ab-stage-line); color: var(--ab-stage-ink);
  transition: transform .2s var(--ab-ease), border-color .2s ease, background .2s ease;
}
.ab-btn:hover { transform: translateY(-2px); border-color: var(--brand-2); }
.ab-btn.primary { background: var(--gradient); border-color: transparent; color: var(--on-brand);  }
.ab-fine { margin-top: 22px; font: 500 12px/1 var(--font); color: var(--ab-stage-ink-3); display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }

/* ---------- reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ab-rise, .ab-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ab-cites .ab-cite b { height: var(--h, 30%) !important; transition: none !important; }
  .ab-refuse .no::after { width: calc(100% + 6px) !important; transition: none !important; }
  .ab-caret, .ab-prov-head .live i { animation: none !important; }
  /* with no motion the answer follows the results instead of covering them */
  .ab-morph-answer { position: static !important; opacity: 1 !important; transform: none !important; margin-top: 18px; }
  .ab-serp-row { transition: none !important; opacity: 1 !important; transform: none !important; }
  .ab-morph-cap { position: static !important; transform: none !important; display: block; margin-top: 18px; text-align: center; }
  .ab-answer-foot { opacity: 1 !important; transform: none !important; }
}

/* ---------- engine breakdown -------------------------------------------- */
/* Which engines used the page, in the same illustrated month as the chart
   above. Widths live here rather than in a style attribute so the markup
   stays copy, not layout. */
.ab-engines { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--hairline); display: grid; gap: 10px; }
.ab-eng-h { font: 700 10px/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.ab-eng-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 28px; gap: 14px; align-items: center; }
.ab-eng-row .n { font-size: 13px; color: var(--text-2); }
.ab-eng-row .v { font: 700 13px/1 var(--font-heading); color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.ab-eng-row .bar { height: 9px; border-radius: var(--radius-pill); background: var(--bg-2); border: 1px solid var(--hairline); overflow: hidden; }
.ab-eng-row .bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--gradient); transition: width .9s var(--ab-ease); transition-delay: var(--d, 0ms); }
.ab-flat.in .ab-eng-row .bar i { width: var(--w, 0); }
.ab-eng-row:nth-child(2) { --w: 100%; --d: 60ms; }
.ab-eng-row:nth-child(3) { --w: 78%; --d: 150ms; }
.ab-eng-row:nth-child(4) { --w: 56%; --d: 240ms; }
.ab-eng-row:nth-child(5) { --w: 34%; --d: 330ms; }
@media (prefers-reduced-motion: reduce) { .ab-eng-row .bar i { transition: none !important; width: var(--w, 0) !important; } }