/* QUICKWIN-3 R2 theme. Dark = original design / default. Light = coherent counterpart.
   Behavioural principle only from rival light/dark pair (coherent neutrals); Secordit colours/layout original.
   No theme animations. No image filter inversion. */
/* R4 (MF3): Dark = the original QW2 design. The baseline :root tokens (--bg/--sunk/--surface/--ink…)
   are the light values the original dark site already relies on for its pale components (e.g. the
   homepage recovery cards via --tile-bg). R1–R3 redefined them to dark values here, which darkened
   those faces. Dark no longer redefines any token; html keeps the baseline #000. */
html[data-theme="dark"] {
  background: #000;
}
html[data-theme="light"] {
  color-scheme: light;
  background: #FAF8F5;
  --bg: #FAF8F5;
  --surface: #FFFFFF;
  --sunk: #F3EFE9;
  --line: #E7E1D8;
  --line-strong: #D6CEC2;
  --ink: #1C1A17;
  --ink-2: #3A3631;
  --muted: #57524A;
  --subtle: #6B655C;
  --accent: #0F766E;
  --accent-hover: #0B5C56;
  --accent-tint: #EAF3F2;
  --focus: #1C1A17;
}
html[data-theme="light"] body {
  background: var(--bg);
  color: var(--ink);
}

/* --- Light: override hardcoded dark page/hero surfaces (root cause of R1) --- */
html[data-theme="light"] #hp-hero {
  background: radial-gradient(1200px 500px at 85% 10%, rgba(15, 118, 110, 0.12), transparent 60%), var(--bg);
  color: var(--ink);
}
html[data-theme="light"] #hp-hero h1,
html[data-theme="light"] #hp-hero .page-h1 {
  color: var(--ink);
}
html[data-theme="light"] #hp-hero .eyebrow,
html[data-theme="light"] #hp-hero .eyebrow.brand-tagline-text {
  color: #6b6b6b;
}
html[data-theme="light"] #hp-hero .hp-subcopy,
html[data-theme="light"] #hp-hero .hp-notsure,
html[data-theme="light"] #hp-hero > p.small,
html[data-theme="light"] #hp-hero .hp-ordit-note {
  color: var(--muted);
}
html[data-theme="light"] #hp-hero > p.small a,
html[data-theme="light"] #hp-hero .ordit-quiet-btn {
  color: var(--accent);
}
html[data-theme="light"] #hp-hero .hp-sit-label {
  background: var(--sunk);
  color: var(--accent);
}
html[data-theme="light"] #hp-hero .hp-sit-personal { --tile-bg: var(--surface); }
html[data-theme="light"] #hp-hero .hp-sit-business { --tile-bg: var(--sunk); }
html[data-theme="light"] #hp-hero .hp-sit-list a {
  background: var(--tile-bg, var(--surface));
  color: var(--accent);
  border-color: var(--accent);
}
html[data-theme="light"] #hp-hero .hp-sit-list a:hover,
html[data-theme="light"] #hp-hero .hp-sit-list a:focus-visible {
  background: #fff;
  color: var(--accent);
  border-color: var(--accent);
  outline-color: var(--accent);
}
html[data-theme="light"] #hp-hero .hp-notsure .ordit-btn:focus-visible,
html[data-theme="light"] #hp-hero .hp-ordit-quiet .ordit-btn:focus-visible {
  outline-color: var(--accent);
}
/* R5: the former Light keep-dark rule for home #how-it-works and the Light .mk-band (About hero)
   overrides were removed here. See the R5 block at the end of this file. */

/* Full-page tool/resource dark shells → light surfaces (not homepage band-teal sections) */
html[data-theme="light"] .band-teal.tl-page,
html[data-theme="light"] section.band-teal.tl-page {
  background: var(--bg);
  color: var(--ink);
}
html[data-theme="light"] .tl-page h1,
html[data-theme="light"] .tl-page .page-h1 { color: var(--ink); }
html[data-theme="light"] .tl-lead { color: var(--muted); }
html[data-theme="light"] .tl-card,
html[data-theme="light"] .tl-about {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink-2);
}
html[data-theme="light"] .tl-card h2,
html[data-theme="light"] .tl-about h2 { color: var(--ink); }
html[data-theme="light"] .tl-priv,
html[data-theme="light"] .tl-hint,
html[data-theme="light"] .tl-status,
html[data-theme="light"] .tl-about .small,
html[data-theme="light"] .tools-fix { color: var(--muted); }
html[data-theme="light"] .tl-form label { color: var(--ink); }
html[data-theme="light"] .tl-form input {
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line-strong);
}
html[data-theme="light"] .tl-form input[aria-invalid="true"] { border-color: #b3261e; }
html[data-theme="light"] .tl-toggle {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--surface);
}
html[data-theme="light"] .tl-toggle:hover { border-color: var(--accent); color: var(--accent); }
html[data-theme="light"] .tl-btn {
  background: var(--accent);
  color: #fff;
}
html[data-theme="light"] .tl-btn:hover { filter: brightness(1.05); }
html[data-theme="light"] .tl-btn:focus-visible,
html[data-theme="light"] .tl-form input:focus-visible,
html[data-theme="light"] .tl-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
html[data-theme="light"] .tl-result { color: var(--ink); }
html[data-theme="light"] .tl-result .tl-head { color: var(--ink); }
html[data-theme="light"] .tl-result.is-ok { border-left-color: var(--accent); }
html[data-theme="light"] .tl-result.is-bad { border-left-color: #b3261e; }
html[data-theme="light"] .tl-hub {
  background: var(--surface);
  border-color: var(--line-strong);
}
html[data-theme="light"] .tl-hub-intro { color: var(--muted); }
html[data-theme="light"] .tl-hub-list a {
  background: var(--sunk);
  border-color: var(--line-strong);
  color: var(--ink);
}
html[data-theme="light"] .tl-hub-list a:hover {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--ink);
}
html[data-theme="light"] .tl-hub-purpose { color: var(--muted); }
html[data-theme="light"] .tl-hub-list a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
html[data-theme="light"] .tl-links a { color: var(--accent); }
html[data-theme="light"] .tl-stack .tl-card > .tl-kits {
  border-top-color: var(--line);
}

/* Resources rx-hero */
html[data-theme="light"] .rx-hero {
  background: radial-gradient(ellipse 60% 80% at 85% 30%, rgba(15, 118, 110, 0.20), transparent 65%), var(--bg);
  border-bottom-color: var(--line);
}
html[data-theme="light"] .rx-hero .tl-lead { color: var(--muted); }
html[data-theme="light"] .rx-jump a {
  color: var(--ink);
  border-color: var(--accent);
  background: var(--accent-tint);
}
html[data-theme="light"] .rx-card {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink-2);
}
html[data-theme="light"] .rx-title { color: var(--ink); }
html[data-theme="light"] .rx-use { color: var(--ink-2); }
html[data-theme="light"] .rx-note { color: var(--muted); }

/* Contact / training dark shells */
html[data-theme="light"] .ct-page {
  background-color: var(--bg);
  background-image: none;
  color: var(--ink);
}
html[data-theme="light"] body.tr-dark main { background: var(--bg); }

/* Cards / buybox / prose already mostly tokenised; reinforce */
html[data-theme="light"] .card,
html[data-theme="light"] .buybox,
html[data-theme="light"] .band:not(.band-teal) {
  background: var(--surface);
  border-color: var(--line);
  color: var(--ink);
}
html[data-theme="light"] .btn-primary {
  background: var(--accent);
  color: #fff;
}
html[data-theme="light"] .btn-primary:hover {
  background: var(--accent-hover);
  color: #fff;
}
html[data-theme="light"] .btn-secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}
html[data-theme="light"] .btn-secondary:hover {
  border-color: var(--ink);
  color: var(--ink);
}
html[data-theme="light"] .btn:focus-visible,
html[data-theme="light"] .ordit-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
html[data-theme="light"] .ordit-btn {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--accent);
}
html[data-theme="light"] .ordit-btn:hover {
  background: var(--accent);
  color: #fff;
}

/* Header / nav / footer — Light chrome (logo swap via .brand-on-light) */
html[data-theme="light"] .site-head {
  background: #FAF8F5;
  color: var(--ink);
}
html[data-theme="light"] .mainnav {
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
}
html[data-theme="light"] .mainnav a {
  color: var(--ink);
}
html[data-theme="light"] .mainnav a:hover,
html[data-theme="light"] .mainnav a[aria-current="page"] {
  color: var(--accent);
}
html[data-theme="light"] .mnav summary {
  color: var(--ink);
}
html[data-theme="light"] .mnav-panel {
  background: #FFFFFF;
  border-color: var(--line);
}
html[data-theme="light"] .mnav-panel a {
  color: var(--ink);
  border-bottom-color: var(--line);
}
html[data-theme="light"] .mnav-panel a[aria-current="page"],
html[data-theme="light"] .mnav-panel a:hover {
  color: var(--accent);
}
html[data-theme="light"] .ss-toggle { color: var(--ink); }
html[data-theme="light"] .ss-panel {
  background: #FFFFFF;
  border-color: var(--line);
}
html[data-theme="light"] .ss-q {
  color: var(--ink);
  background: #FFFFFF;
  border-color: var(--line-strong);
}
html[data-theme="light"] .ss-q::placeholder { color: var(--muted); }
html[data-theme="light"] .ss-results,
html[data-theme="light"] .ss-empty {
  background: #FFFFFF;
  border-color: var(--line-strong);
  color: var(--ink);
}
html[data-theme="light"] .ss-hit { color: var(--ink); }
html[data-theme="light"] .ss-hit:hover { background: var(--accent-tint); }
html[data-theme="light"] .ss-ask {
  color: var(--ink);
  border-color: var(--accent);
}
html[data-theme="light"] .site-head :focus-visible {
  outline-color: var(--accent);
}
html[data-theme="light"] .site-foot {
  background: #F3EFE9;
  color: var(--ink-2);
}
html[data-theme="light"] .site-foot a { color: var(--ink); }
html[data-theme="light"] .site-foot a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
html[data-theme="light"] .foot-h { color: var(--ink); }
html[data-theme="light"] .foot-address,
html[data-theme="light"] .foot-reg,
html[data-theme="light"] .foot-bottom {
  color: var(--muted);
  border-top-color: var(--line);
}
html[data-theme="light"] .brand-on-dark { display: none !important; }
html[data-theme="light"] .brand-on-light { display: block !important; }
html[data-theme="dark"] .brand-on-light { display: none !important; }
html[data-theme="dark"] .brand-on-dark { display: block !important; }

/* Tagline greys */
html[data-theme="light"] .brand-tagline-text,
html[data-theme="light"] .opener > .eyebrow.brand-tagline-text {
  color: #6b6b6b;
}
html[data-theme="dark"] .brand-tagline-text,
html[data-theme="dark"] .opener > .eyebrow.brand-tagline-text,
html[data-theme="dark"] .site-head .brand-tagline,
html[data-theme="light"] .site-head .brand-tagline {
  color: #adadad;
}
html[data-theme="light"] .site-head .brand-tagline { color: #6b6b6b; }
html[data-theme="light"] .foot-brand .brand-tagline-text { color: #6b6b6b; }
html[data-theme="dark"] .foot-brand .brand-tagline-text { color: #adadad; }

/* Do not apply image filters to simulate a theme */
html[data-theme="light"] img,
html[data-theme="dark"] img,
html[data-theme="light"] svg,
html[data-theme="dark"] svg {
  filter: none;
}

/* Appearance control R3 — single cycle button; segmented option rules removed */
.theme-ctrl {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  border: 1.5px solid rgba(94, 234, 212, 0.55);
  border-radius: 50%;
  background: #050c0c;
  color: #5eead4;
  cursor: pointer;
  flex: none;
  line-height: 0;
}
.theme-ctrl .theme-ico {
  display: none;
  width: 22px;
  height: 22px;
}
.theme-ctrl .theme-ico:not([hidden]) {
  display: block;
}
.theme-ctrl:hover {
  background: #0f766e;
  color: #fff;
  border-color: #5eead4;
}
.theme-ctrl:focus-visible {
  outline: 2px solid #5eead4;
  outline-offset: 3px;
}
/* Light: whole-button colours. Normal = teal icon on white (explicit hex, not a child override).
   Hover/focus-visible = white on #0F766E. Documented cascade in evidence. */
html[data-theme="light"] .theme-ctrl {
  background: #FFFFFF;
  color: #0F766E;
  border-color: #0F766E;
}
html[data-theme="light"] .theme-ctrl:hover {
  background: #0F766E;
  color: #FFFFFF;
  border-color: #0B5C56;
}
html[data-theme="light"] .theme-ctrl:focus-visible {
  outline: 2px solid #0F766E;
  outline-offset: 3px;
}
html[data-theme="dark"] .theme-ctrl {
  background: #050c0c;
  color: #5EEAD4;
  border-color: rgba(94, 234, 212, 0.55);
}
html[data-theme="dark"] .theme-ctrl:hover {
  background: #0F766E;
  color: #FFFFFF;
  border-color: #5EEAD4;
}
html[data-theme="dark"] .theme-ctrl:focus-visible {
  outline: 2px solid #5EEAD4;
  outline-offset: 3px;
}
.mainnav .theme-ctrl {
  margin-left: 0.35rem;
}
@media (min-width: 990px) {
  .mnav-panel .theme-ctrl { display: none; }
  .mainnav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }
  .mainnav ul { margin: 0; }
}
@media (max-width: 989.98px) {
  .mainnav .theme-ctrl { display: none; }
  .mnav-panel .theme-ctrl {
    display: inline-flex;
    margin: 0.75rem 1rem 1rem;
  }
}

/* ===== QUICKWIN-3 R4 corrections (Light only unless stated). Cascade notes in R4 evidence. ===== */

/* R4-1 (MF1): headings/crumbs marked .on-dark read --h1-ink/--crumb-ink through the baseline
   "#main h1.page-h1{color:var(--h1-ink)!important}" and "#main nav.site-crumbs{color:var(--crumb-ink)}".
   Light redefines the variables (not the !important colour) so the existing rule resolves dark-on-light.
   Scoped to the page heads whose Light surface is light (home hero, kits/about mk-band, band-tools page
   shells incl. resources rx-hero, light crumb strips). Glossary/Cyber Radar/News Pulse heads keep their
   dark R3 Light surface, so their original light ink is left unchanged there. */
html[data-theme="light"] #hp-hero .on-dark,
html[data-theme="light"] .band-teal.band-tools .on-dark,
html[data-theme="light"] nav.site-crumbs.crumb-band.on-dark,
html[data-theme="light"] body.tr-dark nav.site-crumbs.on-dark {
  --h1-ink: var(--ink);
  --crumb-ink: var(--muted);
}

/* R4-2 (MF2): band-tools sections (sitewide resources band + tool/resource/contact/scam-check page shells)
   become one coherent light surface with paired foregrounds and interaction states. */
html[data-theme="light"] .band-teal.band-tools {
  background: var(--bg);
  color: var(--ink);
  border-top-color: var(--line);
}
html[data-theme="light"] .band-teal.band-tools h2,
html[data-theme="light"] .band-teal.band-tools .rx-gh {
  color: var(--ink);
}
html[data-theme="light"] .band-tools .tools-note,
html[data-theme="light"] .band-tools .tools-now,
html[data-theme="light"] .band-tools .tools-fix,
html[data-theme="light"] .rx-hero .gl-xlink,
html[data-theme="light"] .rx-hero .cf-xlink,
html[data-theme="light"] .rx-card .rx-kit-q {
  color: var(--muted);
}
html[data-theme="light"] :where(.band-tools) a {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
html[data-theme="light"] :where(.band-tools) a:hover {
  color: var(--accent-hover);
  text-decoration-color: var(--accent-hover);
}
html[data-theme="light"] .band-teal.band-tools :focus-visible,
html[data-theme="light"] .band-tools .rx-cta:focus-visible,
html[data-theme="light"] .band-tools .rx-chip:focus-visible,
html[data-theme="light"] .band-tools .rx-more:focus-visible,
html[data-theme="light"] .rx-jump a:focus-visible {
  outline-color: var(--accent);
}
html[data-theme="light"] .rx-card {
  border-color: var(--line-strong);
  box-shadow: 0 1px 2px rgba(28, 26, 23, 0.06), 0 6px 18px rgba(28, 26, 23, 0.08);
}
html[data-theme="light"] .rx-card:hover,
html[data-theme="light"] .rx-card:focus-within {
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(28, 26, 23, 0.08), 0 10px 26px rgba(28, 26, 23, 0.12);
}
html[data-theme="light"] .rx-mono:not(.rx-mono-logo),
html[data-theme="light"] .rx-gi {
  color: var(--accent);
  background: var(--accent-tint);
  border-color: rgba(15, 118, 110, 0.45);
  box-shadow: none;
}
html[data-theme="light"] .rx-tag {
  color: var(--accent);
  border-color: rgba(15, 118, 110, 0.45);
}
html[data-theme="light"] .rx-ico { color: currentColor; }
html[data-theme="light"] .band-tools a.rx-cta:not(.rx-cta-strong),
html[data-theme="light"] .band-tools a.rx-more {
  color: var(--accent);
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: none;
}
html[data-theme="light"] .band-tools a.rx-cta:not(.rx-cta-strong):hover,
html[data-theme="light"] .band-tools a.rx-cta:not(.rx-cta-strong):focus-visible,
html[data-theme="light"] .band-tools a.rx-more:hover,
html[data-theme="light"] .band-tools a.rx-more:focus-visible {
  color: #FFFFFF;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: none;
}
html[data-theme="light"] .band-tools a.rx-cta:hover .rx-ico,
html[data-theme="light"] .band-tools a.rx-cta:focus-visible .rx-ico {
  color: currentColor;
}
html[data-theme="light"] .band-tools a.rx-chip {
  color: var(--ink);
  background: var(--accent-tint);
  border-color: rgba(15, 118, 110, 0.45);
}
html[data-theme="light"] .band-tools a.rx-chip:hover,
html[data-theme="light"] .band-tools a.rx-chip:focus-visible {
  color: var(--ink);
  background: #D7ECE9;
  border-color: var(--accent);
}
html[data-theme="light"] .band-tools a.rx-chip[style*="--kc"]:hover,
html[data-theme="light"] .band-tools a.rx-chip[style*="--kc"]:focus-visible {
  color: var(--ink);
  background: color-mix(in srgb, var(--kc) 16%, #FFFFFF);
  border-color: var(--kc);
}
html[data-theme="light"] .rx-jump a:hover {
  color: var(--ink);
  background: #D7ECE9;
  border-color: var(--accent);
}
html[data-theme="light"] .rx-feature {
  background: var(--surface);
  border-color: var(--accent);
  box-shadow: 0 1px 2px rgba(28, 26, 23, 0.06), 0 8px 22px rgba(28, 26, 23, 0.10);
}

/* R4-4 (MF4): the Light footer logo is /logo-dark.webp (800px natural width, no srcset). In the QW2
   "auto" brand track its max-content contribution (800px) widened the track and squeezed the three
   1fr columns. The Dark logo's srcset+sizes="280px" gives a 280px natural width. Fix the Light logo's
   used width to the same 280px so the brand track contributes as in QW2. Footer markup unchanged. */
html[data-theme="light"] .site-foot .foot-brand img.brand-on-light {
  width: 280px;
  max-width: 100%;
  height: auto;
}

/* R4-1 (MF1, breadcrumbs): the crumb strip above light page heads was a hard-coded dark band
   (#main.pg-crumbs>.wrap>nav.site-crumbs.crumb-band{background:#050c0c}); Light pairs it with the page. */
html[data-theme="light"] #main.pg-crumbs > .wrap > nav.site-crumbs.crumb-band {
  background: var(--bg);
  box-shadow: 0 0 0 100vmax var(--bg);
}
html[data-theme="light"] #main.pg-crumbs > .wrap > nav.site-crumbs.crumb-band + .pg-bleed {
  box-shadow: 0 -2px 0 0 var(--bg);
}

/* R4-2 (MF2, band-tools page shells): remaining hard-coded pale foregrounds inside light band-tools
   shells (scam-check, contact, learning, tools). Wording/targets unchanged. */
html[data-theme="light"] .ct-page .ct-p,
html[data-theme="light"] .ct-page .ct-list,
html[data-theme="light"] .ct-page .ct-info-body p,
html[data-theme="light"] .sc-page .sc-steps,
html[data-theme="light"] .tr-page .tr-p,
html[data-theme="light"] .tr-page .tr-empty p {
  color: var(--ink-2);
}
html[data-theme="light"] .ct-page .ct-info-body strong,
html[data-theme="light"] .sc-page .sc-steps strong,
html[data-theme="light"] .sc-page .sc-price,
html[data-theme="light"] .sc-page .sc-cap,
html[data-theme="light"] .sc-page .sc-off,
html[data-theme="light"] .tl-for {
  color: var(--ink);
}
html[data-theme="light"] .sc-page .sc-off { border-color: var(--accent); }
html[data-theme="light"] .ct-page .ct-list a,
html[data-theme="light"] .ct-page .ct-p a {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
html[data-theme="light"] .ct-page .ct-list a:hover,
html[data-theme="light"] .ct-page .ct-p a:hover {
  color: var(--accent-hover);
}
html[data-theme="light"] .tl-extra,
html[data-theme="light"] .tl-one {
  color: var(--muted);
}
html[data-theme="light"] .tl-rec {
  color: var(--ink-2);
  background: var(--sunk);
}
html[data-theme="light"] .ct-ordit-btn {
  color: var(--ink);
  background: var(--accent-tint);
  border-color: var(--accent);
}
html[data-theme="light"] .ct-ordit-ico { color: var(--accent); }
html[data-theme="light"] .ct-ordit-btn:hover {
  color: #FFFFFF;
  background: var(--accent);
  box-shadow: none;
}
html[data-theme="light"] .ct-ordit-btn:hover .ct-ordit-ico { color: #FFFFFF; }
html[data-theme="light"] .ct-ordit-btn:focus-visible { outline-color: var(--accent); }
html[data-theme="light"] .ct-page .ct-ordit {
  background: var(--surface);
  border-color: var(--accent);
}
html[data-theme="light"] .band-teal.band-tools .steps li {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink-2);
}
html[data-theme="light"] .band-teal.band-tools .steps li strong { color: var(--ink); }
html[data-theme="light"] .band-tools .tools-use { color: var(--muted); }

/* ===== QUICKWIN-3 R5 (Light only). Scope: Hartley mapping release, 9 Nov 2026. =====
   Home #how-it-works + .band-news (scoped by the home-only #hp-hero sibling), the /glossary/ hub
   (scoped by .gl-hub, hub only), and the three /cyber-radar/ listings (scoped by body.cr-light, listings
   only). About hero (.mk-band) is intentionally NOT styled here: it keeps its original Dark inline rules.
   Dark is untouched: every selector starts with html[data-theme="light"]. */

/* Home: How it works (light grey band, white step cards) */
html[data-theme="light"] #main > .wrap > #hp-hero ~ #how-it-works.band-teal {
  background: var(--sunk);
  color: var(--ink);
}
html[data-theme="light"] #hp-hero ~ #how-it-works.band-teal h2 { color: var(--ink); }
html[data-theme="light"] #hp-hero ~ #how-it-works.band-teal .steps li {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink-2);
}
html[data-theme="light"] #hp-hero ~ #how-it-works.band-teal .steps li strong { color: var(--ink); }
html[data-theme="light"] #hp-hero ~ #how-it-works.band-teal .steps li:before {
  background: var(--accent);
  color: #FFFFFF;
}
html[data-theme="light"] #hp-hero ~ #how-it-works.band-teal :focus-visible { outline-color: var(--focus); }

/* Home: Latest News (white band) */
html[data-theme="light"] #hp-hero ~ .band-teal.band-news {
  background: var(--surface);
  color: var(--ink);
  border-top-color: var(--line);
}
html[data-theme="light"] #hp-hero ~ .band-teal.band-news h2 { color: var(--ink); }
html[data-theme="light"] #hp-hero ~ .band-news a,
html[data-theme="light"] #hp-hero ~ .band-news .news-row,
html[data-theme="light"] #hp-hero ~ .band-news .list-plain .news-row:hover {
  color: var(--ink);
  text-decoration-color: var(--accent);
}
html[data-theme="light"] #hp-hero ~ .band-news .news-title { text-decoration-color: var(--accent); }
html[data-theme="light"] #hp-hero ~ .band-news .small { color: var(--muted); }
html[data-theme="light"] #hp-hero ~ .band-news .news-thumb { background: var(--sunk); }
html[data-theme="light"] #hp-hero ~ .band-news .list-plain li { border-bottom-color: var(--line-strong); }
html[data-theme="light"] #hp-hero ~ .band-news .list-plain li:first-child { border-top-color: var(--line-strong); }
html[data-theme="light"] #hp-hero ~ .band-news a:hover,
html[data-theme="light"] #hp-hero ~ .band-news .news-row:hover .news-title {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
html[data-theme="light"] #hp-hero ~ .band-news .news-row:focus-visible,
html[data-theme="light"] #hp-hero ~ .band-news a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

/* /glossary/ hub: "Scam Spotter A to Z" (light page surface; hub only via .gl-hub) */
html[data-theme="light"] body:has(.gl-hub) main {
  background: var(--bg);
  color: var(--ink);
}
html[data-theme="light"] body:has(.gl-hub) nav.site-crumbs.on-dark,
html[data-theme="light"] body:has(.gl-hub) .gl-hub .on-dark {
  --h1-ink: var(--ink);
  --crumb-ink: var(--muted);
}
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub { color: var(--ink-2); }
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub h1,
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub h2,
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub h3 { color: var(--ink); }
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub a,
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub .gl-fn a {
  color: var(--accent);
  text-decoration-color: rgba(15, 118, 110, 0.6);
}
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub a:hover { color: var(--accent-hover); }
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub a:focus-visible,
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub .btn.btn-primary:focus-visible,
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-frow input:focus-visible,
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-frow button:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub .gl-def {
  background: var(--accent-tint);
  border-left-color: var(--accent);
  color: var(--ink);
}
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub .gl-by { color: var(--muted); }
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub .gl-sec {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: var(--shadow-1);
}
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub .gl-help {
  background: var(--surface);
  border-left-color: var(--accent);
}
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub .gl-kit {
  background: var(--surface);
  border-color: var(--accent);
}
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub .gl-sources ol { color: var(--ink-2); }
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub .gl-sources li:target { background: var(--accent-tint); }
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub .btn.btn-primary {
  background: var(--accent);
  color: #FFFFFF;
  border-color: var(--accent);
}
html[data-theme="light"] body:has(.gl-hub) .gl-page.gl-hub .btn.btn-primary:hover {
  background: var(--accent-hover);
  color: #FFFFFF;
  border-color: var(--accent-hover);
}
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-az a {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--ink);
}
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-az a:hover,
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-az a:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: #FFFFFF;
}
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-az a:focus-visible { outline: 3px solid var(--focus); }
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-letter h2 { color: var(--accent); }
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-letter li {
  background: var(--surface);
  border-color: var(--line);
  border-left-color: var(--accent);
  color: var(--ink-2);
}
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-letter li > a:first-child {
  color: var(--ink);
  text-decoration-color: var(--accent);
}
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-letter li > a:first-child:hover { color: var(--accent); }
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-filter label { color: var(--ink); }
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-frow input {
  background: var(--surface);
  color: var(--ink);
  border-color: #8A8378;
}
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-frow input::placeholder { color: var(--muted); }
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-frow button {
  background: var(--surface);
  color: var(--accent);
  border-color: var(--accent);
}
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-frow button:hover {
  background: var(--accent);
  color: #FFFFFF;
}
html[data-theme="light"] body:has(.gl-hub) .gl-hub .gl-none {
  border-color: var(--line-strong);
  color: var(--ink-2);
}
html[data-theme="light"] body:has(.gl-hub) .gl-hub #gl-count { color: var(--muted); }

/* /cyber-radar/ listings 1-3: "Intelligence". body.cr-light exists only on these three pages.
   The page's later inline block turns body.cr-light dark. These rules restore its own light palette in Light. */
html[data-theme="light"] body.cr-light,
html[data-theme="light"] body.cr-light main {
  background: var(--bg);
  color: var(--ink-2);
}
html[data-theme="light"] body.cr-light nav.site-crumbs.on-dark,
html[data-theme="light"] body.cr-light .cr-blog .on-dark {
  --h1-ink: var(--ink);
  --crumb-ink: var(--muted);
}
html[data-theme="light"] body.cr-light .cr-blog { color: var(--ink-2); }
html[data-theme="light"] body.cr-light .cr-title,
html[data-theme="light"] body.cr-light main h2,
html[data-theme="light"] body.cr-light main h3 { color: var(--ink); }
html[data-theme="light"] body.cr-light .cr-media {
  background: #EFEAE3;
  border-color: var(--line);
}
html[data-theme="light"] body.cr-light .cr-date { color: var(--accent); }
html[data-theme="light"] body.cr-light .cr-excerpt,
html[data-theme="light"] body.cr-light .cr-article:hover .cr-excerpt { color: var(--ink-2); }
html[data-theme="light"] body.cr-light .cr-pg { color: var(--ink); }
html[data-theme="light"] body.cr-light .cr-pg:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
html[data-theme="light"] body.cr-light .cr-current:after { background: var(--accent); }
html[data-theme="light"] body.cr-light .cr-blog .cr-link,
html[data-theme="light"] body.cr-light .cf-xlink a,
html[data-theme="light"] body.cr-light .cr-ask p a { color: var(--accent); }
html[data-theme="light"] body.cr-light .cf-xlink,
html[data-theme="light"] body.cr-light .cr-kits > p,
html[data-theme="light"] body.cr-light .cr-ask p { color: var(--muted); }
html[data-theme="light"] body.cr-light .cr-kits { border-top-color: var(--line); }
html[data-theme="light"] body.cr-light main :focus-visible,
html[data-theme="light"] body.cr-light .cr-pg:focus-visible,
html[data-theme="light"] body.cr-light .cr-kits .problems.problems-12 a:focus-visible {
  outline: 3px solid var(--focus);
}
html[data-theme="light"] body.cr-light .cr-pg:focus-visible { color: var(--accent); }
html[data-theme="light"] body.cr-light .cr-link:focus-visible::after { outline: 3px solid var(--focus); }

/* ===== QUICKWIN-3 R6 (Light only). News Pulse "Latest News" band, per Hartley's R6 scope lock, 9 Nov 2026.
   Prefix body.np-dark .np-after > .band-teal.band-news matches only /news-pulse/ (outside #main).
   Mirrors the R5 home Latest News palette (white band). Dark is untouched. */
html[data-theme="light"] body.np-dark .np-after > .band-teal.band-news {
  background: var(--surface);
  color: var(--ink);
  border-top-color: var(--line);
}
html[data-theme="light"] body.np-dark .np-after > .band-teal.band-news h2 { color: var(--ink); }
html[data-theme="light"] body.np-dark .np-after > .band-teal.band-news a,
html[data-theme="light"] body.np-dark .np-after > .band-teal.band-news .news-row,
html[data-theme="light"] body.np-dark .np-after > .band-teal.band-news .list-plain .news-row:hover {
  color: var(--ink);
  text-decoration-color: var(--accent);
}
html[data-theme="light"] body.np-dark .np-after > .band-teal.band-news .news-title { text-decoration-color: var(--accent); }
html[data-theme="light"] body.np-dark .np-after > .band-teal.band-news .small { color: var(--muted); }
html[data-theme="light"] body.np-dark .np-after > .band-teal.band-news .news-thumb { background: var(--sunk); }
html[data-theme="light"] body.np-dark .np-after > .band-teal.band-news .list-plain li { border-bottom-color: var(--line-strong); }
html[data-theme="light"] body.np-dark .np-after > .band-teal.band-news .list-plain li:first-child { border-top-color: var(--line-strong); }
html[data-theme="light"] body.np-dark .np-after > .band-teal.band-news a:hover,
html[data-theme="light"] body.np-dark .np-after > .band-teal.band-news .news-row:hover .news-title {
  color: var(--accent);
  text-decoration-color: var(--accent);
}
html[data-theme="light"] body.np-dark .np-after > .band-teal.band-news :focus-visible,
html[data-theme="light"] body.np-dark .np-after > .band-teal.band-news a:focus-visible,
html[data-theme="light"] body.np-dark .np-after > .band-teal.band-news .news-row:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 4px;
}

/* ===== News Pulse sign-up bar, Light only (Matt 22:15, 10 Nov 2026). Replaces the R7 "pale outer, dark inner
   panel" rule. One block for every page that carries the bar (section.hp-np-strip / .np-strip): light surface,
   dark text, visible field border, teal button untouched. No geometry changes (hairlines are inset shadows,
   the panel border keeps its 1px width). Dark is not addressed here and stays as authored. */
html[data-theme="light"] section.hp-np.hp-np-strip {
  background: #F3EFE9;
  background-image: none;
  color: #1C1A17;
  box-shadow: inset 0 1px 0 #D6CEC2, inset 0 -1px 0 #D6CEC2;
}
html[data-theme="light"] .skf-join.np-strip {
  background: #FFFFFF !important;
  border: 1px solid #D6CEC2 !important;
  color: #1C1A17;
}
html[data-theme="light"] .skf-join.np-strip h2 { color: #1C1A17 !important; }
html[data-theme="light"] .skf-join.np-strip .skf-join-label { color: #0F766E !important; }
html[data-theme="light"] .skf-join.np-strip .np-form p { color: #57524A !important; }
html[data-theme="light"] .skf-join.np-strip .np-form a { color: #0F766E !important; }
html[data-theme="light"] .skf-join.np-strip .np-form input[type="email"] {
  background: #FFFFFF !important;
  color: #1C1A17 !important;
  border: 1px solid #6B655C !important;
}
html[data-theme="light"] .skf-join.np-strip .np-form input[type="email"]::placeholder { color: #57524A !important; opacity: 1; }
html[data-theme="light"] .skf-join.np-strip .np-form input:focus {
  border-color: #0F766E !important;
  outline: 2px solid #0F766E !important;
  outline-offset: 1px !important;
}
html[data-theme="light"] .skf-join.np-strip .np-form button:focus-visible,
html[data-theme="light"] .skf-join.np-strip .np-form a:focus-visible {
  outline: 2px solid #1C1A17 !important;
  outline-offset: 2px !important;
}

/* ===== FIRST-RESPONSE-1-R2: Resources hero radar visibility, Light only (lock 261ed378). CSS presentation overrides only; SVG markup/geometry unchanged; blip unchanged. ===== */
@media (min-width: 990px) {
  html[data-theme="light"] .rs-page.rx-page .rx-hero > svg.rx-radar { opacity: 0.95; }
}
@media (max-width: 989.98px) {
  html[data-theme="light"] .rs-page.rx-page .rx-hero > svg.rx-radar { opacity: 0.85; }
}
html[data-theme="light"] .rs-page.rx-page .rx-hero > svg.rx-radar > g > circle:nth-of-type(1)[r="190"] { stroke-opacity: 0.20; }
html[data-theme="light"] .rs-page.rx-page .rx-hero > svg.rx-radar > g > circle:nth-of-type(2)[r="140"] { stroke-opacity: 0.26; }
html[data-theme="light"] .rs-page.rx-page .rx-hero > svg.rx-radar > g > circle:nth-of-type(3)[r="90"] { stroke-opacity: 0.34; }
html[data-theme="light"] .rs-page.rx-page .rx-hero > svg.rx-radar > g > circle:nth-of-type(4)[r="40"] { stroke-opacity: 0.45; }
html[data-theme="light"] .rs-page.rx-page .rx-hero > svg.rx-radar > g > path { stroke-opacity: 0.20; }
html[data-theme="light"] .rs-page.rx-page .rx-hero > svg.rx-radar linearGradient#rxs > stop:first-child { stop-opacity: 0.40; }

/* Dark21: kits and problem pages only. Keep palette inheritance out of the header.
   All overrides are theme-gated; geometry and the Light cascade are unchanged. */
html[data-theme="dark"] body.dark21-pages {
  background: #000;
  color: #f6f9f9;
}
html[data-theme="dark"] .dark21-pages main {
  color-scheme: dark;
  background: #000;
  color: #d0dcda;
  --bg: #000;
  --surface: #050c0c;
  --sunk: #0b1918;
  --line: #294440;
  --line-strong: #567873;
  --ink: #f6f9f9;
  --ink-2: #d0dcda;
  --muted: #b8cbc7;
  --subtle: #adc2bd;
  --accent: #2dd4bf;
  --accent-hover: #5eead4;
  --accent-tint: #0b2925;
  --focus: #5eead4;
  --h1-ink: #f6f9f9;
  --crumb-ink: #b8cbc7;
}
/* The News Pulse bar is authored dark already: if it is ever placed inside one of these pages it keeps its
   own Dark rendering (baseline tokens restored; the a/input/focus rules below skip it too). */
html[data-theme="dark"] .dark21-pages main .hp-np-strip {
  color-scheme: normal;
  --bg: #FAF8F5;
  --surface: #FFFFFF;
  --sunk: #F3EFE9;
  --line: #E7E1D8;
  --line-strong: #D6CEC2;
  --ink: #1C1A17;
  --ink-2: #3A3631;
  --muted: #57524A;
  --subtle: #6B655C;
  --accent: #0F766E;
  --accent-hover: #0B5C56;
  --accent-tint: #EAF3F2;
  --focus: #1C1A17;
}
html[data-theme="dark"] .dark21-pages main .kband {
  --bb: #000;
  --rule: #2dd4bf;
}
html[data-theme="dark"] .dark21-pages main :is(.kb-tint, .kb-steps, .kb-faq) {
  --bb: #050c0c;
}
html[data-theme="dark"] .dark21-pages main .founder[aria-labelledby="h-founder"] {
  background: linear-gradient(180deg, #071716, #050e0d);
  border-color: #294440;
  color: #f6f9f9;
  box-shadow: 0 0 0 100vmax #000;
  clip-path: inset(-48px -100vmax -64px);
}
html[data-theme="dark"] .dark21-pages main .founder[aria-labelledby="h-founder"] :is(h2,p) { color: #f6f9f9; }
html[data-theme="dark"] .dark21-pages main .founder[aria-labelledby="h-founder"] .small { color: #d0dcda; }
html[data-theme="dark"] .dark21-pages main a:not(:where(.hp-np-strip *)) {
  color: #2dd4bf;
  text-decoration-color: currentColor;
}
html[data-theme="dark"] .dark21-pages main a:not(:where(.hp-np-strip *)):hover { color: #5eead4; }
html[data-theme="dark"] .dark21-pages main :is(.btn-primary, .dl-btn, .button) {
  background: #0f766e;
  color: #fff;
  border-color: #2dd4bf;
}
html[data-theme="dark"] .dark21-pages main :is(.btn-primary, .dl-btn, .button):hover {
  background: #0b5c56;
  color: #fff;
}
html[data-theme="dark"] .dark21-pages main .ordit-btn:hover {
  background: #0b2925;
  color: #5eead4;
}
html[data-theme="dark"] .dark21-pages main :is(input,select,textarea):not(:where(.hp-np-strip *)) {
  background-color: #050c0c;
  color: #f6f9f9;
  border-color: #567873;
  accent-color: #2dd4bf;
}
html[data-theme="dark"] .dark21-pages main :is(input,textarea):not(:where(.hp-np-strip *))::placeholder { color: #b8cbc7; opacity: 1; }
html[data-theme="dark"] .dark21-pages main :focus-visible:not(:where(.hp-np-strip *)) {
  outline: 2px solid #5eead4;
  outline-offset: 3px;
}

/* ==========================================================================
   HELP-PICKER: "What's happened?" situation picker on /help/ (First Response).
   Scoped to .fr-picker, which only exists on /help/. One card treatment for all
   12 items, no per-kit colours. Tokens: site teal (#0f766e light, #2dd4bf dark),
   ink, surfaces, --r radius, Inter 600/700.
   Note: /help/ keeps a light page body in the dark theme (it is not a
   dark21 page), so in dark the picker is its own dark panel.
   ========================================================================== */
.fr-picker {
  --fp-panel: #ffffff;
  --fp-panel-line: #e7e1d8;
  --fp-card: #faf8f5;
  --fp-card-hover: #eaf3f2;
  --fp-line: #d6cec2;
  --fp-ink: #1c1a17;
  --fp-muted: #57524a;
  --fp-accent: #0f766e;
  --fp-accent-strong: #0b5c56;
  --fp-label-bg: #eaf3f2;
  --fp-chip-bg: #0f766e;
  --fp-chip-ink: #ffffff;
  --fp-chip-line: #0f766e;
  --fp-chip-bg-on: #0b5c56;
  --fp-chip-ink-on: #ffffff;
  --fp-focus: #0f766e;
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--fp-panel);
  border: 1px solid var(--fp-panel-line);
  border-radius: 18px;
  box-shadow: var(--shadow-1);
  color: var(--fp-ink);
}
html[data-theme="dark"] .fr-picker {
  --fp-panel: #050c0c;
  --fp-panel-line: #193330;
  --fp-card: #0b1414;
  --fp-card-hover: #0d1b1a;
  --fp-line: #294440;
  --fp-ink: #f6f9f9;
  --fp-muted: #c4cfcc;
  --fp-accent: #2dd4bf;
  --fp-accent-strong: #5eead4;
  --fp-label-bg: #0b2925;
  --fp-chip-bg: transparent;
  --fp-chip-ink: #2dd4bf;
  --fp-chip-line: #14b8a6;
  --fp-chip-bg-on: #2dd4bf;
  --fp-chip-ink-on: #04201d;
  --fp-focus: #5eead4;
  box-shadow: none;
}
.fr-page .fr-picker h2 {
  margin: 0 0 .35rem;
  color: var(--fp-ink);
}
.fr-picker .fr-picker-sub {
  margin: 0 0 1.25rem;
  color: var(--fp-muted);
}
.fr-picker .fr-picker-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
.fr-picker .fr-picker-col { min-width: 0; }
.fr-page .fr-picker .fr-picker-label {
  margin: 0 0 .75rem;
  padding: .55rem .9rem;
  border-radius: var(--r-sm, 10px);
  background: var(--fp-label-bg);
  color: var(--fp-accent);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
.fr-picker .fr-picker-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.fr-picker .fr-picker-list li {
  display: flex;
  min-width: 0;
  margin: 0;
}
html[data-theme] .fr-page .fr-picker .fr-picker-list a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  min-width: 0;
  min-height: 72px;
  padding: .85rem 1rem;
  border: 1px solid var(--fp-line);
  border-radius: var(--r, 14px);
  background: var(--fp-card);
  color: var(--fp-ink);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: border-color .15s var(--ease, ease), background-color .15s var(--ease, ease);
}
.fr-picker .fr-picker-text {
  min-width: 0;
  overflow-wrap: break-word;
}
.fr-picker .fr-picker-arrow {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--fp-chip-line);
  border-radius: 50%;
  background: var(--fp-chip-bg);
  color: var(--fp-chip-ink);
  transition: background-color .15s var(--ease, ease), color .15s var(--ease, ease);
}
.fr-picker .fr-picker-arrow svg { display: block; }
html[data-theme] .fr-page .fr-picker .fr-picker-list a:hover,
html[data-theme] .fr-page .fr-picker .fr-picker-list a:focus-visible {
  border-color: var(--fp-accent);
  background: var(--fp-card-hover);
  color: var(--fp-ink);
  box-shadow: inset 0 0 0 1px var(--fp-accent);
}
.fr-picker .fr-picker-list a:hover .fr-picker-arrow,
.fr-picker .fr-picker-list a:focus-visible .fr-picker-arrow {
  background: var(--fp-chip-bg-on);
  border-color: var(--fp-chip-bg-on);
  color: var(--fp-chip-ink-on);
}
html[data-theme] .fr-page .fr-picker a:focus-visible {
  outline: 3px solid var(--fp-focus);
  outline-offset: 3px;
  border-radius: var(--r, 14px);
}
html[data-theme] .fr-page .fr-picker .fr-picker-more a:focus-visible { border-radius: 6px; }
.fr-picker .fr-picker-more {
  margin: 1.25rem 0 0;
  font-size: .9rem;
  color: var(--fp-muted);
}
html[data-theme] .fr-page .fr-picker .fr-picker-more a {
  color: var(--fp-accent);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: currentColor;
}
html[data-theme] .fr-page .fr-picker .fr-picker-more a:hover { color: var(--fp-accent-strong); }
/* tablet: 2 cards per row inside each labelled group */
@media (min-width: 600px) {
  .fr-picker .fr-picker-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* desktop: 4 columns (1 family + 3 business), shared rows so every card matches */
@media (min-width: 1000px) {
  .fr-picker {
    margin-inline: calc((100% - min(1072px, 100vw - 3rem)) / 2);
    padding: 1.75rem;
  }
  .fr-picker .fr-picker-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto repeat(3, minmax(72px, 1fr));
    gap: .75rem;
  }
  .fr-picker .fr-picker-col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / 5;
  }
  .fr-picker .fr-picker-family { grid-column: 1; }
  .fr-picker .fr-picker-business { grid-column: 2 / 5; }
  .fr-page .fr-picker .fr-picker-label { margin: 0; align-self: end; }
  .fr-picker .fr-picker-list {
    grid-row: 2 / 5;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
  }
  .fr-picker .fr-picker-business .fr-picker-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
  .fr-picker { padding: 1.1rem; }
  html[data-theme] .fr-page .fr-picker .fr-picker-list a { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme] .fr-page .fr-picker .fr-picker-list a,
  .fr-picker .fr-picker-arrow { transition: none; }
}