/* ============================================================
   Rankings.io · Demo Audit
   Brand: Rankings 2.0 style guide (June 2025)
   Built iPad-first (1024–1366 landscape), degrades to phone.
   All fonts local, so there is no network dependency on the show floor.
   ============================================================ */

@font-face {
  font-family: 'Roslindale';
  src: url('fonts/Roslindale-DisplayCondensedLight.ttf') format('truetype');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'Roslindale';
  src: url('fonts/Roslindale-DisplayCondensedMedium.ttf') format('truetype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Roslindale';
  src: url('fonts/Roslindale-DisplayCondensedBold.ttf') format('truetype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Light.otf') format('opentype');
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Regular.otf') format('opentype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Medium.otf') format('opentype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/Satoshi-Bold.otf') format('opentype');
  font-weight: 700; font-display: swap;
}

:root {
  /* Anchors */
  --tuxedo:    #282828;
  --suede:     #fcfaec;
  --pearl:     #ffffff;
  /* Primary */
  --sky:       #3a93cf;
  --midnight:  #14364d;
  /* Accent */
  --flax:      #eedc82;
  --chartreuse:#c0e005;

  --midnight-90: #1b4460;
  --midnight-70: #35617f;
  /* Secondary ink. Measured against Suede (#fcfaec), not eyeballed: at .62 and
     .40 these landed at 3.9:1 and 2.2:1, under the 4.5:1 floor for the small
     labels and table headers that use them. */
  --ink-60:  rgba(20, 54, 77, .78);   /* ~6.2:1 on Suede */
  --ink-40:  rgba(20, 54, 77, .68);   /* ~4.7:1 on Suede */
  --rule:    rgba(20, 54, 77, .14);
  --rule-soft: rgba(20, 54, 77, .07);

  /* Severity */
  --critical:  #c0392b;
  --warning:   #d98324;
  --warning-ink: #a8620f;   /* text-safe amber: ~4.5:1 on Suede */
  --ok:        #2e7d54;
  --strength:  #2e7d54;

  /* Local Falcon rank ramp */
  --rank-1:   #167c45;
  --rank-3:   #60b252;
  --rank-5:   #9dc03f;
  --rank-8:   #e8c33a;
  --rank-11:  #e59034;
  --rank-15:  #c44e28;
  --rank-20:  #b3211f;
  --rank-none:#7a1414;

  --shadow-sm: 0 1px 2px rgba(20,54,77,.06), 0 2px 8px rgba(20,54,77,.05);
  --shadow-md: 0 2px 6px rgba(20,54,77,.07), 0 12px 32px rgba(20,54,77,.09);
  --shadow-lg: 0 8px 24px rgba(20,54,77,.10), 0 32px 64px rgba(20,54,77,.12);

  --rail: 268px;
  --pad: clamp(20px, 3.4vw, 52px);
  --radius: 14px;

  /* Motion. Exponential ease-out throughout. The audit should feel decisive,
     like an instrument settling, never bouncy. */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);

  --t-fast:  140ms;   /* press, hover, colour */
  --t-base:  240ms;   /* state changes */
  --t-slow:  420ms;   /* layout, panel swaps */
  --t-enter: 620ms;   /* entrances */

  /* Semantic z-scale */
  --z-rail: 20;
  --z-banner: 40;
  --z-grid-point: 5;
  --z-tooltip: 200;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: 'Satoshi', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight: 400;
  color: var(--midnight);
  background: var(--suede);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, .display {
  font-family: 'Roslindale', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.005em;
  margin: 0;
}

a { color: var(--sky); }

.mono {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-variant-numeric: tabular-nums;
}
.tnum { font-variant-numeric: tabular-nums; }

/* ─── Eyebrow / label ─────────────────────────────────────── */
.eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-40);
}

/* ============================================================
   PICKER  (index.html)
   ============================================================ */

.picker {
  min-height: 100dvh;
  background: var(--midnight);
  color: var(--suede);
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 4vw, 64px);
}

.picker-head { display: flex; align-items: center; gap: 16px; margin-bottom: auto; }
.picker-head img { height: 34px; width: auto; }
.picker-head .rule { flex: 1; height: 1px; background: rgba(252,250,236,.18); }
.picker-head .eyebrow { color: rgba(252,250,236,.66); }

.picker-lede {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin: clamp(36px,6vh,80px) 0 clamp(28px,4vh,44px);
}
.picker-lede h1 {
  font-size: clamp(40px, 6.6vw, 92px);
  color: var(--suede);
  text-wrap: balance;
}
.picker-lede h1 em {
  font-style: normal;
  color: var(--flax);
}
.picker-lede p {
  margin: 0 0 8px;
  font-size: clamp(15px, 1.5vw, 18px);
  color: rgba(252,250,236,.68);
  max-width: 44ch;
}

.persona-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 1.6vw, 22px);
  margin-bottom: auto;
}

.persona-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: rgba(252,250,236,.05);
  border: 1px solid rgba(252,250,236,.16);
  border-radius: var(--radius);
  padding: clamp(20px, 2.2vw, 30px);
  color: var(--suede);
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  transition: transform .22s cubic-bezier(.22,.9,.3,1),
              background .22s ease, border-color .22s ease;
  min-height: 260px;
}
.persona-card:hover, .persona-card:focus-visible {
  transform: translateY(-5px);
  background: rgba(252,250,236,.10);
  border-color: var(--flax);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  outline: none;
}
.persona-card:active { transform: translateY(-1px); transition-duration: var(--t-fast); }

/* Picker entrance: lede first, then the three choices in sequence. */
.motion-ready .picker-lede h1 { animation: rise 720ms var(--ease-out-expo) both; }
.motion-ready .picker-lede p  { animation: rise 720ms 120ms var(--ease-out-expo) both; }
.motion-ready .persona-grid.entered .persona-card {
  animation: settle 560ms var(--ease-out-expo) both;
  animation-delay: calc(220ms + var(--i, 0) * 90ms);
}

/* Each card previews its own market instead of a decorative 01/02/03. The
   three miniatures read at a glance: a tiny cluster, a broad amber field, five
   lonely points. The choice shows you its payload before you make it. */
.persona-prev {
  display: grid; gap: 3px;
  width: 108px; margin-bottom: 22px;
  grid-template-columns: repeat(9, 1fr);
  aspect-ratio: 1;
}
.persona-prev i {
  border-radius: 50%; aspect-ratio: 1;
  transition: transform .55s var(--ease-out-quint);
}
.persona-card:hover .persona-prev i { transform: scale(1.22); }

.persona-card .solv { margin-bottom: 16px; }

/* The setup line. Reads as the asset the firm already has, so the share
   underneath lands as what that asset is currently buying them. */
.persona-card .solv-setup {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; color: rgba(252,250,236,.66);
  margin-bottom: 3px;
}
.persona-card .solv-setup::after {
  content: '↓'; font-size: 11px; color: rgba(252,250,236,.4);
}
.persona-card .solv-mine {
  font-size: 12.5px; color: rgba(252,250,236,.72);
}
.persona-card .solv-mine b {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: 21px; color: var(--flax);
  margin-right: 3px;
}
/* The gap to the market leader, drawn. Without it the bare percentage misleads:
   the stalled firm's 1.4% looks better than nothing until you see the 36% it is
   being measured against. */
.persona-card .solv-lead {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
  font-size: 11.5px; color: rgba(252,250,236,.62);
}
.solv-track {
  flex: none; width: 54px; height: 5px; border-radius: 3px;
  background: rgba(252,250,236,.16); overflow: hidden;
}
.solv-track .mine {
  display: block; height: 100%; border-radius: 3px;
  background: var(--flax); min-width: 2px;
}
.persona-card h2 {
  font-size: clamp(24px, 2.5vw, 33px);
  color: var(--suede);
  margin-bottom: 12px;
  text-wrap: balance;
}
.persona-card .hook {
  font-size: 15px;
  color: rgba(252,250,236,.72);
  margin: 0 0 22px;
  flex: 1;
}
.persona-card .signals {
  display: flex; flex-wrap: wrap; gap: 7px;
  padding-top: 18px;
  border-top: 1px solid rgba(252,250,236,.14);
}
.persona-card .signals span {
  font-size: 11.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(252,250,236,.09);
  color: rgba(252,250,236,.82);
  white-space: nowrap;
}

/* ─── Rep picker (booth setup, once per device) ───────────── */
.rep-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}
.rep-btn {
  display: flex; flex-direction: column; gap: 4px;
  text-align: left; font: inherit; cursor: pointer;
  padding: 18px 20px; border-radius: var(--radius);
  background: rgba(252,250,236,.05);
  border: 1px solid rgba(252,250,236,.16);
  color: var(--suede);
  transition: transform .2s cubic-bezier(.22,.9,.3,1), background .2s ease, border-color .2s ease;
}
.rep-btn:hover, .rep-btn:focus-visible {
  transform: translateY(-3px);
  background: rgba(252,250,236,.10);
  border-color: var(--flax);
  outline: none;
}
.rep-btn b {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: 21px; line-height: 1.1;
}
.rep-btn span { font-size: 12.5px; color: rgba(252,250,236,.66); }

.queue-row {
  font-size: 14px; padding: 10px 0;
  border-bottom: 1px solid rgba(252,250,236,.12);
}
.queue-row span { opacity: .5; }
.picker .msg { font-size: 13.5px; margin-top: 12px; min-height: 20px; }
.picker .msg.ok  { color: var(--chartreuse); }
.picker .msg.err { color: #ff9d8f; }

.rk-mini {
  font: inherit; font-size: 13.5px; font-weight: 700;
  padding: 10px 18px; border-radius: 8px; cursor: pointer;
  background: var(--flax); color: var(--midnight); border: none;
}
.rk-mini:disabled { opacity: .5; cursor: not-allowed; }
.rk-mini + .rk-mini { background: transparent; color: var(--suede); border: 1px solid rgba(252,250,236,.28); }
.rk-mini:hover { filter: brightness(1.06); }

.picker-foot {
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap;
  padding-top: clamp(24px, 4vh, 48px);
  border-top: 1px solid rgba(252,250,236,.14);
  font-size: 12.5px;
  color: rgba(252,250,236,.66);   /* .5 measured 4.2:1 on Midnight, under the floor */
}

/* ============================================================
   AUDIT SHELL  (audit.html)
   ============================================================ */

.shell { display: grid; grid-template-columns: var(--rail) 1fr; min-height: 100dvh; }

/* ─── Left rail ───────────────────────────────────────────── */
.rail {
  background: var(--midnight);
  color: var(--suede);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.rail-head { padding: 22px 22px 18px; border-bottom: 1px solid rgba(252,250,236,.13); }
.rail-head a.back {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 500;
  color: rgba(252,250,236,.66);
  text-decoration: none; margin-bottom: 16px;
}
.rail-head a.back:hover { color: var(--flax); }
.rail-head .firm {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: 21px; line-height: 1.12; color: var(--suede);
}
.rail-head .market { font-size: 12.5px; color: rgba(252,250,236,.66); margin-top: 5px; }

.brand-switch { display: flex; gap: 6px; padding: 14px 22px 0; }
.brand-switch button {
  flex: 1; font: inherit; font-size: 12px; font-weight: 500;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
  background: rgba(252,250,236,.07);
  border: 1px solid transparent;
  color: rgba(252,250,236,.7);
}
.brand-switch button[aria-pressed="true"] {
  background: var(--flax); color: var(--midnight); font-weight: 700;
}

.rail-nav { padding: 16px 12px 24px; flex: 1; }
.rail-nav a {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 9px;
  font-size: 14px; font-weight: 500;
  color: rgba(252,250,236,.78);
  text-decoration: none;
  transition: background .16s ease, color .16s ease;
}
.rail-nav a .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(252,250,236,.28); flex: none;
  transition: background .16s ease, transform .16s ease;
}
.rail-nav a:hover { background: rgba(252,250,236,.07); color: var(--suede); }
.rail-nav a[aria-current="true"] {
  background: rgba(252,250,236,.11); color: var(--suede); font-weight: 700;
}
.rail-nav a[aria-current="true"] .dot { background: var(--chartreuse); transform: scale(1.5); }

.rail-foot {
  padding: 16px 22px 22px;
  border-top: 1px solid rgba(252,250,236,.13);
  font-size: 11px; color: rgba(252,250,236,.64);
}
.rail-foot img { height: 22px; width: auto; opacity: .8; margin-bottom: 10px; }

/* ─── Main column ─────────────────────────────────────────── */
.main { min-width: 0; }

.demo-banner {
  background: var(--flax); color: var(--midnight);
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-align: center; padding: 7px 16px;
  position: sticky; top: 0; z-index: 40;
}

section.chapter {
  padding: clamp(40px, 5.5vw, 84px) var(--pad);
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: 34px;
}
section.chapter:last-of-type { border-bottom: none; }

/* Chapter heads carry a lead line, not a repeated eyebrow. The kicker sits
   beside the heading on wide screens so each chapter opens as one gesture
   rather than a stack of three identical rows. */
.chapter-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(18px, 3vw, 48px);
  align-items: end;
  margin-bottom: clamp(26px, 3vw, 40px);
  padding-bottom: clamp(18px, 2vw, 26px);
  border-bottom: 1px solid var(--rule);
}
.chapter-head h2 {
  font-size: clamp(34px, 4.6vw, 60px);
  margin: 0;
  text-wrap: balance;
}
.chapter-head .kicker {
  margin: 0 0 6px;
  font-size: clamp(15px, 1.5vw, 17.5px);
  color: var(--ink-60);
  text-wrap: pretty;
  max-width: 46ch;
}

/* The one chapter that gets a different opening: the map is the argument, so
   it runs full-bleed dark and the heading sits on the dark ground. */
section.chapter.is-hero {
  background: var(--midnight);
  color: var(--suede);
  border-bottom: none;
}
section.chapter.is-hero h2 { color: var(--suede); }
section.chapter.is-hero .kicker { color: rgba(252,250,236,.66); }
section.chapter.is-hero .chapter-head { border-bottom-color: rgba(252,250,236,.16); }

/* Inside the hero, text defaults to sitting on the dark ground, so labels go
   light. The white panels are islands: they re-assert their own ink, and any
   label inside one goes back to dark. Doing it in that order means a new panel
   or label can't accidentally ship dark-on-dark. */
section.chapter.is-hero .sec-label { color: rgba(252,250,236,.62); }

section.chapter.is-hero .scan-meta,
section.chapter.is-hero .grid-wrap,
section.chapter.is-hero .table-scroll,
section.chapter.is-hero .finding {
  color: var(--midnight);
}
section.chapter.is-hero .scan-meta .sec-label,
section.chapter.is-hero .grid-wrap .sec-label,
section.chapter.is-hero .table-scroll .sec-label,
section.chapter.is-hero .finding .sec-label { color: var(--ink-40); }
section.chapter.is-hero .office-tabs button {
  background: rgba(252,250,236,.06);
  border-color: rgba(252,250,236,.2);
  color: rgba(252,250,236,.75);
}
section.chapter.is-hero .office-tabs button:hover { border-color: var(--flax); color: var(--suede); }
section.chapter.is-hero .office-tabs button[aria-pressed="true"] {
  background: var(--flax); color: var(--midnight); border-color: var(--flax);
}

/* ─── Provenance badge ────────────────────────────────────── */
.prov {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase;
  padding: 3px 8px; border-radius: 5px;
  background: var(--rule-soft); color: var(--ink-40);
  vertical-align: middle;
}
.prov.is-demo { background: rgba(238,220,130,.34); color: #7a6410; }

/* ─── Metric cards ────────────────────────────────────────── */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.metric { background: var(--pearl); padding: 20px 18px 18px; }
.metric .label {
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-40);
  display: block; margin-bottom: 10px;
}
.metric .value {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: clamp(30px, 3.4vw, 42px); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.delta {
  display: inline-block;
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.metric .delta { margin-top: 9px; }
.delta.up   { color: var(--ok); }
.delta.down { color: var(--critical); }
.delta.flat { color: var(--ink-40); }

/* ─── Lighthouse gauges ───────────────────────────────────── */
.gauges { display: flex; flex-wrap: wrap; gap: clamp(16px,2.4vw,34px); }
.gauge { text-align: center; width: 92px; }
.gauge svg { display: block; margin: 0 auto 9px; }
.gauge .g-val {
  font-family: 'Roslindale', serif; font-weight: 700; font-size: 20px;
  font-variant-numeric: tabular-nums;
}
.gauge .g-label { font-size: 11.5px; color: var(--ink-60); line-height: 1.25; }

/* ─── Findings ────────────────────────────────────────────── */
.findings { display: grid; gap: 12px; }
.finding {
  display: grid; grid-template-columns: auto 1fr; gap: 16px;
  background: var(--pearl);
  border: 1px solid var(--rule);
  border-radius: 11px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
}
.finding.critical { border-color: rgba(192,57,43,.30); }
.finding.warning  { border-color: rgba(217,131,36,.30); }

.finding .sev {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 9px; border-radius: 5px;
  height: fit-content; white-space: nowrap;
}
.finding.critical .sev { background: rgba(192,57,43,.11); color: var(--critical); }
.finding.warning  .sev { background: rgba(217,131,36,.13); color: #8f5209; }
.finding.ok       .sev { background: rgba(46,125,84,.11); color: #1d5b3c; }
.finding.strength .sev { background: rgba(192,224,5,.24); color: #5c6b02; }

.finding h4 { font-family: 'Satoshi', sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 0; }
.finding p  { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-60); }

/* ─── Office tabs + local scan ────────────────────────────── */
.office-tabs {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 26px;
}
.office-tabs button {
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 10px 16px; border-radius: 999px; cursor: pointer;
  background: var(--pearl); color: var(--ink-60);
  border: 1px solid var(--rule);
  transition: all .16s ease;
}
.office-tabs button:hover { border-color: var(--midnight-70); color: var(--midnight); }
.office-tabs button[aria-pressed="true"] {
  background: var(--midnight); color: var(--suede);
  border-color: var(--midnight); font-weight: 700;
}
.office-tabs button .warn { color: var(--flax); margin-left: 6px; }

/* The grid is the hero of this section, so it gets the space. Side-by-side only
   survives on genuinely wide screens; on an iPad the scan stacks and the meta
   card turns into a compact band so the grid still lands above the fold. */
.scan {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(460px, 1.25fr);
  gap: clamp(22px, 3vw, 44px);
  align-items: start;
}

/* Column one: the reading of the scan (who, how, how well) stacked above the
   ranked field it produced. Column two is the grid itself. */
.scan-side { display: grid; gap: 18px; align-content: start; min-width: 0; }
/* Grid children default to min-width:auto, so the competitor table's min-width
   would blow the track out and slide under the map. Let them shrink and scroll
   inside their own box instead. */
.scan-side > * { min-width: 0; }
.owns .sec-label { margin-bottom: 10px; }
/* Compact context: six short columns don't need the full-width table floor. */
.owns table.data { min-width: 440px; font-size: 13px; }
.owns table.data th, .owns table.data td { padding-left: 10px; padding-right: 10px; }

.scan-meta {
  background: var(--pearl); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-sm);
}
.gbp-card { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.gbp-card .pin {
  width: 38px; height: 38px; border-radius: 9px; flex: none;
  background: var(--sky); display: grid; place-items: center;
}
.gbp-card .name { font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.gbp-card .addr { font-size: 13px; color: var(--ink-60); margin-top: 3px; }
.gbp-card .stars { font-size: 13px; margin-top: 6px; color: #8a6508; font-weight: 700; }
.gbp-card .stars span { color: var(--ink-60); font-weight: 400; }

.solv-row { display: flex; gap: 10px; margin-bottom: 18px; }
.solv-pill {
  flex: 1; text-align: center; padding: 12px 8px;
  border-radius: 10px; background: var(--midnight); color: var(--suede);
}
.solv-pill .k {
  font-size: 10px; font-weight: 700; letter-spacing: .1em;
  color: rgba(252,250,236,.6); display: block; margin-bottom: 5px;
}
.solv-pill .v {
  font-family: 'Roslindale', serif; font-weight: 700; font-size: 24px;
  font-variant-numeric: tabular-nums;
}
.solv-pill.hero { background: var(--flax); color: var(--midnight); }
.solv-pill.hero .k { color: rgba(20,54,77,.82); }

.scan-config {
  font-size: 12.5px; color: var(--ink-60); line-height: 1.65;
  padding-top: 16px; border-top: 1px solid var(--rule);
}
.scan-config strong { color: var(--midnight); font-weight: 700; }

/* ─── Local Falcon grid ───────────────────────────────────── */
.grid-wrap { position: relative; background: var(--pearl); border: 1px solid var(--rule); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm); }
/* A size container so the rank numerals scale with the cell rather than the
   viewport. --n is the grid width, set inline by the renderer, because cell size
   depends on the point count and a viewport unit cannot know it. */
.lf-grid {
  display: grid; gap: 3px; aspect-ratio: 1;
  container-type: inline-size;
}
.lf-pt {
  display: grid; place-items: center;
  border-radius: 50%; aspect-ratio: 1;
  font-size: clamp(9px, calc((100cqw - (var(--n, 13) - 1) * 3px) / var(--n, 13) * 0.36), 19px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  cursor: pointer; border: none; padding: 0;
  font-family: 'Satoshi', sans-serif;
  transition: transform .13s ease, box-shadow .13s ease;
}
.lf-pt:hover, .lf-pt:focus-visible {
  transform: scale(1.34); z-index: 5;
  box-shadow: 0 0 0 2px var(--pearl), 0 3px 10px rgba(0,0,0,.32);
  outline: none;
}
.lf-pt.is-center { box-shadow: 0 0 0 2.5px var(--midnight); }

.grid-legend {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule);
  font-size: 11.5px; color: var(--ink-60);
}
.grid-legend .ramp { display: flex; gap: 2px; }
.grid-legend .ramp i { width: 16px; height: 9px; border-radius: 2px; }

/* The "nothing found" block. Styled for a light ground by default and inverted
   inside the dark hero, because it is reused in Ad Transparency where an
   unqualified light-on-dark treatment rendered at 1.2:1. */
.no-gbp {
  background: rgba(192,57,43,.06);
  border: 1px dashed rgba(192,57,43,.42);
  border-radius: var(--radius);
  padding: clamp(34px, 5vw, 68px);
  text-align: center;
}
.no-gbp .big {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: clamp(30px, 4vw, 52px); color: var(--critical); margin-bottom: 12px;
}
.no-gbp p {
  margin: 0 auto; max-width: 48ch;
  color: var(--ink-60); font-size: 15.5px;
}

section.chapter.is-hero .no-gbp {
  background: rgba(192,57,43,.14);
  border-color: rgba(255,138,120,.55);
}
section.chapter.is-hero .no-gbp .big { color: #ffb3a5; }
section.chapter.is-hero .no-gbp p { color: rgba(252,250,236,.78); }

/* ─── Tables ──────────────────────────────────────────────── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--pearl); }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 640px; }
table.data th {
  text-align: right; padding: 13px 14px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-40);
  background: var(--suede); border-bottom: 1px solid var(--rule);
  white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data td {
  padding: 12px 14px; text-align: right;
  border-bottom: 1px solid var(--rule-soft);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tr.is-prospect td {
  background: var(--flax); font-weight: 700; color: var(--midnight);
}
table.data tr.is-prospect td:first-child::before {
  content: '▸ '; color: var(--midnight);
}
table.data .firm-cell { font-weight: 500; }

.group-block { margin-bottom: 22px; }
.group-block > h3 {
  font-family: 'Satoshi', sans-serif; font-size: 13px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-60);
  margin-bottom: 10px;
}

/* ─── Keyword mix bar ─────────────────────────────────────── */
.mixbar { display: flex; height: 46px; border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.mixbar div { display: grid; place-items: center; font-size: 12.5px; font-weight: 700; color: #fff; }
.mixbar .m-trans { background: var(--ok); }
.mixbar .m-brand { background: #2a6f9e; }   /* deeper than --sky: white label needs 4.5:1 */
.mixbar .m-info  { background: var(--midnight-70); }
.mix-key { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-60); }
.mix-key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }

.recipe {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 20px 22px; background: var(--midnight); color: var(--suede);
  border-radius: var(--radius); margin-bottom: 22px;
}
.recipe .chip {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: clamp(18px, 2.1vw, 27px);
  padding: 6px 14px; border-radius: 8px;
  background: rgba(252,250,236,.11);
}
.recipe .chip.hl { background: var(--flax); color: var(--midnight); }
.recipe .plus { font-size: 20px; color: rgba(252,250,236,.62); font-weight: 300; }
.recipe .out { margin-left: auto; font-size: 12.5px; color: rgba(252,250,236,.6); max-width: 24ch; }

/* ─── Paid: the ad unit they are not in ───────────────────── */
.paid-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
}

.lsa {
  background: var(--pearl);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.lsa-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px; color: var(--ink-60);
}
.lsa-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px;
  background: var(--rule-soft); color: var(--ink-60);
}

.lsa-slot { padding: 16px 18px; border-bottom: 1px solid var(--rule-soft); }
.lsa-slot:last-child { border-bottom: none; }
.lsa-name { font-size: 16px; font-weight: 700; margin: 7px 0 3px; }
.lsa-rating { font-size: 13px; font-weight: 700; color: #8a6508; }
.lsa-stars { letter-spacing: .5px; }
.lsa-count { color: var(--ink-60); font-weight: 400; margin-left: 3px; }

.screened {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700;
  color: #1a73e8;
}
.screened svg { flex: none; }
.screened.is-off { color: var(--critical); }

/* The break in the unit. The firm sits below the fold that matters. */
.lsa-cut {
  display: flex; align-items: center; gap: 12px;
  padding: 0 18px; margin: 4px 0;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--critical);
}
.lsa-cut::before, .lsa-cut::after {
  content: ''; flex: 1; height: 1px;
  background: repeating-linear-gradient(90deg, var(--critical) 0 4px, transparent 4px 8px);
  opacity: .5;
}
.lsa-slot.is-out { background: rgba(192,57,43,.07); }
.lsa-slot.is-out .lsa-name { color: var(--ink-60); }
.lsa-slot.is-out .lsa-rating { color: var(--ink-60); }

.paid-side { display: grid; gap: 10px; }
.fact {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 15px 18px; border-radius: 11px;
  background: var(--pearl); border: 1px solid var(--rule);
}
.fact .k { font-size: 13.5px; color: var(--ink-60); }
.fact .v {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: 22px; font-variant-numeric: tabular-nums;
  text-align: right;
}
.fact.bad { border-color: rgba(192,57,43,.3); }
.fact.bad .v { color: var(--critical); }
.paid-note {
  margin: 6px 0 0; font-size: 14px; color: var(--ink-60);
  padding: 15px 18px; border-radius: 11px;
  background: rgba(192,224,5,.14); border: 1px solid rgba(192,224,5,.4);
}

/* ─── AI: engine board ────────────────────────────────────── */
.engines {
  background: var(--pearl); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.engine {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) 78px 54px;
  gap: 14px; align-items: center;
  padding: 9px 0;
}
.engine + .engine { border-top: 1px solid var(--rule-soft); }
.e-name { font-size: 13.5px; font-weight: 500; }

.e-track {
  position: relative; height: 22px;
  background: var(--rule-soft); border-radius: 5px;
}
.e-bar {
  height: 100%; width: var(--w); border-radius: 5px;
  background: linear-gradient(90deg, var(--midnight-70), var(--sky));
  min-width: 3px;
}
/* The leader's position, as a gate the bar has to reach. */
.e-bench {
  position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: var(--flax);
  box-shadow: 0 0 0 1px rgba(20,54,77,.18);
}
.e-bench::after {
  content: ''; position: absolute; top: -3px; left: -3px;
  border: 4px solid transparent; border-top-color: var(--flax);
}

.e-val {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: 22px; font-variant-numeric: tabular-nums;
}
.e-val .never {
  font-family: 'Satoshi', sans-serif; font-size: 12.5px;
  font-weight: 700; color: var(--critical);
  text-transform: uppercase; letter-spacing: .07em;
}
.e-bench-val {
  font-size: 13px; font-variant-numeric: tabular-nums;
  color: var(--ink-60); text-align: right;
}
.engine.is-zero .e-track { border: 1px dashed rgba(192,57,43,.45); background: transparent; }
.engine.is-zero .e-bar { display: none; }

.engine-key {
  padding-top: 12px; margin-top: 4px;
  border-top: 1px solid var(--rule);
}
.engine-key .e-track { background: none; height: 0; }
.engine-key .e-val, .engine-key .e-bench-val {
  font-family: 'Satoshi', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-40);
}

.motion-ready .reveal .engine {
  animation: deal 420ms var(--ease-out-quart) both;
  animation-delay: calc(150ms + var(--i, 0) * 60ms);
}
.motion-ready .reveal .e-bar {
  animation: grow 720ms var(--ease-out-expo) both;
  animation-delay: calc(300ms + var(--i, 0) * 60ms);
}
@keyframes grow { from { width: 0; } to { width: var(--w); } }

/* ─── Offer: the tier ladder ──────────────────────────────── */
/* The ladder reads as ascending through the weight of the step bar at the foot
   of each rung, not by shunting the cards to different heights, which fought
   the copy and left the recommended card floating out of line. */
.ladder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; align-items: stretch;
  margin-bottom: 26px;
}
.rung {
  display: flex; flex-direction: column;
  padding: 18px 18px 0;
  border-radius: var(--radius);
  background: var(--pearl);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.rung-top { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.rung-tier {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: clamp(19px, 2vw, 25px);
}
.rung-flag {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; padding: 3px 7px; border-radius: 4px;
  background: var(--midnight); color: var(--flax);
}
.rung-list { list-style: none; margin: 0; padding: 0; flex: 1; }
.rung-list li {
  font-size: 12.5px; color: var(--ink-60);
  padding: 4px 0 4px 14px; position: relative;
}
.rung-list li::before {
  content: '+'; position: absolute; left: 0;
  color: var(--ok); font-weight: 700;
}
/* A quantity that stepped up, rather than a capability switching on. */
.rung-list li.more::before { content: '↑'; color: var(--sky); font-size: 11px; }
.rung-list li.more b { font-weight: 700; color: var(--midnight); }
.rung-list li.more-n { color: var(--ink-60); }
.rung-list li.more-n::before { content: '·'; color: var(--ink-60); }

.rung-bar {
  margin: 16px -18px 0; background: var(--rule);
  height: calc(4px + var(--step, 1) * 4px);
}

/* De-emphasis by surface, not by opacity. Fading a whole rung drags its copy
   to ~2.4:1; the recommended rung is already a dark card among light ones, so
   the hierarchy is carried without touching legibility. */
.rung.below .rung-bar { background: var(--midnight-70); }
.rung.above { background: var(--suede); }
.rung.above .rung-tier { color: var(--ink-60); }
.rung.is-rec {
  background: var(--midnight); color: var(--suede);
  border-color: var(--midnight);
  box-shadow: var(--shadow-lg);
}
.rung.is-rec .rung-tier { color: var(--flax); }
.rung.is-rec .rung-list li { color: rgba(252,250,236,.82); }
.rung.is-rec .rung-list li::before { color: var(--chartreuse); }
.rung.is-rec .rung-list li.more::before { color: var(--flax); }
.rung.is-rec .rung-list li.more b { color: var(--suede); }
.rung.is-rec .rung-list li.more-n { color: rgba(252,250,236,.6); }
.rung.is-rec .rung-flag { background: var(--flax); color: var(--midnight); }
.rung.is-rec .rung-bar { background: var(--flax); }

.motion-ready .reveal .rung {
  animation: settle 520ms var(--ease-out-expo) both;
  animation-delay: calc(120ms + var(--i, 0) * 80ms);
}

/* Focused matrix. The warm tint on the recommended column does the focusing;
   the others only recede. Held at .72 rather than dimmer because a rep reads
   these values out loud. "You'd get 10, this is 20" only works if both are
   legible (.72 measures ~5.4:1; .42 was 2.2:1). */
table.matrix.is-focused td.dim { opacity: .72; }
table.matrix.is-focused th.dim { background: var(--midnight-70); }

/* ─── AI platforms ────────────────────────────────────────── */
.ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px,1fr)); gap: 12px; }
.ai-card {
  background: var(--pearl); border: 1px solid var(--rule);
  border-radius: 11px; padding: 17px; box-shadow: var(--shadow-sm);
}
.ai-card .plat { font-size: 13px; font-weight: 700; margin-bottom: 9px; }
.ai-card .n {
  font-family: 'Roslindale', serif; font-weight: 700; font-size: 33px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.ai-card.zero .n { color: var(--critical); }
.ai-card .sub { font-size: 11.5px; color: var(--ink-40); margin-top: 7px; }

.entity-list { display: grid; gap: 9px; }
.entity-row {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 17px; background: var(--pearl);
  border: 1px solid var(--rule); border-radius: 10px; font-size: 14.5px;
}
.entity-row .mark { font-size: 16px; font-weight: 700; width: 20px; text-align: center; flex: none; }
.entity-row.yes .mark { color: var(--ok); }
.entity-row.no  .mark { color: var(--critical); }
.entity-row .v { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ─── Offer matrix ────────────────────────────────────────── */
.tier-callout {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--midnight); color: var(--suede);
  border-radius: var(--radius); padding: clamp(22px,2.6vw,34px);
  margin-bottom: 26px;
}
.tier-callout .badge {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: clamp(26px, 3vw, 38px);
  background: var(--flax); color: var(--midnight);
  padding: 9px 20px; border-radius: 10px; white-space: nowrap;
}
.tier-callout p { margin: 0; font-size: 15px; color: rgba(252,250,236,.76); max-width: 56ch; }

table.matrix { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 600px; }
table.matrix th {
  padding: 12px 12px; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  background: var(--midnight); color: var(--suede); text-align: center;
  position: sticky; top: 0; z-index: 2;
}
table.matrix th:first-child { text-align: left; }
table.matrix th.hl { background: var(--flax); color: var(--midnight); }
table.matrix td { padding: 10px 12px; text-align: center; border-bottom: 1px solid var(--rule-soft); }
table.matrix td:first-child { text-align: left; font-size: 13.5px; }
table.matrix td.hl { background: rgba(238,220,130,.19); font-weight: 700; }
table.matrix tr.grp td {
  background: var(--suede); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60);
  padding: 9px 12px;
}
table.matrix .yes { color: var(--ok); font-weight: 700; }
table.matrix .no  { color: rgba(20,54,77,.22); }

/* ─── Capture ─────────────────────────────────────────────── */
.capture {
  background: var(--midnight); color: var(--suede);
  padding: clamp(48px, 7vw, 104px) var(--pad);
  text-align: center;
}
.capture h2 { font-size: clamp(36px, 5.4vw, 68px); color: var(--suede); }
.capture h2 em { font-style: normal; color: var(--flax); }
.capture .sub { margin: 16px auto 36px; font-size: 16.5px; color: rgba(252,250,236,.68); max-width: 46ch; }
.capture form { display: grid; gap: 12px; max-width: 440px; margin: 0 auto; text-align: left; }
.capture input {
  width: 100%; padding: 15px 17px; font: inherit; font-size: 16px;
  border-radius: 10px; border: 1px solid rgba(252,250,236,.24);
  background: rgba(252,250,236,.07); color: var(--suede);
}
.capture input::placeholder { color: rgba(252,250,236,.64); }
.capture input:focus { outline: none; border-color: var(--flax); background: rgba(252,250,236,.12); }
.capture button {
  padding: 16px; font: inherit; font-size: 16px; font-weight: 700;
  border-radius: 10px; border: none; cursor: pointer;
  background: var(--chartreuse); color: var(--midnight);
  transition: transform .15s ease, filter .15s ease;
}
.capture button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.capture button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.capture .msg { font-size: 13.5px; margin-top: 6px; min-height: 20px; }
.capture .msg.ok  { color: var(--chartreuse); }
.capture .msg.err { color: #ff9d8f; }

/* ─── Tooltip ─────────────────────────────────────────────── */
#tip {
  position: fixed; z-index: 200; pointer-events: none;
  background: var(--tuxedo); color: var(--suede);
  padding: 9px 13px; border-radius: 8px; font-size: 12.5px;
  box-shadow: var(--shadow-md); opacity: 0;
  transition: opacity .13s ease; max-width: 260px; line-height: 1.45;
}
#tip.on { opacity: 1; }
#tip b { color: var(--flax); }

/* ============================================================
   CHOREOGRAPHY

   Every reveal below animates FROM a displaced state TO the element's
   natural resting state. Nothing is gated behind a class: if the observer
   never fires, or JS is dead, or the tab is hidden, the content is simply
   already there. The motion is additive, never load-bearing.
   ============================================================ */

@keyframes rise {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

@keyframes settle {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* The grid sweep. Points resolve outward from the office pin, so the market
   fills in the way a scan would actually run. */
@keyframes land {
  from { opacity: 0; transform: scale(.28); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}

@keyframes pin-lock {
  0%   { box-shadow: 0 0 0 2.5px var(--midnight), 0 0 0 0 rgba(238,220,130,.85); }
  70%  { box-shadow: 0 0 0 2.5px var(--midnight), 0 0 0 16px rgba(238,220,130,0); }
  100% { box-shadow: 0 0 0 2.5px var(--midnight), 0 0 0 0 rgba(238,220,130,0); }
}

/* The prospect's row arriving last in a competitor table. */
@keyframes row-lock {
  0%   { background: var(--flax); }
  35%  { background: #fff3bd; }
  100% { background: var(--flax); }
}

@keyframes deal {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: none; }
}

/* A chapter entering: heading leads, body follows a beat later. */
.motion-ready .reveal .chapter-head    { animation: rise var(--t-enter) var(--ease-out-expo) both; }
.motion-ready .reveal .chapter-body    { animation: rise var(--t-enter) 90ms var(--ease-out-expo) both; }

/* Sibling stagger, capped. --i is set per item at render time. */
.motion-ready .reveal .metric,
.motion-ready .reveal .gauge,
.motion-ready .reveal .finding,
.motion-ready .reveal .ai-card,
.motion-ready .reveal .entity-row {
  animation: settle 460ms var(--ease-out-quint) both;
  animation-delay: calc(120ms + var(--i, 0) * 42ms);
}

.motion-ready .reveal table.data tbody tr {
  animation: deal 380ms var(--ease-out-quart) both;
  animation-delay: calc(160ms + var(--i, 0) * 45ms);
}
.motion-ready .reveal table.data tbody tr.is-prospect {
  animation: deal 380ms var(--ease-out-quart) both,
             row-lock 900ms var(--ease-out-quart) both;
  animation-delay: calc(160ms + var(--i, 0) * 45ms),
                   calc(160ms + var(--i, 0) * 45ms + 260ms);
}

.motion-ready .sweep .lf-pt {
  animation: land 520ms var(--ease-out-expo) both;
  animation-delay: calc(var(--d, 0) * 1ms);
}
.motion-ready .sweep .lf-pt.is-center {
  animation: land 520ms var(--ease-out-expo) both,
             pin-lock 1100ms var(--ease-out-quart) 420ms both;
}

/* Panel swap inside a chapter (office tabs, brand switch). Shorter than an
   entrance, since the prospect is already looking at the right place. */
@keyframes swap {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.motion-ready .swapping { animation: swap var(--t-slow) var(--ease-out-quint) both; }

/* Numbers that count settle into place rather than blinking on. */
.counting { font-variant-numeric: tabular-nums; }

/* ─── Rail scroll progress ────────────────────────────────── */
.rail-nav { position: relative; }
.rail-nav::before {
  content: '';
  position: absolute; left: 15px; top: 22px; bottom: 22px;
  width: 1px; background: rgba(252,250,236,.14);
}
.rail-nav::after {
  content: '';
  position: absolute; left: 15px; top: 22px;
  width: 1px; height: calc(var(--progress, 0) * (100% - 44px));
  background: linear-gradient(var(--chartreuse), var(--flax));
  transition: height 90ms linear;
}
@media (max-width: 980px) {
  .rail-nav::before, .rail-nav::after { display: none; }
}

/* ─── Utility ─────────────────────────────────────────────── */
.stack   { display: grid; gap: clamp(18px, 2.2vw, 30px); }
.stack-s { display: grid; gap: 12px; }
.sec-label {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-40); margin-bottom: 13px;
}
.muted { color: var(--ink-60); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ─── Responsive ──────────────────────────────────────────── */
/* Stacked scan: meta collapses to a horizontal band so the grid stays visible. */
/* Stacked scan: the meta card collapses to a horizontal band so the grid still
   lands high. Minimums are deliberately small: at 1024 the main column is only
   ~686px once the rail and padding are taken, and anything larger pushes the
   whole page into horizontal scroll. */
@media (max-width: 1420px) {
  .scan { grid-template-columns: 1fr; }
  .scan-meta {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, .85fr);
    gap: 18px; align-items: center;
  }
  .scan-meta > * { min-width: 0; }
  .scan-meta > .sec-label { grid-column: 1 / -1; margin-bottom: -6px; }
  .gbp-card, .solv-row { margin-bottom: 0; }
  .scan-config { padding-top: 0; border-top: none; border-left: 1px solid var(--rule); padding-left: 18px; }
  .lf-grid { max-width: 720px; margin: 0 auto; }
}

/* Two-up: the identity and the numbers stay side by side; the scan settings
   drop to their own row rather than being crushed into a third column. */
@media (max-width: 1180px) {
  .scan-meta { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .scan-config {
    grid-column: 1 / -1;
    border-left: none; padding-left: 0;
    padding-top: 14px; border-top: 1px solid var(--rule);
  }
}

@media (max-width: 780px) {
  .scan-meta { grid-template-columns: 1fr; align-items: start; }
  .scan-meta > .sec-label { margin-bottom: 0; }
}

@media (max-width: 980px) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; height: auto; }
  .rail-nav { display: flex; gap: 6px; overflow-x: auto; padding: 12px; }
  .rail-nav a { white-space: nowrap; padding: 9px 13px; }
  .rail-nav a .dot { display: none; }
  .rail-foot { display: none; }
  .persona-grid { grid-template-columns: 1fr; }
  .persona-card { min-height: 0; }
  .picker-lede { grid-template-columns: 1fr; align-items: start; }
  .picker-lede p { margin-top: 16px; }
}

@media (max-width: 620px) {
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .solv-row { flex-wrap: wrap; }
  .recipe .out { margin-left: 0; }
}

/* Reduced motion: everything lands instantly at its resting state. Zeroing the
   delay matters as much as the duration. A grid point holding a 900ms stagger
   would otherwise sit invisible for most of a second. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .rail-nav::after { transition: none !important; }
}

@media print {
  .rail, .demo-banner, .capture form { display: none; }
  .shell { grid-template-columns: 1fr; }
  section.chapter { page-break-inside: avoid; }
}

/* ============================================================
   ADDED SECTIONS
   ============================================================ */

/* ─── Rail act headings ───────────────────────────────────── */
.rail-nav .act {
  font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(252,250,236,.66);   /* .5 measured 4.2:1 on Midnight */
  padding: 16px 12px 6px 27px;
}
.rail-nav .act:first-child { padding-top: 4px; }
@media (max-width: 980px) {
  .rail-nav .act { display: none; }
}

/* ─── Website diagnostics ─────────────────────────────────── */
.diag {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(18px, 2.4vw, 34px);
  align-items: start;
}

/* The platform is the finding on a locked-in firm, so it gets its own panel
   rather than sitting in a list of attributes. */
.platform {
  border-radius: var(--radius); padding: 22px;
  border: 1px solid var(--rule); background: var(--pearl);
  box-shadow: var(--shadow-sm);
}
.platform.is-locked { background: var(--midnight); color: var(--suede); border-color: var(--midnight); }
.platform.is-locked .sec-label { color: rgba(252,250,236,.6); }
.plat-name {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: clamp(24px, 2.8vw, 34px); line-height: 1.1; margin-top: 4px;
}
.plat-detail { font-size: 13.5px; color: var(--ink-60); margin-top: 5px; }
.platform.is-locked .plat-detail { color: rgba(252,250,236,.7); }
.plat-verdict {
  display: inline-block; margin-top: 14px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 6px;
  background: rgba(46,125,84,.12); color: #1d5b3c;
}
.platform.is-locked .plat-verdict { background: rgba(255,138,120,.18); color: #ffb3a5; }
.plat-note { font-size: 14px; margin: 14px 0 0; color: var(--ink-60); }
.platform.is-locked .plat-note { color: rgba(252,250,236,.78); }

.diag-panels { display: grid; gap: 12px; min-width: 0; }
.dpanel {
  border: 1px solid var(--rule); border-radius: 11px; padding: 16px 18px;
  background: var(--pearl);
}
.h1-quote {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: clamp(19px, 2.1vw, 26px); line-height: 1.15; margin-top: 4px;
}
.claim { font-size: 16.5px; font-weight: 500; margin-top: 4px; }
.dlist { margin: 10px 0 0; padding-left: 17px; font-size: 13.5px; color: var(--ink-60); }
.dlist li { margin: 4px 0; }
.dnote { font-size: 13.5px; color: var(--ink-60); margin: 9px 0 0; }

.scale { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--ink-60); }
.scale i {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--rule); display: inline-block;
}
.scale i.on { background: var(--midnight-70); }
.scale .yes { color: var(--ok); font-weight: 700; }
.scale .no  { color: var(--critical); font-weight: 700; }

.ctarow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; }
.cta-primary {
  font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: 7px;
  background: var(--midnight); color: var(--suede);
}
.cta-stat { font-size: 12.5px; color: var(--ink-60); }
.cta-stat b { font-family: 'Roslindale', serif; font-size: 17px; color: var(--midnight); }
.cta-stat.ok  { color: var(--ok); font-weight: 700; }
.cta-stat.bad { color: var(--critical); font-weight: 700; }

/* ─── Organic: top pages ──────────────────────────────────── */
.pages { display: grid; gap: 6px; }
.page-row {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(80px, 1fr) 62px 108px;
  gap: 12px; align-items: center;
  padding: 9px 12px; border-radius: 8px; background: var(--pearl);
  border: 1px solid var(--rule-soft);
}
.p-path { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-bar { height: 8px; border-radius: 4px; background: var(--rule-soft); }
.p-bar i { display: block; height: 100%; border-radius: 4px; background: var(--midnight-70); min-width: 2px; }
.p-traffic { font-family: 'Roslindale', serif; font-weight: 700; font-size: 17px; text-align: right; font-variant-numeric: tabular-nums; }
.p-intent { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: right; color: var(--ink-40); }
/* A transactional page is the only kind that can sign a case, so it is the only
   one drawn in the accent. */
.page-row.transactional { border-color: rgba(46,125,84,.4); }
.page-row.transactional .p-bar i { background: var(--ok); }
.page-row.transactional .p-intent { color: var(--ok); }
.page-row.informational .p-bar i { background: var(--rank-15); }
.page-row.informational .p-intent { color: var(--rank-15); }

/* ─── Social ──────────────────────────────────────────────── */
.social-total { font-size: 15px; color: var(--ink-60); margin-bottom: 16px; }
.social-total b { font-family: 'Roslindale', serif; font-weight: 700; font-size: 30px; color: var(--midnight); }

.socials { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 12px; }
.soc {
  border: 1px solid var(--rule); border-radius: 11px; padding: 16px;
  background: var(--pearl); box-shadow: var(--shadow-sm);
}
.s-name { font-size: 13px; font-weight: 700; }
.s-followers {
  font-family: 'Roslindale', serif; font-weight: 700; font-size: 31px; line-height: 1;
  margin: 7px 0 8px; font-variant-numeric: tabular-nums;
}
.s-last { font-size: 12.5px; color: var(--ink-60); }
.s-last b { font-weight: 700; }
.s-cadence { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; margin-top: 7px; color: var(--ink-60); }
/* Staleness, not follower count, is the finding. */
.soc.fresh   { border-color: rgba(46,125,84,.42); }
.soc.fresh   .s-cadence { color: var(--ok); }
.soc.slowing .s-cadence { color: #8f5209; }
.soc.stale   { border-color: rgba(217,131,36,.45); background: rgba(217,131,36,.05); }
.soc.stale   .s-cadence { color: #7d4708; }
.soc.dead    { border-color: rgba(192,57,43,.42); background: rgba(192,57,43,.05); }
.soc.dead    .s-cadence { color: var(--critical); }
.soc.dead    .s-followers { color: var(--ink-60); }

.post {
  margin-top: 10px; padding: 18px 20px; border-radius: var(--radius);
  background: var(--pearl); border: 1px solid var(--rule);
}
.post-meta { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-40); }
.post-body {
  font-family: 'Roslindale', serif; font-weight: 500;
  font-size: clamp(17px, 1.9vw, 22px); line-height: 1.3; margin: 10px 0;
}
.post-eng { font-size: 13px; color: var(--ink-60); }

/* ─── Competitive positioning ─────────────────────────────── */
.claims { display: grid; gap: 6px; }
.claim-row {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr) minmax(0, .7fr);
  gap: 14px; align-items: baseline;
  padding: 13px 16px; border-radius: 9px;
  background: var(--pearl); border: 1px solid var(--rule-soft);
}
.claim-row.is-theirs { background: var(--flax); border-color: var(--flax); }
.c-firm { font-size: 13.5px; font-weight: 700; }
.c-claim { font-family: 'Roslindale', serif; font-weight: 500; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.25; }
.c-angle { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-40); text-align: right; }
.claim-row.is-theirs .c-angle { color: rgba(20,54,77,.84); }

.proofs { display: flex; flex-wrap: wrap; gap: 8px; }
.proof { font-size: 13px; padding: 6px 12px; border-radius: 999px; background: var(--rule-soft); }

.whitespace { display: grid; gap: 8px; }
.ws {
  font-size: 14.5px; padding: 13px 16px; border-radius: 9px;
  background: rgba(192,224,5,.13); border: 1px solid rgba(192,224,5,.4);
}

/* ─── Ad transparency ─────────────────────────────────────── */
.creatives { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.creative {
  border: 1px solid var(--rule); border-radius: 11px; padding: 15px 17px;
  background: var(--pearl);
}
.c-format {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 4px; background: var(--rule-soft); color: var(--ink-60);
}
.c-headline { font-size: 15px; font-weight: 500; margin: 9px 0 7px; line-height: 1.3; }
.c-dates { font-size: 12px; color: var(--ink-60); font-variant-numeric: tabular-nums; }

/* ─── Video ───────────────────────────────────────────────── */
.vscore { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.v-num {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: clamp(46px, 6vw, 76px); line-height: 1; font-variant-numeric: tabular-nums;
}
.v-num small { font-size: .35em; color: var(--ink-40); margin-left: 3px; }
.v-band {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 6px; background: var(--rule-soft); color: var(--ink-60);
}

.vdims { display: grid; gap: 8px; }
.vdim {
  display: grid; grid-template-columns: minmax(0, .9fr) auto minmax(0, 1.5fr);
  gap: 14px; align-items: center;
  padding: 11px 16px; border-radius: 9px;
  background: var(--pearl); border: 1px solid var(--rule-soft);
}
.v-label { font-size: 14px; font-weight: 500; }
.v-pips { display: flex; gap: 4px; }
.v-pips i { width: 12px; height: 12px; border-radius: 3px; background: var(--rule); }
.v-pips i.on { background: var(--midnight-70); }
.v-note { font-size: 13px; color: var(--ink-60); }

/* ─── Inconsistent citations ──────────────────────────────── */
.variants { display: grid; gap: 6px; }
.variant {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(70px, 1fr) 54px 78px;
  gap: 12px; align-items: center;
  padding: 9px 13px; border-radius: 8px;
  background: var(--pearl); border: 1px solid var(--rule-soft);
}
.v-value { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.v-bar { height: 8px; border-radius: 4px; background: var(--rule-soft); }
.v-bar i { display: block; height: 100%; border-radius: 4px; background: var(--rank-15); min-width: 2px; }
.variant.is-canon .v-bar i { background: var(--ok); }
.v-count { font-family: 'Roslindale', serif; font-weight: 700; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.v-tag { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; text-align: right; color: var(--ink-40); }
.variant.is-canon .v-tag { color: var(--ok); }

.conflicts { display: grid; gap: 8px; }
.conflict {
  padding: 12px 15px; border-radius: 9px;
  background: rgba(192,57,43,.05); border: 1px solid rgba(192,57,43,.3);
}
.n-field { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--critical); }
.n-values { display: flex; flex-wrap: wrap; gap: 7px; margin: 7px 0; }
.n-val {
  font-family: ui-monospace, Menlo, monospace; font-size: 13px;
  padding: 4px 9px; border-radius: 5px; background: var(--pearl); border: 1px solid var(--rule);
}
.n-sources { font-size: 12.5px; color: var(--ink-60); }

/* ─── Directory coverage ──────────────────────────────────── */
.dirs { display: grid; gap: 12px; }
.dgroup { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; align-items: start; }
.dg-label { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-40); padding-top: 6px; }
.dg-items { display: flex; flex-wrap: wrap; gap: 7px; }
.dir { font-size: 13px; padding: 5px 11px; border-radius: 999px; border: 1px solid; }
.dir.in  { background: rgba(46,125,84,.09); border-color: rgba(46,125,84,.4); color: #1d5b3c; }
.dir.out { background: transparent; border-color: rgba(192,57,43,.35); color: #96271c; }

/* ─── Soft offer: the prescription ────────────────────────── */
.rx-lede { font-size: clamp(15px, 1.6vw, 17.5px); color: var(--ink-60); max-width: 62ch; margin: 0 0 22px; }
.rx { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: rx; }
.rx-item {
  display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding: 18px 20px; border-radius: var(--radius);
  background: var(--pearl); border: 1px solid var(--rule);
  box-shadow: var(--shadow-sm);
}
.rx-n {
  font-family: 'Roslindale', serif; font-weight: 700; font-size: 19px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--midnight); color: var(--flax);
}
.rx-service {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: clamp(19px, 2.1vw, 25px); line-height: 1.15;
}
.rx-because { font-size: 14.5px; color: var(--ink-60); margin-top: 7px; max-width: 68ch; }
.rx-cue { font-weight: 700; color: var(--midnight); }
.rx-note { font-size: 14px; color: var(--ink-60); margin: 20px 0 0; max-width: 62ch; }

.motion-ready .reveal .rx-item,
.motion-ready .reveal .soc,
.motion-ready .reveal .page-row,
.motion-ready .reveal .claim-row,
.motion-ready .reveal .variant,
.motion-ready .reveal .vdim,
.motion-ready .reveal .creative {
  animation: settle 440ms var(--ease-out-quint) both;
  animation-delay: calc(140ms + var(--i, 0) * 46ms);
}

/* ─── Responsive ──────────────────────────────────────────── */
@media (max-width: 1080px) {
  .diag { grid-template-columns: 1fr; }
  .claim-row { grid-template-columns: 1fr; gap: 5px; }
  .c-angle { text-align: left; }
  .vdim { grid-template-columns: 1fr; gap: 7px; }
  .v-note { grid-column: 1; }
}
@media (max-width: 720px) {
  .page-row { grid-template-columns: 1fr auto; }
  .page-row .p-bar { display: none; }
  .variant { grid-template-columns: 1fr auto; }
  .variant .v-bar { display: none; }
  .dgroup { grid-template-columns: 1fr; gap: 6px; }
}

/* ─── Follow-up: added by the rep after the walkthrough ───── */
.fu-block { margin-bottom: 30px; }
.fu-h {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: clamp(20px, 2.2vw, 26px); color: var(--midnight); margin-bottom: 12px;
}
.fu-body { max-width: 68ch; font-size: 16px; line-height: 1.68; color: var(--ink-80, var(--midnight)); }
.fu-list { max-width: 68ch; margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.fu-list li { font-size: 15.5px; line-height: 1.6; }

.fu-figure { margin: 0 0 30px; }
.fu-figure img {
  width: 100%; height: auto; display: block;
  border-radius: var(--radius); border: 1px solid var(--rule);
}
.fu-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--ink-60); }

.scope { width: 100%; border-collapse: collapse; }
.scope th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-40);
  padding: 0 14px 10px 0; border-bottom: 1px solid var(--rule);
}
.scope td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.scope .s-what { font-weight: 700; color: var(--midnight); width: 34%; }
.scope .s-detail { color: var(--ink-60); font-size: 14.5px; }
.scope .s-when {
  white-space: nowrap; font-size: 12.5px; font-weight: 700;
  color: var(--ink-60); text-align: right;
}

.notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; }
.n-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-40); margin-bottom: 10px;
}
.n-col ul { margin: 0; padding-left: 18px; display: grid; gap: 7px; }
.n-col li { font-size: 14.5px; line-height: 1.55; }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 10px; }
.steps li { font-size: 15px; }
.st-what { font-weight: 600; color: var(--midnight); }
.st-who, .st-when {
  display: inline-block; margin-left: 10px; font-size: 12px; font-weight: 700;
  color: var(--ink-60); padding: 2px 8px; border-radius: 20px; background: rgba(20,54,77,.07);
}

/* ─── The quote. The one place this document shows money. ── */
.q-wrap { margin-top: 34px; }
.quote-card {
  background: var(--pearl); border: 1px solid var(--rule);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm);
}
.q-line {
  display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap;
  padding: 18px 22px; border-bottom: 1px solid var(--rule-soft);
}
.q-service { flex: 1 1 300px; font-size: 16px; font-weight: 700; color: var(--midnight); }
.q-because {
  display: block; font-size: 13.5px; font-weight: 400;
  color: var(--ink-60); margin-top: 4px; max-width: 62ch; line-height: 1.5;
}
.q-price { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.q-price b { font-family: 'Roslindale', serif; font-size: 24px; color: var(--midnight); }
.q-per { font-size: 13px; color: var(--ink-60); margin-left: 2px; }
.q-incl { font-size: 13px; font-weight: 700; color: var(--ok); }
.q-setup { display: block; font-size: 12.5px; color: var(--ink-60); margin-top: 3px; }

.q-totals { background: var(--midnight); color: var(--suede); padding: 6px 22px 14px; }
.q-total {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 20px; padding: 10px 0; border-bottom: 1px solid rgba(252,250,236,.14);
  font-variant-numeric: tabular-nums;
}
.q-total:last-child { border-bottom: none; }
.q-total span { font-size: 13px; color: rgba(252,250,236,.82); }
.q-total b { font-family: 'Roslindale', serif; font-size: 22px; }
.q-total.is-contract b { color: var(--flax); font-size: 26px; }

.q-terms {
  margin: 0; padding: 16px 22px; font-size: 13.5px; line-height: 1.6;
  color: var(--ink-60); border-top: 1px solid var(--rule-soft);
}
.q-foot {
  display: flex; gap: 20px; flex-wrap: wrap; padding: 0 22px 16px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--ink-40);
}

@media (max-width: 700px) {
  .q-line { flex-direction: column; gap: 8px; }
  .q-price { text-align: left; }
}

/* ── the second opinion on a metric ──────────────────────── */
/* DataForSEO and Ahrefs measure different things on different scales, so the
   corroborating figure sits beside the collected one, named, rather than
   replacing it or being averaged into it. */
.metric .corrob {
  display: flex; align-items: baseline; gap: 7px;
  margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--rule-soft);
}
.metric .c-src {
  font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-40);
}
.metric .c-val {
  font-family: 'Roslindale', serif; font-weight: 700;
  font-size: 17px; color: var(--midnight); font-variant-numeric: tabular-nums;
}

/* ── provenance: machine, machine-estimated, or by hand ──── */
/* Three states a reader must tell apart at a glance. The hand-gathered chip is
   the one that has to look different in kind rather than in degree, so it takes
   the mark and a solid ground instead of another shade of the same chip. */
.prov.is-auto, .prov.is-hand {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 8px; border-radius: 20px;
}
.prov.is-auto {
  color: var(--ink-60); background: rgba(20,54,77,.06);
  border: 1px solid var(--rule-soft);
}
.prov.is-auto .p-conf {
  font-variant-numeric: tabular-nums; padding-left: 6px;
  border-left: 1px solid var(--rule); color: var(--midnight);
}
.prov.is-auto.hi  .p-conf { color: #1d5b3c; }
.prov.is-auto.mid .p-conf { color: #8f5209; }
.prov.is-auto.lo  .p-conf { color: var(--critical); }

.prov.is-hand {
  color: var(--midnight); background: var(--flax);
  border: 1px solid rgba(20,54,77,.18);
}
.prov.is-hand .p-mark { font-size: 11px; line-height: 1; }

.metric .prov { margin-top: 9px; }

/* ── the map under the Local Falcon grid ─────────────────── */
/* The painted dot is inset inside its cell rather than filling it. The button
   keeps the full 54px so the touch target on an iPad is unchanged, while the
   coloured circle shrinks and the map shows between the points. Without this
   169 dots at a 3px gap cover the ground almost completely and the map may as
   well not be there. */
.grid-wrap.has-map .lf-pt {
  padding: 5px;
  background-clip: content-box;
}
/* Inset to the padding so the map sits under the points and not under the
   frame. Desaturated and dimmed on purpose: 169 ranking colours have to stay
   the loudest thing in the panel, and a full-colour street map fights them. */
.grid-wrap.has-map .lf-map {
  position: absolute; inset: 20px; border-radius: 6px;
  background-size: cover; background-position: center;
  filter: saturate(.3) contrast(.95);
  opacity: .8;
  pointer-events: none;
}
.grid-wrap.has-map .lf-grid { position: relative; }
/* A dot over a map needs its own edge to stay readable. */
.grid-wrap.has-map .lf-pt { box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }
.grid-wrap.has-map .lf-pt.is-center { box-shadow: 0 0 0 2.5px var(--midnight); }

.lf-attr {
  position: relative; margin-top: 10px;
  font-size: 10px; color: var(--ink-40); text-align: right;
}
@media print { .grid-wrap.has-map .lf-map { opacity: .4; } }