/* ===================================================================
   CITEHOUND — v3 "Confident Editorial"
   Surface rhythm: cool light base / white panels / navy plates.
   Type: Gloock (display) · Hanken Grotesk (text) · Spline Sans Mono.
   Gold as decisive accent ink. No gradients. Soft single shadow only.
   =================================================================== */

:root {
  --bg: #EEF1F5;
  --white: #FFFFFF;
  --navy-950: #0B1526;
  --navy-900: #10203B;
  --navy-800: #17304F;

  --ink: #14202E;
  --ink-soft: #4B5766;
  --ink-faint: #87909C;

  --line: #D9DEE6;
  --line-on-navy: rgba(255, 255, 255, 0.14);

  --gold: #C2922F;
  --gold-soft: #E7C77C;
  --gold-deep: #97701F;

  --ok: #2E7D5B;
  --ok-tint: #E3F1EA;
  --risk: #B04A3A;
  --risk-tint: #F7E8E5;
  --warn-tint: #FBF0DC;

  --font-display: 'Gloock', Georgia, serif;
  --font-body: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Spline Sans Mono', 'SF Mono', monospace;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 2px 4px rgba(11, 21, 38, 0.05), 0 14px 34px -14px rgba(11, 21, 38, 0.18);

  --t: 150ms ease;
  --content-width: 1180px;
}

/* ----------------------------- Reset ----------------------------- */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; }
p { margin: 0; }
a { color: inherit; }

button {
  font-family: inherit;
  color: inherit;
  text-align: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; margin: 0; color: var(--ink); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy-950);
  color: var(--white);
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 0; }

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

/* ----------------------------- Type utilities ----------------------------- */

.kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 16px;
}
.kicker--on-navy { color: var(--gold-soft); }

/* ----------------------------- Buttons & inputs ----------------------------- */

.btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 12px 22px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), color var(--t), opacity var(--t);
}
.btn:disabled { cursor: progress; opacity: 0.65; }

.btn--primary { background: var(--navy-950); color: var(--white); }
.btn--primary:hover { background: var(--navy-800); }

.btn--gold { background: var(--gold); color: var(--navy-950); }
.btn--gold:hover { background: var(--gold-deep); color: var(--white); }

.btn--ghost { background: transparent; color: var(--ink-soft); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn--ghost-on-navy { background: transparent; color: var(--white); border-color: var(--line-on-navy); }
.btn--ghost-on-navy:hover { border-color: var(--gold-soft); color: var(--gold-soft); }

input.field, select.field, textarea.field {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  transition: border-color var(--t);
}
input.field::placeholder, textarea.field::placeholder { color: var(--ink-faint); }
input.field:focus, select.field:focus, textarea.field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
textarea.field { resize: vertical; min-height: 84px; font-size: 14px; line-height: 1.5; }
select.field { appearance: auto; cursor: pointer; }

/* ----------------------------- Header ----------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(238, 241, 245, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
  transition: background var(--t), border-color var(--t);
}
.site-header__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
}
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; flex-shrink: 0; }
.logo__icon { display: inline-flex; flex-shrink: 0; color: var(--navy-950); transition: color var(--t); }
.logo__icon svg { display: block; width: 26px; height: 26px; }
.logo__mark {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--navy-950);
  transition: color var(--t);
}

.site-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
}
.site-nav__link {
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color var(--t), border-color var(--t);
}
.site-nav__link:hover { color: var(--ink); border-color: var(--gold); }

/* Playbooks dropdown — opens on hover or keyboard focus (see nav.js for
   Escape / click-outside / arrow-key handling). The three links stay in
   the HTML at all times; only their visibility toggles. */
.nav-dropdown { position: relative; }
.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  border-bottom: 1px solid transparent;
  margin: 0;
  padding: 0 0 2px;
  cursor: pointer;
}
.nav-dropdown__caret { flex-shrink: 0; }

.nav-dropdown__menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  z-index: 60;
  width: 300px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--t);
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
}

.nav-dropdown__item {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background var(--t);
}
.nav-dropdown__item:hover, .nav-dropdown__item:focus-visible { background: var(--bg); }

.nav-dropdown__item-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
}
.nav-dropdown__item-desc {
  display: block;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 3px;
  white-space: normal;
}

/* Mobile nav — a persistent, horizontally scrollable row under the
   header, shown only below 640px in place of the hidden desktop nav. */
.mobile-nav { display: none; position: relative; }
.mobile-nav__scroll {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  white-space: nowrap;
  padding: 0 28px 14px 20px;
}
.mobile-nav__scroll::-webkit-scrollbar { display: none; }
.mobile-nav__scroll .site-nav__link { flex-shrink: 0; }
.mobile-nav__fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 14px;
  width: 28px;
  background: rgba(238, 241, 245, 0.9);
  backdrop-filter: blur(8px);
  pointer-events: none;
}

/* Homepage-only: the header sits directly on the navy hero field below
   it, so it reads as navy too — same colour, no border, no seam. JS
   (nav.js) adds .site-header--scrolled once the hero has scrolled out
   of view, which swaps it back to the standard light header via the
   higher-specificity compound rule below. With no JS the header stays
   navy, which is legible against the hero and against the lighter
   sections further down the page. */
.site-header--hero-navy {
  background: var(--navy-950);
  border-bottom-color: transparent;
}
.site-header--hero-navy .logo__mark, .site-header--hero-navy .logo__icon { color: var(--white); }
.site-header--hero-navy .site-nav__link { color: rgba(255, 255, 255, 0.7); }
.site-header--hero-navy .site-nav__link:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.site-header--hero-navy .mobile-nav__fade { background: rgba(11, 21, 38, 0.9); }

.site-header--hero-navy.site-header--scrolled {
  background: rgba(238, 241, 245, 0.9);
  border-bottom-color: var(--line);
}
.site-header--hero-navy.site-header--scrolled .logo__mark, .site-header--hero-navy.site-header--scrolled .logo__icon { color: var(--navy-950); }
.site-header--hero-navy.site-header--scrolled .site-nav__link { color: var(--ink-soft); }
.site-header--hero-navy.site-header--scrolled .site-nav__link:hover { color: var(--ink); border-color: var(--gold); }
.site-header--hero-navy.site-header--scrolled .mobile-nav__fade { background: rgba(238, 241, 245, 0.9); }

/* ----------------------------- Sections ----------------------------- */

.section__inner {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 32px;
}

.section-title {
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.12;
  letter-spacing: 0.005em;
  max-width: 680px;
}
.section-sub {
  margin-top: 16px;
  max-width: 580px;
  font-size: 16.5px;
  color: var(--ink-soft);
}

/* ----------------------------- Hero (with live scan form) ----------------------------- */

.hero { padding: 72px 0 88px; }
.hero--tight { padding-top: 8px; }

.hero__grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 56px;
  align-items: center;
}

.hero__title {
  font-size: clamp(40px, 5.2vw, 66px);
  line-height: 1.04;
  color: var(--navy-950);
}
.hero__title em { font-style: italic; color: var(--gold-deep); }

.hero__sub {
  margin-top: 22px;
  max-width: 500px;
  font-size: 17.5px;
  color: var(--ink-soft);
}

.hero__form {
  margin-top: 32px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 520px;
}
.hero__form .field { flex: 1; min-width: 210px; }

.hero__fineprint {
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
}

.hero__figures {
  margin-top: 26px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}
.hero__figure { display: flex; flex-direction: column; gap: 2px; }
.hero__figure b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  color: var(--navy-950);
}
.hero__figure span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.scan__status {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
  min-height: 20px;
  white-space: pre-line;
}
.scan__status.is-error { color: var(--risk); }

.scan__retry { margin-top: 10px; display: none; }
.scan__retry.is-visible { display: inline-flex; }

/* Homepage hero as a navy field — a distinct surface, not a continuation
   of the page. Ends where the capabilities block begins; the colour
   change is the divider, so no rule/border here. The scan input and
   gold button are left untouched: white-on-navy and gold-on-navy are
   already the strongest pairings the palette has. */
.hero--navy { background: var(--navy-950); }
.hero--navy .hero__title { color: var(--white); }
.hero--navy .hero__title em { color: var(--gold-soft); }
.hero--navy .hero__sub { color: rgba(255, 255, 255, 0.72); }
.hero--navy .hero__fineprint { color: rgba(255, 255, 255, 0.55); }
.hero__alt { margin-top: 8px; font-family: var(--font-mono); font-size: 12px; }
.hero__alt a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; transition: color 150ms ease; }
.hero__alt a:hover { color: var(--ink); }
.hero--navy .hero__alt a { color: var(--gold-soft); }
.hero--navy .hero__alt a:hover { color: var(--white); }
.hero--navy .hero__figure b { color: var(--white); }
.hero--navy .hero__figure span { color: rgba(255, 255, 255, 0.55); }
.hero--navy .scan__status { color: rgba(255, 255, 255, 0.72); }
.hero--navy .scan__status.is-error { color: #E8998C; } /* --risk, lightened for legibility on navy — no existing token covers this */

/* --- Hero visual --- */

.hero__visual { position: relative; min-height: 380px; }

.search-mock {
  position: absolute;
  top: 4px;
  left: 0;
  width: 76%;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 22px;
  opacity: 0.55;
  transform: rotate(-3deg);
}
.search-mock__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.search-mock__line {
  display: block;
  height: 8px;
  border-radius: 4px;
  background: var(--line);
  margin-bottom: 10px;
}
.search-mock__line.short { width: 55%; }

.answer-mock {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 92%;
  background: var(--navy-950);
  border-radius: var(--radius);
  border: 1px solid rgba(194, 146, 47, 0.4);
  padding: 26px 28px;
  box-shadow: var(--shadow);
}
.answer-mock__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 16px;
}
.answer-mock__label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gold-soft);
}
.answer-mock__query {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16.5px;
  color: var(--white);
  margin-bottom: 14px;
}
.answer-mock__response p {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
}
.answer-mock__response ol { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.answer-mock__response li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line-on-navy);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}
.answer-mock__brand { font-size: 13.5px; color: var(--white); font-weight: 600; }
.cited-badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--gold-soft);
}

@media (prefers-reduced-motion: no-preference) {
  .answer-mock { animation: rise 0.7s ease both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Standalone variant — the same plate used outside the hero's absolutely-
   positioned two-layer stack (e.g. the agentic commerce band), sitting in
   normal flow instead of pinned to a .hero__visual ancestor. */
.answer-mock--standalone { position: static; width: 100%; }

/* Inverted variant — the homepage hero only, once the hero is navy: a
   white plate reads as the lit object against a dark field, which is
   closer to what the copy argues than a navy-on-navy plate that used
   to disappear. .answer-mock__response/__brand and .cited-badge are
   also reused on pro.html against a navy .bot-console — scoped here so
   that usage is untouched. */
.answer-mock--inverted { background: var(--white); border: 1px solid var(--line); }
.answer-mock--inverted .answer-mock__label { color: var(--gold-deep); }
.answer-mock--inverted .answer-mock__query { color: var(--navy-950); }
.answer-mock--inverted .answer-mock__response p { color: var(--ink-soft); }
.answer-mock--inverted .answer-mock__response li { background: var(--bg); border-color: var(--line); }
.answer-mock--inverted .answer-mock__brand { color: var(--ink); }
.answer-mock--inverted .cited-badge { color: var(--gold-deep); }

/* The faded SERP card drops further back against navy so it reads as a
   ghost rather than competing with the (now white) answer-engine plate. */
.hero--navy .search-mock { opacity: 0.3; }

/* ----------------------------- Report panel ----------------------------- */

#scanReport, #scanProgress { padding: 0 0 96px; }
#scanReport[hidden], #scanProgress[hidden] { display: none; }

.report-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
}

.scan-report__grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 36px;
  align-items: start;
}

.score-entry { border-top: 3px solid var(--navy-950); padding-top: 20px; }
.score-entry__value {
  font-family: var(--font-display);
  font-size: 78px;
  line-height: 1;
  color: var(--navy-950);
}
.score-entry__value small { font-size: 26px; color: var(--ink-faint); }
.score-entry__meta {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  word-break: break-all;
}
.score-entry__meta a { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 2px; }

.score-bars { margin-top: 24px; display: grid; gap: 13px; }
.score-bar {
  display: grid;
  grid-template-columns: 126px 1fr 52px;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  color: var(--ink-soft);
}
.score-bar__track { height: 7px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.score-bar__fill { height: 100%; background: var(--gold); border-radius: 4px; transition: width 0.5s ease; }
.score-bar__val {
  font-family: var(--font-mono);
  font-size: 12px;
  text-align: right;
  color: var(--ink-faint);
}

.score-entry__share { margin-top: 24px; }

/* Scan progress — replaces the report area while a scan is running.
   Reuses .report-panel and the .score-bar__track/__fill track for the
   progress bar; only the stage list and states below are new. */

.scan-progress__stages, .scan-progress__error { max-width: 460px; }

.scan-progress__domain {
  font-family: var(--font-mono);
  font-size: 19px;
  font-weight: 600;
  color: var(--navy-950);
  margin-bottom: 26px;
  word-break: break-all;
}

.scan-progress__list { list-style: none; display: grid; gap: 14px; margin-bottom: 22px; }
.scan-progress__item { display: flex; align-items: center; gap: 12px; }
.scan-progress__marker {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--white);
  transition: border-color var(--t), background-color var(--t);
}
.scan-progress__label { font-size: 15px; color: var(--ink-faint); transition: color var(--t); }

.scan-progress__item.is-active .scan-progress__marker { border-color: var(--gold); background: var(--gold); }
.scan-progress__item.is-active .scan-progress__label { color: var(--ink); font-weight: 600; }
.scan-progress__item.is-done .scan-progress__marker { border-color: var(--ok); background: var(--ok); }
.scan-progress__item.is-done .scan-progress__label { color: var(--ink-soft); }

.scan-progress__bar-track { margin-bottom: 14px; }

.scan-progress__context {
  font-size: 13.5px;
  color: var(--ink-soft);
  min-height: 1.4em;
}

.scan-progress__error-text { font-size: 15px; color: var(--risk); margin-bottom: 16px; }

/* Bot matrix plate */

.bot-console {
  background: var(--navy-950);
  border-radius: var(--radius);
  border: 1px solid rgba(194, 146, 47, 0.4);
  padding: 22px 22px 12px;
  font-family: var(--font-mono);
}
.bot-console__label {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 14px;
}
.bot-console__note {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.45);
  margin-bottom: 10px;
}
.bot-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.bot-card { padding: 8px 0; border-top: 1px solid var(--line-on-navy); }
.bot-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bot-card__name { color: var(--white); font-weight: 600; font-family: var(--font-body); font-size: 13px; }
.bot-card__rule {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.42);
}

.bot-chip {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 8px;
  font-weight: 500;
  flex-shrink: 0;
}
.bot-chip--open { background: var(--ok-tint); color: var(--ok); }
.bot-chip--partial { background: var(--warn-tint); color: var(--gold-deep); }
.bot-chip--block { background: var(--risk-tint); color: var(--risk); }

.bot-console__link {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line-on-navy);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}
.bot-console__link a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 2px; }
.bot-console__link a:hover { color: var(--gold); }

/* Checks — grouped by pillar, each group its own local grid so the
   layout reads as structure rather than one long reflowed list. */

.scan-checks { margin-top: 32px; padding-top: 28px; border-top: 1px solid var(--line); }

.checks-grid { display: grid; gap: 22px; }
.checks-group .kicker { margin-bottom: 10px; }
.checks-group__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 24px;
}

.check-row {
  display: flex;
  gap: 13px;
  align-items: baseline;
  padding: 9px 0;
  border-top: 1px solid var(--bg);
  font-size: 14.5px;
  color: var(--ink-soft);
}
.check-row__mark { font-family: var(--font-mono); width: 16px; flex-shrink: 0; }
.check-row.is-ok .check-row__mark { color: var(--ok); }
.check-row.is-fail .check-row__mark { color: var(--risk); }
.check-row__pts {
  margin-left: auto;
  padding-left: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
  flex-shrink: 0;
}

/* Actions */

.scan-actions { margin-top: 36px; }
.scan-actions__title { font-size: 24px; margin-bottom: 14px; }
.scan-actions__list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.action-item {
  background: var(--bg);
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 15px 18px;
}
.action-item--high { border-left-color: var(--risk); }
.action-item--low { border-left-color: var(--line); }

.action-item__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.action-item__label { font-size: 15.5px; font-weight: 600; color: var(--ink); }
.action-item__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 10px;
  color: var(--gold-deep);
}
.action-item--high .action-item__tag { color: var(--risk); }
.action-item--low .action-item__tag { color: var(--ink-faint); }
.action-item__gain {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ok);
  white-space: nowrap;
}
.action-item__why { margin-top: 5px; font-size: 14px; color: var(--ink-soft); max-width: 640px; }

/* Copy-paste fixes — collapsed behind a toggle; snippets matter most
   to readers who have already been through the findings above them. */

.fix-snippets { margin-top: 36px; }

.fix-snippets__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: none;
  border-left: none;
  border-right: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: color var(--t);
}
.fix-snippets__toggle:hover { color: var(--gold-deep); }
.fix-snippets__chevron { flex-shrink: 0; transition: transform var(--t); }
.fix-snippets__toggle[aria-expanded="true"] .fix-snippets__chevron { transform: rotate(180deg); }

.fix-snippets__body { padding-top: 18px; }

.fix-snippet {
  background: var(--navy-950);
  border-radius: var(--radius);
  border: 1px solid rgba(194, 146, 47, 0.4);
  padding: 18px 20px;
}
.fix-snippet + .fix-snippet { margin-top: 16px; }

.fix-snippet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.fix-snippet__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.fix-snippet__copy { padding: 7px 14px; font-size: 12.5px; }

.fix-snippet__code {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 320px;
  overflow-y: auto;
}
.fix-snippet__actions { display: flex; gap: 8px; }

/* Robots.txt generator (tools/robots-txt.html) */

.robots-gen__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: start;
}

.crawler-list {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 22px;
}
.crawler-row { padding: 16px 0; border-top: 1px solid var(--bg); }
.crawler-row:first-child { border-top: none; }
.crawler-row__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.crawler-row__checkbox { width: 16px; height: 16px; accent-color: var(--gold); cursor: pointer; flex-shrink: 0; }
.crawler-row__name { font-family: var(--font-mono); font-size: 13.5px; font-weight: 600; color: var(--ink); }
.crawler-row__vendor {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
}
.crawler-row__desc { margin: 6px 0 0 26px; font-size: 13.5px; color: var(--ink-soft); line-height: 1.5; }

.robots-gen__sitemap { margin-bottom: 20px; }
.robots-gen__sitemap-label { display: block; font-size: 13px; color: var(--ink-soft); margin-bottom: 6px; }

/* Bridge */

.scan-bridge {
  margin-top: 32px;
  border-top: 3px solid var(--navy-950);
  padding-top: 20px;
}
.scan-bridge__text { font-size: 16.5px; color: var(--ink); max-width: 560px; font-weight: 600; margin-bottom: 20px; }
.scan-bridge .card-grid { gap: 16px; }
.scan-bridge .card { min-height: 0; padding: 20px 20px 18px; }

/* Pull quote — a single research finding, compact */

.research-quote { max-width: 620px; padding: 2px 0 2px 24px; border-left: 4px solid var(--gold); }
.research-quote__text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.32;
  color: var(--ink);
}
.research-quote__context { margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
.research-quote .btn { margin-top: 16px; }

/* ----------------------------- Playbooks ----------------------------- */

.verticals { padding: 0 0 96px; }

.section-head { max-width: 640px; margin-bottom: 40px; }

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  position: relative;
  width: 100%;
  text-decoration: none;
  color: inherit;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 22px 22px;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
  display: flex;
  flex-direction: column;
  min-height: 220px;
}
.card:hover { border-color: var(--gold); }

.card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}
.card__code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.card__badge {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 3px 8px;
}
.card__badge--live { background: var(--warn-tint); color: var(--gold-deep); }
.card__badge--soon { background: var(--bg); color: var(--ink-faint); }

.card__icon { width: 28px; height: 28px; color: var(--navy-800); margin-bottom: 14px; }
.card__name {
  font-family: var(--font-display);
  font-size: 21px;
  color: var(--navy-950);
  margin-bottom: 8px;
}
.card__desc { font-size: 14px; color: var(--ink-soft); flex-grow: 1; }
.card__cta {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--navy-800);
  border-bottom: 1px solid transparent;
  align-self: flex-start;
  transition: color var(--t), border-color var(--t);
}
.card:hover .card__cta { color: var(--gold-deep); border-color: var(--gold-deep); }
.card__cta svg { width: 13px; height: 13px; }

.card--soon .card__icon,
.card--soon .card__name { opacity: 0.5; }
.card--soon .card__desc { opacity: 0.6; }
.card--soon .card__cta { color: var(--ink-faint); }
.card--soon:hover { border-color: var(--line); }
.card--soon:hover .card__cta { color: var(--ink-faint); border-color: transparent; }

/* A card used purely to display data (benchmark averages), not a link. */
.card--static { cursor: default; }
.card--static:hover { border-color: var(--line); }
.card--static .score-entry__value { margin-top: 10px; }

/* ----------------------------- Benchmark strip (footnote-weight band) -----------------------------
   Generated by scripts/generate-benchmarks.js — see data/benchmarks.json.
   Sits just above the footer. Track colour is fixed, matching the
   research report template: B2B SaaS is always --navy-800,
   consumer/e-commerce is always --gold. */

.benchmark-strip { padding: 40px 0 48px; border-top: 1px solid var(--line); }
.benchmark-strip__top {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.benchmark-strip__avg {
  font-family: var(--font-display);
  font-size: clamp(56px, 8vw, 104px);
  line-height: 0.9;
  color: var(--navy-950);
  flex-shrink: 0;
}
.benchmark-strip__avg small { font-size: 0.28em; color: var(--ink-faint); margin-left: 2px; }
.benchmark-strip__summary { max-width: 420px; }
.benchmark-strip__text {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  color: var(--ink-soft);
}
.benchmark-strip__link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.benchmark-strip__cats {
  margin-top: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
}
.benchmark-strip__cat {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
}
.benchmark-strip__cat-name { color: var(--ink-soft); }
.benchmark-strip__cat-bar { width: 40px; height: 4px; background: var(--bg); border-radius: 2px; overflow: hidden; }
.benchmark-strip__cat-fill { display: block; height: 100%; border-radius: 2px; }
.benchmark-strip__cat-fill--saas { background: var(--navy-800); }
.benchmark-strip__cat-fill--consumer { background: var(--gold); }
.benchmark-strip__cat-score { color: var(--ink); font-weight: 500; }

@media (max-width: 640px) {
  .benchmark-strip__top { gap: 18px; }
  .benchmark-strip__cats { gap: 8px 18px; }
}

/* ----------------------------- Commerce strip (inverted gold, horizontal) -----------------------------
   The one place --gold plays a structural surface role rather than an
   accent — deliberate contrast against the navy bands elsewhere on the
   page. Contained, not full-bleed, same as the plate it replaced. */

.commerce-strip {
  background: var(--gold);
  border-radius: var(--radius);
  padding: 44px 48px;
}
.commerce-strip__grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: center;
}
.commerce-strip .kicker { color: var(--navy-900); }
.commerce-strip h2 { color: var(--navy-950); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; margin-top: 8px; }
.commerce-strip__lede { margin-top: 12px; font-size: 15px; color: rgba(11, 21, 38, 0.75); }
.commerce-strip__cta { margin-top: 20px; }

.commerce-mock { background: var(--white); border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow); }
.commerce-mock__search {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.commerce-mock__search-icon { width: 16px; height: 16px; color: var(--ink-faint); flex-shrink: 0; }
.commerce-mock__search-text { font-size: 14px; color: var(--ink); }
.commerce-mock__results { display: flex; flex-direction: column; gap: 8px; }
.commerce-mock__row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  background: var(--bg);
  border-radius: var(--radius-sm);
}
.commerce-mock__name { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.commerce-mock__price { font-family: var(--font-mono); font-size: 13px; color: var(--navy-800); }
.commerce-mock__avail { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }
.commerce-mock__badge {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.03em;
  color: var(--gold-deep);
  background: var(--warn-tint);
  border-radius: 4px;
  padding: 3px 7px;
  white-space: nowrap;
  justify-self: start;
  align-self: center;
}
.commerce-mock__row--unreadable { opacity: 0.8; }
.commerce-mock__badge--missing { color: var(--risk); background: var(--risk-tint); }

@media (max-width: 920px) {
  .commerce-strip__grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 640px) {
  .commerce-strip { padding: 30px 22px; }
  .commerce-mock__row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .commerce-mock__avail { display: none; }
}

/* ----------------------------- Capability cards ("how it works" / check breakdowns) ----------------------------- */

.capability-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.capability-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 24px; }
.capability-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.capability-card__icon { width: 30px; height: 30px; color: var(--navy-800); }
.capability-card__icon svg { width: 100%; height: 100%; }
.capability-card__weight { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); padding-top: 4px; }
.capability-card__kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; }
.capability-card__q { font-family: var(--font-display); font-size: 21px; color: var(--navy-950); margin-bottom: 10px; line-height: 1.25; }
.capability-card__desc { font-size: 14px; color: var(--ink-soft); line-height: 1.55; }

@media (max-width: 640px) {
  .capability-grid { grid-template-columns: 1fr; }
}

/* Standalone stat — one research figure pulled out on its own, no card */
.stat-figure__num { font-family: var(--font-display); font-size: clamp(60px, 8vw, 92px); line-height: 1; color: var(--gold-deep); }
.stat-figure__num small { font-size: 0.42em; }
.stat-figure__label { margin-top: 10px; font-size: 15px; color: var(--ink-soft); max-width: 480px; }
.stat-figure__link { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 12px; color: var(--navy-800); }
.stat-figure__link:hover { color: var(--gold-deep); }

/* ----------------------------- Research block (two-column, homepage) ----------------------------- */

.research-block { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; padding: 40px 0; }
.research-block__heading { margin-top: 8px; font-size: clamp(26px, 3vw, 34px); }
.research-block__lede { margin-top: 12px; font-size: 15px; color: var(--ink-soft); max-width: 420px; }
.research-block__intro .btn { margin-top: 20px; }

.research-card {
  display: block;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 30px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t);
}
.research-card:hover { border-color: var(--gold); }
.research-card__num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ink-faint); text-transform: uppercase; }
.research-card__title { margin-top: 8px; font-size: 19px; color: var(--navy-950); line-height: 1.3; }
.research-card__date { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.research-card__stat { margin-top: 18px; font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--gold-deep); }
.research-card__stat small { font-size: 0.5em; }
.research-card__statline { margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); }
.research-card__link {
  display: inline-block;
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--navy-800);
}
.research-card:hover .research-card__link { color: var(--gold-deep); }

@media (max-width: 920px) {
  .research-block { grid-template-columns: 1fr; gap: 32px; padding: 8px 0; }
}

/* ----------------------------- Page banner (inner-page header) -----------------------------
   Contained navy plate — the opening header on every page except the
   homepage, which keeps its own hero. ~200px tall on desktop: a
   header, not a hero. Three decorative right-side variants keep it
   from reading as one repeated template: .page-banner__icon (playbook
   pages), .page-banner__code (tools pages), .page-banner__num
   (research entries). Plain by default. */

.page-banner {
  position: relative;
  overflow: hidden;
  background: var(--navy-950);
  border-radius: var(--radius);
  min-height: 200px;
  padding: 36px 44px;
  display: flex;
  align-items: center;
  margin-bottom: 64px;
}
.page-banner__body { position: relative; z-index: 1; max-width: 620px; }
.page-banner__title { color: var(--white); font-size: clamp(27px, 3vw, 36px); line-height: 1.15; margin-top: 8px; }
.page-banner__desc { margin-top: 10px; font-size: 15px; color: rgba(255, 255, 255, 0.72); max-width: 500px; }
.page-banner .btn { margin-top: 18px; }

.page-banner__icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 150px;
  height: 150px;
  color: var(--gold-soft);
  opacity: 0.12;
}
.page-banner__icon svg { width: 100%; height: 100%; }

.page-banner__code {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.16);
  white-space: pre;
}

.page-banner__num {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: 160px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.07);
}

@media (max-width: 920px) {
  .page-banner__icon { width: 110px; height: 110px; }
  .page-banner__num { font-size: 120px; }
}
@media (max-width: 640px) {
  .page-banner { min-height: 0; padding: 28px 24px; margin-bottom: 40px; }
  .page-banner__icon, .page-banner__code, .page-banner__num { display: none; }
}

/* ----------------------------- Case study teaser (homepage) -----------------------------
   Sits directly before the Pro band and hands off to it: this is the first
   proof of movement over time on the page, which is what Pro sells.
   Distinctiveness comes from the figure, not a new surface colour — the
   panel itself is the same white/border/shadow treatment used elsewhere. */

.case-study-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 56px;
  margin: 48px 0;
}

.case-study-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "text figure";
  gap: 64px;
  align-items: center;
}
.case-study-block__text { grid-area: text; }
.case-study-block__figure { grid-area: figure; }

.case-study-block__heading {
  margin-top: 14px;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.16;
  color: var(--navy-950);
}
.case-study-block .report-pullquote { margin: 26px 0; }
.case-study-block__text .btn { margin-top: 6px; }

.case-study-figure__stat { margin-bottom: 24px; }
.case-study-figure__stat-num {
  font-family: var(--font-display);
  font-size: clamp(52px, 5.5vw, 76px);
  line-height: 1;
  color: var(--gold-deep);
}
.case-study-figure__stat-label {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.case-study-figure__chart { display: block; width: 100%; height: auto; }

@media (max-width: 920px) {
  .case-study-block { padding: 36px 28px; }
  .case-study-block__grid { grid-template-columns: 1fr; grid-template-areas: "figure" "text"; gap: 36px; }
}

@media (max-width: 640px) {
  .case-study-block { padding: 28px 22px; margin: 32px 0; }
  .case-study-figure__stat-num { font-size: 48px; }
}

/* ----------------------------- Pro band (full-bleed navy) ----------------------------- */

.pro-band {
  background: var(--navy-950);
  padding: 88px 0;
}

.pro-band__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 56px;
  align-items: start;
}

.pro-band h2 { color: var(--white); font-size: clamp(26px, 3vw, 38px); line-height: 1.12; }
.pro-band__lede { margin-top: 14px; font-size: 16px; color: rgba(255, 255, 255, 0.72); max-width: 520px; }

.pro-band ul { margin-top: 22px; list-style: none; display: grid; gap: 10px; }
.pro-band li {
  font-size: 14.5px;
  color: rgba(255, 255, 255, 0.85);
  padding: 10px 0 10px 20px;
  border-top: 1px solid var(--line-on-navy);
  position: relative;
}
.pro-band li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 17px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.pro-band__price {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--gold-soft);
}
.pro-band__cta { margin-top: 22px; }

.services-block {
  background: var(--navy-900);
  border: 1px solid var(--line-on-navy);
  border-radius: var(--radius);
  padding: 30px;
}
.services-block h3 { color: var(--white); font-size: 23px; }
.services-block p { margin-top: 10px; font-size: 14.5px; color: rgba(255, 255, 255, 0.7); }
.services-block .btn { margin-top: 22px; }

/* ----------------------------- MCP announcement band (homepage) -----------------------------
   Full-bleed navy, deliberately taller than its neighbours. The distinction
   comes from content, not a new surface colour: a white conversation panel
   as the lit object on the navy field, and a navy tool-call plate inside it
   showing Citehound being called from an assistant.

   The conversation is complete in the HTML. mcp-demo.js, when it runs at
   all, adds .is-armed to hide the steps and then replays them once; with
   no JS, or prefers-reduced-motion, the finished state is simply there. */

.mcp-band {
  background: var(--navy-950);
  padding: 128px 0;
  min-height: 860px;
  display: flex;
  align-items: center;
}
.mcp-band > .section__inner { width: 100%; }

.mcp-band__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.mcp-band__title {
  color: var(--white);
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.04;
  max-width: 520px;
}
.mcp-band__lede {
  margin-top: 20px;
  max-width: 460px;
  font-size: 17px;
  color: rgba(255, 255, 255, 0.72);
}
.mcp-band__facts {
  margin-top: 28px;
  padding-top: 16px;
  max-width: 460px;
  border-top: 1px solid var(--line-on-navy);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  line-height: 1.7;
  color: var(--gold-soft);
}
.mcp-band .btn { margin-top: 28px; }

.mcp-chat {
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mcp-chat__head {
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.mcp-chat__body { padding: 28px 24px 30px; }

.mcp-msg { display: flex; flex-direction: column; gap: 6px; }
.mcp-msg--user { align-items: flex-end; }
.mcp-msg__who {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mcp-msg__text {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.mcp-msg--user .mcp-msg__text { background: var(--bg); }
.mcp-msg--assistant .mcp-msg__text { max-width: 100%; border: 1px solid var(--line); background: var(--white); }

/* The tool-call row: how an MCP client shows a call, set apart from the
   message bubbles as a compact mono plate. */
.mcp-call {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 18px 0;
  padding: 10px 14px;
  background: var(--navy-950);
  border: 1px solid rgba(194, 146, 47, 0.4);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.55);
}
.mcp-call svg { flex-shrink: 0; color: var(--gold-soft); }
.mcp-call__server { color: var(--gold-soft); }
.mcp-call__tool { color: var(--white); font-weight: 500; }
.mcp-call__arg { margin-left: auto; }

/* Replay state. Hidden steps keep their space, so the panel never changes
   height while the conversation plays. */
.mcp-band.is-armed [data-step] { opacity: 0; visibility: hidden; }
.mcp-band.is-armed [data-step].is-shown { opacity: 1; visibility: visible; transition: opacity var(--t); }
.mcp-type__rest { visibility: hidden; }

@media (max-width: 920px) {
  .mcp-band { padding: 96px 0; min-height: 0; }
  .mcp-band__grid { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 640px) {
  .mcp-band { padding: 72px 0; }
  .mcp-chat__head { padding: 12px 16px; }
  .mcp-chat__body { padding: 22px 16px 24px; }
  .mcp-call__arg { margin-left: 0; }
}
@media print {
  .mcp-band.is-armed [data-step] { opacity: 1; visibility: visible; }
}

/* Agentic commerce readiness (scan report, stores only) */

.scan-commerce { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.scan-commerce[hidden] { display: none; }
.commerce-score { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 18px; }
.commerce-score__value { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--navy-950); }
.commerce-score__value small { font-size: 20px; color: var(--ink-faint); }
.commerce-score__note { font-size: 14px; color: var(--ink-soft); max-width: 560px; }
.commerce-rows .check-row a, .commerce-gaps + * a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.commerce-rows .tool-evidence a { color: var(--ink-soft); }
.commerce-gaps { margin-top: 20px; }
.commerce-rows .check-row > span:nth-child(2) { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .commerce-rows .check-row { flex-wrap: wrap; }
  .commerce-rows .check-row__pts { order: 3; flex-basis: 100%; margin-left: 29px; padding-left: 0; }
}

/* ----------------------------- Tool pages (llms.txt checker, schema generator) -----------------------------
   Built from the robots.txt generator's parts: .robots-gen__grid for the
   two-column layout and .fix-snippet for the dark plate with copy and
   download. Everything here is the form and result furniture around them. */

.tool-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.tool-form__field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 220px; min-width: 0; }
.tool-form__field--narrow { flex: 0 1 240px; }
.tool-label { font-size: 13px; color: var(--ink-soft); }
.tool-hint { margin-top: 12px; font-size: 13px; color: var(--ink-faint); }
button.tool-example {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  cursor: pointer;
}
button.tool-example:hover { color: var(--gold-deep); }
.faq-q { margin: 28px 0 8px; font-size: 20px; }
.faq-q:first-of-type { margin-top: 20px; }
.doc-section a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.tool-status { min-height: 22px; margin: 14px 0 18px; font-size: 14px; color: var(--ink-soft); }
.tool-status.is-error { color: var(--risk); }

.tool-panel {
  margin-top: 24px;
  padding: 28px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tool-panel__title {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.tool-panel p { font-size: 15px; color: var(--ink-soft); }
.tool-panel p + p { margin-top: 10px; }
.tool-panel .callout { margin-top: 20px; }
.tool-panel .callout a, .tool-panel p a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }

.verdict {
  padding: 22px 24px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--line);
  background: var(--bg);
}
.verdict--default { border-left-color: var(--gold-deep); background: var(--warn-tint); }
.verdict--custom { border-left-color: var(--ok); background: var(--ok-tint); }
.verdict__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.verdict__word { margin-top: 6px; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.1; color: var(--navy-950); }
.verdict__summary { margin-top: 10px; font-size: 15.5px; color: var(--ink-soft); max-width: 640px; }
.verdict__caveat { margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

.tool-evidence { display: block; margin-top: 3px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); overflow-wrap: anywhere; }
.tool-sections { list-style: none; font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); }
.tool-sections li { padding: 4px 0; overflow-wrap: anywhere; }
.tool-sections li[data-level="3"] { padding-left: 16px; }
.tool-sections li[data-level="4"], .tool-sections li[data-level="5"], .tool-sections li[data-level="6"] { padding-left: 32px; }

.type-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.type-picker__btn {
  font-size: 14px;
  font-weight: 600;
  padding: 9px 16px;
  color: var(--ink-soft);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}
.type-picker__btn:hover { border-color: var(--ink); color: var(--ink); }
.type-picker__btn[aria-pressed="true"] { background: var(--navy-950); border-color: var(--navy-950); color: var(--white); }

.schema-form { padding: 22px 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.sf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sf-field:last-child { margin-bottom: 0; }
.sf-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sf-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--gold-deep); }
.sf-faq { padding: 14px 0; border-top: 1px solid var(--bg); display: flex; flex-direction: column; gap: 8px; }
.sf-faq:first-of-type { border-top: none; padding-top: 0; }
.sf-faq__remove { align-self: flex-start; font-size: 13px; color: var(--ink-faint); text-decoration: underline; cursor: pointer; }
.sf-faq__remove:hover { color: var(--risk); }
.sf-add { margin-top: 4px; align-self: flex-start; }
.sf-hours { display: grid; grid-template-columns: 96px 1fr 1fr; gap: 8px; align-items: center; }
.sf-hours__day { font-size: 14px; color: var(--ink-soft); }

.schema-gen .robots-gen__grid > * { min-width: 0; }
.sf-hours input.field { min-width: 0; width: 100%; padding: 11px 10px; }
.schema-gen__out { position: sticky; top: 84px; }
.schema-gen .fix-snippet__code { max-height: 560px; }
.schema-gen__meta { margin-top: 14px; font-size: 14px; color: var(--ink-soft); }
.schema-gen__meta strong { color: var(--ink); }
.schema-gen__paste { margin-top: 10px; font-size: 14px; color: var(--ink-soft); }
.schema-gen__paste code { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); }

@media (max-width: 920px) {
  .schema-gen__out { position: static; }
}
@media (max-width: 640px) {
  .tool-panel { padding: 22px 18px; }
  .schema-form { padding: 18px; }
  .sf-hours { grid-template-columns: 78px 1fr 1fr; }
  .tool-form .btn { width: 100%; justify-content: center; }
}

/* ----------------------------- Site footer ----------------------------- */

.site-footer { padding: 48px 0 60px; }
.footer-links { flex-wrap: wrap; gap: 10px 24px; }

.site-footer__coda {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-faint);
}

/* ----------------------------- Views ----------------------------- */

.view--results { background: var(--bg); min-height: 100vh; }

.results-toolbar {
  max-width: 780px;
  margin: 0 auto;
  padding: 28px 32px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.results-content { max-width: 780px; margin: 0 auto; padding: 32px 32px 100px; }

/* Long-form documentation pages (methodology, about) */

.doc-section { max-width: 760px; }
.doc-section + .doc-section { margin-top: 48px; }
.doc-section > p { font-size: 16px; color: var(--ink-soft); line-height: 1.6; }
.doc-section > p + p { margin-top: 14px; }
.doc-section__heading {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--navy-950);
  margin-bottom: 8px;
}

.changelog-list { list-style: none; display: grid; gap: 14px; max-width: 760px; }
.changelog-list li { font-size: 13.5px; color: var(--ink-soft); display: flex; gap: 16px; line-height: 1.6; }
.changelog-list li .n { font-family: var(--font-mono); color: var(--gold-deep); flex-shrink: 0; white-space: nowrap; }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 4px;
}

/* About page */

.about-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 56px;
  align-items: start;
}
.about-bio { margin-top: 20px; max-width: 560px; }
.about-bio p { font-size: 16px; color: var(--ink-soft); margin-bottom: 14px; }
.about-links { display: flex; gap: 12px; margin-top: 24px; }

.about-portrait-wrap {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--bg);
  overflow: hidden;
}
.about-portrait {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.video-embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--navy-950);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.results-content__eyebrow {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}
.results-content__title {
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.12;
  color: var(--navy-950);
  margin-bottom: 34px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}

.results-content__body h3 { font-size: 23px; color: var(--navy-950); margin-top: 42px; margin-bottom: 14px; }
.results-content__body h3:first-child { margin-top: 0; }
.results-content__body p { font-size: 16px; color: var(--ink-soft); margin-bottom: 14px; }

.results-content__body ul,
.results-content__body ol { list-style: none; display: flex; flex-direction: column; gap: 12px; }

.results-content__body li {
  position: relative;
  font-size: 15.5px;
  color: var(--ink-soft);
  padding: 14px 18px 14px 40px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.results-content__body li strong { color: var(--ink); }
.results-content__body li::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 20px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
}
.results-content__body .pitfalls li::before {
  background: transparent;
  border: 1.4px solid var(--ink-faint);
}

.expert-tip {
  margin-top: 18px;
  background: var(--navy-950);
  border-radius: var(--radius);
  border: 1px solid rgba(194, 146, 47, 0.4);
  padding: 22px 24px;
  position: relative;
}
.expert-tip::before {
  content: 'EXPERT TIP';
  position: absolute;
  top: 16px;
  right: 20px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--gold-soft);
}
.expert-tip p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  font-style: italic;
  margin: 0;
  padding-right: 84px;
}
.expert-tip p strong { color: var(--gold-soft); font-style: normal; }

/* ----------------------------- Toast ----------------------------- */

.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translate(-50%, 8px);
  background: var(--navy-950);
  color: var(--white);
  font-size: 14px;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t), transform var(--t);
  z-index: 200;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ----------------------------- Responsive ----------------------------- */

@media (max-width: 1024px) {
  .checks-group__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 920px) {
  .hero__grid { grid-template-columns: 1fr; gap: 44px; }
  .hero__visual { min-height: 340px; }
  .scan-report__grid { grid-template-columns: 1fr; gap: 28px; }
  .scan-actions__list { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .pro-band__grid { grid-template-columns: 1fr; gap: 36px; }
  .robots-gen__grid { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; gap: 36px; }
  .video-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .site-header__inner { padding: 14px 20px; gap: 20px; }
  .site-nav { display: none; }
  .mobile-nav { display: block; }
  .section__inner { padding: 0 20px; }
  .hero { padding: 44px 0 64px; }
  .report-panel { padding: 26px 20px; }
  .card-grid { grid-template-columns: 1fr; }
  .pro-band { padding: 64px 0; }
  .results-toolbar { padding: 20px 20px 0; flex-wrap: wrap; }
  .results-content { padding: 24px 20px 80px; }
  .search-mock { width: 88%; }
  .answer-mock { width: 100%; padding: 22px 20px; }
  .score-bar { grid-template-columns: 104px 1fr 48px; font-size: 13px; }
  .checks-group__grid { grid-template-columns: 1fr; }
  .bot-grid { grid-template-columns: 1fr; }
  .scan-progress__domain { font-size: 17px; }
}

/* ----------------------------- Print (PDF export) ----------------------------- */

@media print {
  .results-toolbar, .site-header, .toast { display: none !important; }
}

/* ----------------------------- Expert tip variants ----------------------------- */

/* Variant B — inline aside: light, gold-edged, sits inside content flow */
.expert-tip--aside {
  background: var(--warn-tint);
  border: 1px solid var(--gold-soft);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.expert-tip--aside::before { content: 'FROM PRACTICE'; color: var(--gold-deep); }
.expert-tip--aside p { color: var(--ink-soft); font-size: 14.5px; padding-right: 96px; }
.expert-tip--aside p strong { color: var(--gold-deep); }

/* Variant C — benchmark note: mono, data-flavored */
.expert-tip--data {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy-800);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}
.expert-tip--data::before { content: 'BENCHMARK'; color: var(--navy-800); }
.expert-tip--data p {
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 13px;
  color: var(--ink-soft);
  padding-right: 92px;
}
.expert-tip--data p strong { color: var(--navy-800); font-style: normal; }

@media (max-width: 640px) {
  .expert-tip p, .expert-tip--aside p, .expert-tip--data p { padding-right: 0; padding-top: 18px; }
}

/* ===================================================================
   RESEARCH REPORT TEMPLATE
   Reused by every report in the series. Category colour mapping is
   fixed across all reports: B2B SaaS is always --navy-800, consumer
   brands are always --gold. Do not remix these per report.
   =================================================================== */

.report-header { padding: 56px 0 0; }
.report-header__title {
  font-size: clamp(32px, 4.2vw, 52px);
  line-height: 1.1;
  max-width: 880px;
}
.report-header__dek {
  margin-top: 18px;
  font-size: 17px;
  color: var(--ink-soft);
  max-width: 660px;
}

.report-byline {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-faint);
}
.report-byline a { color: var(--navy-800); text-decoration: underline; text-underline-offset: 2px; }
.report-byline a:hover { color: var(--gold-deep); }

.report-stats { margin-top: 32px; padding-bottom: 40px; }

/* Key findings — a contained navy plate, not full-bleed */
.report-findings {
  margin: 40px 0 0;
  background: var(--navy-950);
  border-radius: var(--radius);
  padding: 36px 40px;
}
.report-findings__label {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 20px;
}
.report-findings ol { list-style: none; display: grid; gap: 20px; counter-reset: finding; }
.report-findings li {
  display: flex;
  gap: 18px;
  align-items: baseline;
  padding-top: 18px;
  border-top: 1px solid var(--line-on-navy);
}
.report-findings li:first-child { padding-top: 0; border-top: none; }
.report-findings__num {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--gold-soft);
  flex-shrink: 0;
  width: 34px;
}
.report-findings p { color: rgba(255, 255, 255, 0.88); font-size: 16.5px; line-height: 1.55; }

/* Body sections */
.report-section { max-width: 720px; margin: 64px auto 0; }
.report-section__num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--gold-deep);
  margin-bottom: 10px;
}
.report-section__heading { font-size: 30px; margin-bottom: 20px; }
.report-section p { font-size: 16px; color: var(--ink-soft); line-height: 1.65; margin-bottom: 18px; }

.report-pullquote {
  margin: 32px 0;
  padding-left: 22px;
  border-left: 4px solid var(--gold);
}
.report-pullquote p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.4;
  color: var(--navy-950);
}
/* Optional attribution line — client/interview quotes only, on their
   own line in mono, not part of the italic quote itself. */
.report-pullquote .report-pullquote__attribution {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 12px;
  color: var(--ink-faint);
}

/* Results table — case studies only so far; plain and dense, no new
   visual language beyond existing borders/mono figures. */
.report-table-wrap { overflow-x: auto; margin: 28px 0; }
.report-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.report-table th, .report-table td { padding: 12px 16px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
.report-table th:first-child, .report-table td:first-child { text-align: left; }
.report-table th {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
.report-table td { font-family: var(--font-mono); color: var(--ink); }
.report-table td:first-child { font-family: var(--font-body); }
.report-table tr:last-child { border-top: 2px solid var(--navy-950); }
.report-table tr:last-child td { font-weight: 700; color: var(--navy-950); border-bottom: none; }

@media (max-width: 640px) {
  .report-table { font-size: 13.5px; }
  .report-table th, .report-table td { padding: 10px 12px; }
}

/* Figure component — the reusable core */
.report-figure {
  margin: 40px 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 28px 24px;
}
.report-figure__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 16px;
}
.report-figure__visual { width: 100%; }
.report-figure__visual svg { display: block; width: 100%; height: auto; }
.report-figure__visual--narrow { max-width: 460px; }
.report-figure__caption {
  margin-top: 16px;
  font-size: 14.5px;
  color: var(--ink-soft);
  max-width: 640px;
}
.report-figure__source {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
}

/* Methodology & limitations — same weight as findings, different register */
.report-methodology {
  max-width: 760px;
  margin: 64px auto 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 36px 40px;
}
.report-methodology h2 { font-size: 26px; margin-bottom: 18px; }
.report-methodology h3 { font-size: 16px; color: var(--navy-950); margin: 24px 0 8px; }
.report-methodology p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 10px; }

.report-limits {
  margin-top: 24px;
  padding: 20px 22px;
  background: var(--bg);
  border-left: 4px solid var(--risk);
  border-radius: var(--radius-sm);
}
.report-limits p:first-child { margin-top: 0; }
.report-limits ul { list-style: none; display: grid; gap: 10px; margin-top: 10px; }
.report-limits li { font-size: 14.5px; color: var(--ink-soft); line-height: 1.55; padding-left: 18px; position: relative; }
.report-limits li::before { content: '\2013'; position: absolute; left: 0; color: var(--risk); }

/* Generic callout — used on doc pages for "will change" / placeholder notes */
.callout {
  margin-top: 16px;
  padding: 16px 18px;
  border-radius: var(--radius-sm);
  border-left: 4px solid var(--line);
  background: var(--bg);
}
.callout__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.callout p { margin: 0; font-size: 14.5px; color: var(--ink-soft); }
.callout--gold { border-left-color: var(--gold-deep); }
.callout--gold .callout__label { color: var(--gold-deep); }

/* Cite block */
.report-cite {
  max-width: 720px;
  margin: 56px auto 0;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.report-cite__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.report-cite__line {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.6;
  word-break: break-word;
}
.report-cite__row { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Restrained closing */
.report-closing { max-width: 640px; margin: 64px auto 0; padding: 40px 0 0; border-top: 1px solid var(--line); }
.report-closing p { font-size: 16px; color: var(--ink-soft); margin-bottom: 18px; }

/* Chart primitives shared by every figure */
.chart-track { fill: var(--bg); }
.chart-bar--b2b { fill: var(--navy-800); }
.chart-bar--dtc { fill: var(--gold); }
.chart-axis { stroke: var(--line); stroke-width: 1; }
.chart-label { font-family: var(--font-mono, monospace); fill: var(--ink-soft); }
.chart-label--faint { fill: var(--ink-faint); }
.chart-value { font-family: var(--font-mono, monospace); fill: var(--ink); font-weight: 600; }
.chart-value--faint { fill: var(--ink-faint); }
.chart-value--strong { fill: var(--navy-950); font-weight: 700; }
.chart-annotation { font-family: var(--font-mono, monospace); fill: var(--gold-deep); }
.chart-leader { stroke: var(--gold-deep); stroke-width: 1; fill: none; }

/* Research index (listing page) */
.research-index-list { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.research-index-item {
  display: block;
  background: var(--white);
  padding: 26px 28px;
  text-decoration: none;
  color: inherit;
  transition: background var(--t);
}
.research-index-item:hover { background: var(--bg); }
.research-index-item__meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 10px;
}
.research-index-item__title { font-size: 24px; color: var(--navy-950); margin-bottom: 8px; }
.research-index-item__summary { font-size: 15px; color: var(--ink-soft); max-width: 720px; }

@media (max-width: 920px) {
  .report-section { max-width: 100%; }
  .report-findings { padding: 28px 24px; }
}

@media (max-width: 640px) {
  .report-header { padding-top: 40px; }
  .report-findings { padding: 24px 20px; }
  .report-findings__num { font-size: 22px; width: 28px; }
  .report-pullquote p { font-size: 19px; }
  .report-figure { padding: 20px 18px 18px; }
  .report-methodology, .report-cite { padding: 24px 20px; }
}

/* Print — reports are built to be sent as a PDF */
@media print {
  .site-header, .mobile-nav, .toast, .btn, .report-cite__row .btn { display: none !important; }
  body { background: var(--white); }
  .report-figure, .report-findings, .report-methodology, .report-cite { box-shadow: none; break-inside: avoid; }
  .report-section { break-inside: avoid-page; }
  a { color: inherit; text-decoration: underline; }
}

/* =====================================================================
   Citation tracking: the dot matrix (page) and the gold block (homepage)

   Both are plain HTML; citation-matrix.js only replays them once on
   first view. The second and last motion exception (see CLAUDE.md):
   on the page, a dot changes from an empty ring to its final state
   (colour and border, 150ms), row by row; on the homepage, the five
   tries fade in one at a time (opacity, 150ms), 0.4s apart.
   ===================================================================== */

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

.cm__group + .cm__group { margin-top: 26px; }
.cm__heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--navy-950);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}
.cm__count { color: var(--gold-deep); }
.cm__rows { list-style: none; margin: 0; padding: 0; }
.cm__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 24px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.cm__q { font-size: 14.5px; line-height: 1.4; color: var(--ink); }
.cm__dots { display: flex; gap: 10px; }
.cm__more {
  margin: 0;
  padding-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
}

.cm-dot {
  display: block;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--ink-faint);
  background: transparent;
  transition: background-color var(--t), border-color var(--t);
}
.cm-dot--named { border: 2px solid var(--gold); }
.cm-dot--featured { border: 2px solid var(--gold); background: var(--gold); }

.cm__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 26px;
  font-size: 13px;
  color: var(--ink-soft);
}
.cm__key { display: inline-flex; align-items: center; gap: 8px; }
.cm__meta {
  margin: 12px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-faint);
}

/* The replay: before first view, every dot is an empty ring. */
.cm-anim .cm:not(.is-played) .cm__row .cm-dot:not(.is-on) {
  background: transparent;
  border: 1.5px solid var(--ink-faint);
}

.cm--large { max-width: 900px; }
.cm--large .cm__q { font-size: 16px; }
.cm--large .cm-dot { width: 18px; height: 18px; }
.cm--large .cm__dots { gap: 14px; }
.cm--large .cm__row { padding: 12px 0; }

/* Page: the large matrix and its readout. */
.cm-panel { padding: 40px; }
.cm-readout {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 3px solid var(--navy-950);
}
.cm-readout__num {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(52px, 6vw, 76px);
  line-height: 1;
  color: var(--gold-deep);
}
.cm-readout__text p { margin: 0; max-width: 560px; font-size: 16px; color: var(--ink-soft); line-height: 1.55; }
.cm-readout__text .cm-readout__fine { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }

.doc-list { margin: 14px 0 0; padding-left: 20px; font-size: 16px; color: var(--ink-soft); line-height: 1.6; }
.doc-list li + li { margin-top: 10px; }
.doc-list strong { color: var(--ink); }
.doc-section > p + .doc-list,
.doc-list + p { margin-top: 14px; }

.citation-note { margin-top: 18px; max-width: 560px; font-size: 14.5px; color: var(--ink-soft); }
.citation-note a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.scan-bridge .btn + .citation-note { margin-top: 20px; }

@media (max-width: 640px) {
  .cm__row { grid-template-columns: 1fr; }
  .cm-panel { padding: 26px 20px; }
  .cm-readout { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* =====================================================================
   Homepage teaser: the gold block, "questions everywhere"

   Full-bleed --gold, every word on it solid --navy-950 (no translucent
   navy, no gold-soft, no white). Text on the left; on the right eight
   buyer questions scattered directly on the gold, no containing panel.
   The scene is an illustration and says so.

   The static composition is the HTML: eight cards, each already resolved
   to its first answer. Motion is added on top (see "The loop") and only
   when <html> carries .scene-anim (teaser-scene.js and the snippet in
   <head>), so reduced motion and no-JavaScript visitors keep the static
   state.
   ===================================================================== */

.teaser {
  background: var(--gold);
  color: var(--navy-950);
  padding: 112px 0;
}
.teaser__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}
.teaser__kicker {
  margin: 0 0 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-950);
}
.teaser__title {
  margin: 0;
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: 1.04;
  letter-spacing: 0.005em;
  color: var(--navy-950);
  text-wrap: balance;
}
.teaser__lede {
  margin: 26px 0 0;
  max-width: 520px;
  font-size: 19px;
  line-height: 1.5;
  color: var(--navy-950);
}
.teaser__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 34px; }
.teaser__link {
  font-weight: 600;
  color: var(--navy-950);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.teaser__caption {
  margin: 22px 0 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--navy-950);
}

/* The scatter: a two-column grid whose cards sit at different heights and
   widths. A grid cannot overlap, so nothing does. */
.scene {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 24px;
  align-items: start;
}
.scene__refresh {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  color: var(--navy-950);
  pointer-events: none;
}

.sq {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.sq__text {
  margin: 0 0 12px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--navy-950);
}
/* One chip per state, stacked in the same cell so each sizes to its own
   content and sits left; the animation cross-fades them. */
.sq__chips { display: grid; }
.sq__chip {
  grid-area: 1 / 1;
  justify-self: start;
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 11px 4px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy-950);
}
.sq__chip--ask { padding-left: 11px; background: var(--bg); }
.sq__mark {
  display: block;
  box-sizing: border-box;
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 50%;
}
.sq__chip--named .sq__mark { background: var(--gold); border: 2px solid var(--gold); }
.sq__chip--absent .sq__mark { border: 1.5px solid var(--ink-faint); }
/* Static state: the first answer shows; "Asking…" and the re-ask answer wait. */
.sq__chip--ask,
.sq__chip--second { opacity: 0; }

/* Different heights and widths, so it reads as scattered, not gridded. */
.sq--1 { margin-top: 0;    width: 88%;  justify-self: start; }
.sq--2 { margin-top: 54px; width: 96%;  justify-self: end; }
.sq--3 { margin-top: 22px; width: 100%; justify-self: start; }
.sq--4 { margin-top: 0;    width: 90%;  justify-self: end; }
.sq--5 { margin-top: 6px;  width: 94%;  justify-self: start; }
.sq--6 { margin-top: 30px; width: 100%; justify-self: end; }
.sq--7 { margin-top: 26px; width: 90%;  justify-self: start; }
.sq--8 { margin-top: 2px;  width: 96%;  justify-self: end; }

/* The loop, about 14 seconds. One @keyframes drives a registered number,
   --t, from 0 to 14; each card, chip and the icon derives its opacity or
   rotation from it. Only opacity and transform ever change.
     0.4s+   cards fade in, 0.15s apart, each asking
     2.4s+   each resolves to named or not named, 0.5s apart
     8.4s    the refresh icon turns once
     8.9s+   four chips flip, in both directions, 0.3s apart
     12.8s+  cards fade out; the loop restarts at 14s
   Paused until the scene is on screen, paused again when it leaves. */
@property --t { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes scene-clock { from { --t: 0; } to { --t: 14; } }

.sq--1 { --a: 0.4; --r: 2.4; --o: 12.8; --c: 8.9; }
.sq--2 { --a: 0.55; --r: 2.9; --o: 12.9; --c: 9.2; }
.sq--3 { --a: 0.7; --r: 3.4; --o: 13.0; }
.sq--4 { --a: 0.85; --r: 3.9; --o: 13.1; }
.sq--5 { --a: 1.0; --r: 4.4; --o: 13.2; --c: 9.5; }
.sq--6 { --a: 1.15; --r: 4.9; --o: 13.3; --c: 9.8; }
.sq--7 { --a: 1.3; --r: 5.4; --o: 13.4; }
.sq--8 { --a: 1.45; --r: 5.9; --o: 13.5; }

@media (prefers-reduced-motion: no-preference) {
  .scene-anim .scene { animation: scene-clock 14s linear infinite paused; }
  .scene-anim .scene.is-live { animation-play-state: running; }
  .scene-anim .sq {
    --in: clamp(0, calc((var(--t) - var(--a)) / 0.45), 1);
    --out: clamp(0, calc((var(--o) + 0.5 - var(--t)) / 0.5), 1);
    --res: clamp(0, calc((var(--t) - var(--r)) / 0.3), 1);
    --chg: clamp(0, calc((var(--t) - var(--c, 99)) / 0.45), 1);
    opacity: min(var(--in), var(--out));
    transform: translateY(calc((1 - var(--in)) * 12px));
  }
  .scene-anim .sq__chip--ask { opacity: calc(1 - var(--res)); }
  .scene-anim .sq__chip--first { opacity: calc(var(--res) * (1 - var(--chg))); }
  .scene-anim .sq__chip--second { opacity: var(--chg); }
  .scene-anim .scene__refresh {
    --p: clamp(0, calc((var(--t) - 8.4) / 0.9), 1);
    transform: rotate(calc(var(--p) * var(--p) * (3 - 2 * var(--p)) * 360deg));
  }
}

@media (max-width: 1024px) {
  .teaser__grid { gap: 48px; }
}
@media (max-width: 920px) {
  .teaser { padding: 80px 0; }
  .teaser__grid { grid-template-columns: 1fr; gap: 48px; align-items: start; }
}
@media (max-width: 640px) {
  .teaser { padding: 44px 0 40px; }
  .teaser__kicker { margin-bottom: 14px; }
  .teaser__title { font-size: 38px; }
  .teaser__lede { margin-top: 16px; font-size: 16px; line-height: 1.5; }
  .teaser__actions { margin-top: 22px; gap: 12px 22px; }
  .teaser__caption { margin-top: 14px; }
  .teaser__grid { gap: 28px; }
  /* One column, alternating sides; the last two cards stay out of the way. */
  .scene { grid-template-columns: 1fr; gap: 9px; }
  .sq { width: 84%; margin-top: 0; padding: 9px 12px; }
  .sq--1, .sq--3, .sq--5 { justify-self: start; margin-top: 0; }
  .sq--2, .sq--4, .sq--6 { justify-self: end; margin-top: 0; }
  .sq--7, .sq--8 { display: none; }
  .sq__text { margin-bottom: 7px; font-size: 14px; line-height: 1.3; }
  .sq__chip { padding: 3px 9px 3px 8px; font-size: 12.5px; }
  .scene__refresh { width: 30px; height: 30px; }
}

@media print {
  .cm-anim .cm:not(.is-played) .cm-dot--featured:not(.is-on) { background: var(--gold); border: 2px solid var(--gold); }
  .cm-anim .cm:not(.is-played) .cm-dot--named:not(.is-on) { border: 2px solid var(--gold); }
}

@media print {
  .scene-anim .sq { opacity: 1 !important; transform: none !important; }
  .scene-anim .sq__chip--ask,
  .scene-anim .sq__chip--second { opacity: 0 !important; }
  .scene-anim .sq__chip--first { opacity: 1 !important; }
  .scene-anim .scene__refresh { transform: none !important; }
}

/* =====================================================================
   Benchmarks (scripts/generate-benchmark-pages.js)
   Additions only. Bars use the research reports' mapping: --navy-800 for
   B2B SaaS, --gold for consumer and e-commerce.
   ===================================================================== */

.chart-bar--limited { fill: var(--line); }
.chart-bar--blocked { fill: var(--risk); }
.chart-seg-text { font-family: var(--font-mono, monospace); font-size: 11px; font-weight: 600; }
.chart-seg-text--light { fill: var(--white); }
.chart-seg-text--dark { fill: var(--navy-950); }

.report-cite__url { margin-top: 10px; font-size: 14px; color: var(--ink-soft); word-break: break-all; }
.report-cite__url a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }
.report-cite__row[hidden] { display: none; }
.report-section a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }

.bm-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 8px; font-size: 13px; color: var(--ink-soft); }
.bm-legend__item { display: inline-flex; align-items: center; gap: 8px; }
.bm-legend__swatch { display: block; width: 14px; height: 14px; border-radius: 3px; }
.bm-list { list-style: none; margin: 0; padding: 0; }
.bm-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr) 92px;
  gap: 6px 28px;
  align-items: center;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.bm-row__name a {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.15;
  color: var(--navy-950);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 4px;
}
.bm-row__name a:hover { color: var(--gold-deep); }
.bm-row__track { display: block; margin-top: 6px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }
.bm-row__bar { height: 14px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.bm-row__fill { display: block; height: 100%; border-radius: 3px; }
.bm-fill--b2b { background: var(--navy-800); }
.bm-fill--dtc { background: var(--gold); }
.bm-row__score { font-family: var(--font-display); font-size: 34px; line-height: 1; color: var(--navy-950); text-align: right; }
.bm-row__score small { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.bm-row__meta { grid-column: 1 / -1; margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
@media (max-width: 640px) {
  .bm-row { grid-template-columns: minmax(0, 1fr) 92px; }
  .bm-row__bar { grid-column: 1 / -1; grid-row: 2; }
  .bm-row__score { grid-column: 2; grid-row: 1; }
  .bm-row__meta { grid-row: 3; }
}

/* =====================================================================
   Compare two sites (compare.html, compare.js). Additions only.
   Site A is --navy-800, site B is --gold, everywhere on the page.
   ===================================================================== */

.cmp-swatch { display: inline-block; width: 12px; height: 12px; flex: none; border-radius: 3px; }
.cmp-swatch--a { background: var(--navy-800); }
.cmp-swatch--b { background: var(--gold); }

.cmp-progress { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; }
.cmp-progress__item { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 14px; color: var(--ink-soft); }
.cmp-progress__item .cmp-swatch { align-self: center; }
.cmp-progress__domain { font-family: var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.cmp-progress__item[data-state="failed"] .cmp-progress__state { color: var(--risk); }

.cmp-result { margin-top: 32px; }
.cmp-cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.cmp-score {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}
.cmp-score__domain { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
.cmp-score__num { margin: 18px 0 0; font-family: var(--font-display); font-size: clamp(64px, 9vw, 96px); line-height: 1; color: var(--navy-950); }
.cmp-score__num small { font-family: var(--font-mono); font-size: 14px; color: var(--ink-faint); }
.cmp-score__label { margin: 8px 0 0; font-size: 14px; color: var(--ink-soft); }
.cmp-score__error { margin: 18px 0 0; font-size: 15px; color: var(--risk); }
.cmp-note { margin: 20px 0 0; max-width: 640px; font-size: 15px; color: var(--ink-soft); }

.cmp-section { margin-top: 40px; }
.cmp-section__title { margin: 0 0 16px; font-family: var(--font-display); font-size: 24px; font-weight: 400; color: var(--navy-950); }
.cmp-section__none { margin: 0; font-size: 15px; color: var(--ink-soft); }

.cmp-pillar + .cmp-pillar { margin-top: 20px; }
.cmp-pillar__name { margin: 0 0 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.cmp-bar { display: grid; grid-template-columns: minmax(96px, 220px) minmax(0, 1fr) 56px; gap: 12px; align-items: center; margin-top: 6px; font-size: 13px; }
.cmp-bar__who { font-family: var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.cmp-bar__track { height: 14px; background: var(--bg); border-radius: 3px; overflow: hidden; }
.cmp-bar__fill { height: 100%; border-radius: 3px; }
.cmp-bar__fill--a { background: var(--navy-800); }
.cmp-bar__fill--b { background: var(--gold); }
.cmp-bar__val { font-family: var(--font-mono); text-align: right; color: var(--ink); }

.cmp-table-wrap { overflow-x: auto; }
.cmp-table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--white); border: 1px solid var(--line); }
.cmp-table th {
  padding: 12px 14px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
}
.cmp-table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; }
.cmp-table tbody tr:first-child td { border-top: 0; }
.cmp-table__name { font-weight: 600; color: var(--navy-950); }
.cmp-state { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; }
.cmp-state--pass, .cmp-state--open { color: var(--ok); }
.cmp-state--partial { color: var(--gold-deep); }
.cmp-state--limited { color: var(--ink-soft); }
.cmp-state--fail, .cmp-state--blocked { color: var(--risk); }

.cmp-share { margin-top: 32px; }

@media (max-width: 920px) {
  .cmp-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .cmp-score { padding: 22px 20px; }
  .cmp-bar { grid-template-columns: minmax(0, 1fr) 52px; }
  .cmp-bar__who { grid-column: 1 / -1; }
  .cmp-bar__track { grid-column: 1; }
  .cmp-table th, .cmp-table td { padding: 10px 10px; }
}

/* Benchmark figures: below 440px the 420-unit drawing would shrink its labels under
   11px, so it keeps a minimum width and scrolls sideways inside its container. */
.report-figure__visual--scroll { overflow-x: auto; }
.report-figure__visual--scroll svg { min-width: 440px; }
.report-figure__hint { display: none; margin: -8px 0 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }
@media (max-width: 560px) { .report-figure__hint { display: block; } }

/* ----------------------------- Playbooks index (/playbooks) ----------------------------- */
.pb-intro { padding: 0 0 48px; }
.pb-intro__text { max-width: 680px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.pb-intro__quiet { margin-top: 12px; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-faint); }
.pb-intro__quiet a { color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; transition: color 150ms ease; }
.pb-intro__quiet a:hover { color: var(--ink); }
.pb-group { padding: 0 0 56px; }
.pb-group__head { margin-bottom: 24px; }
.pb-group__title { font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--navy-950); }
.pb-group__title a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color 150ms ease, border-color 150ms ease; }
.pb-group__title a:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
.pb-group__sub { margin-top: 6px; font-size: 14.5px; color: var(--ink-soft); }

/* ----------------------------- Agentic commerce page (ac-) ----------------------------- */
.ac-banner { flex-wrap: wrap; gap: 32px 48px; align-items: center; }
.ac-banner__body { flex: 1 1 340px; max-width: 520px; }
.ac-banner__tiles { flex: 1 1 380px; max-width: 540px; }
.ac-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ac-tile { background: var(--navy-900); border: 1px solid var(--line-on-navy); border-radius: var(--radius-sm); padding: 10px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ac-tile__art { position: relative; aspect-ratio: 1 / 0.82; border: 1px solid var(--line-on-navy); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; color: var(--gold-soft); }
.ac-tile__art svg { width: 38%; height: auto; }
.ac-tile__ucp { position: absolute; top: 6px; right: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--navy-950); background: var(--gold-soft); border-radius: var(--radius-sm); padding: 2px 6px; }
.ac-tile__name { font-size: 13px; font-weight: 600; color: var(--white); line-height: 1.25; }
.ac-tile__price { font-family: var(--font-mono); font-size: 13px; color: var(--white); }
.ac-chip { align-self: flex-start; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; border-radius: var(--radius-sm); padding: 2px 7px; background: var(--ok-tint); color: var(--ok); }
.ac-chip--warn { background: var(--warn-tint); color: var(--gold-deep); }
.ac-chip--risk { background: var(--risk-tint); color: var(--risk); }
.ac-banner__caption { margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }
.ac-scan-head { padding-bottom: 8px; }
.ac-scan-head .section-title { font-size: clamp(24px, 2.6vw, 32px); }

.ac-section { padding: 0 0 80px; }
.ac-flow { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.ac-step { position: relative; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px 20px; display: flex; flex-direction: column; }
.ac-step:not(:last-child)::after { content: "\2192"; position: absolute; right: -22px; top: 30px; width: 16px; text-align: center; font-family: var(--font-mono); font-size: 16px; color: var(--ink-faint); }
.ac-step__icon { width: 30px; height: 30px; color: var(--navy-800); margin-bottom: 14px; }
.ac-step__icon svg { width: 100%; height: 100%; }
.ac-step__verb { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--navy-950); }
.ac-step__needs { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); flex-grow: 1; }
.ac-step__check { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--ink-faint); }
.ac-step__check a { color: var(--navy-800); text-decoration: underline; text-underline-offset: 3px; transition: color 150ms ease; }
.ac-step__check a:hover { color: var(--gold-deep); }
.ac-note { margin-top: 24px; max-width: 760px; font-size: 15px; line-height: 1.6; color: var(--ink-soft); }
.ac-note a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; }

.ac-versus { margin-top: 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.ac-store { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 22px 18px; }
.ac-store__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.ac-store__name { font-family: var(--font-display); font-weight: 400; font-size: 22px; color: var(--navy-950); }
.ac-store__verdict { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); text-align: right; }
.ac-store__rows { margin: 0; padding: 0; }
.ac-store__row { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.ac-store__row dt { color: var(--ink-faint); font-family: var(--font-mono); font-size: 12px; }
.ac-store__row dd { margin: 0; color: var(--ink); min-width: 0; }
.ac-store__row dd.is-missing { color: var(--ink-faint); font-style: italic; }
.ac-store__price-img { display: inline-block; width: 64px; height: 18px; background: var(--bg); border: 1px dashed var(--line); border-radius: 4px; vertical-align: middle; }
.ac-caption { margin-top: 14px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }

.ac-figure { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 36px 36px 32px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px 40px; align-items: center; }
.ac-figure__num { font-family: var(--font-display); font-size: clamp(72px, 10vw, 128px); line-height: 1; color: var(--gold-deep); }
.ac-figure__num small { font-size: 0.42em; }
.ac-figure__text { font-size: clamp(17px, 1.7vw, 20px); line-height: 1.5; color: var(--navy-950); max-width: 560px; }
.ac-figure__text + .ac-figure__text { margin-top: 12px; font-size: 16px; color: var(--ink-soft); }
.ac-figure__link { display: inline-block; margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px; color: var(--navy-800); text-decoration: underline; text-underline-offset: 3px; transition: color 150ms ease; }
.ac-figure__link:hover { color: var(--gold-deep); }

.ac-faq, .ct-faq { margin-top: 28px; max-width: 760px; }
.ac-faq details, .ct-faq details { border-top: 1px solid var(--line); }
.ac-faq details:last-child, .ct-faq details:last-child { border-bottom: 1px solid var(--line); }
.ac-faq summary, .ct-faq summary { cursor: pointer; list-style: none; padding: 18px 28px 18px 0; position: relative; font-family: var(--font-display); font-size: 19px; line-height: 1.3; color: var(--navy-950); }
.ac-faq summary::-webkit-details-marker, .ct-faq summary::-webkit-details-marker { display: none; }
.ac-faq summary::after, .ct-faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-family: var(--font-mono); font-size: 18px; color: var(--ink-faint); }
.ac-faq details[open] summary::after, .ct-faq details[open] summary::after { content: "\2212"; }
.ac-faq details p, .ct-faq details p { padding: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); max-width: 680px; }
.ac-faq summary:focus-visible, .ct-faq summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (max-width: 920px) {
  .ac-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ac-step:nth-child(2)::after { display: none; }
  .ac-figure { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ac-banner__body, .ac-banner__tiles { flex-basis: 100%; max-width: none; }
  .ac-tiles { gap: 8px; }
  .ac-tile { padding: 8px; }
  .ac-tile__name { font-size: 12px; }
  .ac-tile__price { font-size: 12px; }
  .ac-chip { font-size: 10px; padding: 2px 5px; }
  .ac-flow { grid-template-columns: 1fr; gap: 32px; }
  .ac-step:not(:last-child)::after { content: "\2193"; right: auto; left: 50%; top: auto; bottom: -26px; margin-left: -8px; }
  .ac-versus { grid-template-columns: 1fr; }
  .ac-store__row { grid-template-columns: 96px minmax(0, 1fr); }
  .ac-store__row .ac-chip { grid-column: 2; }
  .ac-figure { padding: 26px 22px 24px; }
  .ac-section { padding-bottom: 56px; }
}
.ac-tile .ac-chip { margin-top: auto; }
@media (max-width: 640px) {
  .ac-tile__art svg { width: 32%; margin-top: 12px; }
  .ac-tile__ucp { top: 4px; right: 4px; font-size: 9px; padding: 1px 4px; }
  .ac-tile__name { min-height: 2.5em; }
}

/* ----------------------------- Citation tracking page (ct-) ----------------------------- */
.ct-banner__note { margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.72); max-width: 460px; }
.ct-banner__note--band { margin-top: 16px; }
.ct-section { padding: 88px 0 0; }
.ct-section:last-of-type { padding-bottom: 0; }
.ct-section .section-head { margin-bottom: 32px; }

.ct-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ct-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px 22px; }
.ct-card__icon { display: block; width: 30px; height: 30px; color: var(--navy-800); margin-bottom: 16px; }
.ct-card__icon svg { width: 100%; height: 100%; }
.ct-card__title { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.25; color: var(--navy-950); }
.ct-card__text { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

.ct-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 20px; }
.ct-stat { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 26px 24px; }
.ct-stat__num { font-family: var(--font-display); font-size: clamp(64px, 8vw, 104px); line-height: 1; color: var(--gold-deep); }
.ct-stat__label { margin-top: 10px; font-size: 16px; line-height: 1.4; color: var(--navy-950); max-width: 260px; }

.ct-example { padding: 28px 28px 22px; }
.ct-example__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--gold-deep); }
.ct-legend { margin-top: 10px; margin-bottom: 18px; font-size: 14px; color: var(--ink-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.ct-mark { display: inline-block; flex: none; width: 14px; height: 14px; border-radius: 50%; box-sizing: border-box; }
.ct-mark--named { background: var(--gold); border: 2px solid var(--gold); }
.ct-mark--absent { border: 1.5px solid var(--ink-faint); background: transparent; }
.ct-marks { display: inline-flex; gap: 8px; flex: none; }
.ct-detail { border-top: 1px solid var(--line); }
.ct-detail:last-child { border-bottom: 1px solid var(--line); }
.ct-detail summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 28px 16px 0; position: relative; }
.ct-detail summary::-webkit-details-marker { display: none; }
.ct-detail summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-family: var(--font-mono); font-size: 18px; color: var(--ink-faint); }
.ct-detail[open] summary::after { content: "\2212"; }
.ct-detail summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.ct-detail__title { font-family: var(--font-display); font-size: 20px; color: var(--navy-950); }
.ct-detail__count { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); white-space: nowrap; margin-right: 8px; }
.ct-detail__intro { margin: 0 0 12px; font-size: 14px; color: var(--ink-soft); }
.ct-list { list-style: none; margin: 0 0 16px; padding: 0; }
.ct-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink); }
.ct-row__q { min-width: 0; }

.ct-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.ct-step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 22px 22px; }
.ct-step__icon { display: block; width: 30px; height: 30px; color: var(--navy-800); margin-bottom: 16px; }
.ct-step__icon svg { width: 100%; height: 100%; }
.ct-step__title { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.25; color: var(--navy-950); }
.ct-step__text { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

.ct-limits { padding: 36px 36px 30px; border: 1px solid var(--navy-950); }
.ct-limits__title { margin-top: 8px; font-family: var(--font-display); font-weight: 400; font-size: clamp(26px, 3vw, 34px); color: var(--navy-950); }
.ct-limits__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.ct-limits__list li { padding: 14px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.ct-limits__list strong { display: block; color: var(--navy-950); font-weight: 600; }

@media (max-width: 920px) {
  .ct-cards, .ct-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-stats { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ct-section { padding-top: 56px; }
  .ct-cards, .ct-steps { grid-template-columns: 1fr; }
  .ct-example { padding: 20px 18px 16px; }
  .ct-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .ct-limits { padding: 24px 20px 20px; }
  .ct-limits__list { grid-template-columns: 1fr; }
}

/* ----------------------------- Crawl report and dashboard (rp-) ----------------------------- */
.rp-appbar { background: var(--white); border-bottom: 1px solid var(--line); }
.rp-appbar__inner { max-width: var(--content-width); margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rp-appbar__label { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.rp-appbar__demo { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); background: var(--warn-tint); border-radius: var(--radius-sm); padding: 3px 8px; margin-left: 10px; }
.rp-page-wrap { max-width: var(--content-width); margin: 0 auto; padding: 32px 32px 96px; }
.rp-state { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; max-width: 640px; font-size: 16px; color: var(--ink-soft); }
.rp-state--error { border-color: var(--risk); color: var(--risk); }

.rp-head { margin-bottom: 24px; }
.rp-kicker { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.rp-kicker--spaced { margin-top: 26px; }
.rp-title { margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); line-height: 1.15; color: var(--navy-950); word-break: break-word; }
.rp-meta { margin-top: 8px; font-size: 15px; color: var(--ink-soft); }
.rp-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 32px; align-items: start; }
.rp-summary { position: sticky; top: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 24px 24px; }
.rp-score { display: flex; align-items: baseline; gap: 4px; margin-top: 4px; }
.rp-score__num { font-family: var(--font-display); font-size: 84px; line-height: 1; color: var(--navy-950); }
.rp-score__of { font-family: var(--font-mono); font-size: 14px; color: var(--ink-faint); }
.rp-score__sub { margin-top: 4px; font-size: 14px; color: var(--ink-soft); }
.rp-facts { margin: 18px 0 0; display: grid; gap: 0; }
.rp-facts > div { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.rp-facts dt { color: var(--ink-soft); }
.rp-facts dd { margin: 0; font-family: var(--font-mono); font-weight: 500; color: var(--navy-950); }
.rp-gap { margin-top: 14px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.rp-pillars { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 12px; }
.rp-pillars li { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; font-size: 13.5px; color: var(--ink-soft); }
.rp-pillars .rp-bar { grid-column: 1 / -1; }
.rp-pillars__val { font-family: var(--font-mono); color: var(--navy-950); }
.rp-bar { display: block; height: 8px; background: var(--bg); border-radius: 4px; overflow: hidden; }
.rp-bar__fill { display: block; height: 100%; background: var(--navy-800); border-radius: 4px; }
.rp-bar--risk .rp-bar__fill { background: var(--risk); }

.rp-main { display: grid; gap: 24px; min-width: 0; }
.rp-section { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 24px 22px; min-width: 0; }
.rp-h2 { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--navy-950); }
.rp-note { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--ink-soft); }
.rp-tablewrap { margin-top: 14px; overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rp-table th, .rp-table td { text-align: left; padding: 9px 10px 9px 0; border-bottom: 1px solid var(--line); }
.rp-table th { font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.rp-table th button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.rp-table th button:hover { color: var(--ink); }
.rp-table th[aria-sort="ascending"] button::after { content: " \2191"; }
.rp-table th[aria-sort="descending"] button::after { content: " \2193"; }
.rp-table .rp-num { text-align: right; font-family: var(--font-mono); padding-right: 0; padding-left: 10px; white-space: nowrap; }
.rp-table td a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: 3px; word-break: break-all; }
.rp-checklist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 14px; }
.rp-checklist li { display: grid; gap: 6px; font-size: 15px; color: var(--ink); }
.rp-sitechecks { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0; }
.rp-sitechecks li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 14.5px; }
.rp-sitechecks__state { font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 2px; }
.rp-sitechecks .is-pass .rp-sitechecks__state { color: var(--ok); }
.rp-sitechecks .is-fail .rp-sitechecks__state { color: var(--risk); }
.rp-sitechecks__advice { color: var(--ink-soft); }
.rp-failedlist { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px; }
.rp-failedlist__why { color: var(--risk); font-family: var(--font-mono); font-size: 12px; }
.rp-details { margin-top: 14px; display: grid; gap: 0; }
.rp-page { border-top: 1px solid var(--line); }
.rp-page:last-child { border-bottom: 1px solid var(--line); }
.rp-page > summary, .rp-snippet > summary { cursor: pointer; list-style: none; }
.rp-page > summary::-webkit-details-marker, .rp-snippet > summary::-webkit-details-marker { display: none; }
.rp-page > summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 12px 0; font-size: 14.5px; }
.rp-page__url { color: var(--ink); word-break: break-all; }
.rp-page__meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); white-space: nowrap; }
.rp-page:target > summary .rp-page__url { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.rp-fails { list-style: none; margin: 0 0 12px; padding: 0 0 0 14px; display: grid; gap: 10px; font-size: 14px; color: var(--ink); }
.rp-fails__pts { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.rp-fails__advice { color: var(--ink); }
.rp-fails__why { color: var(--ink-soft); }
.rp-snippet { margin: 0 0 12px 14px; }
.rp-snippet > summary { font-family: var(--font-mono); font-size: 12px; color: var(--navy-800); text-decoration: underline; text-underline-offset: 3px; }
.rp-code { margin-top: 8px; background: var(--navy-950); color: #d7e2ea; border-radius: var(--radius-sm); padding: 14px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; overflow-x: auto; }
.rp-bar-actions { display: flex; gap: 10px; align-items: center; }

.rp-sample-banner { background: var(--navy-950); color: var(--white); border-radius: var(--radius); padding: 22px 26px; margin-bottom: 28px; }
.rp-sample-banner p { max-width: 720px; font-size: 15.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.85); }
.rp-sample-banner p strong { color: var(--white); }
.rp-sample-banner .rp-kicker { color: var(--gold-soft); margin-bottom: 6px; }
.rp-sample-foot { margin-top: 32px; border-top: 3px solid var(--navy-950); padding-top: 18px; max-width: 720px; font-size: 16px; color: var(--ink); }

@media (max-width: 920px) {
  .rp-layout { grid-template-columns: 1fr; }
  .rp-summary { position: static; }
}
@media (max-width: 640px) {
  .rp-appbar__inner, .rp-page-wrap { padding-left: 16px; padding-right: 16px; }
  .rp-section { padding: 18px 16px 16px; }
  .rp-score__num { font-size: 68px; }
  .rp-page > summary { flex-direction: column; gap: 4px; }
}
@media print {
  .rp-appbar, .site-header, .mobile-nav, .site-footer, .skip-link, .toast, .rp-noprint { display: none !important; }
  body { background: var(--white); }
  .rp-page-wrap { padding: 0; max-width: none; }
  .rp-layout { display: block; }
  .rp-summary, .rp-section { box-shadow: none; position: static; break-inside: avoid; margin-bottom: 14px; }
  .rp-section:last-child { break-inside: auto; }
  .rp-page, .rp-snippet { break-inside: avoid; }
  .rp-code { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
  .rp-sample-banner { background: var(--white); color: var(--ink); border: 1px solid var(--ink); }
  .rp-sample-banner p, .rp-sample-banner p strong { color: var(--ink); }
}
.rp-table td a { word-break: normal; overflow-wrap: anywhere; }
.pro-band__sample { margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px; }
.pro-band__sample a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; transition: color 150ms ease; }
.pro-band__sample a:hover { color: var(--white); }

/* ----------------------------- Report dashboard v2 (rp-) ----------------------------- */
.rp-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rp-top { background: var(--navy-950); color: var(--white); }
.rp-top__inner { max-width: var(--content-width); margin: 0 auto; padding: 14px 32px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.rp-top__logo .logo__mark, .rp-top__logo .logo__icon { color: var(--white); }
.rp-top__meta { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); font-size: 12px; color: rgba(255, 255, 255, 0.72); }
.rp-top__domain { color: var(--white); word-break: break-all; }
.rp-top__label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-950); background: var(--gold-soft); border-radius: var(--radius-sm); padding: 2px 8px; }
.rp-top__print { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--white); background: transparent; border: 1px solid var(--line-on-navy); border-radius: var(--radius-sm); padding: 8px 14px; cursor: pointer; transition: color 150ms ease, border-color 150ms ease; }
.rp-top__print:hover { color: var(--gold-soft); border-color: var(--gold-soft); }
.rp-top__print svg { width: 16px; height: 16px; }
.rp-top__print[hidden] { display: none; }

.rp-body { max-width: var(--content-width); margin: 0 auto; padding: 28px 32px 96px; }
.rp-toc ul { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.rp-toc a { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 14.5px; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.rp-toc svg { width: 18px; height: 18px; color: var(--navy-800); }
.rp-tablist { display: flex; gap: 4px; margin-top: 24px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.rp-tab { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 12px 16px; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--ink-soft); background: transparent; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color 150ms ease, border-color 150ms ease; }
.rp-tab svg { width: 18px; height: 18px; }
.rp-tab:hover { color: var(--ink); }
.rp-tab[aria-selected="true"] { color: var(--navy-950); border-bottom-color: var(--gold); }
.rp-tab:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.rp-js .rp-toc { display: none; }
.rp-panel { margin-top: 28px; min-width: 0; }
.rp-panel[hidden] { display: none; }
.rp-panel:focus { outline: none; }
.rp-js .rp-panel { margin-top: 24px; }
.rp-h2--panel { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.rp-h2--panel svg { width: 24px; height: 24px; color: var(--navy-800); }
.rp-js .rp-h2--panel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rp-h3 { margin-top: 36px; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--navy-950); }
.rp-text { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--ink); max-width: 760px; }
.rp-notrow { max-width: 760px; }

.rp-exec { margin-top: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px 30px 24px; }
.rp-exec__headline { margin-top: 8px; font-family: var(--font-display); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; color: var(--navy-950); max-width: 820px; }
.rp-exec__text { margin-top: 12px; font-size: 16.5px; line-height: 1.6; color: var(--ink); max-width: 760px; }
.rp-exec__label { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.rp-kpis { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.rp-kpi { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 6px; }
.rp-kpi__num { font-family: var(--font-display); font-size: clamp(48px, 5vw, 68px); line-height: 1; color: var(--navy-950); }
.rp-kpi__label { font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.rp-kpi__label small { font-size: 13px; font-weight: 400; color: var(--ink-soft); }
.rp-priorities { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rp-priority { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 20px 18px; }
.rp-priority__title { font-family: var(--font-display); font-weight: 400; font-size: 20px; line-height: 1.25; color: var(--navy-950); }
.rp-priority__why { margin-top: 8px; font-size: 14.5px; line-height: 1.55; color: var(--ink); }
.rp-priority__where { margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); }
.rp-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chip { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); background: var(--bg); border-radius: var(--radius-sm); padding: 3px 8px; }
.rp-chip--gain { color: var(--navy-950); background: var(--warn-tint); }
.rp-caveats { margin: 8px 0 0 18px; max-width: 760px; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); }

.rp-matrixwrap { margin-top: 14px; overflow-x: auto; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px 12px; }
.rp-matrix { border-collapse: separate; border-spacing: 0; font-size: 13px; width: 100%; }
.rp-matrix th, .rp-matrix td { padding: 0; }
.rp-matrix__corner { text-align: left; vertical-align: bottom; padding: 0 12px 8px 0; font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-faint); letter-spacing: 0.05em; text-transform: uppercase; }
.rp-colhead { width: 34px; height: 104px; vertical-align: bottom; text-align: center; }
.rp-colhead__text { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--ink-soft); padding-bottom: 6px; }
.rp-colhead--all .rp-colhead__text { color: var(--risk); font-weight: 600; }
.rp-cluster__head th { text-align: left; padding: 14px 0 6px; font-weight: 400; }
.rp-cluster__name { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--navy-950); }
.rp-cluster__meta { margin-left: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); }
.rp-cluster__toggle { display: none; margin-right: 8px; width: 22px; height: 22px; padding: 2px; color: var(--ink-soft); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; vertical-align: middle; }
.rp-cluster__toggle svg { width: 100%; height: 100%; transform: rotate(90deg); }
.rp-js .rp-cluster__toggle { display: inline-block; }
.rp-cluster.is-collapsed .rp-cluster__toggle svg { transform: none; }
.rp-cluster.is-collapsed .rp-matrix__row { display: none; }
.rp-matrix__row th { text-align: left; padding: 3px 14px 3px 0; font-weight: 400; white-space: nowrap; }
.rp-matrix__row th a { color: var(--ink); font-family: var(--font-mono); font-size: 12px; text-decoration: none; border-bottom: 1px solid var(--line); transition: color 150ms ease, border-color 150ms ease; }
.rp-matrix__row th a:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
.rp-matrix td { text-align: center; padding: 3px 0; }
.rp-cell { position: relative; display: inline-block; width: 16px; height: 16px; border-radius: 3px; box-sizing: border-box; vertical-align: middle; }
.rp-cell--fail { background: var(--risk); border: 2px solid var(--risk); }
.rp-cell--pass { border: 1.5px solid var(--line); background: transparent; }
.rp-cell-col--all { background: var(--risk-tint); }
.rp-colfoot { text-align: center; padding-top: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-soft); border-top: 1px solid var(--line); }
.rp-colfoot--all { color: var(--risk); font-weight: 600; }
.rp-colfoot__of { color: var(--ink-faint); }
.rp-matrix tfoot th { text-align: left; padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 11px; font-weight: 500; color: var(--ink-faint); letter-spacing: 0.05em; text-transform: uppercase; }

.rp-controls { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px 12px; align-items: center; }
.rp-controls[hidden], .rp-more-wrap[hidden], .rp-pane[hidden], .rp-empty[hidden], [data-copy][hidden], [data-action][hidden] { display: none; }
.rp-field { display: flex; align-items: center; gap: 8px; flex: 1 1 220px; max-width: 320px; padding: 0 12px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.rp-field svg { width: 18px; height: 18px; color: var(--ink-faint); flex: none; }
.rp-input { flex: 1; min-width: 0; padding: 10px 0; font: inherit; font-size: 14.5px; color: var(--ink); background: transparent; border: 0; outline: 0; }
.rp-field:focus-within { border-color: var(--gold); }
.rp-chiprow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rp-filterchip, .rp-select select { font: inherit; font-size: 13.5px; color: var(--ink-soft); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; cursor: pointer; transition: color 150ms ease, border-color 150ms ease; }
.rp-filterchip.is-on { color: var(--navy-950); border-color: var(--navy-950); font-weight: 600; }
.rp-select select.is-on { color: var(--navy-950); border-color: var(--navy-950); font-weight: 600; }
.rp-select--sort { margin-left: auto; }
.rp-pages { margin-top: 16px; display: block; }
.rp-js .rp-pages { display: grid; grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.3fr); gap: 24px; align-items: start; }
.rp-list { list-style: none; margin: 0; padding: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); min-width: 0; }
.rp-item { border-top: 1px solid var(--line); }
.rp-item:first-child { border-top: 0; }
.rp-item__row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 12px 16px; text-decoration: none; color: var(--ink); transition: background 150ms ease; }
.rp-item__row:hover { background: var(--bg); }
.rp-item__path { font-family: var(--font-mono); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: clip; }
.rp-item__score { font-family: var(--font-display); font-size: 20px; color: var(--navy-950); }
.rp-item__failed { font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-faint); white-space: nowrap; }
.rp-item.is-selected .rp-item__row { background: var(--bg); box-shadow: inset 3px 0 0 var(--gold); }
.rp-item .rp-detail { padding: 4px 16px 16px; }
.rp-js .rp-item .rp-detail { display: none; }
.rp-js .rp-item.is-open .rp-detail { display: block; }
.rp-js .rp-more { display: none; }
.rp-js .rp-list.is-all .rp-more { display: list-item; }
.rp-js .rp-item.is-hidden { display: none; }
.rp-pane { position: sticky; top: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 24px; min-width: 0; }
.rp-js .rp-pane { display: block; }
.rp-pane__path { font-family: var(--font-mono); font-size: 13px; color: var(--ink-soft); word-break: break-all; margin-bottom: 10px; }
.rp-more-wrap { margin-top: 12px; }
.rp-showall { font: inherit; font-size: 14px; font-weight: 600; color: var(--navy-950); background: transparent; border: 1px solid var(--navy-950); border-radius: var(--radius-sm); padding: 9px 16px; cursor: pointer; transition: background 150ms ease, color 150ms ease; }
.rp-showall:hover { background: var(--navy-950); color: var(--white); }
.rp-empty { margin-top: 12px; font-size: 14.5px; color: var(--ink-soft); }
.rp-detail__top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-top: 8px; }
.rp-detail__score strong { font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1; color: var(--navy-950); }
.rp-detail__score span { font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); margin-left: 4px; }
.rp-detail__open { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.rp-detail__open svg { width: 16px; height: 16px; }

.rp-check { border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); margin-top: 12px; }
.rp-check > summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; padding: 16px 20px; }
.rp-check > summary::-webkit-details-marker { display: none; }
.rp-check > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.rp-check__name { font-family: var(--font-display); font-size: 19px; color: var(--navy-950); }
.rp-check__count { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); white-space: nowrap; }
.rp-check > summary .rp-bar { grid-column: 1 / -1; }
.rp-check__body { padding: 0 20px 18px; }
.rp-check__why { font-size: 15px; line-height: 1.55; color: var(--ink); max-width: 760px; }
.rp-inference { margin-top: 12px; padding: 10px 14px; font-size: 14px; line-height: 1.5; color: var(--ink-soft); border-left: 3px solid var(--gold); background: var(--bg); max-width: 760px; }
.rp-check__pages { margin-top: 14px; font-size: 14px; color: var(--ink); }
.rp-pagelist { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; }
.rp-pagelist a { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; white-space: nowrap; }
.rp-subdetails { margin-top: 8px; }
.rp-subdetails > summary { cursor: pointer; font-family: var(--font-mono); font-size: 12px; color: var(--navy-800); }
.rp-fix { margin-top: 16px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.rp-fix__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.rp-fix__title { font-family: var(--font-display); font-weight: 400; font-size: 20px; color: var(--navy-950); }
.rp-fix__applies { font-size: 14px; color: var(--ink-soft); }
.rp-copy { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 600; color: var(--navy-950); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 12px; cursor: pointer; transition: color 150ms ease, border-color 150ms ease; }
.rp-copy:hover { border-color: var(--navy-950); }
.rp-copy svg { width: 15px; height: 15px; }
.rp-fix .rp-code { margin-top: 12px; }
.rp-panel .rp-state { max-width: 640px; }
.rp-cit { display: block; }

@media (max-width: 1100px) {
  .rp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rp-priorities { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .rp-js .rp-pages { display: block; }
  .rp-js .rp-pane { display: none; }
  .rp-select--sort { margin-left: 0; }
}
@media (max-width: 640px) {
  .rp-top__inner, .rp-body { padding-left: 16px; padding-right: 16px; }
  .rp-kpis { grid-template-columns: 1fr 1fr; gap: 10px; }
  .rp-kpi { padding: 14px 14px 12px; }
  .rp-exec { padding: 20px 18px 18px; }
  .rp-tablist { margin-left: -16px; margin-right: -16px; padding: 0 16px; }
  .rp-list { border: 0; background: transparent; display: grid; gap: 10px; }
  .rp-item { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
  .rp-item:first-child { border-top: 1px solid var(--line); }
  .rp-field { max-width: none; flex-basis: 100%; }
  .rp-check > summary { padding: 14px 16px; }
  .rp-check__body { padding: 0 16px 16px; }
}
@media print {
  .rp-top__print, .rp-controls, .rp-more-wrap, .rp-tablist, .rp-toc, .rp-copy, .rp-cluster__toggle { display: none !important; }
  .rp-panel[hidden] { display: block !important; }
  .rp-js .rp-h2--panel { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .rp-js .rp-pages { display: block; }
  .rp-js .rp-pane { display: none !important; }
  .rp-js .rp-item .rp-detail { display: block !important; }
  .rp-js .rp-more, .rp-js .rp-item.is-hidden { display: list-item !important; }
  .rp-cluster.is-collapsed .rp-matrix__row { display: table-row !important; }
  .rp-top { background: var(--white); color: var(--ink); border-bottom: 1px solid var(--ink); }
  .rp-top__logo .logo__mark, .rp-top__logo .logo__icon, .rp-top__meta, .rp-top__domain { color: var(--ink); }
  .rp-exec, .rp-kpi, .rp-priority, .rp-check, .rp-fix { box-shadow: none; break-inside: avoid; }
  .rp-panel { break-before: page; }
  .rp-panel:first-of-type { break-before: auto; }
  .rp-matrixwrap { overflow: visible; }
}
.rp-body--foot { padding-top: 0; padding-bottom: 64px; }
.rp-sample-banner { margin-top: 4px; }
.rp-body > .rp-sample-banner + .rp-head { margin-top: 0; }
.rp-matrix th, .rp-matrix td { vertical-align: middle; }
.rp-matrix thead th { vertical-align: bottom; }
.rp-cluster__head th { vertical-align: middle; }

/* Citations tab (rp-cit) */
.rp-kpis--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rp-cit-label { margin-top: 8px; font-size: 14.5px; color: var(--ink-soft); max-width: 760px; }
.rp-cit-lead { margin-top: 14px; font-size: 16px; line-height: 1.6; color: var(--ink); max-width: 760px; }
.rp-cit-groups { margin-top: 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 24px; }
.rp-cit-tablewrap { overflow-x: auto; margin-bottom: 14px; }
.rp-cit-table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.rp-cit-table thead th { text-align: left; padding: 6px 12px 8px 0; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 11.5px; font-weight: 500; color: var(--ink-faint); vertical-align: bottom; }
.rp-cit-model__name { display: block; color: var(--ink); font-size: 12px; }
.rp-cit-model__meta { display: block; font-weight: 400; }
.rp-cit-row th, .rp-cit-row td { padding: 9px 12px 9px 0; border-top: 1px solid var(--line); vertical-align: middle; }
.rp-cit-q { text-align: left; font-weight: 400; color: var(--ink); min-width: 220px; }
.rp-cit-table td { white-space: nowrap; }
.rp-cit-cta { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.rp-cit-cta .rp-note { margin-top: 0; }
.rp-cit--empty .rp-text { max-width: 640px; }
@media (max-width: 640px) {
  .rp-kpis--three { grid-template-columns: 1fr; }
  .rp-cit-groups { padding: 4px 14px; }
  .rp-cit-q { min-width: 160px; }
}
h2.scan-bridge__text { font-family: var(--font-body); line-height: 1.4; letter-spacing: 0; }
.pb-card__track { display: block; margin-bottom: 4px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-faint); }
.ac-scan { padding-bottom: 32px; }
.ac-scan .hero__fineprint { margin-top: 10px; }
.ac-banner { margin-bottom: 40px; }
.ct-all { margin-top: 4px; }
.ct-all__summary { cursor: pointer; list-style: none; padding: 10px 28px 10px 0; position: relative; font-family: var(--font-mono); font-size: 12.5px; color: var(--navy-800); }
.ct-all__summary::-webkit-details-marker { display: none; }
.ct-all__summary::after { content: "+"; position: absolute; right: 4px; top: 8px; font-size: 18px; color: var(--ink-faint); }
.ct-all[open] > .ct-all__summary::after { content: "\2212"; }
.ct-all__summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.rp-ba { margin-top: 24px; }
.rp-ba__title { margin-top: 8px; }
.rp-ba__table { width: 100%; }
.rp-ba__table th[scope="row"] { font-weight: 400; color: var(--ink); text-align: left; }
.rp-ba__table th[scope="row"] { font-family: var(--font-body); font-size: 14.5px; text-transform: none; letter-spacing: 0; }
.rp-ba + .rp-head { margin-top: 28px; }

/* ----------------------------- Pro screenshot crops (.pro-shot) -----------------------------
   A frame around a crop of the real dashboard: the markup in assets/pro/*.frag, written by
   scripts/capture-pro-shots.js from the sample crawl. The frame crops (fixed height, hard edge),
   the dashboard's own rp-* rules style what is inside. 1px border, 10px radius, a thin mono
   caption bar, no window chrome. The view is decoration for a labelled image: not interactive. */
.pro-shot { margin: 0; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.pro-shot__view { background: var(--bg); padding: 16px; max-height: var(--pro-h, 360px); overflow: hidden; pointer-events: none; user-select: none; }
.pro-shot__view .rp-report { min-width: 0; }
.pro-shot__cap { margin: 0; padding: 9px 14px; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; line-height: 1.45; color: var(--ink-soft); background: var(--white); }
.pro-shot .rp-top { position: static; }
.pro-shot .rp-top__inner { padding: 14px 16px; }
.pro-shot--print .pro-shot__view { padding: 0; }
.pro-shot .rp-exec { margin-top: 0; }
@media (min-width: 901px) {
  .pro-shot .rp-js .rp-pages { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 14px; margin-top: 0; }
  .pro-shot .rp-js .rp-item.is-open .rp-detail { display: none; }
  .pro-shot .rp-pane { position: static; padding: 16px 18px; }
}
@media (max-width: 900px) {
  .pro-shot .rp-pane { display: none; }
}
@media (max-width: 640px) {
  .pro-shot--desktop { display: none; }
}

/* ----------------------------- Pro page and homepage Pro band (.pro-) -----------------------------
   Generated by scripts/generate-pro.js. Existing tokens only. */
.pro-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
.pro-actions .btn { margin-top: 0; }
.pro-actions--band { margin-top: 24px; }
.pro-icon { width: 24px; height: 24px; }

.pro-gap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 760px; }
.pro-gap__fig { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px 22px; display: flex; flex-direction: column; gap: 6px; }
.pro-gap__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.pro-gap__num { font-family: var(--font-display); font-size: clamp(64px, 11vw, 120px); line-height: 1; color: var(--navy-950); }
.pro-gap__cap { margin-top: 16px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.pro-gap__text { margin-top: 12px; max-width: 640px; font-size: 16.5px; line-height: 1.6; color: var(--ink); }

.pro-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; align-items: center; padding: 40px 0; border-top: 1px solid var(--line); }
.pro-row--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.pro-row--flip .pro-row__text { order: 2; }
.pro-row__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--navy-800); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pro-row__title { margin-top: 16px; font-family: var(--font-display); font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; color: var(--navy-950); }
.pro-row__body { margin-top: 10px; max-width: 460px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.pro-shot--summary { --pro-h: none; }
.pro-shot--matrix { --pro-h: 400px; }
.pro-shot--pages { --pro-h: 440px; }
.pro-shot--fixes { --pro-h: 340px; }
.pro-shot--print { --pro-h: none; }

.pro-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pro-col { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 28px 24px; }
.pro-col__title { margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.2; color: var(--navy-950); }
.pro-list { list-style: none; margin: 18px 0 0; padding: 0; }
.pro-list li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.45; color: var(--ink); }
.pro-list li:first-child { border-top: 0; }
.pro-list svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--navy-800); }
.pro-list a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.pro-col__foot { margin-top: 20px; }
.pro-faq { padding-top: 72px; }
.pro-col__foot--note { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-soft); }

.pro-mkt { background: var(--navy-950); padding: 80px 0; }
.pro-mkt__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: auto auto; gap: 40px 56px; align-items: center; }
.pro-mkt__text { grid-column: 1; grid-row: 1; }
.pro-mkt__services { grid-column: 1; grid-row: 2; }
.pro-mkt .pro-shot { grid-column: 2; grid-row: 1 / span 2; }
.pro-mkt h2 { color: var(--white); font-size: clamp(26px, 3vw, 38px); line-height: 1.12; }
.pro-mkt__lede { margin-top: 14px; max-width: 520px; font-size: 16px; color: rgba(255, 255, 255, 0.72); }
.pro-mkt__nums { margin-top: 18px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--gold-soft); }
.pro-mkt__actions { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.pro-mkt__link { color: rgba(255, 255, 255, 0.85); font-size: 15px; text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 3px; transition: color 150ms ease; }
.pro-mkt__link:hover { color: var(--white); }
.pro-mkt__price { margin-top: 20px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--gold-soft); }

@media (max-width: 1100px) {
  .pro-row, .pro-row--flip { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pro-row--flip .pro-row__text { order: 0; }
}
@media (max-width: 920px) {
  .pro-mkt__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 32px; }
  .pro-mkt__text, .pro-mkt__services, .pro-mkt .pro-shot { grid-column: 1; grid-row: auto; }
  .pro-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .pro-mkt { padding: 56px 0; }
  .pro-gap { gap: 12px; }
  .pro-gap__fig { padding: 18px 18px 16px; }
  .pro-col { padding: 22px 20px 20px; }
}

/* ----------------------------- Pro page rebuild: citations lead (.pro-) -----------------------------
   Two overlapping crops in the banner and the homepage band, two panels, three steps, a proof strip.
   No motion: the overlap is static. Existing tokens only. */
.pro-shot--gap { --pro-h: none; }
.pro-shot--citations { --pro-h: 460px; }
.pro-shot--tries { --pro-h: 380px; }

.pro-banner { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding: 44px; }
.pro-stack { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; padding-bottom: 8px; }
.pro-stack .pro-shot { grid-column: auto; grid-row: auto; }
.pro-stack .pro-shot--first { width: 88%; justify-self: start; }
.pro-stack .pro-shot--second { --pro-h: 280px; position: relative; z-index: 1; width: 78%; justify-self: end; margin-top: -56px; }
.pro-mkt .pro-stack { grid-column: 2; grid-row: 1 / span 2; }

.pro-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.pro-panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; min-width: 0; }
.pro-panel .pro-gap { max-width: none; margin-top: 14px; gap: 14px; }
.pro-panel .pro-gap__fig { background: var(--bg); border-color: transparent; padding: 16px 18px 14px; }
.pro-panel .pro-gap__num { font-size: clamp(56px, 7vw, 88px); }
.pro-panel__cap { margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.5; color: var(--ink-soft); }
.pro-panel__text { margin-top: 12px; font-size: 16px; line-height: 1.6; color: var(--ink); }
.pro-panel .pro-shot { margin-top: 20px; }
.pro-panel__link { margin-top: 16px; font-size: 15px; }
.pro-panel__link a, .pro-proof__text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.pro-named { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.pro-named__big { font-family: var(--font-display); font-size: clamp(36px, 4.4vw, 56px); line-height: 1.05; color: var(--navy-950); }
.pro-named__sub { font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; color: var(--navy-800); }
.pro-between { margin-top: 28px; font-family: var(--font-display); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.25; color: var(--navy-950); }

.pro-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pro-step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.pro-step__title { margin-top: 14px; font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--navy-950); }
.pro-step__text { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }

.pro-proof { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px 28px; margin-bottom: 72px; }
.pro-proof__line { margin-top: 8px; font-size: 18px; line-height: 1.4; color: var(--ink); }
.pro-proof__big { margin-right: 6px; font-family: var(--font-display); font-size: clamp(32px, 4vw, 44px); line-height: 1.1; color: var(--navy-950); }
.pro-proof__text { margin-top: 8px; max-width: 640px; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }

.pro-col__note { margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }
.pro-mkt__note { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.6); }

@media (max-width: 1100px) {
  .pro-panels { gap: 16px; }
  .pro-panel { padding: 22px; }
}
@media (max-width: 920px) {
  .pro-banner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pro-panels { grid-template-columns: minmax(0, 1fr); }
  .pro-steps { grid-template-columns: minmax(0, 1fr); }
  .pro-stack { padding-bottom: 0; gap: 16px; }
  .pro-stack .pro-shot--first, .pro-stack .pro-shot--second { width: 100%; margin-top: 0; }
  .pro-mkt .pro-stack { grid-column: 1; grid-row: auto; }
}
@media (max-width: 640px) {
  .pro-banner { padding: 28px 20px; }
  .pro-panel { padding: 20px 16px; }
  .pro-mkt .pro-stack .pro-shot--second { display: none; }
}
.pro-stack .pro-shot { display: flex; flex-direction: column-reverse; }
.pro-stack .pro-shot__cap { border-top: 0; border-bottom: 1px solid var(--line); }
.pro-shot--citations { --pro-h: 560px; }
.pro-shot--tries { --pro-h: 400px; }
.pro-stack .pro-shot--second { --pro-h: 250px; }
.pro-shot--citations { --pro-h: 680px; }
.pro-shot--tries { --pro-h: 480px; }
.pro-stack .pro-shot--second { --pro-h: 250px; }
@media (max-width: 640px) {
  .pro-shot--citations { --pro-h: 520px; }
  .pro-shot--tries { --pro-h: 400px; }
}
@media (max-width: 640px) {
  .pro-mkt .pro-shot--first { --pro-h: 190px; }
}

/* ----------------------------- Pro rebalance: a lean band and a leaner page (.pro-) ----------------------------- */
.pro-flow { margin-top: 22px; display: flex; align-items: center; gap: 16px; color: var(--gold-soft); }
.pro-flow__num { font-family: var(--font-display); font-size: clamp(64px, 8vw, 104px); line-height: 1; color: var(--gold-soft); }
.pro-flow__arrow { flex: none; width: clamp(32px, 4vw, 48px); height: auto; }
.pro-flow + .pro-mkt__nums { margin-top: 10px; }
.pro-mkt .pro-shot { align-self: center; }

.pro-banner .pro-shot--hero { --pro-h: 440px; }
.pro-panel__title { margin-top: 6px; font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; color: var(--navy-950); }

.pro-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pro-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; min-width: 0; }
.pro-card__title { margin-top: 14px; font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--navy-950); }
.pro-card__text { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.pro-card .pro-shot { margin-top: 16px; }
.pro-shot--thumb { --pro-h: 170px; }

@media (max-width: 920px) {
  .pro-cards { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .pro-banner .pro-shot--hero { --pro-h: 430px; }
  .pro-card { padding: 20px 18px; }
  .pro-flow { gap: 12px; }
}

/* ----------------------------- Homepage Pro band: texture and points (.pro-band-) -----------------------------
   One texture, one place. A square grid on a 28px tile, drawn by an inline SVG <pattern>,
   in a hard-edged zone that starts at the left edge of the right column and runs to the viewport's right edge.
   Static: nine filled cells and three outlined cells at fixed coordinates, partly hidden by the crop. */
.pro-band-hero { position: relative; overflow: hidden; --pro-band-pad: 80px; }
.pro-band-hero .pro-mkt__grid { grid-template-rows: auto; align-items: start; }
.pro-band-points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.pro-band-points li { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; color: rgba(255, 255, 255, 0.85); }
.pro-band-points__icon { flex: none; width: 20px; height: 20px; color: var(--gold-soft); }

.pro-band-visual { grid-column: 2; grid-row: 1; position: relative; width: 100%; width: round(down, 100%, 28px); min-width: 0; justify-self: start; }
.pro-band-zone { position: absolute; z-index: 0; top: -84px; bottom: calc(-1 * var(--pro-band-pad) - 28px); left: 0; right: calc(-1 * ((100vw - min(100vw, var(--content-width))) / 2 + 32px + 28px)); }
.pro-band-zone svg { display: block; width: 100%; height: 100%; }
.pro-band-line { fill: none; stroke: var(--line-on-navy); stroke-width: 1; stroke-opacity: 0.6; }
.pro-band-cell--fill { fill: var(--gold); fill-opacity: 0.2; }
.pro-band-cell--line { fill: none; stroke: var(--gold); stroke-opacity: 0.5; stroke-width: 1; }
.pro-band-cluster { position: absolute; z-index: 1; width: 140px; height: 112px; }
.pro-band-cluster--tr { top: -56px; right: -84px; }
.pro-band-cluster--bl { left: 0; bottom: -56px; }
.pro-band-visual .pro-shot { position: relative; z-index: 2; display: flex; flex-direction: column; height: 504px; grid-column: auto; grid-row: auto; align-self: auto; box-shadow: var(--shadow); }
.pro-band-visual .pro-shot__view { flex: none; height: 448px; max-height: none; }
.pro-band-visual .pro-shot__cap { flex: none; height: 54px; overflow: hidden; }

@media (max-width: 920px) {
  .pro-band-hero { --pro-band-pad: 56px; }
  .pro-band-visual { grid-column: 1; grid-row: auto; }
  .pro-band-zone { top: -24px; bottom: calc(-1 * var(--pro-band-pad)); left: calc(-1 * ((100vw - min(100vw, var(--content-width))) / 2 + 32px)); right: calc(-1 * ((100vw - min(100vw, var(--content-width))) / 2 + 32px + 28px)); }
  .pro-band-cluster--tr { display: none; }
  .pro-band-cluster--bl { bottom: -32px; }
}
@media (max-width: 640px) {
  .pro-band-hero { padding-top: 96px; }
  .pro-band-visual { display: contents; }
  .pro-band-zone { top: 0; bottom: auto; height: 72px; left: 0; right: 0; }
  .pro-band-cluster { display: none; }
}
@media (max-width: 640px) {
  .pro-band-visual .pro-shot { display: none; }
}

/* ----------------------------- Homepage Pro band, third pass (.pro-band-) -----------------------------
   A lighter navy zone (--navy-900) on the right, hard-edged, holding a field of page glyphs drawn by an
   inline SVG <pattern>: 44x56 glyphs on a 64x80 pitch, alternate rows half a pitch over. Outlines and ink
   are --white at 0.4, about 3.7:1 against --navy-900 (generate-pro.js asserts at least 3:1). A few glyphs
   are picked out in --gold and --navy-800 at fixed coordinates. Static. The crop above it is the real
   dashboard: top bar, five tabs, the pages explorer. */
.pro-band-glyph { fill: none; stroke: var(--white); stroke-opacity: 0.4; stroke-width: 1.5; }
.pro-band-glyph-ink { fill: var(--white); fill-opacity: 0.4; stroke: none; }
.pro-band-hl-corner { fill: var(--gold); }
.pro-band-hl-gold { fill: var(--gold); }
.pro-band-hl-ink { fill: var(--navy-950); }
.pro-band-hl-navy { fill: var(--navy-800); }
.pro-band-hl--stack, .pro-band-hl--strip { display: none; }

.pro-band-tag { display: inline-block; margin: 0; padding: 4px 9px 3px; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; line-height: 1.2; color: var(--gold); border: 1px solid var(--gold); border-radius: 4px; }
.pro-band-hero .pro-band-tag + h2 { margin-top: 14px; }
.pro-band-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.pro-band-list li { display: flex; align-items: center; gap: 12px; font-size: 16px; line-height: 1.4; color: rgba(255, 255, 255, 0.9); }
.pro-band-list__icon { flex: none; width: 22px; height: 22px; color: var(--gold); }

.pro-band-hero .pro-mkt__text { align-self: center; }
.pro-band-stage { grid-column: 2; grid-row: 1; position: relative; width: 100%; width: round(down, 100%, 64px); min-width: 0; justify-self: start; align-self: start; }
.pro-band-field { position: absolute; z-index: 0; top: -80px; bottom: calc(-1 * var(--pro-band-pad)); left: 0; right: auto; width: calc(100% + (100vw - min(100vw, var(--content-width))) / 2 + 32px + 64px); width: round(up, calc(100% + (100vw - min(100vw, var(--content-width))) / 2 + 32px + 64px), 64px); background: var(--navy-900); }
.pro-band-field svg { display: block; width: 100%; height: 100%; }
.pro-band-stage .pro-shot { position: relative; z-index: 1; display: flex; flex-direction: column; height: 512px; grid-column: auto; grid-row: auto; align-self: auto; box-shadow: var(--shadow); }
.pro-band-stage .pro-shot__view { flex: 1; min-height: 0; max-height: none; padding: 0; background: var(--bg); }
.pro-band-stage .pro-shot__cap { flex: none; height: 54px; overflow: hidden; }
.pro-band-dash__body { padding: 0 16px 16px; }
.pro-band-dash .rp-tablist { margin-top: 0; }
.pro-band-dash .rp-pages { margin-top: 16px; }
.pro-band-dash .rp-item__path { display: flex; min-width: 0; }
.pro-band-path__head { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.pro-band-path__tail { flex: none; white-space: pre; }

@media (min-width: 1024px) {
  .pro-band-hero { min-height: 560px; display: flex; align-items: center; }
  .pro-band-hero .section__inner { width: 100%; }
}
@media (max-width: 920px) {
  .pro-band-hero { padding-bottom: 112px; --pro-band-pad: 112px; }
  .pro-band-stage { grid-column: 1; grid-row: auto; }
  .pro-band-field { top: -24px; left: calc(-1 * ((100vw - min(100vw, var(--content-width))) / 2 + 32px)); width: round(up, 100vw, 64px); }
  .pro-band-hl--wide { display: none; }
  .pro-band-hl--stack { display: inline; }
}
@media (max-width: 640px) {
  .pro-band-hero { padding-top: 144px; padding-bottom: 56px; }
  .pro-band-stage { display: contents; }
  .pro-band-stage .pro-shot { display: none; }
  .pro-band-field { top: 0; bottom: auto; height: 120px; left: 0; width: round(up, 100vw, 64px); }
  .pro-band-hl--stack { display: none; }
  .pro-band-hl--strip { display: inline; }
}
.pro-band-dash .rp-top__date, .pro-band-dash .rp-top__label { display: none; }
.pro-band-dash .rp-top__inner { padding: 12px 16px; flex-wrap: nowrap; }
.pro-band-dash .rp-tablist { gap: 0; overflow: hidden; }
.pro-band-dash .rp-tab { padding: 12px 10px; font-size: 14px; gap: 6px; }
.pro-band-dash .rp-tab svg { width: 16px; height: 16px; }
.pro-band-stage .pro-band-dash .rp-pages { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 12px; }
.pro-band-stage .pro-band-dash .rp-pages { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.pro-band-dash .rp-fails__why { display: none; }
.pro-band-dash .rp-pane { padding: 14px 16px; }
.pro-band-dash .rp-detail__score strong { font-size: 34px; }
.pro-band-dash .rp-item__row { padding: 10px 14px; }
.pro-band-stage .pro-shot > div[role="img"] { flex: 1; min-height: 0; overflow: hidden; }
.pro-band-stage .pro-shot__view { height: 100%; flex: none; }
@media (max-width: 1180px) {
  .pro-band-dash .rp-top__print, .pro-band-dash .rp-fails__advice, .pro-band-dash .rp-fails br { display: none; }
  .pro-band-dash .rp-top__domain { white-space: nowrap; }
}

/* ----------------------------- Homepage Pro band, fourth pass: the field covers the band (.pro-band-) -----------------------------
   Two layers that are children of the full-bleed band (position: relative, overflow: hidden), nothing in the
   1180px container caps them. .pro-band-faint covers the whole band with outline-only glyphs at low opacity
   behind the text. .pro-band-surface is the --navy-900 zone, from the right column's left edge (the grid's
   0.8fr / 1.2fr split with its 56px gap, computed from the band's own width) to the band's right edge, full height,
   with the full-intensity glyphs and the highlights. Patterns are anchored to the right edge. Static. */
.pro-band-faint { position: absolute; z-index: 0; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.pro-band-faint-glyph { fill: none; stroke: var(--white); stroke-width: 1.5; }
.pro-band-surface { position: absolute; z-index: 1; top: 0; bottom: 0; right: 0; left: calc((100% - min(100%, var(--content-width))) / 2 + 32px + (min(100%, var(--content-width)) - 64px - 56px) * 0.4 + 56px); background: var(--navy-900); }
.pro-band-surface svg { display: block; width: 100%; height: 100%; }
.pro-band-hero .section__inner { position: relative; z-index: 2; }
@media (max-width: 920px) {
  .pro-band-surface { top: auto; left: 0; height: calc(512px + 24px + var(--pro-band-pad)); }
}
@media (max-width: 640px) {
  .pro-band-surface { top: 0; bottom: auto; height: 120px; }
}

/* ----------------------------- Changelog page (.cl-) ----------------------------- */
.cl-list { margin-top: 28px; max-width: 760px; }
.cl-list li { font-size: 15px; }
.cl-refs { display: inline-block; margin-left: 4px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); }
.cl-refs code { font: inherit; }

/* ----------------------------- Trust page (.tr-) ----------------------------- */
.tr-heading { font-family: var(--font-display); font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; color: var(--navy-950); max-width: 760px; }
.tr-rows { list-style: none; margin: 24px 0 0; padding: 0; max-width: 820px; }
.tr-row { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; padding: 24px 0; border-top: 1px solid var(--line); }
.tr-row:last-child { border-bottom: 1px solid var(--line); }
.tr-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--navy-800); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tr-icon__svg { width: 24px; height: 24px; }
.tr-title { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.25; color: var(--navy-950); }
.tr-text { margin-top: 8px; font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.tr-text a, .tr-link a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.tr-link { margin-top: 10px; font-size: 15px; }
@media (max-width: 640px) {
  .tr-row { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* ----------------------------- Research 002: crawler access (.r2-) ----------------------------- */
.r2-bar--all { fill: var(--navy-950); }
.r2-bar--blocked { fill: var(--risk); }
.r2-bar--limited { fill: var(--ink-faint); }
.r2-limits__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--risk); margin-bottom: 12px; }

/* ----------------------------- MCP page (.mcp-) -----------------------------
   mcp.html is generated by scripts/generate-mcp-page.js. It reuses the page
   banner, .card, .ac-faq, .fix-snippet, .scan-bridge and the homepage band's
   chat frame (.mcp-chat, .mcp-msg, .mcp-call). Only what those do not cover is
   below. Static page: no motion. */
.mcp-vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.mcp-banner { flex-wrap: wrap; gap: 32px 48px; align-items: center; margin-bottom: 48px; }
.mcp-banner__body { flex: 1 1 340px; max-width: 520px; }
.mcp-banner__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.mcp-banner__actions .btn { margin-top: 0; }
.mcp-banner__side { flex: 1 1 380px; max-width: 540px; min-width: 0; }
.mcp-banner__side .mcp-chat__body { padding: 20px 20px 22px; }
.mcp-banner__side .mcp-call { margin: 14px 0; }
.mcp-banner__caption { margin-top: 10px; font-family: var(--font-mono); font-size: 11.5px; color: rgba(255, 255, 255, 0.6); }
.mcp-excerpt { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.mcp-excerpt__line { display: block; }
.mcp-excerpt__line--in { padding-left: 16px; color: var(--ink-soft); }

.mcp-section { padding: 0 0 72px; }
.mcp-section[id] { scroll-margin-top: 72px; }

.mcp-asks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mcp-ask { min-height: 0; justify-content: space-between; gap: 18px; padding: 20px 20px 18px; }
.mcp-ask__text { font-family: var(--font-display); font-size: 20px; line-height: 1.3; color: var(--navy-950); }
.mcp-ask__run { display: flex; align-items: center; gap: 10px; }
.mcp-ask__arrow { width: 18px; height: 18px; flex-shrink: 0; color: var(--gold-deep); }
.mcp-chip { font-family: var(--font-mono); font-size: 12px; line-height: 1.3; padding: 3px 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--navy-800); overflow-wrap: anywhere; }

.mcp-group + .mcp-group { margin-top: 44px; }
.mcp-group__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.mcp-group__icon { display: inline-flex; flex-shrink: 0; color: var(--navy-800); }
.mcp-group__icon svg { width: 28px; height: 28px; }
.mcp-group__title { font-family: var(--font-display); font-weight: 400; font-size: 24px; line-height: 1.2; color: var(--navy-950); }
.mcp-group__blurb { font-size: 14.5px; color: var(--ink-soft); }

.mcp-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mcp-tools--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mcp-tool { min-height: 0; padding: 20px 20px 18px; }
.mcp-tool__name { font-family: var(--font-mono); font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--navy-950); margin-bottom: 8px; overflow-wrap: anywhere; }
.mcp-tool__line { flex-grow: 0; font-size: 15px; line-height: 1.5; }

.mcp-more { margin-top: 14px; border-top: 1px solid var(--line); }
.mcp-more summary { cursor: pointer; list-style: none; position: relative; padding: 12px 24px 0 0; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--navy-800); }
.mcp-more summary::-webkit-details-marker { display: none; }
.mcp-more summary::after { content: "+"; position: absolute; right: 2px; top: 10px; font-size: 16px; color: var(--ink-faint); }
.mcp-more[open] summary::after { content: "\2212"; }
.mcp-more summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mcp-more__body { padding-top: 14px; }
.mcp-more__label { margin: 0 0 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.mcp-more__label:not(:first-child) { margin-top: 18px; }
.mcp-more__prompt { margin-bottom: 10px; font-size: 14px; color: var(--ink-soft); }
.mcp-more__note, .mcp-more__none { font-size: 12.5px; color: var(--ink-faint); }
.mcp-more__body .fix-snippet { padding: 14px 16px; }
.mcp-more__body .fix-snippet__code { font-size: 11.5px; }
.mcp-more__body .fix-snippet + .mcp-more__note { margin-top: 8px; }

.mcp-scroll { overflow-x: auto; }
.mcp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mcp-table th, .mcp-table td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-top: 1px solid var(--line); line-height: 1.5; color: var(--ink-soft); font-weight: 400; }
.mcp-table thead th { border-top: 0; padding-top: 0; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.mcp-table tbody th { white-space: nowrap; }
.mcp-in { display: block; font-family: var(--font-mono); font-size: 12.5px; color: var(--navy-950); }
.mcp-req { display: block; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); }

.mcp-flow__calls { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; }
.mcp-flow__label { margin-right: 4px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }

.mcp-url { display: flex; align-items: stretch; gap: 10px; max-width: 640px; margin-bottom: 28px; }
.mcp-url__field { flex: 1 1 auto; min-width: 0; padding: 12px 14px; font-family: var(--font-mono); font-size: 14px; color: var(--navy-950); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.mcp-url__field:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mcp-url .btn[hidden], .mcp-clients .btn[hidden] { display: none; }

.mcp-clients { margin-top: 0; }
.mcp-steps { margin: 0; padding: 0 0 14px 22px; font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); max-width: 680px; }
.mcp-steps li + li { margin-top: 6px; }
.mcp-clients code { font-family: var(--font-mono); font-size: 13px; padding: 1px 5px; border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); overflow-wrap: anywhere; }
.mcp-clients .fix-snippet { margin: 4px 0 18px; }

.mcp-expect { max-width: 820px; padding: 24px 24px 20px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.mcp-expect__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mcp-expect__list li { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.mcp-expect__list strong { font-weight: 600; color: var(--navy-950); }
.mcp-expect__links { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); }
.mcp-expect__links a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

@media (max-width: 1100px) {
  .mcp-asks, .mcp-tools--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .mcp-banner__body, .mcp-banner__side { flex-basis: 100%; max-width: none; }
  .mcp-asks, .mcp-tools, .mcp-tools--three { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .mcp-section { padding-bottom: 52px; }
  .mcp-banner { margin-bottom: 32px; }
  .mcp-banner__side .mcp-chat__body { padding: 16px; }
  .mcp-url { flex-direction: column; }
  .mcp-expect { padding: 20px 18px 16px; }
}

/* ----------------------------- Tools page (.tools-) -----------------------------
   tools/index.html and the "Next step" block on each tool page are generated by
   scripts/generate-tools-page.js. They reuse the page banner, .card, .ac-faq,
   .scan-bridge and .btn. Only what those do not cover is below. Static: no motion. */
.tools-banner { flex-wrap: wrap; justify-content: space-between; gap: 32px 48px; align-items: center; margin-bottom: 48px; }
.tools-banner__body { flex: 1 1 340px; max-width: 520px; }
.tools-banner .page-banner__title { text-wrap: balance; }
.tools-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 18px; }
.tools-banner__actions .btn { margin-top: 0; }
.tools-banner__link { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, 0.78); text-decoration: underline; text-decoration-color: var(--gold-soft); text-underline-offset: 4px; transition: color var(--t); }
.tools-banner__link:hover { color: var(--gold-soft); }
.tools-tiles { display: flex; flex-wrap: wrap; gap: 12px; }
.tools-tile { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; background: var(--bg); color: var(--navy-800); border-radius: var(--radius); }
.tools-tile svg { width: 28px; height: 28px; }

.tools-section { padding: 0 0 72px; }

.tools-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 900px; }
.tools-flow__row { min-height: 0; padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1.2fr) 24px minmax(0, 1fr); align-items: center; gap: 16px; }
.tools-flow__finding { display: flex; flex-direction: column; gap: 4px; }
.tools-flow__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.tools-flow__text { font-size: 15.5px; line-height: 1.4; color: var(--ink); }
.tools-flow__arrow { display: inline-flex; color: var(--gold-deep); }
.tools-flow__arrow svg { width: 22px; height: 22px; }
.tools-flow__tool { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 19px; line-height: 1.2; color: var(--navy-950); transition: color var(--t); }
.tools-flow__ticon { display: inline-flex; flex-shrink: 0; color: var(--navy-800); }
.tools-flow__ticon svg { width: 24px; height: 24px; }
.tools-flow__row:hover .tools-flow__tool { color: var(--gold-deep); }

.tools-group__head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.tools-group__icon { display: inline-flex; flex-shrink: 0; color: var(--navy-800); }
.tools-group__icon svg { width: 32px; height: 32px; }
.tools-group__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 3.2vw, 38px); line-height: 1.1; color: var(--navy-950); }
.tools-group__blurb { margin-top: 4px; font-size: 15.5px; color: var(--ink-soft); }
.tools-group__caption { margin-bottom: 20px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-faint); }
.tools-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tools-grid > .tools-card:only-child { grid-column: 1 / 2; }

.tools-card { min-height: 0; padding: 22px; }
.tools-card .tools-pv { margin-bottom: 20px; }
.tools-card__top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tools-card__icon { display: inline-flex; flex-shrink: 0; color: var(--navy-800); }
.tools-card__icon svg { width: 24px; height: 24px; }
.tools-card__name { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.tools-card__headline { margin-bottom: 8px; font-family: var(--font-display); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--navy-950); }
.tools-card__desc { font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); }
.tools-io { margin: 16px 0 0; display: grid; gap: 10px; }
.tools-io div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; font-size: 14px; line-height: 1.5; }
.tools-io dt { padding-top: 3px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.tools-io dd { margin: 0; color: var(--ink-soft); }
.tools-chips { list-style: none; margin: 16px 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tools-chip { padding: 3px 8px; font-family: var(--font-mono); font-size: 12px; line-height: 1.3; color: var(--navy-800); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tools-card__btn { margin-top: auto; align-self: flex-start; }

.tools-pv { display: grid; gap: 10px; padding: 14px; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tools-pv__field { display: flex; gap: 8px; }
.tools-pv__input { flex: 1 1 auto; min-width: 0; padding: 9px 12px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-faint); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tools-pv__btn { padding: 9px 14px; font-size: 13px; font-weight: 600; white-space: nowrap; color: var(--white); background: var(--navy-950); border-radius: var(--radius-sm); }
.tools-pv__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tools-pv__chip { justify-self: start; padding: 2px 8px; font-family: var(--font-mono); font-size: 11px; line-height: 1.4; border-radius: var(--radius-sm); }
.tools-pv__chip--ok { background: var(--ok-tint); color: var(--ok); }
.tools-pv__chip--warn { background: var(--warn-tint); color: var(--gold-deep); }
.tools-pv__chip--risk { background: var(--risk-tint); color: var(--risk); }
.tools-pv__chip--muted { color: var(--ink-faint); background: var(--white); border: 1px solid var(--line); }
.tools-pv__row, .tools-pv__cols:not(.tools-pv__cols--head) { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 10px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tools-pv__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
.tools-pv__cols:not(.tools-pv__cols--head) { display: grid; }
.tools-pv__cols--head { padding: 0 10px; }
.tools-pv__colhead { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.tools-pv__name { font-family: var(--font-mono); font-size: 12px; line-height: 1.4; color: var(--ink); overflow-wrap: anywhere; }
.tools-pv__frow { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 10px; }
.tools-pv__flabel { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); }
.tools-pv__bar { height: 26px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tools-pv__bar--narrow { width: 40%; }
.tools-pv__type { padding: 2px 8px; font-family: var(--font-mono); font-size: 11px; line-height: 1.4; color: var(--ink-soft); background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.tools-pv__type--on { color: var(--white); background: var(--navy-950); border-color: var(--navy-950); }

.tools-claude { min-height: 0; flex-direction: row; align-items: center; gap: 20px; padding: 22px 24px; }
.tools-claude__icon { display: inline-flex; flex-shrink: 0; color: var(--navy-800); }
.tools-claude__icon svg { width: 32px; height: 32px; }
.tools-claude__body { flex: 1 1 auto; min-width: 0; }
.tools-claude__title { font-family: var(--font-display); font-weight: 400; font-size: 22px; line-height: 1.2; color: var(--navy-950); }
.tools-claude__text { margin-top: 4px; max-width: 620px; font-size: 15px; color: var(--ink-soft); }

.tools-next { padding: 0 0 56px; }
.tools-next__panel { max-width: 820px; padding: 20px 24px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.tools-next__title { font-family: var(--font-mono); font-weight: 400; font-size: 11px; line-height: 1.4; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.tools-next__text { margin-top: 8px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.tools-next__text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }

@media (max-width: 920px) {
  .tools-banner__body { flex-basis: 100%; max-width: none; }
  .tools-grid { grid-template-columns: minmax(0, 1fr); }
  .tools-grid > .tools-card:only-child { grid-column: auto; }
}
@media (max-width: 640px) {
  .tools-section { padding-bottom: 52px; }
  .tools-banner { margin-bottom: 32px; }
  .tools-tiles { gap: 8px; }
  .tools-tile { width: 48px; height: 48px; }
  .tools-tile svg { width: 24px; height: 24px; }
  .tools-flow__row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tools-flow__arrow { transform: rotate(90deg); width: 22px; }
  .tools-io div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .tools-claude { flex-direction: column; align-items: flex-start; }
  .tools-next__panel { padding: 18px; }
  .tools-pv__cols, .tools-pv__cols:not(.tools-pv__cols--head) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tools-pv__cols .tools-pv__name { grid-column: 1 / -1; }
  .tools-pv__cols--head > span:first-child { display: none; }
}

/* ----------------------------- Tool pages (.toolx-) -----------------------------
   The blocks scripts/generate-tools-page.js writes into each tool page (TOOL-INTRO,
   TOOL-MORE) and the behaviour hooks tools/shared.js adds. Reuses .tools-chips,
   .card, .ac-faq and .btn. Static: no motion. */
.toolx-intro { margin-top: -32px; padding: 0 0 28px; }
.toolx-intro__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.toolx-chips { margin: 0; }
.toolx-example { padding: 8px 16px; font-size: 14px; }
.toolx-live { margin-top: 12px; min-height: 1.4em; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-soft); }

.toolx-section { padding: 0 0 56px; }
.toolx-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.toolx-step { min-height: 0; padding: 20px; gap: 8px; }
.toolx-step__icon { display: inline-flex; color: var(--navy-800); }
.toolx-step__icon svg { width: 26px; height: 26px; }
.toolx-step__label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.toolx-step__text { font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.toolx-why { margin-top: 24px; max-width: 720px; font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.toolx-why strong, .toolx-claude strong { color: var(--navy-950); font-weight: 600; }
.toolx-why a, .toolx-claude a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
.toolx-claude { max-width: 820px; padding: 18px 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.toolx-claude__text { font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); }
.toolx-claude code { padding: 1px 5px; font-family: var(--font-mono); font-size: 13px; color: var(--ink); background: var(--bg); border-radius: var(--radius-sm); overflow-wrap: anywhere; }

.toolx-checked { margin-top: 10px; font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--ok); }
.toolx-checked[hidden] { display: none; }
.toolx-retry { margin-top: 10px; padding: 8px 16px; font-size: 14px; }
.toolx-retry[hidden] { display: none; }
.toolx-retry:focus-visible, .toolx-example:focus-visible, .tool-example:focus-visible, [data-toolx-result]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
[data-toolx-result] { max-width: 100%; overflow-x: auto; }

@media (max-width: 920px) {
  .toolx-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .toolx-intro { margin-top: -16px; }
  .toolx-section { padding-bottom: 40px; }
  .toolx-claude { padding: 16px 18px; }
}

@media (max-width: 640px) {
  .logo { gap: 7px; }
  .logo__mark { font-size: 21px; }
  .logo__icon svg { width: 23px; height: 23px; }
}