/* ═══════════════════════════════════════════════════════════════════════════
   SurvAIHealth — one stylesheet behind every page on the marketing site, and
   the same design system as the printed collateral in /print.

   WHAT THIS REPLACED. Each page carried its own inline <style> block — 38KB of
   it on index.html alone — in the house style of generated design: gradient
   heroes, rounded cards with an accent rail, a geometric sans, cyan glow.
   Competent and anonymous. It would have sat equally well on a crypto wallet
   as on software that reads a resident chart.

   THE DIRECTION IS INSTITUTIONAL, NOT DECORATIVE. What reads as credible to a
   facility is the visual language of the documents they already trust —
   survey forms, policy manuals, clinical references. Hairline rules instead of
   drop shadows. Flat ink instead of gradients. Square corners. Real tables with
   real alignment. Hierarchy built from type rather than from colour.

   TYPE. Libre Franklin carries headlines, labels and anything tabular —
   Franklin Gothic lineage, which is American newspapers, government forms and
   institutional signage: authoritative and plain. Source Serif 4 carries body
   copy, because a serif at length reads as considered rather than promotional.
   Together they say "reference document", which is the claim the product makes
   about itself.

   COLOUR. One ink, one structural blue, greys, and a single reserved accent.
   --mark appears ONLY on a risk state. An accent spent everywhere is not an
   accent, and on a compliance product a red that means nothing is worse than
   no red at all.

   THE SITE IS LIGHT-ONLY AND SAYS SO. Every surface sets its own background
   and its own colour rather than inheriting from the browser, so a visitor
   with a dark OS gets the page as designed rather than dark text on a dark
   ground. That is a decision, not an omission.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CONTEXT TOKENS, AND WHY THEY ARE THE WHOLE POINT ──────────────────────
   Text colour is set ONCE per context, never per element. Every rule below
   paints with --fg / --fg-soft / --fg-mute / --line, and a section that
   changes its background redeclares those four. A light card dropped inside a
   dark section redeclares them back.

   This exists because the alternative failed four times in one day. Writing
   `h2 { color: var(--ink) }` and then `.ink h2 { color: #fff }` means every
   new element needs a matching override, every missed one renders dark text
   on a dark ground, and the text is PRESENT in the DOM — so it is invisible
   on screen while reading as fine in the source. A headline, a <strong>, a
   whole numbered list and a form heading each disappeared that way.

   With context tokens there is nothing to forget: an element cannot be the
   wrong colour for the surface it sits on, because it does not know its own
   colour. `check-contrast.mjs` enforces it at build time. */
:root{
  --ink:#11212e;
  --navy:#11395c;
  --navy-lift:#1a4d79;
  --steel:#41566a;
  --mute:#6f8294;
  --rule:#c7d1da;
  --rule-soft:#e3e9ee;
  --tint:#eef2f5;
  --paper:#ffffff;
  --mark:#95302a;
  --ok:#1c6149;
  --sans:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  --serif:'Source Serif 4','Source Serif Pro',Georgia,'Times New Roman',serif;
  --gut:clamp(16px,5vw,40px);
  --max:1120px;

  /* the four a context owns */
  --fg:#11212e;
  --fg-soft:#41566a;
  --fg-mute:#5e7080;
  --line:#e3e9ee;
  --accent:#11395c;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--fg);font-family:var(--serif);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--navy-lift);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.wrap-narrow{max-width:760px;margin:0 auto;padding:0 var(--gut)}

/* ── wordmark ──────────────────────────────────────────────────────────── */
.wm{font-family:var(--sans);font-weight:700;letter-spacing:-.018em;color:var(--fg);
  font-size:21px;line-height:1;display:inline-block}
.wm span{color:var(--accent)}
.wm-sub{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--fg-mute);margin-top:6px}

/* ── type ──────────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--sans);color:var(--fg);margin:0;text-wrap:balance}
h1{font-weight:700;letter-spacing:-.022em;line-height:1.04;
  font-size:clamp(34px,5.6vw,58px)}
h2{font-weight:700;letter-spacing:-.016em;line-height:1.1;
  font-size:clamp(25px,3.4vw,36px)}
h3{font-weight:600;letter-spacing:-.008em;line-height:1.2;font-size:20px}
h4{font-weight:600;letter-spacing:-.004em;line-height:1.3;font-size:17px}
p{margin:0 0 1em;color:var(--fg-soft)}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.5;color:var(--fg-soft)}
.note{font-family:var(--sans);font-size:14px;line-height:1.5;color:var(--fg-mute)}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);display:block}
.label{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute)}
strong,b{font-weight:600;color:var(--fg)}

/* ── rules, the main structural device ─────────────────────────────────── */
.r-short{width:56px;height:3px;background:var(--accent);margin:20px 0}
.sec{border-top:2px solid var(--fg);padding-top:9px;margin-bottom:18px}
.sec .label{color:var(--fg)}
.sec-soft{border-top:1px solid var(--line);padding-top:9px;margin-bottom:18px}

/* ── sections ──────────────────────────────────────────────────────────── */
section{padding:clamp(44px,6vw,78px) 0}
section.tight{padding:clamp(30px,4vw,52px) 0}
.ink{background:var(--ink);--fg:#ffffff;--fg-soft:#c6d4de;--fg-mute:#afc5d4;
  --line:#2b4254;--accent:#9dc2dd;color:var(--fg)}
.navy{background:var(--navy);--fg:#ffffff;--fg-soft:#cfe2f0;--fg-mute:#a9cbe2;
  --line:#2c5a84;--accent:#cfe2f0;color:var(--fg)}
.tint{background:var(--tint);--line:#d4dde4}
/* A light island inside a dark section declares the light context back. The
   form card living inside .ink is exactly this case, and its heading rendered
   white-on-white before the tokens existed. */
.panel-light,.form{--fg:#11212e;--fg-soft:#41566a;--fg-mute:#5e7080;--line:#e3e9ee;
  --accent:#11395c;color:var(--fg)}

/* ── header ────────────────────────────────────────────────────────────── */
.bar{background:var(--ink);--fg:#ffffff;--fg-soft:#c6d4de;--fg-mute:#afc5d4;
  --line:#2b4254;--accent:#9dc2dd;color:var(--fg);padding:16px 0}
.bar .wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.bar nav{margin-left:auto;display:flex;gap:clamp(12px,2vw,26px);flex-wrap:wrap}
.bar nav a{font-family:var(--sans);font-weight:500;font-size:14px;color:var(--fg-soft)}
.bar nav a:hover{color:#fff}
.bar .cta{font-family:var(--sans);font-weight:600;font-size:14px;color:#fff;
  border:1px solid #42617c;padding:7px 14px}
.bar .cta:hover{background:#1c344a;text-decoration:none;border-color:#6ea8ce}

/* ── strip of claims under a masthead ──────────────────────────────────── */
.strip{background:var(--navy);--fg:#ffffff;--fg-soft:#cfe2f0;--fg-mute:#cfe2f0;
  --line:#2c5a84;--accent:#cfe2f0;color:var(--fg-soft);padding:12px 0}
.strip .wrap{display:flex;gap:clamp(14px,3vw,38px);flex-wrap:wrap;
  font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase}

/* ── grids ─────────────────────────────────────────────────────────────── */
.cols{display:grid;gap:clamp(22px,3.4vw,42px)}
.cols-2{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.split{display:grid;gap:clamp(26px,4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  align-items:start}

/* a numbered mechanism column */
.mech .n{font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent)}
.mech h3{margin:6px 0 8px}
.mech p{font-size:16px}

/* ── ruled lists: items separated by hairlines, never by bullets ───────── */
.ruled{list-style:none;margin:0;padding:0}
.ruled li{border-bottom:1px solid var(--line);padding:12px 0;font-size:16px;
  line-height:1.45;color:var(--fg)}
.ruled li:last-child{border-bottom:0}
.ruled li .k{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--accent)}
.ruled.quiet li .k{color:var(--fg-mute)}

/* numbered as a ledger, not as circles */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:flex;gap:18px;align-items:baseline;
  border-bottom:1px solid var(--line);padding:15px 0}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--sans);
  font-weight:700;font-size:14px;color:var(--accent);flex:none;width:30px;
  letter-spacing:.04em}
.steps .t{font-size:16px;line-height:1.45;color:var(--fg-soft)}
.steps .t b{display:block;font-family:var(--sans);font-weight:600;font-size:16px;
  color:var(--fg);margin-bottom:2px;letter-spacing:-.004em}

/* ── tables: alignment is the design ───────────────────────────────────── */
.tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tbl caption{caption-side:top;text-align:left;font-family:var(--sans);font-weight:600;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);
  padding-bottom:9px;border-bottom:2px solid var(--fg)}
.tbl td{border-bottom:1px solid var(--line);padding:11px 2px;
  font-family:var(--sans);font-size:15px;color:var(--fg);vertical-align:baseline}
.tbl td.n{text-align:right;font-weight:600}
.tbl td.n.up{color:var(--ok)} .tbl td.n.dn{color:var(--mark)}
.tbl tr.sum td{border-bottom:0;border-top:2px solid var(--fg);font-weight:700;
  font-size:17px;padding-top:13px}
.scroll-x{overflow-x:auto}

/* the four chart-check states, set as the key they are */
.states{width:100%;border-collapse:collapse}
.states td{border-bottom:1px solid var(--line);padding:12px 2px;
  vertical-align:baseline}
.states tr:last-child td{border-bottom:0}
.states .st{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;padding-right:18px;width:120px}
.states .ds{font-size:15px;line-height:1.4;color:var(--fg-soft)}
.st-look{color:var(--mark)} .st-read{color:var(--navy)}
.st-clear{color:var(--ok)} .st-not{color:#8a6a1f}

/* ── a statement set apart by a rule, not by a box ─────────────────────── */
.standfirst{border-top:2px solid var(--fg);padding-top:16px}
.callout{background:var(--tint);border-top:3px solid var(--navy);padding:22px 24px;
  --fg:#11212e;--fg-soft:#41566a;--fg-mute:#5e7080;--line:#d4dde4;--accent:#11395c;
  color:var(--fg)}

/* ── buttons ───────────────────────────────────────────────────────────── */
.btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:16px;
  padding:14px 26px;background:var(--navy);color:#fff;border:0;cursor:pointer;
  text-align:center;letter-spacing:-.004em}
.btn:hover{background:var(--navy-lift);text-decoration:none}
.btn-wide{display:block;width:100%}
.btn-ghost{background:transparent;color:var(--fg);border:1px solid #42617c}
.btn-ghost:hover{background:#1c344a;border-color:#6ea8ce}

/* ── forms ─────────────────────────────────────────────────────────────── */
.form{background:var(--paper);border:1px solid var(--rule);padding:clamp(20px,3vw,30px)}
.form h2{font-size:24px;margin-bottom:6px}
.form .sub{font-family:var(--sans);font-size:15px;color:var(--fg-mute);margin-bottom:20px}
.field{margin-bottom:14px}
.field label{display:block;font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--fg-soft);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:var(--sans);
  font-size:16px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);
  padding:11px 12px;border-radius:0}
.field textarea{min-height:96px;resize:vertical;line-height:1.5}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;
  border-color:var(--navy);box-shadow:0 0 0 3px rgba(17,57,92,.14)}
.two{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.form .fine{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--fg-mute);
  margin-top:14px}
/* "(optional)" beside a label, so a visitor can see what they may skip rather
   than assuming every field is required and abandoning at the one they cannot
   answer quickly. */
.field .opt{font-weight:400;color:var(--fg-mute);font-size:12px}
/* THE CONSENT TICK. Laid out as a row so the box and its sentence read as one
   control and the whole line is clickable (the <label> wraps both). Set at
   body weight rather than as fine print: this is a permission the visitor is
   giving, and shrinking it toward the legal furniture is how a tick stops
   being a decision. The checkbox keeps the accent so it is visibly a control
   and not a bullet. */
/* THE INTENT RADIOS. A fieldset for the semantics a screen reader needs, with
   the browser's default border and padding removed so it reads as part of the
   form rather than as a box bolted into it. The legend is set like the other
   field labels so nothing announces itself as a new kind of question. */
.intent{border:0;padding:0;margin:0 0 16px}
.intent legend{padding:0;font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:8px}
.intent label{display:flex;gap:10px;align-items:center;cursor:pointer;
  font-family:var(--sans);font-size:13.5px;line-height:1.45;color:var(--fg);
  padding:3px 0}
.intent input{flex:0 0 auto;width:16px;height:16px;margin:0;
  accent-color:var(--accent);cursor:pointer}

.consent{display:flex;gap:10px;align-items:flex-start;cursor:pointer;
  margin:-2px 0 16px;font-family:var(--sans);font-size:13.5px;
  line-height:1.45;color:var(--fg)}
.consent input{flex:0 0 auto;width:17px;height:17px;margin:1px 0 0;
  accent-color:var(--accent);cursor:pointer}
.consent span{min-width:0}
/* The call line sits under the form's fine print and has to read as an offer,
   not as more small print — a rule above it separates the two. */
.form .call-line{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.form .call-line a{font-weight:600;white-space:nowrap}

/* ── the worked example card ───────────────────────────────────────────────
   A single worked example, set as the table it is. An animated carousel of
   invented screenshots is a SaaS trope and, worse, every number in one is made
   up — which on a compliance product contradicts the thing being sold. This is
   the shape of a real finding, with the basis printed under it.

   It lived in index.html's own <style> block until ads.html needed it too. The
   paid page led entirely on compliance and carried no number at all, which left
   the single most persuasive element on the site off the one page we buy
   traffic to. Shared here rather than copied, so the two pages cannot drift
   into showing different versions of the same claim. */
.example{--fg:#11212e;--fg-soft:#41566a;--fg-mute:#5e7080;--line:#e3e9ee;
  --accent:#11395c;background:var(--paper);color:var(--fg);padding:26px 28px}
.example .cap{font-family:var(--sans);font-weight:600;font-size:12px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--fg-mute);
  padding-bottom:10px;border-bottom:2px solid var(--fg);margin-bottom:4px}
.example dl{margin:0}
.example .row{display:flex;gap:16px;padding:11px 0;
  border-bottom:1px solid var(--line);font-family:var(--sans);font-size:15px}
.example .row dt{color:var(--fg-mute);flex:0 0 42%;margin:0}
.example .row dd{margin:0;color:var(--fg);font-weight:600}
.example .basis{font-family:var(--sans);font-size:13px;line-height:1.5;
  color:var(--fg-mute);margin-top:14px}

/* ── ONE FOCAL POINT, WHICH IS NOT THE SAME AS "MORE POP" ──────────────────
   The restraint here is the positioning: hairline rules, flat ink, no
   gradients, one reserved accent. It reads as a reference document, which is
   the claim the product makes about itself, and a compliance tool that looks
   like a crypto landing page argues against its own pitch. None of that
   changes.

   What the page did lack is somewhere for the eye to LAND. Every element below
   the headline carried roughly equal weight, which is elegant on a considered
   read and useless in the five seconds a paid click gives you. So exactly one
   thing gets size: the figure the whole card exists to deliver.

   A number set large in a reference document is native to the form — it is a
   total on a form, not a splash. The accent rule above it is the same device
   the page already uses everywhere else. */
.example .row.headline-row{align-items:baseline;padding-top:16px;margin-top:4px;
  border-top:2px solid var(--fg)}
.example .row.headline-row dt{color:var(--fg);font-weight:600;align-self:center}
.example .row.headline-row dd{font-family:var(--sans);font-weight:700;
  font-size:clamp(30px,4.4vw,40px);letter-spacing:-.02em;line-height:1;
  color:var(--accent);font-variant-numeric:tabular-nums}
.example .row.headline-row .per{display:block;font-family:var(--sans);font-weight:600;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-mute);
  margin-top:6px}
/* ── the ads hero: three blocks, and the ORDER CHANGES ON A PHONE ───────────
   `.split` collapses to one column by source order, so putting the worked
   example in the left column pushed the form from 1,064px down to 1,484px on a
   390px screen — measured, not guessed. On a page where every visitor was paid
   for, that is two full screens of scrolling before anyone can convert.

   So pitch, card and form are three siblings and the layout places them:
     wide   — pitch and card stacked on the left, form on the right
     narrow — pitch, then FORM, then the card
   The card is the reason to believe, which is worth reading; it is not worth
   reading BEFORE the thing it is meant to make you do. */
.hero-split{grid-template-columns:minmax(0,1fr)}
.hero-split .pitch{order:1}
.hero-split .form{order:2}
.hero-split .example-inline{order:3;margin-top:0}
@media (min-width:860px){
  .hero-split{grid-template-columns:1fr 1fr;
    grid-template-areas:"pitch form" "card form";row-gap:26px}
  .hero-split .pitch{grid-area:pitch}
  .hero-split .form{grid-area:form}
  .hero-split .example-inline{grid-area:card}
}

/* ── the public CMS lookup ─────────────────────────────────────────────────
   Deliberately built from devices the page already owns — the .example card's
   rules, the .sec heading bar, the existing button — rather than a new visual
   idiom. A tool bolted onto a page announces itself as a tool; this should read
   as part of the same document. */
.lookup-form{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-top:22px}
.lookup-form .field{margin-bottom:0;flex:1 1 320px;min-width:0}
.lookup-form .field.lk-state{flex:0 0 110px}
.lookup-form .btn{flex:0 0 auto}
/* ── TWO COLUMNS: WHAT WE ASK ON THE LEFT, WHAT YOU GET ON THE RIGHT ────────
   The hero's grammar is copy left, artifact right. This section used to run
   copy across the left and leave the whole top-right empty, so the page's one
   interactive moment read as a paragraph rather than as something to do. The
   grid is `.split`'s auto-fit, so it is two columns where there is room and one
   below ~320px per track, with no breakpoint to maintain.
   The answer renders in the RIGHT column, where the preview stood — so what
   arrives appears exactly where the shape promised it, and on a desktop it no
   longer pushes the form up the page. */
.lk-split{grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr))}
.lk-peek{background:var(--paper);border:1px solid var(--rule);
  padding:clamp(18px,2.6vw,26px);align-self:start}
.lk-peek .cap{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute)}
.peek-rows{margin:14px 0 0}
.peek-row{display:flex;gap:16px;align-items:center;padding:12px 0;
  border-bottom:1px solid var(--line);font-family:var(--sans);font-size:15px}
.peek-row:last-of-type{border-bottom:0}
.peek-row dt{color:var(--fg-mute);flex:0 0 40%;margin:0}
.peek-row dd{margin:0;flex:1 1 auto;min-width:0}
/* A BAR BELONGS TO NOBODY. Inventing a specimen finding here would have to put
   it on some building, and a plausible-looking one is how a real facility ended
   up named on this site with fabricated deficiencies attached. */
/* NAMED peek-bar, NOT bar: `.bar` is already this site's top navigation, and
   that rule sets --line:#2b4254 on itself. A `.bar` here therefore inherited the
   NAV's dark ink line colour, so these slots rendered almost black and read as
   REDACTION — the wrong message entirely on a product about disclosure. It also
   silently pulled in --fg:#ffffff and the rest of the nav's variable set.
   Measured, not guessed: computed background was rgb(43,66,84) while the
   element's own --line resolved to #d4dde4. */
.peek-row .peek-bar{display:block;height:10px;width:100%;border-radius:2px;
  background:var(--line)}
/* The preview is a diagram, so it steps back from the live card beside it. */
.lk-peek{opacity:.72}

.lk-out{margin-top:0}
.lk-card{background:var(--paper);border:1px solid var(--rule);padding:clamp(20px,3vw,28px);
  max-width:760px}
.lk-card .cap{font-family:var(--sans);font-weight:600;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-mute)}
.lk-card h3{margin-bottom:4px}
.lk-rows{margin:16px 0 0}
.lk-rows .row{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);
  font-family:var(--sans);font-size:15px}
.lk-rows .row:last-child{border-bottom:0}
.lk-rows dt{color:var(--fg-mute);flex:0 0 34%;margin:0}
.lk-rows dd{margin:0;color:var(--fg);font-weight:600}
/* THE GAP IS THE OFFER, so the count is the one thing set larger than the rows
   above it — the same move as the figure on the worked example, for the same
   reason: the eye needs one place to land. */
.lk-gap{font-family:var(--sans);font-size:17px;line-height:1.5;color:var(--fg);
  margin:18px 0 0;padding-top:16px;border-top:2px solid var(--fg)}
.lk-gap strong{color:var(--accent)}
.lk-cta{margin-top:18px}
.lk-src{margin-top:16px}
.lk-list{list-style:none;margin:14px 0 0;padding:0}
.lk-list li{border-top:1px solid var(--line)}
.lk-list li:last-child{border-bottom:1px solid var(--line)}
.lk-pick{display:flex;gap:14px;align-items:baseline;width:100%;text-align:left;
  background:transparent;border:0;cursor:pointer;padding:12px 0;font-family:var(--sans);
  font-size:15px;color:var(--fg)}
.lk-pick:hover{background:var(--tint)}
.lk-pick .n{font-weight:600}
.lk-pick .w{color:var(--fg-mute);font-size:14px}
/* A failure is a different thing from a finding and must not be mistaken for
   one — least of all for "your facility is clean". */
.lk-problem{border-left:3px solid var(--mark)}
.lk-problem h3{color:var(--mark)}

/* ── footer ────────────────────────────────────────────────────────────── */
.foot{background:var(--ink);--fg:#ffffff;--fg-soft:#c6d4de;--fg-mute:#afc5d4;
  --line:#2b4254;--accent:#b9cdda;color:var(--fg-mute);padding:48px 0 30px;
  font-family:var(--sans);font-size:14px}
.foot .top{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;
  padding-bottom:24px;border-bottom:1px solid var(--line)}
.foot .links{margin-left:auto;display:flex;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap}
.foot a{color:var(--accent)}
.foot a:hover{color:#fff}
.foot .bottom{padding-top:20px;font-size:12.5px;line-height:1.6;color:var(--fg-mute)}

/* ── skip link ─────────────────────────────────────────────────────────── */
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--gut);top:10px;z-index:50;background:#fff;color:var(--ink);
  padding:10px 16px;font-family:var(--sans);font-weight:600}