/* ==========================================================================
   THE WEBSITE CHECKUP LAYER
   Loaded after art.css, before lp.css. Like lp.css it defines no colour, no
   type scale and no spacing of its own: every value below is a token the
   rest of the site already sets, and every component it can reuse — .btn,
   .f, .eyebrow, .mono, .arrow — it reuses.

   Five things live here, and nothing else (the entry, the tool's front door
   on the homepage and /website-help/, is checkup-entry.css now, so a page
   that only shows the address box does not download the report):

     2. the form card in the checkup page's own hero
     3. the progress list, the only thing on this site that reports state
        over time
     4. .ck-mark, one severity glyph used by every part of the report
     5. the report: masthead, overview, the areas, fix-first, the findings
        as rows that open, the bottom line, the three doors, the note
     6. print

   SEVERITY IS NEVER CARRIED BY COLOUR ALONE. Every flag, tile, card and row
   has a WORD in it and a SHAPE in front of that word which is different per
   level: a triangle, a diamond, a disc, a tick, a hollow square. Print the
   report in greyscale and it still reads; hand it to somebody who cannot
   separate red from amber and it still reads. The colour is a third channel,
   not the channel.

   The report was rewritten in the September 2026 pass. The scanner grew
   five areas (mobile, structured data, social, AI access, email); the report
   grew an area grid and lost the forty full-height cards that made a clean
   site's report eighteen thousand pixels long. A finding is a row now, and a
   row opens.
   ========================================================================== */

/* --- 2. the form card in the hero -----------------------------------------
   Same construction as .lp-form: white paper standing on the navy panel, and
   the same token switch run in reverse so every label, border and focus ring
   inside it is drawn for a light ground. */
.ck-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: start; }
.phero-ck .phero-copy h1 { max-width: 14ch; }
.phero-ck .phero-copy .lead { max-width: 46ch; }

.ck-form-card {
  position: relative; z-index: 2;
  background: var(--paper);
  border-radius: var(--radius-panel);
  padding: clamp(22px, 2.6vw, 34px);
  box-shadow: var(--lift-3);
  scroll-margin-top: var(--s9);

  --bg: var(--paper);          --bg-2: var(--paper-2);
  --surface: var(--paper);     --surface-2: var(--paper-2);
  --text: var(--ink);          --text-2: var(--ink-2);
  --text-dim: var(--ink-3);    --text-faint: var(--ink-4);
  --rule: var(--line);         --rule-strong: var(--line-2);
  --surface-edge: var(--line); --control-edge: var(--edge);
  --link: var(--blue);         --link-hover: var(--blue-deep);
  --mark: var(--blue);         --keyline: var(--blue);  --focus: var(--blue);
  --state-warn: var(--warn);   --state-fault: var(--fault); --state-ok: var(--ok);
  --film: var(--blue-film);
  color: var(--text);
}
.ck-form-eyebrow { margin-bottom: var(--s4); }
.ck-form-h {
  font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3);
  color: var(--text); margin-bottom: var(--s6);
}
.ck-form .btn { margin-top: var(--s5); }
.ck-form-how {
  display: grid; gap: var(--s2);
  margin-top: var(--s6); padding-top: var(--s5);
  border-top: 1px solid var(--rule);
  counter-reset: ckhow;
}
.ck-form-how li {
  counter-increment: ckhow;
  display: flex; align-items: baseline; gap: var(--s3);
  font-size: var(--t-sm); color: var(--text-dim);
}
.ck-form-how li::before {
  content: counter(ckhow, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--t-mono); color: var(--mark);
  letter-spacing: var(--tr-mono); flex: none;
}
.ck-form-how b { font-weight: var(--w-bold); color: var(--text-2); }

@media (max-width: 62em) {
  .ck-grid { grid-template-columns: minmax(0, 1fr); }
  .ck-form-card { margin-top: var(--s8); }
}

/* --- 3. the progress list --------------------------------------------------
   The one component on this site that reports state over time. Three states,
   and each one is a word plus a shape as well as a colour: waiting is a
   hollow square, running is a square with a pulsing fill, done is a tick.
   Squares, not circles: a pixel is the site's brand mark and it is never
   rounded.

   The counter and the bar are REAL: the number is the stage the scanner has
   actually reached and the bar is the fraction of stages that have actually
   finished, set from the stream by checkup.js. Neither moves on a timer, and
   if the scan stalls they stop where they are, which is the honest thing for
   them to do. The pulse is the only looping animation on the page; it means
   "this is still happening", and it stops the moment the stage finishes. */
.ck-stage-sec { padding-block: 0; }
.ck-stage:empty { display: none; }
.ck-stage-sec:has(.ck-stage:empty) { display: none; }

.ck-progress {
  --ck-p: 0;
  border: 1px solid var(--surface-edge);
  border-radius: var(--radius-panel);
  background: var(--surface);
  padding: clamp(20px, 2.6vw, 32px);
  box-shadow: var(--lift-1);
  margin-top: var(--s9);
}
.ck-progress-top {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: var(--s3) var(--s5);
}
.ck-progress-h {
  font-size: var(--t-h4); font-weight: var(--w-black);
  letter-spacing: var(--tr-h4); color: var(--text);
  overflow-wrap: anywhere; min-width: 0;
}
.ck-progress-h b { color: var(--mark); font-weight: inherit; }
.ck-progress-n {
  flex: none;
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
.ck-bar {
  margin-top: var(--s5);
  height: 4px; border-radius: 999px;
  background: var(--rule); overflow: hidden;
}
.ck-bar > i {
  display: block; height: 100%; width: calc(var(--ck-p) * 100%);
  background: var(--mark);
  transition: width var(--m-panel) var(--e-out);
}
.ck-steps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3) var(--s7); margin-top: var(--s6);
}
.ck-step {
  display: grid; grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--s4); align-items: center;
  font-size: var(--t-sm); color: var(--text-faint);
  transition: color var(--m-state) var(--e-out);
}
.ck-step::before {
  content: ""; width: 12px; height: 12px; margin-left: 3px;
  border: 2px solid var(--rule-strong);
  background: transparent;
}
.ck-step[data-state="run"] { color: var(--text); font-weight: var(--w-bold); }
.ck-step[data-state="run"]::before {
  border-color: var(--mark);
  background: var(--mark);
  animation: ck-pulse 1100ms var(--e-inout) infinite;
}
.ck-step[data-state="done"] { color: var(--text-dim); }
.ck-step[data-state="done"]::before {
  border-color: var(--state-ok); background: var(--state-ok);
  -webkit-mask: var(--ck-tick) center / 9px 9px no-repeat;
  mask: var(--ck-tick) center / 9px 9px no-repeat;
}
:root {
  --ck-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1.5 6.4 4.4 9.3 10.5 3' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
}
@keyframes ck-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (max-width: 40em) { .ck-steps { grid-template-columns: minmax(0, 1fr); } }

/* --- 4. the severity system -------------------------------------------------
   ONE glyph, used by the tiles, the flags, the area cards, the rows and the
   priority list. Five levels, five different SHAPES. It is decorative in the
   markup (aria-hidden), because the word next to it already says the same
   thing and announcing both would read every finding twice.

   Each level also owns three SURFACES, set once on the element as custom
   properties and read by everything inside it:
     --ck-tone    the colour itself: the mark, the word, the rail, the arc
     --ck-film    a light wash of it, for the ground of a tile or a badge
     --ck-edge    the same at a third strength, for a border
   The first pass of this report carried the level on a 2px border and an
   11px mark and read as a wireframe. Now the level is a rail, a tinted
   plate, a badge and a number, and the mark sits in a plate of its own so
   a triangle is 22px of colour rather than 11. Still never colour alone:
   the shape and the word are on every one of them. */
.ck-mark {
  flex: none;
  display: inline-block; width: 11px; height: 11px;
  background: currentColor;
}
.ck-mark[data-sev="critical"]    { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ck-mark[data-sev="important"]   { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ck-mark[data-sev="recommended"] { border-radius: 999px; }
.ck-mark[data-sev="passed"] {
  -webkit-mask: var(--ck-tick) center / 11px 11px no-repeat;
  mask: var(--ck-tick) center / 11px 11px no-repeat;
}
.ck-mark[data-sev="unknown"] { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }

/* The mark on a plate: a square of the film with the shape in the middle.
   Squares, not circles: a pixel is the brand mark. */
.ck-plate {
  flex: none;
  display: inline-grid; place-items: center;
  width: var(--ck-plate, 28px); height: var(--ck-plate, 28px);
  background: var(--ck-film, var(--surface-2));
  border-radius: var(--radius-chip);
  color: var(--ck-tone, var(--text-faint));
}
.ck-plate .ck-mark { width: 12px; height: 12px; }
/* On a tinted band the plate stands on white with a hairline of the edge,
   so it does not sink into a ground of the same film. */
.ck-area-top .ck-plate, .ck-sec-head .ck-plate { background: var(--surface); box-shadow: 0 0 0 1px var(--ck-edge); }
.ck-plate .ck-mark[data-sev="passed"] { -webkit-mask-size: 12px 12px; mask-size: 12px 12px; }

.ck-report [data-sev="critical"]    { --ck-tone: var(--state-fault); --ck-film: var(--fault-film); --ck-edge: rgba(179, 45, 29, 0.32); }
.ck-report [data-sev="important"]   { --ck-tone: var(--state-warn);  --ck-film: var(--warn-film);  --ck-edge: rgba(143, 89, 8, 0.32); }
.ck-report [data-sev="recommended"] { --ck-tone: var(--mark);        --ck-film: var(--blue-film);  --ck-edge: rgba(14, 97, 209, 0.30); }
.ck-report [data-sev="passed"]      { --ck-tone: var(--state-ok);    --ck-film: var(--ok-film);    --ck-edge: rgba(11, 122, 85, 0.30); }
.ck-report [data-sev="unknown"]     { --ck-tone: var(--text-faint);  --ck-film: var(--surface-2);  --ck-edge: var(--line-2); }

/* The flag: shape, word, colour, in that order of importance. A badge with
   a ground of its own now, so it reads from across a room. */
.ck-flag {
  flex: none;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: var(--w-mid);
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--ck-edge, var(--line-2));
  background: var(--ck-film, var(--surface-2));
  color: var(--ck-tone, var(--text-faint));
  white-space: nowrap;
}

/* --- 5. the report ---------------------------------------------------------
   Masthead, overview, the areas, fix-first, the findings, the bottom line,
   the three doors, the note. The order is the order somebody reads it in:
   what did you check and how did it come out, where is the trouble, what
   should I do about it, and then the evidence. */
.ck-report { margin-top: var(--s9); scroll-margin-top: calc(var(--hdr-h) + 16px); }
/* No ring on the report itself: it carries tabindex="-1" so focus can be
   moved to it when it arrives, and it is never reachable by Tab, so a ring
   here could never be the answer to "where am I?". */
.ck-report:focus, .ck-report:focus-visible { outline: none; }

/* --- the masthead --------------------------------------------------------- */
.ck-rpt-head {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: var(--s5) var(--s7);
  padding-bottom: var(--s6);
  border-bottom: 2px solid var(--keyline);
}
.ck-rpt-id { min-width: 0; }
.ck-rpt-site {
  margin-top: var(--s4);
  font-size: var(--t-h3); font-weight: var(--w-black);
  line-height: var(--lh-h3); letter-spacing: var(--tr-h3);
  color: var(--text); overflow-wrap: anywhere;
}
.ck-rpt-when {
  margin-top: var(--s3);
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.06em; color: var(--text-faint);
}
.ck-status {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--s3);
  padding: 11px 20px 11px 14px;
  border: 1px solid var(--ck-status-edge, var(--line-2)); border-radius: var(--radius-pill);
  font-size: var(--t-sm); font-weight: var(--w-black);
  letter-spacing: var(--tr-text);
  color: var(--ck-status-tone, var(--text-faint));
  background: var(--ck-status-film, var(--surface-2));
}
.ck-status-mark { flex: none; width: 14px; height: 14px; background: currentColor; }
.ck-status-w { white-space: nowrap; }
.ck-report[data-status="work"]      { --ck-status-tone: var(--state-fault); --ck-status-film: var(--fault-film); --ck-status-edge: rgba(179, 45, 29, 0.32); }
.ck-report[data-status="attention"] { --ck-status-tone: var(--state-warn);  --ck-status-film: var(--warn-film);  --ck-status-edge: rgba(143, 89, 8, 0.32); }
.ck-report[data-status="better"]    { --ck-status-tone: var(--mark);        --ck-status-film: var(--blue-film);  --ck-status-edge: rgba(14, 97, 209, 0.30); }
.ck-report[data-status="good"]      { --ck-status-tone: var(--state-ok);    --ck-status-film: var(--ok-film);    --ck-status-edge: rgba(11, 122, 85, 0.30); }
.ck-report[data-status="error"]     { --ck-status-tone: var(--text-faint);  --ck-status-film: var(--surface-2);  --ck-status-edge: var(--line-2); }
.ck-report[data-status="work"] .ck-status-mark      { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ck-report[data-status="attention"] .ck-status-mark { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.ck-report[data-status="better"] .ck-status-mark    { border-radius: 999px; }
.ck-report[data-status="good"] .ck-status-mark {
  -webkit-mask: var(--ck-tick) center / 14px 14px no-repeat;
  mask: var(--ck-tick) center / 14px 14px no-repeat;
}
.ck-report[data-status="error"] .ck-status-mark {
  background: transparent; box-shadow: inset 0 0 0 2px currentColor;
}

/* --- the overview ----------------------------------------------------------
   The verdict on the left, the ring on the right, the four counts under
   both. The ring is a picture of the arithmetic the caption states; it is
   never the only copy of the fact. */
.ck-overview {
  margin-top: var(--s7);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "copy ring" "tiles tiles";
  gap: var(--s7) clamp(24px, 4vw, 64px);
  align-items: center;
}
.ck-overview-copy { grid-area: copy; min-width: 0; }
.ck-ring { grid-area: ring; }
.ck-tiles { grid-area: tiles; }
.ck-head { max-width: 20ch; }
.ck-sub { margin-top: var(--s5); max-width: 52ch; color: var(--text-dim); }
.ck-overview-line { margin-top: var(--s5); font-size: var(--t-body); color: var(--text-2); max-width: 56ch; line-height: 1.6; }
.ck-note { margin-top: var(--s5); font-size: var(--t-sm); color: var(--text-dim); }

/* The ring speaks the same language as the tiles: the arc is the report's
   status tone, the rest of the circle is that tone's film, and the whole
   thing stands on a plate of the same film. Passed is the solid part;
   everything else is the pale part; there is nothing else on it to read. */
.ck-ring {
  position: relative; margin: 0;
  width: clamp(188px, 17vw, 216px); aspect-ratio: 1;
  display: grid; place-items: center;
  padding: 14px;
  border-radius: 50%;
  background: var(--ck-status-film, var(--surface-2));
  color: var(--ck-status-tone, var(--mark));
}
.ck-ring svg { position: absolute; inset: 14px; width: calc(100% - 28px); height: calc(100% - 28px); transform: rotate(-90deg); }
.ck-ring-track { fill: none; stroke: var(--ck-status-edge, var(--rule)); stroke-width: 10; }
.ck-ring-arc {
  fill: none; stroke: currentColor; stroke-width: 10; stroke-linecap: butt;
  transition: stroke-dasharray var(--m-scene) var(--e-out);
}
.ck-ring figcaption { position: relative; text-align: center; display: grid; gap: 2px; }
.ck-ring-n {
  font-size: var(--t-h2); font-weight: var(--w-black);
  letter-spacing: var(--tr-h2); line-height: 0.95; color: var(--text);
}
.ck-ring-of { font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--text-2); }
.ck-ring-l {
  font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint);
}

/* The four counts. Each tile is drawn in its level: the film for the
   ground, the edge for the border, a 5px rail down the left, the mark on a
   36px plate, and the number in the tone itself, large. A count of zero is
   drawn grey with a hollow number: there is nothing there to point at. */
.ck-tiles {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
}
.ck-tile {
  --ck-plate: 36px;
  position: relative;
  color: var(--ck-tone);
  border: 1px solid var(--ck-edge);
  border-radius: var(--radius-card);
  background: linear-gradient(var(--ck-film), var(--ck-film)), var(--surface);
  padding: var(--s5) var(--s5) var(--s6) calc(var(--s5) + 5px);
  min-width: 0;
  overflow: clip;
}
.ck-tile::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px;
  background: var(--ck-tone);
}
.ck-tile .ck-plate { background: var(--surface); box-shadow: 0 0 0 1px var(--ck-edge); }
.ck-tile .ck-plate .ck-mark { width: 15px; height: 15px; }
.ck-tile .ck-plate .ck-mark[data-sev="passed"] { -webkit-mask-size: 15px 15px; mask-size: 15px 15px; }
.ck-tile-n {
  display: block; margin-top: var(--s5);
  font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); font-weight: var(--w-black);
  line-height: 0.9; letter-spacing: var(--tr-h2);
  color: var(--ck-tone);
}
.ck-tile-l {
  display: block; margin-top: var(--s3);
  font-size: var(--t-sm); font-weight: var(--w-bold);
  letter-spacing: var(--tr-text); color: var(--text-2);
}
.ck-tile[data-zero="1"] {
  --ck-tone: var(--text-faint); --ck-film: transparent; --ck-edge: var(--line);
  background: var(--surface);
}
.ck-tile[data-zero="1"]::before { background: var(--line-2); }
.ck-tile[data-zero="1"] .ck-plate { background: var(--surface-2); box-shadow: none; }
.ck-tile[data-zero="1"] .ck-tile-n { color: var(--text-faint); }
.ck-tile[data-zero="1"] .ck-tile-l { color: var(--text-faint); font-weight: var(--w-mid); }

@media (max-width: 56em) {
  .ck-overview { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "ring" "tiles"; }
  .ck-ring { justify-self: start; }
}
@media (max-width: 46em) {
  .ck-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
  .ck-tile { padding: var(--s4) var(--s4) var(--s5) calc(var(--s4) + 5px); --ck-plate: 30px; }
}

/* --- area by area ------------------------------------------------------------
   One card per area. The card is the report a business owner actually reads:
   which part of the site, how it came out, and the one thing that most
   needs doing there. Each links to its evidence. The left edge carries the
   area's state, so a row of cards reads at a glance. */
.ck-areas { margin-top: var(--s10); }
.ck-areas-head { max-width: 54ch; }
.ck-areas-lead { margin-top: var(--s3); font-size: var(--t-sm); color: var(--text-dim); }
.ck-area-grid {
  margin-top: var(--s6);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s4);
}
/* The cards are links, and the site underlines links inside list items.
   These are surfaces, not prose links, so they take the card treatment.
   Written at the underline rule's own specificity plus one class, as
   .facts does, or the short version loses. */
.ck-area-grid li > a:not(.btn):not(.arrow):not(.tel):not(.nav-lnk),
.ck-area-grid li > a:not(.btn):not(.arrow):not(.tel):hover { text-decoration: none; }
/* One card: a tinted head band carrying the mark on its plate and the
   area's name, a 5px rail down the left in the area's tone, the state as a
   badge with its count, the one finding, a bar of what passed, the link.
   A clean area is a green card; an area with something important in it
   is an amber one; they cannot be mistaken for each other at arm's length.
   The name never breaks mid-word: it has the whole width, and the badge
   sits under it rather than beside it. */
.ck-area { color: var(--ck-tone); min-width: 0; }
.ck-area-in {
  position: relative;
  display: flex; flex-direction: column; gap: var(--s3);
  height: 100%;
  background: var(--surface);
  border: 1px solid var(--ck-edge);
  border-radius: var(--radius-card);
  padding: 0 var(--s5) var(--s5) calc(var(--s5) + 5px);
  text-decoration: none; color: inherit;
  overflow: clip;
  transition: box-shadow var(--d-state) var(--ease), transform var(--d-state) var(--ease);
}
.ck-area-in::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 5px;
  background: var(--ck-tone);
}
.ck-area-in:hover { box-shadow: var(--lift-2); transform: translateY(-2px); }
.ck-area-in:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.ck-area-top {
  display: flex; align-items: center; gap: var(--s3); min-width: 0;
  margin: 0 calc(var(--s5) * -1) var(--s2) calc((var(--s5) + 5px) * -1);
  padding: var(--s4) var(--s5) var(--s4) calc(var(--s5) + 5px);
  background: var(--ck-film);
  border-bottom: 1px solid var(--ck-edge);
}
.ck-area-name {
  font-size: var(--t-h4); font-weight: var(--w-black); letter-spacing: var(--tr-h4);
  color: var(--text); line-height: 1.2; min-width: 0; overflow-wrap: break-word;
}
.ck-area-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
.ck-area-state { padding: 4px 10px; gap: 6px; }
.ck-area-count {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap;
}
.ck-area-lead { margin-top: var(--s1); font-size: var(--t-sm); color: var(--text-2); line-height: 1.5; flex: 1 1 auto; }
/* The bar: passed over checked, as one strip of the tone on its film. It
   is a picture of the count printed above it and never the only copy. */
.ck-area-bar {
  display: block; height: 5px; border-radius: 999px;
  background: var(--ck-film); box-shadow: inset 0 0 0 1px var(--ck-edge);
  overflow: hidden; margin-top: var(--s2);
}
.ck-area-bar i { display: block; height: 100%; width: calc(var(--ck-p, 0) * 100%); background: var(--ck-tone); }
.ck-area[data-sev="unknown"] .ck-area-bar { display: none; }
.ck-area-go {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: var(--s2);
  font-size: var(--t-xs); font-weight: var(--w-bold); color: var(--link);
}
.ck-area-go::after {
  content: ""; width: 14px; height: 7px;
  background: currentColor;
  -webkit-mask: var(--arrow-mask) no-repeat center / contain;
  mask: var(--arrow-mask) no-repeat center / contain;
  transition: transform var(--d-state) var(--ease);
}
.ck-area-in:hover .ck-area-go::after { transform: translateX(4px); }
@media (max-width: 72em) { .ck-area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 56em) { .ck-area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40em) {
  .ck-area-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
}

/* --- fix these first ---------------------------------------------------------
   A slice of the findings below, never a new judgement about them, and only
   called "fix these first" when something urgent is actually in it. */
.ck-first {
  margin-top: var(--s10);
  border: 1px solid var(--surface-edge);
  border-radius: var(--radius-feature);
  background: var(--surface);
  box-shadow: var(--lift-2);
  padding: clamp(24px, 3vw, 44px);
}
.ck-first[data-urgent="1"] { border-color: var(--rule-strong); }
.ck-first-head { max-width: 54ch; }
.ck-first-lead { margin-top: var(--s4); font-size: var(--t-sm); color: var(--text-dim); }
.ck-first-list { margin-top: var(--s7); display: grid; gap: var(--s4); }
.ck-first-item {
  color: var(--ck-tone);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--s3) var(--s5);
  align-items: start;
  padding: var(--s5) 0;
  border-top: 1px solid var(--rule);
}
.ck-first-item:first-child { border-top: 0; padding-top: 0; }
.ck-first-n {
  flex: none;
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--radius-chip);
  background: var(--ck-film); box-shadow: inset 0 0 0 1px var(--ck-edge);
  font-family: var(--font-mono); font-size: var(--t-body); font-weight: var(--w-mid);
  line-height: 1; color: var(--ck-tone);
}
.ck-first-body { min-width: 0; }
.ck-first-t {
  font-size: var(--t-body); font-weight: var(--w-bold);
  color: var(--text); line-height: 1.4; overflow-wrap: anywhere;
}
.ck-first-do { margin-top: var(--s3); font-size: var(--t-sm); color: var(--text-dim); line-height: 1.55; max-width: 70ch; }
.ck-first-jump { margin-top: var(--s3); font-size: var(--t-sm); }
.ck-first-more { margin-top: var(--s6); font-size: var(--t-sm); color: var(--text-faint); }
@media (max-width: 46em) {
  .ck-first-item { grid-template-columns: auto minmax(0, 1fr); }
  .ck-first-item .ck-flag { grid-column: 2; order: -1; justify-self: start; }
  .ck-first { border-radius: var(--radius-panel); }
}

/* --- the findings --------------------------------------------------------- */
.ck-sections { margin-top: var(--s10); display: grid; gap: var(--s8); }
.ck-sections-head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--s3) var(--s6);
}
.ck-sections-lead { margin-top: var(--s3); font-size: var(--t-sm); color: var(--text-dim); max-width: 60ch; flex: 1 1 40ch; }
.ck-sections-head .h3 { flex: 1 1 100%; }
/* "Expand all": a secondary utility control, drawn like the site's ghost
   button at a smaller size, with a pair of chevrons that point apart when
   the rows are closed and together once they are open. */
.ck-expand { margin: 0; }
.ck-expand-btn {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 0 18px 0 14px;
  border: 1px solid var(--control-edge); border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--text-2);
  line-height: 1; cursor: pointer;
  transition: border-color var(--d-state) var(--ease), background-color var(--d-state) var(--ease),
              color var(--d-state) var(--ease);
}
/* :focus is written out because the parent theme paints every focused
   <button> dark grey and white, which is what made this control look like
   a rectangle from another site the moment it was clicked. */
.ck-expand-btn:focus { border-color: var(--control-edge); color: var(--text-2); background: var(--surface); }
.ck-expand-btn:hover, .ck-expand-btn:focus:hover { border-color: var(--link); color: var(--link); background: var(--film); }
.ck-expand-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-color: var(--link); }
.ck-expand-ic {
  position: relative; flex: none; width: 14px; height: 14px;
}
.ck-expand-ic::before, .ck-expand-ic::after {
  content: ""; position: absolute; left: 3px; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transition: transform var(--m-state) var(--e-out), top var(--m-state) var(--e-out);
}
.ck-expand-ic::before { top: -1px; transform: rotate(-135deg); }
.ck-expand-ic::after  { top: 7px;  transform: rotate(45deg); }
/* Pressed: the chevrons turn to point at each other, a down one above an
   up one, with the same gap between them as the pair at rest. */
.ck-expand-btn[aria-pressed="true"] .ck-expand-ic::before { top: -3px; transform: rotate(45deg); }
.ck-expand-btn[aria-pressed="true"] .ck-expand-ic::after  { top: 9px;  transform: rotate(-135deg); }

/* An area is a group. The group is the surface: its head, then its rows
   separated by hairlines. */
.ck-sec {
  color: var(--ck-tone);
  border: 1px solid var(--surface-edge);
  border-radius: var(--radius-panel);
  background: var(--bg);
  scroll-margin-top: calc(var(--hdr-h) + 24px);
  overflow: clip;
}
/* The head is a band in the area's tone: the film for the ground, a 5px
   rail down its left, the mark on its plate before the name. */
.ck-sec-head {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: var(--s3) var(--s6);
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 32px) var(--s5);
  background: linear-gradient(var(--ck-film), var(--ck-film)), var(--surface);
  border-bottom: 1px solid var(--ck-edge);
  box-shadow: inset 5px 0 0 var(--ck-tone);
}
.ck-sec-title { min-width: 0; flex: 1 1 32ch; }
.ck-sec-title .h4 { display: flex; align-items: center; gap: var(--s3); color: var(--text); }
.ck-sec-note { margin-top: var(--s2); font-size: var(--t-sm); color: var(--text-dim); max-width: 58ch; line-height: 1.5; }
.ck-sec-meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); flex: none; }
.ck-sec-count {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap;
}
.ck-list { display: grid; }

/* One finding: a row that opens. */
.ck-row { color: var(--ck-tone); border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--hdr-h) + 24px); }
.ck-row:first-child { border-top: 0; }
.ck-row-d { }
.ck-row-s {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 16px;
  gap: var(--s3) var(--s4); align-items: center;
  padding: var(--s3) clamp(20px, 2.6vw, 32px);
  min-height: 56px;
  cursor: pointer; list-style: none;
  transition: background-color var(--d-state) var(--ease);
}
.ck-row-s::-webkit-details-marker { display: none; }
.ck-row-s:hover { background: var(--surface-2); }
.ck-row-s:focus-visible { outline: 2px solid var(--focus); outline-offset: -3px; }
/* A passed row is quiet: its plate is drawn without the film so a clean
   area is a list of small green ticks, not a column of green squares. */
.ck-row[data-sev="passed"] .ck-plate, .ck-row[data-sev="unknown"] .ck-plate { background: transparent; }
.ck-row-t {
  font-size: var(--t-body); font-weight: var(--w-bold); color: var(--text);
  line-height: 1.35; overflow-wrap: anywhere; min-width: 0;
}
.ck-row[data-sev="passed"] .ck-row-t { font-weight: var(--w-book); color: var(--text-2); }
.ck-row[data-sev="unknown"] .ck-row-t { font-weight: var(--w-book); color: var(--text-dim); }
.ck-row-sev {
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: var(--w-mid);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ck-tone);
  white-space: nowrap;
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: var(--ck-film); box-shadow: inset 0 0 0 1px var(--ck-edge);
}
.ck-row[data-sev="passed"] .ck-row-sev, .ck-row[data-sev="unknown"] .ck-row-sev {
  background: transparent; box-shadow: none; padding-inline: 0; font-weight: var(--w-book);
}
.ck-row-chev {
  width: 9px; height: 9px; justify-self: center;
  border-right: 2px solid var(--text-faint); border-bottom: 2px solid var(--text-faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--m-state) var(--e-out);
}
.ck-row-d[open] > .ck-row-s .ck-row-chev { transform: rotate(-135deg) translate(-2px, -2px); }
.ck-row-d[open] > .ck-row-s { background: var(--surface-2); }

/* The open body: the three columns, indented to the title, with a rail in
   the row's tone down the left so the open part reads as one thing with
   the row above it. */
.ck-row-body {
  position: relative;
  margin: 0 clamp(20px, 2.6vw, 32px) var(--s6) calc(clamp(20px, 2.6vw, 32px) + 12px);
  padding: var(--s4) 0 0 calc(16px + var(--s4));
  border-left: 3px solid var(--ck-edge);
}
.ck-row[data-sev="critical"] .ck-row-body, .ck-row[data-sev="important"] .ck-row-body { border-left-color: var(--ck-tone); }
.ck-cols { display: grid; gap: var(--s5) var(--s7); }
.ck-cols[data-n="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ck-cols[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ck-col { min-width: 0; }
.ck-col-l {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font-family: var(--font-mono); font-size: var(--t-mono); font-weight: var(--w-mid);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint);
}
.ck-col-l::before { content: ""; width: 6px; height: 6px; flex: none; background: currentColor; opacity: 0.7; }
.ck-col p { font-size: var(--t-sm); line-height: 1.6; color: var(--text-dim); overflow-wrap: anywhere; }
.ck-col:first-child p { color: var(--text-2); }
/* What to do next: the part somebody acts on, so it is the one column with
   a surface of its own. */
.ck-col-do {
  background: var(--blue-film); border-radius: var(--radius-inset);
  box-shadow: inset 0 0 0 1px rgba(14, 97, 209, 0.18);
  padding: var(--s4) var(--s5);
}
.ck-col-do .ck-col-l { color: var(--mark); }
.ck-col-do .ck-col-l::before { opacity: 1; }
.ck-col-do p { color: var(--text-2); }
.ck-tech-dl {
  margin-top: var(--s5);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  gap: 4px var(--s5);
  padding: var(--s3) var(--s5);
  border-left: 2px solid var(--rule);
}
.ck-tech-dl dt {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: 0.06em; color: var(--text-faint);
}
.ck-tech-dl dd {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: var(--tr-mono); color: var(--text-dim); overflow-wrap: anywhere;
}
@media (max-width: 56em) {
  .ck-cols[data-n="3"] { grid-template-columns: minmax(0, 1fr); }
  .ck-cols[data-n="2"] { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 40em) {
  .ck-row-s { grid-template-columns: 24px minmax(0, 1fr) 14px; padding-inline: var(--s5); --ck-plate: 24px; }
  .ck-row-sev { grid-column: 2; grid-row: 2; justify-self: start; }
  .ck-row-chev { grid-column: 3; grid-row: 1; }
  .ck-row-body { margin: 0 var(--s5) var(--s6); padding: var(--s3) 0 0 var(--s4); }
  .ck-sec-head { padding-inline: var(--s5); }
  .ck-sec-meta { flex-direction: row; align-items: center; }
  .ck-tech-dl { grid-template-columns: minmax(0, 1fr); gap: 2px var(--s4); }
  .ck-tech-dl dd { margin-bottom: 6px; }
}

/* --- the bottom line ------------------------------------------------------ */
.ck-bottom {
  margin-top: var(--s10);
  display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: var(--s5) var(--s8);
  padding-top: var(--s7);
  border-top: 2px solid var(--keyline);
}
.ck-bottom-h { color: var(--text); }
.ck-bottom-body { display: grid; gap: var(--s4); max-width: 60ch; }
.ck-bottom-body p { font-size: var(--t-body); line-height: 1.65; color: var(--text-dim); }
.ck-bottom-lead { color: var(--text) !important; font-weight: var(--w-bold); }
@media (max-width: 56em) { .ck-bottom { grid-template-columns: minmax(0, 1fr); } }

/* --- the three doors ---------------------------------------------------------
   A navy panel: the message on top, three doors underneath. The lead door
   is solid, the other two ghost, and none of them is a card of features:
   one name, one figure where a figure is allowed, two sentences, one
   button. It is the same navy as the "one team" panel on the homepage, so
   the report ends on the site's own object rather than on an advertisement. */
.ck-cta {
  margin-top: var(--s10);
  position: relative; isolation: isolate; overflow: clip;
  background: var(--navy);
  border-radius: var(--radius-feature);
  padding: clamp(28px, 3.6vw, 52px);
  display: grid; gap: clamp(24px, 3vw, 40px);

  --bg: var(--navy);           --bg-2: var(--navy-2);
  --surface: var(--navy-3);    --surface-2: var(--navy-4);
  --text: var(--snow);         --text-2: var(--snow);
  --text-dim: var(--snow-2);   --text-faint: var(--snow-3);
  --rule: var(--line-dark);    --rule-strong: var(--navy-5);
  --surface-edge: var(--line-dark); --control-edge: var(--edge-dark);
  --link: var(--blue-light);   --link-hover: var(--cyan-soft);
  --mark: var(--blue-light);   --keyline: var(--cyan); --focus: var(--cyan);
  --film: var(--dark-film);
  color: var(--text);
}
.ck-cta::before {
  content: ""; position: absolute; inset: -60px 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(90deg, rgba(120, 170, 230, 0.055) 1px, transparent 1px),
    linear-gradient(180deg, rgba(120, 170, 230, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(120% 90% at 100% 0%, #000 0%, transparent 70%);
}
.ck-cta-in { max-width: 62ch; }
.ck-cta-in .eyebrow { margin-bottom: var(--s5); }
.ck-cta h3 { color: var(--text); }
.ck-cta .lead { margin-top: var(--s5); color: var(--text-dim); max-width: 50ch; }
.ck-cta-note {
  margin-top: var(--s5); font-size: var(--t-sm);
  color: var(--text-faint); line-height: 1.55; overflow-wrap: anywhere;
}
.ck-cta-act { margin-top: var(--s6); }
.ck-doors {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s4);
}
.ck-door {
  display: flex; flex-direction: column; gap: var(--s3);
  background: var(--film);
  border: 1px solid var(--surface-edge);
  border-radius: var(--radius-panel);
  padding: clamp(20px, 2.4vw, 28px);
  min-width: 0;
}
.ck-door-lead { border-color: var(--blue-light); }
.ck-door-name {
  font-family: var(--font-mono); font-size: var(--t-mono);
  letter-spacing: var(--tr-mono); text-transform: uppercase; color: var(--text-faint);
}
.ck-door-price {
  font-size: var(--t-h4); font-weight: var(--w-black); letter-spacing: var(--tr-h4);
  color: var(--text); line-height: 1.2;
}
.ck-door-text { font-size: var(--t-sm); color: var(--text-dim); line-height: 1.55; flex: 1 1 auto; }
.ck-door .btn { align-self: flex-start; margin-top: var(--s2); }
@media (max-width: 56em) {
  .ck-doors { grid-template-columns: minmax(0, 1fr); }
  .ck-cta { border-radius: var(--radius-panel); }
  .ck-door .btn { width: 100%; }
}

/* The slim one, directly under the priority list. One sentence and one
   button: the same offer at the moment somebody has just read three things
   to do and decided they are not doing them. */
.ck-cta-slim {
  margin-top: var(--s5);
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  padding: clamp(20px, 2.4vw, 28px) clamp(22px, 2.6vw, 32px);
  border-radius: var(--radius-panel);
  gap: var(--s5) var(--s7);
}
.ck-cta-slim::before { display: none; }
.ck-cta-slim-t {
  font-size: var(--t-body); font-weight: var(--w-bold);
  color: var(--text); line-height: 1.5; max-width: 56ch;
}
@media (max-width: 46em) {
  .ck-cta-slim { grid-template-columns: minmax(0, 1fr); }
  .ck-cta-slim .btn { width: 100%; justify-content: center; }
}

/* --- about this report ---------------------------------------------------- */
.ck-fine {
  margin-top: var(--s9);
  padding: clamp(26px, 2.6vw, 36px) clamp(22px, 2.4vw, 34px) clamp(28px, 2.8vw, 38px);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--radius-panel);
  display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 1fr);
  gap: var(--s5) var(--s8); align-items: start;
}
.ck-fine-h { color: var(--text-faint); padding-top: var(--s4); margin: 0; }
.ck-fine-h::before { width: 26px; background: var(--rule-strong); }
.ck-fine-h b { color: inherit; font-weight: inherit; }
.ck-fine-body { display: grid; gap: var(--s5); max-width: 62ch; }
.ck-fine-body p { font-size: var(--t-sm); color: var(--text-dim); line-height: 1.65; }
@media (max-width: 56em) {
  .ck-fine { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .ck-fine-body { max-width: none; }
}
@media (max-width: 34em) { .ck-fine { border-radius: var(--radius-card); } }

/* --- the live region ------------------------------------------------------ */
.ck-live {
  margin-top: var(--s5);
  font-size: var(--t-sm); font-weight: var(--w-bold); color: var(--text-2);
}
.ck-live:empty { display: none; }

/* A scan in flight disables its own button rather than letting a second one
   start behind the first. */
.ck-form .btn[aria-disabled="true"],
.ck-entry-form .btn[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }

/* The aside on /website-checkup/ reuses .phero-note, which is written for the
   navy hero. On the light ground it needs its own top rule back. */
.ck-aside { border-top: 1px solid var(--rule); padding-top: var(--s6); }

/* An error report has no ring and no tiles; its overview is the message. */
.ck-overview-error { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy"; }

/* --- 6. printed and saved as PDF -------------------------------------------
   A checkup gets forwarded. Somebody prints it, or saves it to PDF and sends
   it to whoever built the site, and what arrives has to be the findings
   rather than a navy panel and a row of cards that do not click. Every row
   is opened, by three mechanisms, because one engine's <details> is another
   engine's ::details-content; checkup.js also sets `open` on beforeprint. */
@media print {
  .ck-cta-slim, .ck-first-jump, .ck-live, .ck-progress, .ck-expand, .ck-area-go, .ck-row-chev { display: none !important; }

  .ck-report { margin-top: 0; }
  .ck-report, .ck-first, .ck-sec, .ck-tile, .ck-status, .ck-area-in, .ck-area-top, .ck-sec-head, .ck-col-do, .ck-ring {
    box-shadow: none !important;
    background: #fff !important;
  }
  .ck-first, .ck-sec, .ck-tile, .ck-area-in { border-color: #999 !important; }
  .ck-row, .ck-first-item, .ck-area { break-inside: avoid; page-break-inside: avoid; }
  .ck-sec-head, .ck-first-head, .ck-areas-head { break-after: avoid; page-break-after: avoid; }

  .ck-row-d { display: block !important; }
  .ck-row-d > *:not(summary) { display: block !important; }
  .ck-row-d::details-content { content-visibility: visible !important; block-size: auto !important; }
  .ck-row-s { background: none !important; }

  .ck-cta {
    background: #fff !important; color: #000 !important;
    border: 1px solid #999; border-radius: 0;
    padding: 12pt; margin-top: 18pt;
  }
  .ck-cta::before { display: none; }
  .ck-cta h3, .ck-cta .lead, .ck-cta-note, .ck-door-text, .ck-door-price, .ck-door-name { color: #000 !important; }
  .ck-door { background: none !important; border-color: #ccc !important; }
  .ck-door .btn { display: none !important; }

  .ck-fine { background: none !important; border-color: #ccc !important;
              padding: 16px 0 0 !important; border-width: 1px 0 0 !important;
              border-radius: 0 !important; }
  .ck-fine p { color: #444 !important; }
}