/* 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;
}

/* ===== QUICKWIN-3 R7 (Light only). Home News Pulse signup strip: pale outer background only; the dark
   inner panel is pinned to the opaque equivalent of its current composite (Option A, Hartley lock, 9 Nov 2026). */
html[data-theme="light"] #main > .wrap > #hp-hero ~ section.band-teal.hp-np.hp-np-strip {
  background: var(--sunk);
}
html[data-theme="light"] #main > .wrap > #hp-hero ~ section.band-teal.hp-np.hp-np-strip .skf-join.np-strip {
  background: #030909 !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; }