/* =============================================================================
   HUEMARK — Platform Color Lab
   Palette: "Electric Zen Harmony"  ·  Mood: energetic + calm  ·  Light theme

   HOW THIS FILE IS ORGANISED
   1. Design tokens (:root) — every colour on the page is a variable defined here.
   2. Base / typography / layout helpers
   3. Components (buttons, links, inputs, badges, cards …) with ALL states
   4. Page sections (header, hero, principles, picker, CTA, footer)

   60 – 30 – 10 BALANCE
   · 60 % NEUTRAL  → --bg, --surface            (page, cards, picker panel)
   · 30 % BRAND    → --primary, --secondary     (header, buttons, dark band, footer)
   · 10 % ENERGY   → --accent, --highlight      (ONE accent button + tiny highlights,
                                                 pale-teal CTA backdrop & pills)

   STATE SYSTEM (identical everywhere)
   · Hover    → fill is ~8 % darker (each --*-hover token = colour mixed with 8 % black)
   · Focus    → 2px solid --primary outline, 2px offset, plus a 2px --secondary inner
                ring so the indicator still reaches 3:1 on light surfaces
                (Primary alone is only 1.55:1 against --bg — see "Contrast notes")
   · Disabled → opacity 0.4, no hover, not-allowed cursor
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
   ============================================================================= */
:root {
  color-scheme: light;

  /* ---- 1a. The given palette (single source of truth) --------------------- */
  --primary:    #A4DF3B;  /* Yellow-green. Header, primary buttons, links on dark, active states. */
  --secondary:  #2B2D42;  /* Muted deep blue. Dark band, footer, secondary buttons, outlines.     */
  --accent:     #F4A251;  /* Vivid orange. ONE call-to-action + tiny highlights. Never body text. */
  --highlight:  #E0F2E9;  /* Pale teal. Pills, verdict box, CTA backdrop.                          */
  --bg:         #FBFCFA;  /* Page background.                                                      */
  --surface:    #F1F3EC;  /* Cards and panels.                                                     */
  --text:       #222914;  /* Body text.                                                            */
  --muted:      #69725A;  /* Secondary text. Only on --bg / --surface (see contrast notes).       */

  /* ---- 1b. Derived shades & tints (same hues, only lightness changes) ------ */
  /* Hover tokens = base colour mixed with 8 % black ("darken ~8 %"). */
  --primary-hover:    #97CD36;
  --secondary-hover:  #28293D;
  --accent-hover:     #E0954B;
  --surface-hover:    #DEE0D9;
  --highlight-hover:  #CEDFD6;

  /* Primary as TEXT on light backgrounds.
     #A4DF3B is only 1.55:1 on --bg, so links use a deep shade of the same hue:
     Primary mixed 60 % toward --text → #567224 (5.33:1 on --bg, 4.90 on --surface,
     4.71 on --highlight). Its hover is again ~8 % darker. */
  --primary-deep:        #567224;
  --primary-deep-hover:  #4F6921;

  /* Mid/deep stops used as picker swatches (candidates to test, not UI chrome). */
  --accent-deep:    #8B6633;  /* Accent mixed 50 % toward --text   */
  --secondary-soft: #93959E;  /* Secondary mixed 50 % toward --bg  */

  --primary-tint:  #EEF8DD;  /* Very light Primary wash (decorative fills only).      */
  --line:          #DDDEDA;  /* Decorative hairlines. Not used for form-control edges. */

  /* Dark-band helpers (text/lines on --secondary) */
  --secondary-raised: #36394C;  /* Card on the dark band (Secondary + 6 % Highlight).   */
  --secondary-line:   #4F5463;  /* Hairline on the dark band.                           */
  --on-secondary-muted: #BCCBC8;/* Softer text on dark (Highlight 80 % → Secondary).    */

  /* Label colours for filled buttons: whichever of these has the better contrast.
     Near-black = --text. White is only ever used on --secondary fills. */
  --white: #FFFFFF;

  /* ---- 1c. Semantic roles -------------------------------------------------- */
  --link:        var(--primary-deep);
  --link-hover:  var(--primary-deep-hover);
  --control-edge: var(--muted);      /* 4.91:1 on --bg, 4.51:1 on --surface → passes the 3:1 UI rule */
  --disabled-opacity: 0.4;

  /* ---- 1d. Type, space, shape ---------------------------------------------- */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 24px;
  --container: 1120px;
  --gutter: clamp(1rem, 4vw, 2rem);
  --header-h: 4.5rem;
}


/* =============================================================================
   2. BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--header-h);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);          /* 14.62:1 on --bg */
  background: var(--bg);
}

h1, h2, h3, p, ul, ol, dl, figure { margin: 0; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(2.1rem, 5.5vw + 0.5rem, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.65rem, 3vw + 0.5rem, 2.5rem);  font-weight: 800; }
h3 { font-size: 1.25rem; font-weight: 700; }
p  { text-wrap: pretty; }

img, svg { display: block; max-width: 100%; }

[hidden] { display: none !important; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Skip link — hidden until focused */
.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  padding: .75rem 1rem;
  background: var(--secondary); color: var(--white);   /* 13.48:1 */
  border-radius: var(--radius-sm); font-weight: 700; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

.section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.section__head { max-width: 46rem; display: grid; gap: .75rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.section__lead { font-size: 1.125rem; color: var(--muted); }   /* 4.91:1 on --bg */


/* =============================================================================
   3. COMPONENTS
   ============================================================================= */

/* ---- 3a. Focus (global, same everywhere) ---------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  /* Inner ring: gives the Primary outline a dark neighbour so the whole indicator is
     ≥3:1 against light surfaces (Secondary vs --bg = 13.10:1) and against the
     Primary header (Secondary vs Primary = 8.47:1). On dark areas the Primary
     outline itself is 8.47:1 against --secondary. */
  box-shadow: 0 0 0 2px var(--secondary);
}

/* ---- 3b. Links ------------------------------------------------------------ */
a { color: var(--link); text-underline-offset: .2em; text-decoration-thickness: 2px; }
a:hover { color: var(--link-hover); }

/* ---- 3c. Buttons ----------------------------------------------------------
   Label colours (verified in contrast-audit.mjs):
   · Primary   fill + --text  label →  9.45:1   (white would be only 1.59:1)
   · Secondary fill + white   label → 13.48:1
   · Accent    fill + --text  label →  ≥7:1     (white would be only 2.07:1)
   · Ghost     --surface fill + --secondary label → 12.05:1
   Hover = fill ~8 % darker. Disabled = 40 % opacity.                         */
.btn {
  --btn-bg: var(--primary);
  --btn-bg-hover: var(--primary-hover);
  --btn-fg: var(--text);
  --btn-edge: transparent;

  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: .65rem 1.4rem;
  font: inherit; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 2px solid var(--btn-edge);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}
.btn:hover:not(:disabled):not([aria-disabled="true"]) {
  background: var(--btn-bg-hover);
  color: var(--btn-fg);
}
.btn:active:not(:disabled):not([aria-disabled="true"]) { transform: translateY(1px); }

.btn--primary   { /* defaults above */ }
.btn--secondary { --btn-bg: var(--secondary); --btn-bg-hover: var(--secondary-hover); --btn-fg: var(--white); }
.btn--ghost     { --btn-bg: var(--surface);   --btn-bg-hover: var(--surface-hover);   --btn-fg: var(--secondary); --btn-edge: var(--secondary); }
.btn--accent    { --btn-bg: var(--accent);    --btn-bg-hover: var(--accent-hover);    --btn-fg: var(--text); }  /* the ONE call to action */
.btn--sm        { min-height: 2.4rem; padding: .4rem 1rem; font-size: .95rem; }
.btn--lg        { min-height: 3.3rem; padding: .8rem 1.8rem; font-size: 1.1rem; }

/* ---- 3d. Disabled (all controls) ------------------------------------------ */
:disabled,
[aria-disabled="true"] {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

/* ---- 3e. Pills & badges ---------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem; width: fit-content;
  padding: .35rem .85rem;
  background: var(--highlight); color: var(--text);       /* 13.0:1 */
  border-radius: 999px; font-size: .9rem; font-weight: 700;
}
.eyebrow::before {                       /* tiny Accent highlight (decorative) */
  content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--accent);
}

.badge {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  padding: .2rem .7rem; border-radius: 999px;
  font-size: .875rem; font-weight: 800; line-height: 1.4;
  border: 2px solid var(--secondary);
}
.badge[data-state="pass"] { background: var(--highlight); color: var(--text); }       /* 13.0:1 */
.badge[data-state="fail"] { background: var(--secondary); color: var(--white); }      /* 13.48:1 */
/* Pass/fail is never colour-only: each badge also carries ✓ / ✕ and the word. */

/* ---- 3f. Form controls ------------------------------------------------------ */
.field { display: grid; gap: .4rem; }
.field > label, .field > .label, legend {
  font-weight: 700; font-size: 1rem; color: var(--text);
}
.help  { font-size: .875rem; color: var(--muted); }   /* 4.51:1 on --surface (AA) */
.error { font-size: .9rem; font-weight: 700; color: var(--text); }

input[type="text"],
input[type="email"] {
  width: 100%; min-height: 2.9rem; padding: .55rem .9rem;
  font: inherit; color: var(--text); background: var(--bg);
  border: 2px solid var(--control-edge);          /* ≥4.5:1 → passes 3:1 non-text rule */
  border-radius: var(--radius-sm);
}
input[type="text"]:hover:not(:disabled),
input[type="email"]:hover:not(:disabled) { border-color: var(--text); }
input::placeholder { color: var(--muted); opacity: 1; }
input[aria-invalid="true"] {
  border-style: dashed; border-color: var(--secondary); background: var(--highlight);
}

.input-group { display: flex; align-items: stretch; }
.input-group__prefix {
  display: grid; place-items: center; padding-inline: .9rem;
  font-weight: 800; color: var(--text); background: var(--surface-hover);
  border: 2px solid var(--control-edge); border-right: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.input-group input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; text-transform: uppercase; letter-spacing: .06em; font-variant-numeric: tabular-nums; }

/* Range slider — thumb = Primary (active state) with a Secondary edge */
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 2rem; margin: 0; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: .5rem; border-radius: 999px; background: var(--surface-hover); border: 1px solid var(--control-edge);
}
input[type="range"]::-moz-range-track {
  height: .5rem; border-radius: 999px; background: var(--surface-hover); border: 1px solid var(--control-edge);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -.6rem;
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--primary); border: 3px solid var(--secondary);
}
input[type="range"]::-moz-range-thumb {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  background: var(--primary); border: 3px solid var(--secondary);
}
input[type="range"]:hover:not(:disabled)::-webkit-slider-thumb { background: var(--primary-hover); }
input[type="range"]:hover:not(:disabled)::-moz-range-thumb     { background: var(--primary-hover); }

.range-scale { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--muted); }
output { font-weight: 800; font-variant-numeric: tabular-nums; }


/* =============================================================================
   4. SECTIONS
   ============================================================================= */

/* ---- 4a. Header (Primary) -------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--primary);                 /* header = Primary */
  color: var(--text);                         /* 9.45:1 on Primary */
  border-bottom: 2px solid var(--secondary);
}
.site-header__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem;
  min-height: var(--header-h); padding-block: .6rem;
}
.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: 1.3rem; font-weight: 800; letter-spacing: -0.02em;
  color: var(--text); text-decoration: none;
}
.brand:hover { color: var(--text); }
.brand .logo-mark { --mark-bg: var(--secondary); --mark-fg: var(--primary); width: 2.25rem; height: 2.25rem; }

.nav { order: 3; width: 100%; display: flex; gap: .25rem; margin-inline: -.35rem; }
.nav a {
  padding: .4rem .9rem; border-radius: 999px;
  color: var(--text); font-weight: 700; text-decoration: none;
}
.nav a:hover { background: var(--primary-hover); color: var(--text); }          /* text on #97CD36 ≥ 8:1 */
/* ACTIVE state = Secondary pill with Primary text (8.47:1) */
.nav a[aria-current] { background: var(--secondary); color: var(--primary); }
.nav a[aria-current]:hover { background: var(--secondary-hover); color: var(--primary); }

.site-header__cta { margin-left: auto; order: 2; }

@media (min-width: 760px) {
  .nav { order: 2; width: auto; margin-left: auto; margin-inline-end: 0; }
  .site-header__cta { order: 3; margin-left: 0; }
}

/* ---- 4b. Logo mark (SVG symbol, colours supplied by custom properties) ----- */
.logo-mark { flex: none; }

/* ---- 4c. Hero (Neutral) ---------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 7vw, 5.5rem); }
.hero__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.1fr .9fr; } }

.hero__copy { display: grid; gap: 1.25rem; justify-items: start; }
.hero__copy p { font-size: 1.2rem; max-width: 36rem; }
.underline-accent {                              /* decorative Accent underline; text stays --text */
  background: linear-gradient(transparent 72%, var(--accent) 72% 92%, transparent 92%);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; padding-top: .5rem; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1rem; width: 100%; padding-top: 1rem; }
.stat { display: grid; gap: .15rem; padding-top: .75rem; border-top: 4px solid var(--accent); }   /* small Accent highlight */
.stat__num { font-size: 1.9rem; font-weight: 800; color: var(--secondary); line-height: 1.1; }
.stat__label { font-size: .9rem; color: var(--muted); }                                          /* 4.91:1 on --bg */

/* Brand board card */
.board {
  display: grid; gap: 1.25rem; padding: 1.25rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.board__lockup {
  display: flex; align-items: center; gap: 1rem; padding: 1.25rem;
  background: var(--secondary); border-radius: var(--radius);
}
.board__lockup .logo-mark { --mark-bg: var(--primary); --mark-fg: var(--secondary); width: 3.5rem; height: 3.5rem; }
.board__name { font-size: 1.5rem; font-weight: 800; color: var(--white); line-height: 1.1; }          /* 13.48:1 */
.board__tag  { font-size: .9rem; color: var(--on-secondary-muted); }                                   /* 8.04:1 */

.ratio-bar {
  display: flex; height: 1.5rem; overflow: hidden;
  border: 2px solid var(--secondary); border-radius: 999px;
}
.ratio-bar > span { display: block; border-right: 1px solid var(--line); }
.ratio-bar > span:last-child { border-right: 0; }
.rb-bg        { flex: 36; background: var(--bg); }
.rb-surface   { flex: 24; background: var(--surface); }
.rb-primary   { flex: 18; background: var(--primary); }
.rb-secondary { flex: 12; background: var(--secondary); }
.rb-accent    { flex: 6;  background: var(--accent); }
.rb-highlight { flex: 4;  background: var(--highlight); }

.legend { list-style: none; padding: 0; display: grid; gap: .6rem; }
.legend li { display: grid; grid-template-columns: 3.4rem 1fr; gap: .75rem; align-items: baseline; }
.legend strong { font-size: 1.15rem; color: var(--secondary); }
.legend span   { font-size: .95rem; }

/* ---- 4d. Principles (Secondary band = the 30 %) ---------------------------- */
.band { background: var(--secondary); color: var(--white); }
.band h2 { color: var(--white); }
.band .section__lead { color: var(--on-secondary-muted); }       /* 8.04:1 on --secondary */

.cards { display: grid; gap: 1.25rem; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  display: grid; gap: .75rem; align-content: start; padding: 1.5rem;
  background: var(--secondary-raised); border: 1px solid var(--secondary-line); border-radius: var(--radius);
}
.card h3 { color: var(--white); }
.card p  { color: var(--on-secondary-muted); }                   /* ≥6.5:1 on --secondary-raised */
.card__num {
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--primary); color: var(--text); font-weight: 800;   /* 9.45:1 */
}

/* ---- 4e. Picker ------------------------------------------------------------ */
.picker { display: grid; gap: 1.5rem; }
@media (min-width: 960px) { .picker { grid-template-columns: 5fr 7fr; align-items: start; } }

.panel {
  display: grid; gap: 1.5rem; padding: clamp(1rem, 3vw, 1.75rem);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
}
.panel__title { font-size: 1.15rem; }

fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
legend { padding: 0; margin-bottom: .75rem; }

.swatch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr)); gap: 1.1rem .9rem; }
.swatch { position: relative; }
.swatch input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.swatch label { display: grid; gap: .15rem; cursor: pointer; }
.swatch__chip {
  position: relative; height: 3.4rem; border-radius: var(--radius-sm);
  background: var(--swatch);
  border: 2px solid var(--control-edge);           /* keeps pale swatches (Highlight) visible */
}
.swatch__name { font-size: .9rem; font-weight: 700; line-height: 1.25; }
.swatch__hex  { font-size: .8125rem; color: var(--muted); font-variant-numeric: tabular-nums; }   /* 4.51:1 on --surface */

.swatch--primary         { --swatch: var(--primary); }
.swatch--primary-deep    { --swatch: var(--primary-deep); }
.swatch--secondary       { --swatch: var(--secondary); }
.swatch--muted           { --swatch: var(--muted); }
.swatch--accent          { --swatch: var(--accent); }
.swatch--highlight       { --swatch: var(--highlight); }
.swatch--secondary-soft  { --swatch: var(--secondary-soft); }
.swatch--accent-deep     { --swatch: var(--accent-deep); }

.swatch:hover input:not(:disabled) + label .swatch__chip { filter: brightness(.92); }   /* ~8 % darker */

/* Selected (active) state: Primary + Secondary double ring AND a check badge */
.swatch input:checked + label .swatch__chip {
  box-shadow: 0 0 0 3px var(--primary), 0 0 0 5px var(--secondary);
}
.swatch input:checked + label .swatch__chip::after {
  content: "✓"; position: absolute; top: -.55rem; right: -.45rem;
  display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  background: var(--secondary); color: var(--primary);           /* 8.47:1 */
  font-size: .85rem; font-weight: 800; line-height: 1;
}
.swatch input:checked + label .swatch__name { text-decoration: underline; text-decoration-color: var(--primary-deep); text-decoration-thickness: 3px; text-underline-offset: .2em; }

/* Focus on a swatch: same global focus style, applied to the chip */
.swatch input:focus-visible { outline: none; box-shadow: none; }
.swatch input:focus-visible + label .swatch__chip {
  outline: 2px solid var(--primary);
  outline-offset: 7px;
}
/* Unselected swatches get the Secondary inner ring; selected ones already have one. */
.swatch input:focus-visible:not(:checked) + label .swatch__chip {
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--secondary);
}

.picker__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.status { font-size: .9rem; font-weight: 700; min-height: 1.4em; }

/* Preview stage */
.stage-pair { display: grid; gap: 1rem; }
@media (min-width: 560px) { .stage-pair { grid-template-columns: 1fr 1fr; } }

.preview {
  --candidate: var(--primary);          /* replaced live by picker.js */
  --candidate-label: var(--text);
}
.stage {
  display: grid; gap: 1rem; align-content: start; padding: 1.25rem;
  border-radius: var(--radius); border: 2px solid var(--secondary);
}
.stage--light { background: var(--bg); color: var(--text); }
.stage--dark  { background: var(--secondary); color: var(--white); }
.stage__label { font-size: .8125rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.stage--light .stage__label { color: var(--muted); }                       /* 4.91:1 on --bg */
.stage--dark  .stage__label { color: var(--on-secondary-muted); }          /* 8.04:1 */

.lockup { display: flex; align-items: center; gap: .75rem; }
.lockup .logo-mark { --mark-bg: var(--candidate); --mark-fg: var(--candidate-label); width: 3.25rem; height: 3.25rem; }
.wordmark { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; color: var(--candidate); }
.demo-btn {
  display: inline-flex; align-items: center; justify-content: center; width: fit-content;
  padding: .6rem 1.3rem; border-radius: 999px;
  background: var(--candidate); color: var(--candidate-label); font-weight: 700;
}

.result-line { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.result-line .swatch-dot {
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--candidate); border: 2px solid var(--secondary);
}
.result-line code { font-size: 1.2rem; font-weight: 800; letter-spacing: .04em; font-variant-numeric: tabular-nums; }

.checks { list-style: none; padding: 0; display: grid; gap: .75rem; }
.checks li {
  display: grid; grid-template-columns: 1fr auto; gap: .25rem 1rem; align-items: center;
  padding: .9rem 1rem; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.check__title  { font-weight: 700; }
.check__detail { grid-column: 1; font-size: .9rem; color: var(--muted); }          /* 4.91:1 on --bg */
.check__ratio  { font-weight: 800; font-variant-numeric: tabular-nums; }
.checks .badge { grid-column: 2; grid-row: 1 / span 2; }

.verdict {
  padding: 1rem 1.25rem; border-radius: var(--radius-sm);
  background: var(--highlight); color: var(--text);                  /* 13.0:1 */
  border-left: 8px solid var(--secondary);
  font-weight: 600;
}

/* ---- 4f. Call to action (Highlight backdrop + the single Accent button) ---- */
.cta {
  display: grid; gap: 1.5rem; padding: clamp(1.5rem, 5vw, 3.5rem);
  background: var(--highlight); color: var(--text);                   /* 13.0:1 */
  border-radius: var(--radius-lg); border: 2px solid var(--secondary);
}
@media (min-width: 900px) { .cta { grid-template-columns: 1.1fr .9fr; align-items: center; } }
.cta__copy { display: grid; gap: .75rem; }
.cta p { font-size: 1.125rem; }               /* text colour, not --muted: muted on Highlight is only 4.34:1 */
.cta__form { display: grid; gap: .85rem; }
.cta__form .btn { width: 100%; }
.cta__note { font-size: .9rem; }
.cta .status { color: var(--text); }

/* ---- 4g. Footer (Secondary) ------------------------------------------------ */
.site-footer { background: var(--secondary); color: var(--on-secondary-muted); padding-block: 2.5rem; margin-top: clamp(3rem, 8vw, 5.5rem); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; }
.site-footer a { color: var(--primary); font-weight: 700; }          /* 8.47:1 on --secondary */
.site-footer a:hover { color: var(--primary-hover); }                /* ~8 % darker, still ≥7:1 */
.site-footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.site-footer .brand { color: var(--white); }
.site-footer .brand:hover { color: var(--white); }
.site-footer .brand .logo-mark { --mark-bg: var(--primary); --mark-fg: var(--secondary); }


/* =============================================================================
   CONTRAST NOTES  (every pairing used above; re-run:  node contrast-audit.mjs)
   -----------------------------------------------------------------------------
   TEXT (needs ≥ 4.5:1)
     --text      on --bg 14.62 · --surface 13.45 · --highlight ≈13.0 · --primary 9.45
                 on --accent ≈7.3 · on every *-hover fill of the above ≥ 6.5
     --muted     on --bg 4.91 · --surface 4.51      ← allowed ONLY on these two.
                 On --highlight it is 4.34 (FAIL) so the CTA/verdict use --text.
                 On --primary it is 3.18 (FAIL) so the header uses --text.
     --white     on --secondary 13.48 · --secondary-hover ≈14 · --secondary-raised ≈11
     --primary   on --secondary 8.47 (nav active, footer links, number badges)
                 on --bg only 1.55 → NEVER used as text on light surfaces.
     --primary-deep (#567224) is the link colour on light surfaces:
                 5.33 on --bg · 4.90 on --surface · 4.71 on --highlight
     --on-secondary-muted on --secondary 8.04 · on --secondary-raised ≈6.6
     --accent    as text on --bg is 2.01 → never used as text; fills only, with
                 --text labels (white on Accent would be 2.07 and fails).

   NON-TEXT (needs ≥ 3:1)
     Form-control edges  --muted on --bg 4.91 · on --surface 4.51
     Focus indicator     --secondary inner ring vs --bg 13.10, vs --primary 8.47;
                         --primary outline vs --secondary 8.47
     Selected swatch     --secondary ring vs --surface 12.05 (+ ✓ badge, not colour-only)

   DISABLED controls are intentionally 40 % opacity; WCAG exempts inactive
   components from contrast requirements.
   ============================================================================= */