@font-face{font-family:'SG';src:url('/assets/fonts/schibsted-grotesk/SchibstedGrotesk-var.woff2') format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:'MM';src:url('/assets/fonts/martian-mono/MartianMono-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'MM';src:url('/assets/fonts/martian-mono/MartianMono-700.woff2') format('woff2');font-weight:700;font-display:swap}
:root{
  --bg:oklch(0.16 0.008 260); --surface:oklch(0.20 0.01 255); --line:oklch(1 0 0 / .09);
  --ink:oklch(0.96 0.005 250); --dim:oklch(0.78 0.015 250);
  --ember:oklch(0.78 0.148 70); --ember-deep:oklch(0.70 0.155 62);
  --on-ember:oklch(0.22 0.04 70); --on-ember-dim:oklch(0.34 0.06 66);
  --teal:oklch(0.80 0.11 185);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:'SG',system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-size:16.5px;line-height:1.62}
h1,h2,h3{text-wrap:balance;letter-spacing:-0.028em}
.wrap{max-width:1120px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.nav{display:flex;align-items:center;justify-content:space-between;padding:22px clamp(20px,4vw,40px);max-width:1200px;margin:0 auto}
.lockup{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px}
.mark{width:26px;height:26px}
.navlinks{display:flex;gap:30px;align-items:center;font-size:15px}
.navlinks a{color:var(--dim);text-decoration:none}
.navlinks a:hover{color:var(--ink)}
.btn{display:inline-block;background:var(--ember);color:var(--on-ember);font-weight:680;border-radius:10px;padding:12px 24px;text-decoration:none;font-size:15.5px}
.btn:hover{background:oklch(0.82 0.14 72)}
.btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:12px 24px;text-decoration:none;font-size:15.5px}
.btn-dark{display:inline-block;background:oklch(0.20 0.03 70);color:oklch(0.95 0.02 80);font-weight:650;border-radius:10px;padding:12px 24px;text-decoration:none;font-size:15.5px}
.navlinks .btn{color:var(--on-ember);padding:9px 18px;font-size:14px;border-radius:8px}
footer{border-top:1px solid var(--line);margin-top:clamp(64px,9vw,110px)}
.foot{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:32px;padding:44px clamp(20px,4vw,40px);max-width:1200px;margin:0 auto;font-size:14px;color:var(--dim)}
.foot a{color:var(--dim);text-decoration:none;display:block;margin-bottom:9px}
.foot a:hover{color:var(--ink)}
@media(max-width:700px){.foot{grid-template-columns:1fr;gap:22px}}
@media(max-width:700px){
  .navlinks a:not(.btn){display:none}
  .lockup{white-space:nowrap}
  .nav{padding:16px 20px}
}
@media(max-width:640px){
  .spec pre{font-size:12px;white-space:pre-wrap;word-break:break-word}
}

:root{
  /* canvas — one light source per screen */
  --canvas:oklch(0.16 0.008 260);
  --surface:oklch(0.20 0.01 255);
  --plate:oklch(0.185 0.012 262);
  --line:oklch(1 0 0 / .09);
  --line-soft:oklch(1 0 0 / .05);

  /* ink */
  --ink:oklch(0.96 0.005 250);
  --dim:oklch(0.78 0.015 250);

  /* the one accent */
  --ember:oklch(0.78 0.148 70);
  --ember-hi:oklch(0.82 0.14 72);
  --ember-deep:oklch(0.70 0.155 62);
  --on-ember:oklch(0.22 0.04 70);
  --on-ember-dim:oklch(0.34 0.06 66);
  --ember-glow:oklch(0.78 0.148 70 / .35);
  --ember-tint:oklch(0.78 0.148 70 / .14);

  /* status — report-panel vocabulary, one tint each */
  --pass:oklch(0.82 0.14 150);
  --pass-tint:oklch(0.82 0.14 150 / .14);
  --breach:oklch(0.78 0.16 25);
  --breach-tint:oklch(0.78 0.16 25 / .16);

  /* geometry */
  --radius-control:8px;
  --radius-card:14px;
  --radius-pill:99px;
  --container:1120px;
  --container-chrome:1200px;

  /* type */
  --font-display:'SG',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  --font-body:var(--font-display);
  --font-mono:'MM',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --tracking-tight:-0.028em;
  --tracking-wide:0.03em;

  /* Product-mark paint (storebrand-0824). Restored 2026-09-04: this whole
     block (added c7d58f44fa) was silently dropped by a later rewrite of this
     file, and nothing checked that a `var()` in storefront/pdp/icons.py still
     resolved — every icon using one painted solid black (Chromium's fallback
     for an invalid stop-color/stroke on a filled shape). `preflight` is the
     only symbol still on tokens (acked-byte-locked, test_pdp.py's
     DECLARED_TOKENIZATION_2026_08_24); every other symbol in icons.py is now
     literal paint, by rule, so this class of bug cannot recur silently for
     them. See icons.py's module docstring. */
  --icon-preflight-grad-1:#2A1F0E;
  --icon-preflight-grad-2:#120E08;
  --icon-preflight-stroke:#F59E2E;
  --icon-preflight-stroke-dim:rgba(245,158,46,.38);
  --icon-preflight-dot:#FFB74F;

  /* PDP page chrome (storebrand-0824, c7d58f44fa). Restored 2026-09-04
     alongside the icon tokens above: same incident (PDP-CHROME.md), the
     `.subnav`/`.phero`/`.pilotbox`/`.sec`/`.faq`/`.ctaband` block below never
     reached this branch, so these five tokens never existed here either. */
  --pdp-pilot-shade:oklch(0.18 0.01 258);
  --pdp-badge-tint:oklch(0.78 0.148 70/.16);
  --pdp-step-line:oklch(0.78 0.148 70/.6);
  --pdp-cta-grad-1:oklch(0.21 0.014 262);
  --pdp-cta-grad-2:oklch(0.185 0.012 260);
  --pdp-cta-border:oklch(1 0 0/.12);
}

@supports not (color: oklch(0 0 0)){
  :root{
    --canvas:#0B0D11; --surface:#13161B; --plate:#101318;
    --line:rgba(255,255,255,.09); --line-soft:rgba(255,255,255,.05);
    --ink:#EFF2F5; --dim:#B0B8C1;
    --ember:#F3A53A; --ember-hi:#FCB452; --ember-deep:#E18518;
    --on-ember:#261704; --on-ember-dim:#4D3112;
    --ember-glow:rgba(243,165,58,.35); --ember-tint:rgba(243,165,58,.14);
    --pass:#7CDD93; --pass-tint:rgba(124,221,147,.14);
    --breach:#FF8A82; --breach-tint:rgba(255,138,130,.16);
  }
  [data-theme="paper"]{
    --canvas:#F4F0E7; --surface:#EBE4D5; --plate:#EBE4D5;
    --line:rgba(27,23,16,.16); --line-soft:rgba(27,23,16,.09);
    --ink:#1B1710; --dim:#5F5747;
    /* W6/S8-3: darkened from #A85411 (4.21:1 on --surface, a live AA failure the
       first axe run over the store found). --ember-hi's hex used to disagree with
       its own oklch value; both layers now say the same colour. */
    --ember:#9B4800; --ember-hi:#923F00; --on-ember:#F4F0E7;
  }
}

[data-theme="paper"]{
  --canvas:oklch(0.956 0.013 87);   /* #F4F0E7 porcelain */
  --surface:oklch(0.920 0.021 86);  /* #EBE4D5 */
  --plate:oklch(0.920 0.021 86);
  --line:oklch(0.868 0.030 88);     /* #DCD3BE — opaque here: a hairline on paper */
  --line-soft:oklch(0.868 0.030 88 / .5);
  --ink:oklch(0.207 0.015 82);      /* #1B1710 */
  --dim:oklch(0.460 0.027 85);      /* #5F5747 */
  /* THE DARKENING WAS ONE BACKGROUND SHORT (W6 / S8-3, and it is a real finding).
     #A85411 was tuned for AA against --canvas (#F4F0E7) and clears it at 4.69:1.
     It is also used as link text on --surface (#EBE4D5) — the legal pages' table
     of contents, their callouts and their tables all sit on the plate — where it
     measured 4.21:1 and FAILED AA. Nothing had ever measured the store, so it
     shipped. oklch(0.50 …) = #9B4800: 5.00:1 on the plate, 5.56:1 on the canvas.
     ASPECT-SPEC-S8 §F6's "the contrast story is fine, lock it" was computed over
     the DARK token pairs only; this pair did not exist when it was written. */
  --ember:oklch(0.50 0.132 52);     /* #9B4800 — AA on BOTH paper backgrounds */
  --ember-hi:oklch(0.470 0.130 50); /* #923F00 */
  --on-ember:oklch(0.956 0.013 87);
  --ember-tint:oklch(0.50 0.132 52 / .10);
}
[data-theme="dark"]{ /* re-pin: chrome stays dark over a paper body */
  --canvas:oklch(0.16 0.008 260); --surface:oklch(0.20 0.01 255);
  --line:oklch(1 0 0 / .09); --ink:oklch(0.96 0.005 250); --dim:oklch(0.78 0.015 250);
  --ember:oklch(0.78 0.148 70); --ember-hi:oklch(0.82 0.14 72); --on-ember:oklch(0.22 0.04 70);
}

/* THE MIGRATION ALIAS BLOCK IS GONE (W6 / S5-7). It carried eight System-A names
   — --lit, --paper, --paper-plate, --paper-line, --ink-paper, --dim-paper,
   --ember-paper, --ember-paper-hi — for pages that had not moved onto this sheet
   yet. The last of those pages moved in W3 and light.css / tokens.css /
   shared.css are deleted, so every one of the eight had exactly zero readers.

   They were also a TRAP while they existed: they are declared on `:root`, which
   carries no `data-theme`, so `--ink-paper` resolves to the DARK ink and inherits
   that value down onto a porcelain body — near-white text on the four pages
   carrying France's mandatory disclosures. Do not reintroduce one.

   Two names survive here and NEITHER IS AN ALIAS:

   `--bg` is a compatibility name with two live readers this wave may not edit:
   `body{background:var(--bg)}` at :12, inside the founder-acked mock bytes, and
   `.subnav` in storefront/pdp/template.py, inside the acked PDP bytes. Its value
   is `--canvas`, so it is correct rather than merely tolerated; it retires with
   whichever wave is allowed to touch those two declarations.

   `--nav-height` is a REAL token that was miscategorised by living here. It is
   what `.nav--sticky` pins its height to and what S4-C6's `scroll-margin-top` is
   measured against; changing one without the other silently un-lands 91 legal
   anchors. */
:root{
  --bg:var(--canvas);
  --nav-height:56px;
}

/* ---- shared components (report panel, skip link, motion) ---- */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ember);color:var(--on-ember);padding:12px 20px;border-radius:0 0 10px 0;z-index:50}
.skip-link:focus{left:0}
.rep{background:oklch(0.185 0.012 262);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 26px 70px oklch(0 0 0/.5)}
.rep .pkg,.rep .why{font-family:'MM',monospace}
.rhead{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:15px 20px;border-bottom:1px solid var(--line);font-size:14px}
.rhead span{color:var(--dim);font-size:12.5px}
.rrow{display:grid;grid-template-columns:106px 1fr;grid-template-rows:auto auto;gap:2px 14px;padding:13px 20px;border-bottom:1px solid oklch(1 0 0/.05);align-items:center}
.rrow .pill{grid-row:1/3;justify-self:start;font-size:11.5px;font-weight:680;letter-spacing:.01em;border-radius:99px;padding:5px 11px}
.pill.bad{background:oklch(0.62 0.19 25/.16);color:oklch(0.78 0.16 25)}
.pill.good{background:oklch(0.7 0.14 150/.14);color:oklch(0.82 0.14 150)}
.pill.mid{background:oklch(0.78 0.148 70/.14);color:var(--ember)}
.rrow .pkg{font-size:13px;color:var(--ink)}
.rrow .why{font-size:11.5px;color:var(--dim)}
.rfoot{padding:13px 20px;font-size:12.5px;color:var(--dim)}
@media(max-width:640px){.rrow{grid-template-columns:1fr}.rrow .pill{grid-row:auto}}
a.btn:focus-visible,a.btn-ghost:focus-visible,a:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
@media(prefers-reduced-motion:no-preference){
  .fadein{animation:fadein .7s cubic-bezier(.16,1,.3,1) both}
  @keyframes fadein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

a{color:var(--ember)}
.lockup{color:var(--ink);text-decoration:none}
.lockup:hover{color:var(--ink)}

/* ─────────────────────────────────────────────────────────────────────────────
   S5-4 — one focus rule for the whole store (store-ux W3, 2026-08-05)

   The rule above (`a.btn,a.btn-ghost,a:focus-visible`) matches ANCHORS ONLY.
   That was invisible while the LP check page — the store's only form — loaded
   System A, whose `tokens.css:146-149` is a bare universal `:focus-visible` at
   16.68:1. S5-3 repoints that page onto this sheet, and the moment it does,
   `textarea`, `select` and `button` lose their focus ring: a WCAG 2.4.7 failure
   INTRODUCED by this programme (ASPECT-SPEC-S8 §F5 corrects §S5-4's premise —
   the status quo passes; the repoint is the hazard).

   So this lands BEFORE the repoint, not after it (S8-9's ordering ruling). It is
   additive and safe to land early: zero specificity, on a sheet the LP pages do
   not load yet.

   `:where()` is load-bearing. Without it this outline wins over every
   component-level override at higher specificity — including the paper legal
   pages and the Paddle overlay's own controls. `test_a_component_rule_can_still_
   override_the_focus_ring` is the guard.

   Nothing here is visible until a keyboard user tabs, which is exactly why no
   screenshot review can catch its absence (S8-9's silent-failure answer).
   ───────────────────────────────────────────────────────────────────────────── */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
  border-radius:2px;
}
/* Belt and braces, and stated as such: `var(--ember)` already resolves to the
   darkened paper ember (#A85411, 4.6:1 on porcelain) for any element inside
   [data-theme="paper"], because custom properties resolve at USE time against
   the using element. This rule exists so that a future component that hardcodes
   an outline colour on paper has one obvious place to be corrected. */
[data-theme="paper"] :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline-color:var(--ember);
}

/* ═════════════════════════════════════════════════════════════════════════════
   THE BRAND REACHES THE CONTROLS (store-ux fix round 1, critic F14)

   Every `<input>`, `<button>`, `<select>` and `<option>` on this store computed
   to `font-family: Arial` — measured in Chromium on the deployed site, on
   `/tools/`, `/lp/sw67/` and `/lp/sw67/check/`. Those are the three pages where
   a buyer TYPES. Form controls do not inherit `font-family` from their ancestors;
   nothing here ever said they should, so the store's whole argument about care
   and precision was contradicted by the first element that asks for something.

   The token system never reached this surface, and neither instrument could see
   it: the token linter looks for LITERALS, and there is no literal here to find —
   the defect is a missing inheritance. The a11y gate does not check fonts.

   `font: inherit`, not `font-family: inherit`, and this is the ONE judgement in
   the rule. The shorthand also carries size, and an unstyled `<input>` inheriting
   16.5px is what stops iOS Safari zooming the viewport on focus — a bug on the
   conversion form that a family-only fix would have left in place.

   BARE ELEMENT SELECTORS, deliberately. Every component rule in this sheet is a
   class selector, so each of them still wins: `.btn`'s 15.5px, the mono labels,
   the uppercase pills are all untouched. This changes exactly the controls
   nothing else styled, which is exactly the set that was rendering Arial. No new
   token, no new value, no direction change — the identity law, applied to the
   surface it had not reached.
   ───────────────────────────────────────────────────────────────────────────── */
input,button,select,textarea,optgroup,option{font:inherit;color:inherit}

/* Same defect, other face: `<code>` outside `.legal-body`/`.note-body` — i.e. on
   both landing pages — fell through to the generic `monospace`, not Martian Mono.
   The two rules that set it are scoped to long-form bodies, so the LP's inline
   code rendered in whatever the browser picked. */
code,kbd,samp,pre{font-family:var(--font-mono)}

/* ═════════════════════════════════════════════════════════════════════════════
   FAMILY-A CHROME + LEGAL-DOCUMENT LAYOUT (store-ux W3 / S5-3)

   Ported from tokens.css + light.css + shared.css and REWRITTEN AGAINST THE
   SEMANTIC TOKENS, which is what makes these rules theme-agnostic instead of
   paper-specific. `var(--ink)`, never `var(--ink-paper)`.

   That instruction is not stylistic — the migration alias block above is a trap
   for exactly this. Custom properties compute where they are DECLARED: `--bg`
   and `--ink-paper` are declared on `:root`, which carries no `data-theme`, so
   they resolve to the DARK values and inherit those values down. Verified in
   Chromium: on `<body data-theme="paper">`, `--canvas` is porcelain and `--bg`
   is still black. A legal page styled through the aliases renders near-white ink
   on porcelain — invisible. `test_no_theme_scoped_alias_is_consumed` is the
   guard; the aliases stay declared for the pages that have not migrated yet, and
   S5-7 deletes them.

   Nothing below adds an `animation:` or `transition:` declaration. That is a
   rule (S8-3), not a coincidence — see test_store_css.py.
   ═════════════════════════════════════════════════════════════════════════════ */

/* ---- themed page base ---------------------------------------------------- */
/* store.css:12's `body{background:var(--bg)}` cannot see the theme (above), so
   the themed body restates it against the semantic token. */
body[data-theme="paper"]{background:var(--canvas);color:var(--ink)}
body[data-theme="paper"] h1,
body[data-theme="paper"] h2,
body[data-theme="paper"] h3,
body[data-theme="paper"] h4{color:var(--ink)}

/* ---- the sticky chrome variant ------------------------------------------- */
/* OPT-IN, per the CTO ruling of 2026-08-05: the legal pages keep the sticky nav
   they have today; family B's nav stays non-sticky. A modifier makes that a
   decision on the page rather than a difference nobody can see. It restores the
   full-bleed geometry `.nav` gives up (max-width:1200px would leave the sticky
   bar's background floating in the middle of a wide screen) and pins the height
   to --nav-height, which is what S4-C6's scroll-margin-top is measured against.
   Change one and you must change the other. */
.nav--sticky{
  position:sticky;top:0;z-index:100;
  max-width:none;margin:0;
  height:var(--nav-height);
  padding:0 1.5rem;
  background:color-mix(in srgb, var(--canvas) 92%, transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
@supports not (background: color-mix(in srgb, red 50%, transparent)){
  .nav--sticky{background:var(--canvas)}
}

/* ---- themed chrome over a differently-themed body ------------------------
   `data-theme` on the nav or the footer RE-PINS the tokens for that subtree, but
   a token is not a paint: the family-A footer had no background of its own, so on
   the four paper legal pages a dark re-pin would have rendered dark tokens with
   the porcelain body showing through — invisible mentions-legales links at the
   bottom of the pages that must make them reachable. `.nav--sticky` already
   paints (it needs the bar to be opaque); the footer did not, and did not need to
   until W5b/S1-C4 converged the legal set onto the shared partial.

   Scoped to `footer[data-theme]`, so the 16 pages that carry no theme attribute
   keep the acked transparent footer and this rule cannot become a sitewide
   background change nobody asked for. */
footer[data-theme]{background:var(--canvas)}

/* ---- legal-document layout ----------------------------------------------- */
.legal-hero{padding:clamp(4.5rem,13vw,8rem) 0 2.5rem;border-bottom:1px solid var(--line)}
@media(max-width:640px){.legal-hero{padding-top:clamp(6rem,24vw,7.5rem)}}
.legal-hero .eyebrow{
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:var(--tracking-wide);
  text-transform:uppercase;color:var(--dim);display:block;margin-bottom:0.9rem;
}
.legal-hero h1{font-size:clamp(2rem,5vw,3rem);line-height:1.06}
.legal-hero .legal-dates{margin-top:1rem;color:var(--dim);font-size:0.85rem}

.legal-body{padding:2.5rem 0 4rem}
.legal-body .wrap{max-width:72ch}
.legal-body h2{font-size:1.35rem;margin-top:2.5rem;margin-bottom:0.75rem}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:1.05rem;margin-top:1.75rem;margin-bottom:0.5rem;color:var(--ink)}
.legal-body p{color:var(--ink);margin:0 0 1rem}
.legal-body ul,.legal-body ol{color:var(--ink);padding-left:1.3rem;margin:0 0 1rem}
.legal-body li{margin-bottom:0.5rem}
.legal-body li > ul,.legal-body li > ol{margin-top:0.5rem}
.legal-body strong{color:var(--ink)}
.legal-body code{
  font-family:var(--font-mono);background:var(--surface);border:1px solid var(--line);
  padding:0.1em 0.35em;border-radius:3px;font-size:0.88em;
}
.legal-body blockquote{
  margin:1.25rem 0;padding:0.9rem 1.25rem;border-left:3px solid var(--ember);
  background:var(--surface);border-radius:0 var(--radius-control) var(--radius-control) 0;
  color:var(--dim);font-size:0.92rem;
}
.legal-body th,.legal-body td{
  text-align:left;padding:0.6rem 0.8rem;border-bottom:1px solid var(--line);vertical-align:top;
}
.legal-body th{
  font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--dim);
}
/* Q2 fix, carried over verbatim in effect: legal tables must not overflow 390px. */
.legal-body table{
  display:block;width:100%;overflow-x:auto;border-collapse:collapse;
  margin:1rem 0 1.5rem;font-size:0.85rem;
}
.legal-body table td,.legal-body table th{word-break:break-word;overflow-wrap:anywhere}

.legal-toc{
  margin:0 0 2rem;padding:1rem 1.25rem;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-card);
}
.legal-toc-label{
  font-family:var(--font-mono);font-size:0.68rem;text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--dim);display:block;margin-bottom:0.6rem;
}
.legal-toc ol{columns:2;column-gap:1.5rem;margin:0;padding-left:1.1rem;font-size:0.85rem}
.legal-toc li{margin-bottom:0.35rem;break-inside:avoid}

.legal-sources{
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--line);
  font-size:0.78rem;color:var(--dim);
}
.legal-sources summary{
  cursor:pointer;font-family:var(--font-mono);font-size:0.7rem;text-transform:uppercase;
  letter-spacing:var(--tracking-wide);color:var(--dim);margin-bottom:0.75rem;
}
.legal-sources ol{padding-left:1.2rem}
.legal-sources li{margin-bottom:0.6rem}
.legal-sources a{word-break:break-all}

/* MANDATORY garantie-légale encadré — décret n° 2022-946 requires this
   information to appear "dans un encadré". The 2px border is a COMPLIANCE
   REQUIREMENT, not decoration. Do not flatten it to a hairline, do not restyle
   it to match the card treatment, do not remove it in a consolidation pass. */
.legal-encadre{
  border:2px solid var(--ink);
  border-radius:4px;padding:1rem 1.25rem;margin:1.25rem 0 1.75rem;
  background:var(--line-soft);
}
.legal-encadre p{margin:0 0 0.75rem}
.legal-encadre p:last-child{margin-bottom:0}
.legal-encadre-en{font-size:0.9em;opacity:0.85}

/* ---- S4-C6: anchors land BELOW the sticky nav, not under it --------------
   38 in-page TOC links on /terms/ alone, and every one of them put its heading
   under the 56px sticky bar. A sticky nav without a matching scroll offset is a
   navigation feature that silently does not work — the reader lands one heading
   too far down and has to scroll back up, on the site's longest documents.

   The offset is on the TARGETS, never on `.wrap` or `body`, where it does
   nothing at all while a CSS grep still passes. That is S4-C6's first named
   sabotage and it is exactly the defect that had been shipping unnoticed.

   Scoped by structure, not enumerated: `.legal-body [id]` covers every heading
   AND every footnote `<li>` on all four pages, plus the ones nobody has written
   yet. `.nav--sticky ~ main[id]` is the skip-link's target, and the sibling
   combinator keeps the offset off pages whose nav is not sticky — a 68px offset
   on a static-nav page would overshoot by exactly the nav's height.

   Anchor ids are FROZEN (digest-5 #3) and validate_obligations_consistency reads
   them: this changes where the page STOPS, never what the target is called. */
.legal-body [id],
.nav--sticky ~ main[id]{
  scroll-margin-top:calc(var(--nav-height) + 12px);
}

/* ═════════════════════════════════════════════════════════════════════════════
   NOTES (store-ux W4 / S5-5)

   The generated note pages and /notes/ join family B: same chrome (the nav and
   footer partials), same tokens, same single accent. Nothing here introduces a
   colour — every value is a var(), so S5-6's token linter and S5-8's
   remove-the-second-accent sweep have nothing to find on this surface.

   Typography deliberately mirrors `.legal-body` rather than inventing a second
   long-form reading treatment: the two are the same kind of page (one column of
   prose, code spans inline, occasional list) and the store has exactly one
   identity. `68ch` is S5-5's measure.

   No `animation:` or `transition:` is declared here. That is a rule (S8-3), not
   an accident — see test_store_css.py.
   ═════════════════════════════════════════════════════════════════════════════ */
.note{padding:clamp(3.5rem,9vw,6rem) 0 clamp(3rem,7vw,5rem)}
.note .wrap{max-width:68ch}
.note-eyebrow{
  font-family:var(--font-mono);font-size:0.72rem;
  letter-spacing:var(--tracking-wide);text-transform:uppercase;
  color:var(--dim);margin:0 0 0.9rem;
}
.note h1{font-size:clamp(1.9rem,4.6vw,2.8rem);line-height:1.1;color:var(--ink);margin:0 0 1.75rem}
.note-lede{color:var(--dim);font-size:1.05rem;margin:0 0 2rem}

.note-body{color:var(--dim)}
.note-body h2{font-size:1.35rem;color:var(--ink);margin:2.5rem 0 0.75rem}
.note-body h3{font-size:1.05rem;color:var(--ink);margin:1.75rem 0 0.5rem}
.note-body h2:first-child,.note-body h3:first-child{margin-top:0}
.note-body p{margin:0 0 1.15rem}
.note-body ul,.note-body ol{padding-left:1.3rem;margin:0 0 1.15rem}
.note-body li{margin-bottom:0.5rem}
.note-body strong{color:var(--ink)}
.note-body em{color:var(--ink)}
.note-body a{color:var(--ember)}
.note-body code{
  font-family:var(--font-mono);background:var(--surface);border:1px solid var(--line);
  padding:0.1em 0.35em;border-radius:3px;font-size:0.86em;color:var(--ink);
  overflow-wrap:anywhere;
}
.note-body pre{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-card);
  padding:1rem 1.15rem;overflow-x:auto;margin:0 0 1.15rem;
}
.note-body pre code{background:none;border:0;padding:0}
.note-body blockquote{
  margin:1.25rem 0;padding:0.9rem 1.25rem;border-left:3px solid var(--ember);
  background:var(--surface);border-radius:0 var(--radius-control) var(--radius-control) 0;
  color:var(--dim);
}
.note-body hr{border:0;border-top:1px solid var(--line);margin:2rem 0}

.note-cta{margin:2.5rem 0 0;padding-top:1.75rem;border-top:1px solid var(--line)}
.note-cta a{color:var(--ember);font-weight:650}

.note-list{list-style:none;padding:0;margin:0;display:grid;gap:0.9rem}
.note-list li{margin:0}
.note-list a{
  display:block;padding:0.95rem 1.15rem;color:var(--ink);text-decoration:none;
  font-size:1.02rem;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius-card);
}
.note-list a:hover{color:var(--ember)}
.note-empty{color:var(--dim)}

/* ── Landing-page (family C) layout — shared by /lp/sw67/ and /lp/sw67/de/ ──
   Token-only by design: the EN landing's inline <style> predates this block and
   wins for that page (inline > external at equal specificity); the DE variant
   links only store.css, so its styles live HERE, never in a second inline block
   the token linter would count. */
.lp-wrap{max-width:46rem;margin:0 auto;padding:3rem 1.25rem 4rem}
.lp-kicker{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;color:var(--dim)}
.lp-h1{font-size:clamp(1.6rem,4vw,2.4rem);line-height:1.15;margin:.5rem 0 1rem;color:var(--ink)}
.lp-sub{font-size:1.05rem;opacity:.85;color:var(--dim);margin-bottom:2rem}
.lp-proof{background:var(--surface);color:var(--ink);border-radius:var(--radius-control);padding:1rem 1.25rem;overflow-x:auto;font-family:var(--font-mono);font-size:.78rem;line-height:1.5;white-space:pre}
.lp-proof .ok{color:var(--pass)}.lp-proof .xx{color:var(--breach)}.lp-proof .uk{color:var(--dim)}
.lp-form{margin:2.5rem 0 1rem;display:flex;gap:.6rem;flex-wrap:wrap}
.lp-form input[type=email]{flex:1 1 16rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:var(--radius-control);font-size:1rem;background:transparent;color:var(--ink)}
.lp-form button{padding:.7rem 1.2rem;border-radius:var(--radius-control);border:none;background:var(--ember);color:var(--on-ember);font-weight:600;font-size:1rem;cursor:pointer}
.lp-fine{font-size:.8rem;opacity:.65;color:var(--dim)}
.lp-section{margin-top:2.5rem}
.lp-section h2{font-size:1.15rem;margin-bottom:.6rem;color:var(--ink)}
.lp-section p, .lp-section li{font-size:.97rem;line-height:1.55;color:var(--ink)}
.hp-field{position:absolute;left:-9999px;height:1px;width:1px;overflow:hidden}
.lp-fine-top{margin-top:.6rem}
.lp-lang{margin-top:2rem;font-size:.85rem;opacity:.65;color:var(--dim)}
.lp-lang a{color:var(--dim);text-decoration:underline}

/* ---- PDP page chrome (storebrand-0824, moved out of a per-page <style> ----
   block in storefront/pdp/template.py; see PDP_STYLE's old comment there and
   storefront/pdp/test_pdp.py's DECLARED_TOKENIZATION_2026_08_24). Every PDP
   page loads this sheet already via the head-css partial, so a page-local
   <style> tag was pure duplication -- and, for any product with no prior
   token-lint baseline entry, brand-new debt for reusing a shared template.
   Selectors/values are byte-identical to the old PDP_STYLE except the five
   oklch() literals, now var(--pdp-*) tokens declared above.
   RESTORED 2026-09-04 (PDP-CHROME.md): this whole block (c7d58f44fa,
   2026-08-24) lived only on a sibling branch that never merged into the line
   that shipped -- HEAD never carried it, so `/tools/<slug>/` pages rendered
   with no page-scoped layout at all. `.nav .btn{display:none}` below is the
   LATER, scoped fix (62a52689ac) — the unscoped original hid the nav CTA on
   25 of 40 pages — not the byte-for-byte c7d58f44fa version. ---- */
.subnav{position:sticky;top:0;background:var(--canvas);border-bottom:1px solid var(--line);z-index:5}
.subnav .in{display:flex;align-items:center;gap:24px;padding:13px clamp(20px,4vw,40px);max-width:1200px;margin:0 auto;font-size:14.5px;overflow-x:auto}
.subnav .pn{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;white-space:nowrap}
.subnav .pn .ic{width:24px;height:24px}
.subnav a{color:var(--dim);text-decoration:none;white-space:nowrap}
.subnav a:hover{color:var(--ink)}
.subnav .btn{margin-left:auto;padding:9px 18px;font-size:14px;border-radius:8px;color:var(--on-ember)}
.phero{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(28px,5vw,56px);padding:clamp(40px,7vw,72px) 0 8px;align-items:start}
.phero .icon{width:60px;height:60px;margin-bottom:20px}
.phero h1{font-size:clamp(2.2rem,4vw,3rem);font-weight:760;line-height:1.05}
.phero .tag{color:var(--dim);font-size:1.12rem;margin-top:14px;line-height:1.62;max-width:40ch}
.phero .facts{color:var(--dim);font-size:.95rem;margin-top:16px}
.pilotbox{background:linear-gradient(180deg,var(--surface),var(--pdp-pilot-shade));border:1px solid var(--line);border-radius:16px;padding:26px}
.pilotbox .st{display:inline-block;background:var(--pdp-badge-tint);color:var(--ember);font-size:12.5px;font-weight:680;border-radius:99px;padding:6px 14px;margin-bottom:14px}
.pilotbox .btn{display:block;text-align:center;margin:4px 0 10px}
.pilotbox .btn-ghost{display:block;text-align:center;margin-bottom:14px}
.pilotbox ul{list-style:none;font-size:14px;color:var(--dim);line-height:1.6}
.pilotbox li{padding:6px 0 6px 24px;position:relative}
.pilotbox li:before{content:'✓';position:absolute;left:0;color:var(--ember);font-weight:700}
.pilotbox .price{display:block;font-family:var(--font-mono);font-size:1.6rem;font-weight:700;color:var(--ember);margin-bottom:14px}
.sec{margin-top:clamp(44px,6vw,64px)}
.sec h2{font-size:1.55rem;font-weight:730;margin-bottom:12px}
.sec>p{color:var(--dim);max-width:66ch;line-height:1.68}
.sec p b{color:var(--ink);font-weight:650}
.repwrap{margin-top:26px;max-width:860px}
.steps{counter-reset:s;margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{border-top:2px solid var(--pdp-step-line);padding-top:16px}
.step:before{counter-increment:s;content:counter(s);display:block;font-weight:760;color:var(--ember);font-size:1.1rem;margin-bottom:6px}
.step b{display:block;color:var(--ink);font-weight:650;margin-bottom:5px}
.step span{color:var(--dim);font-size:14.5px;line-height:1.6}
.tech{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:1px solid var(--line)}
.trow2{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:15px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.trow2 dt{color:var(--dim)}
.trow2 dd{color:var(--ink);line-height:1.55}
.faq{margin-top:22px;border-top:1px solid var(--line);max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{padding:18px 0;font-size:1.02rem;font-weight:650;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::after{content:'+';color:var(--dim);font-weight:400}
.faq details[open] summary::after{content:'–'}
.faq details p{color:var(--dim);font-size:14.5px;line-height:1.65;max-width:70ch;padding:0 0 18px}
.ctaband{margin-top:clamp(44px,6vw,64px);background:linear-gradient(180deg,var(--pdp-cta-grad-1),var(--pdp-cta-grad-2));border:1px solid var(--pdp-cta-border);border-radius:16px;padding:32px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ctaband b{font-size:1.15rem;font-weight:700}
.ctaband p{color:var(--dim);font-size:14.5px;margin-top:4px}
@media(max-width:860px){.phero{grid-template-columns:1fr}.steps{grid-template-columns:1fr}.tech{grid-template-columns:1fr}}
@media(min-width:861px){body:has(.subnav) .nav .btn{display:none}}  /* PDP-only: this rule lived in the page-local PDP_STYLE; unscoped in the shared sheet it hid the nav CTA on 25 of 40 pages (merge-audit blocker) */
@media(max-width:860px){.subnav .btn{display:none}}
/* SD-02, recurred. The section links were an overflow-x scroller with no scroll
   affordance: at 360px `FAQ` began 71px past the right edge, and the page-level
   horizontal_overflow check read clean because the scroll was contained. Below
   700px (S5-4's canonical ladder — 640/700/1024, do not invent a breakpoint)
   they wrap onto a second row instead. Costs ~22px of sticky height on phones.
   `white-space` has to relax on the links too: leaving nowrap on `.subnav a`
   re-overflows on the next long label or the next locale, with `.in` looking
   fixed. The product name keeps nowrap deliberately — it is one word.
   NOT an edge-fade affordance: DEFECT-REGISTER:69 records that the STRONGER fix
   shipped when SD-02 was first closed, and re-introducing the weaker option
   would relitigate a closed defect downward. */
@media(max-width:700px){
  .subnav .in{flex-wrap:wrap;overflow-x:visible;row-gap:8px}
  .subnav a{white-space:normal}
}

/* .notify: a PDP's own waitlist capture (storefront/pdp/template.py::notify_block,
   camp-pre-start falsification probe, 2026-08-25). Byte-identical selectors to
   storefront/shelf/render.py's page-local NOTIFY_STYLE (`.hp-field` is already
   above, global, since storebrand-0824) -- kept here instead of a second
   page-local <style> block so a PDP (which carries no per-page <style> of its
   own post-storebrand-0824) gets working styles through the one sheet it
   already loads. The shelf's own inline copy is untouched and still renders
   fine doubled up; identical rules are idempotent, never a conflict. Tokens
   only, no colour literal -- same discipline test_the_notify_styles_contain_no_colour_literal
   already holds the shelf copy to. RESTORED 2026-09-04 with the rest of the
   PDP chrome block above (PDP-CHROME.md) -- same never-merged branch. */
.notify{margin-top:22px}
.notify>p{color:var(--dim);font-size:14.5px;margin-bottom:12px}
.notify form{display:flex;gap:.6rem;flex-wrap:wrap}
.notify input[type=email]{flex:1 1 16rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:6px;font-size:1rem;background:transparent;color:var(--ink)}
.notify button{padding:.7rem 1.2rem;border-radius:6px;border:none;background:var(--ember);color:var(--on-ember);font-weight:600;font-size:1rem;cursor:pointer}
.notify .fine{font-size:.8rem;color:var(--dim);margin-top:10px}

/* ── shelf compact cards (STORE-ONBOARD, compact-shelf ruling 16:15 2026-09-03)
   /tools/ shows only status:live rows now, as compact cards in a responsive
   grid — 2-3 per row desktop, 1 per row mobile. Replaces the old .ftile/
   .idrow/.stat/.golink rules storefront/shelf/render.py's SHELF_STYLE used to
   carry inline (that block was the acked page's own bytes; this grid is not,
   so it lives here, per that ruling's own "no new stylesheet" instruction).
   Tokens only, same rule as the rest of this sheet. */
.shelf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:20px;margin-top:8px}
@media(min-width:720px){.shelf-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.shelf-grid{grid-template-columns:repeat(3,1fr)}}
.stile{display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;text-decoration:none;color:inherit}
.stile:hover{border-color:oklch(1 0 0/.2)}
.stile .ic{width:36px;height:36px}
.stile h3{font-size:1.15rem;font-weight:720;line-height:1.15}
.stile .dline{color:var(--dim);font-size:.92rem;line-height:1.5}
.stile .srow{margin-top:auto;padding-top:6px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.badge{display:inline-block;background:oklch(0.78 0.148 70/.14);color:var(--ember);font-size:12.5px;font-weight:650;border-radius:99px;padding:6px 14px}
.stile .golink{color:var(--ink);font-weight:650;font-size:14px}

/* ── home landing "living horizon" (founder-picked mock A, docs/ops/mocks/
   landing-v3a.html, 2026-09-03) ────────────────────────────────────────────
   Lives HERE, not in an inline <style> on site/index.html, because
   `test_family_a_repoint::test_store_has_one_stylesheet` is the rule that the
   store has exactly one sheet, and a landing that carries its own block is the
   first step back to the tokens.css/light.css/shared.css split S5-7 retired.
   Tokens only — every colour below is a var() or a straight conversion of one
   the shader also uses (site/assets/horizon.js documents that conversion). */
.hero{position:relative;height:clamp(420px,68vh,560px);max-height:560px;overflow:hidden;background:var(--bg)}
.horizon{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0}
/* Fades the shader's lower band into --bg BEFORE the canvas box ends, so the
   box's own edge — the one .shelf-section's negative margin overlaps — lands on
   a colour that already matches the page ground. Without it the hero/shelf
   boundary shows as a hard rectangle seam through the cards' gaps. */
.hero-fade{position:absolute;left:0;right:0;bottom:0;height:40%;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,transparent 26%,var(--bg) 100%)}
.hero-content{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 clamp(20px,4vw,40px)}
.hero-copy{max-width:1120px;margin:0 auto}
.kicker{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);display:block;margin-bottom:14px}
/* Solid fallback background behind the h1 block: keeps the headline readable
   even if the canvas paints white/garbage instead of the aurora (near-black,
   matching --bg, so it's near-invisible when the shader renders correctly). */
.hero h1{font-size:clamp(2.4rem,5.4vw,3.7rem);font-weight:760;line-height:1.06;max-width:16ch;margin:0 auto;color:var(--ink);text-shadow:0 2px 28px oklch(0 0 0/.55);background:oklch(.16 .008 260/.72);padding:.12em .35em;border-radius:10px;box-sizing:border-box}
.hero .sub{color:var(--dim);font-size:clamp(1rem,1.35vw,1.13rem);margin:20px auto 30px;max-width:46ch;line-height:1.6;text-shadow:0 1px 14px oklch(0 0 0/.5)}
.ctarow{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero .btn{padding:14px 30px;font-size:16px}
/* Scroll cue, in normal flow directly under the button — absolute hero-bottom
   positioning put it under the shelf's negative margin, where nothing saw it.
   `margin:0 auto` on the svg is load-bearing: text-align:center does not centre
   a display:block child. */
.scrollcue{margin:22px auto 0;opacity:.6;color:var(--ink)}
.scrollcue svg{display:block;width:20px;height:20px;margin:0 auto}
@media(prefers-reduced-motion:no-preference){
  .scrollcue{animation:cuebob 2.4s ease-in-out infinite}
  @keyframes cuebob{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
}
/* The shelf strip is pulled UP over the hero's bottom edge so the cards visibly
   sit on the horizon glow. The hero must never cover them: horizon.js pins the
   dome apex ~40px under the CTA, measured from the button's own rect. */
.shelf-section{position:relative;z-index:4;margin-top:clamp(-100px,-8vw,-80px)}
.shelf-head{margin:0 auto;max-width:1120px;padding:0 clamp(20px,4vw,40px)}
.shelf-head h2{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);font-weight:400;background:var(--bg);display:inline-block;padding:2px 4px}
.shelf2{display:grid;grid-template-columns:1fr;gap:18px;margin:16px auto 0;max-width:1120px;padding:0 clamp(20px,4vw,40px)}
@media(min-width:640px){.shelf2{grid-template-columns:1fr 1fr}}
.shelf2 .stile{box-shadow:0 18px 44px oklch(0 0 0/.38)}
/* Quiet in-preparation line + the compact notify capture. Same /api/waitlist
   rail, same honeypot and the SAME mandatory privacy link the shelf's form
   carries — a form collecting an email without one is a compliance defect, not
   a styling choice (storefront/shelf/render.py::render_notify). */
.quiet{margin:clamp(48px,7vw,72px) auto 0;border-top:1px solid var(--line);padding:28px clamp(20px,4vw,40px) 0;max-width:1120px;text-align:center}
.quiet p{color:var(--dim);font-size:.94rem}
.quiet-form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:16px auto 0;max-width:420px}
.quiet-form input[type=email]{flex:1 1 200px;min-width:0;padding:.55rem .75rem;border:1px solid var(--line);border-radius:8px;font-size:.9rem;background:transparent;color:var(--ink)}
.quiet-form button{padding:.55rem 1rem;border-radius:8px;background:var(--surface);color:var(--ink);border:1px solid var(--line);font-weight:600;font-size:.85rem;cursor:pointer}
.quiet-form button:hover{border-color:oklch(1 0 0/.25)}
.quiet-fine{font-size:.8rem;margin-top:10px}
@media(max-width:820px){
  .hero{height:clamp(380px,68vh,480px);max-height:480px}
  .shelf-section{margin-top:clamp(-72px,-14vw,-56px)}
}

/* Print: the WebGL/2D "living horizon" canvas is a live surface sized off
   `vh` and off the CTA's real getBoundingClientRect() (horizon.js) — neither
   is meaningful in paginated print layout, and a real (non-headless) Chromium
   is known to hand back a cleared/blank drawing buffer to the print
   compositor when a canvas isn't `preserveDrawingBuffer`. Printing must not
   depend on that surface at all: drop it, pin the hero to the same fixed
   px height its min-height already uses on screen, and paint the plain
   token background instead so the hero never grows past one page's worth
   of content and its text stays legible ink-on-token-background. */
@media print{
  .horizon,.hero-fade{display:none}
  .hero{height:420px;min-height:0;background:var(--bg)}
}

/* ── sw67 hosted check (JOB-URL, 2026-09-06) ───────────────────────────────
   The paste-a-lock form (`site/_partials/sw67-check.html`) now renders on the
   canonical job URL as well as on the campaign landing page. Its rules used to
   live in the check page's own <style> block, which is exactly the per-page
   debt tools/store/token_lint.py ratchets down; they move here so both host
   pages get the same form from one sheet, and no page-scoped block is added to
   the PDP to carry them. Colours are the existing tokens — no new literal. */
.lp-check textarea{width:100%;min-height:16rem;padding:.8rem .9rem;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;font-family:ui-monospace,monospace;font-size:.8rem;line-height:1.4}
.lp-check .row{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center;margin-top:1rem}
.lp-check select{padding:.65rem .8rem;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;font-size:1rem}
.lp-check button{padding:.7rem 1.4rem;border-radius:6px;border:none;background:var(--ember);color:var(--on-ember);font-weight:600;font-size:1rem;cursor:pointer}
/* `.lp-fine` and `.hp-field` are NOT redefined here: both already exist in the
   `.lp-*` block above, and a second copy further down the sheet would silently
   win — the earlier `.lp-fine` carries `color:var(--dim)` and a duplicate that
   dropped it would have recoloured the fine print on every landing page as a
   side effect of moving a form. Only the check form's own spacing is added, and
   it is SCOPED to the form so it cannot reach anything else. */
.lp-check .lp-fine{margin-top:.8rem}
.lp-ghost{padding:.65rem 1rem;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;font-size:.9rem;cursor:pointer;opacity:.8}
.lp-ghost:hover{opacity:1}
.lp-sample-hint{font-size:.8rem;opacity:.75;margin:.4rem 0 .6rem}
/* The check block as the PDP's FIRST screen: same width and rhythm as the
   product sections it sits above, so the tool reads as the page rather than as
   a widget bolted onto a sales page. */
.checkblock{max-width:760px;margin:0 auto;padding:clamp(24px,4vw,40px) 0 0}
.checkblock h2{font-size:clamp(1.3rem,3vw,1.75rem);margin:0 0 .4rem}
.checkblock .checklede{color:var(--dim);margin:0 0 1.1rem;font-size:1.02rem;line-height:1.5}

/* ── /checker-down/ — the loud death (JOB-URL, 2026-09-06) ─────────────────
   Classes rather than `style="..."` attributes: tools/store/token_lint.py's
   inline_style ratchet is shrink-only and a new page starts at a baseline of
   zero, so the page that exists to make a failure visible must not itself add
   one. No colour literal here — every value is a token or an existing rule. */
.downpage{max-width:40rem;margin:0 auto;padding:clamp(48px,8vw,84px) 0 clamp(40px,6vw,64px);text-align:center}
.downpage h1{font-size:clamp(1.8rem,4vw,2.6rem);color:var(--ink)}
.downpage p{color:var(--dim);margin-top:14px;line-height:1.65}
.downpage-cta{margin-top:22px}
.downpage-fine{font-size:.92rem;margin-top:26px}