/* ═══════════════════════════════════════════════════════════════════════════
   ConFacts — Direction A.
   ONE design language across the whole flow: search → disambiguation → live
   progress → report. It reads as a records document, not an app: light canvas,
   white paper, mono labels for anything machine-sourced, and colour reserved
   for meaning (green = verified, amber = unconfirmed or unreachable, red =
   adverse). Actions are ink black so green never means "button".
   The tokens below are the single source of truth; the report block at the
   bottom of this file consumes the same ones.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Surfaces */
  --canvas: #ECEBE6;
  --card: #ffffff;
  --wash: #FAFAF8;
  --fill: #F4F3EF;
  /* Rules, heaviest first */
  --rule: #E8E7E2;
  --rule-2: #EFEEE9;
  --rule-3: #F4F3EE;
  --field-rule: #E4E2DA;
  /* Ink, darkest first */
  --ink: #1A1A18;
  --ink-2: #55585F;
  --muted: #6B6F78;
  --faint: #9A9EA6;
  --dim: #B6B3AA;
  /* Semantic */
  --green: #1F7A4D;  --green-bg: #E9F4EE;  --green-rule: #D5E9DE;
  --amber: #9A7B3F;  --amber-bg: #F6EED9;  --amber-rule: #E6D4A6;
  --red: #B0413E;    --red-bg: #F7E9E7;    --red-rule: #E7C9C5;
  --neutral-bg: #F1F1EF;

  --sans: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --r-card: 6px;      /* the document itself */
  --r-box: 10px;      /* boxes inside a document */
  --r-control: 8px;   /* things you click or type in */
  --shadow: 0 1px 3px rgba(0, 0, 0, .05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Shared primitives ──────────────────────────────────────────────────────
   .mono-lbl and .v2-pill are global: the progress screen states and the
   report's verified/claimed pills are deliberately the same vocabulary, so a
   reader learns it once. */
.mono-lbl {
  font: 500 10.5px/1.5 var(--mono);
  color: var(--faint);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.v2-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 11px/1 var(--sans);
  padding: 4px 8px; border-radius: var(--r-card); white-space: nowrap;
}
.pill-verified { color: var(--green); background: var(--green-bg); }
.pill-claimed  { color: var(--muted); background: var(--neutral-bg); }
.pill-couldnt_check { color: var(--amber); background: var(--amber-bg); }
/* Progress-screen tones — same shapes, run-state wording. */
.pill-pending { color: var(--dim);   background: var(--neutral-bg); }
.pill-running { color: var(--ink);   background: #EAE9E4; }
.pill-done    { color: var(--green); background: var(--green-bg); }
.pill-warn    { color: var(--amber); background: var(--amber-bg); }
.pill-fail    { color: var(--red);   background: var(--red-bg); }

.spinner {
  display: inline-block; width: 9px; height: 9px; flex: none;
  border: 1.5px solid var(--ink); border-top-color: transparent; border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── App shell ──────────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 28px; background: var(--card); border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 10;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 16px; cursor: pointer;
}
.brand b { font-weight: 800; }
.brand-mark {
  width: 20px; height: 20px; border-radius: 5px; background: var(--ink); flex: none;
}
.tagline { font: 500 10.5px/1.5 var(--mono); color: var(--faint);
  letter-spacing: .04em; text-transform: uppercase; }
/* On the report screen the document carries its own masthead, so the shell
   steps back to a single action instead of repeating the wordmark. */
.topbar-back { display: none; }
body[data-view="report"] .brand,
body[data-view="report"] .tagline { display: none; }
body[data-view="report"] .topbar-back { display: inline-flex; }

#main { max-width: 920px; margin: 0 auto; padding: 40px 20px 80px; }
body[data-view="report"] #main { padding: 0; max-width: none; }
.view { animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: 13px; }

/* ── Card + type scale shared by search / disambiguation / progress ─────── */
.card {
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 40px; margin: 0 auto;
}
.card-narrow { max-width: 560px; }
.card-wide { max-width: 660px; }
.card h1 {
  margin: 8px 0 0; font-size: 26px; font-weight: 800;
  letter-spacing: -.01em; line-height: 1.15;
}
.lede { color: var(--muted); font-size: 14px; margin: 8px 0 0; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-block { margin-top: 22px; }
.form-block label { display: block; margin-bottom: 6px; }
.lbl-opt { color: var(--dim); text-transform: none; letter-spacing: 0; }
input, select {
  width: 100%; height: 44px; padding: 0 12px; font-family: var(--sans); font-size: 15px;
  color: var(--ink); background: var(--wash);
  border: 1px solid var(--field-rule); border-radius: var(--r-control);
  transition: border-color .15s, box-shadow .15s;
}
/* The native select measures 2px taller than a text input at the same padding,
   which showed as a stepped edge where it sits beside the Run audit button.
   Fixed height on both, and our own chevron so the control matches. */
select {
  appearance: none; -webkit-appearance: none; padding-right: 30px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B6F78' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center;
}
input::placeholder { color: var(--dim); }
input:focus, select:focus {
  outline: none; background: var(--card);
  border-color: var(--ink); box-shadow: 0 0 0 3px rgba(26, 26, 24, .07);
}
/* Everything else keyboard-reachable gets the same ring the fields do —
   otherwise buttons and the candidate picker fall back to the browser's default
   orange outline, which reads as an amber "unconfirmed" signal in this palette. */
:focus-visible {
  outline: 2px solid var(--ink); outline-offset: 2px; border-radius: var(--r-control);
}
input:focus-visible, select:focus-visible { outline: none; }
.field-note { display: block; color: var(--muted); font-size: 12.5px; margin-top: 7px; line-height: 1.45; }
#disambig-msg .field-note { color: var(--faint); }
.or-divider {
  position: relative; text-align: center; margin: 26px 0 0;
  font: 500 10.5px var(--mono); color: var(--dim); letter-spacing: .08em;
}
.or-divider::before {
  content: ""; position: absolute; top: 50%; left: 0; right: 0;
  height: 1px; background: var(--rule);
}
.or-divider span { position: relative; background: var(--card); padding: 0 12px; }
.form-actions { display: flex; align-items: flex-end; gap: 14px; margin-top: 26px; }
.state-block { flex: 0 0 92px; margin-top: 0; }
/* The optional city tiebreaker slides in rather than appearing abruptly when
   the query turns out to be a name. */
.opt-field { animation: field-in .18s ease; }
@keyframes field-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

button {
  cursor: pointer; font-family: var(--sans); font-size: 15px; font-weight: 600;
  padding: 11px 20px; border-radius: var(--r-control);
  border: 1px solid var(--field-rule); background: var(--card); color: var(--ink);
  transition: background .15s, border-color .15s, color .15s;
}
button:hover { border-color: var(--dim); }
button.primary { flex: 1; background: var(--ink); border-color: var(--ink); color: #fff; }
button.primary:hover { background: #000; border-color: #000; }
button.ghost {
  background: transparent; border-color: transparent; color: var(--muted);
  padding-left: 0; font-size: 14px;
}
button.ghost:hover { color: var(--ink); border-color: transparent; }
button:disabled { opacity: .45; cursor: default; }
.error-line {
  display: flex; gap: 8px; margin-top: 20px; padding: 11px 13px; font-size: 13.5px;
  color: var(--red); background: var(--red-bg);
  border: 1px solid var(--red-rule); border-radius: var(--r-control);
}

/* ── Home page ───────────────────────────────────────────────────────────────
   The landing page and the search screen are the same view: the form is in the
   hero, and the explanation lives under it for whoever needs it. Type and
   colour are the report's — a visitor learns the vocabulary here and meets it
   again on the findings page. */
body[data-view="search"] #main { max-width: 1060px; padding-bottom: 0; }

.home-hero {
  display: grid; grid-template-columns: 1fr 470px; gap: 56px;
  align-items: start; padding: 28px 0 64px;
}
.hero-copy { padding-top: 12px; }
.hero-copy h1 {
  margin: 14px 0 0; font-size: 46px; font-weight: 800;
  letter-spacing: -.025em; line-height: 1.06;
}
.hero-lede { margin: 20px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); max-width: 46ch; }
.hero-lede b { font-weight: 800; color: var(--ink); }
/* The one piece of evidence on the page. Deliberately built from the report's
   own flag treatment, so the sample looks like what you actually receive. */
.proof { margin: 30px 0 0; max-width: 46ch; }
.proof .mono-lbl { display: block; margin-bottom: 8px; }
.proof-flag {
  display: flex; gap: 13px; padding: 15px 16px;
  background: var(--red-bg); border: 1px solid var(--red-rule); border-radius: var(--r-box);
}
.proof-sev { flex: none; font: 600 10px var(--mono); color: var(--red); padding-top: 3px; }
.proof-body p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink); }
.proof-body b { font-weight: 700; }
.proof-src { display: block; margin-top: 9px; }
.proof-note { margin: 10px 2px 0; font-size: 12.5px; line-height: 1.5; color: var(--faint); }

.hero-points { list-style: none; margin: 22px 0 0; padding: 0 4px; }
.hero-points li {
  display: flex; gap: 11px; align-items: baseline;
  font-size: 14px; color: var(--muted); padding: 7px 0;
}
.hp-mark {
  flex: none; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); transform: translateY(-1px);
}

/* The form keeps the paper treatment; the story around it sits on the canvas. */
/* scroll-margin clears the sticky topbar: the closing CTA links to #audit, and
   without it the card's first 57px land underneath the bar. */
.hero-card { max-width: none; padding: 34px; scroll-margin-top: 76px; }
.hero-card h2 {
  margin: 8px 0 0; font-size: 24px; font-weight: 800;
  letter-spacing: -.01em; line-height: 1.15;
}
.hero-card-foot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule-3);
  color: var(--faint); font-size: 12.5px; line-height: 1.55;
}

/* ── Home sections ── */
.home-sec { padding: 56px 0; border-top: 1px solid var(--rule); }
.home-sec-h2, .home-split h2 {
  margin: 12px 0 0; font-size: 28px; font-weight: 800;
  letter-spacing: -.02em; line-height: 1.2; max-width: 20ch;
}
.home-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.home-split h2 { max-width: 16ch; }
.home-body p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: var(--ink-2); }
.home-body p:last-child { margin-bottom: 0; }
.home-mission { color: var(--ink) !important; }
.home-mission b { font-weight: 700; }

/* Steps — numbered in mono, the same index the progress screen uses. */
.steps { list-style: none; margin: 32px 0 0; padding: 0; }
.steps li {
  display: flex; gap: 20px; padding: 20px 0; border-top: 1px solid var(--rule-3);
}
.steps li:first-child { border-top: 0; padding-top: 4px; }
.step-n { flex: none; width: 26px; font: 500 12px var(--mono); color: var(--dim); padding-top: 3px; }
.step-t { font-weight: 700; font-size: 16px; }
.steps p { margin: 5px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); max-width: 62ch; }

/* Pillar cards — weights are stated, because the weighting is the argument. */
.pillar-cards {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 30px;
}
.pillar-card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: var(--r-box); padding: 20px;
}
.pillar-card-info { background: var(--wash); border-style: dashed; }
.pc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pc-name { font-weight: 700; font-size: 15px; }
.pc-w { flex: none; font: 600 13px var(--mono); color: var(--ink); }
.pc-w-info { font-weight: 500; font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .04em; }
.pillar-card p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }
.pc-src { display: block; margin-top: 12px; }

.disq-note {
  display: flex; gap: 14px; align-items: flex-start; margin-top: 12px;
  background: var(--red-bg); border: 1px solid var(--red-rule);
  border-radius: var(--r-box); padding: 16px 18px;
}
.disq-note .v2-pill { flex: none; margin-top: 1px; }
.disq-note p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }

/* ── Vocabulary ── */
.vocab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 30px; }
.vocab-item .v2-pill { margin-bottom: 10px; }
.vocab-item p { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* ── Closing ── */
.home-cta { text-align: center; padding: 64px 0 56px; border-top: 1px solid var(--rule); }
.home-cta h2 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.home-cta p { margin: 10px 0 26px; color: var(--muted); font-size: 15px; }
.cta-btn {
  display: inline-block; background: var(--ink); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 15px; padding: 13px 26px; border-radius: var(--r-control);
  transition: background .15s;
}
.cta-btn:hover { background: #000; }

.home-foot {
  border-top: 1px solid var(--rule); padding: 24px 0 48px;
}
.home-foot p { margin: 0; font-size: 11.5px; line-height: 1.7; color: var(--faint); max-width: 78ch; }
.home-foot b { font-weight: 700; }

/* ── Disambiguation ─────────────────────────────────────────────────────── */
.candidate-list { margin: 22px 0 24px; display: flex; flex-direction: column; gap: 8px; }
.candidate {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  width: 100%; text-align: left; padding: 14px 16px; font-size: 15px;
  background: var(--wash); border: 1px solid var(--rule-2); border-radius: var(--r-box);
}
.candidate:hover { background: var(--card); border-color: var(--ink); }
.candidate .c-main { min-width: 0; }
.candidate .c-name { display: block; font-weight: 700; font-size: 15px; }
.candidate .c-meta { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }
.candidate .c-lic { font: 500 12px var(--mono); color: var(--ink-2); flex: none; }

/* ── Live progress ──────────────────────────────────────────────────────── */
.progress-meter {
  height: 6px; background: var(--rule-2); border-radius: 3px;
  overflow: hidden; margin: 24px 0 4px;
}
.progress-meter span {
  display: block; height: 100%; width: 0; background: var(--ink);
  border-radius: 3px; transition: width .4s ease;
}
.progress-status { color: var(--muted); font-size: 12.5px; }
.agent-rows { margin: 18px 0 0; }
.agent-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--rule-3);
}
.agent-row:last-child { border-bottom: 0; padding-bottom: 0; }
.agent-row .a-idx { font: 500 11px var(--mono); color: var(--dim); flex: none; width: 18px; }
.agent-row .a-main { flex: 1; min-width: 0; }
.agent-row .a-label { display: block; font-weight: 600; font-size: 14px; }
.agent-row .lbl-opt { font-weight: 500; font-size: 13px; }
.agent-row .a-src { display: block; font: 500 10.5px/1.5 var(--mono); color: var(--faint); margin-top: 2px; }
.agent-row .a-state { flex: none; }

/* ── Failure state — a stated outcome, not a broken screen ──────────────── */
.error-state { text-align: left; }
.error-state h2 { margin: 8px 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.error-state p { color: var(--muted); margin: 0 0 22px; font-size: 14px; }
.error-state .err-lbl { color: var(--red); }

/* ── Report screen chrome ───────────────────────────────────────────────── */
.report-actions { max-width: 860px; margin: 0 auto; padding: 4px 20px 40px; }

/* The hero splits before the rest of the page does — the form needs its width
   back well before body copy does. */
@media (max-width: 940px) {
  .home-hero { grid-template-columns: 1fr; gap: 34px; padding: 18px 0 48px; }
  .hero-copy { padding-top: 0; }
  .hero-copy h1 { font-size: 40px; }
  .hero-copy h1 br { display: none; }
  .hero-card { max-width: 560px; }
  .home-split { grid-template-columns: 1fr; gap: 20px; }
  .home-split h2, .home-sec-h2 { max-width: 24ch; }
  .vocab { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 680px) {
  .topbar { padding: 14px 18px; }
  .tagline { display: none; }
  .hero-copy h1 { font-size: 32px; letter-spacing: -.02em; }
  .hero-lede { font-size: 15.5px; }
  .hero-card { padding: 26px 22px; }
  .home-sec { padding: 40px 0; }
  .home-sec-h2, .home-split h2 { font-size: 23px; }
  .pillar-cards { grid-template-columns: 1fr; }
  .steps li { gap: 14px; }
  .home-cta { padding: 44px 0 40px; }
  .home-cta h2 { font-size: 25px; }
  .card { padding: 26px 22px; }
  .card h1 { font-size: 23px; }
  #main { padding: 24px 16px 60px; }
  .form-actions { flex-wrap: wrap; }
  .state-block { flex: 0 0 100%; }
  .candidate { flex-direction: column; align-items: flex-start; gap: 6px; }
  /* Source lines wrap to two lines here — keep the index and the state pill
     level with the agent's name rather than floating mid-block. */
  .agent-row { align-items: flex-start; }
  .agent-row .a-idx, .agent-row .a-state { padding-top: 2px; }
}

/* ═══════════════ Report — the findings document ═══════════════ */
/* Consumes the tokens above; the pill and mono-label primitives are shared with
   the home and progress screens rather than redefined here. */
#view-report { background: var(--canvas); }
.report-v2 { background:var(--canvas); min-height:100vh; padding:40px 20px; }
.report-v2 *, .report-v2 *::before, .report-v2 *::after { box-sizing:border-box; }
.rpt-card { max-width:860px; margin:0 auto; background:#fff; border:1px solid var(--rule);
  border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.05); padding:48px; }
.report-v2 .rpt-neutral { color:var(--dim); }

.rpt-head { display:flex; justify-content:space-between; align-items:flex-start;
  padding-bottom:18px; border-bottom:1px solid var(--rule); }
.rpt-brand { font-weight:700; font-size:16px; display:flex; align-items:center; gap:9px; }
.rpt-brand b { font-weight:800; }
.rpt-mark { width:20px; height:20px; border-radius:5px; background:var(--ink); flex:none; display:inline-block; }
.rpt-meta { text-align:right; font:500 11px/1.7 var(--mono); color:var(--muted); }
.rpt-meta .mono-lbl { display:inline; }

.rpt-legend { background:var(--wash); border:1px solid var(--rule-2); border-radius:8px; padding:12px 16px; margin-top:18px; }
.legend-ttl { margin-bottom:8px; }
.legend-items { display:flex; gap:22px; flex-wrap:wrap; }
.legend-item { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-2); }

.rpt-identity { display:flex; justify-content:space-between; gap:28px; margin-top:26px; }
.rpt-id-main { display:flex; gap:16px; align-items:flex-start; }
.rpt-logo { width:54px; height:54px; border-radius:8px; object-fit:contain; border:1px solid var(--canvas); background:var(--wash); flex:none; }
.rpt-logo-fb { display:flex; align-items:center; justify-content:center; font:700 18px var(--sans); color:var(--amber); }
.rpt-name { font-weight:800; font-size:26px; line-height:1.15; letter-spacing:-.01em; }
.rpt-sub { color:var(--muted); font-size:14px; margin-top:3px; }
.rpt-legal { color:var(--faint); font-size:12.5px; margin-top:2px; }
/* Trust score sits in its own composed card (design), content left-aligned. */
.rpt-score { flex:none; width:236px; text-align:left; background:var(--fill);
  border:1px solid #EAE8E1; border-radius:12px; padding:18px 20px; }
.rpt-score-num { font-weight:800; font-size:46px; line-height:1; color:var(--sc); margin-top:6px; }
.rpt-score-out { font-size:15px; font-weight:600; color:var(--dim); margin-left:4px; }
.rpt-score-bar { height:6px; background:var(--field-rule); border-radius:3px; margin:12px 0 10px; overflow:hidden; }
.rpt-score-bar span { display:block; height:100%; background:var(--sc); border-radius:3px; }
.rpt-score-band { font-weight:700; font-size:14px; color:var(--sc); display:flex; align-items:center; gap:7px; }
.rpt-band-dot { width:8px; height:8px; border-radius:50%; background:var(--sc); flex:none; }
.rpt-score-sub { font-size:12.5px; color:var(--muted); margin-top:3px; }
.rpt-prov { margin-top:10px; font-size:11.5px; color:var(--amber); background:var(--amber-bg); border:1px solid var(--amber-rule); border-radius:6px; padding:5px 8px; text-align:left; }

/* Borderless contact row (design) — spaced columns, no box, no dividers. */
.rpt-contact { display:flex; gap:40px; margin-top:24px; }
.rpt-contact-item { font-size:14px; min-width:0; }
.rpt-contact-item .mono-lbl { margin-bottom:4px; }
.rpt-contact-item > div:last-child { overflow:hidden; text-overflow:ellipsis; }
.rpt-contact-item a { color:var(--green); text-decoration:none; }

.rpt-signals { display:grid; grid-template-columns:1fr 1fr 1.4fr; gap:14px; margin-top:14px; }
.rpt-yrs-num { font-weight:800; font-size:34px; color:var(--ink); line-height:1; }
.rpt-yrs-unit { font-size:15px; font-weight:600; color:var(--dim); margin-left:5px; }
.rpt-box { border:1px solid var(--rule-2); border-radius:10px; padding:16px; }
.rpt-box-head { display:flex; justify-content:space-between; align-items:center; font-weight:600; font-size:13px; color:var(--ink-2); margin-bottom:10px; }
/* Composed neutral states — deliberate "not published / not found", never broken. */
.rpt-neutral-block { display:flex; align-items:center; gap:8px; color:#8C8F96; font-size:13px;
  padding:14px 0; min-height:46px; }
.rpt-neutral-dot { width:7px; height:7px; border-radius:50%; background:#CFC9BC; flex:none; }
.rpt-neutral-tag { display:inline-block; font:500 11px/1.4 var(--mono);
  color:#9A9288; background:#F2F1EC; border:1px solid #E7E5DE; border-radius:5px; padding:2px 8px; margin-top:7px; }
.rpt-bbb-grade { font-weight:800; font-size:34px; color:var(--green); line-height:1; }
.rpt-bbb-affirm { font-weight:800; font-size:21px; color:var(--green); line-height:1.1; }
.rpt-bbb-cap { font-size:12px; color:var(--muted); margin-top:2px; }
/* The contractor's conflicting self-claim inside the Verified Years box — the
   reader sees the mismatch itself (verified floor vs their claim), in red. */
.rpt-yrs-claim { font-size:12px; font-weight:700; color:var(--red); margin-top:8px; line-height:1.4; }
.rpt-box-foot { font-size:12.5px; color:var(--muted); margin-top:10px; }
.rpt-reviews { display:flex; gap:24px; }
.rpt-rev { flex:1; }
.rpt-rev-big { font-weight:800; font-size:26px; color:var(--ink); margin-top:4px; line-height:1; }
.rpt-rev-empty { color:#CFC9BC; }
.rpt-rev-out { font-size:12px; font-weight:600; color:var(--dim); margin-left:4px; }
/* Rating bar (design) — filled to the star rating, shown only when a rating exists. */
.rpt-rev-bar { height:5px; background:var(--rule-2); border-radius:3px; margin:9px 0 7px; overflow:hidden; max-width:120px; }
.rpt-rev-bar span { display:block; height:100%; background:var(--ink); border-radius:3px; }
.rpt-rev-sub { font-size:12px; color:var(--muted); margin-top:4px; }

.rpt-section { margin-top:30px; }
.rpt-sec-head { display:flex; justify-content:space-between; align-items:baseline; font-weight:700; font-size:15px; padding-bottom:10px; border-bottom:1px solid var(--rule); margin-bottom:14px; }
.rpt-count { font:500 11px var(--mono); color:var(--faint); }

.rpt-cert-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.rpt-cert { border:1px solid #E3EDE7; background:#F8FBF9; border-radius:10px; padding:14px; }
.rpt-cert-soft { border-color:#EDECE7; background:var(--wash); }
.rpt-cert-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.rpt-cert-name { font-weight:700; font-size:14px; }
.rpt-cert-level { display:block; font-weight:500; font-size:11.5px; color:var(--green); margin-top:2px; }
.rpt-cert-soft .rpt-cert-level { color:var(--amber); }
.rpt-cert-note { font-size:12px; color:#8A8E96; margin-top:8px; }

.rpt-detailed-head { margin:34px 0 4px; }
.rpt-block { margin-top:16px; }
.rpt-block-ttl { font-weight:700; font-size:13.5px; color:var(--ink-2); padding:10px 0 4px; border-bottom:1px solid #F0EFEA; }
.rpt-row { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:11px 0; border-bottom:1px solid var(--rule-3); }
.rpt-row-l { flex:0 0 auto; max-width:40%; }
.rpt-row-label { font-weight:600; font-size:14px; }
.rpt-row-src { font:500 10.5px var(--mono); color:#A9ADB4; margin-top:2px; }
.rpt-row-r { display:flex; align-items:flex-start; gap:12px; text-align:right; flex:1 1 auto; min-width:0; justify-content:flex-end; }
.rpt-row-val { font-size:14px; overflow-wrap:anywhere; }
.rpt-row-r .v2-pill { flex:0 0 auto; }
.rpt-why { font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.55; }
.rpt-why .mono-lbl { display:block; margin-bottom:3px; }

.rpt-noflags { color:var(--green); font-weight:600; font-size:14px; background:var(--green-bg); border:1px solid var(--green-rule); border-radius:8px; padding:12px 14px; }
.rpt-flag { display:flex; gap:12px; padding:12px 14px; background:var(--red-bg); border:1px solid var(--red-rule); border-radius:8px; margin-bottom:8px; }
.rpt-flag-medium { background:var(--amber-bg); border-color:var(--amber-rule); }
.rpt-flag-sev { font:600 10px var(--mono); color:var(--red); flex:none; padding-top:2px; }
.rpt-flag-medium .rpt-flag-sev { color:var(--amber); }
.rpt-flag-body { font-size:13.5px; line-height:1.5; }
.rpt-minor { font-size:12.5px; color:var(--muted); margin-top:10px; line-height:1.5; }
.rpt-minor .mono-lbl { display:block; margin-bottom:3px; }

.rpt-q { display:flex; gap:14px; padding:12px 0; border-bottom:1px solid var(--rule-3); }
.rpt-q-num { flex:none; width:24px; height:24px; border-radius:50%; background:var(--ink); color:#fff; font-weight:700; font-size:12px; display:flex; align-items:center; justify-content:center; }
.rpt-q-text { font-weight:600; font-size:14px; }
.rpt-q-why { font-size:12.5px; color:var(--muted); margin-top:3px; }

.rpt-sources { margin-top:30px; padding-top:18px; border-top:1px solid var(--rule); }
.rpt-source-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px 22px; margin-top:10px; }
.rpt-source { font-size:13px; color:var(--ink-2); display:flex; align-items:center; gap:8px; }
.rpt-dot { width:7px; height:7px; border-radius:50%; flex:none; }
.rpt-dot-ok { background:var(--green); } .rpt-dot-bad { background:var(--red); } .rpt-dot-lim { background:#C9A14A; }
.rpt-src-tag { font:500 10px var(--mono); color:var(--amber); }

.rpt-disclaimer { margin-top:24px; padding-top:16px; border-top:1px solid var(--rule); font-size:11.5px; line-height:1.6; color:var(--faint); }

@media (max-width:680px) {
  .rpt-card { padding:24px; } .rpt-identity { flex-direction:column; }
  .rpt-score { width:100%; }
  .rpt-signals, .rpt-cert-grid, .rpt-source-grid { grid-template-columns:1fr; }
  .rpt-contact { flex-direction:column; gap:14px; }
}

/* ── Claims & Enforcement (Agent 7) ─────────────────────────────────────────
   Its own box, below Identity. This section is unlike the other detail blocks:
   it is a LIST of dated records rather than a set of label/value rows, and each
   record has to carry four things at a glance — number, type, date, and what
   last happened to it.

   Restraint is deliberate. Most records are clean (of Diablo Roofing's ten, six
   found no violations), so colour is reserved for the ones that actually found
   something. A section that shouted at every inspection would make a compliant
   contractor look investigated-heavy — the opposite of what the data says. */
.rpt-claims-sum { font-size:13px; color:var(--ink-2); line-height:1.5; margin-bottom:4px; }
.rpt-claims-list { margin-top:6px; }

.rpt-claim { display:flex; gap:11px; align-items:flex-start;
             padding:10px 0; border-top:1px solid var(--rule-3); }
.rpt-claim:first-child { border-top:0; padding-top:4px; }

/* The index doubles as the severity cue — one quiet mark per row rather than a
   coloured band, which at ten rows would read as an alarm. */
.rpt-claim-n { flex:none; width:21px; height:21px; border-radius:50%;
               display:flex; align-items:center; justify-content:center;
               font:600 10.5px/1 var(--mono); color:var(--muted);
               background:var(--fill); margin-top:1px; }
.rpt-claim-body { flex:1 1 auto; min-width:0; }
.rpt-claim-hd { display:flex; justify-content:space-between; gap:12px;
                align-items:baseline; flex-wrap:wrap; }
.rpt-claim-type { font-weight:600; font-size:13.5px; color:var(--ink); }
.rpt-claim-date { font:400 11.5px/1.4 var(--mono); color:var(--faint); }
.rpt-claim-event { font-size:12.5px; color:var(--muted); line-height:1.45;
                   margin-top:3px; }
.rpt-claim-note { font-size:11.5px; color:var(--faint); }
/* The violation COUNT, beside the type where the eye lands. Carries the red
   treatment because it only ever appears on a record that has citations. */
.rpt-claim-count {
  font-size:11px; font-weight:700; letter-spacing:.02em;
  color:var(--red); background:var(--red-bg);
  padding:1px 6px; border-radius:9px; white-space:nowrap;
}

/* Only a record that actually found violations is coloured. A closed
   inspection with none found means OSHA looked and the company was compliant —
   colouring that would be an accusation the data does not support. */
.rpt-claim-adverse .rpt-claim-n { color:var(--red); background:var(--red-bg); }
.rpt-claim-adverse .rpt-claim-event { color:var(--red); font-weight:600; }

.rpt-claim-src a { color:var(--faint); }
.rpt-claims-foot { font:400 11px/1.4 var(--mono); color:var(--faint);
                   margin-top:12px; padding-top:9px; border-top:1px solid var(--rule-3); }

@media (max-width:560px) {
  .rpt-claim-hd { flex-direction:column; gap:1px; }
}

/* Report permalink — a saved report is only useful if the reader can return to
   it or hand it to someone else. */
.rpt-permalink { margin-top: 4px; }
.rpt-copy {
  font: inherit; font-size: 11.5px; color: var(--ink);
  background: none; border: none; border-bottom: 1px solid var(--rule);
  padding: 0; cursor: pointer;
}
.rpt-copy:hover { border-bottom-color: var(--ink); }

/* ── Live audit scene ──────────────────────────────────────────────────────
   Something visibly moving while the agents read the record. The motion is
   decorative; the CAPTION beneath it is not — it names the source actually
   being read and counts findings that have genuinely arrived.
   Honours prefers-reduced-motion: the scene still reads, it just stops moving. */
.audit-scene {
  position: relative;
  height: 68px;
  margin: 22px 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  line-height: 1;
  user-select: none;
}
.scene-paper { font-size: 34px; filter: saturate(0.25); }
.scene-lens {
  position: absolute;
  animation: scene-sweep 3.2s ease-in-out infinite;
}
.scene-pen {
  position: absolute;
  font-size: 24px;
  animation: scene-write 1.4s ease-in-out infinite;
}
/* The lens sweeps ACROSS the page, as if reading it line by line. */
@keyframes scene-sweep {
  0%   { transform: translate(-34px, -10px) rotate(-8deg); opacity: .95; }
  25%  { transform: translate(16px, -4px)  rotate(4deg); }
  50%  { transform: translate(-28px, 8px)  rotate(-6deg); }
  75%  { transform: translate(20px, 12px)  rotate(6deg); }
  100% { transform: translate(-34px, -10px) rotate(-8deg); opacity: .95; }
}
/* The pen nods, the way a hand does when it writes a short line. */
@keyframes scene-write {
  0%, 100% { transform: translate(30px, 14px) rotate(-6deg); }
  50%      { transform: translate(36px, 18px) rotate(2deg); }
}
.scene-caption {
  text-align: center;
  font-size: 12px;
  color: var(--faint);
  min-height: 1.2em;
  margin-bottom: 14px;
}
@media (prefers-reduced-motion: reduce) {
  .scene-lens, .scene-pen { animation: none; }
  .scene-lens { transform: translate(-24px, -6px); }
  .scene-pen  { transform: translate(30px, 14px); }
}

/* Cached-report choice — offered, never imposed. */
.cached-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 10px; }
.cached-actions .secondary {
  font: inherit; padding: 10px 16px; border-radius: 8px; cursor: pointer;
  background: transparent; border: 1px solid var(--rule); color: var(--ink);
}
.cached-actions .secondary:hover { border-color: var(--ink); }

/* ── Red Flags: synthesized concerns ──────────────────────────────────────────
   One box per CONCERN, not per emitted flag. The three tiers must read as a
   SCALE, not as three equal boxes: the section's whole job is telling a reader
   which item needs action and which is context. Equal-weight boxes say "three
   problems" — the same misreading the raw-flag dump produced, restated in a
   nicer frame. So weight is carried by rail, tint, type size and colour
   together, and the quiet tier is genuinely quiet. */
.rpt-concerns { display:flex; flex-direction:column; gap:22px; }
.rpt-concern {
  background:var(--card); border:1px solid var(--rule);
  border-left:3px solid var(--rule-2); border-radius:var(--r-card); overflow:hidden;
}
.rpt-concern-head {
  display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;
  padding:12px 15px; border-bottom:1px solid var(--rule-2);
}
.rpt-concern-weight { font:600 10px/1.5 var(--mono); letter-spacing:.09em; flex:none; }
.rpt-concern-title { font-weight:650; font-size:15px; line-height:1.35; }
.rpt-concern-body {
  padding:13px 15px; font-size:13.5px; line-height:1.6;
  display:flex; flex-direction:column; gap:11px;
}
.rpt-concern-body p { margin:0; }
.rpt-why-you { background:var(--wash); border-radius:6px; padding:10px 12px; }
.rpt-why-you .mono-lbl { display:block; margin-bottom:3px; }
.rpt-todo { margin:0; padding-left:17px; display:flex; flex-direction:column; gap:5px; }
.rpt-todo li { line-height:1.55; }

/* VERIFY BEFORE HIRING — act on this. Given the most weight on the page. */
.rpt-concern-high { border-color:var(--red-rule); border-left:4px solid var(--red); }
.rpt-concern-high .rpt-concern-head { background:var(--red-bg); border-bottom-color:var(--red-rule); }
.rpt-concern-high .rpt-concern-weight { color:var(--red); }
.rpt-concern-high .rpt-concern-title { font-size:16px; }

/* WORTH ASKING ABOUT — raise it, don't act on it alone. */
.rpt-concern-medium { border-color:var(--amber-rule); border-left:4px solid var(--amber); }
.rpt-concern-medium .rpt-concern-head { background:var(--amber-bg); border-bottom-color:var(--amber-rule); }
.rpt-concern-medium .rpt-concern-weight { color:var(--amber); }

/* FOR YOUR AWARENESS — context, no action needed. Deliberately recessive: no
   tint, thin neutral rail, smaller and quieter type. A homeowner should be able
   to skip these without wondering whether they missed something. */
.rpt-concern-info .rpt-concern-head { background:transparent; }
.rpt-concern-info .rpt-concern-weight { color:var(--faint); }
.rpt-concern-info .rpt-concern-title { font-size:14px; font-weight:600; color:var(--ink-2); }
.rpt-concern-info .rpt-concern-body { font-size:13px; color:var(--ink-2); gap:9px; }
.rpt-concern-info .rpt-why-you {
  background:transparent; border-left:2px solid var(--rule); border-radius:0;
  padding:2px 0 2px 11px;
}

/* Provenance stays one click away — the synthesis changed the reading, not the
   record, and a reader must be able to check that for themselves. */
.rpt-raw { border-top:1px solid var(--rule-2); padding-top:9px; }
.rpt-raw > summary { cursor:pointer; font:600 10.5px var(--mono); color:var(--muted); padding:2px 0; }
.rpt-raw > summary:hover { color:var(--ink); }
.rpt-raw > summary:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:3px; }
.rpt-raw-item { border-left:2px solid var(--rule); padding:7px 0 7px 11px; margin-top:9px; font-size:12.5px; color:var(--muted); }

/* The named records behind a concern. A pattern across several companies is
   only visible when the companies sit side by side; in a paragraph it reads as
   one more sentence. Deliberately tabular and quiet — the point is that the
   reader can scan three rows and see the shape for themselves. */
.rpt-ev { border:1px solid var(--rule-2); border-radius:6px; padding:10px 12px; }
.rpt-ev .mono-lbl { display:block; margin-bottom:7px; }
.rpt-ev-row {
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  padding:5px 0; border-top:1px solid var(--rule-3);
}
.rpt-ev-row:first-of-type { border-top:none; padding-top:0; }
.rpt-ev-label { font-weight:600; font-size:13px; }
.rpt-ev-detail { font:500 11px var(--mono); color:var(--muted); }
.rpt-ev-note {
  font:600 10px var(--mono); letter-spacing:.05em; color:var(--red);
  background:var(--red-bg); border-radius:3px; padding:2px 6px;
}
.rpt-concern-info .rpt-ev-note { color:var(--muted); background:var(--neutral-bg); }

/* ═══════════════════════════════════════════════════════════════════════════
   ConFacts home page
   ───────────────────────────────────────────────────────────────────────────
   Ported from the design rather than adopting its Tailwind CDN build. The app
   is vanilla JS with a hand-written system; loading Tailwind at runtime would
   add a third-party script to every page load, and its reset would fight the
   report styles that share this stylesheet. The tokens below are the design's
   own values.

   One 800px column. Sections separated by a hairline rule rather than cards —
   the page should read like a document, because the product is a document.  */

.cf-home {
  --cf-paper:      #fdfcf9;   /* card ground, a shade above the page */
  --cf-ink:        #091416;   /* near-black, not black */
  --cf-ink-2:      #434849;
  --cf-muted:      #717677;
  --cf-rule:       #e5e2da;
  --cf-ok:         #2d694e;
  --cf-ok-soft:    #aeedcb;
  --cf-bad:        #ba1a1a;
  --cf-max:        800px;
}

#view-search {
  max-width: 800px; margin: 0 auto; padding: 0 16px;
  display: flex; flex-direction: column;
}
@media (min-width: 700px) { #view-search { padding: 0 24px; } }

/* ── type scale, straight from the design ── */
.cf-display {
  font-size: 32px; line-height: 40px; letter-spacing: -.01em; font-weight: 700;
  color: #091416; margin: 0; text-wrap: balance;
}
@media (min-width: 700px) {
  .cf-display { font-size: 48px; line-height: 56px; letter-spacing: -.02em; }
}
.cf-display-sm { font-size: 28px; line-height: 36px; }
@media (min-width: 700px) { .cf-display-sm { font-size: 40px; line-height: 48px; } }
.cf-h2 { font-size: 24px; line-height: 32px; font-weight: 700; color: #091416; margin: 0; text-wrap: balance; }
.cf-h3 { font-size: 18px; line-height: 24px; font-weight: 600; color: #091416; margin: 0; }
.cf-h4 { font-size: 18px; line-height: 24px; font-weight: 600; color: #091416; margin: 0; }
.cf-caps { text-transform: uppercase; letter-spacing: .02em; }
.cf-lede { font-size: 18px; line-height: 28px; color: #434849; margin: 0; max-width: 540px; }
.cf-lede-sm { font-size: 18px; line-height: 28px; color: #434849; margin: 0; }
.cf-sub { font-size: 16px; line-height: 24px; color: #434849; margin: 8px 0 0; }
.cf-strong { font-weight: 700; color: #091416; }
.cf-centre { text-align: center; }
.cf-eyebrow {
  font: 700 12px/16px var(--sans, inherit); letter-spacing: .08em;
  text-transform: uppercase; color: #717677;
}
.cf-source-note {
  font: 500 11px/14px var(--mono); letter-spacing: .02em; color: #717677; margin: 0;
}

/* ── hero ── */
.cf-hero {
  padding: 64px 0 48px; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 24px;
}
.cf-hero .cf-display { max-width: 600px; }

/* ── search: the page's one action ── */
.cf-search-sec { padding-bottom: 64px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cf-search {
  width: 100%; max-width: 600px; background: #fdfcf9;
  border: 1px solid #e5e2da; border-radius: 2px; padding: 8px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 1px 2px rgba(9,20,22,.04);
  transition: border-color .15s, box-shadow .15s;
}
@media (min-width: 640px) { .cf-search { flex-direction: row; } }
.cf-search:focus-within { border-color: #091416; box-shadow: 0 0 0 3px rgba(9,20,22,.07); }
.cf-search-field { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; padding: 0 12px; min-width: 0; }
.cf-search-icon { width: 20px; height: 20px; fill: #717677; flex: none; }
.cf-search-field input {
  width: 100%; height: 40px; border: none; background: transparent; outline: none;
  font-size: 16px; line-height: 24px; color: #091416; padding: 0; min-width: 0;
}
.cf-search-field input::placeholder { color: #717677; }
.cf-run {
  flex: none; background: #091416; color: #fff; border: none; cursor: pointer;
  padding: 0 32px; height: 48px; border-radius: 2px;
  font: 700 12px/16px inherit; letter-spacing: .08em; text-transform: uppercase;
  transition: opacity .15s;
}
.cf-run:hover { opacity: .9; }
.cf-run:active { opacity: .8; }
.cf-run:focus-visible { outline: 2px solid #091416; outline-offset: 3px; }
.cf-run-link { display: inline-flex; align-items: center; text-decoration: none; }
.cf-city { width: 100%; max-width: 600px; display: flex; flex-direction: column; gap: 6px; }
.cf-city input {
  height: 44px; border: 1px solid #e5e2da; border-radius: 2px; background: #fdfcf9;
  padding: 0 12px; font-size: 16px; color: #091416; outline: none;
}
.cf-city input:focus { border-color: #091416; }

/* ── section rhythm: a rule, not a card ── */
.cf-sec { padding: 64px 0; border-top: 1px solid #e5e2da; display: flex; flex-direction: column; gap: 32px; }
.cf-sec-head { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; }

/* ── why this exists ── */
.cf-split { flex-direction: column; gap: 48px; }
@media (min-width: 768px) { .cf-split { flex-direction: row; align-items: flex-start; gap: 48px; } }
.cf-split-head { flex: 0 0 33%; }
.cf-rule { width: 48px; height: 4px; background: #091416; margin-top: 16px; }
.cf-split-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 24px; font-size: 16px; line-height: 24px; color: #434849; }
.cf-split-body p { margin: 0; }
.cf-split-foot { padding-top: 24px; border-top: 1px solid #e5e2da; text-align: center; display: flex; flex-direction: column; gap: 8px; }

/* ── sample cards ── */
.cf-cards { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 700px) { .cf-cards { grid-template-columns: 1fr 1fr; } }
.cf-card {
  position: relative; overflow: hidden; background: #fdfcf9;
  border: 1px solid #e5e2da; border-radius: 2px; padding: 32px 24px;
  display: flex; flex-direction: column; gap: 24px;
}
.cf-card::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; }
.cf-card-ok::before  { background: #2d694e; }
.cf-card-bad::before { background: #ba1a1a; }
.cf-card-head { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #e5e2da; }
.cf-card-icon { width: 32px; height: 32px; flex: none; }
.cf-card-ok  .cf-card-icon { fill: #2d694e; }
.cf-card-bad .cf-card-icon { fill: #ba1a1a; }
.cf-card-body { display: flex; align-items: flex-start; gap: 10px; font-size: 18px; line-height: 28px; }
.cf-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; margin-top: 7px; }
.cf-card-ok  .cf-dot { background: #2d694e; }
.cf-card-bad .cf-dot { background: #ba1a1a; }
.cf-card-ok  .cf-card-body { color: #091416; }
.cf-card-bad .cf-card-body { color: #ba1a1a; }
.cf-card-src {
  margin-top: auto; padding-top: 16px; border-top: 1px solid #e5e2da;
  font: 500 11px/14px var(--mono); letter-spacing: .02em; color: #717677;
}

/* ── how it works ── */
.cf-steps {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr;
  gap: 32px; position: relative;
}
@media (min-width: 768px) {
  .cf-steps { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  /* The rule runs BEHIND the numbered discs and stops short of the outer edges,
     so the three steps read as one sequence rather than three cards. */
  .cf-steps::before {
    content: ""; position: absolute; top: 24px; left: 16%; right: 16%;
    height: 1px; background: #e5e2da; z-index: 0;
  }
}
.cf-step > * { position: relative; z-index: 1; }
.cf-step-n { background: #fbf9f4; }
.cf-step {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px;
  font-size: 16px; line-height: 24px; color: #434849;
}
.cf-step p { margin: 0; }
.cf-step-n {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid #091416;
  background: #fdfcf9; color: #091416; display: flex; align-items: center; justify-content: center;
  font: 700 18px/24px inherit; flex: none;
}

/* ── independence ── */
.cf-indep { align-items: center; text-align: center; gap: 16px; }
.cf-indep-icon { width: 36px; height: 36px; fill: #091416; }
.cf-indep-body {
  max-width: 600px; display: flex; flex-direction: column; gap: 16px;
  font-size: 16px; line-height: 24px; color: #434849;
}
.cf-indep-body p { margin: 0; }
.cf-checks { list-style: none; margin: 0 auto; padding: 0; max-width: 500px; text-align: left; display: flex; flex-direction: column; gap: 16px; }
.cf-checks li { display: flex; align-items: flex-start; gap: 12px; }
.cf-check {
  width: 20px; height: 20px; border-radius: 50%; flex: none; margin-top: 2px;
  background: #aeedcb; position: relative;
}
.cf-check::after {
  content: ""; position: absolute; left: 6px; top: 4px; width: 5px; height: 9px;
  border: solid #2d694e; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ── close + footer ── */
.cf-close { align-items: center; text-align: center; gap: 8px; }
.cf-close .cf-run-link { margin-top: 16px; }
.cf-foot {
  border-top: 1px solid #e5e2da; padding: 32px 0 64px;
  font: 400 13px/20px inherit; color: #717677;
}
.cf-foot p { margin: 0; max-width: 640px; }

/* The design's warm paper ground, scoped to the home view so the report — which
   shares this stylesheet and has its own established ground — is untouched. */
body[data-view="search"] { background: #fbf9f4; }
body[data-view="search"] .topbar { background: #fbf9f4; border-bottom-color: #e5e2da; }