/* ==================================================================================================
   DESIGN SYSTEM — "Light SaaS" (UI round 5).

   ONE system. The founder picked concept B out of round 4 (app/docs/website/concepts/r4/b/CONCEPT.md)
   and asked for it site-wide, so this file now carries exactly ONE token block and ONE component layer.
   What it replaces: the round-7 `:root` palette (the cream ground, the dark-green anchor and the orange signal)
   AND the second, page-scoped `.p-home,.p-pricing{--cx-*}` block with its ~180 `cx-`-prefixed rules.
   Both are gone; the migration map is app/docs/website/r5/SYSTEM.md.

   The system in one paragraph. Pure white ground. Near-black display type set large and tight. A
   five-step grey scale and nothing else neutral. ONE saturated accent — the logo blue #0962D5 — on the primary
   button, the nav CTA, the section eyebrows, the measured bar, links and the focus ring, and nowhere
   else. No cream, no dark green, no orange. Inter, an 8-pt spacing scale, two radii families, exactly
   two shadows. Dark mode is designed, not inverted.

   The legacy token NAMES (`--bg`, `--ink`, `--accent`, `--line`, …) survive as aliases onto the new
   palette, in this same block, so the 36 templates groups 2–4 have not restyled yet re-ground on B's
   colours without being edited. They are aliases (`var(--g1)`), never second values: there is one
   place to change a colour and one place to read it.

   Faces are SELF-HOSTED (below) *and* Inter is pulled from Google Fonts in the document head. core/pdf.py
   aborts fonts.googleapis.com/fonts.gstatic.com so PDF rendering never blocks on the network — which is
   exactly why the self-hosted Instrument Sans stays: it is the second name in `--sans`, so a PDF (and any
   visitor whose network eats the Google stylesheet) still gets the site's own face rather than a system
   fallback. ~116 KB, cached, same-origin.
   The second `src` in every face below is the same file by absolute URL. core/pdf.py renders a report with
   Playwright's `set_content()`, whose document has no base URL at all, so a root-relative /static path cannot
   resolve there and the PDF would silently fall back to a system face — the exact divergence self-hosting is
   meant to remove. A font `src` list is tried in order, so a normal page load uses the relative (cache-friendly)
   URL and only the PDF renderer ever reaches the absolute one.
   ================================================================================================== */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/static/fonts/inter-var-latin-ext-5e6d4fe9.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;src:url(/static/fonts/inter-var-latin-2c295d99.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/instrument-sans-latin-ext-40fe78bf.woff2) format('woff2'),url(https://kovmere.com/static/fonts/instrument-sans-latin-ext-40fe78bf.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/instrument-sans-latin-f587e727.woff2) format('woff2'),url(https://kovmere.com/static/fonts/instrument-sans-latin-f587e727.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/instrument-sans-latin-ext-40fe78bf.woff2) format('woff2'),url(https://kovmere.com/static/fonts/instrument-sans-latin-ext-40fe78bf.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/instrument-sans-latin-f587e727.woff2) format('woff2'),url(https://kovmere.com/static/fonts/instrument-sans-latin-f587e727.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/instrument-sans-latin-ext-40fe78bf.woff2) format('woff2'),url(https://kovmere.com/static/fonts/instrument-sans-latin-ext-40fe78bf.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/static/fonts/instrument-sans-latin-f587e727.woff2) format('woff2'),url(https://kovmere.com/static/fonts/instrument-sans-latin-f587e727.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-mono-400-latin-ext-1969f6ff.woff2) format('woff2'),url(https://kovmere.com/static/fonts/ibm-plex-mono-400-latin-ext-1969f6ff.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/ibm-plex-mono-400-latin-e2661bcc.woff2) format('woff2'),url(https://kovmere.com/static/fonts/ibm-plex-mono-400-latin-e2661bcc.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/ibm-plex-mono-500-latin-ext-93cfae71.woff2) format('woff2'),url(https://kovmere.com/static/fonts/ibm-plex-mono-500-latin-ext-93cfae71.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/ibm-plex-mono-500-latin-0bc96cd0.woff2) format('woff2'),url(https://kovmere.com/static/fonts/ibm-plex-mono-500-latin-0bc96cd0.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ==================================================================================================
   THE ONE TOKEN BLOCK.  Round-7's S2-11 bridge collapsed two palettes into one; round 5 keeps that
   invariant and changes the values. Every colour on the site is one of the thirteen below, or a
   semantic status colour, or an alias of one of them. tests/test_r5_ui_system.py pins that there is
   exactly one such block and that no rule anywhere carries a legacy hex.
   ================================================================================================== */
:root{
  color-scheme:light;   /* 2026-10-10 (founder, phone audit): every page is the light shell; a dark-mode phone no longer gets dark tokens */
  /* ---------------------------------------------------------------------------------------- ground */
  --w:#ffffff;              /* the page */
  --tint:#f4f6fb;           /* banded sections and the product frame's surround */
  /* ------------------------------------------------------------------ the five-step grey scale ---- */
  --g1:#0f1320;             /* ink: headings, numerals                     18.5:1 on white */
  --g2:#39435a;             /* body copy                                    9.9:1 on white */
  --g3:#5b6880;             /* captions, meta, field borders, chart ticks   5.6:1 white / 5.2:1 tint (2026-10-04: one step darker) */
  --g4:#dce2ec;             /* hairlines and card borders (non-text only) */
  --g5:#f4f6fb;             /* the one tinted surface (== --tint: one is a ground, one is a step) */
  /* --------------------------------------------------------------------------------- the one accent */
  --a:#0962d5;              /* the LOGO's blue, darkened to text weight. 5.65:1 on white, 5.14:1 on --a-soft */
  --a-h:#0751b0;            /* hover — the only second value of the accent. 7.47:1 on white */
  --a-soft:#eef5fe;         /* a 6% wash of the same hue (--g3 now measures 4.60:1 on it, was 4.455) */
  --on-a:#ffffff;
  /* ------------------------------------------------------------------------- semantic status colours
     NOT brand. These paint a pill, a verdict or an error and never a button, a heading or a rule. */
  --good:#0f6b46;--good-bg:#e8f6ef;--good-border:#9fd2bb;
  --warn:#8a5a06;--warn-bg:#fdf3e3;--warn-border:#e3c68d;
  --bad:#b3261e;--bad-bg:#fdecea;--bad-border:#efb2ac;
  /* ------------------------------------------------------------------------------- legacy aliases ---
     The names 36 not-yet-restyled templates already say, pointed at the palette above. Aliases, never
     second values — change a colour in one place, above, and every surface follows. */
  --bg:var(--w);--panel:var(--w);--panel-2:var(--g5);
  --ink:var(--g1);--ink-2:var(--g2);--muted:var(--g3);
  --line:var(--g4);--line-strong:var(--g3);
  --accent:var(--a);--accent-hover:var(--a-h);--accent-soft:var(--a-soft);--on-accent:var(--on-a);
  /* --signal was RESERVED for the measured brand and is still reserved for it; in this system the
     measured brand IS the accent, which is the one saturated colour the page is allowed to carry. */
  --signal:var(--a);--signal-cap:var(--a-h);--signal-soft:var(--a-soft);
  --data-neutral:var(--g3);--data-cap:var(--g2);--bar-track:var(--g5);
  /* the callout is a TINTED PANEL now, not the black slab the founder rejected */
  --callout-bg:var(--g5);--callout-ink:var(--g1);--callout-muted:var(--g3);--callout-link:var(--a);--callout-line:var(--g4);
  --input-bg:var(--w);--input-border:var(--g3);--scrollbar-thumb:var(--g4);--scrollbar-thumb-hover:var(--g3);
  --bar-comp:var(--g3);--th-bg:transparent;--devbanner-fg:var(--warn);
  /* ------------------------------------------------------------------------------------------- type */
  --sans:"Inter","Inter var","Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --serif:Georgia,"Times New Roman",serif;   /* Clarity (2026-10-03): the editorial face for marketing and executive headlines */
  /* --------------------------------------------------------------- 8-pt spacing. Nothing off it. --- */
  --s0:4px;--s1:8px;--s2:16px;--s3:24px;--s4:32px;--s5:48px;--s6:64px;--s7:96px;--s8:128px;
  /* ------------------------------------------------------------- radius, elevation, measure -------- */
  --r-card:12px;--r-ctl:8px;--r-frame:16px;--r-pill:999px;--r:8px;
  --sh:0 1px 2px rgba(15,19,32,.04),0 12px 32px -8px rgba(15,19,32,.10);
  --sh-lift:0 2px 4px rgba(15,19,32,.05),0 24px 56px -12px rgba(15,19,32,.16);
  --measure:68ch;
}
/* Dark mode is DESIGNED, not inverted: a true near-black ground (not a tinted charcoal), an accent that
   lightens without changing hue so it still passes on that ground, and grey steps that keep the same
   ROLES in the same order. Only the thirteen palette tokens and the status colours are re-declared —
   every alias above is a var() and follows on its own. */
/* 2026-10-10: the dark token twin was removed -- every page renders the light shell, and on a dark-mode phone the twin
   only recoloured the footer, field borders, table lines and the wordmark against a page that stayed white. */

/* ============================================================================================ elements */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--w);color:var(--g2);font-family:var(--sans);font-size:16px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"cv05" 1,"ss03" 1}   /* Inter: single-storey l with a tail, flat-top 3 — both help numerals read */
a{color:var(--a);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}
/* axe-core `link-in-text-block` (serious): a link inside a run of prose may not be distinguished from the
   text around it by COLOUR ALONE unless the two differ by 3:1, and cobalt on the body grey is 1.38:1 in light
   and 1.54:1 in dark. So prose links are underlined and standalone action links are not — the second rule is
   the exception list, and every selector on it is a link that is the whole content of its own block. */
p a,li a,dd a,td a,th a,figcaption a,summary a,.lede a,.meta a,.body a,.small a,.foot-prose a{text-decoration:underline}
/* The exception list is deliberately only the links that ARE inside a prose element: a nav, a div or a
   button row is never matched by the rule above, and naming one here would put its selector into this file
   ahead of its own rule -- which the suite reads by `split()` on the first occurrence. */
p a.btn,li a.btn,p a.tlink,.hero-free a,.frame-cap a,.plan .go a{text-decoration:none}
main{max-width:1240px;margin:0 auto;padding:var(--s3) 20px var(--s7)}
img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--g4);margin:var(--s4) 0}
/* Prose gets a real measure; tables, grids and charts keep the full width and the same left edge. */
main>p,main>ul,main>ol,main>details,section>p,section>ul,section>ol,.prose,.measure{max-width:var(--measure)}
/* 2026-09-16 (O4): the evidence appendix is a <details> so it collapses on screen, and the rule above
   would clamp it to the reading measure -- measured: the same answers took 153 PDF pages inside the
   details against 128 inline, purely from extra wrapping. It spans the width the answers always had. */
details.appendix,details.more-rows,details.more{max-width:none}
/* O4 (2026-09-16): the report reads answer-first. `.verdict-line` is the one-line verdict that opens the first
   page; `.findings` its three to five claims (bold claim, then the number in plain weight, the way an executive
   summary is skimmed); `.insight` the one sentence each section opens with; `details.more` the fold every
   section's tables rest in on screen -- on paper (print_view) the fold does not exist and everything prints. */
.p-report .verdict-line{font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:6px 0 var(--s2);color:var(--g1)}
.p-report .findings{margin:0 0 var(--s2);padding-left:1.4em}
.p-report .findings li{margin:0 0 10px;line-height:1.5;font-size:15.5px}
.p-report .findings li b{color:var(--g1)}
.p-report .summary .lead-in{margin:var(--s2) 0 4px}
.p-report .summary .actions{margin:0 0 var(--s2);padding-left:1.4em}
.p-report .summary .actions li{margin:0 0 6px;line-height:1.5}
.p-report .summary .scope{margin:var(--s1) 0 0;color:var(--g3)}
.p-report .insight{font-size:18.5px;font-weight:600;letter-spacing:-.01em;line-height:1.4;color:var(--g1);max-width:38em;margin:0 0 var(--s2)}
.p-report details.more{margin:var(--s2) 0 var(--s3);border-top:1px solid var(--g4)}
.p-report details.more>summary{font-size:14px;font-weight:500;color:var(--a);padding:10px 0}
.p-report details.more.file>summary code{font-size:12.5px;color:var(--g2)}
.p-report details.more[open]>summary{color:var(--g2)}
@media(max-width:640px){.p-report .verdict-line{font-size:22px}.p-report .insight{font-size:17px}}
/* O4: a folded ledger row's answer trace. A summary in a table cell needs no 44px touch floor -- the row is
   the touch target -- and the report-wide rule would double the row's height. */
.p-report td details.trace>summary{min-height:0;padding:0;font-size:13px}
.p-report details.more-rows>summary{margin-top:var(--s1)}
.full{max-width:none}

/* ============================================================================================ masthead
   The single biggest change of round 5: the navigation stops being 12px uppercase IBM Plex Mono at .07em
   (the "random webpage" tell the founder named) and becomes 15px sentence-case Inter, which is the setting
   all five reference products ship. On a phone the links fold away and the one primary action stays. */
header.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3);
  border-bottom:1px solid var(--g4);padding:14px 0;margin-bottom:0}
.wordmark{position:relative;display:inline-flex;align-items:center;gap:9px;font-size:19px;font-weight:700;
  letter-spacing:.005em;text-transform:none;text-decoration:none;color:var(--g1);padding:6px 0}
.wordmark:hover{text-decoration:none}
/* The logo. `.lk` is the lockup (symbol + outlined wordmark) inlined in the masthead so it paints
   with the first byte of HTML and needs no font. Its two colours are the BRAND's, not the system's:
   #026EF6 and #181E26 are measured off the approved artwork (A23) and are deliberately not var(--a),
   because a logo that shifts when the accent shifts is not a logo — the accent moved to the logo's
   HUE, which is a different thing. The symbol needs no dark-ground variant: #026EF6 measures 4.02:1
   on #0f1320 and 4.22:1 on #0b0d14, over the 3:1 a non-text graphic is held to. Only the wordmark
   swaps — see research/brand/logo/final/README.md. */
.wordmark .lk{display:block;height:22px;width:auto;flex:0 0 auto}
.wordmark .lk-s{fill:#026EF6}.wordmark .lk-w{fill:#181E26}
.nav{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{font-family:inherit;font-size:15px;font-weight:500;letter-spacing:0;text-transform:none;text-decoration:none;
  color:var(--g2);border-radius:var(--r-ctl);border-bottom:0}
.nav a:hover{color:var(--g1);background:var(--g5);text-decoration:none}
.nav a[aria-current="page"]{color:var(--a);background:transparent}
.nav a.cta{color:var(--on-a);background:var(--a);font-weight:600;margin-left:var(--s1)}
.nav a.cta:hover{background:var(--a-h);color:var(--on-a)}

/* ========================================================================================== typography */
h1,h2,h3{color:var(--g1);font-family:var(--sans);text-wrap:balance}
h1{font-size:clamp(36px,4.4vw,58px);line-height:1.05;font-weight:700;letter-spacing:-.034em;margin:0 0 var(--s2);
  max-width:19ch}
h2{font-size:clamp(28px,2.9vw,40px);line-height:1.12;font-weight:700;letter-spacing:-.028em;margin:var(--s5) 0 var(--s2);
  max-width:22ch;scroll-margin-top:var(--s3)}
h3{font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-.012em;margin:var(--s3) 0 var(--s1)}
p{margin:0 0 var(--s2)}
p+p{margin-top:var(--s2)}
.lede{font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--g2);max-width:52ch;margin:0 0 var(--s2)}
.sub{color:var(--g3);font-size:16px;margin:0 0 var(--s1);max-width:var(--measure)}
.small,.meta{font-size:13.5px;line-height:1.55;color:var(--g3)}
.body{font-size:15.5px;line-height:1.65;color:var(--g2)}
/* The eyebrow — sentence case, accent, one small square tick. NOT uppercase, NOT mono. */
.eyebrow{display:inline-flex;align-items:center;gap:var(--s1);font-size:14px;font-weight:600;color:var(--a);
  letter-spacing:-.005em;line-height:1.3;text-transform:none;font-family:inherit;margin:0 0 var(--s2)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--a);flex:0 0 6px}
code{font-family:var(--mono);font-size:13px}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
b,strong{font-weight:600;color:var(--g1)}
.callout b,.callout strong,.hero b,.hero strong{color:inherit}

/* ============================================================================================== layout */
.grid{display:grid;gap:var(--s2)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:1fr 1fr}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(max-width:1080px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:1000px){.grid4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.grid4,.grid3,.grid2{grid-template-columns:1fr;gap:var(--s2)}}
@media(max-width:720px){.g3,.g4,.g2{grid-template-columns:1fr}}
/* The section rhythm. `.sec` carries the page's own measure and gutter so a full-bleed `.strip` can sit
   edge to edge around it — no 100vw, no negative margins, and therefore no horizontal page scroll to
   clip away (round-2 H4 / T4: at 390 nothing may be wider than its box without a painted hint). */
.sec{max-width:1240px;margin-inline:auto;padding:var(--s7) 20px}
.sec-head{max-width:46rem;margin-bottom:var(--s5)}
.sec-head.mid{margin-inline:auto;text-align:center}
.sec-head p{margin-top:var(--s2)}
.sec-head h2{margin-top:0}
.strip{background:var(--tint)}
.strip.plain{background:transparent}
.rule,hr.rule{height:1px;width:100%;border:0;border-top:1px solid var(--g4);background:none;margin:0 0 var(--s2)}
@media(max-width:760px){.sec{padding:var(--s6) 20px}}

/* ============================================================================================= buttons
   One shape, two weights. The filled primary is the only saturated fill on the page; `ghost`/`quiet` is
   the same shape with a hairline. `.ghost` is kept as an alias because 47 call sites across 16 templates
   already say it (SYSTEM.md § Migration map). */
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s1);min-height:52px;
  margin-top:var(--s3);padding:14px 26px;border-radius:var(--r-ctl);font:inherit;font-size:16px;font-weight:600;
  letter-spacing:-.008em;background:var(--a);color:var(--on-a);border:1px solid var(--a);cursor:pointer;
  text-decoration:none;transition:background .12s ease,border-color .12s ease}
button:hover,.btn:hover{background:var(--a-h);border-color:var(--a-h);color:var(--on-a);text-decoration:none}
.btn.ghost,.btn.quiet,button.ghost,button.quiet{background:transparent;color:var(--g1);border-color:var(--g4)}
.btn.ghost:hover,.btn.quiet:hover,button.ghost:hover,button.quiet:hover{background:var(--g5);border-color:var(--g3);color:var(--g1)}
.btn.wide{width:100%;max-width:34rem}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;margin-top:var(--s3)}
.btn-row .btn,.btn-row button{margin-top:0}
/* Specificity guard, and it is load-bearing. A container that sets its own link colour (`.formcard a`,
   which tests/test_r5_consistency.py pins, and any group 2-4 adds later) is (0,1,1) and beats `.btn`'s
   (0,1,0) -- which paints a cobalt label on a cobalt fill and makes the primary button read as an empty
   box. Measured on the first render of this system, at 1440. */
a.btn,a.btn:hover{color:var(--on-a)}
a.btn.ghost,a.btn.quiet,a.btn.ghost:hover,a.btn.quiet:hover{color:var(--g1)}
a.tlink{color:var(--g1)}
a.tlink:hover{color:var(--a)}
/* the text link that stands beside the one primary button */
.tlink{display:inline-flex;align-items:center;gap:6px;min-height:52px;padding:0 var(--s0);font-size:16px;
  font-weight:600;color:var(--g1);letter-spacing:-.008em;text-decoration:none}
.tlink:hover{color:var(--a);text-decoration:none}
.tlink svg{width:16px;height:16px;flex:0 0 16px}

/* =============================================================================== cards, tiles, panels */
.card{background:var(--w);border:1px solid var(--g4);border-radius:var(--r-card);padding:28px 26px}
.card h3{margin:0 0 var(--s1)}
/* O4 (2026-09-16): a homepage block that shows the report before it describes it -- the report's own chart
   markup (.hbars, or the head of a table), drawn live from the demo report, beside one sentence. The same card
   surface, border and radius as .card; the picture takes the wider column so a 14px label stays 14px. */
.shows{display:grid;gap:var(--s2)}
.show{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:var(--s3);align-items:center;background:var(--w);border:1px solid var(--g4);border-radius:var(--r-card);padding:28px 26px}
.show h3{margin:0 0 var(--s1)}
.show p{margin:0}
.live{min-width:0;border:1px solid var(--g4);border-radius:8px;padding:18px 20px;background:var(--w)}
.live .hbars{margin:0;max-width:none}
.live .hbar-row{grid-template-columns:minmax(6rem,10rem) 1fr 5.5rem;margin-bottom:7px}
.live table{width:100%;font-size:13.5px}
.live td,.live th{padding:8px 10px 8px 0;vertical-align:top}
@media(max-width:760px){.show{grid-template-columns:1fr;gap:var(--s2)}.live{padding:14px}}
/* Measured at 400px: the three-column row above outranked the report's own phone rule for .hbar-row (base.html,
   640px) and squeezed the bar track to ~20px. On a phone the label takes its own line and the bar keeps the width. */
@media(max-width:640px){.live .hbar-row{grid-template-columns:1fr 4.5rem;gap:4px 10px;margin-bottom:10px}.live .hbar-label{grid-column:1 / -1}}
/* axe heading-order: the homepage hero preview's two card titles sit directly under the page's only h1
   heading with no h2 between them (index.html's .grid2), so they are real h2 elements now -- this class
   keeps them sized and spaced exactly like every other .card h3 on the page. */
.card-h3{font-size:18px;line-height:1.35;font-weight:600;letter-spacing:-.012em;margin:0 0 var(--s1)}
.card p{font-size:14.5px;line-height:1.6;color:var(--g2);margin:0}
.ico{width:40px;height:40px;border-radius:10px;background:var(--a-soft);color:var(--a);display:flex;
  align-items:center;justify-content:center;margin-bottom:18px}
.ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* `.tile` is the product's KPI box: 57 call sites across 16 templates keep `.big`/`.ci`, and the promoted
   pages' illustration adds `.t-lab`/`.t-num`/`.t-sub` to the same box. One rule, two vocabularies. */
.tile{background:var(--w);border:1px solid var(--g4);border-radius:var(--r-card);padding:18px 20px}
.tile .big{font-family:var(--mono);font-size:34px;font-weight:500;line-height:1;margin:var(--s1) 0 var(--s0);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--g1)}
.tile .ci{font-family:var(--mono);font-size:13px;color:var(--g3)}
.tile.lock{opacity:.85;border-style:dashed}
.tile.pick,.tile.lead{border-color:var(--a)}
.tile.lead{background:var(--a-soft)}
.tile .t-lab{font-size:12.5px;font-weight:600;color:var(--g3);letter-spacing:-.004em}
.tile .t-num{display:block;margin-top:6px;font-size:38px;line-height:1;font-weight:700;color:var(--g1);
  letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.tile.lead .t-num{color:var(--a)}
/* the lead tile's ground is --a-soft, not white: --g3 measures 4.60:1 on the re-pointed --a-soft
   (4.455:1 on the old cobalt wash, an axe color-contrast serious) and --g2 measures 8.98:1.
   The scoped rule stays: it is what fixed the old wash and it costs nothing now. */
.tile.lead .t-lab,.tile.lead .t-sub{color:var(--g2)}
.tile .t-sub{display:block;margin-top:var(--s1);font-size:12px;color:var(--g3);font-variant-numeric:tabular-nums}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);margin-top:var(--s3)}
@media(max-width:760px){.tiles{grid-template-columns:1fr;gap:10px}.tile .t-num{font-size:30px}}
/* the pricing page's four-up grid pins every card's CTA to the same bottom edge */
.g4 .tile{display:flex;flex-direction:column}
.g4 .tile .btn,.g4 .tile .btn.ghost{margin-top:auto}
.figure{margin:0;border:1px solid var(--g4);border-radius:var(--r-card);background:var(--w);padding:var(--s1)}
.figure img{display:block;width:100%;border-radius:0}
.figure figcaption{font-size:13px;color:var(--g3);margin-top:var(--s1);padding:0 var(--s0) var(--s0)}

/* ============================================================================================== tables
   A table sits directly on the page ground. No card, no outer border, no radius, no vertical rules —
   with 23 tables on a report, a stack of identical rounded white boxes carries no weighting at all. */
table{border-collapse:collapse;width:100%;font-size:14px;background:transparent;border:0}
th,td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--g4)}
th:first-child,td:first-child{padding-left:0}th:last-child,td:last-child{padding-right:0}
thead th,tr:first-child th{font-family:var(--sans);font-size:12.5px;letter-spacing:0;text-transform:none;
  color:var(--g3);font-weight:600;background:var(--th-bg);vertical-align:bottom;border-bottom:1px solid var(--g3)}
tbody tr:last-child td,tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--g5)}
.tile table th:first-child,.tile table td:first-child{padding-left:0}
/* the pricing comparison table */
.ptable tbody th{font-weight:600;color:var(--g1);text-transform:none;letter-spacing:0;font-size:14px}
.ptable td{color:var(--g2);font-variant-numeric:tabular-nums}
.ptable tr.you{background:var(--a-soft)}
.ptable tr.you:hover{background:var(--a-soft)}

/* Wide tables scroll inside their own box so the page body never scrolls sideways. The fade and the
   phone-only swipe hint key off `data-scroll`, which the script at the foot of this file sets only on
   containers that actually overflow, and the fade is a mask on the container rather than an overlay on
   top of content, so nothing is ever painted over a table cell. */
.wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-bottom:2px;
  scrollbar-width:thin;scrollbar-color:var(--scrollbar-thumb) transparent}
.wrap::-webkit-scrollbar{height:9px}
.wrap::-webkit-scrollbar-track{background:transparent}
.wrap::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:var(--r-ctl)}
.wrap::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-thumb-hover)}
.wrap[data-scroll]{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
.wrap[data-scroll]:hover,.wrap[data-scroll]:focus-within{-webkit-mask-image:none;mask-image:none}
.print-only{display:none}
.scroll-hint{display:none;font-family:inherit;font-size:13px;letter-spacing:0;text-transform:none;
  color:var(--g3);margin:0 0 var(--s1)}

/* Responsive comparison table: a real <table> on wide screens, one card per column on phones. `data-l` on
   each cell supplies the row label in card mode, so nothing is duplicated and nothing is hidden. */
.compare thead th{white-space:nowrap}
.compare tbody th{font-family:var(--sans);font-size:14px;color:var(--g1);text-transform:none;letter-spacing:0;
  width:24%;font-weight:600;border-bottom:1px solid var(--g4)}
@media(max-width:760px){
  .compare,.compare thead,.compare tbody,.compare tr,.compare th,.compare td{display:block;width:auto}
  .compare thead{display:none}
  .compare tbody tr{border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s2) var(--s2);
    margin-bottom:var(--s2);background:var(--w)}
  .compare tbody tr:hover{background:var(--w)}
  .compare tbody th{width:auto;padding:var(--s0) 0 var(--s1);border:0;font-size:16px}
  .compare tbody td{border:0;padding:6px 0;display:flex;gap:var(--s2);justify-content:space-between;align-items:baseline}
  .compare tbody td::before{content:attr(data-l);color:var(--g3);font-family:inherit;font-size:12.5px;
    text-transform:none;letter-spacing:0;flex:0 0 auto}
  .compare tbody td>span{text-align:right}
  .compare tbody td[data-l="Since last period"]{flex-direction:column;align-items:flex-start;gap:2px}.compare tbody td[data-l="Since last period"]>span{text-align:left}  /* 2026-10-10 (phone audit): a sentence-long value sits under its label, not ragged against the right edge */
  .compare tbody td:not(:last-child){border-bottom:1px solid var(--g4)}
}

/* ======================================================================================= pills + bars */
.pill{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-size:12px;font-weight:500;
  border:1px solid var(--g3);background:var(--w);color:var(--g3);white-space:nowrap}
.pill.good{color:var(--good);border-color:var(--good-border);background:var(--good-bg)}
.pill.warn{color:var(--warn);border-color:var(--warn-border);background:var(--warn-bg)}
.pill.bad{color:var(--bad);border-color:var(--bad-border);background:var(--bad-bg)}
.pill.neutral{color:var(--g3)}
/* the one chart in the product. Square caps (rounded caps inflate small values and shorten large ones —
   a reading error, not a style preference), a fixed 0-100% track, `--signal` for the measured brand and
   `--data-neutral` for everyone else, a 2px minimum stub so 1% is visible, and the sensitivity range drawn
   as a whisker with end caps rather than living only as a string in a fourth column. */
.bar{position:relative;height:9px;background:var(--bar-track);border-radius:var(--r-pill);overflow:hidden;min-width:90px}
.bar i{display:block;height:100%;background:var(--signal);border-radius:0;min-width:2px}
.bar.comp i{background:var(--data-neutral)}
.bar .whisk{position:absolute;top:0;bottom:0;border-left:2px solid var(--signal-cap);border-right:2px solid var(--signal-cap);pointer-events:none}
.bar.comp .whisk{border-left-color:var(--data-cap);border-right-color:var(--data-cap)}
.bar-ticks{display:block;position:relative;height:6px;margin-top:3px;border-top:1px solid var(--line-strong)}
.bar-ticks span{position:absolute;top:0;width:1px;height:4px;background:var(--line-strong)}
/* 2026-09-16 (O4): the report had no chart anywhere -- every reading was a table cell. The competitor field study
   (research/docs/competitors/ui/REPORTS.md §5) and the pyramid principle both say the same thing: lead each
   section with the picture, print the fraction on it, keep the table as the record. `.bar` already existed and
   was used once, on the legacy page; these rows reuse it at a readable height. Three columns -- label, bar,
   "m of n" -- so the number is a direct label, no legend, no axis. */
.hbars{margin:var(--s2) 0 var(--s3);max-width:46rem}
.hbar-row{display:grid;grid-template-columns:minmax(7rem,11rem) 1fr 6.5rem;align-items:center;gap:12px;margin:0 0 8px}
.hbar-label{font-size:14px;color:var(--ink);line-height:1.3}
.hbar-row.you .hbar-label{font-weight:600}
.bar.lg{height:20px;border-radius:4px;min-width:0}
.bar.lg i{border-radius:4px 0 0 4px}
.hbar-val{font-size:13px;color:var(--g2);font-variant-numeric:tabular-nums;white-space:nowrap}
.hbar-na{font-size:13px;color:var(--g3)}
@media(max-width:640px){.hbar-row{grid-template-columns:1fr;gap:4px;margin-bottom:12px}}
/* the illustration's competitor ranking, and the same shape wherever a named row carries a bar */
.rank{display:grid;gap:11px}
.rank-row{display:grid;grid-template-columns:minmax(84px,1fr) 3fr 44px;align-items:center;gap:var(--s2);font-size:13px}
/* `clip`, not `hidden`: an ellipsised cell with overflow:hidden still reports scrollWidth > clientWidth,
   which is the same measurement round-2 H4 forbids. `clip` creates no scrollable overflow at all. */
.rank-row .n{color:var(--g2);white-space:nowrap;overflow:clip;text-overflow:ellipsis}
.rank-row.you .n{color:var(--g1);font-weight:600}
.rank-row .track{height:9px;border-radius:var(--r-pill);background:var(--g5);border:1px solid var(--g4);overflow:hidden}
.rank-row .track b{display:block;height:100%;background:var(--g3);border-radius:var(--r-pill)}
.rank-row.you .track b{background:var(--a)}
.rank-row .v{text-align:right;color:var(--g2);font-variant-numeric:tabular-nums}
.rank-row.you .v{color:var(--g1);font-weight:600}
/* At 390 the widest placeholder name (`AdventureWorks`) needs 95px and the 64px-floor column gave it 91,
   so the ellipsised cell reported 4px of overflow -- the same measurement round-2 H4 forbids anywhere on
   the page. On a phone the name wraps instead of being clipped: no ellipsis, no overflow, no hidden text. */
@media(max-width:520px){.rank-row{grid-template-columns:minmax(96px,1fr) minmax(0,2fr) 36px;gap:var(--s1);font-size:12px}
.rank-row .n{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}}

/* ============================================================== /status: the per-stage checklist + shell */
.status-steps{list-style:none;margin:var(--s2) 0 0;padding:0;display:grid;gap:7px}
.status-steps li{display:flex;align-items:center;gap:var(--s1);font-size:14px;color:var(--g3)}
.status-steps li::before{content:"";width:8px;height:8px;flex:0 0 8px;border-radius:var(--r-pill);background:var(--line-strong)}
.status-steps li.done{color:var(--g2)}
.status-steps li.done::before{background:var(--good)}
.status-steps li.active{color:var(--g1);font-weight:600}
.status-steps li.active::before{background:var(--a)}
.bar.progress i{background:var(--accent)}
.stat-lg{font-size:28px;font-weight:700;margin:var(--s1) 0 6px;font-variant-numeric:tabular-nums;color:var(--g1);
  letter-spacing:-.03em}
.status-shell{border:1px solid var(--g4);background:var(--w);border-radius:var(--r-card);padding:var(--s3)}

/* ============================================================================ report.html's sticky rail
   One scrollable row at EVERY width, so the rail's sticky height cannot grow when a chip is added:
   65px at 1440, 59px at 390 (measured, round-7 S2-2/S2-9). */
.report-rail{position:sticky;top:0;z-index:5;display:flex;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;
  gap:0 4px;margin:0 0 var(--s3);padding:10px 0;background:var(--w);border-bottom:1px solid var(--g4);
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.report-rail::-webkit-scrollbar{display:none}
.report-rail a{flex:0 0 auto;font-family:inherit;font-size:13.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--g3);text-decoration:none;padding:12px 12px;min-height:44px;
  display:inline-flex;align-items:center;border-radius:var(--r-ctl)}
.report-rail a:hover{color:var(--a);background:var(--a-soft);text-decoration:none}
@media (max-width:640px){
  .report-rail{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;padding:7px 0}
  .report-rail::-webkit-scrollbar{display:none}
  .report-rail a{flex:0 0 auto;padding:12px 10px;white-space:nowrap}
}
.report-rail a.active{color:var(--accent);background:var(--accent-soft)}
/* The rail is `position:sticky;top:0`, so an in-page jump would otherwise land the target UNDER it. The
   value is the rail's own measured height plus a hair. */
[id^="ans-"]{scroll-margin-top:72px}
@media (max-width:640px){[id^="ans-"]{scroll-margin-top:66px}}
/* the brand's own name, marked in the verbatim answer a customer is reading to see whether they were
   named at all. Painted by the text-node walker at the foot of this file. */
.answer-card mark{background:var(--a-soft);color:var(--g1);padding:0 2px;border-radius:2px}
/* round-8 presentation: the SERVER-rendered brand marks in the per-question answer view
   (check_v3/answers.html). Two classes, because "you" and "a rival you track" are two different findings and a
   reader scanning for their own name must not have to read each mark to tell which is which. Painted by
   core.report.highlight_segments(), which SPLITS the captured text and never rewrites it -- so these rules also
   hold on the PDF, where the text-node walker above never runs. Tokens only, so both follow the theme. */
mark.brand-you{background:var(--a-soft);color:var(--g1);padding:0 2px;border-radius:2px;font-weight:600}
mark.brand-rival{background:var(--warn-bg);color:var(--g1);padding:0 2px;border-radius:2px}
.answer-marked{overflow-wrap:anywhere;font-size:14px;line-height:1.65;color:var(--g2)}
.answer-marked a{overflow-wrap:anywhere}
/* a captured answer is third-party text: a model that opens with a top-level heading must not inject one into
   the report's own outline. Same scoped reset `.answer-card .answer-body` already gets, for the block that
   renders the same text marked. */
.answer-marked :is(h1,h2,h3,h4,h5,h6),.answer-marked .ans-h{font-size:15px;font-weight:600;line-height:1.45;margin:12px 0 4px;color:var(--g1)}
/* 2026-09-16 (O4): the rule above did the VISUAL half of its own comment and only that — the headings were
   still real heading elements in the DOM, so they still defined the document outline a reader scans and a PDF
   contents page is built from. Measured on the live Pro report: 116 h2 and 206 h3 elements, almost all of them
   quoted engine text. core.cms.to_html_quoted() now converts them to a paragraph with class ans-h, which keeps
   this exact appearance and leaves the outline to us. Both selectors are listed so an older stored report,
   rendered before the change, still looks the same.
   NOTE: no literal heading tag may be written in this comment — a stylesheet comment IS in the rendered page,
   and tests/test_r4_funnel.py and tests/test_r8_ui_bind.py both locate the report's sections by splitting the
   page on that token. Writing one here silently moved where they thought the first section began. */
/* a sampled answer is third-party text: a model that opens with a top-level heading must not inject one
   into the report's own outline. */
.answer-card .answer-body :is(h1,h2,h3,h4,h5,h6),.answer-card .answer-body .ans-h{font-size:15px;font-weight:600;
  line-height:1.45;margin:12px 0 4px;color:var(--g1)}
/* the qualitative band sentence above the tile grid — the first plain-English judgement a reader gets.
   C4 holds: this rule is typography only. It states no coverage level, prints no cut point, and the words
   come from core.stats.interval_band(). */
.verdict-band{font-size:17px;line-height:1.5;color:var(--ink);margin:0 0 var(--s2);max-width:var(--measure);
  padding-left:var(--s2);border-left:3px solid var(--a)}
/* the fix queue's pill legend */
.pill-legend{display:grid;grid-template-columns:auto 1fr;gap:6px var(--s2);align-items:baseline;
  margin:var(--s2) 0 0;max-width:var(--measure);font-size:13.5px}
.pill-legend dt{margin:0}
.pill-legend dd{margin:0;color:var(--g2)}
@media (max-width:640px){.pill-legend{grid-template-columns:1fr}.pill-legend dd{margin:0 0 var(--s1)}}
/* /buy/<tier>: the last page a customer reads before money moves */
summary.tap{min-height:44px;display:flex;align-items:center}
@media (max-width:640px){.paybtn{width:100%}}
.reassure{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);margin:var(--s2) 0 0;padding:0;list-style:none;
  max-width:var(--measure)}
.reassure li{font-size:13.5px;color:var(--g2);display:flex;align-items:baseline;gap:6px}
.reassure li::before{content:"\2713";color:var(--good);font-weight:700}

/* ================================================================================== notes and callouts */
.note{border:1px solid var(--g4);border-left:2px solid var(--a);background:var(--g5);
  padding:var(--s2) var(--s3);border-radius:var(--r-card);font-size:14.5px;line-height:1.65;color:var(--g2);
  max-width:var(--measure)}
.note b{color:var(--g1)}
.callout{background:var(--callout-bg);color:var(--callout-ink);border:1px solid var(--g4);
  border-radius:var(--r-card);padding:var(--s4);margin-top:var(--s5)}
.callout h2{color:var(--callout-ink);margin:0 0 var(--s1)}
.callout p{color:var(--callout-muted)}
.err{background:var(--bad-bg);color:var(--bad);border:1px solid var(--bad-border);padding:var(--s2) var(--s3);
  border-radius:var(--r-ctl);margin-bottom:var(--s2);max-width:var(--measure)}
ul.plain{padding-left:20px;margin:0 0 var(--s2)}ul.plain li{margin:var(--s0) 0}
details summary{cursor:pointer;color:var(--a);padding:var(--s0) 0}

/* =============================================================================================== forms */
form label{display:block;font-weight:600;color:var(--g1);font-size:15px;margin:var(--s3) 0 6px}
form input,form textarea,form select{width:100%;max-width:34rem;padding:12px 13px;border:1px solid var(--input-border);
  border-radius:var(--r-ctl);font:inherit;font-size:15px;background:var(--input-bg);color:var(--g1)}
form input[type=email]{max-width:26rem}
form input:focus,form textarea:focus,form select:focus{outline:2px solid var(--a);outline-offset:1px;border-color:var(--a)}
form input::placeholder,form textarea::placeholder{color:var(--g3);opacity:1}
form .hint,.hint{color:var(--g3);font-size:13px;margin-top:6px;max-width:34rem}
/* The free-scan control: two inputs inside ONE bordered group, separated by one hairline, so it reads as
   a single field. `category` is `required` and a required control cannot live inside a closed disclosure
   element -- it can never be focused to report its own validation message. */
.field{border:1px solid var(--g3);border-radius:var(--r-ctl);background:var(--w);overflow:hidden;
  transition:border-color .12s ease,box-shadow .12s ease}
.field:focus-within{border-color:var(--a);box-shadow:0 0 0 3px var(--a-soft)}
.field label{display:block;padding:10px 16px 0;margin:0;font-size:12.5px;font-weight:600;color:var(--g3);
  letter-spacing:-.002em}
.field input{display:block;width:100%;max-width:none;border:0;border-radius:0;background:transparent;font:inherit;
  font-size:16px;color:var(--g1);padding:2px 16px 10px;outline:none}
.field input:focus{outline:none;border-color:transparent}
.field .row+.row{border-top:1px solid var(--g4)}
.formcard{background:var(--w);color:var(--g2);border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s3)}
.formcard a{color:var(--accent)}
.formcard h2{margin:0 0 var(--s0);font-size:19px}
.formcard label:first-of-type{margin-top:var(--s1)}
.formcard form input,.formcard form textarea{max-width:none}
.formcard .btn.wide,.formcard button.wide{max-width:none}

/* ================================================================================= marketing components */
/* The hero. `.hero` no longer paints the near-black slab the founder rejected — it is a plain band of the
   page ground; `.hero.mid` is the centred variant the promoted pages use. for_saas.html / for_agencies.html
   keep their `.hero-grid` two-column shape and are groups 2–4's to restyle. */
/* 2026-09-16 (O4): `.sec` pads 20px each side and `.hero` padded 0, so on the three left-aligned landing pages
   (for_local / for_saas / for_agencies) the h1, lede and buttons sat 20px LEFT of every section below them --
   measured: hero blocks at x=120, section blocks at x=140. Same side padding as .sec; nothing else changes. The
   centred `.hero.mid` on / and /pricing is unaffected except that it now keeps the 16px+ side gutter on phones. */
.hero{padding:72px 20px var(--s4);background:none;color:inherit;border-radius:0;margin-bottom:0}
.hero.mid{text-align:center}
.hero h1{color:var(--g1);margin:0 0 var(--s2)}
.hero.mid h1{margin-inline:auto;max-width:19ch}
.hero .lede{color:var(--g2);max-width:52ch;margin:0}
.hero.mid .lede{margin:20px auto 0;max-width:46ch;text-align:center}
/* 2026-09-16 (O4): the centred hero had THREE different column widths, which is what read as a messy
   layout. The lede is a 46ch centred column; the search-API caveat had no max-width at all, so it was
   centred across the section's full 1240px and started 265px to the LEFT of the lede; and the trust note
   was a 52ch column, so its left border did not line up with the lede either. One column now — same
   colours, same sizes, same words, same order. */
/* One column for all of them, in rem rather than ch: `ch` is relative to each element's OWN font size, so
   "46ch" on the 18px lede and "46ch" on the 13px caveat are two different widths — which is exactly how the
   three of them ended up with three different left edges. */
.hero.mid .lede{max-width:34rem}
.hero.mid .meta{max-width:34rem;margin-inline:auto}
.hero.mid .trust-line{max-width:34rem}
.hero.mid .hero-fine{max-width:40rem;margin-inline:auto}
.hero-cta{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin-top:28px}
.hero.mid .hero-cta,.close .hero-cta{justify-content:center}
.hero-fine{margin-top:var(--s2);font-size:13.5px;color:var(--g3)}
.fix-card .fix-part{border-top:1px solid var(--g5);padding-top:8px;margin-top:8px}
.fix-card .fix-part:first-of-type{border-top:0;padding-top:0}
.trust-line{margin:14px auto 0;max-width:52ch;font-size:14.5px;line-height:1.5;color:var(--g2);border-left:3px solid var(--g4);padding-left:12px;text-align:left}
.hero.mid .trust-line{margin-inline:auto}
.hero-fine span{white-space:nowrap}
.hero-fine span+span::before{content:"\00b7";margin:0 10px;color:var(--g4)}
.hero-free{margin-top:var(--s2);font-size:13.5px}
.hero-free a{display:inline-flex;align-items:center;min-height:44px;font-weight:500}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:var(--s5);align-items:start}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:var(--s3)}}
.hero-facts{list-style:none;padding:0;margin:var(--s3) 0 0;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3)}
.hero-facts li{font-size:13.5px;color:var(--g3);display:flex;align-items:center;gap:7px}
.hero-facts li::before{content:"";width:10px;height:1px;background:var(--a);flex:0 0 10px}
.close{text-align:center;padding:var(--s7) 20px;max-width:1240px;margin-inline:auto}
.close h2{margin-inline:auto}
.close .lede{margin:20px auto 0;text-align:center;max-width:44ch}

/* the numbered how-it-works. Two shapes share one rule: an <ol class="steps"> whose <li> are counted, and
   a grid of <div class="step"> whose number is written out. */
.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:var(--s4);
  grid-template-columns:repeat(3,1fr);max-width:none}
@media(max-width:760px){.steps{grid-template-columns:1fr;gap:28px}}
.steps li,.steps .step,.step{counter-increment:s;border-top:2px solid var(--g1);padding-top:var(--s3);border-bottom:0}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-size:13px;font-weight:700;
  letter-spacing:.02em;color:var(--a);margin-bottom:12px;font-variant-numeric:tabular-nums}
.step .num{display:block;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--a);letter-spacing:.02em;
  margin-bottom:12px;font-variant-numeric:tabular-nums}
.steps h3,.step h3{margin:0 0 10px;font-size:18px}
.steps p,.step p{margin:0;font-size:14.5px;line-height:1.6;color:var(--g2);max-width:42ch}

/* the fact strip — where a B2B page puts a logo wall. Four checkable method facts instead: no customer
   count, no rating, no borrowed logo, nothing we have not earned. */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--g4);border:1px solid var(--g4);
  border-radius:var(--r-card);overflow:hidden}
.facts div{background:var(--w);padding:26px 24px}
.facts .n{display:block;font-size:26px;font-weight:700;color:var(--g1);letter-spacing:-.03em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.facts .l{display:block;margin-top:var(--s1);font-size:13.5px;color:var(--g3);line-height:1.45}
@media(max-width:900px){.facts{grid-template-columns:repeat(2,1fr)}}

/* the limits list — two shapes again: `<div class="limits"><ul>` and a bare `<ul class="limits">`. */
.limits{max-width:none}
.limits ul,ul.limits{list-style:none;padding:0;margin:0;display:grid;gap:0 var(--s5);grid-template-columns:1fr 1fr}
.limits li{padding:20px 0;border-top:1px solid var(--g4);font-size:14.5px;line-height:1.6;color:var(--g2);
  max-width:52ch}
.limits li b{display:block;margin-bottom:2px}
@media(max-width:860px){.limits ul,ul.limits{grid-template-columns:1fr}}

/* the FAQ */
.faq{border-top:1px solid var(--g4)}
.faq details{border-bottom:1px solid var(--g4);padding:0;max-width:none}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;
  list-style:none;padding:22px 0;min-height:44px;font-size:17px;font-weight:600;color:var(--g1);
  letter-spacing:-.012em}
.faq summary::-webkit-details-marker{display:none}
/* the chevron is a rotated square: its BOUNDING BOX is 17px wide, not 12, so without a reserve it reported
   5px of overflow on every <summary> at 390 (round-2 H4 forbids any box wider than its content with no
   painted scroll hint). Round 5 reserved 3px, which left 2px still reported at both widths; measured again
   this round on the eight-item /pricing FAQ, 5px clears it at 1440 and at 390. Layout is unchanged; the
   reserve is what the rotation needs. */
.faq summary::after{content:"";flex:0 0 12px;width:12px;height:12px;margin-right:5px;
  border-right:1.8px solid var(--g3);border-bottom:1.8px solid var(--g3);
  transform:rotate(45deg) translateY(-3px);transition:transform .15s ease}
.faq details[open] summary::after{transform:rotate(225deg) translateY(-3px)}
.faq details p,.faq details>p{margin:0;padding:0 0 var(--s3);max-width:78ch;font-size:15px;line-height:1.7;color:var(--g2)}

/* the person */
.who{display:grid;grid-template-columns:220px 1fr;gap:var(--s5);align-items:start}
@media(max-width:760px){.who{grid-template-columns:1fr;gap:var(--s3)}}
.who .sig{font-size:17px;font-weight:600;color:var(--g1);line-height:1.3}
.who .sig span{display:block;margin-top:var(--s0);font-size:13.5px;font-weight:400;color:var(--g3);
  font-family:var(--sans);letter-spacing:0;text-transform:none}
.who p+p{margin-top:var(--s2)}

/* ============================================================================================== pricing */
/* the on-this-page anchor row. ONE row at every width, scrollable sideways, links that do not shrink —
   the same three declarations `.report-rail` carries, so the two can never diverge into two mechanisms. */
.pillnav{display:flex;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;gap:0 var(--s0);margin:var(--s3) 0 0;
  padding:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pillnav::-webkit-scrollbar{display:none}
.pillnav a{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;font-size:14px;
  font-weight:500;color:var(--g2);text-decoration:none;border:1px solid var(--g4);border-radius:var(--r-pill);
  background:var(--w)}
.pillnav a+a{margin-left:var(--s1)}
.hero.mid .pillnav{justify-content:center}
.pillnav a:hover{color:var(--a);border-color:var(--a);background:var(--a-soft);text-decoration:none}
@media(max-width:720px){.pillnav{flex-wrap:wrap;overflow-x:visible;white-space:normal;gap:var(--s1)}
.pillnav a+a{margin-left:0}
.hero.mid .pillnav{justify-content:flex-start}}
/* the CTA row that repeats above the comparison matrix, so a reader who scrolled down to compare does not
   scroll back up to buy */
.ctarow{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin:0 0 var(--s2);padding:0}
.ctarow a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--a)}
.plan .short{margin:var(--s2) 0 0;font-size:13px;line-height:1.5;color:var(--g3)}
/* 2026-09-16 (O4): the plan card's terms block was five bold labels run together as ONE paragraph of
   small grey text, printed on all three cards. One line per label -- same words, same colour, same size --
   so it reads as a spec sheet rather than a wall. See web/templates/_ladder.html's scope_and_limits(). */
.scope .scope-row{display:block;margin:0 0 5px}
.scope .scope-row:last-child{margin-bottom:0}
.plan ul{list-style:none;padding:0;margin:var(--s2) 0 0;display:grid;gap:9px;flex:1}
.plan ul li{font-size:13.5px;line-height:1.55;color:var(--g2);padding-left:var(--s2);position:relative}
.plan ul li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:1px;background:var(--g3)}
.plan ul li b{color:var(--g1)}
/* O4: the provenance beside a sample link is a caption, not part of the link label. */
.proof-note{font-weight:400;color:var(--g3)}
.plan .proof{display:block;margin-top:var(--s1);font-size:13px;font-weight:500;text-align:center;
  min-height:44px;display:flex;align-items:center;justify-content:center}
.recap{margin:var(--s3) 0 0;font-size:15px;line-height:1.6;color:var(--g1);font-weight:600;max-width:none}
.ladder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);align-items:stretch;margin-top:var(--s4);max-width:760px;margin-left:auto;margin-right:auto}
@media(max-width:1040px){.ladder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.ladder{grid-template-columns:1fr}
  /* 2026-09-16 (O4): stacked one-column, the cards follow DOM order (Check, Pro, Agency) and each is ~1,700px
     of terms the tests require the card to carry -- measured on a 390px phone, the page's ONE filled button
     (Pro's) was 3,838px down. The recommended plan already wears the "Start here" tag; on phones it also comes
     first. Visual order only: DOM order, desktop layout and every test that reads the cards are unchanged. */
  .ladder .plan.pick{order:-1}}
/* round-8 ladder: THREE plans (Check / Pro / Agency Portfolio, PRODUCT_LADDER.md 2026-09-08). The two-column
   rule above stays the default for any surface that shows two; `.ladder.three` is the only new selector, and it
   re-uses the same 8-pt gap, the same `.plan` card and the same breakpoints. */
.ladder.three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1080px}
@media(max-width:1040px){.ladder.three{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}}
@media(max-width:760px){.ladder.three{grid-template-columns:1fr;max-width:520px}}
.plan{display:flex;flex-direction:column;background:var(--w);border:1px solid var(--g4);
  border-radius:var(--r-card);padding:24px 22px}
.plan.pick{border-color:var(--a);box-shadow:var(--sh);position:relative}
.plan .tag{position:absolute;top:-11px;left:22px;background:var(--a);color:var(--on-a);font-size:12px;
  font-weight:600;padding:3px 10px;border-radius:var(--r-pill);letter-spacing:-.002em}
.plan .name{font-size:13.5px;font-weight:600;color:var(--g1)}
.plan .price{display:block;margin-top:var(--s2);font-size:34px;font-weight:700;color:var(--g1);letter-spacing:-.04em;
  line-height:1;font-variant-numeric:tabular-nums}
.plan .price em{font-style:normal;font-size:13px;font-weight:500;color:var(--g3);letter-spacing:-.005em;margin-left:var(--s0)}
.plan .unit{display:block;margin-top:10px;font-size:12.5px;color:var(--g3)}
.plan .best{margin-top:var(--s2);font-size:13.5px;line-height:1.5;color:var(--g2)}
.plan .go{margin:var(--s2) 0 0}
.plan .go a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;font-weight:600}
.plan.pick .go a{background:var(--a);color:var(--on-a);border-radius:var(--r-ctl);padding:0 10px;width:100%;
  justify-content:center;white-space:nowrap}
.plan.pick .go a:hover{background:var(--a-h);text-decoration:none}
.trustline{margin-top:var(--s4);font-size:13.5px;color:var(--g3);text-align:center}
.plan-trust{margin:8px 0 0;font-size:12.5px;color:var(--g3);line-height:1.45}
.p-head .sep{margin:0 6px;color:var(--g3)}
.preview-notice{margin-top:var(--s3)}
.refund{margin-top:var(--s2);font-size:13.5px;line-height:1.6;color:var(--g3);max-width:80ch;margin-inline:auto;
  text-align:center}
.trustrow{display:flex;justify-content:center;gap:0;flex-wrap:wrap;margin:var(--s2) 0 0;font-size:12.5px;
  color:var(--g3);list-style:none;padding:0}
.trustrow li+li::before{content:"\00b7";margin:0 10px;color:var(--g4)}
.forwhom{margin-top:20px;font-size:13px;color:var(--g3);text-align:center}

/* ================================================================= the product frame (an ILLUSTRATION)
   A drawn report window, not a screenshot and not a customer's data: every brand inside it is one of the
   software industry's canonical placeholder companies, the window chrome carries an `Illustration` tag, and
   the caption links to the real public report one click away. */
.frame-wrap{position:relative;margin-top:var(--s1)}
.frame{background:var(--w);border:1px solid var(--g4);border-radius:var(--r-frame);box-shadow:var(--sh-lift);
  overflow:hidden;text-align:left}
.frame-bar{display:flex;align-items:center;gap:var(--s2);padding:12px 16px;border-bottom:1px solid var(--g4);
  background:var(--g5)}
.dots{display:flex;gap:6px;flex:0 0 auto}
.dots i{width:10px;height:10px;border-radius:50%;background:var(--g4);display:block}
.frame-url{flex:1;min-width:0;background:var(--w);border:1px solid var(--g4);border-radius:var(--r-pill);
  padding:5px 14px;font-size:12.5px;color:var(--g3);overflow:clip;text-overflow:ellipsis;white-space:nowrap}
.frame-tag{flex:0 0 auto;font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--g3);
  border:1px solid var(--g4);border-radius:var(--r-pill);padding:4px 10px;background:var(--w)}
.frame-body{padding:28px}
.frame-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:var(--s2);
  padding-bottom:20px;border-bottom:1px solid var(--g4)}
.frame-title{font-size:20px;font-weight:700;color:var(--g1);letter-spacing:-.02em;line-height:1.25;margin:0}
.frame-h4{font-size:13px;font-weight:600;color:var(--g1);letter-spacing:-.005em;margin:0 0 14px}
.frame-split{display:grid;grid-template-columns:1.35fr 1fr;gap:28px;margin-top:26px}
.frame-cap{margin-top:20px;font-size:13px;color:var(--g3);text-align:center}
.frame-cap a{font-weight:600;display:inline-flex;align-items:center;min-height:44px;padding-inline:var(--s0)}
@media(max-width:900px){.frame-split{grid-template-columns:1fr;gap:22px}}
@media(max-width:760px){.frame-body{padding:16px}.frame-tag{display:none}}
.chips{display:flex;gap:var(--s1);flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:500;color:var(--g2);
  border:1px solid var(--g4);border-radius:var(--r-pill);padding:5px 12px;background:var(--w)}
.chip.on{color:var(--a);border-color:var(--a);background:var(--a-soft)}
.chip i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.srcs{display:grid;gap:9px}
.src{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--g2);border:1px solid var(--g4);
  border-radius:var(--r-ctl);padding:9px 12px;background:var(--w)}
.src span{flex:1;min-width:0;overflow:clip;text-overflow:ellipsis;white-space:nowrap}
.src em{font-style:normal;color:var(--g3);font-variant-numeric:tabular-nums;flex:0 0 auto}
.src svg{width:14px;height:14px;flex:0 0 14px;color:var(--g3)}
@media(max-width:520px){.chip{font-size:12px;padding:4px 9px}.frame-title{font-size:17px}}

/* the free-scan control's own quiet band */
.free{max-width:640px;margin-inline:auto;text-align:center}
.free h2{font-size:clamp(22px,2vw,28px);margin:0 auto;max-width:24ch}
.free .meta{margin-top:12px}
.free form{margin-top:28px;text-align:left}
.free form .btn,.free form button{width:100%;margin-top:12px}
.free form .hint{margin-top:12px;font-size:12.5px;color:var(--g3);text-align:center;max-width:none}
.free .err{margin:0 auto var(--s2);text-align:left}

/* ============================================================== the two promoted pages' page shell ----
   index.html and pricing.html set `p-home` / `p-pricing` on <body> (base.html's `bodyclass` block). The
   ONLY thing that scope still does in round 5 is let the marketing pages run their sections edge to edge:
   `main` drops its own measure and gutter, `.sec`/`.close` carry them instead, and everything that is NOT
   the page content (the masthead, the dev banner, the footer) keeps the same measure and gutter it had.
   No token, no colour and no component is scoped any more — there is one system and every page is on it. */
:is(.p-home,.p-pricing) main{max-width:none;padding:0}
:is(.p-home,.p-pricing) main>:not(.page){max-width:1240px;margin-inline:auto;padding-inline:20px}
:is(.p-home,.p-pricing) footer{margin-top:0;padding-bottom:56px}
.page{display:block}
.page>.strip+.strip{border-top:1px solid var(--g4)}

/* ============================================================================================== chrome */
pre{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tap-pad{padding:13px 6px;display:inline-block}
.devbanner{background:var(--warn-bg);color:var(--devbanner-fg);border:1px solid var(--warn-border);
  padding:8px 14px;border-radius:var(--r-ctl);font-size:14px;margin-bottom:var(--s2)}

/* ============================================================================================== footer */
footer{margin-top:var(--s7);border-top:1px solid var(--g4);padding-top:var(--s3);font-size:13px;color:var(--g3)}
footer .foot-top{display:flex;flex-wrap:wrap;gap:var(--s3);justify-content:space-between;align-items:flex-start}
footer .links{display:flex;flex-wrap:wrap}
footer .links a{color:var(--g3)}
footer .links a:hover{color:var(--a)}
footer .entity{max-width:54ch}
footer .entity div{margin-bottom:var(--s0)}

/* ======================================================================================= accessibility */
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;background:var(--a);color:var(--on-a);padding:12px 18px;
  border-radius:0 0 var(--r-ctl) 0;z-index:50;font-weight:600;text-decoration:none}
.skip:focus{left:0}
/* One visible focus ring for every interactive thing, not just text inputs. */
a:focus-visible,button:focus-visible,.btn:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--a);outline-offset:2px;border-radius:var(--r-ctl)}
/* The 44px tap-target floor applies at every width, not only on phones. The padding half is kept in a rule
   whose selector is exactly `.nav a,footer .links a` because tests/test_claim_tags.py pins that selector and
   asserts its body declares a padding and nothing about display; the box-model half therefore lives one rule
   below, under a more specific selector, where it cannot pollute the pinned one. */
.nav a,footer .links a{padding:12px 10px}
header.top .nav a,footer .foot-top .links a{display:inline-flex;align-items:center;min-height:44px}
footer .foot-top .links a{padding-left:0;padding-right:18px}

/* ========================================================================================== responsive */
@media(max-width:760px){
  /* On a phone the navigation folds away and the one primary action stays — the shape all five reference
     products ship. Every one of these links is also in the footer, which does not fold. */
  /* `header.top .nav a` above declares display:inline-flex at (0,2,2) for the 44px floor, so a bare
     `.nav a:not(.cta)` (0,2,1) loses to it on specificity whatever the source order -- measured: the nav
     did not fold at 390 and the masthead wrapped to four rows. Same selector shape, one class deeper. */
  header.top{flex-wrap:nowrap;padding:12px 0;gap:var(--s2)}
  header.top .nav a:not(.cta){display:none}
  header.top .nav a.cta{margin-left:0;font-size:14px;padding:10px 14px;min-height:44px}
  .wordmark{font-size:17px}
  .wordmark .lk{height:20px}
  .hero{padding:var(--s4) 0}
  .hero.mid{text-align:left}
  .hero.mid h1{margin-inline:0;max-width:none}
  .hero.mid .lede{margin-inline:0;text-align:left}
  .hero.mid .hero-cta{justify-content:flex-start;gap:var(--s1)}
  .hero-cta .btn{width:100%}
  .hero-fine{display:flex;flex-direction:column;gap:var(--s0);align-items:flex-start}
  .hero-fine span+span::before{content:none;margin:0}
}
@media(max-width:720px){
  /* Below this width most report tables would squeeze six columns into 350px and stack every cell one word
     per line. Give them a floor and let .wrap scroll instead. */
  .wrap table{min-width:520px}
  .wrap table.compare{min-width:0}
  main{padding:var(--s2) 16px var(--s6)}
  .sec,.close{padding-inline:16px}
  :is(.p-home,.p-pricing) main>:not(.page){padding-inline:16px}
  h2{margin-top:var(--s4)}
  form input,form textarea,form select{font-size:16px}   /* iOS zooms the page in on any field under 16px */
  button,.btn{min-height:48px;font-size:15.5px}
}
@media(max-width:480px){
  /* A long buyer question in a narrow report table wrapped into 8-12 lines on a phone. */
  .q-cell{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* ADDITIVE and deliberately AFTER the @media(max-width:480px) block above, so it wins on source order
   without that rule being edited: two lines, and the title attribute stays for mouse users. */
@media (max-width:640px){
  .q-cell{max-width:none;min-width:14ch;white-space:normal;display:-webkit-box;-webkit-box-orient:vertical;
    -webkit-line-clamp:2;overflow:hidden}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* r5 group 3 */
/* ==================================================================================================
   ADDITIVE ONLY - UI round 5, group 3: the money surfaces (/buy/*, the claim page, the dev checkout,
   the closed-agency page, the receipt) and the fix queue. Every selector below is NEW or strictly more
   specific than one above it, so nothing group 1 landed is edited and no template outside this group
   changes.

   Two things this comment deliberately does NOT contain, because base.html's stylesheet is served
   INSIDE every page and several tests read the rendered HTML:
     * the print at-rule spelled out. Three tests locate base.html's own print rules with a regular
       expression over this whole file, one taking the FIRST match and one the LAST, so a second
       occurrence anywhere - in a rule or in a comment - makes one of them read the wrong block. Group
       3 therefore adds no print rules here at all; the two documents a buyer keeps (fixpack_export.html
       and receipt.html) are standalone pages and carry their own.
     * an opening form tag, a checkout href or a price. tests/test_r7_agency_gate.py asserts that the
       closed Agency page contains no form tag and no price of any kind, and that page renders this
       stylesheet like every other. Ruling R7-G is enforced on the bytes of the response, so a comment
       that merely TALKS about a form is a failure. Nothing below names one.

   Everything is expressed in the ONE system's tokens (SYSTEM.md 1): the thirteen palette values, the
   8-pt ladder, `--r-card`/`--r-ctl`/`--r-pill`, the two shadows. No hex, no font literal, no second
   spacing scale - so dark mode is inherited rather than written twice.

   The one shape this block adds that the system did not already have is the CHECKOUT SHELL. Round-3
   G6 asks the buy page for one clearly visible primary action with the order summary in the fold at
   1440 AND 390. A single 68ch column cannot do that: the deliverables list, both sample links and the
   refund note sit between the price and the button, and round 6 measured 6,415 characters of them.
   So the page becomes three regions - head (eyebrow + price), the order card (the summary AND the one
   set of controls, together), and the reading column - laid out as a grid whose areas re-order
   themselves: at >=1000px the card is a sticky right rail; below that it is the SECOND thing in the
   source, right under the h1, so the summary and the pay control are in the phone fold too. No field,
   no name, no action and no consent sentence moved: the whole group of controls is carried across.
   ================================================================================================== */
.checkout{display:grid;grid-template-columns:minmax(0,1fr) 400px;grid-template-areas:"head side" "main side";
  column-gap:var(--s5);row-gap:var(--s2);align-items:start}
/* round-8 8b: the round-8 checkout has no `.checkout-side` (the order card and the credit note belonged to the
   retired one-off catalog), so the 400px side track was reserved and left empty — half the page blank at 1440.
   A modifier rather than a change to the base rule, because the agency/closed pages still render a side. */
.checkout.one-col{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "main"}
/* conversion pass (2026-09-17): the form is the first thing in the main column; the summary card rides the right
   rail on desktop and stacks UNDER the form on a phone (the CTA must come before the disclosures at 390px), so the
   phone order is head → main → side, not head → side → main. */
.checkout.convert{grid-template-columns:minmax(0,1fr) 340px;column-gap:var(--s5)}
.checkout.convert .checkout-main{max-width:60ch}
.checkout.convert .benefits{margin:var(--s1) 0 0;padding:0;list-style:none;display:grid;gap:6px}
.checkout.convert .benefits li{font-size:14.5px;color:var(--g2);line-height:1.5;display:flex;gap:8px;align-items:baseline}
.checkout.convert .benefits li::before{content:"\2713";color:var(--good);font-weight:700;flex:0 0 auto}
.checkout.convert .checkout-head .sub{margin:var(--s0) 0 0;font-size:16px;color:var(--g2)}
.checkout.convert .checkout-form{margin:0 0 var(--s3);padding:var(--s3);background:var(--w);border:1px solid var(--a);border-radius:var(--r-card);box-shadow:var(--sh)}
.checkout.convert .checkout-form label{margin-top:var(--s1)}
.checkout.convert .checkout-form label:first-of-type{margin-top:0}
.checkout.convert .checkout-form input[type=email],.checkout.convert .checkout-form input[type=number]{max-width:none;width:100%}
.checkout.convert .checkout-form .paybtn{width:100%;margin-top:var(--s2)}
.checkout.convert .payline{margin:var(--s1) 0 0;text-align:center;color:var(--g3)}
.checkout.convert .payline+.payline{margin-top:4px}
.checkout.convert .consent.secondary{color:var(--g3)}
.disclosures{display:grid;gap:var(--s1)}
.disc{border:1px solid var(--g4);border-radius:var(--r-card);background:var(--w)}
.disc>summary{cursor:pointer;padding:14px var(--s2);font-weight:600;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;min-height:44px}
.disc>summary::-webkit-details-marker{display:none}
.disc>summary::after{content:"+";color:var(--g3);font-weight:600;font-size:18px;line-height:1}
.disc[open]>summary::after{content:"\2212"}
.disc>summary:focus-visible{outline:2px solid var(--a);outline-offset:2px;border-radius:var(--r-card)}
.disc-body{padding:0 var(--s2) var(--s2)}
.disc-body>p{max-width:none}
.disc-body .callout{margin-top:var(--s2)}
/* audit pass (2026-09-18): the one illustrative report module (homepage "What you get", audience pages) */
.report-module{background:var(--w);border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s3)}
.rm-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--s3);align-items:start}
.rm-main h3{margin:4px 0 6px;font-size:clamp(20px,2.2vw,26px);line-height:1.2}
.rm-explain{margin:0 0 var(--s1);color:var(--g2);font-size:15px}
.rm-chart{margin:0;min-width:0;max-width:100%;overflow-x:auto}
.rm-chart svg{width:100%;height:auto;display:block}
.rm-defs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1);margin:var(--s1) 0 0}
.rm-defs div{font-size:13px;color:var(--g3)}.rm-defs dt{font-weight:600;color:var(--g1);display:inline}.rm-defs dt::after{content:" = "}.rm-defs dd{display:inline;margin:0}
.rm-kpis{grid-template-columns:1fr;gap:var(--s1);margin:0}
.rm-kpis .kpi{padding:12px 14px;display:grid;gap:2px}
.rm-kpis .kpi-n{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.rm-kpis .kpi-l{font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--g3);font-weight:600}
.rm-kpis .kpi-s{font-size:12.5px;color:var(--g3)}
.rm-action{margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--g4)}
.rm-action-t{margin:6px 0 4px;font-size:15px;line-height:1.4}
@media(max-width:900px){.rm-grid{grid-template-columns:1fr}.rm-defs{grid-template-columns:1fr}}
/* audit pass (2026-09-18): /preview as a report */
.preview-report .prv-head{padding:var(--s4) 0 var(--s2);border-bottom:1px solid var(--g4);margin-bottom:var(--s3)}
.preview-report .prv-head h1{margin:6px 0 10px}
.prv-meta{display:flex;flex-wrap:wrap;gap:6px var(--s2);margin:0;font-size:13.5px;color:var(--g3)}
.prv-meta span:first-child{color:var(--g1)}
.prv-sec{padding:var(--s3) 0 var(--s4);border-bottom:1px solid var(--g4)}
.prv-sec:last-of-type{border-bottom:0}
.prv-h h2{margin:4px 0 6px;font-size:clamp(20px,2.4vw,28px);line-height:1.2;max-width:none}
.prv-h .sub{margin:0 0 var(--s2);color:var(--g2)}
.prv-decision{font-size:16px;color:var(--g1);max-width:70ch;margin:0 0 var(--s2)}
.prv-chart{margin:0 0 var(--s2);min-width:0;max-width:100%;overflow-x:auto}
.prv-chart svg{width:100%;height:auto;display:block;max-width:760px}
.evid.heat td.cell-won{background:#e7f4ec}.evid.heat td.cell-partial{background:#fbf1dc}.evid.heat td.cell-lost{background:#fbe6e4}.evid.heat td.cell-na{color:var(--g3)}
.plan-list{list-style:none;margin:0 0 var(--s2);padding:0;display:grid;gap:var(--s2)}
.plan-item{background:var(--w);border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s2) var(--s3)}
.plan-t{margin:8px 0 6px;font-size:17px;line-height:1.3}
.plan-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:8px var(--s2);margin:0 0 var(--s1)}
.plan-facts div{font-size:13.5px;color:var(--g2)}.plan-facts dt{font-weight:600;color:var(--g3);font-size:12px;letter-spacing:.04em;text-transform:uppercase}.plan-facts dd{margin:2px 0 0;overflow-wrap:anywhere}
@media(max-width:600px){.preview-report .kpis{grid-template-columns:1fr}}
/* audit pass (2026-09-18): the coverage bar in HTML -- labels never scale with the width */
.cov{margin:var(--s2) 0}
.cov-bar{display:flex;height:38px;border-radius:6px;overflow:hidden;background:var(--g5)}
.cov-seg{display:flex;align-items:center;justify-content:center;min-width:0;color:#fff;font-weight:700;font-size:13px;position:relative}
.cov-seg.won{background:var(--good)}.cov-seg.lost{background:var(--bad)}.cov-seg.na{background:var(--g4);color:var(--g1)}.cov-legend .sw.na{background:var(--g4)}
.cov-seg.partial{background:var(--warn);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 4px,transparent 4px 8px)}
.cov-seg span{padding:0 4px;white-space:nowrap;overflow:hidden;text-overflow:clip}
.cov-legend{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--g1)}
.cov-legend li{display:flex;align-items:center;gap:6px}
.cov-legend .sw{display:inline-block;width:12px;height:12px;border-radius:2px;flex:none}
.cov-legend .sw.won{background:var(--good)}.cov-legend .sw.lost{background:var(--bad)}
.cov-legend .sw.partial{background:var(--warn);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.28) 0 2px,transparent 2px 4px)}
/* audit pass (2026-09-18): ranked and grouped bars in HTML -- readable at 390px, type never scales */
.hbars{list-style:none;margin:var(--s2) 0 0;padding:0}
.hb{display:grid;grid-template-columns:minmax(78px,132px) minmax(0,1fr) minmax(104px,auto);gap:8px;align-items:center;margin:6px 0;font-size:13px;color:var(--g1)}
.hb.you .hb-l{font-weight:700;color:var(--ink)}
.hb-l{min-width:0;overflow-wrap:anywhere}
.hb-track{height:14px;background:var(--g5);border-radius:3px;overflow:hidden;min-width:0}
.hb-fill{display:block;height:100%;border-radius:3px}
.hb-fill.c-you{background:var(--a)}.hb-fill.c-leader{background:var(--g1)}.hb-fill.c-other{background:var(--g3)}
.hb-v{white-space:normal}
.hb-group{padding:8px 0;border-top:1px solid var(--line)}.hb-group:first-child{border-top:0}
.hb-group.na .hb-gl{color:var(--g3)}
.hb-gl{font-size:13px;margin-bottom:2px}
@media(max-width:420px){.hb{grid-template-columns:minmax(70px,96px) minmax(0,1fr) minmax(92px,auto);gap:6px;font-size:12px}}
/* correction pass (2026-09-18, audit F-20/K): /my tables become stacked labelled rows on narrow screens -- no clipped columns to discover */
@media (max-width:640px){
  .ptable.compare.rows-stack thead{display:none}
  .ptable.compare.rows-stack tr{display:block;border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s2) var(--s3);margin:0 0 var(--s2);background:var(--w)}
  .ptable.compare.rows-stack th,.ptable.compare.rows-stack td{display:block;text-align:left;border:0;padding:2px 0;width:auto;white-space:normal}
  .ptable.compare.rows-stack th{font-weight:700;color:var(--ink);padding-bottom:4px}
  .ptable.compare.rows-stack td[data-l]::before{content:attr(data-l) ": ";color:var(--g3);font-size:12px}
  .ptable.compare.rows-stack td[data-l]>span{display:inline}
}
/* audit pass (2026-09-18): methodology's 30-second method and scope card */
.method30{margin:var(--s3) 0}
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:900px){.steps.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.steps.four{grid-template-columns:1fr}}
.scope-card ul{margin:8px 0 0}.scope-card li{margin:4px 0}
.plan .plan-more{margin-top:var(--s2);text-align:left}
.plan .plan-more>summary{font-size:14px;padding:10px var(--s1)}
.plan .plan-more .disc-body{padding:0 var(--s1) var(--s1)}
.plan .plan-more .scope{margin-top:var(--s1)}
.checkout.convert .ordercard.summary{padding:var(--s2)}
.checkout.convert .ordercard.summary .reassure{margin-top:var(--s1)}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media(max-width:1000px){
  .checkout.convert{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "main" "side";row-gap:var(--s3)}
  .checkout.convert .checkout-main{max-width:none}
  .checkout.convert .checkout-side{position:static}
}
@media(max-width:760px){
  .checkout.convert .checkout-form{padding:var(--s2)}
  .checkout.convert .benefits li{font-size:14px}
}
.checkout.one-col .checkout-main{max-width:64ch}
.checkout-head{grid-area:head;min-width:0}
.checkout-main{grid-area:main;min-width:0}
/* sticky inside a grid: the item is content-height (align-items:start above) and its containing block is
   the grid, which is as tall as the two left-hand rows — so it travels with the reader and stops at the top. */
.checkout-side{grid-area:side;min-width:0;position:sticky;top:var(--s2)}
.checkout-head h1{margin:0 0 var(--s1);max-width:none}
.checkout-main>:first-child{margin-top:0}
@media(max-width:1000px){
  .checkout{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "side" "main";row-gap:var(--s3)}
  .checkout-side{position:static;top:auto}
}
/* The phone fold, measured rather than eyeballed. At 390x844 with the head at the system's h1 size the Pay
   button landed at y=923 — 79px below the fold, i.e. the summary was visible and the action was not, which is
   half of what round-3 G6 asks for. Six declarations, all of them slack rather than content: the checkout's
   own h1 drops one step (the price is still the largest thing on the screen and the tier label still fits on
   one line, so nothing is smaller than it needs to be), the card and its rows lose one step of padding, and the
   three vertical gaps inside the form go from 16 to 8. Nothing is hidden and no sentence is shortened. */
@media(max-width:760px){
  .checkout{row-gap:var(--s2)}
  .checkout-head .eyebrow{margin-bottom:var(--s0)}
  .checkout-head h1{font-size:clamp(27px,7.2vw,33px);line-height:1.12}
  .ordercard{padding:var(--s2)}
  .ordersum{padding-bottom:var(--s0)}
  .sumrow{padding:4px 0}
  .sumrow.total{padding-top:10px}
  .sumrow.total .v{font-size:24px}
  .ordercard .reassure{gap:2px var(--s2)}
  .ordercard .reassure li{font-size:13px}
}
/* the order card — the one elevated surface on the page, the same treatment the $29 plan card gets on
   /pricing, because it is the same claim: this is the thing you came here to do. */
.ordercard{background:var(--w);border:1px solid var(--a);border-radius:var(--r-card);box-shadow:var(--sh);
  padding:var(--s3)}
.ordercard>form{margin:0}
.ordersum{margin:0 0 var(--s1);padding:0 0 var(--s0);border-bottom:1px solid var(--g4)}
.ordersum+.err,.ordersum+.note{margin-top:0}
.sumrow{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s2);padding:5px 0;
  font-size:14px;line-height:1.45}
.sumrow .k{color:var(--g3)}
.sumrow .v{color:var(--g1);font-weight:600;text-align:right;font-variant-numeric:tabular-nums}
.sumrow.credit .v{color:var(--good)}
.sumrow.total{margin-top:var(--s1);padding-top:12px;border-top:1px solid var(--g4)}
.sumrow.total .k{color:var(--g1);font-weight:600;font-size:15px}
.sumrow.total .v{font-size:26px;line-height:1.1;letter-spacing:-.035em}
/* the form inside the card: full width, no 34rem measure, and the consent rows are a component rather
   than the same five inline declarations repeated once per checkbox. */
.ordercard form input,.ordercard form textarea,.ordercard form select{max-width:none}
/* The card's vertical rhythm is one step tighter than the page's, at every width. It is not decoration: the
   card holds a summary, a field, up to three consent rows, four reassurances and a promise line, and the
   thing under all of them is the only action on the page. Measured at 1440x900 on the longest checkout page — the tier with a
   plan selector AND a second required consent — the button was at y=912 with the page rhythm and is at y=835
   with this one. Nothing is hidden and no sentence is shortened; the gaps go from 16 to 8. */
.ordercard form label{margin-top:var(--s1)}
.ordercard .hint{margin-top:var(--s0)}
.ordercard .paybtn{width:100%;margin-top:var(--s2)}
.ordercard .reassure{margin-top:var(--s1);gap:var(--s0) var(--s2)}
.ordercard .payline{margin:var(--s1) 0 var(--s0)}
.ordercard .note,.ordercard .err,.ordercard .hint,.ordercard .small,.ordercard p{max-width:none}
.consent{display:flex;align-items:flex-start;gap:10px;margin:var(--s1) 0 0;font-size:14px;line-height:1.5;
  font-weight:400;color:var(--g2)}
.consent input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;max-width:none;margin:2px 0 0;padding:0;
  accent-color:var(--a)}
.consent a{font-weight:500}
.consent .small{font-size:13.5px;color:var(--g2)}
/* queue item 6: the question-edit form -- one row per question, the number as a label and the wording as an input */
.qedit-row{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:8px;align-items:center;margin:var(--s1) 0 0}
.qedit-row label{text-align:right;color:var(--g2)}
.qedit-row input{max-width:none;width:100%;font-size:14px}
/* The two sample links sit INSIDE a sentence ("Never seen one? [Read a real Check report] — the full
   report for our own site…"), and round 7 gave them button weight on purpose. A 52px control in a
   21px line box tears the paragraph in half, so in the reading column they take the compact size --
   still over the 44px floor, still `.btn ghost`, same markup, same sentence. */
.checkout-main p .btn.ghost{min-height:44px;margin-top:var(--s0);padding:10px 18px;font-size:14px}
/* the buy page's own stack of banners belongs beside the card, not above the reading column */
.checkout-side>.note,.checkout-side>.err{max-width:none;margin:0 0 var(--s2)}
.checkout-side>.ordercard+.note{margin:var(--s2) 0 0}

/* --- the money surfaces' small parts -------------------------------------------------------------- */
/* the one-time start link: it IS a URL, so it has to be able to wrap. As a block that breaks anywhere it
   cannot report overflow at 390 the way a nowrap control would (round-2 H4). */
.urlbtn{display:block;width:100%;max-width:none;margin-top:0;padding:14px var(--s2);text-align:center;
  font-size:15px;font-weight:600;line-height:1.4;word-break:break-all;overflow-wrap:anywhere}
/* a key/value table (the order block, the fix queue's facts): every row's <th> is a label here, not only
   the first row's, which is all base.html's `thead th,tr:first-child th` can know. */
.kv th{width:34%;color:var(--g3);font-weight:600;font-size:13px;letter-spacing:0;text-transform:none;
  vertical-align:top}
.kv tr:first-child th{border-bottom:1px solid var(--g4)}
.kv td{color:var(--g2)}
@media(max-width:520px){.kv th{width:40%}}
/* a quiet run of meta links under a money surface (the receipt row on the claim page, the billing row on
   the workspace): one wrapping row, every link at the 44px floor. */
.metalinks{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--s2);margin:var(--s2) 0 0;padding:0;
  list-style:none;font-size:13.5px;color:var(--g3);max-width:none}
.metalinks a{display:inline-flex;align-items:center;min-height:44px}
/* axe `link-in-text-block` (serious), measured on the closed-agency page, /fix/<jid> and /cms/<jid>: base.html underlines
   a prose link by naming the ELEMENTS prose lives in (`p a, li a, td a, …`). A link that is a direct child of a
   `.note` or a `.callout` — a bare <a> inside the tinted panel, which is how three of group 3's pages write
   theirs — is matched by none of them, so cobalt-on-grey (1.38:1 light, 1.54:1 dark) was the only thing
   distinguishing it. `:not(.btn)` keeps a button inside a callout a button. */
.note>a:not(.btn),.callout>a:not(.btn){text-decoration:underline}
/* A compact secondary control for a table cell (revoke a share link, remove a site). Compact HORIZONTALLY
   only: it keeps the 44px height floor, because these three were 20-27px high and one of them stops a client's
   share link working. `.ghost` still paints it; this only changes its size. */
.btn.tiny,button.tiny{min-height:44px;margin:0;padding:8px 14px;font-size:13.5px;font-weight:600;
  border-radius:var(--r-ctl)}
/* the vertical rhythm of a page that is a short stack of panels (the dev checkout, the workspace forms) */
/* `minmax(0,1fr)`, not `1fr`: a grid track's default minimum is min-content, and a panel holding a
   `.wrap` table (base.html gives one a 520px floor below 720px) therefore pushed the whole page to
   584px at 390 — measured on /fix/<jid> before generation. One keyword, no layout change above 720. */
.stack{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);margin-top:var(--s3)}
.stack>*{min-width:0}
.stack.tight{gap:var(--s2)}
/* the fix queue's build screen: one bounded panel rather than a full-width stretched tile */
.progressbox{border:1px solid var(--g4);background:var(--w);border-radius:var(--r-card);padding:var(--s3);
  max-width:34rem}
.progressbox .stat-lg{margin:var(--s1) 0 var(--s2)}
/* r5 group 3 — end */
/* ==================================================================================================
   r5 GROUP 2 — THE REPORT SURFACES ON CONCEPT B.  ADDITIVE, and deliberately the LAST block before
   `@media print`, so every print rule below still wins on source order.

   Owns the paint of five templates: report.html, status.html, retest_compare.html, retest_trend.html
   and methodology.html. Nothing above this line is edited and no token is declared, redeclared or
   aliased here (tests/test_r5_ui_system.py::test_no_other_selector_declares_a_palette_token) — every
   value below is `var(--…)` off the one block at the top of this file, so dark mode follows for free.

   The four things it does, in the order concept B's own brief asks for them:
     1. the KPI box (`.tile` + `.eyebrow`/`.big`/`.ci`) is repainted as B's KPI tile — 12.5px grey
        sentence-case label, a large tight Inter numeral, a 12px sub-label. `.big` and `.ci` keep
        their names (57 call sites across 16 templates, SYSTEM.md §2.3) and lose the mono face:
        `--mono` stays where SYSTEM.md leaves it, on `code`, `.num` and the report's TABLE numerals.
     2. the report's own type scale. `h1`/`h2` at the marketing scale (58/40) put four lines of
        sentence above the first reading on a phone; a 23-section document needs a document scale.
        Scoped to `.p-report` so index.html and pricing.html keep B's display sizes exactly.
     3. the sticky rail becomes B's `.pillnav` chip — same one-row, sideways-scrolling mechanism and
        the same 44px floor, restated as bordered pills so the active chip reads as a state and not
        as a hover. The mobile rule, the active-state declaration and the `no-print` rule above are
        NOT touched (tests/test_r7_surfaces.py reads all three byte for byte).
     4. the verdict band, the callouts, the status shell and the /methodology contents list are put
        on B's card/panel vocabulary, and four measured defects are closed with them: the compare
        page's 439px-wide body at 390 (an unbreakable URL in the ledger diff), the trend sparkline
        still drawn in the retired dark green, `.err`'s link failing axe `link-in-text-block`, and
        seven sub-44px targets in the /methodology contents list.

   Page scopes (base.html's own `bodyclass` block): `.p-report` — report.html, retest_compare.html,
   retest_trend.html · `.p-status` — status.html · `.p-doc` — methodology.html. They scope NOTHING
   but the rules below; no token and no component is page-scoped, which is the invariant §2.5 keeps.
   ================================================================================================== */

/* ---------------------------------------------------------------- 1. the KPI box, on B's tile ---- */
/* One box, two vocabularies, unchanged: `.t-lab`/`.t-num`/`.t-sub` (the promoted pages) and
   `.eyebrow`/`.big`/`.ci` (the product) now paint the same. The eyebrow drops its accent and its
   square tick INSIDE a tile only: a KPI label is not a section eyebrow, and 57 of them stacked in a
   report would put the one accent colour on every third element. Outside a tile the eyebrow is
   untouched, which is what report.html's own page header and /status's stage line use. */
.tile .eyebrow{margin:0;flex-wrap:wrap;font-size:12.5px;font-weight:600;line-height:1.35;
  letter-spacing:-.004em;color:var(--g3)}
.tile .eyebrow::before{content:none}
.tile .big{font-family:var(--sans);font-size:38px;font-weight:700;line-height:1;letter-spacing:-.04em;
  color:var(--g1);margin:6px 0 0}
.tile .ci{display:block;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--g3);
  margin-top:var(--s1);font-variant-numeric:tabular-nums}
.tile .bar{margin-top:var(--s1)}
/* the trend page's three tiles carry a sparkline and only the first carries a `.ci`, so the marks sat at
   three different heights. One flex column, one `margin-top:auto`: the readings align on the baseline
   and the marks align on the floor, which is what makes three tiles read as one row. */
.grid .tile{display:flex;flex-direction:column}
.grid .tile svg{display:block;margin-top:auto;padding-top:var(--s2)}
/* a verbatim answer is third-party prose that can carry an unbreakable URL. Breaking it removes three of
   the six .wrap overflows measured on the demo report at 390; the fourth is a markdown TABLE inside the
   answer, which is what the scroll hint report.html now renders above the body is for. */
.answer-card .answer-body{overflow-wrap:anywhere;font-size:14px;line-height:1.65;color:var(--g2)}
.answer-card .answer-body a{overflow-wrap:anywhere}
.tile p.small{margin:var(--s1) 0 0}
.tile>:last-child{margin-bottom:0}
@media(max-width:760px){.tile .big{font-size:30px}}
/* the trend page's sparklines are drawn server-side by core.retest.sparkline_svg(), whose colour
   argument still defaults to the retired dark green (#0f6e66 — SYSTEM.md §3 leaves that constant to
   the commit that owns core/ and tests/test_lineage.py). An SVG presentation attribute loses to any
   CSS rule, so the mark is re-pointed at the one accent here, in this file, with no core change and
   no test touched. The hollow marker's `fill="#fff"` is re-pointed at the page ground the same way,
   which is also what makes it visible in dark mode. */
.tile svg polyline{stroke:var(--a)}
.tile svg circle{fill:var(--a)}
.tile svg circle[stroke]{fill:var(--w);stroke:var(--a)}

/* ------------------------------------------------- 2. the report's own type and spacing scale ---- */
/* Measured, 390: the marketing h1 (36px floor, 19ch) sets this h1 — a whole sentence, not a phrase —
   in four lines and pushes the first reading to y=964. B's rule is one display size for the page's
   claim; a report's claim is a sentence, so it takes the next step down and the readings come up. */
.p-report h1{font-size:clamp(27px,3.1vw,40px);line-height:1.14;letter-spacing:-.028em;max-width:26ch;
  margin:0 0 var(--s2)}
.p-report h2{font-size:clamp(21px,2.1vw,27px);line-height:1.22;letter-spacing:-.024em;max-width:36ch;
  margin:var(--s5) 0 var(--s2)}
.p-report h3{font-size:16.5px;line-height:1.4;margin:var(--s3) 0 var(--s1)}
.p-report .sub{font-size:14.5px;line-height:1.6;color:var(--g2);max-width:82ch;margin:0 0 var(--s1)}
/* 105 `.small` paragraphs on a report are not captions — they are the sentences that make the numbers
   above them honest. They take the body grey (9.9:1) rather than the caption grey; a `.small` inside a
   table cell is untouched and stays a caption. */
.p-report p.small,.p-status p.small{color:var(--g2);line-height:1.6;max-width:var(--measure)}
.p-report p.small.no-print{max-width:none}
.p-report details>summary{font-size:14.5px;font-weight:500;color:var(--a);min-height:44px;
  display:flex;align-items:center;gap:var(--s1)}
.p-report .tile details>summary{font-size:14px}
@media(max-width:720px){.p-report h2{margin-top:var(--s4)}}

/* ------------------------------------------------------ 3. the sticky rail, as B's pill nav ------ */
/* Same component the pricing page's anchor row is: one row, sideways-scrolling, links that do not
   shrink. Only the paint changes — a bordered pill instead of a bare label — so the active chip reads
   as a state rather than as a hover that got stuck. `min-height:44px`, the mobile rule and
   `.report-rail a.active{color:var(--accent);background:var(--accent-soft)}` are all above and all
   untouched; this adds the border and the weight the active state was missing. */
.report-rail{margin-bottom:var(--s2)}
.report-rail a{border:1px solid var(--g4);background:var(--w);border-radius:var(--r-pill);
  padding:10px 14px;font-size:13.5px;color:var(--g2)}
.report-rail a+a{margin-left:var(--s0)}
.report-rail a:hover{color:var(--a);border-color:var(--a);background:var(--a-soft)}
.report-rail a.active{border-color:var(--a);font-weight:600}
@media(max-width:640px){.report-rail a{padding:10px 12px;font-size:13px}}
/* the export row is nine secondary actions. B's control size is for the ONE primary button; a row of
   nine of them at 52px is a toolbar shouting at the reader who came for a reading. */
.p-report .btn-row{gap:var(--s1);margin-top:var(--s2)}
.p-report .btn-row .btn,.p-report .btn-row button{min-height:44px;padding:10px 16px;font-size:14.5px;
  border-radius:var(--r-ctl)}

/* ------------------------------------------- 4. the verdict band, callouts, panels, contents ----- */
/* The first plain-English judgement on the page, given B's one wash and B's one accent rule. Still
   typography and colour only: it states no coverage level, prints no cut point, and its words come
   from core.stats.interval_band(). */
.verdict-band{font-size:18px;line-height:1.45;font-weight:600;color:var(--g1);background:var(--a-soft);
  border-left:3px solid var(--a);border-radius:0 var(--r-card) var(--r-card) 0;
  padding:var(--s2) var(--s3);margin:0 0 var(--s3)}
/* a call-out headline is a card headline, not a section headline: B's h2 clamp tops out at 40px and
   these sit inside a 32px-padded panel. */
.callout{padding:var(--s4);border-radius:var(--r-card);margin-top:var(--s5)}
.callout h2{font-size:clamp(21px,1.9vw,24px);line-height:1.25;letter-spacing:-.02em;max-width:32ch;
  margin:0 0 var(--s2)}
.callout>:last-child{margin-bottom:0}
.callout .btn{margin-top:var(--s3)}
/* `--callout-muted` is the caption grey, and these paragraphs are the offer itself. Body grey, and a
   measure -- a 1,150px line inside a panel is not a paragraph anybody finishes. */
.callout p{color:var(--g2);max-width:72ch}
.callout p.small{color:var(--g2)}
/* axe `link-in-text-block` (serious): `.err` sets its own ink, so a cobalt link inside it is
   distinguished from the sentence around it by colour alone — 1.4:1. The rule above underlines prose
   links by ELEMENT (`p a`, `li a`, …) and `.err`'s copy is a bare text node inside the div, so no link in
   it was ever matched. `.btn` is excluded: a button is not prose, and base.html's own exception list
   already says so for the `p a.btn` shape. Group 3's block above landed the identical rule for `.note>a`
   and `.callout>a` -- same defect, same shape, found independently on the money surfaces and the Fix
   Pack -- so this covers only the two selectors that rule does not: `.err` and `.devbanner`. */
.err a:not(.btn),.devbanner a:not(.btn){text-decoration:underline}
.err{line-height:1.6}
/* a bare URL is one unbreakable word. Measured: two of them in the compare page's ledger diff took the
   BODY to 439px at a 390px viewport — round-2 H4 forbids any horizontal page scroll. */
.tile .small a,.p-report td a,.p-report .small a,.p-doc p a{overflow-wrap:anywhere}

/* /status — the page a buyer watches after paying. B's card, B's KPI numeral, B's checklist. */
.p-status h1{font-size:clamp(27px,3.1vw,40px);line-height:1.14;letter-spacing:-.028em;margin:0 0 var(--s1)}
.p-status .status-shell{padding:var(--s4);border-radius:var(--r-card);max-width:56rem}
.p-status .stat-lg{font-size:38px;font-weight:700;line-height:1;letter-spacing:-.04em;
  margin:var(--s2) 0 var(--s2)}
.p-status .bar.progress{height:10px}
.p-status .status-steps{gap:var(--s1);margin-top:var(--s3)}
.p-status .status-steps li{align-items:flex-start;font-size:14px;line-height:1.5}
.p-status .status-steps li::before{margin-top:6px}
.p-status .note{margin-top:var(--s3)}
@media(max-width:720px){.p-status .status-shell{padding:var(--s3)}}

/* /methodology — the contents list. Seven links measured 16px tall, under the 44px floor the rest of
   the site keeps, and the rules were painted from `--line-strong`/`--line` inline in the template. */
/* the two per-scan actions on /trend measured 40x17 and 23x17 -- under the 24px WCAG 2.2 floor and not
   inline in a sentence. `.tap-pad` (base.html's own affordance) gives them the height; the cell keeps
   them on one line, and the table is inside a scrolling `.wrap` either way. */
/* the round-7 phone rule clamps the question cell to two lines with `display:-webkit-box` +
   `-webkit-line-clamp:2` + `overflow:hidden`, but a TABLE CELL is stretched to its row's height, so
   `overflow:hidden` clipped at the ROW and a third line bled through under the second on every tall row.
   The clamp needs a box of its own height to clip against; that rule is untouched. */
@media(max-width:640px){.p-report .q-cell{display:block;overflow:visible;line-height:1.45;min-width:21ch}
  .p-report .q-cell>span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}}
/* P24 (UI_PATTERNS.md #37, 2026-09-15): the two-line clamp above left the rest of a long buyer question
   reachable only through `title=`, which a touch device never shows — and the questions ARE the product.
   ADDITIVE and after it, so neither rule above is edited: on a touch pointer the cell shows the whole
   question. A buyer question is ~10 words, so the row grows by a line or two and nothing is hidden. */
@media (max-width:640px) and (pointer:coarse){
  .q-cell,.p-report .q-cell,.p-report .q-cell>span{
    -webkit-line-clamp:unset;overflow:visible;white-space:normal;text-overflow:clip;display:block}
}
/* the question table's Recommended cell is a LINK wrapping a pill -- a standalone action, not a link
   inside a sentence, so WCAG 2.2 2.5.8's inline exception does not cover it. Measured 43x18. */
.p-report a.pilllink{display:inline-flex;align-items:center;min-height:24px;text-decoration:none}
.p-report td.acts{white-space:nowrap}
.p-doc .toc{border-top:1px solid var(--g4);border-bottom:1px solid var(--g4);padding:var(--s1) 0;
  margin:0 0 var(--s5);max-width:none}
.p-doc .toc ol{columns:2;column-gap:var(--s5);margin:0;padding:0}
.p-doc .toc li{margin:0;break-inside:avoid}
.p-doc .toc a{display:flex;align-items:center;min-height:44px;font-size:14.5px;color:var(--g2);
  text-decoration:none}
.p-doc .toc a:hover{color:var(--a);text-decoration:underline}
.p-doc h2{margin-top:var(--s6);max-width:30ch}
.p-doc .note{margin:var(--s4) 0;max-width:none}
@media(max-width:720px){.p-doc .toc ol{columns:1}.p-doc h2{margin-top:var(--s5)}}
/* r5 group 2 — end */

/* =============================================================================================== print
   The site nav is our own chrome, not part of the report; core/pdf.py already prints its own compact brand
   header and methodology footer on every PDF page. `display:none` alone is NOT enough: `header.top{display:flex}`
   is a type+class selector and beats a bare `.no-print` whatever the source order. `.wrap{overflow-x:auto}`
   cannot scroll on paper, so every table wider than the A4 content box was silently CLIPPED in the deliverable
   the customer paid for. */

/* ================================================================================================
   2026-09-17 rebuild -- the executive report and the landing page. Same tokens, same grey scale, the one
   accent; new components only where the old ones had no equivalent. Content width 1160px; 8-pt spacing;
   12-16px radii; tabular numerals for every metric. ================================================ */
.exec .wrap-x{max-width:1160px;margin:0 auto}
.p-report .rpt-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2) var(--s4);align-items:flex-end;margin:0 0 var(--s2)}
.p-report .rpt-actions{display:flex;gap:var(--s1);flex-wrap:wrap}
.p-report .rpt-meta{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);font-size:14px;color:var(--g3);margin:var(--s1) 0 0}
.p-report .rpt-meta b{color:var(--g2);font-weight:500}
.p-report .rpt-meta .cov{color:var(--g1);font-weight:600}
.p-report .rail-wrap{position:sticky;top:0;z-index:5;background:var(--w);border-bottom:1px solid var(--g4);margin:var(--s2) 0 var(--s4)}
.p-report .report-rail{margin:0;padding:6px 0}
.p-report .exec-h2{font-size:24px;letter-spacing:-.02em;margin:var(--s5) 0 var(--s1)}
.p-report .exec-sub{color:var(--g3);font-size:15px;margin:0 0 var(--s3);max-width:60ch}
/* metric cards */
.kpis,#summary .grid.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin:var(--s2) 0}
.kpi{background:var(--w);border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s3)}
.kpi-n,.kpi .big{display:block;font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1.05;color:var(--g1);font-variant-numeric:tabular-nums}
.kpi .bar{margin-top:10px}
.kpi-l{display:block;margin-top:6px;font-size:15px;font-weight:600;color:var(--g1)}
.kpi-s{display:block;margin-top:4px;font-size:14px;color:var(--g3);font-variant-numeric:tabular-nums}
.kpi details{margin-top:8px}.kpi details>summary{font-size:13.5px;color:var(--a);cursor:pointer;min-height:0;padding:0}
.kpi details p{margin:6px 0 0;font-size:13.5px;color:var(--g3)}
.kpi .mini{margin:0}
/* coverage strip */
.coverage{display:flex;flex-wrap:wrap;gap:var(--s1);margin:var(--s2) 0 0}
.coverage .eng{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--g4);border-radius:var(--r-ctl);padding:8px 12px;font-size:14px;background:var(--w);font-variant-numeric:tabular-nums}
.coverage .eng i{width:8px;height:8px;border-radius:50%;background:var(--a);display:inline-block}
.coverage .eng.off{color:var(--g3);background:var(--g5)}.coverage .eng.off i{background:var(--g4)}
/* action cards */
.actions-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);align-items:stretch}
.action-card{background:var(--w);border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s3);display:flex;flex-direction:column;gap:12px}
.action-card .a-type{font-size:13px;font-weight:600;letter-spacing:.02em;color:var(--a);text-transform:uppercase}
.action-card h3{margin:0;font-size:19px;letter-spacing:-.015em;line-height:1.3}
.action-card .a-target{font-size:14px;color:var(--g2);word-break:break-word}
.action-card .a-target a{color:var(--g2)}
.action-card ol{margin:0;padding-left:1.3em;font-size:14.5px;line-height:1.55;color:var(--g2)}
.action-card ol li{margin:0 0 6px}
.action-card .a-facts{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:13.5px;color:var(--g3);border-top:1px solid var(--g4);padding-top:12px;margin-top:auto}
.action-card .a-facts b{display:block;color:var(--g1);font-weight:600;font-variant-numeric:tabular-nums}
.action-card .a-why{font-size:14px;color:var(--g2);margin:0}
.action-card .a-ev{font-size:14px;color:var(--g3);margin:0}
.action-card details>summary{font-size:13.5px;color:var(--a);min-height:0;padding:4px 0}
.action-card details ul{margin:6px 0 0;padding-left:1.2em;font-size:13.5px}
.p-report .action-card p.small,.p-report .action-card .small{font-size:14px}
/* meaningful text in the executive layer never drops under 14px; labels are 13px and uppercase */
.p-report .exec .small,.p-report .exec p.small,.p-report .exec .a-ev,.p-report .exec .dom,.p-report .exec .src-facts,.p-report .exec .counts,.p-report .exec details>summary,.p-report .exec .kpi-s,.p-report .exec code,.p-report #evidence .exec-sub,.p-report #evidence details.evidence>summary .small{font-size:14px}
.p-report .exec .a-type{font-size:13px}
.p-report .exec a,.p-report .exec code{overflow-wrap:anywhere}
/* competitors + themes */
.exec .hbars{max-width:none;margin:var(--s2) 0}
.themes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin:var(--s2) 0 0}
.theme{border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s2) var(--s3);background:var(--w)}
.theme h4{margin:0 0 6px;font-size:16px}
.theme .counts{font-size:14px;color:var(--g3);font-variant-numeric:tabular-nums}
.theme .counts b{color:var(--g1);font-weight:600}
.theme .act{font-size:14px;margin:8px 0 0;color:var(--g2)}
.theme details{margin-top:8px}.theme details>summary{font-size:13.5px;color:var(--a);min-height:0;padding:0}
.theme details ul{margin:6px 0 0;padding-left:1.2em;font-size:13.5px;color:var(--g2)}
.theme details li span{color:var(--g3)}
/* source opportunities */
.srcs{display:grid;gap:var(--s2);margin:var(--s2) 0 0}
.src{border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s2) var(--s3);display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--s1) var(--s3);background:var(--w)}
.src h4{margin:0;font-size:16px;line-height:1.35}
.src h4 a{color:var(--g1)}
.src .dom{font-size:14px;color:var(--g3)}
.src .why{font-size:14px;color:var(--g2);margin:6px 0 0}
.src .src-facts{font-size:14px;color:var(--g3);font-variant-numeric:tabular-nums;margin:0}
.src .src-facts b{color:var(--g1);font-weight:600}
.src .do{font-size:14px;margin:0}
/* evidence */
.p-report details.evidence{border:1px solid var(--g4);border-radius:var(--r-card);padding:0 var(--s3);margin:var(--s2) 0;max-width:none}
.p-report details.evidence>summary{font-size:16px;font-weight:600;color:var(--g1);padding:var(--s2) 0;min-height:0}
.p-report details.evidence>summary .small{font-weight:400;color:var(--g3)}
.p-report details.evidence[open]>summary{border-bottom:1px solid var(--g4);margin-bottom:var(--s2)}
.p-report .exports{display:flex;flex-wrap:wrap;gap:var(--s1)}
/* the two appendices sit among the Evidence folds and wear the same card */
.p-report #evidence details.appendix{border:1px solid var(--g4);border-radius:var(--r-card);padding:0 var(--s3);margin:var(--s2) 0!important}
.p-report #evidence details.appendix>summary{font-size:16px;font-weight:600;color:var(--g1);padding:var(--s2) 0;min-height:0}
.p-report #evidence details.appendix>summary .eyebrow{display:inline;margin-right:6px}
.p-report #evidence details.appendix[open]>summary{border-bottom:1px solid var(--g4);margin-bottom:var(--s2)}
.p-report #evidence hr{display:none}
/* landing */
.hero.split{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s5);align-items:center}
.hero.split>*{min-width:0}
.hero.split h1{font-size:44px;line-height:1.1;letter-spacing:-.03em;margin:var(--s1) 0 var(--s2)}
.hero.split .lede{font-size:18px;color:var(--g2);max-width:44ch;margin:0 0 var(--s3)}
.hero.split .hero-cta{display:flex;flex-wrap:wrap;gap:var(--s1)}
.hero.split .hero-fine{display:block;font-size:14px;color:var(--g3);margin:var(--s2) 0 0;line-height:1.6}
.hero.split .hero-fine span{display:inline;white-space:normal}
.hero.split .hero-fine span+span::before{content:" \00b7 ";color:var(--g4);margin:0 4px}
.hero.split .hero-cta .tlink{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--s1);font-weight:600}
.p-home .small,.p-home .meta,.p-home .trustline,.p-home .frame-cap,.p-home .kpi-l,.p-home .kpi-s,.p-home .plan .best,.p-home .plan p.small,.p-home .sample-note{font-size:14px}
.p-home .preview-tag,.p-home .preview-bar{font-size:14px}
.p-home .eyebrow{font-size:13px}
.hero.split .trust-line{font-size:14px;color:var(--g3);border:0;padding:0;margin:var(--s2) 0 0;max-width:48ch}
.preview-card{background:var(--w);border:1px solid var(--g4);border-radius:var(--r-frame);box-shadow:var(--sh-lift);overflow:hidden}
.preview-bar{display:flex;align-items:center;gap:var(--s2);padding:10px 14px;border-bottom:1px solid var(--g4);background:var(--g5);font-size:12.5px;color:var(--g3)}
.preview-url{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--w);border:1px solid var(--g4);border-radius:var(--r-pill);padding:4px 10px}
.preview-tag{font-weight:600;color:var(--g2);white-space:nowrap}
.preview-body{padding:var(--s3)}
.preview-verdict{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin:0 0 var(--s2);color:var(--g1)}
.preview-row{display:flex;flex-direction:column;gap:2px;padding:12px 0;border-top:1px solid var(--g4);font-size:15px}
.preview-k{font-size:12.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--g3)}
.preview-action{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--g4);border-left:3px solid var(--a);border-radius:var(--r-ctl);margin-top:var(--s2);background:var(--w)}
.preview-action b{font-size:15px;line-height:1.35;color:var(--g1)}
.outcomes .card .mini{margin:0 0 var(--s2);padding:12px 14px;border:1px solid var(--g4);border-radius:var(--r-ctl);background:var(--g5)}
.outcomes .card .mini .kpi-n{font-size:22px}
.outcomes .card .mini .kpi-l{font-size:14px;color:var(--g3);font-weight:500}
.outcomes .card h3{margin:0 0 6px;font-size:18px}
.outcomes .card p{margin:0;font-size:15px;color:var(--g2)}
.sample{border:1px solid var(--g4);border-radius:var(--r-frame);padding:var(--s3);background:var(--w)}
.sample-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);align-items:flex-start}
.sample-verdict{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:6px 0 0;color:var(--g1)}
.sample-coverage{font-size:14px;color:var(--g3);margin:0;max-width:34ch}
.sample-coverage b{color:var(--g1)}
.sample-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s4);margin-top:var(--s2)}
.sample .lead-in{margin:0 0 8px;font-size:14px;color:var(--g3)}
.sample .hbars{margin:0;max-width:none}
.sample-actions{margin:0;padding-left:1.3em}
.sample-actions li{margin:0 0 10px;font-size:15px;line-height:1.4}
.sample-actions li b{display:block;color:var(--g1)}
.sample-actions li .small{color:var(--g3)}
.sample-note{margin:var(--s2) 0 0;color:var(--g3)}
.plan.quiet{opacity:.92}
.trust-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin:0 0 var(--s4)}
.trust-strip div{border-top:2px solid var(--g1);padding-top:12px;font-size:14px;color:var(--g3)}
.trust-strip b{display:block;color:var(--g1);font-size:15px;margin-bottom:4px}
.trust-strip.row{grid-template-columns:repeat(3,minmax(0,1fr))}   /* production acceptance 2026-09-17: one compact three-item row */
.mid{text-align:center}
@media(max-width:960px){.kpis,#summary .grid.g3,.actions-grid,.trust-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.hero.split{grid-template-columns:minmax(0,1fr);gap:var(--s3)}.hero.split>*{min-width:0}.hero.split h1{font-size:34px}.preview-tag{white-space:normal}}
@media(max-width:640px){.kpis,#summary .grid.g3,.actions-grid,.themes,.trust-strip,.sample-grid{grid-template-columns:1fr}.src{grid-template-columns:1fr}.hero.split h1{font-size:30px}.kpi-n{font-size:30px}.p-report .rail-wrap{margin-top:var(--s1)}}
@media(prefers-reduced-motion:no-preference){.preview-card{transition:box-shadow .3s ease}}


/* ================================================================================================
   Round two (2026-09-17): executive analytics report. Fixed 0-100% scales with a readable axis, semantic
   colours (brand blue = the customer, charcoal = competitors, green = won, amber = partial, muted red = lost,
   grey = not measured), compact evidence tables, action briefs, an export dropdown. ======================= */
.p-report .rpt-title{min-width:0}
.p-report .rpt-count{font-size:14px;color:var(--g3);margin:var(--s1) 0 0}
.p-report .rpt-count .cov{color:var(--g1);font-weight:600}
.p-report .big[data-neg]{color:var(--bad)}
#summary .grid.g3[data-kpis="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:960px){ #summary .grid.g3[data-kpis="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){ #summary .grid.g3[data-kpis="4"]{grid-template-columns:1fr}}
.p-report .denoms{font-size:14px;color:var(--g2);margin:var(--s2) 0 0;font-variant-numeric:tabular-nums}
.p-report .interp{font-size:17px;line-height:1.55;color:var(--g1);max-width:62ch;margin:var(--s2) 0 0}
.dd{position:relative;display:inline-block}
.dd>summary{list-style:none;cursor:pointer}
.dd>summary::-webkit-details-marker{display:none}
.dd>summary::after{content:" \25BE";font-size:12px}
.dd-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:20;background:var(--w);border:1px solid var(--g4);border-radius:var(--r-ctl);box-shadow:var(--sh);padding:6px;display:flex;flex-direction:column;min-width:200px}
.dd-menu a{display:block;padding:8px 10px;font-size:14px;text-decoration:none;color:var(--g1);border:0;border-radius:6px;text-align:left}
.dd-menu a:hover{background:var(--g5)}
.dd-menu .btn,.dd-menu .btn.ghost{background:none;border:0;box-shadow:none;min-height:0;padding:8px 10px;font-weight:500;color:var(--g1)}
@media(max-width:560px){.dd[open]{display:block;flex:1 1 100%}.dd[open]>.dd-menu{position:static;min-width:0;margin-top:6px}}  /* 2026-10-06 (audit A-038): on a phone the menu opens in the flow under its button, never off the screen */
/* fixed 0-100 scale */
.hbars.scaled,.engines{position:relative;padding-top:22px}
.axis{position:absolute;left:0;right:0;top:0;height:18px;font-size:12px;color:var(--g3);font-variant-numeric:tabular-nums}
.axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.axis span:first-child{transform:none}
.axis span:last-child{transform:translateX(-100%)}
.hbars.scaled .hbar-row{grid-template-columns:minmax(7rem,11rem) 1fr 9rem}
.hbars.scaled .axis{left:calc(11rem + 12px);right:calc(9rem + 12px)}
.bar i{background:var(--a)}
.bar.comp i{background:var(--g2)}
.bar.mentioned i{background:var(--g3)}
.bar.cited i{background:var(--a-h);opacity:.7}
.hbars.scaled .bar.lg,.engines .bar.lg,.eng-strip .bar.lg{background-image:linear-gradient(to right,transparent calc(25% - 1px),var(--g4) calc(25% - 1px),var(--g4) 25%,transparent 25%),linear-gradient(to right,transparent calc(50% - 1px),var(--g4) calc(50% - 1px),var(--g4) 50%,transparent 50%),linear-gradient(to right,transparent calc(75% - 1px),var(--g4) calc(75% - 1px),var(--g4) 75%,transparent 75%)}
.hbars.scaled .bar.lg i,.engines .bar.lg i,.eng-strip .bar.lg i{position:relative}
.viz{margin:var(--s3) 0 var(--s5)}
.viz h3{font-size:19px;letter-spacing:-.015em;line-height:1.35;margin:0 0 var(--s2);max-width:60ch}
.means{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin:var(--s2) 0 0}
.means div{border-top:2px solid var(--g1);padding-top:10px}
.means b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--g3);margin-bottom:6px}
.means p{margin:0;font-size:15px;color:var(--g2);line-height:1.55}
/* engines by metric */
.engines .eng-row{display:grid;grid-template-columns:minmax(8rem,12rem) 1fr;gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--g4)}
.engines .eng-row.off{color:var(--g3)}
.engines .eng-label{font-size:14.5px;font-weight:600;color:var(--g1);padding-top:2px}
.engines .eng-row.off .eng-label{color:var(--g3);font-weight:500}
.engines .eng-bars{display:grid;gap:6px}
.engines .eng-bar{display:grid;grid-template-columns:8rem 1fr 9rem;gap:12px;align-items:center;font-size:13.5px;color:var(--g2)}
.engines .axis{left:calc(12rem + 12px + 8rem + 12px);right:calc(9rem + 12px)}
.not-measured{color:var(--g3);font-size:14px}
/* heatmap + evidence tables */
.p-report table.heat,.p-report table.evid{width:100%;font-size:14px}
.p-report table.heat th,.p-report table.evid th{font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--g3)}
.p-report table.heat td,.p-report table.evid td{vertical-align:top;padding:10px 10px 10px 0}
.cell{display:inline-block;min-width:2.2rem;text-align:center;padding:3px 8px;border-radius:6px;font-weight:600;font-variant-numeric:tabular-nums}
.cell.won{background:var(--good-bg);color:var(--good)}.cell.partial{background:var(--warn-bg);color:var(--warn)}.cell.lost{background:var(--bad-bg);color:var(--bad)}
.cell.zero{background:var(--g5);color:var(--g3);font-weight:500}
.st{font-size:12px;font-weight:600;padding:1px 6px;border-radius:4px;text-transform:uppercase;letter-spacing:.03em}
.st.won{background:var(--good-bg);color:var(--good)}.st.partial{background:var(--warn-bg);color:var(--warn)}.st.lost{background:var(--bad-bg);color:var(--bad)}
.pri{font-size:12.5px;font-weight:600;padding:2px 8px;border-radius:6px}
.pri.high{background:var(--bad-bg);color:var(--bad)}.pri.medium{background:var(--warn-bg);color:var(--warn)}.pri.low{background:var(--g5);color:var(--g3)}
.p-report table.cites details.row>summary{font-weight:600;color:var(--g1);min-height:0;padding:0;font-size:14px}
.p-report .row-detail{margin-top:8px;padding:10px 12px;background:var(--g5);border-radius:var(--r-ctl);font-size:14px}
.p-report .row-detail p{margin:0 0 8px}
.p-report table.evid details>summary,.p-report table.heat details>summary{min-height:0;padding:0;font-size:13.5px;color:var(--a)}
/* briefs */
.briefs{display:grid;gap:var(--s2)}
.brief{background:var(--w);border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s3)}
.brief .b-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:13px}
.brief .a-type{font-weight:600;letter-spacing:.02em;color:var(--a);text-transform:uppercase}
.brief .a-meta{color:var(--g3)}.brief .a-meta b{color:var(--g1)}
.brief h3{margin:8px 0 6px;font-size:20px;letter-spacing:-.015em;line-height:1.3;max-width:60ch}
.brief .a-target{font-size:14px;color:var(--g2);margin:0 0 var(--s2);overflow-wrap:anywhere}
.brief .b-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin:var(--s2) 0}
.brief .b-grid b,.brief>div>b{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--g3);margin-bottom:6px}
.brief .b-grid p,.brief>div>ol{margin:0;font-size:14.5px;line-height:1.55;color:var(--g2)}
.brief>div>ol{padding-left:1.3em}.brief>div>ol li{margin:0 0 6px}
.brief .b-grid ul{margin:0;padding-left:1.2em}.brief .b-grid li{margin:0 0 4px}
.brief .struct{margin:6px 0 0;padding-left:1.2em;font-size:14px}.brief .struct ul{margin:4px 0 8px;padding-left:1.2em;color:var(--g2)}
.brief .b-brief,.brief .dod{margin:var(--s1) 0 0;color:var(--g2)}
.brief details.more{margin:var(--s1) 0;border-top:0}
.brief details.more>summary{padding:6px 0}
.cta-one h2{font-size:22px;margin:0 0 8px}
.cta-one p{margin:0 0 var(--s2);max-width:60ch}
.evidence-index{border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s2) var(--s3);margin:var(--s2) 0}
.evidence-index p{margin:4px 0}
@media(max-width:760px){.means,.brief .b-grid{grid-template-columns:1fr}.hbars.scaled .hbar-row{grid-template-columns:1fr}.hbars.scaled .axis{display:none}.engines .eng-row,.engines .eng-bar{grid-template-columns:1fr;gap:4px}.engines .axis{display:none}}

.kpis.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi-n.neg{color:var(--bad)}
.sample-block{margin-top:var(--s3)}
.sample .hbars.scaled .hbar-row{grid-template-columns:minmax(6rem,9rem) 1fr 8rem}
.sample .hbars.scaled .axis{left:calc(9rem + 12px);right:calc(8rem + 12px)}
.eng-strip{display:grid;gap:8px}
.eng-line{display:grid;grid-template-columns:minmax(6rem,9rem) 1fr 8rem;gap:12px;align-items:center;font-size:14px}
.eng-line.off{color:var(--g3)}
.eng-line .eng-name{font-weight:600;color:var(--g1)}
.eng-line.off .eng-name{color:var(--g3);font-weight:500}
@media(max-width:960px){.kpis.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.kpis.four{grid-template-columns:1fr}.eng-line,.sample .hbars.scaled .hbar-row{grid-template-columns:1fr;gap:4px}.sample .hbars.scaled .axis{display:none}}
.p-home .sec{padding-block:var(--s6)}
.p-home .sec-head{margin-bottom:var(--s4)}
.p-home .sample .kpis{margin:var(--s2) 0 var(--s1)}
@media(max-width:640px){.preview-url{display:none}.preview-tag{white-space:normal}}

/* ================================================================================================
   The visualization round (2026-09-17). One semantic palette for every chart: cobalt = the customer, charcoal = the
   leading competitor, muted grey = other competitors, green / amber / red = won / partial / lost, light grey = not
   measured. Tabs show one panel at a time (with JS); the print stylesheet lays the panels out in order. ========== */
.c-you{fill:var(--a);stroke:var(--a)}.c-leader{fill:var(--g1);stroke:var(--g1)}.c-other{fill:var(--g3);stroke:var(--g3)}
.c-won{fill:var(--good);stroke:var(--good)}.c-partial{fill:var(--warn);stroke:var(--warn)}.c-lost{fill:var(--bad);stroke:var(--bad)}.c-na{fill:var(--g4);stroke:var(--g4)}
svg.chart{display:block;width:100%;max-width:100%;height:auto;font-family:inherit;overflow:visible}
.fig-chart,.ocard-viz,.dash-chart{min-width:0;max-width:100%;overflow-x:auto}
svg.chart .grid{stroke:var(--g4);stroke-width:1}
svg.chart .tick{font-size:12px;fill:var(--g3)}
svg.chart .axis-name{font-weight:600;fill:var(--g2)}
svg.chart .lbl{font-size:13px;fill:var(--g1)}
svg.chart .lbl-you{font-weight:700}
svg.chart .lbl-na,svg.chart .na{fill:var(--g3);font-size:13px}
svg.chart .lbl-n{font-weight:700}
svg.chart .val{font-size:12.5px;fill:var(--g2);font-variant-numeric:tabular-nums}
svg.chart .val-b{font-weight:700;fill:var(--g1)}
svg.chart .bar{rx:3}
svg.chart .whisker{stroke:var(--g1);stroke-width:1.5;opacity:.85}
svg.chart .whisker.soft{stroke:var(--g3);stroke-width:2;opacity:.5}
svg.chart .annot-line{fill:none;stroke:var(--bad);stroke-width:1.5}
svg.chart .annot{font-size:12.5px;font-weight:700;fill:var(--bad)}
svg.chart .dumb-line{stroke:var(--g3);stroke-width:3;opacity:.6}
svg.chart .dot{stroke-width:0}
svg.chart .dot.hollow{fill:var(--w);stroke:var(--g2);stroke-width:2}
svg.chart .seg-n{font-size:12px;font-weight:700;fill:#fff}
svg.chart .ring{stroke-linecap:butt}
svg.donut .donut-big{font-size:26px;font-weight:700;fill:var(--g1);letter-spacing:-.02em}
svg.donut .donut-small{font-size:12.5px;fill:var(--g3)}
svg.matrix .bubble{fill:var(--a-soft);stroke:var(--a);stroke-width:1.5;opacity:.9}
svg.matrix .bubble.top{fill:var(--a);opacity:.95}
svg.matrix .bubble-n{font-size:13px;font-weight:700;fill:#fff}
/* tabs */
.tabs{margin-top:var(--s2)}
.tablist{display:flex;gap:4px;flex-wrap:wrap;border-bottom:1px solid var(--g4);margin:0 0 var(--s4);position:sticky;top:0;background:var(--bg);z-index:5;padding:6px 0 0}
.tablist a[role=tab]{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;font-size:15px;font-weight:600;color:var(--g2);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px;border-radius:6px 6px 0 0}
.tablist a[role=tab]:hover{color:var(--g1);background:var(--g5)}
.tablist a[role=tab][aria-selected=true]{color:var(--a);border-bottom-color:var(--a)}
.tabs.js .panel[hidden]{display:none}
.panel{padding-bottom:var(--s5)}
.panel>.exec-h2{margin:0 0 var(--s1)}
.takeaway{font-size:17px;line-height:1.5;color:var(--g1);max-width:70ch;margin:0 0 var(--s4)}
/* verdict */
.verdict{margin:0 0 var(--s4)}
.verdict-h{font-size:30px;letter-spacing:-.025em;line-height:1.2;margin:0 0 8px;max-width:30ch}
.verdict-s{font-size:17px;color:var(--g2);margin:0;max-width:70ch}
.verdict .verdict-band{margin:var(--s2) 0 0}
/* figures */
.fig{margin:0 0 var(--s4)}
.fig-title{font-size:17px;line-height:1.4;letter-spacing:-.01em;margin:0 0 6px;max-width:60ch}
.fig-sub{font-size:13.5px;color:var(--g3);margin:0 0 var(--s1);max-width:70ch}
.fig-link{display:inline-flex;align-items:center;min-height:36px;font-size:14px;font-weight:600;color:var(--a);text-decoration:none}
.fig-link:hover{text-decoration:underline}
.fig-chart{max-width:100%}
.fig-row{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:var(--s4);align-items:center;padding:var(--s3);border:1px solid var(--g4);border-radius:var(--r-card);background:var(--w)}
.fig-row .fig-chart svg{max-width:420px}
.fig3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin:0 0 var(--s5)}
.fig3 .fig,.fig-row>*{min-width:0}
.fig3 .fig{border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s3);background:var(--w);margin:0;display:flex;flex-direction:column}
.fig3 .fig .fig-chart{margin:var(--s1) 0;flex:1}
.fig3 .fig .fig-title{font-size:15.5px}
.sec-row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);flex-wrap:wrap;margin:0 0 var(--s2)}
.sec-row .exec-h2{margin:0}
.p-report table.heat.compact td,.p-report table.heat.compact th{padding:6px 8px 6px 0;font-size:13.5px}
.p-report table.heat.compact .cell{min-width:1.8rem;padding:2px 6px;font-size:13px}
/* priority cards */
.cards3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.pcards{display:grid;gap:var(--s2);margin-top:var(--s2)}
.pcard{background:var(--w);border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s3)}
.pcard .p-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.pcard .p-num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--g1);color:#fff;font-weight:700;font-size:14px}
.chip{display:inline-flex;align-items:center;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:var(--g5);color:var(--g2)}
.chip.imp-high{background:var(--bad-bg);color:var(--bad)}.chip.imp-medium{background:var(--warn-bg);color:var(--warn)}.chip.imp-low{background:var(--g5);color:var(--g3)}
.chip.type{text-transform:capitalize}
.pcard h3{font-size:18px;line-height:1.3;letter-spacing:-.015em;margin:0 0 6px;max-width:60ch}
.pcard .p-page{font-size:13.5px;color:var(--g3);margin:0 0 10px;overflow-wrap:anywhere}
.pcard .p-problem{font-size:15px;color:var(--g2);margin:0 0 8px;max-width:75ch}
.pcard .p-changes{margin:0 0 10px;padding-left:1.3em;font-size:14.5px;color:var(--g1)}
.pcard .p-changes li{margin:0 0 4px}
.pcard .p-foot{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;color:var(--g3);margin:0 0 8px}
.pcard .p-foot b{color:var(--g1)}
.pcard .p-dod{font-size:13.5px;color:var(--g2);margin:0;max-width:80ch}
.pcard.compact h3{font-size:16px}
.pcard.compact .p-meta{font-size:13.5px;color:var(--g3);margin:0}
.drawer{margin-top:10px;border-top:1px solid var(--g4)}
.drawer>summary{padding:10px 0;font-size:14px;font-weight:600;color:var(--a);cursor:pointer;min-height:0}
.drawer-body{font-size:14px;color:var(--g2);line-height:1.55}
.drawer-body p{margin:0 0 8px}
.drawer-body ul,.drawer-body ol{margin:0 0 8px;padding-left:1.3em}
.qlist{list-style:none;margin:0;padding:0}
.qlist li{padding:6px 0;border-top:1px solid var(--g5);font-size:14px;color:var(--g1)}
.qlist li a.small{color:var(--g3);margin-left:6px}
.top-list{margin:8px 0 0;padding-left:1.3em;font-size:14.5px}
/* accordions */
.acc-list{display:grid;gap:8px}
.acc{border:1px solid var(--g4);border-radius:var(--r-ctl);background:var(--w);padding:0 var(--s2)}
.acc>summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s2);min-height:48px;padding:8px 0;font-size:15px;font-weight:600;color:var(--g1);cursor:pointer;list-style:none}
.acc>summary::-webkit-details-marker{display:none}
.acc .acc-n{display:inline-flex;gap:6px;align-items:center;font-weight:500;color:var(--g3);white-space:nowrap}
.acc .qlist{padding-bottom:var(--s2)}
.cite-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin:0 0 var(--s4)}
.gap-neg{color:var(--bad);font-weight:600}
.print-only{display:none}
.evidence-full{margin-top:var(--s3)}
@media(max-width:960px){.fig3,.cards3,.cite-metrics{grid-template-columns:minmax(0,1fr)}.fig-row{grid-template-columns:minmax(0,1fr)}.fig-row .fig-chart svg{max-width:100%}}
@media(max-width:640px){.tablist{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch}.tablist a[role=tab]{flex:0 0 auto;font-size:14px;padding:0 10px}.verdict-h{font-size:24px}.acc>summary{flex-direction:column;align-items:flex-start;gap:4px}.acc .acc-n{white-space:normal}}
/* landing: hero mini-dashboard, three outcome cards, tinted demo band, dark close */
.dash{background:var(--w);border:1px solid var(--g4);border-radius:var(--r-frame);box-shadow:var(--sh-lift);padding:var(--s3)}
.dash-head{display:flex;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;font-size:13px;color:var(--g3);margin:0 0 var(--s2)}
.dash-head b{color:var(--g1)}
.dash-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2);margin:0 0 var(--s2)}
.dash-kpi{border:1px solid var(--g4);border-radius:var(--r-ctl);padding:12px 14px}
.dash-kpi .kpi-n{font-size:30px}
.dash-chart{margin:0 0 var(--s2)}
.dash-action{border-left:3px solid var(--a);padding:8px 12px;background:var(--g5);border-radius:0 var(--r-ctl) var(--r-ctl) 0}
.dash-action .k{display:block;font-size:12px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:var(--g3);margin-bottom:2px}
.dash-action b{font-size:14.5px;line-height:1.35;color:var(--g1)}
.hero-fine.plain span::before{content:"\00b7";margin:0 10px;color:var(--g4)}
.hero-fine.plain span:first-child::before{content:none;margin:0}
.outcome-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.ocard{background:var(--w);border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s3);display:flex;flex-direction:column;gap:10px}
.ocard .ocard-q{font-size:12.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--g3);margin:0}
.ocard h3{font-size:19px;line-height:1.3;letter-spacing:-.015em;margin:0}
.ocard .ocard-viz{margin:4px 0}
.ocard .ocard-viz svg{max-width:100%}
.ocard p{margin:0;font-size:14.5px;color:var(--g2)}
.ocard .fig-link{margin-top:auto}
.ocard .kpi-n{font-size:34px}
.sample-cap{margin:var(--s3) auto 0;max-width:70ch;text-align:center;font-size:13.5px;color:var(--g3)}
.close.dark{background:var(--g1);color:#fff;max-width:none;padding:var(--s7) 20px}
.close.dark h2,.close.dark .lede{color:#fff}
.close.dark .lede{color:rgba(255,255,255,.78)}
.close.dark .meta{color:rgba(255,255,255,.65)}
.close.dark .tlink{color:#fff}
.close.dark .btn{background:#fff;color:var(--g1)}
.close.dark .btn:hover{background:var(--g5)}
@media(max-width:960px){.outcome-cards{grid-template-columns:1fr}}
@media(max-width:640px){.dash-grid{grid-template-columns:1fr}}


/* ---- consulting-report primitives (2026-09-17): kicker / section title / exhibit / takeaway / recommendation ---- */
.p-report .page,.p-report main{max-width:1160px}
.p-report .exec-h2,.sec-title{font-size:26px;letter-spacing:-.02em;line-height:1.25;margin:0 0 var(--s1);max-width:34ch}
.kicker{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--a);margin:0 0 8px}
.sec-lede{font-size:16.5px;line-height:1.55;color:var(--g2);max-width:78ch;margin:0 0 var(--s4)}
.blk-h{font-size:15px;font-weight:700;letter-spacing:-.005em;margin:var(--s3) 0 var(--s1);display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.blk-h .fig-link{font-size:13.5px;min-height:0}
.exhibit{margin:0 0 var(--s5);padding:var(--s3) 0 var(--s2);border-top:1px solid var(--g4)}
.exhibit figcaption{margin:0 0 var(--s2)}
.ex-num{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--g3);margin:0 0 6px}
.ex-title{font-size:19px;letter-spacing:-.015em;line-height:1.35;margin:0 0 6px;max-width:64ch}
.ex-scope{font-size:13.5px;color:var(--g3);margin:0;max-width:78ch}
.ex-chart{margin:var(--s2) 0}
.ex-means{font-size:15px;line-height:1.55;color:var(--g1);margin:var(--s1) 0 6px;max-width:78ch}
.ex-source{font-size:12.5px;color:var(--g3);margin:0}
.ex-source a{color:var(--g3)}
.exhibit.compact{border-top:0;padding:0;margin:0}
.exhibit.compact .ex-title{font-size:15.5px}
.ov-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5);align-items:start;margin:0 0 var(--s4)}
.ov-grid2{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s5);align-items:start;padding-top:var(--s3);border-top:1px solid var(--g4)}
.ov-side .ex-chart svg{max-width:390px}
.know-list{margin:0;padding-left:1.4em;font-size:15.5px;line-height:1.5;color:var(--g1)}
.know-list li{margin:0 0 10px}
.top-actions{list-style:none;margin:0;padding:0}
.top-actions li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--g5)}
.top-actions li:first-child{border-top:0}
.top-actions b{display:block;font-size:15px;line-height:1.35;color:var(--g1)}
.top-actions .small{display:block;margin-top:2px;color:var(--g3)}
.two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin:0 0 var(--s3)}
.funnel{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.funnel li{border-top:2px solid var(--g1);padding-top:8px}
.funnel .f-k{display:block;font-size:12.5px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--g3)}
.funnel b{display:block;font-size:26px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.funnel .small{display:block;color:var(--g3)}
.p-report table.heatgrid{width:100%;font-size:14px}
.p-report table.heatgrid th{font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--g3)}
.p-report table.heatgrid th.na{color:var(--g4)}
.p-report table.heatgrid td{padding:8px 10px 8px 0;vertical-align:middle}
.cell .of{font-weight:400;opacity:.7;font-size:.85em}
.cell.na{background:var(--g5);color:var(--g3);font-weight:500;font-size:12.5px}
.legend{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--g2)}
.legend .sw{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-2px}
.legend .sw.won{background:var(--good)}.legend .sw.partial{background:var(--warn)}.legend .sw.lost{background:var(--bad)}.legend .sw.na{background:var(--g4)}
.ranked{margin:0 0 var(--s3);padding-left:1.5em;font-size:15px}
.ranked li{margin:0 0 10px;line-height:1.45}
.ranked li .small{display:block;color:var(--g3)}
.causes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--s3);margin:0 0 var(--s4)}
.cause{border-top:2px solid var(--g1);padding-top:12px}
.cause .c-head{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 8px;color:var(--g3)}
.cause h3{font-size:17px;line-height:1.35;letter-spacing:-.01em;margin:0 0 6px}
/* production acceptance (2026-09-17): gap cards read in one column (evidence count, implication, next step); the crawl observation is in the drawer */
.gap-summary{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 0 6px}.gap-summary div{margin:0}.gap-summary dt{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--g3);margin:0 0 2px}.gap-summary dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--g2)}
/* the 30-day plan briefs: two columns at most, one on narrow screens */
.brief-grid.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2) var(--s3);margin:var(--s2) 0}.brief-grid.two div{margin:0;min-width:0}.brief-grid.two dt{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--g3);margin:0 0 2px}.brief-grid.two dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--g2);overflow-wrap:anywhere}
@media(max-width:760px){.brief-grid.two,.trust-strip.row{grid-template-columns:1fr}}
.cause p{margin:0 0 6px;font-size:14.5px;color:var(--g2)}
.chip.conf-high{background:var(--good-bg);color:var(--good)}.chip.conf-medium{background:var(--warn-bg);color:var(--warn)}.chip.conf-low{background:var(--g5);color:var(--g3)}
.chip.pri-now{background:var(--a);color:#fff}.chip.pri-next{background:var(--a-soft);color:var(--a)}.chip.pri-later{background:var(--g5);color:var(--g3)}
.recs{display:grid;gap:var(--s2)}
.rec{padding:var(--s3) 0;border-top:1px solid var(--g4)}
.rec.now{border-top:2px solid var(--g1)}
.rec .r-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.rec h3{font-size:19px;line-height:1.3;letter-spacing:-.015em;margin:0 0 12px;max-width:60ch}
.r-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px var(--s4);margin:0}
.r-grid div{min-width:0}
.r-grid dt{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g3);margin:0 0 3px}
.r-grid dd{margin:0;font-size:14.5px;line-height:1.5;color:var(--g1);overflow-wrap:anywhere}
.tabselect{display:none}
@media(max-width:640px){.tablist{display:none}.tabselect{display:flex;flex-direction:column;gap:4px;margin:0 0 var(--s3)}.tabselect select{min-height:44px;font-size:15px;padding:8px 10px;border:1px solid var(--g4);border-radius:var(--r-ctl);background:var(--w);color:var(--g1)}}
@media(max-width:960px){.ov-grid,.ov-grid2,.two-col,.r-grid{grid-template-columns:minmax(0,1fr)}.funnel{grid-template-columns:minmax(0,1fr)}.ov-side .ex-chart svg{max-width:100%}}
.print-footer{display:none}

.ov-main .grid.g3[data-kpis="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.ov-main .tile.kpi{padding:14px 16px}
.verdict .verdict-band,.ov-main .verdict-band{font-size:14px;background:none;border-left:2px solid var(--g4);color:var(--g3);padding:2px 0 2px 12px;margin:var(--s2) 0 var(--s3);max-width:70ch}
.exhibit .ex-chart svg.chart{max-width:880px!important}
.exhibit.compact .ex-chart svg.chart{max-width:390px!important}
.panel{padding-bottom:var(--s4)}
@media(max-width:640px){.ov-main .grid.g3[data-kpis="4"]{grid-template-columns:1fr}}
/* queue items 1 + 4 (2026-09-17): the weekly-pulse banner */
.pulse-banner{border:1px solid var(--a);border-left:4px solid var(--a);border-radius:var(--r-card);padding:var(--s2) var(--s3);margin:var(--s3) 0;background:var(--a-soft)}
.pulse-banner .pulse-h{margin:2px 0 6px;font-size:22px;letter-spacing:-.015em}
.pulse-lines{margin:var(--s1) 0 0;padding-left:18px;font-size:14.5px}.pulse-lines li{margin:0 0 4px}
/* queue item 10 (2026-09-17): the decision-document layer -- header meta, findings, briefs, exhibit parts */
.rpt-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:8px 0 0;font-size:13.5px;color:var(--g3)}
.rpt-meta b{color:var(--g1);font-weight:600}
.rpt-meta .status{padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.01em}
.rpt-meta .status.complete{background:var(--good-bg);color:var(--good)}
.rpt-meta .status.partial,.rpt-meta .status.shortfall{background:var(--warn-bg);color:var(--warn)}
.rpt-meta details.rpt-ids{display:inline-block}.rpt-meta details.rpt-ids>summary{font-size:12.5px;color:var(--a);cursor:pointer;min-height:0;padding:0;list-style:none}
.rpt-meta details.rpt-ids[open]>summary{margin-bottom:2px}
.kpi-c{display:block;margin-top:5px;font-size:12.5px;color:var(--g3)}
.grid.g4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s2);margin:var(--s3) 0}
.findings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin:var(--s3) 0}
.finding{border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s2) var(--s3);background:var(--w)}
.finding h3{margin:0 0 8px;font-size:12.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--g3)}
.finding .f-num{margin:0 0 6px;font-size:28px;font-weight:700;letter-spacing:-.02em;line-height:1.05;color:var(--g1)}
.finding .f-num .small{display:block;font-size:12.5px;font-weight:500;color:var(--g3);letter-spacing:0;margin-top:3px}
.finding p{margin:0 0 8px;font-size:14.5px}
.ex-means{margin:var(--s1) 0 0;padding-left:18px;font-size:14.5px}.ex-means li{margin:0 0 4px}
.ex-impl{margin:6px 0 0;font-size:14.5px}
.gap-parts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin:var(--s1) 0}
.gap-parts dt,.brief-grid dt,.r-grid.six dt{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--g3);margin:0}
.gap-parts dd,.brief-grid dd,.r-grid.six dd{margin:4px 0 0;font-size:14px;color:var(--g1)}
.brief-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s1) var(--s3);margin:var(--s1) 0}
.plan-compact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s2)}
.rec.compact h4{margin:6px 0 4px;font-size:15.5px}
.r-grid.six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s1) var(--s2)}
.chip.pri-now{background:var(--a-soft);color:var(--a)}.chip.pri-next{background:var(--g5);color:var(--g2)}.chip.pri-later{background:var(--g5);color:var(--g3)}.chip.own{background:var(--w);border:1px solid var(--g4)}
.ev-summary{border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s2) var(--s3);margin:var(--s2) 0}
.ev-summary p{margin:4px 0;font-size:14px}
.adv-exports{display:inline-block}.adv-exports>summary{list-style:none}.adv-exports[open] .dd-menu{display:inline-flex;gap:6px;flex-wrap:wrap;margin-top:6px}
table.evid tr.you td{background:var(--a-soft)}
.cover{display:none}
.intent-cards{margin-top:var(--s2)}
@media(max-width:960px){.grid.g4,.findings,.gap-parts,.r-grid.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid.g4,.findings,.gap-parts,.brief-grid,.plan-compact,.r-grid.six{grid-template-columns:1fr}.heatgrid-wrap{display:none}.rpt-meta{font-size:13px}}

/* queue item 10 (2026-09-17), Part 3: the landing walkthrough and the eight-item trust strip */
.walk{list-style:none;padding:0;margin:0 0 var(--s3);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.walk .walk-step{border-top:2px solid var(--g1);padding-top:var(--s2)}
.walk .num{display:block;font-size:13px;font-weight:700;color:var(--a);letter-spacing:.08em;margin-bottom:6px}
.walk h3{margin:0 0 8px;font-size:18px}
.walk p{margin:0;font-size:14.5px;line-height:1.6;color:var(--g2);max-width:48ch}
.walk-q{list-style:none;padding:0;margin:var(--s1) 0 0;display:grid;gap:6px}
.walk-q li{font-size:13.5px;color:var(--g2)}
.trust-strip[data-trust="8"]{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:960px){.trust-strip[data-trust="8"]{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.walk{grid-template-columns:1fr}.trust-strip[data-trust="8"]{grid-template-columns:1fr}}

@media print{
  .no-print{display:none!important}
  /* the visualization round (2026-09-17): a 6-8 page print layout of the six panels */
  .print-only{display:block!important}
  .print-hide,.tablist,.tabselect,.drawer,.exports,.fig-link,.acc-list,#by-source,.evidence-index,.callout.cta-one,#evidence-inline,.fold-cards>summary,.blk-h .fig-link,[data-fig="intents-stacked"],[data-chart="intent-stacked"],[data-exhibit] .two-col>.acc-list{display:none!important}
  .exhibit.compact{break-inside:auto}
  .ov-side{margin-top:8pt}
  svg.chart{max-width:560px!important}
  .p-report table.evid td,.p-report table.evid th,.p-report table.heatgrid td,.p-report table.heatgrid th{font-size:8.5pt;padding:3pt 4pt}
  #metric-dictionary td:nth-child(4),#metric-dictionary th:nth-child(4){display:none}
  .r-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rec h3{font-size:12pt}.rec .r-grid dd{font-size:9.5pt}
  .causes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .print-footer{display:block!important;position:fixed;bottom:0;left:0;right:0;font-size:8pt;color:#666;border-top:1px solid #ddd;padding:4pt 0;background:#fff}
  .exhibit{break-inside:avoid;padding:8pt 0}
  .ex-title{font-size:13pt}.ex-means,.ex-scope{font-size:10pt}.ex-source{font-size:8pt}
  .ov-grid,.ov-grid2{display:block}
  .rec{break-inside:avoid;padding:8pt 0}
  .cause{break-inside:avoid}
  .kicker,.sec-title,.blk-h{break-after:avoid}
  .ov-side svg.chart{max-width:260px!important}
  [data-table="queries-to-win"] td:nth-child(6),[data-table="queries-to-win"] th:nth-child(6),[data-table="citations"] td:nth-child(7),[data-table="citations"] th:nth-child(7){display:none}
  .ga4-selfcheck{display:none!important}
  #by-engine,.two-col>div:last-child{display:none!important}
  .ov-grid{display:grid!important;grid-template-columns:minmax(0,3fr) minmax(0,2fr);gap:16pt}
  .ov-grid2{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16pt;padding-top:8pt}
  .ov-main .grid.g3[data-kpis="4"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:8pt}
  .ov-main .tile.kpi{padding:8pt 10pt}.ov-main .big{font-size:20pt}
  .verdict-h{font-size:18pt}.verdict-s{font-size:10.5pt}
  .know-list,.top-actions b{font-size:10pt}.top-actions .small{font-size:8.5pt}
  .two-col{display:block}.funnel{grid-template-columns:repeat(3,minmax(0,1fr))}.funnel b{font-size:16pt}
  .r-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6pt 12pt}.r-grid dd{font-size:9pt}.r-grid dt{font-size:8pt}
  .rec h3{font-size:11.5pt;margin:0 0 6pt}.rec{padding:6pt 0}
  .causes{grid-template-columns:repeat(3,minmax(0,1fr));gap:10pt}.cause h3{font-size:10.5pt}.cause p{font-size:9pt}
  .sec-title{font-size:16pt}.sec-lede{font-size:10pt;margin:0 0 10pt}
  #metric-dictionary td:nth-child(5),#metric-dictionary th:nth-child(5){display:none}
  #metric-dictionary td,#metric-dictionary th{font-size:7.5pt;padding:2pt 3pt}
  [data-table="competitors"] td:nth-child(6),[data-table="competitors"] th:nth-child(6){display:none}   /* queue item 10: on paper the brand table keeps rate, mention, first and questions; only the evidence link column goes */
  .panel .exhibit .ex-chart svg.chart{max-width:480px!important}
  .verdict-band,#how-to-read,.r-grid div:nth-child(5){display:none!important}
  .p-report table.evid{break-inside:auto}.p-report table.evid tr{break-inside:avoid}
  .ov-main .tile.kpi{padding:6pt 8pt}.ov-main .big{font-size:18pt}.kpi-l{font-size:9pt}.kpi-s{font-size:8pt}
  [data-denominators]{font-size:8pt}
  .rec{padding:5pt 0}.rec h3{font-size:11pt;margin:0 0 4pt}.rec .r-head{margin:0 0 5pt}.r-grid dd{font-size:8.5pt}.r-grid{gap:4pt 10pt}
  .exhibit{padding:6pt 0;margin:0 0 8pt}.ex-means{margin:4pt 0 2pt}
  .cite-metrics .tile.kpi{padding:6pt 8pt}.cite-metrics .big{font-size:16pt}
  .fold-cards{display:block}.fold-cards>.pcards{display:block}
  .pcard.print-hide{display:none!important}
  .tabs.js .panel[hidden]{display:block!important}
  .panel{break-before:page;padding-bottom:0}
  .panel#overview{break-before:auto}
  .panel .fig3{display:block}
  .panel .fig3 .fig{break-inside:avoid;margin:0 0 10pt}
  .fig-row{display:block}
  .fig-row .fig-chart svg{max-width:360px}
  svg.chart{width:100%;max-width:640px;height:auto;break-inside:avoid}
  .pcard{break-inside:avoid;padding:10pt 12pt}
  .pcard .p-problem,.pcard .p-dod{font-size:10pt}
  .print-toc .cover-verdict{font-size:22pt;font-weight:700;letter-spacing:-.02em;margin:24pt 0 6pt;max-width:30ch}
  .print-toc .cover-support{font-size:12pt;color:#333;margin:0 0 24pt}
  .acc{break-inside:avoid}
  .acc>summary{min-height:0;padding:4pt 0}
  #by-question table td,#by-question table th{font-size:8pt;padding:3pt 4pt}
  /* O4 (2026-09-16): the one-page summary is page one on its own -- the page a reader forwards; a fold's
     summary line is chrome and does not print (the fold itself does not exist on paper: print_view). */
  .p-report .tile.summary{break-after:page}
  .p-report details.more>summary{display:none}
  /* P32 (UI_PATTERNS.md #26, 2026-09-15): the PDF gets a contents page. Profound is the only PDF in the
     study with a real one, and a 100-page deliverable without it is unnavigable. Screen readers of the web
     page already have the sticky rail, so this exists only on paper. */
  .print-only{display:block!important}
  .print-toc{break-after:page}
  .print-toc ol{font-size:10pt;line-height:1.7}
  body{background:#fff;color:#000}
  main{max-width:none;padding:0}
  .wrap{overflow:visible!important;-webkit-mask-image:none!important;mask-image:none!important}
  .scroll-hint{display:none!important}
  .report-rail{display:none!important}
  .wrap table{min-width:0!important}
  table{font-size:9pt;page-break-inside:auto}
  thead{display:table-header-group}
  tr,.tile,.note,.steps li,.step,.figure,.card,.plan{break-inside:avoid}
  h2,h3{break-after:avoid}
  .callout{background:#fff;color:#000;border:1px solid #999}
  .callout h2,.callout p,.callout a{color:#000}
  .callout .btn,.btn{display:none}
  .frame{box-shadow:none;border:1px solid #999}
  footer{display:none}
  a{color:#000;text-decoration:none}
  .item .rendered pre, pre.diff, .item .rendered table{overflow:visible!important;white-space:pre-wrap!important;word-break:break-word}
}
@media print{
  @page{size:A4;margin:16mm 14mm 18mm}
  .cover{display:block!important;break-after:page;padding-top:40mm}
  .cover .cover-h{font-size:34pt;margin:6pt 0 10pt;letter-spacing:-.02em}
  .cover .cover-meta{font-size:11pt;color:#444;margin:2pt 0}
  .cover .cover-verdict{font-size:17pt;font-weight:600;margin:22pt 0 4pt}
  .cover .cover-support{font-size:12pt;color:#333;margin:0}
  .cover .cover-toc{font-size:11pt;line-height:1.6}
  .rpt-meta details.rpt-ids,.rpt-meta .status{display:inline}
  .rpt-meta details.rpt-ids>summary{display:none}
  .grid.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:6pt}
  .findings{display:grid;grid-template-columns:repeat(3,1fr);gap:6pt}
  .finding,.brief,.rec.compact,.gap,.kpi{break-inside:avoid}
  .plan-compact{display:grid;grid-template-columns:repeat(2,1fr);gap:6pt}
  thead{display:table-header-group}
  table.evid,table.heatgrid{font-size:8.5pt}
  .heatgrid-wrap{display:block!important}.intent-cards{display:none!important}
  .adv-exports,.tabselect,.fig-link{display:none!important}
  .ev-summary{break-inside:avoid}
  .exhibit{break-inside:avoid}
  .exhibit .ex-title{font-size:12.5pt}
  table.opps{font-size:7.5pt}table.opps td,table.opps th{padding:3pt 4pt}table.opps td:last-child,table.opps th:last-child,table.opps .chip{display:none}
  table[data-table="question-set"]{font-size:7.5pt}table[data-table="question-set"] td,table[data-table="question-set"] th{padding:2.5pt 4pt}
  .brief{break-inside:auto}.brief .r-head,.brief h3,.brief .brief-grid{break-inside:avoid}.brief .r-head{break-after:avoid}
  .p-report main,.p-report .page,body{padding-bottom:0!important;margin-bottom:0!important}
  .p-report footer,.site-footer,footer.foot{display:none!important}
  .no-print{display:none!important}
  .print-footer{display:none!important}   /* Chromium's footer template carries brand · domain · date · page on every page (web/routes_retest.py) */
  .evidence-index{display:none!important}
  html,body{margin:0!important;padding:0!important}.tabs,.panel#evidence,details#method,details#method>*:last-child{margin-bottom:0!important;padding-bottom:0!important}
  details#method p,details#method li{font-size:9.5pt;line-height:1.45}
}

/* ======================================================= 2026-10-03 website redesign: three shells (marketing / task / product) */
.contact-form input,.contact-form select,.contact-form textarea{width:100%;max-width:none;box-sizing:border-box}
.contact-form select{min-height:46px}
@media(min-width:1100px){.steps.four[data-steps="5"]{grid-template-columns:repeat(5,minmax(0,1fr))}}
.nav a.outline{border:1.5px solid var(--a);color:var(--a);font-weight:600;margin-left:var(--s1);padding:10px 14px;min-height:44px;border-radius:var(--r-ctl)}
.nav a.outline:hover{background:var(--a);color:var(--on-a)}
header.top.shell-task{border-bottom:1px solid var(--g4)}
.nav.nav-task a.back{color:var(--g2);font-weight:500}
footer.shell-task{margin-top:var(--s5);padding-top:var(--s2)}
footer .foot-compact{align-items:center}
footer .foot-groups{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:var(--s4)}
footer .foot-group b{display:block;color:var(--g2);font-weight:600;margin-bottom:var(--s0)}
footer .foot-group .links{display:flex;flex-direction:column;align-items:flex-start}
footer .foot-group .links a{padding-left:0;padding-right:0;min-height:36px}
@media(max-width:900px){footer .foot-groups{grid-template-columns:1fr 1fr}footer .foot-groups .entity{grid-column:1 / -1}}
@media(max-width:520px){footer .foot-groups{grid-template-columns:1fr}}
/* the task shell: one centred 400–440px form region, left-aligned fields, full-width primary button */
.task-page{max-width:440px;margin:var(--s5) auto 0;padding:0 4px}
.task-page h1{font-size:28px;line-height:1.2;margin:0 0 var(--s1);text-align:center}
.task-page .lede{font-size:16px;color:var(--g2);margin:0 0 var(--s3);text-align:center}
.task-page .formcard{margin-top:0;max-width:none}
.task-page .formcard form input,.task-page .formcard form textarea{max-width:none;width:100%;min-height:46px}
.task-page .formcard .btn.wide,.task-page .formcard button.wide,.task-page .btn.wide{max-width:none;width:100%;min-height:46px}
.task-page .or{display:flex;align-items:center;gap:var(--s2);color:var(--g3);font-size:13px;margin:var(--s2) 0}
.task-page .or::before,.task-page .or::after{content:"";flex:1;border-top:1px solid var(--g4)}
.task-page .alt{display:block;text-align:center}
.task-page .foot-links{margin-top:var(--s3);text-align:center;font-size:14px;color:var(--g3)}
.task-page .note,.task-page .err{text-align:left}
.task-page .hint,.task-page label{text-align:left}
@media(max-width:760px){
  header.top .nav a:not(.cta){display:inline-flex}
  header.top .nav a[href="/#product"]{display:none}
  header.top .nav a{font-size:14px;padding:10px 8px}
  header.top .nav a.outline{padding:8px 12px;font-size:14px}
  header.top{flex-wrap:wrap;gap:var(--s1)}
  .task-page{margin-top:var(--s4)}
}
/* 2026-10-03 website redesign: marketing components shared by /, /samples/ and /pricing. Included INSIDE base.html's one
   style block (the site ships exactly one inline stylesheet; tests/test_ui_promotion_r2.py). Scoped under .sx so nothing
   here reaches the report pages (.kd) or the account forms (.task-page). Tokens come from base.html (--a, --g1..--g5,
   --s0..--s7, --r-card); nothing new is typed in colour. */
.sx{max-width:1160px;margin:0 auto;overflow-wrap:anywhere}.sx h1,.sx h2,.sx h3,.sx p,.sx li,.sx a{overflow-wrap:anywhere}
.sx .sec{padding:var(--s6) 0}
.sx .sec+.sec{border-top:1px solid var(--g5)}
.sx .sec-head h2{font-size:30px;line-height:1.2;margin:0 0 var(--s1)}
.sx .sec-head p{color:var(--g2);font-size:17px;max-width:62ch}
.sx .eyebrow{display:inline-block;font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--a);margin-bottom:var(--s1)}
.sx .eyebrow::before{content:none}
.sx-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s5);align-items:center;padding:var(--s6) 0 var(--s5)}
.sx-hero h1{font-size:46px;line-height:1.08;letter-spacing:-.015em;margin:0 0 var(--s2)}
.sx-hero h1 span{display:block}
.sx-hero .lede{font-size:19px;color:var(--g2);max-width:52ch;margin:0 0 var(--s3)}
.sx-hero .hero-cta{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}
.sx-hero .fine{margin-top:var(--s2);font-size:14px;color:var(--g3)}
.sx-trust{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
.sx-trust li{font-size:13.5px;color:var(--g2);border-top:2px solid var(--g5);padding-top:8px;line-height:1.4}
.sx-trust b{display:block;color:var(--g1);font-weight:600}
.sx-card{border:1px solid var(--g4);border-radius:var(--r-card);background:var(--bg,#fff);padding:var(--s3)}
.sx-card .tag{display:inline-block;font-size:12px;font-weight:600;color:var(--g3);letter-spacing:.02em;text-transform:uppercase}
.sx-card h3{font-size:18px;line-height:1.3;margin:var(--s0) 0 var(--s1)}
.sx-card p{font-size:15px;color:var(--g2);margin:0 0 var(--s1)}
.sx-card .more{font-size:14px;font-weight:600}
.sx-composite{display:grid;gap:var(--s2)}
.sx-composite .top{display:flex;justify-content:space-between;gap:var(--s2);font-size:13px;color:var(--g3)}
.sx-composite .head{font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.3;color:var(--g1);margin:0}
.sx-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);margin:0}
.sx-kpis div{border-left:2px solid var(--g4);padding-left:var(--s1)}
.sx-kpis b{display:block;font-family:Georgia,"Times New Roman",serif;font-weight:400;font-size:28px;line-height:1;color:var(--g1)}
.sx-kpis span{display:block;font-size:13px;color:var(--g2);margin-top:4px}
.sx-kpis small{display:block;font-size:12px;color:var(--g3)}
.sx-bars{display:grid;gap:6px;margin:0}
.sx-bars .row{display:grid;grid-template-columns:minmax(72px,120px) 1fr 44px;gap:var(--s1);align-items:center;font-size:13px;color:var(--g2)}
.sx-bars .row b{font-weight:600;color:var(--a)}
.sx-bars .track{height:10px;background:var(--g5);border-radius:2px;overflow:hidden}
.sx-bars .bar{height:100%;background:var(--g3)}
.sx-bars .bar.you{background:var(--a)}
.sx-bars .v{text-align:right;font-variant-numeric:tabular-nums}
.sx-fixnote{border-top:1px solid var(--g5);padding-top:var(--s1);font-size:14px;color:var(--g2)}
.sx-fixnote b{display:block;color:var(--g1);font-weight:600}
.sx-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.sx-grid2>*,.sx-grid3>*,.sx-grid4>*,.sx-plans>*,.sx-samples>*,.sx-featured>*{min-width:0}
.sx-group .ex pre{max-width:100%}
.sx-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3)}
.sx-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.sx-chain{counter-reset:ch;display:grid;gap:var(--s2);margin-top:var(--s3)}
.sx-chain .sx-step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:var(--s2);border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s2) var(--s3)}
.sx-chain .sx-step::before{counter-increment:ch;content:counter(ch,decimal-leading-zero);font-family:Georgia,"Times New Roman",serif;font-size:22px;color:var(--a);line-height:1.1}
.sx-chain .sx-step h3{font-size:16px;margin:0 0 6px}
.sx-chain .sx-step p{margin:0 0 6px;font-size:15px;color:var(--g2)}
.sx-chain .sx-step .q{font-family:Georgia,"Times New Roman",serif;font-size:19px;color:var(--g1)}
.sx-chain .sx-step ul{margin:0;padding-left:1.1em;font-size:14px;color:var(--g2)}
.sx-chain .sx-step .draft{background:var(--g5);border-radius:6px;padding:var(--s2);font-size:14.5px;color:var(--g1);margin-top:6px}
.sx-chain .sx-step .draft b{display:block;font-size:12px;font-weight:600;color:var(--g3);text-transform:uppercase;letter-spacing:.02em;margin-bottom:4px}
.sx-chain .sx-step .own{color:var(--a);font-weight:600}
.sx-chain .sx-step .no{color:#8a5a00}
.sx-group .tag{color:var(--a)}
.sx-group .ex{border-top:1px solid var(--g5);margin-top:var(--s1);padding-top:var(--s1)}
.sx-group .ex .who{font-size:12px;color:var(--g3);text-transform:uppercase;letter-spacing:.02em}
.sx-group .ex .t{font-size:15px;font-weight:600;color:var(--g1);margin:2px 0}
.sx-group .ex pre{margin:6px 0 0;font-size:12px;line-height:1.4;background:var(--g1);color:#f4f6fb;padding:10px;border-radius:6px;overflow:auto;max-height:120px}
.sx-group .ex .x{font-size:14px;color:var(--g2)}
.sx-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);counter-reset:sx}
.sx-steps div{position:relative;padding-top:var(--s3)}
.sx-steps div::before{counter-increment:sx;content:counter(sx,decimal-leading-zero);position:absolute;top:0;left:0;font-family:Georgia,"Times New Roman",serif;font-size:20px;color:var(--a)}
.sx-steps h3{font-size:17px;margin:0 0 6px}
.sx-steps p{font-size:15px;color:var(--g2);margin:0}
.sx-seq{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s2);margin-top:var(--s3)}
.sx-seq div{border-top:3px solid var(--g4);padding-top:var(--s1)}
.sx-seq div:first-child{border-color:var(--a)}
.sx-seq b{display:block;font-size:14px;margin-bottom:4px}
.sx-seq p{font-size:13.5px;color:var(--g2);margin:0}
.sx-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s3)}
.sx-plan{border:1px solid var(--g4);border-radius:var(--r-card);padding:var(--s3);display:flex;flex-direction:column;gap:var(--s1)}
.sx-plan.pick{border-color:var(--a);box-shadow:0 0 0 1px var(--a) inset}
.sx-plan .tag{font-size:12px;font-weight:600;color:var(--a);text-transform:uppercase;letter-spacing:.02em}
.sx-plan .name{font-size:20px;font-weight:600}
.sx-plan .price{font-family:Georgia,"Times New Roman",serif;font-size:34px;line-height:1}
.sx-plan .price em{font-style:normal;font-family:Inter,system-ui,sans-serif;font-size:14px;color:var(--g3);margin-left:4px}
.sx-plan .for{font-size:14px;color:var(--g2);min-height:2.6em}
.sx-plan .from{display:block;font-size:13px;color:var(--g3);margin-bottom:-4px}
.sx-plan .plan-recurrence{font-size:13px;color:var(--g2);margin:0}
.sx-plan ul{margin:0;padding-left:1.1em;font-size:14.5px;color:var(--g2);flex:1}
.sx-plan ul li{margin:0 0 4px}
.sx-plan .go{margin:var(--s1) 0 0}
.sx-plan .go .btn,.sx-plan .go a.btn.ghost{width:100%;justify-content:center;text-align:center}
.sx-plan .plan-trust{font-size:13px;color:var(--g3);margin:0}
.sx-faq details{border-top:1px solid var(--g5);padding:var(--s1) 0}
.sx-faq details:last-child{border-bottom:1px solid var(--g5)}
.sx-faq summary{font-weight:600;font-size:16px;cursor:pointer;padding:11px 0;min-height:44px;box-sizing:border-box}
.sx-faq p{font-size:15px;color:var(--g2);margin:6px 0 0;max-width:72ch}
.sx-close{text-align:center;padding:var(--s6) 0}
.sx-close h2{font-size:30px;margin:0 auto var(--s1);max-width:none;text-align:center}
.sx-close p{color:var(--g2);font-size:17px;max-width:58ch;margin:0 auto var(--s3)}
.sx-close .hero-cta{justify-content:center}
.sx-samples{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin-top:var(--s3)}
.sx-sample .meta{font-size:13px;color:var(--g3);margin:0 0 var(--s1)}
.sx-sample .links{display:grid;gap:6px;margin-top:var(--s2)}
.sx-sample .links a{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--g4);border-radius:8px;padding:10px 12px;min-height:44px;text-decoration:none;color:var(--g1);font-weight:500}
.sx-sample .links a:hover{border-color:var(--a);color:var(--a)}
.sx-sample .links a span{font-size:12px;color:var(--g3);font-weight:400}
.sx-featured{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.sx-note{font-size:13px;color:var(--g3)}
@media(max-width:960px){.sx-hero{grid-template-columns:1fr}.sx-plans{grid-template-columns:1fr}.sx-hero h1{font-size:38px}.sx-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.sx-seq{grid-template-columns:repeat(2,minmax(0,1fr))}.sx-featured{grid-template-columns:1fr}}
@media(max-width:700px){.sx-trust{grid-template-columns:1fr}.sx-grid3,.sx-grid2,.sx-grid4,.sx-steps,.sx-plans,.sx-samples{grid-template-columns:1fr}.sx-hero h1{font-size:32px}.sx .sec-head h2{font-size:24px}.sx-kpis{grid-template-columns:1fr 1fr 1fr;gap:var(--s1)}.sx-kpis b{font-size:22px}.sx-seq{grid-template-columns:1fr}.sx-chain .sx-step{grid-template-columns:28px minmax(0,1fr);padding:var(--s2)}.sx .sec{padding:var(--s5) 0}.sx-hero .hero-cta .btn{width:100%}}
/* legal documents (legal.html): a readable long-text shell */
.legal-doc{max-width:72ch;margin:0 auto;font-size:16.5px;line-height:1.62}
.legal-doc h1{font-size:34px;line-height:1.15;margin:0 0 6px}
.legal-doc h1+p>em,.legal-doc h1+p em{display:block;font-style:normal;color:var(--g3);font-size:14px;margin-bottom:var(--s3);padding-bottom:var(--s2);border-bottom:1px solid var(--g5)}
.legal-doc h2{font-size:21px;margin:var(--s4) 0 var(--s1);line-height:1.3}
.legal-doc p,.legal-doc li{color:var(--g2)}
.legal-doc p strong:first-child{color:var(--g1)}
.legal-doc ul{padding-left:1.2em}
.legal-doc li{margin:0 0 6px}
.legal-doc a{text-decoration:underline}
.legal-nav{font-size:14px;color:var(--g3);margin:0 0 var(--s3)}
.legal-nav a{margin-right:var(--s2)}

/* ==================================================================================================
   CLARITY LAYER (2026-10-03, docs/clarity_ui_20261003). The component system of the Kovmere Clarity reference
   (Kovmere_Clarity_Design_20261003/assets/styles.css), re-expressed on the ONE palette above: every green of the
   reference is the brand accent (--a / --a-h / --a-soft), its warm washes are --tint / --g5, its lines are --g4,
   its ink and muted text are --g1 / --g3. Nothing here declares a palette token. Scoped under `body.cl`, which
   base.html sets on every page unless a template opts out with `set clarity = false` (a Jinja set at the top of the template) (admin surfaces).
   Structural names that already existed in this file (.wrap .nav .hero .checkout .field .kpis .legend .insight
   .takeaway .action-card .faq .coverage) are prefixed `c-` here so the two layers never fight; everything else keeps
   the reference's class names so its HTML transcribes one to one. Buttons keep this site's convention: `.btn` is the
   one primary action, `.btn.ghost` the quiet secondary, `.btn.quiet` a text-weight tertiary.
   ================================================================================================== */
body.cl{color:var(--g1);font-size:16px;line-height:1.6;background:var(--w)}
body.cl main{max-width:none;margin:0;padding:0}
body.cl main.cw{max-width:1160px;margin:0 auto;padding:0 32px 64px}
body.cl main.cw.narrow{max-width:940px}
body.cl main.cw.reading{max-width:740px}
/* The margin reset belongs to the pages rebuilt on the reference's components (templates that set `clarity_native`). A page
   that keeps its earlier body inside the new shell is `body.lg`: its own heading / paragraph rhythm stays in force. */
.cl:where(:not(.lg)) h1,.cl:where(:not(.lg)) h2,.cl:where(:not(.lg)) h3,.cl:where(:not(.lg)) h4,.cl:where(:not(.lg)) p{margin:0}
.cl .mast p,.cl .cfooter p,.cl dialog h2,.cl dialog p,.cl .sample-nav p{margin:0}
.cl.lg main.cw{padding-top:44px}
.cl h1,.cl h2{letter-spacing:-.035em;line-height:1.1;font-weight:500;color:var(--g1)}
.cl h1{font-size:clamp(36px,4.6vw,62px)}
.cl h2{font-size:clamp(28px,3vw,40px)}
.cl h3{font-size:21px;line-height:1.3;letter-spacing:-.015em;font-weight:600;color:var(--g1)}
.cl h4{font-size:16px;line-height:1.4;font-weight:650;color:var(--g1)}
.cl p+p{margin-top:12px}
.cl ul,.cl ol{padding-left:22px}
.cl li+li{margin-top:6px}
.cl strong{font-weight:650}
.cl small,.cl .small{font-size:13px;line-height:1.55}
.cl .muted{color:var(--g3)}
.cl .serif,.cl main h1{font-family:var(--serif);letter-spacing:-.045em;font-weight:400}
.cl .eyebrow{font-size:12px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;display:block;margin:0 0 15px;color:var(--a);padding:0;line-height:1.4}
.cl .eyebrow::before{content:none}
.cl .cw{max-width:1160px;padding:0 32px;margin:0 auto}
.cl .cw.narrow{max-width:940px}
.cl .cw.reading{max-width:740px}
.cl .space{height:24px}
.cl .rule{border:0;border-top:1px solid var(--g4);margin:28px 0}
.cl .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.cl .row.between{justify-content:space-between}
.cl .row.end{justify-content:flex-end}
.cl .stack{display:grid;gap:20px}
.cl .grid2{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.cl .grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cl .c-section{padding:68px 0;border-bottom:1px solid var(--g4)}
.cl .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}
.cl .section-head p{max-width:500px}
.cl .section-number{font-size:12px;font-weight:700;color:var(--a);display:block;margin-bottom:10px}
.cl .section-sub{margin-top:12px;color:var(--g3);max-width:660px}
/* ---- buttons: .btn primary (accent), .ghost secondary, .quiet tertiary, .dark, .sm, .full ---- */
.cl .btn{border:1px solid var(--a);display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:44px;padding:11px 18px;border-radius:7px;background:var(--a);color:var(--on-a);font-size:14px;font-weight:650;text-align:center;line-height:1.4;text-decoration:none;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .15s,border-color .15s;font-family:inherit}
.cl .btn:hover{text-decoration:none;background:var(--a-h);border-color:var(--a-h);color:var(--on-a)}
.cl .btn.ghost,.cl .btn.secondary{background:var(--w);border-color:var(--g4);color:var(--g1)}
.cl .btn.ghost:hover,.cl .btn.secondary:hover{background:var(--tint);border-color:var(--g3);color:var(--g1)}
.cl .btn.dark{background:var(--g1);border-color:var(--g1);color:var(--w)}
.cl .btn.soft{background:var(--a-soft);border-color:var(--a-soft);color:var(--a)}
.cl .btn.quiet{border-color:transparent;background:transparent;padding-left:0;padding-right:0;color:var(--a)}
.cl .btn.quiet:hover{background:transparent;text-decoration:underline}
.cl .btn.sm{min-height:44px;padding:8px 14px;font-size:12px}
.cl .btn.full{width:100%}
.cl .btn:disabled,.cl .btn[aria-disabled=true]{cursor:not-allowed;opacity:.5}
.cl .arrow{font-size:20px;font-weight:400;line-height:1}
.cl .text-link{font-size:14px;font-weight:650}
.cl .pill{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:5px;background:var(--a-soft);color:var(--a);font-size:12px;font-weight:700;letter-spacing:.015em;white-space:nowrap;border:0;line-height:1.5;text-transform:none}
.cl .pill.neutral{background:var(--g5);color:var(--g3)}
.cl .pill.amber,.cl .pill.warn{background:var(--warn-bg);color:var(--warn)}
.cl .pill.good{background:var(--good-bg);color:var(--good)}
.cl .dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor}
/* ---- masthead and footer ---- */
.cl .mast{border-bottom:1px solid var(--g4);background:var(--w)}
.cl .cnav{min-height:78px;display:flex;align-items:center;gap:40px}
.cl .cnav .wordmark{padding:0;font-size:25px}
.cl .navlinks{display:flex;align-items:center;gap:28px;margin-right:auto;font-size:14px;font-weight:550}
.cl .navlinks a{color:var(--g3);white-space:nowrap;font-size:14px;font-weight:550}
.cl .navlinks a[aria-current=page]{color:var(--a)}
.cl .authlinks{display:flex;gap:20px;align-items:center;font-size:14px}
.cl .authlinks>a{white-space:nowrap}
.cl .back-link{margin-left:auto;font-size:14px;font-weight:550;color:var(--g3);white-space:nowrap}
.cl .cfooter{padding:35px 0 25px;background:var(--tint);border-top:1px solid var(--g4);margin-top:0}
.cl.p-home .cfooter{background:#eaf2ff;border-top-color:#e2e8f2}
.cl .footer-top{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.cl .footer-links{display:flex;flex-wrap:wrap;gap:0 22px;font-size:13px}
.cl .footer-links a,.cl .footer-bottom .row a,.cl .jumpnav a,.cl .navlinks a,.cl .text-link{display:inline-flex;align-items:center;min-height:44px}
.cl .footer-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px;margin-top:26px;padding-top:20px;border-top:1px solid var(--g4);font-size:12px}
.cl .footer-groups b{display:block;color:var(--g1);font-weight:650;margin-bottom:6px;font-size:12px}
.cl .footer-groups .links{display:flex;flex-wrap:wrap;gap:6px 14px}
.cl .footer-groups a{color:var(--g3)}
.cl .footer-bottom{margin-top:22px;padding-top:18px;border-top:1px solid var(--g4);display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap;color:var(--g3);font-size:13.5px;line-height:1.6}
.cl .footer-bottom .entity{max-width:none}
.cl .cfooter.compact .footer-top{padding-bottom:0}
/* ---- homepage ---- */
.cl .c-hero{padding:76px 0 68px;background:linear-gradient(135deg,var(--tint) 0%,var(--w) 75%)}
.cl .c-hero-grid{display:grid;grid-template-columns:1.06fr 1fr;gap:64px;align-items:center}
.cl .c-hero h1{max-width:640px}
.cl .c-hero .lead{font-size:18px;color:var(--g3);max-width:510px;margin:24px 0 28px;line-height:1.65}
.cl .hero-note{margin-top:16px;font-size:12px;color:var(--g3)}
.cl .mini-report{background:var(--w);border:1px solid var(--g4);border-radius:14px;box-shadow:var(--sh);padding:28px 30px;position:relative}
.cl .mini-label{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--g3);text-transform:uppercase}
.cl .mini-report .kpi-big{font-size:68px;letter-spacing:-.055em;line-height:1.1;margin:22px 0 3px;font-weight:500;color:var(--g1)}
.cl .mini-report .big-caption{font-size:14px;font-weight:600}
.cl .mini-chart{display:grid;gap:13px;margin-top:25px}
.cl .bar-row{display:grid;grid-template-columns:80px 1fr 44px;gap:14px;align-items:center;font-size:13px}
.cl .bar-track{height:9px;border-radius:2px;background:var(--g5);overflow:hidden}
.cl .bar-fill{height:100%;background:var(--a);border-radius:2px}
.cl .bar-fill.secondary{background:var(--g3);opacity:.5}
.cl .bar-value{text-align:right;font-variant-numeric:tabular-nums}
.cl .mini-report .chart-caption{font-size:12px;color:var(--g3);margin:18px 0 20px}
.cl .mini-fix{padding-top:18px;border-top:1px solid var(--g4);display:flex;align-items:center;gap:13px}
.cl .mini-fix .square{width:32px;height:32px;background:var(--a-soft);border-radius:5px;display:grid;place-items:center;color:var(--a);flex:0 0 32px}
.cl .mini-fix p{font-size:13px;line-height:1.5}
.cl .logo-line{padding:22px 0;display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap;border-bottom:1px solid var(--g4);font-size:13px;color:var(--g3)}
.cl .logo-line strong{color:var(--g2);font-weight:650}
.cl .document-tile{display:flex;flex-direction:column}
.cl .doc-thumb{height:180px;background:var(--tint);border:1px solid var(--g4);border-radius:10px;padding:22px;overflow:hidden;margin-bottom:23px}
.cl .doc-thumb .tiny{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--g3);font-weight:700}
.cl .doc-thumb .thumb-title{font-family:var(--serif);font-size:19px;margin:9px 0 14px;color:var(--g1)}
.cl .thumb-line{height:6px;background:var(--g4);margin:8px 0;border-radius:2px}
.cl .thumb-line.own{background:var(--a)}
.cl .thumb-question{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--g4);padding:8px 0;font-size:12px;line-height:1.3}
.cl .thumb-number{color:var(--a);font-size:12px}
.cl .thumb-stat{font-size:37px;line-height:1.1;letter-spacing:-.05em;margin:10px 0;color:var(--g1)}
.cl .doc-tile-copy{font-size:15px;color:var(--g3);margin:12px 0 17px;max-width:300px}
.cl .workflow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.cl .workflow .num{font-family:var(--serif);font-size:36px;color:var(--g3);margin-bottom:16px;opacity:.7}
.cl .workflow p{font-size:15px;color:var(--g3);margin-top:9px}
.cl .showcase{background:var(--tint)}
.cl .quote-paper{padding:30px 32px;background:var(--w);border:1px solid var(--g4);border-radius:9px}
.cl .quote-paper h3{font-family:var(--serif);font-size:25px;margin:18px 0;font-weight:400}
.cl .quote-paper p{font-size:15px}
.cl .check-list{list-style:none;padding:0;margin:24px 0}
.cl .check-list li{display:flex;gap:10px;margin:13px 0;font-size:15px}
.cl .check-list li::before{content:'\2713';color:var(--a);font-weight:700}
.cl .pricing-card{border:1px solid var(--g4);border-radius:10px;padding:28px;display:flex;flex-direction:column;position:relative;background:var(--w)}
.cl .pricing-card.featured{border-color:var(--a);background:var(--a-soft)}
.cl .pricing-card .price{font-size:45px;font-weight:520;letter-spacing:-.04em;margin:16px 0 4px;color:var(--g1);line-height:1.1}
.cl .pricing-card .price span,.cl .price span{font-size:14px;color:var(--g3);font-weight:400;letter-spacing:0}
.cl .pricing-card .desc{font-size:14px;color:var(--g3);min-height:45px}
.cl .pricing-card .check-list{flex:1;margin:20px 0}
.cl .pricing-card .check-list li{font-size:14px}
.cl .pricing-card .from{font-size:12px;color:var(--g3);display:block;margin-top:14px}
.cl .pricing-card .from+.price{margin-top:0}
.cl .c-faq{border-top:1px solid var(--g4)}
.cl .c-faq details,.cl details.disc,.cl details.plain{border-bottom:1px solid var(--g4);margin:0;max-width:none;padding:0}
.cl .c-faq summary,.cl details.disc>summary,.cl details.plain>summary,.cl .inline-details>summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:15px;padding:18px 0;font-weight:600;font-size:15px;color:var(--g1);min-height:0;border:0;background:none}
.cl .c-faq summary::-webkit-details-marker,.cl details.disc>summary::-webkit-details-marker,.cl .inline-details>summary::-webkit-details-marker{display:none}
.cl .c-faq summary::after,.cl details.disc>summary::after,.cl details.plain>summary::after,.cl .inline-details>summary::after{content:'+';font-size:23px;font-weight:400;color:var(--g3);flex-shrink:0}
.cl .c-faq details[open]>summary::after,.cl details.disc[open]>summary::after,.cl details.plain[open]>summary::after,.cl .inline-details[open]>summary::after{content:'\2212'}
.cl .detail-body{padding:0 0 23px;color:var(--g3);font-size:14px;line-height:1.7}
.cl .detail-body p+p{margin-top:12px}
.cl .inline-details{border-top:1px solid var(--g4);margin-top:20px}
.cl .inline-details .detail-body{color:var(--g1)}
/* ---- document shell (report / fix / questions) ---- */
.cl .sample-nav{border-bottom:1px solid var(--g4);background:var(--w)}
.cl .sample-nav .cw{min-height:59px;display:flex;align-items:center;gap:25px}
.cl .sample-brand{font-size:14px;font-weight:700;margin-right:auto;display:flex;gap:9px;align-items:center;color:var(--g1)}
.cl .brand-mark{width:22px;height:22px;border-radius:5px;background:var(--a-soft);color:var(--a);font-size:12px;font-weight:750;line-height:1;display:grid;place-items:center;flex:0 0 22px}
.cl .doclinks{display:flex;gap:26px}
.cl .doclinks a{font-size:13px;color:var(--g3);padding:19px 0;border-bottom:2px solid transparent;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.cl .doclinks a[aria-current=page]{color:var(--a);border-color:var(--a);font-weight:650}
.cl .page-intro{padding:47px 0 35px}
.cl .page-intro h1{font-size:clamp(34px,4vw,49px);max-width:890px}
.cl .page-intro p.lead,.cl .page-intro p.lede{font-size:17px;color:var(--g3);max-width:690px;margin-top:16px}
.cl .page-intro p.lede+p{font-size:14px;color:var(--g3);max-width:690px;margin-top:8px}
.cl code{overflow-wrap:anywhere}
.cl .plan-terms{margin-top:22px;border-top:1px solid var(--g4)}
.cl .plan-details .plan-terms{margin-top:0;border-top:0}
.cl .plan-details+.c-faq{border-top:0}
.cl .plan-details .plan-terms-grid{grid-template-columns:1fr}
.cl .plan-terms-grid{gap:28px;align-items:start}
.cl .plan-terms-col h4{margin:0 0 8px}
.cl .plan-terms-col p,.cl .plan-terms-col ul{margin:0 0 8px}
.cl .plan-terms-col .plan-more{margin-top:10px;font-size:13px;color:var(--g3)}
.cl .pricing-card .price span{margin-left:2px}
.cl .notice details.notice-more{border:0;margin:6px 0 0}
.cl .notice details.notice-more>summary{padding:4px 0;min-height:32px;font-size:13px;font-weight:600;color:inherit}
.cl .notice details.notice-more .detail-body{padding:6px 0 2px}
.cl details.plain>summary h2{font:inherit;letter-spacing:0;display:inline;margin:0}
.cl .notice .btn{white-space:normal;height:auto;min-height:44px;max-width:100%;text-align:left}
.cl .pricing-card .desc b{color:var(--g1);font-weight:600}
.cl .meta-row{font-size:12px;color:var(--g3);display:flex;gap:18px;flex-wrap:wrap;margin-top:17px}
.cl .c-coverage{padding:13px 0;border-top:1px solid var(--g4);border-bottom:1px solid var(--g4);display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:12px;color:var(--g3)}
.cl .c-coverage button,.cl .linkbtn{background:none;border:0;color:var(--a);padding:3px 0;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;min-height:44px;display:inline-flex;align-items:center}
.cl .c-kpis{display:grid;grid-template-columns:repeat(3,1fr);margin:34px 0 25px}
.cl .metric{padding:0 30px;border-left:1px solid var(--g4);display:flex;flex-direction:column}
.cl .metric .value{order:-1}
.cl .devbanner{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn);padding:14px 17px;border-radius:6px;font-size:13px;margin:16px auto;max-width:1096px}
.cl .metric:first-child{padding-left:0;border-left:0}
.cl .metric .value{font-size:54px;font-weight:500;line-height:1.15;letter-spacing:-.045em;color:var(--g1);font-variant-numeric:tabular-nums}
.cl .metric .label{font-size:14px;font-weight:650;margin:7px 0 4px;color:var(--g1)}
.cl .metric .foot{font-size:12px;color:var(--g3)}
.cl .c-takeaway{background:var(--a-soft);padding:18px 22px;border-radius:7px;font-size:14px;margin-top:28px;color:var(--g1)}
.cl .c-takeaway strong{color:var(--a)}
.cl .jumpnav{display:flex;gap:24px;padding:18px 0;border-bottom:1px solid var(--g4);font-size:12px;flex-wrap:wrap}
.cl .report-section{padding:46px 0;border-bottom:1px solid var(--g4);scroll-margin-top:24px}
.cl .report-section h2{font-size:30px;max-width:850px;line-height:1.2}
.cl .report-section p.sub{color:var(--g3);font-size:14px;margin:12px 0 26px;max-width:750px}
.cl .chart-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:52px;align-items:center}
.cl .large-bars{display:grid;gap:20px}
.cl .large-bars .bar-row{grid-template-columns:95px 1fr 78px;font-size:14px}
.cl .large-bars .bar-track{height:18px}
.cl .chart-note{font-size:12px;color:var(--g3);margin-top:20px}
.cl .c-insight{border-left:3px solid var(--a);padding-left:22px}
.cl .c-insight h3{font-family:var(--serif);font-size:24px;font-weight:400;margin-bottom:12px}
.cl .c-insight p{font-size:14px;color:var(--g3)}
.cl .table-wrap{overflow-x:auto;overscroll-behavior-x:contain;max-width:none}
.cl .data-table,.cl table.evid{width:100%;border-collapse:collapse;font-size:13px;text-align:left}
.cl table.evid th,.cl .data-table th{font-size:12px;color:var(--g3);font-weight:600;text-transform:uppercase;letter-spacing:.045em;padding:12px;border-bottom:1px solid var(--g3);background:var(--tint);text-align:left}
.cl table.evid td,.cl .data-table td{padding:15px 12px;border-bottom:1px solid var(--g4);vertical-align:top}
.cl table.evid .num,.cl table.evid th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cl .data-table td.numeric,.cl .data-table th.numeric{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.cl .data-table td:first-child{font-weight:550}
.cl .data-table a{overflow-wrap:anywhere}
.cl .split-strip{display:flex;height:14px;overflow:hidden;border-radius:3px;margin:22px 0;gap:0}
.cl .split-strip span:nth-child(1){background:var(--a)}
.cl .split-strip span:nth-child(2){background:var(--a);opacity:.42}
.cl .split-strip span:nth-child(3){background:var(--g4)}
.cl .split-strip span:nth-child(4){background:repeating-linear-gradient(45deg,var(--w),var(--w) 4px,var(--g4) 4px,var(--g4) 8px)}
.cl .c-legend{display:flex;flex-wrap:wrap;gap:24px;font-size:12px;color:var(--g3);margin-bottom:26px}
.cl .c-legend b{color:var(--g1)}
.cl .c-legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;background:var(--g4)}
.cl .c-legend i.always{background:var(--a)}
.cl .c-legend i.sometimes{background:var(--a);opacity:.42}
.cl .result-bar{display:inline-flex;gap:3px;align-items:center;white-space:nowrap}
.cl .result-bar i{height:12px;width:7px;background:var(--g4);border-radius:1px;display:inline-block}
.cl .result-bar i.on{background:var(--a)}
.cl .result-bar small{margin-left:8px;color:var(--g3);font-size:12px}
.cl .engine-chart{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px;align-items:end;min-height:235px;margin-top:22px}
.cl .engine-col{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;align-items:center;text-align:center}
.cl .engine-col strong{font-size:22px;font-weight:550;color:var(--g1)}
.cl .engine-col .column{width:58%;max-width:115px;background:var(--a);border-radius:4px 4px 0 0;min-height:3px}
.cl .engine-col .engine-name{font-size:13px;font-weight:600;overflow-wrap:anywhere}
.cl .engine-col small{overflow-wrap:anywhere}
.cl .reassure{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:13px;color:var(--g3)}
.cl .reassure li{margin:0}
.cl .engine-col small{color:var(--g3);font-size:12px}
.cl .quiet-note{padding:15px 0;color:var(--g3);font-size:12px}
.cl .resource-row{padding:20px 0;border-bottom:1px solid var(--g4);display:flex;gap:18px;align-items:center}
.cl .resource-icon{height:37px;width:37px;flex:0 0 37px;background:var(--tint);border:1px solid var(--g4);display:grid;place-items:center;font-size:12px;color:var(--a);font-weight:750;border-radius:6px}
.cl .resource-row .copy{flex:1;min-width:0}
.cl .resource-row h3{font-size:16px}
.cl .resource-row p{font-size:12px;color:var(--g3);margin-top:5px}
.cl .bottom-cta{padding:34px 0 50px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.cl .bottom-cta h3{font-size:22px}
.cl .bottom-cta p{font-size:14px;color:var(--g3);margin-top:6px}
.cl .c-action{border:1px solid var(--g4);border-radius:10px;padding:26px 28px;display:grid;grid-template-columns:36px 1fr auto;gap:20px;align-items:start;background:var(--w);scroll-margin-top:24px}
.cl .c-action+.c-action{margin-top:18px}
.cl .c-action .action-num{font-family:var(--serif);font-size:26px;color:var(--a);line-height:1.3}
.cl .c-action h3{font-size:22px;max-width:630px}
.cl .c-action p{font-size:14px;color:var(--g3);max-width:650px;margin:9px 0 14px}
.cl .c-action .target{font-size:12px;color:var(--g3);overflow-wrap:anywhere}
.cl .c-action .action-button{padding-top:4px}
.cl .c-action.featured{border-color:var(--a);background:linear-gradient(100deg,var(--a-soft),var(--w))}
.cl .section-label{font-size:12px;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--g3);margin-bottom:20px}
.cl .work-counts{display:flex;gap:24px;flex-wrap:wrap;padding:18px 0 8px;font-size:12px;color:var(--g3);flex:1}
.cl .work-counts strong{color:var(--g1);font-size:15px;margin-right:4px}
.cl .material-group{padding:32px 0;border-bottom:1px solid var(--g4)}
.cl .material-group h2{font-size:27px}
.cl .material-group .section-sub{font-size:14px}
.cl .breadcrumb{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--g3);padding-top:27px;flex-wrap:wrap}
.cl .task-header{padding:28px 0 33px;border-bottom:1px solid var(--g4)}
.cl .task-header h1{font-size:clamp(33px,3.7vw,45px);max-width:750px;margin:12px 0}
.cl .task-header .lead{font-size:16px;color:var(--g3);max-width:750px;margin-bottom:22px}
.cl .task-layout{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:48px;padding:36px 0 60px}
.cl .task-aside{font-size:13px}
.cl .task-aside h4{margin-bottom:8px}
.cl .task-aside p{color:var(--g3);margin-bottom:20px;overflow-wrap:anywhere}
.cl .draft-paper{border:1px solid var(--g4);border-radius:9px;background:var(--w);padding:32px;max-width:none}
.cl .draft-paper h2{font-family:var(--serif);font-size:29px;line-height:1.2;margin-bottom:24px;font-weight:400}
.cl .draft-paper h3{font-size:16px;line-height:1.5;margin:24px 0 10px}
.cl .draft-paper h4{font-size:15px;margin:18px 0 8px}
.cl .draft-paper p{font-size:15px;line-height:1.8;color:var(--g2)}
.cl .draft-paper li{font-size:15px;line-height:1.7;color:var(--g2)}
.cl .draft-paper table{width:100%;border-collapse:collapse;font-size:14px;margin:14px 0}
.cl .draft-paper th,.cl .draft-paper td{padding:9px 10px;border-bottom:1px solid var(--g4);text-align:left;vertical-align:top}
.cl .draft-paper .draft-label{font-size:12px;letter-spacing:.12em;font-weight:700;color:var(--g3);margin-bottom:20px;text-transform:uppercase}
.cl .task-tools{margin:18px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.cl .task-tools .small{margin-left:auto;color:var(--g3)}
.cl .editor{width:100%;min-height:430px;padding:20px;border:1px solid var(--g3);border-radius:7px;font-size:15px;line-height:1.8;resize:vertical;font-family:var(--mono);background:var(--w);color:var(--g1)}
.cl .cfield{display:grid;gap:7px;margin-bottom:18px}
.cl .cfield label{font-size:13px;font-weight:650;color:var(--g1);display:block;margin:0}
.cl .cfield input,.cl .cfield select,.cl .cfield textarea{width:100%;min-height:46px;border:1px solid var(--g3);background:var(--w);border-radius:6px;padding:11px 13px;color:var(--g1);font-size:15px;font-family:inherit;margin:0}
.cl .cfield textarea{min-height:110px;resize:vertical}
.cl .cfield small,.cl .cfield .hint{color:var(--g3);font-size:12px;margin:0}
.cl .cfield .field-error,.cl .field-error{color:var(--bad);font-size:12px}
.cl .cfield input[aria-invalid=true]{border-color:var(--bad)}
.cl .confirm-box{padding:22px;border:1px solid var(--warn-border);background:var(--warn-bg);border-radius:7px;margin:25px 0}
.cl .confirm-box h3{font-size:18px;margin-bottom:9px}
.cl .confirm-box p{font-size:13px;color:var(--g2)}
.cl .confirm-box ol{margin:10px 0 0;font-size:14px}
.cl .check-item{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:15px 0;cursor:pointer}
.cl .check-item input{width:17px;height:17px;flex:0 0 17px;margin-top:4px;accent-color:var(--a)}
.cl .source-quote{border-left:2px solid var(--a);padding:5px 0 5px 15px;margin:18px 0;font-size:14px;color:var(--g1)}
.cl .source-quote cite{display:block;font-style:normal;font-size:12px;margin-top:8px;color:var(--g3)}
.cl .code{white-space:pre-wrap;overflow-wrap:anywhere;background:var(--tint);padding:20px;border-radius:6px;font-size:12px;line-height:1.7;color:var(--g1);border:1px solid var(--g4);font-family:var(--mono);margin:0}
.cl .question-group{margin:35px 0}
.cl .question-group-title{display:flex;gap:13px;align-items:center;margin-bottom:13px}
.cl .question-group-title .step{color:var(--a);background:var(--a-soft);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;flex:0 0 28px}
.cl .question-group h2{font-size:25px}
.cl .question{border-bottom:1px solid var(--g4);margin:0;max-width:none}
.cl .question>summary{font-weight:500;align-items:flex-start;gap:18px;padding:20px 0;font-size:15px;cursor:pointer;list-style:none;display:flex;color:var(--g1);min-height:0;background:none;border:0}
.cl .question>summary::-webkit-details-marker{display:none}
.cl .question>summary::after{content:'+';font-size:23px;font-weight:400;color:var(--g3);flex-shrink:0;line-height:1}
.cl .question[open]>summary::after{content:'\2212'}
.cl .question .q-number{color:var(--g3);font-size:12px;width:22px;flex:0 0 22px;margin-top:4px;font-variant-numeric:tabular-nums}
.cl .kd,.cl .auth-card,.cl .buy-page{overflow-wrap:break-word}
.cl .resource-row .copy,.cl .resource-row h3,.cl .task-aside p,.cl .c-action .target,.cl .meta-row,.cl .source-quote cite,.cl .breadcrumb,.cl .cfield small,.cl .checkbox-label span,.cl .detail-body,.cl .c-coverage span,.cl .footnote{overflow-wrap:anywhere}
.cl .question .q-text{flex:1}
.cl .question .q-result{font-size:12px;color:var(--g3);white-space:nowrap;margin-top:3px}
.cl .question .detail-body{padding-left:40px;max-width:830px;color:var(--g2)}
.cl .question .detail-body dl{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 16px;margin:12px 0 0;font-size:13px}
.cl .question .detail-body dt{color:var(--g3);font-size:12px}
.cl .question .detail-body dd{margin:0;overflow-wrap:anywhere}
.cl .question-controls{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;padding:15px 0 23px;border-bottom:1px solid var(--g4)}
.cl .question-search{border:1px solid var(--g4);border-radius:6px;padding:10px 13px;width:285px;font-size:13px;min-height:44px;font-family:inherit;background:var(--w);color:var(--g1)}
.cl .question .q-meta{display:flex;gap:12px;align-items:center;font-size:12px;flex-wrap:wrap}
.cl .brand-checks{background:var(--tint);border-radius:8px;padding:26px;margin:40px 0}
.cl .brand-checks h2{font-size:25px}
.cl .brand-checks p{font-size:14px;color:var(--g3);margin:12px 0 7px}
.cl .empty{padding:50px 25px;text-align:center;border:1px dashed var(--g3);border-radius:10px}
.cl .empty h3{margin-bottom:12px}
.cl .empty p{max-width:500px;margin:0 auto 20px;color:var(--g3);font-size:14px}
/* ---- auth, checkout, workspace, states ---- */
.cl .auth-shell{background:var(--tint);min-height:calc(100vh - 220px);padding:62px 24px 80px;display:flex;flex-direction:column;align-items:center}
.cl .auth-card{width:100%;max-width:430px;margin:0 auto;background:var(--w);border:1px solid var(--g4);padding:36px 38px;border-radius:12px;box-shadow:var(--sh)}
.cl .auth-card.wide{max-width:530px}
.cl .auth-card h1{font-size:32px;text-align:center;letter-spacing:-.035em}
.cl .auth-card>.intro{color:var(--g3);font-size:14px;text-align:center;margin:12px 0 29px}
.cl .auth-card .bottom-link{text-align:center;font-size:13px;margin-top:22px;color:var(--g3)}
.cl .auth-card .or{display:flex;gap:16px;align-items:center;color:var(--g3);font-size:12px;margin:20px 0}
.cl .auth-card .or::before,.cl .auth-card .or::after{content:'';flex:1;height:1px;background:var(--g4)}
.cl .password-wrap{position:relative}
.cl .password-wrap input{padding-right:64px}
.cl .password-wrap button{position:absolute;right:4px;top:1px;bottom:1px;border:0;background:none;color:var(--g3);font-size:12px;padding:4px 10px;cursor:pointer;font-family:inherit;min-height:44px}
.cl .small-center{text-align:center;font-size:12px;color:var(--g3);max-width:450px;margin:20px auto 0}
.cl .c-checkout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:70px;padding:38px 0 70px;align-items:start}
.cl .checkout-main{min-width:0;grid-area:auto}
.cl .c-checkout form{max-width:590px}
.cl .checkout-summary{background:var(--tint);border:1px solid var(--g4);padding:26px;border-radius:10px}
.cl .checkout-summary .price{font-size:40px;margin:13px 0;font-weight:520;letter-spacing:-.04em;color:var(--g1)}
.cl .checkout-summary .check-list li{font-size:13px}
.cl .form-title{font-size:20px;margin-bottom:22px}
.cl .checkbox-label{font-size:12px;display:flex;gap:10px;align-items:flex-start;color:var(--g3);margin:20px 0;cursor:pointer}
.cl .checkbox-label input{margin-top:4px;accent-color:var(--a);flex:0 0 auto}
.cl .stepper{display:flex;gap:20px;margin:20px 0;font-size:12px;color:var(--g3)}
.cl .stepper .current{color:var(--a);font-weight:700}
.cl .state-icon{width:48px;height:48px;border-radius:50%;background:var(--a-soft);color:var(--a);display:grid;place-items:center;margin:0 auto 22px;font-size:23px}
.cl .notice{background:var(--tint);border:1px solid var(--g4);padding:14px 17px;border-radius:6px;font-size:13px;color:var(--g2);margin:20px 0;max-width:none}
.cl .notice.amber{background:var(--warn-bg);border-color:var(--warn-border);color:var(--warn)}
.cl .notice.bad{background:var(--bad-bg);border-color:var(--bad-border);color:var(--bad)}
.cl .progress-line{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;list-style:none;padding:0;margin:25px 0}
.cl .progress-line li{font-size:12px;color:var(--g3);border-top:3px solid var(--g4);padding-top:11px;margin:0}
.cl .progress-line li.done{border-color:var(--a);color:var(--a)}
.cl .workspace-banner{padding:30px;border:1px solid var(--g4);border-radius:10px;display:flex;align-items:center;justify-content:space-between;gap:25px;background:var(--w)}
.cl .workspace-banner p{font-size:14px;color:var(--g3);margin-top:9px}
.cl .timeline{margin:30px 0;padding-left:20px;border-left:1px solid var(--g4)}
.cl .timeline>div{padding:0 0 25px;position:relative}
.cl .timeline>div::before{content:'';position:absolute;width:7px;height:7px;background:var(--a);border-radius:50%;left:-24px;top:8px}
.cl .timeline p{font-size:13px;color:var(--g3)}
.cl .status-board{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cl .status-card{padding:25px;border:1px solid var(--g4);border-radius:9px}
.cl .status-card h3{margin-bottom:9px}
.cl .status-card p{font-size:14px;color:var(--g3);margin-bottom:20px}
.cl .footnote,.cl .trustline{font-size:12px;color:var(--g3);margin-top:20px;max-width:none;text-align:left}
.cl .policy-body{font-size:15px;line-height:1.8}
.cl .policy-body h2{font-size:24px;margin:30px 0 12px}
.cl .policy-body h3{font-size:18px;margin:22px 0 8px}
.cl .source-card{padding:24px 0;border-bottom:1px solid var(--g4)}
.cl .source-card h3{font-size:18px}
.cl .source-card .source-url{font-size:12px;overflow-wrap:anywhere;margin:7px 0}
.cl .source-card p{font-size:14px;color:var(--g3)}
.cl .profile-grid{display:grid;grid-template-columns:155px 1fr;gap:14px 22px;font-size:14px;margin:25px 0}
.cl .profile-grid dt{color:var(--g3)}
.cl .profile-grid dd{margin:0;overflow-wrap:anywhere}
.cl .question-badge{display:inline-block;font-size:12px;color:var(--g3);background:var(--tint);padding:3px 7px;border-radius:4px}
.cl .inline-chart-title{display:flex;justify-content:space-between;font-size:12px;color:var(--g3);border-bottom:1px solid var(--g4);padding-bottom:12px;margin-bottom:20px}
.cl .md p{max-width:none}
.cl #toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--g1);color:var(--w);box-shadow:var(--sh-lift);padding:13px 22px;border-radius:8px;font-size:13px;z-index:99;opacity:0;pointer-events:none;transition:opacity .15s;max-width:calc(100vw - 32px);text-align:center}
.cl #toast.visible{opacity:1}
.cl dialog{border:1px solid var(--g4);border-radius:12px;padding:30px;max-width:580px;width:calc(100% - 32px);color:var(--g1);box-shadow:var(--sh-lift);background:var(--w)}
.cl dialog::backdrop{background:rgba(15,19,32,.4)}
.cl dialog h2{font-size:27px;margin-bottom:18px}
.cl dialog p{font-size:14px;color:var(--g2)}
.cl dialog .close-dialog{float:right;background:none;border:0;font-size:22px;color:var(--g3);line-height:1;padding:0 0 10px 15px;cursor:pointer}
.cl .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cl [hidden]{display:none!important}
.cl .compact-bottom{margin-bottom:32px}
.cl .hide-small{}

.cl .checkbox-label>span{flex:1 1 auto;min-width:0;position:static;display:inline;width:auto;max-width:100%;white-space:normal}
.cl .checkbox-label>input{flex:0 0 auto;width:17px;height:17px;margin:4px 0 0}
.cl .paybtn{border:1px solid var(--a);display:inline-flex;justify-content:center;align-items:center;gap:9px;min-height:48px;width:100%;padding:11px 18px;border-radius:7px;background:var(--a);color:var(--on-a);font-size:15px;font-weight:650;line-height:1.4;cursor:pointer;font-family:inherit;margin-top:8px}
.cl .paybtn:hover{background:var(--a-h)}
.cl .paybtn:disabled{opacity:.5;cursor:not-allowed}
.cl .buy-page .page-intro h1{font-family:var(--serif);letter-spacing:-.045em;font-weight:400}
.cl .buy-page .page-intro .check-list{margin:14px 0 0;max-width:590px}
.cl .plan-more{margin-top:14px;border-top:1px solid var(--g4);border-bottom:0}
.cl .plan-more>summary{font-size:13px;padding:12px 0;color:var(--g3);font-weight:600}
.cl .plan-more .detail-body{font-size:12px;color:var(--g2)}
.cl .plan-more .scope{margin-top:10px}
.cl .plan-more .scope-row{margin:6px 0}
.cl .plan-more ul{padding-left:18px;margin:0 0 8px}
.cl .plan-trust{margin-top:12px;color:var(--g3)}
.cl .plan-recurrence{margin:6px 0 0;font-size:12px}
.cl .hero-trust{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px;color:var(--g3)}
.cl .hero-trust li{margin:0;display:flex;align-items:center;gap:6px}
.cl .hero-trust li::before{content:'';width:8px;height:1px;background:var(--a);flex:0 0 8px}
.cl .pill.decided{background:var(--g5);color:var(--g2)}
/* ---- parity with the reference's computed typography and spacing (second pass 2026-10-04): the rules below undo what the
   earlier site-wide element rules (h1-h3 balance and measure, .nav a padding, .btn margin and tracking) and this layer's own
   first-pass overrides changed, so an element with the reference's class renders with the reference's metrics ---- */
.cl .eyebrow{line-height:1.6}
.cl .pill{line-height:1.6}
.cl:where(:not(.lg)) h1,.cl:where(:not(.lg)) h2,.cl:where(:not(.lg)) h3{text-wrap:wrap;max-width:none}
.cl:where(:not(.lg)) h3,.cl:where(:not(.lg)) h4{font-weight:700}
.cl:where(:not(.lg)) main p,.cl:where(:not(.lg)) main ul,.cl:where(:not(.lg)) main ol,.cl:where(:not(.lg)) main details{max-width:none}
.cl .navlinks a{padding:0;border-radius:0;background:none;letter-spacing:0}
.cl .navlinks a:hover{background:none}
.cl .mast .btn,.cl .cfooter .btn,.cl:where(:not(.lg)) .btn{margin-top:0;letter-spacing:normal}
.cl .btn.sm{min-height:36px;padding:8px 12px}
@media(max-width:400px){.cl .btn{white-space:normal;text-align:center;max-width:100%;flex-shrink:1}.cl .btn-row>.btn{min-width:0}}
.cl .pricing-card .price{line-height:1.6}
.cl .quote-paper h3{font-weight:700}
.cl .data-table.plans-table th:nth-child(1){width:31%}
.cl .data-table.plans-table th:nth-child(2){width:17%}
.cl .data-table.plans-table th:nth-child(3){width:25%}
.cl .narrow-list{max-width:940px;margin:0 auto}
.cl:where(:not(.lg)) button{margin-top:0;letter-spacing:normal}
.cl .c-coverage button{min-height:32px;line-height:1.4}
.cl .large-bars .bar-row{grid-template-columns:95px 1fr 92px}
.cl .bar-value{white-space:nowrap}
.cl .bar-row>strong{overflow-wrap:anywhere}
.cl.p-report .cw p.small,.cl.p-fix .cw p.small{max-width:none}
.cl.p-report .cw p.small.muted{color:var(--g3)}
.cl:where(:not(.lg)) td a,.cl:where(:not(.lg)) th a,.cl:where(:not(.lg)) .resource-row a,.cl:where(:not(.lg)) .c-action a{text-decoration:none}
.cl:where(:not(.lg)) td a:hover{text-decoration:underline;text-underline-offset:4px}
.cl .coverage-print{font-size:13px;color:var(--g3);margin-top:12px}
.cl .c-action.featured .pill.neutral{background:rgba(15,23,42,.07)}
.cl .task-aside a,.cl .task-header a:not(.btn),.cl .source-quote cite a,.cl .breadcrumb a{text-decoration:none}
.cl .task-aside a:hover,.cl .task-header a:not(.btn):hover,.cl .source-quote cite a:hover{text-decoration:underline;text-underline-offset:4px}
.cl .task-header .row>a:not(.btn){font-size:14px;font-weight:600;color:var(--a);align-self:center}
.cl .checkout-summary .order-details{border-bottom:0}
.cl .ev-compact{max-width:850px;margin:0 auto}
.cl .ev-compact .page-intro h1{margin:0 0 14px}
.cl .ev-compact .page-intro .lead{margin:0}
.cl .ev-compact .report-section h2{margin:0 0 8px}
.cl .ev-compact .resource-row h3{margin:0}
.cl .ev-compact .resource-row p{margin:5px 0 0}
.cl .ev-page{padding-top:0}
.cl .ev-page .ev-layer{max-width:850px;margin:28px auto 0}
.cl .ev-page .ev-layer[open]{max-width:none}
.cl .ev-page .ev-layer>.detail-body{padding-top:12px}
.cl .ev-compact td a{text-decoration:none}
.cl .ev-compact .data-table td:first-child{font-weight:550}
.cl .ev-compact td a:hover{text-decoration:underline;text-underline-offset:4px}
.cl .ev-compact .page-intro{padding-top:56px}
.cl .checkout-summary .order-details>summary{font-size:13px;padding:10px 0;min-height:44px}
.cl .checkout-summary .order-details .detail-body{padding:0 0 10px;font-size:13px}
.cl .checkout-summary .order-details .reassure{margin-top:14px}
.cl .checkout-summary:has(details.order-details[open]) .check-list{display:grid}
.cl.p-home main>:not(.page),.cl.p-pricing main>:not(.page){max-width:none;padding-inline:0}
@media(max-width:900px){.cl .c-hero-grid{gap:32px}.cl .c-hero h1{font-size:47px}.cl .cw,body.cl main.cw{padding-left:24px;padding-right:24px}.cl .cnav{gap:25px}.cl .navlinks{gap:20px}.cl .authlinks{gap:15px}.cl .chart-layout{grid-template-columns:1fr;gap:30px}.cl .task-layout{grid-template-columns:minmax(0,1fr) 230px;gap:28px}.cl .c-checkout{gap:32px;grid-template-columns:minmax(0,1fr) 300px}.cl .c-action{grid-template-columns:30px 1fr;gap:15px}.cl .c-action .action-button{grid-column:2}.cl .pricing-card{padding:23px}.cl .grid3{gap:16px}.cl .footer-groups{grid-template-columns:1fr 1fr}}
@media(max-width:680px){body.cl{font-size:15px}.cl .cw,body.cl main.cw{padding-left:20px;padding-right:20px}.cl .cnav{min-height:67px;justify-content:space-between}.cl .authlinks>a:not(.hdr-cta):not(.hdr-login){display:none}.cl .authlinks{display:flex;margin-left:auto}.cl .c-hero{padding:44px 0 40px}.cl .c-hero-grid,.cl .grid2,.cl .grid3,.cl .workflow,.cl .c-checkout,.cl .task-layout,.cl .status-board{grid-template-columns:1fr}.cl .c-hero-grid{gap:36px}.cl .c-hero h1{font-size:45px}.cl .c-hero .lead{font-size:16px;margin:20px 0 23px}.cl .c-hero .row .btn{flex:1}.cl .mini-report{padding:23px}.cl .mini-report .kpi-big{font-size:57px}.cl .logo-line{gap:12px 19px;font-size:12px;padding:19px 25px}.cl .logo-line>span{width:100%;text-align:center}.cl .c-section{padding:44px 0}.cl .section-head{align-items:flex-start;flex-direction:column;gap:15px;margin-bottom:24px}.cl .doc-thumb{height:165px;margin-bottom:19px}.cl .document-tile{margin-bottom:16px}.cl .doc-tile-copy{max-width:none}.cl .workflow{gap:28px}.cl .workflow .num{font-size:29px;margin-bottom:8px}.cl .quote-paper{padding:23px}.cl .pricing-card .desc{min-height:0}.cl .pricing-card{padding:25px}.cl .pricing-card+.pricing-card{margin-top:7px}.cl .cfooter{padding:28px 0 22px}.cl .footer-links{gap:13px 20px}.cl .footer-groups{grid-template-columns:1fr}.cl .sample-nav .cw{gap:15px;min-height:55px;flex-wrap:wrap}.cl .sample-brand{font-size:12px}.cl .sample-brand .pill{display:none}.cl .doclinks{gap:17px}.cl .doclinks a{font-size:12px;padding:18px 0}.cl .page-intro{padding:32px 0 25px}.cl .page-intro h1{font-size:35px}.cl .page-intro p.lead{font-size:15px}.cl .meta-row{gap:8px 16px;font-size:12px}.cl .c-coverage{font-size:12px;gap:7px}.cl .c-coverage button{min-height:44px}.cl .large-bars .bar-row{grid-template-columns:64px 1fr 78px}.cl .c-coverage button{font-size:12px}.cl .c-kpis{margin:27px 0 17px}.cl .metric{padding:0 13px}.cl .metric .value{font-size:36px}.cl .metric .label{font-size:12px;line-height:1.4;min-height:31px}.cl .metric .foot{font-size:12px;line-height:1.4}.cl .c-takeaway{font-size:13px;padding:16px;margin-top:22px}.cl .jumpnav{gap:13px 21px;padding:15px 0;font-size:12px}.cl .report-section{padding:34px 0}.cl .report-section h2{font-size:26px}.cl .chart-layout{gap:25px}.cl .large-bars{gap:17px}.cl .large-bars .bar-row{grid-template-columns:64px 1fr 66px;gap:12px;font-size:12px}.cl .large-bars .bar-track{height:15px}.cl .c-insight h3{font-size:22px}.cl .data-table{font-size:12px}.cl .data-table th,.cl .data-table td{padding:12px 8px}.cl .data-table th{font-size:12px}.cl .engine-chart{gap:13px;min-height:200px;grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:end}.cl .engine-col .column{width:73%}.cl .engine-col .engine-name{font-size:12px}.cl .engine-col strong{font-size:20px}.cl .engine-col small{font-size:12px}.cl .c-legend{gap:12px;font-size:12px}.cl .result-bar{gap:2px}.cl .result-bar i{width:4px;height:10px}.cl .result-bar small{margin-left:4px;font-size:12px}.cl .c-action{padding:22px 19px;grid-template-columns:23px 1fr;gap:13px}.cl .c-action h3{font-size:20px}.cl .c-action p{font-size:13px}.cl .c-action .action-num{font-size:22px}.cl .work-counts{gap:10px 20px;font-size:12px}.cl .material-group{padding:26px 0}.cl .material-group h2{font-size:25px}.cl .resource-row{gap:12px;align-items:flex-start;flex-wrap:wrap}.cl .resource-row .copy{flex-basis:calc(100% - 52px)}.cl .resource-row>.btn,.cl .resource-row>.text-link{margin-left:49px}.cl .resource-row h3{font-size:15px}.cl .bottom-cta{align-items:flex-start;flex-direction:column;padding:28px 0 38px}.cl .task-header{padding:22px 0}.cl .task-header h1{font-size:33px}.cl .task-header .lead{font-size:15px}.cl .task-layout{padding:25px 0 38px}.cl .task-aside{order:-1;display:grid;grid-template-columns:1fr 1fr;gap:5px 24px;padding-bottom:18px;border-bottom:1px solid var(--g4)}.cl .task-aside p{margin-bottom:10px;font-size:12px}.cl .task-aside .aside-wide{grid-column:1/-1}.cl .draft-paper{padding:23px}.cl .draft-paper h2{font-size:26px}.cl .draft-paper p{font-size:14px}.cl .task-tools .small{width:100%;margin-left:0}.cl .task-tools .btn{font-size:12px;padding:10px 12px}.cl .question-search{width:100%}.cl .question-controls{gap:12px}.cl .question>summary{font-size:14px;gap:10px;padding:18px 0}.cl .question .detail-body{padding-left:32px;font-size:13px}.cl .question .detail-body dl{grid-template-columns:1fr;gap:4px}.cl .question-group h2{font-size:23px}.cl .brand-checks{padding:21px}.cl .auth-shell{padding:40px 20px 55px}.cl .auth-card{padding:29px 24px}.cl .c-checkout{gap:32px;padding-top:23px}.cl .checkout-summary{order:-1}.cl .checkout-summary .check-list{display:none}.cl .checkout-summary .price{font-size:34px;margin-bottom:0}.cl .profile-grid{grid-template-columns:100px 1fr;gap:13px;font-size:13px}.cl .workspace-banner{align-items:flex-start;flex-direction:column;padding:23px}.cl .progress-line{gap:12px}.cl .hide-small{display:none}}
@media(prefers-reduced-motion:reduce){.cl *{transition:none!important}}
@media(max-width:560px){.cl .data-table.fit-phone{table-layout:fixed;width:100%;min-width:0}.cl .data-table.fit-phone th,.cl .data-table.fit-phone td{padding:10px 5px;font-size:12px;overflow-wrap:anywhere;word-break:normal;hyphens:auto}}
@media print{.no-print{display:none!important}body.cl{font-size:10pt;color:#111;background:white}.cl .mast,.cl .sample-nav,.cl .cfooter,.cl .btn,.cl .task-tools,.cl .jumpnav,.cl #toast,.cl .skip,.cl .question-controls,.cl .no-print,.cl .c-coverage button,.cl .linkbtn{display:none!important}.cl .cw,body.cl main.cw{max-width:none;padding:0}.cl .c-section,.cl .report-section{padding:20px 0}.cl .page-intro{padding:10px 0 20px}.cl h1{font-size:28pt!important}.cl h2{font-size:20pt!important}.cl h3{font-size:13pt!important}.cl .grid3{grid-template-columns:repeat(3,1fr)}.cl .task-layout{display:block}.cl .task-aside{display:block;padding:16px 0}.cl .draft-paper{border:0;padding:0}.cl .c-action{break-inside:avoid}.cl tr,.cl .resource-row,.cl .question{break-inside:avoid}.cl a{color:inherit}.cl .c-coverage{font-size:9pt}.cl .code{font-size:8pt}.cl .c-kpis .value{font-size:30pt}.cl .c-hero{padding:20px 0}.cl .mini-report{box-shadow:none}.cl details>.detail-body{display:block!important}.cl details{break-inside:auto}.cl summary::after{display:none}.cl .question .detail-body{font-size:9pt}.cl .section-head{margin-bottom:15px}.cl .print-hidden{display:none!important}.cl .engine-chart{min-height:160px}}
/* SANS HEADINGS (2026-10-04, docs/complete_delivery_ui_20261004): the complete-delivery reference keeps Kovmere's blue and a
   compact sans-serif voice -- no editorial serif. Every heading the Clarity layer set in --serif is now Inter at 700. */
.cl{--serif:var(--sans)}
.cl h1,.cl h2{font-weight:700;line-height:1.13}
.cl .serif,.cl main h1{font-family:var(--sans);font-weight:700;letter-spacing:-.04em}
.cl .c-insight h3{font-family:var(--sans);font-weight:650}
.cl .quote-paper h3,.cl .draft-paper h2,.cl .c-action .action-num,.cl .doc-thumb .thumb-title{font-family:var(--sans)}
.cl .workflow .num{font-family:var(--sans);color:#8590a5}
.cl .mini-label{font-size:12px;text-transform:uppercase;letter-spacing:.09em;font-weight:750;color:#56667e;display:block;margin-bottom:10px}
.cl .draft-paper{background:#fff;border:1px solid #dbe2ec;border-radius:8px;padding:28px 32px;box-shadow:0 3px 12px #12244506;max-width:100%;font-size:15px}
.cl .editor{min-height:500px;font-size:14px;line-height:1.65;border:1px solid #acbed5;border-radius:8px}
/* delivery-page conventions of the reference: a plain .btn is an outlined button, .btn.primary the filled one; disclosure titles in ink */
.cl .dl .btn:not(.primary){background:var(--w);border-color:var(--g4);color:var(--g1)}
.cl .dl .btn:not(.primary):hover{background:var(--tint);border-color:#aeb9ca}
.cl .dl .btn.primary{background:var(--a);border-color:var(--a);color:var(--on-a)}
.cl .dl details>summary{color:var(--g1)}
.cl .dl .heat-table summary{min-height:0;padding:0;align-items:flex-start}
.cl .dl .heat-table td{vertical-align:middle}
.cl .dl a:not(.btn){text-decoration:none}
.cl .dl a:not(.btn):hover{text-decoration:underline;text-underline-offset:4px}
.cl .dl textarea,.cl .dl input,.cl .dl select{font-family:inherit}
.cl .dl .table-scroll table{width:100%;max-width:none}
.cl .dl .table-scroll td:first-child,.cl .dl .table-scroll th:first-child{min-width:9.5em}
.cl .dl .prose h1,.cl .dl .prose h2,.cl .dl .prose h3,.cl .dl .prose h4{font-family:var(--sans);font-weight:650;color:var(--g1)}
.cl .dl .claim-card{padding:20px 0;border-top:1px solid var(--g4)}
.cl .dl .card-structure{display:grid;grid-template-columns:1fr 1fr;gap:18px 26px;margin-top:22px;font-size:13px}
.cl .dl .card-structure dt{font-weight:700;color:var(--g1);margin-bottom:4px}
.cl .dl .card-structure dd{margin:0;color:var(--g2)}
.cl .dl .card-structure ol,.cl .dl .card-structure ul{margin:0;padding-left:18px}
@media(max-width:620px){.cl .dl .card-structure{grid-template-columns:1fr}}
/* DELIVERY LAYER (2026-10-04, docs/complete_delivery_ui_20261004): the complete-delivery reference's component rules, ported
   from its styles.css with Kovmere's own variables (the palettes are identical) and scoped to .cl .dl, the wrapper of the rebuilt
   landing, report, questions and Fix pages, so no legacy page changes. */
.cl .dl .delivery-wrap{max-width:1180px}
.cl .dl .compact-intro{padding:44px 0 28px}
.cl .dl .compact-intro h1{font-size:clamp(32px,4vw,48px);line-height:1.12;max-width:830px;margin-bottom:18px}
.cl .dl .compact-intro .lead{font-size:18px;max-width:780px;margin:16px 0}
.cl .dl .sample-note{font-size:12px;color:#52617a;margin-top:16px;padding:10px 14px;border-left:3px solid #b9d6fa;background:#f5f9ff;line-height:1.5}
.cl .dl .package-overview{display:grid;grid-template-columns:1.15fr 1fr;gap:32px;padding:26px 30px;background:#f3f7fe;border:1px solid #cfdef2;border-radius:14px}
.cl .dl .priority-list{margin:0;padding-left:21px}
.cl .dl .priority-list li{padding:4px 0 10px;font-weight:650}
.cl .dl .priority-list li span{display:block;font-size:13px;color:var(--muted);font-weight:400}
.cl .dl .inventory-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cl .dl .inventory-grid a,.cl .dl .inventory-grid>div{display:flex;gap:12px;align-items:center;color:var(--ink);font-size:13px}
.cl .dl .inventory-grid b{font-size:24px;color:var(--accent)}
.cl .dl .package-contents>p{margin-top:14px}
.cl .dl .progress-track{height:6px;background:#e8edf5;border-radius:4px;overflow:hidden}
.cl .dl .progress-track span{display:block;height:100%;background:var(--accent)}
.cl .dl .section-jumps{display:flex;gap:22px;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:15px 0;font-size:13px;font-weight:650;background:white}
.cl .dl .section-jumps a{color:#344259}
.cl .dl .section-jumps a:hover{color:var(--accent)}
.cl .dl .delivery-section{padding:40px 0;border-bottom:1px solid var(--line);scroll-margin-top:85px}
.cl .dl .delivery-section h2{font-size:30px;line-height:1.2}
.cl .dl .delivery-section .section-head{margin-bottom:24px}
.cl .dl .delivery-section .section-sub{max-width:760px}
.cl .dl .work-item{margin-bottom:26px;border:1px solid #cbd7e8;border-radius:12px;overflow:hidden;scroll-margin-top:88px;box-shadow:0 4px 18px #132a4b05}
.cl .dl .work-item-head{display:grid;grid-template-columns:36px 1fr auto;gap:18px;align-items:start;padding:24px 28px;background:#f8faff;border-bottom:1px solid var(--line)}
.cl .dl .work-item-head .eyebrow{margin-bottom:6px;font-size:12px}
.cl .dl .work-item-head h3{font-size:23px;max-width:630px}
.cl .dl .work-item-head p{font-size:14px;margin-top:6px}
.cl .dl .step-number{font-size:16px;font-weight:750;color:var(--accent);padding-top:2px}
.cl .dl .task-status-label{font-size:12px;font-weight:650;color:#58677c}
.cl .dl .task-status-label select{display:block;font-size:12px;padding:8px 10px;max-width:205px;background:white;border:1px solid var(--line);border-radius:6px;margin-top:5px;color:var(--ink)}
.cl .dl .work-item-body{padding:26px 28px}
.cl .dl .work-brief{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding-bottom:25px;border-bottom:1px solid var(--line);font-size:14px}
.cl .dl .work-brief p+p{margin-top:7px}
.cl .dl .draft-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin:24px 0 14px}
.cl .dl .prose{overflow-wrap:anywhere;line-height:1.72}
.cl .dl .prose h1,.cl .dl .prose h2{font-size:23px;margin:12px 0 20px;letter-spacing:-.025em}
.cl .dl .prose h3,.cl .dl .prose h4{font-size:18px;margin:22px 0 10px}
.cl .dl .prose p{max-width:85ch}
.cl .dl .prose p+p{margin-top:12px}
.cl .dl .prose p:has(strong){margin-top:18px}
.cl .dl .prose table{margin:12px 0 18px}
.cl .dl .save-note{font-size:12px;color:var(--muted);margin-top:9px!important}
.cl .dl .action-bottom{display:grid;grid-template-columns:1.1fr 1fr;gap:30px;margin:26px 0 20px;padding-top:24px;border-top:1px solid var(--line)}
.cl .dl .action-bottom h4{margin-bottom:12px}
.cl .dl .work-check{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.55;margin:10px 0;font-weight:400!important;cursor:pointer}
.cl .dl .work-check input{width:17px;height:17px;accent-color:var(--accent);flex:0 0 17px;margin:3px 0 0}
.cl .dl .work-check:has(input:checked)>span{color:#69778c}
.cl .dl .next-result{border-left:2px solid #d7e6fb;padding-left:20px}
.cl .dl .optional-facts,.cl .dl .evidence-block{border-top:1px solid var(--line);margin-top:14px}
.cl .dl .optional-facts summary,.cl .dl .evidence-block summary,.cl .dl .full-record summary{display:flex;justify-content:space-between;gap:16px;padding:16px 0;font-size:14px;font-weight:650;cursor:pointer}
.cl .dl .optional-facts summary:after,.cl .dl .evidence-block summary:after,.cl .dl .full-record summary:after{content:'+';font-size:18px;color:var(--accent)}
.cl .dl .optional-facts summary span{font-size:12px;color:var(--muted);font-weight:400;margin-left:auto}
.cl .dl .confirm-form{padding:18px 0;border-bottom:1px solid var(--line)}
.cl .dl .confirm-form>label{font-size:14px;font-weight:600;display:block;margin-bottom:10px}
.cl .dl .confirm-form textarea,.cl .dl textarea[data-note],.cl .dl .profile-editor{width:100%;padding:12px;border:1px solid #c9d4e4;border-radius:6px;background:white;font-size:14px;line-height:1.55;resize:vertical}
.cl .dl .confirmed-additions{padding:18px;background:#f3f7fe;border:1px solid #d4e2f5;border-radius:8px;margin-top:18px}
.cl .dl .confirmed-additions>div{margin:14px 0}
.cl .dl .evidence-block blockquote,.cl .dl blockquote{margin:12px 0;padding:13px 18px;border-left:3px solid #9fbfeb;background:#f4f7fc;font-size:14px}
.cl .dl .implementation-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;font-size:13px}
.cl .dl .metric-strip{gap:20px;margin:16px 0;font-size:12px}
.cl .dl .metric-strip b{font-size:22px;display:block;color:var(--ink)}
.cl .dl .support-item{border:1px solid var(--line);border-radius:10px;padding:24px;margin-bottom:18px;background:white}
.cl .dl .support-item>p{font-size:14px;margin:12px 0}
.cl .dl .support-item>summary{display:flex;justify-content:space-between;gap:15px;align-items:center;cursor:pointer;font-size:17px;font-weight:650}
.cl .dl .field-label{display:block;font-size:13px;font-weight:600;margin:20px 0 8px}
.cl .dl .profile-editor{min-height:300px}
.cl .dl .support-item .full-record{margin-top:15px;border-top:1px solid var(--line)}
.cl .dl .support-item .full-record>summary{font-size:14px}
.cl .dl .support-item .prose h2{font-size:20px}
.cl .dl .code-block{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;background:#f4f6fa;color:#223149;padding:20px;border:1px solid var(--line);border-radius:7px;font:12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;max-height:460px;overflow:auto}
.cl .dl .code-block.tall{max-height:650px}
.cl .dl .warning{background:#fff8ed;border-color:#ead9b7;color:#6b4d16}
.cl .dl .follow-row{display:grid;grid-template-columns:1.3fr 1fr .8fr;gap:24px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line)}
.cl .dl .follow-row h3{font-size:18px}
.cl .dl .follow-row label{display:block;font-size:12px;margin:0 0 5px}
.cl .dl .follow-row input{width:100%;border:1px solid var(--line);padding:8px;border-radius:6px;margin-bottom:12px;font-size:13px}
.cl .dl .kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:4px 0 20px}
.cl .dl .kpi-grid article{padding:24px 28px;border-right:1px solid var(--line)}
.cl .dl .kpi-grid article:last-child{border-right:0}
.cl .dl .kpi-grid article>span{display:block;font-size:13px;color:#56667f}
.cl .dl .kpi-grid strong{display:block;font-size:56px;letter-spacing:-.055em;line-height:1.3}
.cl .dl .kpi-grid strong span{font-size:32px}
.cl .dl .kpi-grid article:first-child{background:#f1f7ff}
.cl .dl .kpi-grid p{font-size:12px;color:var(--muted)}
.cl .dl .readout{display:grid;grid-template-columns:1.5fr 1fr;gap:35px;padding:22px 26px;background:#f6f8fc;border-radius:10px;margin:22px 0;align-items:start;font-size:14px}
.cl .dl .readout b{display:block;margin-bottom:7px}
.cl .dl .chart-panel{border:1px solid var(--line);border-radius:10px;padding:24px;min-width:0}
.cl .dl .chart-panel h3{font-size:18px;margin-bottom:8px}
.cl .dl .wide-bar-row{display:grid;grid-template-columns:90px minmax(40px,1fr) 40px 60px;gap:10px;align-items:center;margin-top:20px;font-size:13px}
.cl .dl .wide-bar-row .bar-track{height:10px;background:#edf1f7}
.cl .dl .wide-bar-row small{font-size:12px;color:var(--muted);text-align:right}
.cl .dl .wide-bar-row b{font-size:14px;text-align:right}
.cl .dl .axis-label{display:flex;justify-content:space-between;font-size:12px;color:#7d899a;margin:10px 95px 22px 100px}
.cl .dl .chart-panel .notice{margin-top:22px}
.cl .dl .outcome-line{display:flex;gap:28px;flex-wrap:wrap;font-size:13px;margin-bottom:20px}
.cl .dl .outcome-line b{font-size:22px;margin-right:5px}
.cl .dl .table-scroll{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
.cl .dl .table-scroll table{width:100%;border-collapse:collapse;font-size:13px}
.cl .dl .table-scroll th{text-align:left;color:#5b6880;font-weight:600;font-size:12px;background:#f5f7fb;padding:12px}
.cl .dl .table-scroll td{padding:14px 12px;border-bottom:1px solid #e4e9f0;vertical-align:top}
.cl .dl .table-scroll caption{text-align:left;font-size:12px;color:var(--muted);padding:8px 0}
.cl .dl .heat-table table{min-width:700px}
.cl .dl .heat-table th:first-child{width:43%}
.cl .dl .heat-table td:not(:first-child){text-align:center}
.cl .dl .heat-table th:not(:first-child){text-align:center}
.cl .dl .heat-table summary{font-weight:500;font-size:13px;display:flex;gap:10px;cursor:pointer;padding:0}
.cl .dl .heat-table summary:after{content:'+';margin-left:auto;color:var(--accent)}
.cl .dl .heat-table details[open] summary:after{content:'−'}
.cl .dl .heat-table .detail-body{padding-top:14px;min-width:220px}
.cl .dl .qid{color:#8894a6;font-size:12px;white-space:nowrap}
.cl .dl .heat-cell{display:block;padding:6px 8px;border-radius:5px;min-width:39px;font-size:12px}
.cl .dl .level-0{background:#f0f2f6;color:#667186}
.cl .dl .level-1{background:#e8f1fd;color:#234a7c}
.cl .dl .level-2{background:#c8dfff;color:#184178}
.cl .dl .level-3{background:#1468d6;color:white}
.cl .dl .source-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:22px}
.cl .dl .source-stats div{padding:18px;border-top:2px solid #bad3f4;background:#f7faff}
.cl .dl .source-stats b{font-size:30px;display:block;line-height:1.3}
.cl .dl .source-stats span{font-size:12px;color:var(--muted)}
.cl .dl .big-number{font-size:45px!important;letter-spacing:-.04em;margin:18px 0!important}
.cl .dl .big-number span{font-size:18px;letter-spacing:0;color:var(--muted)}
.cl .dl .key-values{display:grid;grid-template-columns:40% 60%;font-size:13px;gap:12px 16px}
.cl .dl .key-values dt{color:var(--muted)}
.cl .dl .key-values dd{margin:0;overflow-wrap:anywhere}
.cl .dl .question-toolbar{display:flex;gap:20px;align-items:flex-end;margin:28px 0}
.cl .dl .search-field{flex:1;font-size:12px;font-weight:600}
.cl .dl .search-field input{display:block;width:100%;border:1px solid #cbd5e2;padding:12px;margin-top:8px;border-radius:7px;background:white}
.cl .dl .group-title{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.cl .dl .group-title>span{font-size:12px;color:var(--accent);font-weight:750}
.cl .dl .group-title h2{font-size:23px}
.cl .dl .group-title small{font-size:12px;color:var(--muted);margin-left:auto}
.cl .dl .question>summary{display:grid;grid-template-columns:34px 1fr 85px;align-items:start;font-size:14px;gap:14px;padding:18px 0}
.cl .dl .question-number{font-size:12px;color:var(--accent);padding-top:3px}
.cl .dl .question-result{text-align:right;color:var(--muted);font-size:12px}
.cl .dl .question-detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;padding:14px 0 20px}
.cl .dl .question-detail-grid p{font-size:14px}
.cl .dl .question-detail-grid .mini-label{margin-top:16px}
.cl .dl .question-detail-grid h4{margin:16px 0 8px}
.cl .dl .capability-example{margin-top:24px;padding:24px;border:1px solid var(--line);border-radius:10px}
.cl .dl .capability-example .sample-note{margin:0 0 25px}
.cl .dl .capability-example .draft-paper{box-shadow:none}
.cl .dl .sample-feature{display:grid;grid-template-columns:1.4fr 1fr;gap:35px;padding:36px;background:#f4f8ff;border-radius:13px;margin-bottom:24px}
.cl .dl .sample-feature .row{margin-top:25px}
.cl .dl .backline{margin:25px 0}
.cl .dl .table-scroll a{overflow-wrap:anywhere}
.cl .dl .draft-edit .row{margin-top:12px}
.cl .dl .question>summary:after{display:none}
.cl .dl .complete-evidence-link{margin-top:20px}
.cl .dl .single-action-title{font-size:29px;margin:0 0 25px}
@media(max-width:800px){.cl .dl .package-overview,.cl .dl .work-brief,.cl .dl .action-bottom,.cl .dl .question-detail-grid,.cl .dl .sample-feature,.cl .dl .readout{grid-template-columns:1fr;gap:22px}.cl .dl .progress-line{grid-template-columns:1fr 120px}.cl .dl .progress-line>span{grid-column:1/-1}.cl .dl .work-item-head{grid-template-columns:26px 1fr;padding:20px}.cl .dl .work-item-head .task-status-label{grid-column:2}.cl .dl .work-item-body{padding:20px}.cl .dl .draft-paper{padding:22px}.cl .dl .follow-row{grid-template-columns:1fr 1fr}.cl .dl .follow-row>p{grid-column:1/-1}.cl .dl .source-stats{grid-template-columns:1fr 1fr}.cl .dl .kpi-grid article{padding:20px 15px}.cl .dl .kpi-grid strong{font-size:45px}.cl .dl .section-jumps{gap:14px}.cl .dl .delivery-section{padding:30px 0}.cl .dl .group-title small{max-width:130px;text-align:right}.cl .dl .question-toolbar{flex-wrap:wrap}.cl .dl .search-field{flex-basis:100%}.cl .dl .support-item{padding:20px}.cl .dl .key-values{grid-template-columns:1fr 1.2fr}}
@media(max-width:520px){.cl .dl .wrap{padding:0 18px}.cl .dl .compact-intro{padding-top:28px}.cl .dl .compact-intro h1{font-size:33px}.cl .dl .compact-intro .lead{font-size:16px}.cl .dl .package-overview{padding:22px}.cl .dl .progress-line{gap:12px}.cl .dl .section-jumps{font-size:12px}.cl .dl .work-item-head h3{font-size:20px}.cl .dl .draft-top .row{gap:7px}.cl .dl .draft-paper{padding:20px 18px}.cl .dl .draft-paper h2,.cl .dl .draft-paper h3{font-size:19px}.cl .dl .implementation-grid{grid-template-columns:1fr}.cl .dl .kpi-grid strong{font-size:35px}.cl .dl .kpi-grid strong span{font-size:23px}.cl .dl .kpi-grid article{padding:18px 12px}.cl .dl .kpi-grid article>span{font-size:12px;min-height:36px}.cl .dl .kpi-grid p{font-size:12px}.cl .dl .delivery-section h2{font-size:26px}.cl .dl .source-stats{gap:10px}.cl .dl .source-stats div{padding:13px}.cl .dl .source-stats b{font-size:25px}.cl .dl .question>summary{grid-template-columns:25px 1fr 50px;gap:10px}.cl .dl .group-title h2{font-size:19px}.cl .dl .group-title small{font-size:12px}.cl .dl .support-item .row.between{align-items:flex-start}.cl .dl .follow-row{grid-template-columns:1fr}.cl .dl .follow-row>p{grid-column:auto}.cl .dl .chart-panel{padding:19px}.cl .dl .wide-bar-row{grid-template-columns:72px minmax(25px,1fr) 34px 54px;gap:6px}.cl .dl .inventory-grid{gap:8px}.cl .dl .inventory-grid a{font-size:12px}.cl .dl .sample-feature{padding:24px}.cl .dl .question-toolbar .btn{font-size:12px}.cl .dl .next-result{padding-left:15px}}
.cl .dl .table-scroll{position:relative}.cl .dl .support-item,.cl .dl .work-item,.cl .dl .confirm-box{overflow-wrap:break-word}.cl .dl .work-item-head>div{min-width:0}.cl .dl .claim-card .grid2>*{min-width:0}.cl .dl .claim-card blockquote a,.cl .dl .support-item a{overflow-wrap:anywhere}@media(max-width:520px){.cl .dl .work-item-head{grid-template-columns:30px minmax(0,1fr);gap:12px;padding:18px 16px}.cl .dl .work-item-head .item-controls{grid-column:1/-1;align-items:flex-start}.cl .dl .work-item-body{padding:18px 16px}.cl .dl .support-item{padding:18px 16px}}.cl .dl .item-controls{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}.cl .dl .item-controls .task-status-form{margin:0}.cl .dl .item-own-page{white-space:nowrap}@media(max-width:620px){.cl .dl .item-controls{align-items:flex-start}}
@media print{.no-print{display:none!important}.cl .dl .mast,.cl .dl .sample-nav,.cl .dl .section-jumps,.cl .dl .demo-strip,.cl .dl .footer,.cl .dl button,.cl .dl .draft-edit,.cl .dl .profile-editor,.cl .dl .save-note{display:none!important}.cl .dl .compact-intro{padding-top:0}.cl .dl .delivery-wrap{max-width:none;padding:0}.cl .dl .draft-paper,.cl .dl .work-item,.cl .dl .support-item,.cl .dl .chart-panel{box-shadow:none}.cl .dl .code-block{max-height:none;overflow:visible}.cl .dl .table-scroll{overflow:visible}.cl .dl .heat-table table{min-width:0}.cl .dl details>div{display:block!important}.cl .dl .work-item,.cl .dl .support-item{break-inside:auto}.cl .dl .work-item-head,.cl .dl .draft-top,.cl .dl h2,.cl .dl h3{break-after:avoid}.cl .dl .kpi-grid strong{font-size:34px}.cl .dl .section{padding:20px 0}.cl .dl .delivery-section{padding:24px 0}.cl .dl .editor{display:none}.cl .dl .key-values{grid-template-columns:35% 65%}.cl .dl .full-record{break-inside:auto}.cl .dl .code-block.tall{max-height:none}.cl .dl .heat-cell{border:1px solid #cad3df}.cl .dl .readout{break-inside:avoid}}

/* 2026-10-04 chosen design (docs/chosen_design_20261004): the site header follows reference C2 on every page */
.cl .mast{border-bottom:1px solid #ebf0f7;background:#ffffff;position:sticky;top:0;z-index:150}
.cl .cnav{min-height:72px;gap:28px;justify-content:flex-start}
.cl .cnav .wordmark{color:#0a1730}
.cl .navlinks{gap:26px}
.cl .navlinks a{color:#0a1730;font-size:16px;font-weight:500}
.cl .navlinks a:hover,.cl .authlinks>a:not(.btn):hover{color:#0962d5}
.cl .navlinks a[aria-current=page]{color:#0962d5}
.cl .authlinks{gap:12px;margin-left:auto}
.cl .authlinks>a:not(.btn){color:#0a1730;font-size:16px;font-weight:500;padding:0 6px}
.cl .mast .authlinks .btn.ghost{min-height:40px;padding:0 16px;font-size:15px;font-weight:680;border:1.5px solid #0a1730;border-radius:10px;color:#0a1730;background:#ffffff}
.cl .mast .authlinks .btn.ghost:hover{background:#0a1730;color:#ffffff}
.cl .mast .hdr-cta{white-space:nowrap;flex-shrink:0;min-height:40px;padding:0 16px;font-size:15px;font-weight:680;border:2px solid #0962d5;border-radius:10px;background:#0962d5;color:#ffffff}
.cl .cnav .wordmark .lk{height:28px;width:auto}
.cl .mast .hdr-cta:hover{background:#0750b2;border-color:#0750b2;color:#ffffff}
.cl .mast .hdr-cta .cta-short{display:none}
@media (max-width:980px){.cl .cnav{min-height:64px;gap:12px}.cl .mast .hdr-cta{min-height:44px}.cl .cnav .wordmark .lk{height:24px}.cl .authlinks{display:flex;margin-left:auto}}
.cl .hdr-logout{display:inline-flex;margin:0}
.cl .hdr-logout button{border:0;background:none;padding:0 6px;font:inherit;font-size:16px;font-weight:500;color:#0a1730;cursor:pointer;white-space:nowrap;min-height:44px}
.cl .hdr-logout button:hover{color:#0962d5}
/* 2026-10-05 (audit K-001, founder): "Log in" (or "My account" when signed in) stays in the header at every width, phones included;
   only Admin and Log out fold into the menu. At 320 px the header controls fit with the tighter spacing below; a signed-in reader
   of a public example gets no priced button in the document header (the site header never gave one), so My account fits too. */
@media (max-width:760px){.cl .authlinks>a:not(.hdr-cta):not(.hdr-login){display:none}}
/* 2026-10-10 (founder, phone audit, second pass): no phone menu, and the controls on ONE line. On a phone the header is two rows:
   the full logo on the first; How it works · Example · Pricing and Log in + the priced button (My account · Log out when signed
   in) together on the second, sized so they share one line from 360px up (12.5px below 400px, 12px below 365px); only below
   340px does the button drop to its own line. The header is not sticky on a phone. The operator's Admin link leaves the phone
   header (the dashboard keeps it). */
.cl .navlinks .ph{display:none}
@media (max-width:980px){.cl .mast{position:static}.cl .mast .cw{padding-left:16px;padding-right:16px}
.cl .cnav{flex-wrap:wrap;gap:0 12px;min-height:0;padding:10px 0 4px}
.cl .cnav .wordmark{flex:0 0 100%;min-height:40px}.cl .cnav .wordmark .lk{height:24px}
.cl .navlinks{display:flex;order:2;flex:0 1 auto;gap:14px;margin:0;font-size:13px}.cl .navlinks a{font-size:13px;min-height:44px}
.cl .authlinks{order:3;margin-left:auto;gap:10px}.cl .authlinks>a.hdr-login{font-size:13px;padding:0}.cl .hdr-logout button{font-size:13px;padding:0}
.cl .mast .hdr-cta{font-size:13px;padding:0 10px;min-height:44px;border-width:1.5px}}
@media (max-width:400px){.cl .cnav{gap:0 8px}.cl .navlinks{gap:11px}.cl .navlinks a{font-size:12.5px}.cl .authlinks{gap:7px}.cl .authlinks>a.hdr-login,.cl .hdr-logout button{font-size:12.5px}.cl .mast .hdr-cta{font-size:12.5px;padding:0 7px}}
@media (max-width:364px){.cl .navlinks{gap:10px}.cl .navlinks a{font-size:12px}.cl .authlinks>a.hdr-login,.cl .hdr-logout button{font-size:12px}.cl .mast .hdr-cta{font-size:12px;padding:0 7px}}
@media (max-width:339px){.cl .authlinks{flex:0 0 100%;justify-content:flex-end;margin:0}}
/* 2026-10-10 (founder, phone audit): iOS Safari zooms into any control whose text is under 16px, so on a phone every control
   is 16px (the Fix package's record-what-you-published fields were 13px, the questions editor 15px); the scrollable tab rows
   and tables fade at the right edge while there is more to the right (data-can-scroll is set by the script below). */
@media (max-width:760px){.cl select,.cl textarea,.cl input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]){font-size:16px!important}}  /* !important: the one phone rule that must beat every component's own control size */
.d-tabs[data-can-scroll="1"],.cl .snav[data-can-scroll="1"],.cl .table-wrap[data-can-scroll="1"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
@media (max-width:640px){.cl .mast .cw{padding-left:16px;padding-right:16px}}
@media (max-width:520px){.cl .mast .hdr-cta .cta-long{display:none}.cl .mast .hdr-cta .cta-short{display:inline}}  /* 2026-10-10: the button's phone size lives in the tiers above */

/* 2026-10-06 (founder, ui/samples): the delivery's own three documents, in a quiet bar under the unchanged site header */
.cl .docbar{background:#ffffff;border-bottom:1px solid #ebf0f7}
.cl .docbar-in{display:flex;align-items:center;gap:20px;min-height:58px;padding-top:8px;padding-bottom:8px}
.cl .docbar-id{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:550;color:#0a1730;white-space:nowrap;min-width:0}
.cl .docbar .chip{display:inline-flex;align-items:center;font-size:12.5px;font-weight:500;padding:3px 10px;border-radius:999px;background:#eef3fb;color:#38445a;white-space:nowrap}
.cl .docbar-tabs{display:flex;gap:4px;margin-left:auto}
.cl .docbar-tabs a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;color:#38445a;text-decoration:none;font-weight:500;font-size:15px;white-space:nowrap}
.cl .docbar-tabs a:hover{background:#f5f8fe;color:#0a1730}
.cl .docbar-tabs a[aria-current=page]{background:#e2ecff;color:#0a4fb8;font-weight:600}
.cl .docbar-tabs .num{display:inline-flex;width:20px;height:20px;border-radius:50%;border:1px solid #cdd6e4;color:#5b6880;font-size:12px;font-weight:600;align-items:center;justify-content:center}
.cl .docbar-tabs a[aria-current=page] .num{background:#0962d5;border-color:#0962d5;color:#ffffff}
.cl .docbar-tabs .dl-short{display:none}
@media (max-width:760px){.cl .docbar-in{flex-wrap:wrap;gap:8px;padding-top:10px;padding-bottom:10px}.cl .docbar-id{font-size:14px}.cl .docbar-tabs{width:100%;margin-left:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;background:#f3f6fb;border-radius:12px;padding:4px}.cl .docbar-tabs a{padding:0 6px;border-radius:9px;font-size:14.5px;gap:6px;min-height:40px}.cl .docbar-tabs a[aria-current=page]{background:#ffffff;box-shadow:0 1px 2px rgba(16,32,64,.08)}}
@media (max-width:480px){.cl .docbar-tabs .num{display:none}.cl .docbar-tabs .dl-long{display:none}.cl .docbar-tabs .dl-short{display:inline}}