/* BERRY9 v3, "Editorial dark": a printed-report look in the dark. Graphite ground, off-white type, flat fields of
   crimson (the colour of the BERRY9 wordmark) for the one action and the closing pages, square corners, no glows,
   gradients or shadows at rest. Sora for headings, Plus Jakarta Sans for reading. Motion is calm and lives in
   motion.css. Mobile first. Tokens: design-system/berry9-it-services/MASTER.md. */

@font-face { font-family: "Sora"; src: url("/assets/fonts/sora-latin.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/fonts/plus-jakarta-sans-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
/* Metric-matched fallbacks, so the swap to the web fonts does not move the layout. */
@font-face { font-family: "Sora Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 116.8%; ascent-override: 83.1%; descent-override: 24.8%; line-gap-override: 0%; }
@font-face { font-family: "Jakarta Fallback"; src: local("Arial"), local("Liberation Sans"), local("Helvetica"); size-adjust: 106.8%; ascent-override: 97.2%; descent-override: 20.8%; line-gap-override: 0%; }

:root {
  --bg: #0a0a0a;
  --bg-2: #111111;
  --surface: #171717;
  --surface-2: #212121;
  --rule: #262626;
  --rule-2: #3a3a3a;
  --ink: #f2f2ee;
  --text: #d0d0ca;
  --soft: #b4b4ae;
  --muted: #92928c;
  /* Crimson: accent for text and marks on dark; btn for fills (white text on it is 7:1). */
  --accent: #f24d60;
  --accent-ink: #ffffff;
  --btn: #b11226;
  --btn-hover: #cf1b33;
  --accent-wash: rgba(242, 77, 96, .10);
  --accent-line: rgba(242, 77, 96, .45);
  --ok: #5fd08c;
  --ok-wash: rgba(95, 208, 140, .10);
  /* Steel: the only other tone, for diagram secondaries. */
  --cyan: #a9bbd6;
  --cyan-wash: rgba(169, 187, 214, .08);
  --crit: #ff5a6b;
  --high: #ff9140;
  --med: #ffc233;
  --low: #7fb2ff;
  --paper: #f2f0ea;
  --paper-ink: #111111;
  --paper-text: #3a3a36;
  --display: "Sora", "Sora Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sans: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: var(--sans);
  --code: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
  --gut: 18px;
  --max: 1200px;
  --r: 0;
  --r-lg: 0;
  --r-sm: 0;
  --shadow-lg: none;
  --sec: 44px;
  --dock: 68px;
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --gut: 32px; --sec: 60px; --dock: 0px; } }
@media (min-width: 1100px) { :root { --gut: 40px; --sec: 76px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; scroll-padding-bottom: calc(var(--dock) + var(--consent-h, 0px) + 16px); }
@media (min-width: 960px) { html { scroll-padding-top: 88px; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 1rem/1.6 var(--sans); -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
::selection { background: var(--btn); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }
h1, h2, h3, h4 { color: var(--ink); margin: 0; text-wrap: balance; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.nw { white-space: nowrap; }

.skip {
  position: absolute; left: var(--gut); top: -80px; z-index: 60; padding: 12px 16px;
  background: var(--btn); color: var(--accent-ink); font-weight: 700; border-radius: 10px; text-decoration: none;
}
.skip:focus { top: 8px; }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 40; transition: transform .2s ease-out; background: rgba(10, 10, 10, .96); }
.hdr__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; min-height: 56px; }
.brand img { height: 17px; width: auto; filter: brightness(0) invert(1); }
.hdr__tel { display: none; }
.hdr__bar { position: relative; }
/* The invisible checkbox lies over the Menu label, so a tap lands on it and the target is full size. */
.menu__chk { position: absolute; top: 4px; right: calc(var(--gut) - 8px); z-index: 1; width: 84px; height: 48px; margin: 0; opacity: 0; cursor: pointer; }
.menu__btn { display: flex; align-items: center; gap: 8px; min-height: 48px; margin-right: -8px; padding: 0 8px; font: 600 .9375rem var(--display); color: var(--ink); cursor: pointer; }
.menu__btn .i:last-child, .menu__chk:checked + .menu__btn .i:nth-child(1) { display: none; }
.menu__chk:checked + .menu__btn .i:last-child { display: block; }
.menu__chk:focus-visible + .menu__btn { outline: 2px solid var(--accent); outline-offset: 2px; }
/* On phones the open menu lays over the page below the header, so opening it never shifts the content. */
.nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; max-height: calc(100vh - 57px); overflow-y: auto; background: var(--bg); border-block: 1px solid var(--rule-2); }
.menu__chk:checked ~ .nav { display: flex; }
.nav > * + * { border-top: 1px solid var(--rule); }
.drop summary, .nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 52px; padding: 0 var(--gut);
  font: 600 1rem var(--display); letter-spacing: -.01em; color: var(--soft); text-decoration: none; transition: color .15s;
}
.drop summary:hover, .nav__link:hover, .drop[open] summary, .nav__link[aria-current="page"] { color: var(--ink); }
.nav :focus-visible { outline-offset: -3px; }
.drop .i { width: 16px; height: 16px; transition: transform .2s; }
.drop[open] summary .i { transform: rotate(180deg); }
.nav__cta { color: var(--accent); }
.drop__panel { padding: 0 var(--gut) 12px; background: var(--bg-2); }
/* A closed panel takes no layout at all (Chrome lays out closed details content). */
.drop:not([open]) .drop__panel { display: none; }
.drop__panel ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; margin: 0; padding: 0; list-style: none; }
.drop__panel a { display: flex; align-items: center; min-height: 44px; color: var(--soft); text-decoration: none; line-height: 1.3; font-size: .9375rem; }
.drop__panel a:hover, .drop__panel [aria-current="page"] { color: var(--accent); }
.drop__panel :focus-visible { outline-offset: -3px; }
.drop__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; padding: 6px 0; border-block: 1px solid var(--rule); }
.drop__groups ul { grid-template-columns: 1fr; }
.drop__h { padding-top: 8px; font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.drop__panel .drop__lead { grid-template-columns: 1fr; }
.drop__lead a { font-weight: 600; color: var(--ink); }
@media (min-width: 960px) {
  .hdr__bar { flex-wrap: nowrap; min-height: 68px; gap: 24px; }
  .brand img { height: 19px; }
  .menu__btn, .menu__chk { display: none; }
  .nav { display: flex; position: static; flex-direction: row; max-height: none; margin: 0 0 0 auto; overflow: visible; background: none; border: 0; gap: 2px; align-items: center; }
  .nav > * + * { border: 0; }
  .drop { position: relative; }
  .drop summary, .nav__link { justify-content: center; min-height: 44px; padding: 0 12px; font-size: .9375rem; }
  .drop__panel {
    position: absolute; left: -8px; top: calc(100% + 12px); width: 300px; padding: 8px;
    border: 1px solid var(--rule-2); border-radius: var(--r); box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
  }
  .drop__panel ul { grid-template-columns: 1fr; }
  .drop__panel a { padding: 0 12px; border-radius: 8px; }
  .drop__panel a:hover { background: var(--surface-2); }
  .drop--mega { position: static; }
  .drop--mega .drop__panel { left: auto; right: var(--gut); top: calc(100% - 2px); width: 740px; padding: 10px; }
  .drop__groups { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto 1fr; gap: 8px; margin: 6px 0; }
  .drop__group:nth-child(-n+2) { grid-row: span 2; }
  .drop__h { padding: 8px 12px 2px; }
  .nav__cta.nav__link { margin-left: 6px; padding: 0 18px; background: var(--btn); color: var(--accent-ink); border-radius: var(--r-sm); font-weight: 700; }
  .nav__cta.nav__link:hover { background: var(--btn-hover); color: var(--accent-ink); }
  .nav__cta.nav__link:focus-visible { outline-offset: 3px; }
}
@media (min-width: 1120px) {
  .hdr__tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--soft); text-decoration: none; font: 500 .875rem var(--mono); }
  .hdr__tel .i { width: 18px; height: 18px; }
  .hdr__tel:hover { color: var(--ink); }
}

/* ---------- Buttons and links ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: var(--r-sm); border: 1px solid transparent;
  font: 700 .9375rem/1.2 var(--display); text-decoration: none; text-align: center; cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .15s;
}
.btn .i { width: 18px; height: 18px; }
.btn--primary { background: var(--btn); color: var(--accent-ink); }
.btn--primary:hover { background: var(--btn-hover); }
.btn--ghost { border-color: var(--rule-2); color: var(--ink); background: rgba(255, 255, 255, .02); }
.btn--ghost:hover { border-color: var(--soft); background: var(--surface); }
@media (prefers-reduced-motion: no-preference) { .btn:hover { transform: translateY(-1px); } }
@media (min-width: 560px) { .btn { flex: none; } }
.link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--accent); font-weight: 600; font-size: .9375rem; text-decoration: none;
}
.link .i { width: 16px; height: 16px; transition: transform .15s; }
.link:hover .i { transform: translateX(3px); }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; padding: 16px 0 32px; border-bottom: 1px solid var(--rule);
  background: var(--bg);
}
.hero__grid { position: relative; z-index: 1; display: grid; gap: 28px; }
.hero--home .hero__main { padding-top: 12px; }
.eyebrow {
  margin: 0 0 12px;
  font: 500 .75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--soft);
}
.eyebrow b { color: var(--accent); font-weight: 500; }
.hero h1 {
  max-width: 22ch; margin-bottom: 14px;
  font: 700 clamp(1.75rem, 1.3rem + 1.9vw, 2.5rem)/1.1 var(--display); letter-spacing: -.028em;
}
.hero--page h1 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2rem); max-width: 28ch; }
.hero h1 .hl { color: var(--accent); }
.lead { max-width: 62ch; margin-bottom: 16px; font-size: .96875rem; line-height: 1.55; color: var(--soft); }
.hero__facts {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px; max-width: 720px; margin: 22px 0 0; padding: 0;
  background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden;
}
.hero__facts div { padding: 10px 12px; background: rgba(13, 18, 27, .9); }
.hero__facts dt { font: 500 .75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hero__facts dd { margin: 2px 0 0; font-size: .875rem; font-weight: 600; color: var(--ink); line-height: 1.35; }
@media (min-width: 640px) { .hero__facts { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.reviewed { margin-top: 18px; font: 400 .75rem/1.4 var(--mono); letter-spacing: .02em; color: var(--muted); }
@media (min-width: 1000px) {
  .hero { padding: 24px 0 52px; }
  .hero--split .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
  .hero--split .hero__facts { grid-template-columns: 1fr 1fr; max-width: 560px; }
}

.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 6px; padding: 0; list-style: none;
  font: 400 .75rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
}
.crumbs li + li::before { content: "/"; color: var(--accent); margin: 0 8px; }
/* Padding widens the tap target to 44px without moving the separators. */
.crumbs a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 6px; margin: 0 -6px; color: var(--soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Visual frame (attack path, authorization matrix) ---------- */
.viz {
  margin: 0; background: var(--surface);
  border: 1px solid var(--rule-2); border-radius: var(--r-lg); overflow: hidden; position: relative;
  box-shadow: var(--shadow-lg);
}
.viz__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--rule); font: 500 .75rem/1.3 var(--mono); color: var(--muted);
}
.viz__dots { display: flex; gap: 6px; }
.viz__dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-2); }
.viz svg { display: block; width: 100%; height: auto; }
.viz figcaption { padding: 10px 14px 12px; border-top: 1px solid var(--rule); font-size: .8125rem; color: var(--muted); }
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px;
  font: 500 .75rem/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--rule-2); color: var(--soft);
}
.tag--sample { color: var(--cyan); border-color: rgba(106, 168, 255, .35); background: var(--cyan-wash); }
.g-grid { stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.g-edge { fill: none; stroke: var(--rule-2); stroke-width: 1.5; }
.g-chain { fill: none; stroke: var(--crit); stroke-width: 2; }
.g-node { fill: var(--surface-2); stroke: var(--rule-2); stroke-width: 1.5; }
.g-node--asset { fill: var(--surface); stroke: var(--rule-2); }
.g-node--med { stroke: var(--med); }
.g-node--high { stroke: var(--high); }
.g-node--low { stroke: var(--low); }
.g-node--crit { fill: rgba(255, 77, 94, .14); stroke: var(--crit); stroke-width: 2; }
.g-node--src { stroke: var(--cyan); }
.g-ring { fill: none; stroke: var(--crit); stroke-opacity: .35; stroke-dasharray: 3 4; }
.g-label { fill: var(--soft); font: 500 12px var(--mono); }
.g-id { fill: var(--ink); font: 600 13px var(--mono); }
.g-label--dim { fill: var(--muted); }
@media (max-width: 599px) { .g-label { display: none; } }
.chain { margin: 0; padding: 4px 14px 12px; list-style: none; }
.chain li {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center;
  padding: 9px 0; border-top: 1px solid var(--rule); font-size: .875rem; line-height: 1.4;
}
.chain li:first-child { border-top: 0; }
.chain li:last-child { color: var(--ink); font-weight: 600; }
.chain__id { font: 600 .75rem var(--mono); color: var(--muted); }
.chain--flat li:last-child { color: inherit; font-weight: inherit; }
.viz__path { padding: 10px 14px 0; font: 400 .8125rem/1.5 var(--mono); color: var(--soft); }
.viz__path b { margin-right: 8px; font: 500 .75rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
/* Authorization matrix (SVG); its table twin is visually hidden. */
.viz .g-mx { max-width: 400px; margin: 0 auto; padding: 6px 8px 0; }
.g-cell { fill: rgba(120, 160, 210, .07); stroke: var(--rule); }
.g-cell--allow { fill: var(--ok-wash); stroke: rgba(61, 220, 132, .35); }
.g-cell--bypass { fill: rgba(255, 77, 94, .12); stroke: rgba(255, 77, 94, .55); }
.g-tick { fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.g-dash { stroke: var(--muted); stroke-width: 1.5; stroke-linecap: round; }
.g-mark { fill: var(--crit); font: 600 11px var(--mono); }
.g-head { fill: var(--muted); font: 500 11px var(--mono); }
.g-row { fill: var(--text); font: 500 13px var(--display); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 14px 12px; font: 500 .75rem var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
.legend .l-ok { background: var(--ok); }
.legend .l-deny { background: var(--rule-2); }
.legend .l-bad { background: var(--crit); }

/* Severity labels: real text, the color only repeats it. */
.sev {
  display: inline-flex; align-items: center; gap: 6px; font: 600 .75rem/1 var(--mono);
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.sev::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.sev--crit { color: var(--crit); }
.sev--high { color: var(--high); }
.sev--med { color: var(--med); }
.sev--low { color: var(--low); }
.sev--info, .sev--varies { color: var(--soft); }
.sev--varies::before { background: transparent; border: 1.5px solid currentColor; }

/* ---------- Trust bar ---------- */
.trustbar { border-bottom: 1px solid var(--rule); background: var(--bg-2); }
.trustbar ul { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; }
.trustbar li {
  position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 14px 12px 14px 0;
  border-bottom: 1px solid var(--rule);
}
.trustbar li:nth-child(odd) { padding-right: 12px; border-right: 1px solid var(--rule); }
.trustbar li:nth-child(even) { padding-left: 12px; }
.trustbar li:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; padding-left: 0; }
.trustbar .i { margin-top: 2px; color: var(--accent); }
.trustbar strong { display: block; font-size: .875rem; line-height: 1.3; color: var(--ink); }
.trustbar span { display: block; font: 400 .75rem/1.45 var(--mono); color: var(--muted); }
.trustbar a { display: inline-flex; align-items: center; min-height: 24px; padding: 10px 0; margin: -10px 0; font: 500 .75rem var(--display); color: var(--soft); text-underline-offset: 3px; }
/* The whole cell is the link's tap target. */
.trustbar a::after { content: ""; position: absolute; inset: 0; }
.trustbar a:hover, .trustbar li:has(a:hover) strong { color: var(--accent); }
@media (min-width: 1100px) {
  .trustbar ul { grid-template-columns: repeat(5, auto); justify-content: space-between; }
  .trustbar li, .trustbar li:nth-child(odd), .trustbar li:nth-child(even), .trustbar li:last-child {
    grid-column: auto; padding: 18px 20px; border: 0; border-left: 1px solid var(--rule);
  }
  .trustbar li:first-child { padding-left: 0; border-left: 0; }
  .trustbar li:last-child { padding-right: 0; }
}

/* ---------- Sections ---------- */
.sec { padding: var(--sec) 0; border-bottom: 1px solid var(--rule); }
.sec--alt { background: var(--bg-2); }
.sec__head { display: grid; gap: 6px; margin-bottom: 16px; }
.kicker { font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.kicker span { color: var(--muted); }
.sec__head h2 { max-width: 34ch; font: 700 clamp(1.0625rem, 1rem + .3vw, 1.1875rem)/1.25 var(--display); letter-spacing: -.015em; }
.sec__head p:not(.kicker) { max-width: 64ch; margin: 0; font-size: .9375rem; color: var(--soft); }
.sec__head a, .note a { color: var(--accent); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (min-width: 1000px) {
  .sec__head--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 48px; align-items: start; }
  .sec__head--split .kicker { grid-column: 1 / -1; }
  .sec__head--split .lead { justify-self: end; }
}
.note { margin-top: 14px; font-size: .84375rem; color: var(--soft); max-width: 72ch; }
.sub { margin-bottom: 10px; font-weight: 600; color: var(--ink); }

/* Plain text inside a section body (paragraphs, lists, h3), read as an article column. */
.sec__body > :where(p, ul, ol, h3, address, blockquote):not([class]) { max-width: 72ch; }
.sec__body > :where(p, ul, ol, address, blockquote):not([class]) { margin: 0 0 .8em; font-size: .875rem; line-height: 1.55; }
.sec__body > :last-child { margin-bottom: 0; }
.sec__body > h3:not([class]) { margin: 1.4em 0 .4em; font: 650 1rem/1.35 var(--display); }
.sec__body > h3:not([class]):first-child { margin-top: 0; }
.sec__body > h3 a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.sec__body > :where(p, ul, ol, h3, address):not([class]) a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sec__body > :where(p, ul, ol):not([class]) strong { color: var(--ink); font-weight: 600; }
.sec__body > :where(ul, ol):not([class]) { padding-left: 1.25em; }
.sec__body > :where(ul, ol):not([class]) li { margin: .35em 0; }
.sec__body > :where(ul, ol):not([class]) li::marker { color: var(--accent); }
.sec__body > address { font-style: normal; }

/* ---------- Cards ---------- */
.cards { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.cards + .cards { margin-top: 12px; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--4 { grid-template-columns: repeat(4, 1fr); } }
.card {
  position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r);
  transition: border-color .15s, background-color .15s;
}
.card--link:hover { border-color: var(--accent-line); background: var(--surface-2); }
@media (prefers-reduced-motion: no-preference) { .card--link { transition: transform .2s, border-color .2s, background-color .2s, box-shadow .2s; } .card--link:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } }
.card--muted { background: transparent; border-style: dashed; }
.card__row { position: absolute; top: 12px; right: 12px; display: flex; align-items: center; gap: 8px; }
.card:has(> .card__row) > h3 { padding-right: 44px; }
.card:has(> .card__row .tag) > h3 { padding-right: 96px; }
.card__icon {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent-wash); color: var(--accent); border: 1px solid var(--accent-line);
}
.card h3 { font: 650 .9375rem/1.3 var(--display); letter-spacing: -.01em; }
.card h3 a { text-decoration: none; }
/* The heading link covers the card, so the whole card is one target. */
.card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r); }
.card p { font-size: .84375rem; line-height: 1.5; }
.card p a, .callout a, .price p a, .faq p a { color: var(--accent); text-underline-offset: 3px; }
.card__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.card__go { display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: var(--accent); }
.card__go .i { width: 16px; height: 16px; transition: transform .15s; }
.card--link:hover .card__go .i { transform: translateX(3px); }
.chip {
  display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 6px;
  font: 500 .75rem/1.4 var(--mono); color: var(--soft); background: rgba(255, 255, 255, .04); border: 1px solid var(--rule);
}
.cards--rel .card { flex-direction: row; align-items: center; justify-content: space-between; padding: 16px 18px; }
.cards--rel h3 { font-size: 1rem; }
.cards--rel .i { color: var(--muted); transition: transform .15s, color .15s; }
.cards--rel .card--link:hover .i { color: var(--accent); transform: translateX(3px); }
.cards--rel .card--muted h3 { color: var(--soft); font-weight: 500; }

/* ---------- Bento ---------- */
.bento { display: grid; gap: 12px; }
@media (min-width: 640px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .bento { grid-template-columns: repeat(4, 1fr); }
  .bento .span-2 { grid-column: span 2; }
}
.bento .card { padding: 18px; border-radius: var(--r-lg); }
.bento .card h3 { display: flex; align-items: center; gap: 10px; }
.bento .card h3 .i { color: var(--accent); }

/* ---------- Timeline ---------- */
.steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 0 14px; padding-bottom: 22px; counter-increment: step; }
.step::before {
  content: counter(step, decimal-leading-zero); grid-row: 1 / 4; z-index: 1;
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  font: 600 .875rem var(--mono); color: var(--accent); background: var(--bg); border: 1px solid var(--accent-line);
}
.step::after { content: ""; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--rule-2); }
.step:last-child::after { display: none; }
.step__days { padding-top: 2px; font: 500 .75rem/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.step h3 { margin: 2px 0 4px; font: 650 1rem/1.3 var(--display); }
.step p:not([class]) { font-size: .84375rem; line-height: 1.5; }
.step .step__out { margin-top: 8px; font-size: .8125rem; color: var(--soft); }
.step__out b { margin-right: 6px; font: 500 .75rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--cyan); }
@media (min-width: 1000px) {
  .steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; }
  .step { grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 0; }
  .step::before { grid-row: auto; margin-bottom: 14px; }
  .step::after { left: 52px; right: -8px; top: 21px; bottom: auto; width: auto; height: 2px; background: var(--rule-2); }
  .step__body { padding: 16px; min-height: 100%; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }
}

/* ---------- Stat band ---------- */
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.stats div { display: flex; flex-direction: column; padding: 18px 16px; background: var(--surface); }
.stats dt { order: 2; font-size: .875rem; line-height: 1.4; color: var(--soft); }
.stats dd { margin: 0 0 4px; font: 700 clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem)/1 var(--display); letter-spacing: -.03em; color: var(--ink); }
.stats dd small { margin-left: 4px; font-size: .45em; font-weight: 600; letter-spacing: 0; color: var(--accent); }
.stats--3 div:last-child { grid-column: 1 / -1; }
@media (min-width: 900px) {
  .stats { grid-template-columns: repeat(4, 1fr); } .stats div { padding: 24px; }
  .stats--2 { grid-template-columns: 1fr 1fr; } .stats--3 { grid-template-columns: repeat(3, 1fr); } .stats--3 div:last-child { grid-column: auto; }
}
.steps + .note, .note + .stats, .steps + .stats { margin-top: 20px; }

/* ---------- Tables ---------- */
.tbl-wrap { border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; background: var(--surface); }
.tbl { width: 100%; border-collapse: collapse; font-size: .84375rem; line-height: 1.45; }
.tbl caption { padding: 14px 16px; text-align: left; font: 500 .75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--rule); }
.tbl th, .tbl td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl thead th { font: 600 .75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg-2); }
.tbl tbody th { color: var(--ink); font-weight: 600; }
.tbl small { display: block; margin-top: 4px; font-size: .8125rem; line-height: 1.4; color: var(--soft); }
/* Vertical padding on the inline link widens its hit area to 44 px without moving the line box. */
.tbl a { margin: 0 -10px; padding: 14px 10px; color: var(--accent); text-underline-offset: 3px; }
.tbl .yes { color: var(--ink); }
.tbl .yes::before { content: "✓"; margin-right: 8px; color: var(--ok); font-weight: 700; }
.tbl .no { color: var(--soft); }
.tbl .no::before { content: "–"; margin-right: 8px; color: var(--muted); }
.tbl .hl { background: rgba(46, 230, 214, .05); }
.tbl thead .hl { color: var(--accent); }
/* Stacked on phones: each row a block, each cell labelled from data-label. */
@media (max-width: 759px) {
  .tbl--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl--stack tr { display: block; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
  .tbl--stack tr:last-child { border-bottom: 0; }
  .tbl--stack th, .tbl--stack td { display: block; padding: 0; border: 0; }
  .tbl--stack tbody th { margin-bottom: 8px; font-size: 1rem; }
  .tbl--stack td { margin-top: 8px; }
  .tbl--stack td[data-label]::before, .tbl--stack .yes::before, .tbl--stack .no::before {
    content: attr(data-label); display: block; margin: 0 0 2px;
    font: 500 .75rem/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  }
  .tbl--stack .hl { background: transparent; }
}

/* ---------- Checklist, report mock ---------- */
.split { display: grid; gap: 20px; }
.sec__body > * + .split { margin-top: 20px; }
@media (min-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; } }
.checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.checks li {
  display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-sm); font-size: .9375rem; line-height: 1.5;
}
.checks li::before, .price li::before {
  content: ""; width: 28px; height: 28px; border-radius: 8px; background: var(--ok-wash) center / 16px no-repeat;
  border: 1px solid rgba(61, 220, 132, .3);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ddc84' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E");
}
.checks strong { color: var(--ink); font-weight: 600; }
.checks a { color: var(--accent); text-underline-offset: 3px; }
.checks--plain li { background: transparent; }
.card .checks--plain li { padding: 6px 0; border: 0; }

.report {
  position: relative; margin: 0; padding: 22px 20px 20px; color: var(--paper-text);
  background: var(--paper); border-radius: var(--r); box-shadow: 0 20px 25px rgba(0, 0, 0, .15);
}
.report__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--paper-ink); }
.report__brand { font: 700 .8125rem/1.2 var(--mono); letter-spacing: .08em; color: var(--paper-ink); }
.report__flag { padding: 4px 8px; border-radius: 6px; font: 600 .75rem/1.2 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #0f4e5a; background: #cfeef3; }
.report__id { margin-top: 14px; font: 500 .75rem var(--mono); letter-spacing: .05em; color: #475569; text-transform: uppercase; }
.report__title { margin: 4px 0 14px; color: var(--paper-ink); font: 700 1.125rem/1.3 var(--display); letter-spacing: -.01em; }
.report dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 14px; }
.report dl div { padding: 8px 10px; background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; }
.report dt { font: 500 .75rem/1.3 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #475569; }
.report dd { margin: 2px 0 0; font-size: .875rem; font-weight: 600; color: var(--paper-ink); overflow-wrap: anywhere; }
.report .sev--crit { color: #b3261e; }
.report .sev--high { color: #a3480a; }
.report .sev--med { color: #7a5a00; }
.report .sev--low { color: #0f5e6b; }
.report__h { margin: 12px 0 6px; font: 600 .75rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--paper-ink); }
.report ol { margin: 0; padding-left: 1.2em; font-size: .875rem; line-height: 1.5; }
.report p:not([class]) { font-size: .875rem; line-height: 1.5; }
.report code {
  display: block; margin: 8px 0 0; padding: 10px 12px; overflow-x: auto; white-space: pre;
  font: 400 .75rem/1.55 var(--code); color: #e2e8f0; background: #0f172a; border-radius: 8px;
}
.report__foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 10px; border-top: 1px solid #cbd5e1; font: 400 .75rem/1.4 var(--mono); color: #475569; }

/* ---------- Pricing ---------- */
.prices { display: grid; gap: 12px; }
@media (min-width: 760px) { .prices { grid-template-columns: repeat(3, 1fr); } .prices--2 { grid-template-columns: 1fr 1fr; } }
.split .prices { grid-template-columns: minmax(0, 1fr); }
.price { display: flex; flex-direction: column; gap: 12px; padding: 22px 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }
.price--hl { border-color: var(--accent-line); box-shadow: inset 0 3px 0 var(--accent); }
.price__name { font: 600 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.price .price__amt { color: var(--ink); font: 700 1.75rem/1.1 var(--display); letter-spacing: -.025em; }
.price__amt small { display: block; margin-bottom: 4px; font: 500 .8125rem var(--display); letter-spacing: 0; color: var(--soft); }
.price__amt span { font-size: .9375rem; font-weight: 600; letter-spacing: 0; color: var(--soft); }
.price p:not([class]) { font-size: .875rem; }
.price ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: .875rem; }
.price li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.price li::before { width: 18px; height: 18px; margin-top: 3px; border: 0; background-color: transparent; }
.price .btn { margin-top: auto; }
.retest, .callout {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; margin-top: 14px; padding: 14px 16px;
  border-radius: var(--r-sm); font-size: .9375rem;
}
.retest { border: 1px dashed var(--rule-2); }
.callout { border: 1px solid rgba(106, 168, 255, .3); background: var(--cyan-wash); }
.retest .i, .callout .i { margin-top: 2px; color: var(--cyan); }

/* ---------- City chips ---------- */
.cities { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cities a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: var(--r-sm);
  border: 1px solid var(--rule-2); color: var(--ink); text-decoration: none; font-size: .9375rem; font-weight: 500;
}
.note + .cities { margin-top: 16px; }
.cities a:hover { border-color: var(--accent-line); color: var(--accent); }
.cities .home-city { border-color: var(--accent-line); background: var(--accent-wash); }
.cities .home-city .i { width: 16px; height: 16px; color: var(--accent); }
.cities small { font: 500 .75rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* ---------- FAQ ---------- */
.faqwrap { display: grid; gap: 20px; }
@media (min-width: 1000px) {
  .faqwrap { grid-template-columns: 320px minmax(0, 1fr); gap: 48px; }
  .faqwrap .sec__head { position: sticky; top: 92px; align-self: start; }
}
.faqs { border-top: 1px solid var(--rule); }
.faq { border-bottom: 1px solid var(--rule); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 56px; padding: 14px 0;
  font-weight: 600; line-height: 1.4; color: var(--ink);
}
.faq summary::after {
  content: "+"; flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px;
  border: 1px solid var(--rule-2); font: 400 1.125rem/1 var(--mono); color: var(--accent); transition: transform .2s;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--accent); }
.faq p { max-width: 72ch; padding: 0 40px 18px 0; }

/* ---------- Related pages ---------- */
.related { padding: var(--sec) 0 0; }
.related h2 { margin-bottom: 16px; font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

/* ---------- CTA band ---------- */
.ctaband { padding: var(--sec) 0; }
.ctabox {
  display: grid; gap: 22px; padding: 24px 20px; border-radius: var(--r-lg); border: 1px solid var(--accent-line);
}
.ctabox h2 { margin-bottom: 6px; font: 700 clamp(1.0625rem, 1rem + .3vw, 1.1875rem)/1.25 var(--display); letter-spacing: -.015em; }
.ctabox p { max-width: 52ch; color: var(--soft); }
.ctabox .actions { margin-top: 18px; }
.contact { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.contact a, .contact address {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; min-height: 44px; padding: 10px 0;
  color: var(--ink); text-decoration: none; font-style: normal; line-height: 1.45; font-size: .9375rem;
}
.contact address { color: var(--soft); }
.contact .i { margin-top: 1px; color: var(--accent); }
.contact a:hover { color: var(--accent); }
@media (min-width: 900px) { .ctabox { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 48px; padding: 36px; align-items: center; } }

/* ---------- Footer ---------- */
.ftr { padding-top: 32px; font-size: .875rem; color: var(--soft); background: var(--bg-2); border-top: 1px solid var(--rule); }
.ftr__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 16px; }
.ftr__org, .ftr__svc, .ftr__company { grid-column: 1 / -1; }
.ftr__logo { width: 56px; margin-bottom: 12px; padding: 6px; background: #fff; border-radius: 12px; }
.ftr__name { margin-bottom: 8px; font-size: .875rem; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.ftr address { margin: 0 0 8px; font-style: normal; line-height: 1.6; }
.ftr__h, .ftr__g { margin-bottom: 6px; font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ftr__g { margin: 10px 0 0; font-size: .75rem; color: var(--accent); }
.ftr ul { margin: 0; padding: 0; list-style: none; }
.ftr__contact { display: flex; flex-direction: column; }
.ftr__col a, .ftr__contact a, .ftr__svc a { display: flex; align-items: center; min-height: 44px; line-height: 1.3; text-decoration: none; color: var(--soft); }
.ftr__contact a, .ftr__lead a { color: var(--ink); }
.ftr__col a:hover, .ftr__contact a:hover, .ftr__svc a:hover { color: var(--accent); }
.ftr [aria-current="page"] { color: var(--ink); }
.ftr__loc { margin-top: 16px; padding-top: 8px; border-top: 1px solid var(--rule); }
.ftr__loc ul { display: flex; flex-wrap: wrap; margin: 0 -10px; }
.ftr__loc a { display: flex; align-items: center; min-height: 44px; padding: 0 10px; text-decoration: none; color: var(--soft); }
.ftr__loc a:hover { color: var(--accent); }
.ftr__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.ftr__base {
  display: grid; gap: 4px; margin-top: 28px; padding-top: 16px;
  /* The footer, not the page, keeps room for the phone bar, so the bar never covers text. */
  padding-bottom: calc(24px + var(--dock) + var(--consent-h, 0px) + env(safe-area-inset-bottom));
  font-size: .8125rem; color: var(--muted);
}
.ftr__base a { display: inline-block; padding: 12px 0; color: var(--soft); text-underline-offset: 3px; }
.ftr__base a:hover { color: var(--accent); }
@media (min-width: 1000px) {
  .ftr__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.4fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
  .ftr__org, .ftr__svc, .ftr__company { grid-column: auto; }
  .ftr__base { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; }
}

/* Phones: the header stays reachable. nav.js hides it while scrolling down and brings it back on scroll up. */
.hdr--away { transform: translateY(-100%); }
@media (min-width: 960px) { .hdr--away { transform: none; } }
@media (prefers-reduced-motion: reduce) { .hdr { transition: none; } }

/* ---------- On this page ---------- */
.jump { background: var(--bg); border-bottom: 1px solid var(--rule); }
.jump .wrap { display: flex; align-items: center; gap: 14px; }
.jump__h { flex: none; margin: 0; font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.jump ul { display: flex; gap: 8px; margin: 0; padding: 8px 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.jump ul::-webkit-scrollbar { display: none; }
.jump a {
  display: flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  font-size: .8125rem; font-weight: 500; white-space: nowrap; text-decoration: none; color: var(--soft);
}
.jump a:hover { color: var(--accent); border-color: var(--accent-line); }
@media (max-width: 599px) { .jump__h { display: none; } }

/* ---------- Phone contact bar ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1fr 1.2fr 1.5fr; gap: 8px;
  padding: 8px var(--gut) calc(8px + env(safe-area-inset-bottom)); background: rgba(5, 7, 11, .96); border-top: 1px solid var(--rule-2);
}
.dock a {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border: 1px solid var(--rule-2);
  border-radius: var(--r-sm); font-size: .875rem; font-weight: 700; color: var(--ink); text-decoration: none;
}
.dock .i { width: 18px; height: 18px; }
.dock .dock__main { background: var(--btn); border-color: var(--btn); color: var(--accent-ink); }
@media (max-width: 379px) { .dock .i { display: none; } }
@media (min-width: 768px) { .dock { display: none; } }

/* ---------- Analytics consent banner ---------- */
/* Fixed, so showing it moves nothing; on phones it sits above the phone bar. analytics.js sets --consent-h. */
.consent {
  position: fixed; z-index: 60; left: var(--gut); right: var(--gut); bottom: calc(var(--dock) + 8px + env(safe-area-inset-bottom));
  display: grid; gap: 10px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--rule-2); border-radius: var(--r);
  font-size: .875rem; line-height: 1.5; color: var(--text);
}
.consent[hidden], .consent [hidden], [data-consent-open][hidden] { display: none; }
.consent__txt a { padding: 12px 0; color: var(--accent); text-underline-offset: 3px; }
.consent__state { color: var(--ink); }
.consent__state:empty { display: none; }
.consent__btns { display: flex; gap: 8px; }
.consent .btn { flex: 1 1 0; min-height: 44px; padding: 0 14px; font-size: .875rem; }
@media (min-width: 768px) { .consent { right: auto; bottom: 16px; width: min(520px, calc(100% - 2 * var(--gut))); } .consent .btn { flex: none; } }
/* On phones the banner takes the phone bar's place until a choice is made, so it covers less of the page. */
@media (max-width: 767px) {
  .consent { bottom: calc(8px + env(safe-area-inset-bottom)); padding: 12px 14px; gap: 8px; font-size: .8125rem; line-height: 1.45; }
  .consent__txt a { padding: 4px 0; }
  body:has(.consent:not([hidden])) .dock { display: none; }
}
@media (prefers-reduced-motion: no-preference) { .consent { animation: b9-up .2s ease-out; } }
@keyframes b9-up { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Inquiry form ---------- */
.inq { display: grid; gap: 16px; max-width: 760px; padding: 20px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r); }
.inq__h { font: 700 1.25rem/1.25 var(--display); letter-spacing: -.01em; }
.inq__intro, .inq__consent, .inq__hint { font-size: .875rem; color: var(--soft); }
.inq__consent a { color: var(--accent); text-underline-offset: 3px; }
.inq__grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .inq__grid { grid-template-columns: 1fr 1fr; } }
.inq__field { display: grid; gap: 6px; align-content: start; }
.inq label, .inq legend { font-size: .875rem; font-weight: 600; color: var(--ink); }
.inq input[type="text"], .inq input[type="email"], .inq input[type="tel"], .inq select, .inq textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; font: 400 1rem/1.4 var(--sans);
  color: var(--ink); background: var(--bg); border: 1px solid var(--rule-2); border-radius: 8px;
}
.inq textarea { resize: vertical; }
.inq [aria-invalid="true"] { border-color: var(--crit); }
.inq__err { font-size: .8125rem; color: var(--crit); }
.inq__err:empty, .inq__status:empty { display: none; }
.inq__scope { margin: 0; padding: 0; border: 0; }
.inq__scope legend { padding: 0; margin-bottom: 8px; }
.inq__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.inq__chip { position: relative; }
.inq__chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.inq__chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  font-size: .875rem; font-weight: 500; color: var(--soft); border: 1px solid var(--rule-2); border-radius: var(--r-sm);
}
.inq__chip input:checked + span { color: var(--accent-ink); background: var(--btn); border-color: var(--btn); }
.inq__chip input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 3px; }
.inq__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.inq .btn { justify-self: start; }
.inq .btn:disabled { opacity: .6; cursor: progress; }
.inq__status { font-size: .9375rem; color: var(--soft); }
.inq__thanks p { color: var(--text); }
.inq__req { font-size: .8125rem; color: var(--muted); }
.inq label > span[aria-hidden="true"] { color: var(--accent); }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- Articles (template "blog"): one readable column, code that scrolls inside its box ---------- */
.sec--post { padding: 20px 0; }
.sec--post + .sec--post { padding-top: 0; }
.post { max-width: 760px; margin-inline: auto; }
.post h2 { margin: 0 0 10px; font: 650 1.1875rem/1.3 var(--display); color: var(--ink); text-wrap: balance; }
.post__body > :where(p, ul, ol) { max-width: 72ch; margin: 0 0 .85em; font-size: .90625rem; line-height: 1.6; }
.post__body > :where(ul, ol) { padding-left: 1.25em; }
.post__body > :last-child { margin-bottom: 0; }
.post__body a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.post__body strong { color: var(--ink); font-weight: 600; }
.post__body code { font: .875em/1.5 var(--code); padding: 1px 5px; background: var(--surface-2); border-radius: 5px; color: var(--ink); overflow-wrap: anywhere; }
.post__body pre, .sec__body pre { margin: 0 0 1em; padding: 12px 14px; max-width: 100%; overflow-x: auto; background: var(--surface); border: 1px solid var(--rule-2); border-radius: var(--r-sm); }
.post__body pre code, .sec__body pre code { padding: 0; background: none; white-space: pre; overflow-wrap: normal; }


/* ---------- Editorial dark: type-led, flat fields, square corners, calm motion ---------- */
/* Decision: square corners everywhere (the one global exception to per-component radii). */
*, *::before, *::after { border-radius: 0 !important; }
body { font-size: 1rem; line-height: 1.65; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -.03em; }

/* Header: a plain dark bar. */
.nav, .nav > * + * { border-color: var(--rule); }
.drop__panel { background: var(--bg-2); border: 0; box-shadow: none; }
.drop__panel a:hover { background: var(--surface-2); color: var(--ink); }
.drop__h, .ftr__h, .jump__h, .related h2 { font: 600 .9375rem var(--display); text-transform: none; letter-spacing: -.01em; color: var(--ink); }
.nav__cta.nav__link { background: var(--btn); color: var(--accent-ink); }
.nav__cta.nav__link:hover { background: var(--btn-hover); }

/* Buttons: square, solid, one crimson action. */
.btn { min-height: 52px; padding: 0 26px; font: 600 1rem/1.2 var(--display); letter-spacing: -.005em; border-width: 2px; }
.btn--primary { background: var(--btn); color: var(--accent-ink); border-color: var(--btn); }
.btn--primary:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--bg); }
.link { color: var(--accent); font-family: var(--display); }

/* Hero: flat ground, a masthead title, no ornament. */
.hero { background: var(--bg); border-bottom: 0; padding: 28px 0 44px; }
.hero__grid { gap: 36px; }
.eyebrow { font: 500 .9375rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--soft); }
.eyebrow b { color: var(--accent); font-weight: 600; }
.hero h1 { max-width: 20ch; font: 600 clamp(2.125rem, 1.25rem + 3.1vw, 3.5rem)/1.04 var(--display); letter-spacing: -.045em; }
.hero--page h1 { max-width: 26ch; font-size: clamp(1.875rem, 1.3rem + 1.9vw, 2.75rem); }
.hero h1 .hl { color: var(--accent); }
.lead { font-size: 1.0625rem; line-height: 1.6; color: var(--text); }
.hero__facts { gap: 2px; background: none; border: 0; }
.hero__facts div { background: var(--surface); padding: 14px 16px; }
.hero__facts dt, .reviewed { font: 500 .8125rem/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.hero__facts dd { font: 600 .9375rem/1.35 var(--display); }
.crumbs ol { font: 500 .875rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.crumbs li + li::before { color: var(--muted); }

/* Sections: the page is told in alternating dark fields; titles are the structure. */
.sec { border-bottom: 0; }
.sec--alt { background: var(--bg-2); }
.kicker { display: block; font: 600 .9375rem/1.4 var(--display); letter-spacing: -.01em; text-transform: none; color: var(--accent); }
.kicker span { display: none; }
.sec__head { gap: 8px; margin-bottom: 26px; }
.sec__head h2 { max-width: 24ch; font: 600 clamp(1.5rem, 1.1rem + 1.6vw, 2.375rem)/1.1 var(--display); letter-spacing: -.04em; }
.sec__head p:not(.kicker) { font-size: 1.0625rem; color: var(--text); }
.sec__body > :where(p, ul, ol, address, blockquote):not([class]) { font-size: 1rem; line-height: 1.65; }
.sec__body > h3:not([class]) { font: 600 1.125rem/1.35 var(--display); }
.note { font-size: .9375rem; }

/* Open feature cards: text on the field, no boxes, no icons. Link cards are flat tiles that invert on hover. */
.cards { gap: 30px 36px; }
.card { background: none; border: 0; box-shadow: none; padding: 0; gap: 8px; }
.card__icon { display: none; }
.card:has(> .card__row) > h3 { padding-right: 0; }
.card:has(> .card__row .tag) > h3 { padding-right: 70px; }
.card h3 { font: 600 1.1875rem/1.28 var(--display); letter-spacing: -.025em; }
.card p { font-size: 1rem; line-height: 1.6; }
.card--link { background: var(--surface); padding: 22px; transition: background-color .2s, color .2s; }
.card--link:hover { background: var(--ink); }
.card--link:hover :is(h3, h3 a, p, .card__go, .chip) { color: #0a0a0a; }
.card--link:hover .chip { background: #e4e4e0; }
.card__go { font-family: var(--display); font-weight: 600; color: var(--accent); }
.chip, .tag { border: 0; background: var(--surface-2); color: var(--soft); font: 500 .8125rem var(--sans); letter-spacing: 0; text-transform: none; }
.tag--sample { background: var(--surface-2); color: var(--soft); }
.bento .card, .bento .card:not(.card--link) { padding: 0; }
.cards--rel .card { background: var(--surface); padding: 18px 20px; }

/* Process: square numbered nodes, flat tone panels. */
.step::before { background: var(--btn); color: var(--accent-ink); border: 0; font: 700 1rem var(--display); }
.step::after { background: var(--rule-2); opacity: 1; width: 2px; }
@media (min-width: 1000px) { .step::after { height: 2px; background: var(--rule-2); } .step__body { background: var(--surface); border: 0; padding: 20px; } }
.step__days { font: 500 .875rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--muted); }
.step h3 { font: 600 1.125rem/1.3 var(--display); }
.step__out b { font: 600 .875rem var(--display); text-transform: none; letter-spacing: 0; color: var(--accent); }

/* Figures: a crimson field with big white numbers. */
.stats { gap: 0; background: var(--btn); border: 0; }
.stats div, .stats div:hover { background: none; padding: 26px 22px; }
.stats dt { color: #fff; font-size: .9375rem; opacity: .92; }
.stats dd { color: #fff; font: 600 clamp(2.25rem, 1.5rem + 3vw, 3.75rem)/1 var(--display); letter-spacing: -.05em; text-shadow: none; }
.stats dd small { color: #fff; }

/* Tables: banded by tone, no lines. */
.tbl-wrap { border: 0; background: none; }
.tbl caption { padding: 0 0 12px; font: 600 1rem var(--display); letter-spacing: -.01em; text-transform: none; color: var(--ink); border: 0; }
.tbl th, .tbl td { border: 0; padding: 14px 18px; }
.tbl thead th { background: var(--surface-2); font: 600 .9375rem var(--display); text-transform: none; letter-spacing: -.01em; color: var(--ink); }
.tbl tbody tr:nth-child(odd) { background: var(--surface); }
.tbl .hl { background: rgba(242, 77, 96, .1); }
.tbl thead .hl { color: var(--accent); }
@media (max-width: 759px) { .tbl--stack tr { border: 0; padding: 14px 18px; } .tbl--stack th, .tbl--stack td { padding: 0; } .tbl--stack td[data-label]::before, .tbl--stack .yes::before, .tbl--stack .no::before { font: 600 .8125rem var(--sans); text-transform: none; letter-spacing: 0; } }

/* Lists and the report. */
.checks li { background: none; border: 0; padding: 12px 0; grid-template-columns: 24px 1fr; font-size: 1rem; }
.checks li::before, .price li::before { width: 20px; height: 20px; border: 0; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f24d60' stroke-width='2.6' stroke-linecap='square'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E"); margin-top: 3px; }
.report { box-shadow: none; background: #f2f0ea; }
.report dl div { border: 0; background: #fff; }
.report__flag { background: #111; color: #fff; font: 600 .75rem var(--sans); letter-spacing: 0; }
.report__brand, .report__id, .report dt, .report__h, .report__foot { font-family: var(--sans); }
.report__brand { font-weight: 700; letter-spacing: .02em; }
.report code { font-family: var(--code); }

/* Pricing: flat plans; the featured plan is a crimson field. */
.prices { gap: 2px; }
.price { background: var(--surface); border: 0; padding: 28px 26px; box-shadow: none; }
.price--hl { background: var(--btn); color: #fff; box-shadow: none; }
.price__name { font: 600 .9375rem var(--display); text-transform: none; letter-spacing: -.01em; color: var(--accent); }
.price .price__amt { font: 600 2.25rem/1.05 var(--display); letter-spacing: -.045em; }
.price--hl :is(.price__name, .price__amt, .price__amt small, .price__amt span, p, li) { color: #fff; }
.price--hl .btn { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.price--hl .btn:hover { background: #fff; color: #0a0a0a; border-color: #fff; }
.retest, .callout { border: 0; background: var(--surface); }
.retest .i, .callout .i { color: var(--accent); }
.cities a { border: 0; background: var(--surface); min-height: 48px; font-family: var(--display); font-weight: 600; transition: background-color .2s, color .2s; }
.cities a:hover { background: var(--ink); color: #0a0a0a; }
.cities .home-city { background: var(--btn); color: #fff; }
.cities .home-city .i { color: #fff; }
.cities small { font: 500 .8125rem var(--sans); letter-spacing: 0; text-transform: none; color: inherit; opacity: .85; }

/* Questions: flat bars. */
.faqs { border: 0; }
.faq { border: 0; background: var(--surface); margin-bottom: 2px; }
.faqwrap { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .faqwrap { grid-template-columns: 320px minmax(0, 1fr); } }
.faq summary { padding: 16px 20px; font: 600 1.0625rem/1.4 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }
.faq summary::after { border: 0; background: none; color: var(--accent); font: 300 1.5rem/1 var(--display); }
.faq p { padding: 0 60px 22px 20px; }

/* Call to action: a full crimson field. */
.ctaband { background: var(--btn); padding: 56px 0; }
.ctabox { background: none; border: 0; padding: 0; box-shadow: none; }
.ctabox h2 { font: 600 clamp(1.625rem, 1.1rem + 2vw, 2.875rem)/1.08 var(--display); letter-spacing: -.045em; color: #fff; }
.ctabox p, .contact a, .contact address { color: #fff; }
.contact .i { color: #fff; }
.ctabox .btn--primary { background: #0a0a0a; border-color: #0a0a0a; color: #fff; }
.ctabox .btn--primary:hover { background: #fff; color: #0a0a0a; border-color: #fff; }
.ctabox .btn--ghost { border-color: #fff; color: #fff; }
.ctabox .btn--ghost:hover { background: #fff; color: #0a0a0a; }
.contact a:hover { color: #fff; text-decoration: underline; }

/* Footer: flat, in columns. */
.ftr { background: var(--bg-2); border: 0; }
.ftr__g { font: 600 .875rem var(--display); text-transform: none; letter-spacing: 0; color: var(--accent); }
.ftr__base { background: none; }
.ftr__logo { background: #f1f1ee; }

/* On this page, the phone bar and the cookie choice: flat. */
.jump { background: var(--bg-2); border: 0; }
.jump a { border: 0; background: var(--surface); color: var(--text); font-family: var(--display); font-weight: 600; }
.jump a:hover { background: var(--ink); color: #0a0a0a; }
.dock { background: #0a0a0a; border-top: 0; }
.dock a { border: 2px solid var(--ink); font-family: var(--display); }
.dock .dock__main { background: var(--btn); border-color: var(--btn); }
.consent { background: var(--surface-2); border: 0; box-shadow: none; }

/* Console frames and diagrams: flat panels. */
.viz { background: var(--surface); border: 0; box-shadow: none; }
.viz__bar { border: 0; background: var(--surface-2); font: 500 .875rem var(--sans); color: var(--soft); }
.viz__dots { display: none; }
.viz figcaption { border: 0; color: var(--muted); }
.viz__path b, .legend, .chain__id { font-family: var(--sans); letter-spacing: 0; text-transform: none; }
.g-grid { stroke: none; }
.g-edge, .g-node--asset { stroke: #3a3a3a; }
.g-node { fill: var(--surface-2); stroke: #3a3a3a; }
.g-chain { stroke: var(--accent); filter: none; }
.g-label, .g-id, .g-head, .g-mark { font-family: var(--sans); }
.sev { font-family: var(--sans); font-weight: 700; letter-spacing: .03em; }
.trustbar { background: var(--surface); border: 0; }
.trustbar li { border: 0 !important; }
.trustbar .i { filter: none; color: var(--accent); }
.trustbar span { font: 400 .8125rem/1.45 var(--sans); }

/* The inquiry form. */
.inq { background: var(--surface); border: 0; padding: 26px; }
.inq input:not([type="checkbox"]), .inq select, .inq textarea { background: var(--bg-2); border: 0; border-bottom: 2px solid var(--rule-2); }
.inq input:not([type="checkbox"]):focus, .inq select:focus, .inq textarea:focus { border-bottom-color: var(--accent); }
.inq__chip span { border: 0; background: var(--surface-2); }
.inq__chip input:checked + span { background: var(--btn); color: #fff; }

/* Home: the service index and the scan-or-test comparison. */
.rail { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.rail a { position: relative; display: grid; grid-template-columns: 40px 1fr 20px; gap: 14px; align-items: center; min-height: 80px; padding: 18px 22px; background: var(--surface); text-decoration: none; color: inherit; transition: background-color .2s; }
.rail__n { font: 700 1rem var(--display); color: var(--accent); }
.rail__t b { display: block; font: 600 1.1875rem/1.3 var(--display); letter-spacing: -.025em; color: var(--ink); }
.rail__t i { display: block; margin-top: 2px; font-style: normal; font-size: 1rem; line-height: 1.45; color: var(--soft); }
.rail__tags { display: none; font: 500 .875rem var(--sans); color: var(--muted); text-align: right; }
.rail .i { color: var(--muted); transition: transform .2s; }
.rail a:hover { background: var(--ink); }
.rail a:hover :is(b, i, .rail__tags, .i, .rail__n) { color: #0a0a0a; }
.rail a:hover .i { transform: translateX(4px); }
@media (min-width: 700px) { .rail a { grid-template-columns: 40px 1fr auto 20px; } .rail__tags { display: block; } }
.note.sub { margin-top: 22px; font: 600 1rem var(--display); color: var(--ink); }
.versus { display: grid; gap: 2px; }
@media (min-width: 760px) { .versus { grid-template-columns: 1fr 1fr; } }
.versus__col { padding: 26px; background: var(--surface); border: 0; }
.versus__h { margin-bottom: 14px; font: 600 1rem var(--display); letter-spacing: -.01em; text-transform: none; color: var(--muted); }
.versus ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.versus li { position: relative; padding-left: 26px; color: var(--text); font-size: 1.0625rem; }
.versus li::before { content: "–"; position: absolute; left: 4px; color: var(--muted); }
.versus__col--hl { background: var(--btn); box-shadow: none; }
.versus__col--hl .versus__h, .versus__col--hl li { color: #fff; }
.versus__col--hl li::before { content: "✓"; color: #fff; font-weight: 700; }

/* ---------- Fold: closed details for supporting sections (the text stays in the page) ---------- */
.fold > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 16px; border: 1px solid var(--rule-2);
  border-radius: var(--r-sm); font: 600 .9375rem var(--display); color: var(--accent); background: rgba(120, 160, 210, .04); transition: border-color .2s, background-color .2s;
}
.fold > summary:hover { border-color: var(--accent-line); background: var(--accent-wash); }
.fold > summary .i { transition: transform .2s; }
.fold[open] > summary .i { transform: rotate(180deg); }
.fold[open] > summary { margin-bottom: 16px; }
.fold[open] > summary::before { content: none; }
/* The fold, in the editorial style (after the fold rules above so it wins). */
.fold > summary { border: 0; background: var(--surface); color: var(--ink); font-family: var(--display); }
.fold > summary:hover { background: var(--ink); color: #0a0a0a; }
.fold > summary:hover .i { color: #0a0a0a; }
.fold[open] > summary { margin-bottom: 18px; }

@media print { .fold > summary { display: none; } .fold::details-content { content-visibility: visible; } }

/* ---------- Print: light, plain, no chrome (the sample report PDF and any printed page) ---------- */
@media print {
  :root {
    --bg: #fff; --bg-2: #fff; --surface: #fff; --surface-2: #f3f3ee; --rule: #d4d4cc; --rule-2: #b8b8b0;
    --ink: #111; --text: #222; --soft: #333; --muted: #555; --accent: #111; --accent-ink: #fff; --btn: #111; --ok: #111;
    --accent-wash: transparent; --accent-line: #999; --cyan: #245; --cyan-wash: transparent;
    --crit: #a11; --high: #a50; --med: #860; --low: #146; color-scheme: light;
  }
  html, body { background: #fff; color: #111; }
  .hdr, .jump, .dock, .consent, .skip, .trustbar, .ctaband, .ftr, .crumbs, form, .faqwrap, .viz__bar, .nav, .btn { display: none !important; }
  .sec { padding: 14px 0; break-inside: auto; }
  .card, .report, .tbl-wrap, figure { break-inside: avoid; box-shadow: none !important; }
  .hero__facts, .hero__facts div, .viz { background: #fff !important; }
  .hero__facts { border-color: #ccc; }
  a { color: #111; text-decoration: underline; }
}