/* ============================================================================
   BORDERLESS COMPLIANCE CHECKER — page stylesheet
   Loaded after brand.css on compliance-checker.html only. brand.css owns the
   shell (ink persuade panel + cream column), the lead form and the reveal-gate
   mechanics (.has-figure / .is-unlocked / [data-locked] blur); everything that
   is specific to the five-question wizard and its two-score report lives here.
   Same tokens, same self-hosted fonts, no new CSP surface.
   ============================================================================ */

/* ---- Tones ---------------------------------------------------------------
   good / warn / bad map onto the design-system success / warning / destructive
   families. The warning primitive is a light yellow, fine as a chip background
   but too faint as a stroke, so the ring/pip colour is a slightly deeper amber. */
.cc-page {
  --cc-good:    hsl(var(--success-emphasis));
  --cc-good-bg: hsl(var(--success-emphasis-subtle));
  --cc-good-fg: hsl(var(--success-foreground));
  --cc-warn:    hsl(40 96% 50%);
  --cc-warn-bg: hsl(var(--warning-subtle));
  --cc-warn-fg: hsl(var(--warning-foreground));
  --cc-bad:     hsl(var(--destructive));
  --cc-bad-bg:  hsl(var(--destructive-subtle));
  --cc-bad-fg:  hsl(var(--destructive-strong));
  --cc-muted:   hsl(var(--foreground-subtle));
  --cc-ink:     hsl(var(--background-inverse));
  --cc-paper:   hsl(var(--foreground-inverse));
  --cc-ease:    cubic-bezier(0.2, 0.7, 0.2, 1);
}
[data-tone="good"] { --cc-tone: var(--cc-good); --cc-tone-bg: var(--cc-good-bg); --cc-tone-fg: var(--cc-good-fg); }
[data-tone="warn"] { --cc-tone: var(--cc-warn); --cc-tone-bg: var(--cc-warn-bg); --cc-tone-fg: var(--cc-warn-fg); }
[data-tone="bad"]  { --cc-tone: var(--cc-bad);  --cc-tone-bg: var(--cc-bad-bg);  --cc-tone-fg: var(--cc-bad-fg); }
[data-tone="muted"] { --cc-tone: var(--cc-muted); --cc-tone-bg: hsl(var(--muted)); --cc-tone-fg: hsl(var(--foreground-muted)); }

/* ---- Motion ---- */
@keyframes cc-in   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cc-spin { to { transform: rotate(360deg); } }
@keyframes cc-pop  { 0% { transform: scale(0.8); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes cc-tick { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }

/* ============================================================================
   LEFT PANEL — the persuasion copy gives way to a step rail once the check
   starts (.cc-started on <main>). On mobile the panel collapses to a slim bar.
   ============================================================================ */
/* The panel's content is one sticky block: on a long result the rail (and the
   wordmark) stay in view while the report scrolls. min-height keeps the
   footnote pinned to the bottom of the shell's minimum height, as on the
   other calculators. */
.cc-page .persuade { display: block; }
.cc-side {
  position: sticky; top: 32px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  min-height: 480px;
}
.cc-mstep { display: none; }

.cc-rail { list-style: none; margin: 0; padding: 0; display: none; flex-direction: column; }
.cc-page.cc-started .cc-rail { display: flex; }
.cc-page.cc-started .persuade-points { display: none; }
.cc-rail li { position: relative; display: flex; gap: 14px; align-items: flex-start; padding-bottom: 24px; }
.cc-rail li:last-child { padding-bottom: 0; }
.cc-rail li::before {
  content: ""; position: absolute; left: 11.5px; top: 28px; bottom: 4px; width: 1px;
  background: hsl(var(--foreground-inverse) / 0.16);
}
.cc-rail li:last-child::before { display: none; }
.cc-rail-dot {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid hsl(var(--foreground-inverse) / 0.35);
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; line-height: 1;
  color: hsl(var(--foreground-inverse) / 0.75);
  transition: background var(--duration-normal), border-color var(--duration-normal), color var(--duration-normal);
}
.cc-rail-dot svg { width: 12px; height: 12px; display: none; }
.cc-rail-txt { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; min-width: 0; }
.cc-rail-txt b { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
.cc-rail-txt small { font-size: 12.5px; line-height: 1.45; opacity: 0.7; }
.cc-rail li[data-state="todo"] .cc-rail-txt { opacity: 0.5; }
.cc-rail li[data-state="current"] .cc-rail-dot { background: hsl(var(--primary)); border-color: hsl(var(--primary)); color: hsl(var(--foreground)); }
.cc-rail li[data-state="current"] .cc-rail-txt small { opacity: 0.85; }
.cc-rail li[data-state="done"] .cc-rail-dot { background: hsl(var(--foreground-inverse)); border-color: hsl(var(--foreground-inverse)); color: hsl(var(--foreground)); }
.cc-rail li[data-state="done"] .cc-rail-dot span { display: none; }
.cc-rail li[data-state="done"] .cc-rail-dot svg { display: block; animation: cc-tick 220ms var(--cc-ease) both; }
.cc-rail li[data-state="done"]::before { background: hsl(var(--foreground-inverse) / 0.45); }

/* ============================================================================
   WIZARD COLUMN
   ============================================================================ */
.cc { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.cc [tabindex="-1"]:focus { outline: none; }
.cc-screen { display: flex; flex-direction: column; gap: 18px; animation: cc-in 280ms var(--cc-ease) both; }
.cc-screen[hidden] { display: none; }
.cc-anim { animation: cc-in 280ms var(--cc-ease) both; }
.cc-anim.is-restarting { animation: none; }

.cc-head { display: flex; flex-direction: column; gap: 10px; }
.cc-h {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 34px; line-height: 1.06; letter-spacing: -0.012em;
}
.cc-qh {
  margin: 0; font-family: var(--font-serif); font-weight: 400;
  font-size: 27px; line-height: 1.14; letter-spacing: -0.008em; text-wrap: balance;
}
.cc-lede { margin: 0; font-size: 15.5px; line-height: 1.55; color: hsl(var(--foreground-muted)); }
.cc-lede b { color: hsl(var(--foreground)); font-weight: 600; }
.cc-sub { margin: 0; font-size: 14.5px; line-height: 1.55; color: hsl(var(--foreground-muted)); }
.cc-fineprint { margin: 0; font-size: 13px; line-height: 1.5; color: hsl(var(--foreground-muted)); }

/* ---- Progress header (company + question steps) ---- */
.cc-top { display: flex; flex-direction: column; gap: 10px; }
.cc-top-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.cc-steplabel, .cc-points {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: hsl(var(--foreground-muted)); white-space: nowrap;
}
.cc-steplabel b { font-weight: 400; color: hsl(var(--foreground)); }
.cc-points { color: hsl(var(--primary-active)); }
.cc-segs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.cc-seg {
  display: block; height: 4px; border-radius: var(--radius-full);
  background: hsl(var(--background-muted));
  transition: background var(--duration-slow) var(--cc-ease);
}
.cc-seg[data-state="done"] { background: hsl(var(--background-inverse)); }
.cc-seg[data-state="current"] { background: hsl(var(--primary-active)); }

/* ---- Intro ---- */
/* Before the check starts the column holds only the intro, so let it float to
   the vertical centre of the card instead of hugging the top. */
.cc-page:not(.cc-started) .cc { flex: 1; justify-content: center; }
.cc-intro { gap: 28px; }
.cc-intro .cc-head { gap: 14px; }
.cc-intro .cc-h { font-size: 40px; max-width: 15ch; }
.cc-intro .cc-lede { font-size: 16px; max-width: 44ch; }
.cc-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cc-cta .btn-ink.auto { padding: 15px 26px; }

/* ---- Company step ---- */
.cc-fields { display: flex; flex-direction: column; gap: 16px; }
.cc-fields label.f { gap: 7px; }
.cc-lab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cc-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: var(--radius-full);
  background: hsl(var(--muted)); color: hsl(var(--foreground-muted));
}
.cc-hint { font-size: 12.5px; line-height: 1.45; font-weight: 400; color: hsl(var(--foreground-muted)); }
.cc-fields label.f input { padding: 12px 14px; border-radius: var(--radius-lg); }
.cc-fields label.f input[aria-invalid="true"] { border-color: hsl(var(--destructive)); box-shadow: 0 0 0 3px hsl(var(--destructive) / 0.15); }
.cc-err { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; color: hsl(var(--destructive)); }

.cc-more { border-top: 1px solid hsl(var(--border-muted)); padding-top: 14px; font-size: 14px; }
.cc-more summary {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 13.5px; color: hsl(var(--foreground));
}
.cc-more summary::-webkit-details-marker { display: none; }
.cc-more summary::before {
  content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg) translateY(-1px); transition: transform var(--duration-normal) var(--cc-ease); margin-left: 2px;
}
.cc-more[open] summary::before { transform: rotate(45deg) translateY(-2px); }
.cc-more summary:hover { color: hsl(var(--primary-active)); }
.cc-why {
  list-style: none; margin: 12px 0 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px;
  background: hsl(var(--primary-subtle) / 0.7); border-radius: var(--radius-lg);
}
.cc-why li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: hsl(var(--foreground)); }
.cc-why li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--primary-active)); }
.cc-why b { font-weight: 600; }

/* ---- Navigation row ---- */
.cc-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 2px; }
.cc .cc-nav .btn-link {
  align-self: auto; margin: 0; padding: 10px 0; text-decoration: none; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-sm);
  transition: color var(--duration-fast);
}
.cc .cc-nav .btn-link:hover { color: hsl(var(--foreground)); text-decoration: underline; }
.cc .cc-nav .btn-link:focus-visible { outline: 2px solid hsl(var(--primary-active)); outline-offset: 3px; }
.cc-kbd-hint { display: none; font-size: 12.5px; color: hsl(var(--foreground-muted)); }
.cc-kbd-hint kbd {
  font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border-radius: var(--radius-sm);
  border: 1px solid hsl(var(--border)); background: hsl(var(--card)); color: hsl(var(--foreground));
  box-shadow: 0 1px 0 hsl(var(--border));
}
@media (hover: hover) and (min-width: 700px) { .cc-kbd-hint { display: block; } }

/* ---- Answer options: lettered cards ---- */
.cc-opts { display: flex; flex-direction: column; gap: 10px; }
.cc-opt {
  display: flex; align-items: flex-start; gap: 14px; width: 100%; text-align: left;
  -webkit-appearance: none; appearance: none;
  padding: 15px 16px; border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border)); background: hsl(var(--card));
  color: hsl(var(--foreground)); font-family: var(--font-sans); cursor: pointer;
  transition: border-color var(--duration-fast), background var(--duration-fast), box-shadow var(--duration-fast);
}
.cc-opt:hover { border-color: hsl(var(--primary-hover)); background: hsl(var(--primary-subtle) / 0.45); }
.cc-opt:focus-visible { outline: 2px solid hsl(var(--primary-active)); outline-offset: 2px; }
.cc-opt[aria-checked="true"] {
  border-color: hsl(var(--primary-active)); background: hsl(var(--primary-subtle));
  box-shadow: inset 0 0 0 1px hsl(var(--primary-active));
}
.cc-key {
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px;
  border: 1.5px solid hsl(var(--border)); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 12px; line-height: 1; color: hsl(var(--foreground-muted));
  transition: border-color var(--duration-fast), background var(--duration-fast), color var(--duration-fast);
}
.cc-opt:hover .cc-key { border-color: hsl(var(--primary-active)); color: hsl(var(--foreground)); }
.cc-opt[aria-checked="true"] .cc-key {
  background: hsl(var(--background-inverse)); border-color: hsl(var(--background-inverse));
  color: hsl(var(--foreground-inverse)); animation: cc-pop 320ms var(--cc-ease);
}
.cc-opt-label { font-size: 14.5px; font-weight: 500; line-height: 1.5; padding-top: 3px; }

/* ---- Scoring bridge ---- */
.cc-scoring { display: flex; flex-direction: column; align-items: center; gap: 24px; padding: 44px 8px 40px; text-align: center; }
.cc-scoring-h { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -0.008em; }
.cc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; text-align: left; }
.cc-steps li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: hsl(var(--foreground-muted)); transition: color var(--duration-normal); }
.cc-steps li[data-state="active"], .cc-steps li[data-state="done"] { color: hsl(var(--foreground)); }
.cc-step-ic {
  flex: none; width: 22px; height: 22px; border-radius: 50%; position: relative;
  border: 1.5px solid hsl(var(--border)); display: grid; place-items: center;
}
.cc-steps li[data-state="active"] .cc-step-ic {
  border-color: hsl(var(--border)); border-top-color: hsl(var(--primary-active)); animation: cc-spin 0.8s linear infinite;
}
.cc-steps li[data-state="done"] .cc-step-ic { background: var(--cc-good); border-color: var(--cc-good); }
.cc-steps li[data-state="done"] .cc-step-ic::after {
  content: ""; width: 5px; height: 9px; margin-top: -2px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
  animation: cc-tick 200ms var(--cc-ease) both;
}
.cc-spinner {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid hsl(var(--border)); border-top-color: hsl(var(--primary-active));
  animation: cc-spin 0.8s linear infinite;
}

/* ============================================================================
   RESULT — a report, not a form
   ============================================================================ */
/* Full-width result: the ink panel goes, the card narrows to a comfortable
   reading measure, and a slim bar carries the wordmark. */
.cc-page .calc-shell { transition: max-width 320ms var(--cc-ease); }
.cc-page.cc-full .persuade { display: none !important; }
.cc-page.cc-full .calc-shell { max-width: 800px; }
.cc-page.cc-full .calc-main { padding: 30px 40px 40px; }
.cc-result-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-bottom: 18px; border-bottom: 1px solid hsl(var(--border-muted));
}
.cc-result-wordmark { height: 20px; width: auto; }
.cc-result-bar-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--foreground-muted)); white-space: nowrap; }
.cc-result > [data-calc] { display: flex; flex-direction: column; gap: 22px; }

/* Completion strip: sharp (not [data-locked]) so the visitor sees the work is
   done before they're asked for details; gone once revealed. */
.cc-done { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-done:empty { display: none; }
.cc-done-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 500; padding: 6px 11px 6px 9px; border-radius: var(--radius-full);
  background: var(--cc-good-bg); color: var(--cc-good-fg);
}
.cc-done-chip[data-tone="muted"] { background: hsl(var(--muted)); color: hsl(var(--foreground-muted)); }
.cc-done-chip svg { width: 13px; height: 13px; flex: none; }
[data-reveal-gate].is-unlocked .cc-done, .bl-ungated .cc-done { display: none; }

/* Gate card tuning (structure + behaviour come from brand.css / lead.js) */
.cc .reveal-gate { padding: 24px 24px 22px; box-shadow: var(--shadow-md); }
.cc .gate-head { gap: 8px; }
.cc .gate-head .eyebrow { color: hsl(var(--primary-active)); }
.cc .reveal-gate .gate-h { font-size: 25px; letter-spacing: -0.008em; }
.cc .gate-sub { font-size: 14.5px; }
.cc .lead-form { gap: 14px; }
.cc .lead-form .btn-ink { margin-top: 2px; }
.cc .seeker-note { box-shadow: var(--shadow-sm); }

/* Verdict hero */
.cc-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: hsl(var(--background-inverse)); color: hsl(var(--foreground-inverse));
  border-radius: var(--radius-xl); padding: 26px 26px 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.cc-hero::before {
  content: ""; position: absolute; z-index: -1; right: -70px; top: -90px; width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--cc-tone), transparent);
  opacity: 0.34; pointer-events: none;
}
.cc-hero-eyebrow { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.cc-hero-h { margin: 2px 0 0; font-family: var(--font-serif); font-weight: 400; font-size: 32px; line-height: 1.08; letter-spacing: -0.012em; text-wrap: balance; }
.cc-hero-text { margin: 0; font-size: 14.5px; line-height: 1.55; opacity: 0.86; max-width: 56ch; }
.cc-hero-basis { margin: 6px 0 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; opacity: 0.6; }

/* Band chip */
.cc-band {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 4px 10px 4px 8px; border-radius: var(--radius-full);
  background: var(--cc-tone-bg); color: var(--cc-tone-fg);
}
.cc-band::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cc-tone); flex: none; }
.cc-band.sm { font-size: 10px; padding: 3px 8px 3px 7px; }

/* Two scores, one card: ring gauge + what it measures, a row each */
.cc-scores {
  display: flex; flex-direction: column;
  border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); background: hsl(var(--card)); overflow: hidden;
}
.cc-sc { display: flex; gap: 18px; align-items: center; min-width: 0; padding: 18px 20px 18px 16px; border-top: 1px solid hsl(var(--border-muted)); }
.cc-sc:first-child { border-top: none; }
.cc-ring-wrap { position: relative; flex: none; width: 96px; height: 96px; }
.cc-ring { width: 100%; height: 100%; transform: rotate(-90deg); display: block; }
.cc-ring circle { fill: none; stroke-width: 9; }
.cc-ring-bg { stroke: hsl(var(--background-muted)); }
.cc-ring-fg { stroke: var(--cc-tone); stroke-linecap: round; transition: stroke-dashoffset 1100ms var(--cc-ease); }
.cc-ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.cc-ring-num b { font-family: var(--font-serif); font-weight: 400; font-size: 32px; letter-spacing: -0.01em; }
.cc-ring-num small { margin-top: 3px; font-size: 10.5px; color: hsl(var(--foreground-muted)); font-family: var(--font-mono); letter-spacing: 0.04em; }
.cc-ring-na { font-family: var(--font-serif); font-size: 26px; color: hsl(var(--foreground-muted)); }
.cc-sc-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.cc-sc-eyebrow { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: hsl(var(--foreground-muted)); }
.cc-sc-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.cc-sc-title { font-size: 16.5px; font-weight: 700; line-height: 1.25; }
.cc-sc-sub { margin: 0; font-size: 13px; line-height: 1.5; color: hsl(var(--foreground-muted)); }
.cc-scores-foot {
  margin: 0; padding: 10px 18px 11px; border-top: 1px solid hsl(var(--border-muted));
  font-size: 12.5px; line-height: 1.4; color: hsl(var(--foreground-muted)); background: hsl(var(--muted) / 0.45);
}
.cc-sc-pending { display: flex; align-items: flex-start; gap: 9px; font-size: 13.5px; line-height: 1.5; color: hsl(var(--foreground)); }
.cc-sc-pending .cc-spinner { margin-top: 2px; }

/* Report sections */
.cc-report { display: flex; flex-direction: column; gap: 24px; }
.cc-section { display: flex; flex-direction: column; gap: 14px; }
.cc-section-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; }
.cc-section-txt { display: flex; flex-direction: column; gap: 5px; flex: 1 1 300px; min-width: 0; }
.cc-block-h { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: hsl(var(--primary-active)); }
.cc-section-title { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 22px; line-height: 1.18; letter-spacing: -0.006em; text-wrap: balance; }
.cc-section-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: hsl(var(--foreground-muted)); max-width: 60ch; }
.cc-section-meta {
  display: inline-flex; align-items: center; gap: 4px; flex: none; margin-top: 22px;
  font-size: 12.5px; color: hsl(var(--foreground-muted)); white-space: nowrap;
  padding: 5px 11px; border-radius: var(--radius-full); background: hsl(var(--muted));
}
.cc-section-meta b { color: hsl(var(--foreground)); font-weight: 700; }

.cc-note {
  display: block;
  padding: 14px 16px; border-radius: var(--radius-lg); font-size: 14px; line-height: 1.5;
  background: var(--cc-tone-bg); color: var(--cc-tone-fg);
}
.cc-note-h { display: block; font-weight: 700; margin-bottom: 4px; }
.cc-note b { font-weight: 600; }
.cc-note[data-tone="muted"] { color: hsl(var(--foreground)); }

/* Score 1 detail: all five areas with their status */
.cc-areas { list-style: none; margin: 0; padding: 0; border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); background: hsl(var(--card)); overflow: hidden; }
.cc-area { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-top: 1px solid hsl(var(--border-muted)); }
.cc-area:first-child { border-top: none; }
.cc-area-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-pip { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--cc-tone); box-shadow: 0 0 0 3px var(--cc-tone-bg); }
.cc-area-name { flex: 1; font-size: 14.5px; font-weight: 600; line-height: 1.3; min-width: 0; }
.cc-area-meta { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cc-area-pts { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: hsl(var(--foreground-muted)); white-space: nowrap; }
.cc-area-text { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.55; color: hsl(var(--foreground)); }

/* Score 2 detail: the Companies House record */
.cc-rec { border: 1px solid hsl(var(--border)); border-radius: var(--radius-xl); background: hsl(var(--card)); padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 14px; }
.cc-rec-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.cc-rec-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cc-rec-name { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.cc-rec-no { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: hsl(var(--foreground-muted)); }
.cc-rec-count { display: flex; flex-direction: column; align-items: flex-end; text-align: right; line-height: 1; }
.cc-rec-count b { font-family: var(--font-serif); font-weight: 400; font-size: 28px; letter-spacing: -0.01em; }
.cc-rec-count span { margin-top: 4px; font-size: 12px; color: hsl(var(--foreground-muted)); }
.cc-flags { display: flex; flex-wrap: wrap; gap: 8px; }
.cc-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cc-reasons li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.5; color: hsl(var(--foreground)); }
.cc-reasons li::before { content: ""; position: absolute; left: 1px; top: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--cc-tone); }

.cc-timeline { list-style: none; margin: 0; padding: 4px 0 0; border-top: 1px solid hsl(var(--border-muted)); }
.cc-ev { display: grid; grid-template-columns: 84px 18px 1fr; column-gap: 10px; align-items: start; padding: 9px 0 9px; }
.cc-ev-date { font-family: var(--font-mono); font-size: 12px; color: hsl(var(--foreground-muted)); padding-top: 2px; white-space: nowrap; }
.cc-ev-dot { position: relative; height: 100%; min-height: 18px; }
.cc-ev-dot::before { content: ""; position: absolute; left: 5px; top: 5px; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--foreground-subtle)); box-shadow: 0 0 0 2px hsl(var(--card)); }
.cc-ev-dot::after { content: ""; position: absolute; left: 8.5px; top: 15px; bottom: -14px; width: 1px; background: hsl(var(--border)); }
.cc-ev:last-child .cc-ev-dot::after { display: none; }
.cc-ev.flagged .cc-ev-dot::before { background: var(--cc-bad); }
.cc-ev-body { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; min-width: 0; }
.cc-ev-label { flex: 1 1 200px; font-size: 13.5px; line-height: 1.5; min-width: 0; }
.cc-ev.flagged .cc-ev-label { font-weight: 600; }
.cc-ev-tags { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 1px; }
.cc-ev-tags:empty { display: none; }
.cc-ev-form {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 7px; border-radius: var(--radius-sm); border: 1px solid hsl(var(--border)); color: hsl(var(--foreground-muted));
}
.cc-ev.before .cc-ev-label, .cc-ev.before .cc-ev-date { color: hsl(var(--foreground-muted)); }
.cc-timeline.is-collapsed .cc-ev:nth-child(n+7) { display: none; }
.cc-timeline.is-collapsed .cc-ev:nth-child(6) .cc-ev-dot::after { display: none; }
.cc .cc-more-btn { align-self: flex-start; padding: 0; font-size: 13.5px; }
.cc-rec-foot { margin: 0; font-size: 13px; color: hsl(var(--foreground-muted)); }

/* Amend-and-retry the register lookup */
.cc-retry { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; border: 1px dashed hsl(var(--border)); border-radius: var(--radius-lg); }
.cc-retry label.f { gap: 8px; }
.cc-retry-row { display: flex; gap: 10px; }
.cc-retry-row input { flex: 1; min-width: 0; }
.cc-retry-row .btn-ink.auto { white-space: nowrap; padding: 12px 18px; }

/* Actions */
.cc .actions { flex-wrap: wrap; gap: 12px 20px; }
.cc .actions .btn-ink { flex: 1 1 240px; }
.cc-links { display: flex; align-items: center; gap: 18px; }
.cc .actions .btn-link { padding: 0; }
.cc .disclaimer { padding-top: 2px; }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */
@media (max-width: 880px) {
  .cc-rail { display: none !important; }
  /* Once the check has started, the ink panel becomes a slim bar: wordmark +
     where you are. The heading and points step out of the way. */
  .cc-side { position: static; min-height: 0; gap: 18px; }
  .cc-page.cc-started .persuade { padding: 15px 24px; }
  .cc-page.cc-started .cc-side { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .cc-page.cc-started .persuade .wordmark { height: 18px; align-self: center; }
  .cc-page.cc-started .persuade-top { display: none; }
  .cc-page.cc-started .cc-mstep {
    display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em;
    text-transform: uppercase; color: hsl(var(--foreground-inverse) / 0.75); white-space: nowrap;
  }
  .cc-page.cc-full .calc-main { padding: 22px 20px 32px; }
  .cc-hide-sm { display: none; }
  /* Stacked layout: keep the intro at the top rather than floating mid-screen. */
  .cc-page:not(.cc-started) .cc { justify-content: flex-start; }
  .cc-intro { gap: 24px; }
  .cc-h, .cc-intro .cc-h { font-size: 32px; }
  .cc-qh { font-size: 24px; }
  .cc-hero { padding: 22px 20px 20px; }
  .cc-hero-h { font-size: 28px; }
}
@media (max-width: 600px) {
  .cc-sc { gap: 14px; padding: 16px 16px 16px 14px; }
  .cc-area-meta { flex-basis: 100%; padding-left: 20px; margin-left: 0; }
  .cc-section-meta { margin-top: 0; }
  .cc-section-title { font-size: 20px; }
  .cc .actions { flex-direction: column; align-items: stretch; }
  .cc .actions .btn-ink { flex: 0 0 auto; }
  .cc-links { justify-content: center; }
  .cc-cta { flex-direction: column; align-items: stretch; }
  .cc-cta .btn-ink.auto { width: 100%; }
  .cc-cta .cc-fineprint { text-align: center; }
  .cc-nav .btn-ink.auto { flex: 1; }
  .cc-ev { grid-template-columns: 18px 1fr; }
  .cc-ev-date { grid-column: 2; order: -1; padding: 0 0 2px; }
  .cc-ev-dot { grid-column: 1; grid-row: 1 / span 2; }
  .cc-ev-body { grid-column: 2; }
  .cc-rec-count { align-items: flex-start; text-align: left; }
  .cc-area-text { padding-left: 0; }
}
@media (max-width: 460px) {
  .cc-h, .cc-intro .cc-h { font-size: 29px; }
  .cc-ring-wrap { width: 84px; height: 84px; }
  .cc-ring-num b { font-size: 28px; }
}

/* Motion off when the visitor asks for it */
@media (prefers-reduced-motion: reduce) {
  .cc-screen, .cc-anim, .cc-key, .cc-rail-dot svg, .cc-step-ic::after { animation: none !important; }
  .cc-ring-fg, .cc-seg, .cc-rail-dot, .cc-opt { transition: none !important; }
  .cc-steps li[data-state="active"] .cc-step-ic, .cc-spinner { animation-duration: 1.6s; }
}