/* ===========================================================================
   Hardy IT — component and layout styles
   Ported from the approved mockup (brief-mockup-conversion.md). Everything
   references tokens.css (FR-C1.2). Inline styles from the mockup HTML are
   extracted into the classes at the end of this file (FR-C1.3). No web fonts
   (FR-C5.4) - the token --font is a system stack.
   =========================================================================== */

/* --- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-700);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4 { color: var(--ink-900); margin: 0 0 var(--sp-4); font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); line-height: 1.15; }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -.01em; }
p  { margin: 0 0 var(--sp-4); }
a  { color: var(--teal-600); text-decoration: none; }
a:hover { color: var(--teal-700); text-decoration: underline; }
img { max-width: 100%; display: block; }
/* Focus ring suppressed at Doug's request. Note for whoever reads this next: this also removes
   the browser's default ring, so keyboard users get no visible indication of where they are on
   the page (WCAG 2.4.7). The teal ring that used to live here only ever appeared for keyboard
   navigation - clicking a button or link with a mouse never triggered it. To restore:
   :focus-visible { outline: 3px solid var(--teal-400); outline-offset: 2px; border-radius: 4px; }
   The .input:focus rule further down keeps its own teal glow, so form fields still indicate focus. */
:focus-visible { outline: none; }

/* FR-C5.5 - anchored headings clear the sticky header on deep links. */
:target, [id] { scroll-margin-top: 92px; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--sp-5); }
.section   { padding: var(--sp-9) 0; }
.section--tight { padding: var(--sp-8) 0; }
.measure { max-width: 62ch; }
.center { text-align: center; }
.center .measure { margin-inline: auto; }
.stack > * + * { margin-top: var(--sp-4); }

/* --- Skip link ----------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--teal-600); color: #fff; padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

/* --- Eyebrow / pill ------------------------------------------------------ */
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--teal-700);
  background: var(--teal-50); border: 1px solid var(--teal-100);
  padding: 7px 14px; border-radius: var(--r-pill); margin-bottom: var(--sp-4);
}
.eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime-500);
}
.eyebrow--dark {
  color: var(--teal-300); background: rgba(18,165,160,.14);
  border-color: rgba(79,199,193,.28);
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font: inherit; font-weight: 700; font-size: var(--fs-sm);
  padding: 14px 26px; border-radius: var(--r-pill);
  border: 1.5px solid transparent; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--teal-500); color: #fff; }
.btn--primary:hover { background: var(--teal-600); color: #fff; }
.btn--accent { background: var(--lime-500); color: var(--ink-on-accent); }
.btn--accent:hover { background: var(--lime-600); color: var(--ink-on-accent); }
.btn--ghost { background: transparent; color: var(--ink-900); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--teal-400); color: var(--teal-700); background: var(--teal-50); }
.btn--ghost-dark { background: transparent; color: var(--dk-text); border-color: rgba(255,255,255,.24); }
.btn--ghost-dark:hover { background: rgba(255,255,255,.08); color: #fff; }
.btn--lg { padding: 17px 32px; font-size: 1rem; }
.btn--block { width: 100%; }
/* CTA-band buttons - extracted from the mockup's inline styles on .cta-band .btn. */
.btn--on-gradient { background: var(--ink-on-gradient); color: #fff; }
.btn--on-gradient:hover { background: var(--ink-on-gradient); color: #fff; opacity: .92; }
.btn--on-gradient-invert { background: #fff; color: var(--ink-on-gradient); }
.btn--on-gradient-invert:hover { background: #fff; color: var(--ink-on-gradient); opacity: .92; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: var(--sp-6);
  min-height: 78px;
}
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 38px; width: auto; }
.site-nav { display: flex; gap: var(--sp-5); margin-left: auto; align-items: center; }
.site-nav > a,
.nav-item > a {
  color: var(--ink-700); font-weight: 600; font-size: var(--fs-sm);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.site-nav > a:hover,
.nav-item > a:hover { color: var(--teal-600); text-decoration: none; border-color: var(--teal-400); }
.site-nav a[aria-current] { color: var(--teal-700); border-color: var(--teal-500); }

/* --- Nav dropdowns (CSS-only, hover + focus-within) ---------------------- */
.nav-item { position: relative; display: flex; align-items: center; }
.has-dropdown > a::after {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.dropdown {
  display: none; position: absolute; top: 100%; left: 0;
  min-width: 230px; margin: 0; padding: var(--sp-2);
  list-style: none; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-md);
  z-index: 60;
}
.nav-item:hover > .dropdown,
.nav-item:focus-within > .dropdown { display: block; }
.dropdown a {
  display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-sm);
  border-bottom: 0; color: var(--ink-700); font-weight: 600; font-size: var(--fs-sm);
}
.dropdown a:hover { background: var(--teal-50); color: var(--teal-700); text-decoration: none; }
.header-actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: var(--sp-5); }
.header-phone { font-weight: 700; color: var(--ink-900); font-size: var(--fs-sm); }
.header-phone:hover { color: var(--teal-600); text-decoration: none; }

/* --- Mobile nav (FR-C5.2 - the only JS in this brief) -------------------- */
.nav-toggle {
  display: none; margin-left: auto;
  background: transparent; border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: 8px; cursor: pointer; color: var(--ink-900);
}
.nav-toggle svg { display: block; }

/* --- Hero: light --------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  padding: var(--sp-9) 0 var(--sp-8);
  background:
    radial-gradient(900px 420px at 88% 8%, var(--teal-50), transparent 62%),
    radial-gradient(700px 380px at 4% 96%, var(--lime-50), transparent 60%),
    var(--surface);
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(12,22,24,.055) 1px, transparent 1px);
  background-size: 22px 22px; pointer-events: none;
}
.hero__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); align-items: center; }
.hero h1 { font-size: var(--fs-display); }
.hero__lead { font-size: 1.12rem; color: var(--ink-500); max-width: 52ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-6) 0 var(--sp-7); }
.grad-text {
  background: var(--brand-gradient); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}

/* --- Stat row ------------------------------------------------------------ */
.stats { display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.stat { padding-right: var(--sp-6); border-right: 1px solid var(--line); }
.stat:last-child { border-right: 0; padding-right: 0; }
.stat__n { font-size: 1.85rem; font-weight: 800; color: var(--ink-900); line-height: 1.1; letter-spacing: -.02em; }
.stat__l { font-size: var(--fs-sm); color: var(--ink-500); }
.band-dark .stat__n { color: #fff; }

/* --- Hero visual composite ----------------------------------------------- */
.hero-visual { display: grid; gap: var(--sp-4); }
.vis-card {
  border-radius: var(--r-xl); box-shadow: var(--shadow-lg);
  border: 1px solid var(--line); background: var(--surface);
  padding: var(--sp-5); position: relative;
}
.vis-card--dark {
  background: linear-gradient(150deg, var(--dk-bg-2), var(--dk-bg));
  border-color: rgba(255,255,255,.10); color: var(--dk-text);
}
.vis-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.vis-score { display: flex; align-items: center; gap: var(--sp-4); }
.score-ring {
  --v: 72;
  width: 92px; height: 92px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--lime-500) calc(var(--v) * 1%), rgba(255,255,255,.10) 0);
  display: grid; place-items: center;
}
.score-ring__inner {
  width: 72px; height: 72px; border-radius: 50%; background: var(--dk-bg);
  display: grid; place-items: center; line-height: 1;
}
.score-ring__n { font-size: 1.6rem; font-weight: 800; color: #fff; }
.vis-list { list-style: none; margin: 0; padding: 0; font-size: var(--fs-sm); }
.vis-list li {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,.08);
}
.vis-list li:last-child { border-bottom: 0; }
.vis-list span:last-child { margin-left: auto; }
.mini-metric__n { font-size: 1.5rem; font-weight: 800; color: var(--ink-900); }
.mini-metric__l { font-size: var(--fs-xs); color: var(--ink-500); }

/* --- Trust strip --------------------------------------------------------- */
.trust {
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--surface-2); padding: var(--sp-5) 0;
}
.trust__row { display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: center; justify-content: center; }
.trust__item {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-500);
}
.trust__item svg { color: var(--teal-500); flex: 0 0 auto; }

/* --- Section heading ----------------------------------------------------- */
.sec-head { max-width: 60ch; margin-bottom: var(--sp-7); }
.sec-head.center { margin-inline: auto; }
.sec-head p { color: var(--ink-500); margin-bottom: 0; }

/* --- Cards --------------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.card-grid--tight { gap: var(--sp-4); }
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--sp-6);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: var(--teal-300); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card h3 { margin-bottom: var(--sp-2); }
.card p { color: var(--ink-500); font-size: var(--fs-sm); margin-bottom: var(--sp-4); }
.card__icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: grid; place-items: center; margin-bottom: var(--sp-5);
  background: var(--teal-50); color: var(--teal-600);
}
.card__icon--lime { background: var(--lime-50); color: var(--lime-700); }
.card__icon--inline { margin-bottom: 0; flex: 0 0 auto; }
.card__link { font-weight: 700; font-size: var(--fs-sm); display: inline-flex; align-items: center; gap: 6px; }
.card--row { display: flex; gap: var(--sp-4); align-items: flex-start; }
.card--row h3 { margin-bottom: 6px; }
.tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.tag {
  font-size: var(--fs-xs); font-weight: 600; color: var(--ink-500);
  border: 1px solid var(--line); border-radius: var(--r-pill); padding: 5px 12px;
}

/* --- Dark band ----------------------------------------------------------- */
.band-dark {
  position: relative; overflow: hidden; color: var(--dk-text);
  background:
    radial-gradient(900px 480px at 8% 110%, rgba(141,198,63,.20), transparent 62%),
    radial-gradient(900px 520px at 92% -10%, rgba(18,165,160,.30), transparent 62%),
    var(--dk-bg);
}
.band-dark::before {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 24px 24px; pointer-events: none;
}
.band-dark > * { position: relative; }
.band-dark h1, .band-dark h2, .band-dark h3 { color: #fff; }
.band-dark p { color: var(--dk-text-2); }
.band-dark strong { color: #fff; }
.card--dark {
  background: var(--dk-card); border: 1px solid var(--dk-line);
  border-radius: var(--r-lg); padding: var(--sp-6);
}
.card--dark:hover { border-color: rgba(79,199,193,.4); box-shadow: none; }
.card--dark h3 { color: #fff; }
.card--dark p { color: var(--dk-text-2); }
.card--dark .card__icon { background: rgba(18,165,160,.16); color: var(--teal-300); }

/* --- Split feature ------------------------------------------------------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); align-items: center; }
.split--top { align-items: start; }
.check-list { list-style: none; margin: 0 0 var(--sp-6); padding: 0; }
.check-list li { display: flex; gap: var(--sp-3); padding: 9px 0; align-items: flex-start; }
.check-list svg { flex: 0 0 auto; margin-top: 3px; color: var(--lime-500); }

/* --- Breadcrumb ---------------------------------------------------------- */
.crumbs { font-size: var(--fs-sm); color: var(--dk-muted); display: flex; gap: var(--sp-2); align-items: center; }
.crumbs a { color: var(--dk-text-2); }
.crumbs span[aria-current] { color: var(--teal-300); }

/* --- Forms --------------------------------------------------------------- */
.field { margin-bottom: var(--sp-5); }
.field > label { display: block; font-weight: 700; font-size: var(--fs-sm); margin-bottom: var(--sp-2); color: var(--ink-900); }
.field__hint { font-size: var(--fs-xs); color: var(--ink-400); margin-top: 6px; }
.input {
  width: 100%; font: inherit; font-size: 1rem;
  padding: 14px 16px; border-radius: var(--r-md);
  border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink-900);
  transition: border-color .15s, background .15s;
}
.input::placeholder { color: var(--ink-400); }
.input:focus { border-color: var(--teal-400); background: var(--surface); outline: none; box-shadow: 0 0 0 4px rgba(18,165,160,.14); }
.input--error { border-color: var(--sev-red-text); background: var(--sev-red-bg); }
.field__error { color: var(--sev-red-text); font-size: var(--fs-xs); font-weight: 600; margin-top: 6px; display: flex; gap: 6px; align-items: center; }
.checkline { display: flex; gap: var(--sp-3); align-items: flex-start; }
.checkline input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--teal-500); flex: 0 0 auto; }
.checkline label { font-size: var(--fs-sm); color: var(--ink-700); }
.honeypot { position: absolute; left: -9999px; }

.form-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: var(--sp-7); box-shadow: var(--shadow-lg);
}

/* Blazor EditForm emits .valid/.invalid on inputs and .validation-message on
   messages - map them onto the mockup's field styling so the built forms match. */
.input.invalid { border-color: var(--sev-red-text); background: var(--sev-red-bg); }
.validation-message { color: var(--sev-red-text); font-size: var(--fs-xs); font-weight: 600; margin-top: 6px; display: block; }

/* --- Severity badge ------------------------------------------------------ */
.sev {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--fs-xs); font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 12px 5px 9px; border-radius: var(--r-pill); border: 1px solid;
}
.sev svg { flex: 0 0 auto; }
.sev--red   { background: var(--sev-red-bg);   color: var(--sev-red-text);   border-color: var(--sev-red-line); }
.sev--amber { background: var(--sev-amber-bg); color: var(--sev-amber-text); border-color: var(--sev-amber-line); }
.sev--green { background: var(--sev-green-bg); color: var(--sev-green-text); border-color: var(--sev-green-line); }
.sev--info  { background: var(--sev-info-bg);  color: var(--sev-info-text);  border-color: var(--sev-info-line); }
.band-dark .sev--red   { background: var(--sev-red-bg-dk);   color: var(--sev-red-text-dk);   border-color: var(--sev-red-line-dk); }
.band-dark .sev--amber { background: var(--sev-amber-bg-dk); color: var(--sev-amber-text-dk); border-color: var(--sev-amber-line-dk); }
.band-dark .sev--green { background: var(--sev-green-bg-dk); color: var(--sev-green-text-dk); border-color: var(--sev-green-line-dk); }
.band-dark .sev--info  { background: var(--sev-info-bg-dk);  color: var(--sev-info-text-dk);  border-color: var(--sev-info-line-dk); }

/* --- Finding ------------------------------------------------------------- */
.finding {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); padding: var(--sp-5) var(--sp-6);
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-4) var(--sp-5);
  align-items: start; margin-bottom: var(--sp-4);
}
.finding__head { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap; }
.finding__title { font-size: 1.05rem; font-weight: 800; color: var(--ink-900); letter-spacing: -.01em; }
.finding__body { grid-column: 1 / -1; }
.finding__label { font-size: var(--fs-xs); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-400); margin-bottom: 3px; }
.finding__label + .finding__label, .finding__fix + .finding__label { margin-top: var(--sp-4); }
.finding__obs {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .85rem; background: var(--surface-3); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 8px 12px; margin-bottom: var(--sp-4);
  word-break: break-word; color: var(--ink-700);
}
.finding__fix { font-size: var(--fs-sm); color: var(--ink-500); margin: 0; }
.finding--red   { border-left: 4px solid var(--sev-red-text); }
.finding--amber { border-left: 4px solid var(--sev-amber-text); }
.finding--green { border-left: 4px solid var(--sev-green-text); }

/* --- Score panel --------------------------------------------------------- */
.score-panel { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-7); align-items: center; }
.score-big {
  --v: 58;
  width: 168px; height: 168px; border-radius: 50%; flex: 0 0 auto;
  background: conic-gradient(var(--sev-amber-text-dk) calc(var(--v) * 1%), rgba(255,255,255,.10) 0);
  display: grid; place-items: center;
}
.score-big__inner {
  width: 136px; height: 136px; border-radius: 50%; background: var(--dk-bg);
  display: grid; place-items: center; text-align: center; line-height: 1.15;
}
.score-big__n { font-size: 3rem; font-weight: 800; color: #fff; letter-spacing: -.03em; }
.score-big__l { font-size: var(--fs-xs); color: var(--dk-muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.tally { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-5); }
.tally__item {
  display: flex; align-items: center; gap: var(--sp-3);
  border: 1px solid var(--dk-line); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-5); background: rgba(255,255,255,.04);
}
.tally__n { font-size: 1.5rem; font-weight: 800; color: #fff; line-height: 1; }
.tally__l { font-size: var(--fs-xs); color: var(--dk-text-2); }

/* --- Progress ------------------------------------------------------------ */
.progress-card { max-width: 620px; margin: 0 auto; text-align: center; }
.progress-bar { height: 8px; border-radius: var(--r-pill); background: rgba(255,255,255,.12); overflow: hidden; margin: var(--sp-5) 0 var(--sp-4); }
.progress-bar__fill { height: 100%; width: 62%; border-radius: var(--r-pill); background: var(--brand-gradient); }
.progress-steps { list-style: none; margin: 0; padding: 0; text-align: left; max-width: 340px; margin-inline: auto; }
.progress-steps li { display: flex; align-items: center; gap: var(--sp-3); padding: 7px 0; font-size: var(--fs-sm); color: var(--dk-text-2); }
.progress-steps li[data-state="done"] { color: var(--sev-green-text-dk); }
.progress-steps li[data-state="active"] { color: #fff; font-weight: 700; }

/* --- Callout ------------------------------------------------------------- */
.callout {
  border: 1px solid var(--teal-100); background: var(--teal-50);
  border-left: 4px solid var(--teal-500);
  border-radius: var(--r-md); padding: var(--sp-5); font-size: var(--fs-sm);
}
.callout p:last-child { margin-bottom: 0; }
.callout--dark { background: rgba(18,165,160,.10); border-color: rgba(79,199,193,.26); border-left-color: var(--teal-400); color: var(--dk-text-2); }

/* --- CTA band ------------------------------------------------------------ */
.cta-band {
  border-radius: var(--r-xl); padding: var(--sp-8);
  background: var(--brand-gradient); color: var(--ink-on-gradient); text-align: center;
}
.cta-band h2 { color: var(--ink-on-gradient); }
.cta-band p { color: rgba(6,32,31,.78); max-width: 56ch; margin-inline: auto; }
.cta-band__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-6); }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--dk-bg); color: var(--dk-text-2); padding: var(--sp-8) 0 var(--sp-5); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--sp-7); }
.site-footer h4 { color: #fff; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--sp-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a { color: var(--dk-text-2); font-size: var(--fs-sm); }
.site-footer a:hover { color: #fff; }
.site-footer strong { color: #fff; }
.footer-logo { height: 34px; width: auto; margin-bottom: var(--sp-4); filter: brightness(1.08); }
.footer-bottom {
  margin-top: var(--sp-7); padding-top: var(--sp-5);
  border-top: 1px solid var(--dk-line);
  display: flex; justify-content: space-between; gap: var(--sp-4);
  flex-wrap: wrap; font-size: var(--fs-sm);
}
.footer-bottom--bare { margin-top: 0; border-top: 0; padding-top: 0; }

/* --- Content page template helpers --------------------------------------
   Used by the derived content-page template (FR-C4.2) once approved. Defined
   here so component CSS stays in one place. */
.band-hero { padding: var(--sp-8) 0; }
.section--panel { background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.container--narrow { max-width: 820px; }
.lead { font-size: 1.1rem; }
/* Prose block for rendered markdown content. */
.prose > :first-child { margin-top: 0; }
.prose h2 { margin-top: var(--sp-7); }
.prose h3 { margin-top: var(--sp-6); }
.prose ul, .prose ol { padding-left: var(--sp-5); }
.prose li { margin-bottom: var(--sp-2); }
.prose img { border-radius: var(--r-lg); margin: var(--sp-5) 0; }
.prose table { width: 100%; border-collapse: collapse; margin: var(--sp-5) 0; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: var(--sp-3); border-bottom: 1px solid var(--line); }
.prose th { color: var(--ink-900); font-weight: 700; }

/* --- Markdown container blocks (claude_markdown-containers-scope.md 4) ----
   Emitted by ":::  card-grid" / ":::  card" fences in content markdown, as
   <div class="card-grid"> and <article class="card"> - the same markup Card.razor and the
   grids on /backup-recovery/ already produce (4.0). There is deliberately no parallel card
   style: surface, border, radius, padding, hover and typography all come from the shared
   .card-grid / .card rules above, and a markdown card is styled by them because it carries
   the same class.

   What is defined here is only what the prose column changes about the *context* a grid sits
   in - width, column count and the vertical rhythm .prose imposes on the cards' contents.
   Scoping to .prose leaves the component grids on Home, Business IT and Backup & Recovery
   exactly as they are. */
.prose .card-grid {
  /* 4.2 - auto-fit rather than a fixed column count, so a two-card grid fills the row instead of
     leaving a hole. The 260px floor does the breakpoint work on its own: 3-up once broken out to
     container width, 2-up inside the prose column, 1-up on mobile where a second track can't
     fit. Deliberately more specific than the 980px "one column" rule for .card-grid above, which
     is there for the fixed three-up component grids. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  /* 4.5 - own the vertical rhythm either side rather than inheriting a heading/paragraph margin
     that could collapse through the grid. */
  margin: var(--sp-6) 0;
}
/* 4.1 - controlled breakout from the 820px prose column to the 1200px container width. Applied
   only once the viewport can actually hold the full container plus its gutters, so the widths
   are pure px arithmetic: no 100vw, which would include the scrollbar and overflow. Between 820
   and 1248 the grid simply stays at prose width, two-up. */
@media (min-width: 1248px) {
  .prose .card-grid { margin-inline: calc((820px - var(--container)) / 2); }
}
/* 4.4 - a card is not a slice of the prose column: kill the leading margin on its first heading,
   tighten lists, and drop the trailing margin so cards in a row bottom out level. */
.prose .card > :first-child { margin-top: 0; }
.prose .card > :last-child { margin-bottom: 0; }
.prose .card h3 { margin-top: 0; }
.prose .card p { margin-bottom: var(--sp-3); }
.prose .card ul, .prose .card ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); }
.prose .card li { margin-bottom: var(--sp-1); font-size: var(--fs-sm); }
/* 4.0.1 - no icon rule is needed for the icon-less markdown card: .card__icon carries its own
   margin and nothing in .card depends on the icon element being present, so the card closes up
   cleanly when it is absent. The hover lift is deliberately left in place - a markdown card and
   a linkless Razor card (as on /backup-recovery/) must behave identically. */

/* --- Utility ------------------------------------------------------------- */
.mb-0 { margin-bottom: 0; }
.text-end { text-align: right; }
@media (max-width: 980px) { .text-end { text-align: left; } }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.muted { color: var(--ink-500); }
.muted-dark { color: var(--dk-text-2); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.metric-label { font-size: var(--fs-xs); color: var(--dk-muted); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.vis-domain { color: #fff; font-weight: 800; font-size: 1.05rem; }
/* vis-list severity accents (extracted from hero visual inline colours) */
.vis-list__pass { color: var(--sev-green-text-dk); font-weight: 700; }
.vis-list__warn { color: var(--sev-amber-text-dk); font-weight: 700; }
.vis-list__fail { color: var(--sev-red-text-dk); font-weight: 700; }

/* --- Responsive (FR-C5.6 - 980px and 640px breakpoints) ------------------ */
@media (max-width: 980px) {
  .hero__inner, .split, .card-grid, .card-grid--2, .footer-grid, .score-panel {
    grid-template-columns: 1fr;
  }
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .score-panel { justify-items: center; text-align: center; }
  .section { padding: var(--sp-8) 0; }

  /* Mobile nav open state: the toggle reveals the nav as a stacked panel. */
  .site-nav.is-open {
    display: flex; flex-direction: column; gap: 0; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: var(--sp-3) var(--sp-5); box-shadow: var(--shadow-md);
  }
  .site-nav.is-open > a { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
  /* Dropdown parents: stack the label and its sub-items inline (always expanded on mobile,
     no hover). */
  .site-nav.is-open .nav-item { flex-direction: column; align-items: stretch; }
  .site-nav.is-open .nav-item > a { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
  .site-nav.is-open .has-dropdown > a::after { display: none; }
  .site-nav.is-open .dropdown {
    display: block; position: static; border: 0; box-shadow: none;
    min-width: 0; padding: 0 0 var(--sp-2) var(--sp-4); margin: 0;
  }
  .site-nav.is-open .dropdown a { padding: var(--sp-2) 0; }
  .site-header__inner { position: relative; flex-wrap: wrap; }
}
@media (max-width: 640px) {
  .header-phone { display: none; }
  .stat { border-right: 0; padding-right: 0; }
  .stats { gap: var(--sp-5); }
  .form-card { padding: var(--sp-5); }
  .cta-band { padding: var(--sp-6) var(--sp-5); }
  .btn { width: 100%; }
  .hero__cta .btn { width: auto; flex: 1 1 auto; }
}