/* ============================================================
   Ubuntu Guard Cyber - ug-brand.css
   ONE consolidated stylesheet, built from the finalized "Graphite &
   Pulse" rebrand tokens (plan/01-theme-system.md, corrected
   plan/06-homepage-wireframe-spec.md §7/§10) and brand-guidelines-dev.md.

   Targets the EXISTING class vocabulary already in use across the
   site's markup (site-header, nav-list, hero, section, btn/card
   patterns, footer-*, etc.) - this is a restyle, not a rebuild.
   No HTML changes are required to use this file.

   Consolidates, on a class-for-class basis:
     - styles.css / styles-v2.css  (superseded - not linked by any
       current page; their unique classes, e.g. .accordion-*,
       .timeline-*, .ug-footer, do not appear in current markup, so
       nothing from them is missing here. Kept only for history.)
     - styles-v3.css                (the live core design system)
     - css/legal-pages-v3.css       (legal page shell)
     - blog/article.css + blog/blog.css (near-duplicate content;
       merged here into one set of rules instead of two)
     - cyber-toolkit/css/cyber-toolkit-landing.css
     - services/css/services-v2.css (same "dashboard" component
       family as the cyber-toolkit stylesheet - merged together)

   PILOT STATUS: this file is not yet linked from any page. Nothing
   in this repo currently loads it. Swapping <link rel="stylesheet">
   tags over happens after visual sign-off, as a separate task.
   ============================================================ */


/* ── 0. Fonts ──────────────────────────────────────────────────
   Brand faces self-hosted in /fonts/ (live since 2026-09-15):
   Neue Regrade 300/600 (display/body) and Monomials 400 (mono).
   Google Fonts import below stays as the fallback pipeline. */
@font-face {
  font-family: 'Neue Regrade';
  src: url('/fonts/neue-regrade-300.woff2') format('woff2');
  font-weight: 300 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Neue Regrade';
  src: url('/fonts/neue-regrade-600.woff2') format('woff2');
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Monomials';
  src: url('/fonts/monomials-400.woff2') format('woff2');
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');


/* ── 1. Design tokens: Graphite & Pulse ───────────────────────
   Dark ("Graphite") is the default and applies via :root so pages
   render correctly even before the theme-detection script runs.
   Light ("Paper") was retired in the site-wide dark-only sweep:
   [data-theme="light"] below now pins the same dark values, so a
   stray attribute can never light-theme a page.
   Corrected values (2026-08-30, plan/06 §10) are used directly -
   NOT the plan/01 draft values they replaced. */

:root,
[data-theme="dark"] {
  /* surfaces - neutral graphite, no blue cast */
  --bg-0: #0B0B0C;
  --bg-1: #121214;
  --bg-2: #1A1A1D;
  --bg-glass: rgba(255, 255, 255, .05);
  --bg-glass-brd: rgba(255, 255, 255, .10);
  --sheen: rgba(255, 255, 255, .04);

  /* text */
  --text-hi: #FFFFFF;
  --text-body: rgba(255, 255, 255, .74);
  --text-mute: rgba(255, 255, 255, .48);

  /* brand accent */
  --accent: #3CDBC0;
  --accent-ink: #06231E;
  --accent-soft: rgba(60, 219, 192, .10);
  --prussian-tint: rgba(0, 49, 82, .55);
  --stat: #3CDBC0;

  /* lines */
  --line: rgba(255, 255, 255, .09);

  /* the one non-brand hue: urgent / risk, plan/06 §7 */
  --risk: #FF7A66;
  --risk-bg: rgba(255, 122, 102, .09);
  --risk-brd: rgba(255, 122, 102, .30);

  /* secondary semantic: warning (distinct severity from risk in
     article callouts - judgment call, see report) */
  --warn: #F4C542;
  --warn-bg: rgba(244, 197, 66, .08);
  --warn-brd: rgba(244, 197, 66, .32);

  /* code / mono surfaces */
  --code-bg: #101012;

  /* footer stays dark in BOTH themes (brand anchor, plan/01 §3) */
  --footer-bg-top: #0B0B0C;
  --footer-bg-bottom: #06131C;
  --footer-text: rgba(255, 255, 255, .62);
  --footer-heading: rgba(255, 255, 255, .85);
  --footer-link: rgba(255, 255, 255, .58);
  --footer-caption: rgba(255, 255, 255, .56); /* corrected 3.52:1 -> 6.46:1, plan/06 §10 */
  --footer-line: rgba(255, 255, 255, .09);
  --footer-brd-top: rgba(60, 219, 192, .18);
}

/* Dark-only sweep: [data-theme="light"] now pins the SAME dark values
   as :root, so a stray attribute can never light-theme a page. */
[data-theme="light"] {
  /* surfaces - neutral graphite, no blue cast */
  --bg-0: #0B0B0C;
  --bg-1: #121214;
  --bg-2: #1A1A1D;
  --bg-glass: rgba(255, 255, 255, .05);
  --bg-glass-brd: rgba(255, 255, 255, .10);
  --sheen: rgba(255, 255, 255, .04);

  /* text */
  --text-hi: #FFFFFF;
  --text-body: rgba(255, 255, 255, .74);
  --text-mute: rgba(255, 255, 255, .48);

  /* brand accent */
  --accent: #3CDBC0;
  --accent-ink: #06231E;
  --accent-soft: rgba(60, 219, 192, .10);
  --prussian-tint: rgba(0, 49, 82, .55);
  --stat: #3CDBC0;

  /* lines */
  --line: rgba(255, 255, 255, .09);

  /* the one non-brand hue: urgent / risk, plan/06 §7 */
  --risk: #FF7A66;
  --risk-bg: rgba(255, 122, 102, .09);
  --risk-brd: rgba(255, 122, 102, .30);

  /* secondary semantic: warning */
  --warn: #F4C542;
  --warn-bg: rgba(244, 197, 66, .08);
  --warn-brd: rgba(244, 197, 66, .32);

  /* code / mono surfaces */
  --code-bg: #101012;

  /* footer stays dark in BOTH themes (brand anchor, plan/01 §3) */
  --footer-bg-top: #0B0B0C;
  --footer-bg-bottom: #06131C;
  --footer-text: rgba(255, 255, 255, .62);
  --footer-heading: rgba(255, 255, 255, .85);
  --footer-link: rgba(255, 255, 255, .58);
  --footer-caption: rgba(255, 255, 255, .56);
  --footer-line: rgba(255, 255, 255, .09);
  --footer-brd-top: rgba(60, 219, 192, .18);
}

/* Structural tokens: same across both themes */
:root {
  --font-display: "Neue Regrade", "Space Grotesk", "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Monomials", "Space Mono", "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  /* Corners stay sharp (plan/01 §4 "dial 2/10"): 4-8px scale for
     cards/panels/inputs. Buttons are the one deliberate exception
     and stay pill-shaped (brand-guidelines-dev.md §6). */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --shadow-soft: 0 12px 24px rgba(0, 0, 0, .24);
  --shadow-hover: 0 18px 32px rgba(0, 0, 0, .28);

  --transition-base: 240ms cubic-bezier(0.22, 1, 0.36, 1);
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  --max-width: 1200px;

  --gradient-brand: linear-gradient(135deg, var(--accent) 0%, var(--prussian-tint) 100%);
}


/* ── 2. Reset & base ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-display);
  background: var(--bg-0);
  color: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background var(--transition-base), color var(--transition-base);
}

body.nav-open { overflow: hidden; }

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

a { color: inherit; text-decoration: none; }

/* Global keyboard focus ring */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ── 3. Skip link ──────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--accent-ink);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 2000;
  transition: top 120ms ease;
  font-weight: 700;
}

.skip-link:focus {
  top: 1rem;
  outline-offset: 4px;
}


/* ── 4. Layout helpers ─────────────────────────────────────── */
.container {
  width: min(100% - 2rem, var(--max-width));
  margin-inline: auto;
  padding-inline: clamp(1rem, 3vw, 1.5rem);
}

.section {
  padding: clamp(3rem, 7vw, 5.5rem) 0;
  position: relative;
}

.section--dark {
  /* Flat accent tint, both themes (spec 2026-09-13-light-theme-
     gradient-cleanup section 3.2). The old gradient used --prussian-tint,
     which is deliberately opaque in light theme for .bl-avatar; that
     made this section a solid navy patch in light theme instead of a
     subtle wash. --accent-soft is translucent in both themes. */
  background: var(--accent-soft);
}

.section--tinted {
  background: var(--bg-1);
}

.section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--line) 50%, transparent 100%);
}

.section:first-of-type::before { display: none; }

.section-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
}

.section-header h2 {
  font-size: clamp(2rem, 4vw, 2.75rem);
}

.section-intro { color: var(--text-body); }

.section-cta {
  text-align: center;
  margin-top: clamp(2rem, 4vw, 3rem);
}


/* ── 5. Typography ─────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-hi);
  margin: 0 0 0.75rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p { margin: 0 0 1rem; }

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

/* Typewriter cursor (indexv2.js) */
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  background: var(--accent);
  border-radius: 2px;
  margin-left: 3px;
  vertical-align: baseline;
  position: relative;
  top: 0.08em;
  animation: cursor-blink 0.75s step-end infinite;
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .typewriter-cursor { animation: none; opacity: 0; }
}


/* ── 6. Buttons ──────────────────────────────────────────────
   Brand standard: 6px radius (no pill). Primary = blue gradient
   (#0767BB → #0554A3 → #04438E), white text. Secondary/outline =
   teal outline, teal text. Danger = the risk hue, for
   urgent/incident CTAs. Doubled-class selectors (.btn.btn-primary)
   give 0-2-0 specificity so body.tools-v2 a / body.static-v2 a
   (0-1-2) can never override button text color again. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: clamp(0.75rem, 2vw, 0.85rem) clamp(1.5rem, 4vw, 1.8rem);
  border-radius: 6px;
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: clamp(0.85rem, 2vw, 0.95rem);
  letter-spacing: 0.04em;
  min-height: 48px;
  transition: transform var(--transition-base), box-shadow var(--transition-base),
              background var(--transition-base), border-color var(--transition-base),
              filter var(--transition-base), color var(--transition-base);
  cursor: pointer;
}

.btn.btn-primary {
  background: linear-gradient(135deg, #0767BB 0%, #0554A3 55%, #04438E 100%);
  border-color: transparent;
  color: #FFFFFF;
  box-shadow: 0 2px 14px rgba(5, 84, 163, .28);
}

.btn.btn-primary:hover,
.btn.btn-primary:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 22px rgba(5, 84, 163, .46);
  color: #FFFFFF;
}

.btn.btn-primary:focus-visible {
  outline: 2px solid #0554A3;
  outline-offset: 3px;
}

.btn.btn-secondary,
.btn.btn-outline {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}

.btn.btn-secondary:hover,
.btn.btn-secondary:focus-visible,
.btn.btn-outline:hover,
.btn.btn-outline:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
}

.btn.btn-danger {
  background: var(--risk);
  border-color: var(--risk);
  color: #FFFFFF;
}

.btn.btn-danger:hover,
.btn.btn-danger:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow: 0 12px 28px var(--risk-bg);
  color: #FFFFFF;
}

.btn:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .btn:hover { transform: none; }
}

/* Inline article/CTA button (blog-content, cta-section) - same
   primary treatment, kept as its own class for existing markup.
   Doubled class = 0-2-0 specificity guard against body-class link
   color rules. */
.cta-button.cta-button {
  display: inline-block;
  background: linear-gradient(135deg, #0767BB 0%, #0554A3 55%, #04438E 100%);
  color: #FFFFFF;
  padding: 0.85rem 1.75rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  transition: filter 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
  margin: 0.4rem;
  border: 1px solid transparent;
  box-shadow: 0 2px 14px rgba(5, 84, 163, .28);
}

.cta-button.cta-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 22px rgba(5, 84, 163, .46);
  color: #FFFFFF;
}


/* ── 7. Badges, chips & pills ──────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.impact-badge {
  justify-self: flex-start;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--risk-bg);
  color: var(--risk);
  border: 1px solid var(--risk-brd);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
}

.status-pill--danger {
  color: var(--risk);
  background: var(--risk-bg);
  border-color: var(--risk-brd);
}

.status-pill__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px currentColor;
  opacity: 0.9;
  animation: pill-pulse 1.8s ease-in-out infinite;
}

@keyframes pill-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .status-pill__dot { animation: none; }
}


/* ── 8. Header & navigation ──────────────────────────────────
   Glass nav per the plan/01 §4 liquid-glass recipe. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg-glass);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--transition-base), border-color var(--transition-base);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--bg-1); }
}

.site-header.scrolled {
  box-shadow: var(--shadow-soft);
  border-bottom-color: var(--accent-soft);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1rem 0;
}

.brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.brand img {
  width: clamp(120px, 14vw, 160px);
  height: auto;
  display: block;
}

.desktop-nav { display: none; }

.desktop-nav .nav-list {
  display: flex;
  align-items: center;
  gap: clamp(0.25rem, 1.5vw, 1.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.desktop-nav a {
  color: var(--text-body);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.4rem 0.6rem;
  border-radius: var(--radius-sm);
  position: relative;
  transition: color var(--transition-base);
  white-space: nowrap;
}

.desktop-nav a::after {
  content: '';
  position: absolute;
  inset-inline: 0.6rem;
  bottom: -0.1rem;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible { color: var(--accent); }

.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after { transform: scaleX(1); }

.desktop-nav .nav-cta {
  background: linear-gradient(135deg, #0767BB 0%, #0554A3 55%, #04438E 100%);
  border: 1px solid transparent;
  color: #FFFFFF !important;
  padding: 0.55rem 1.1rem;
  border-radius: 6px;
  font-weight: 700;
  transition: transform var(--transition-base), filter var(--transition-base);
}

.desktop-nav .nav-cta::after { display: none; }

.desktop-nav .nav-cta:hover,
.desktop-nav .nav-cta:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 4px 22px rgba(5, 84, 163, .46);
  color: #FFFFFF !important;
}

/* Hamburger */
.hamburger {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  color: var(--text-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
  flex-shrink: 0;
}

.hamburger:hover,
.hamburger:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: scale(1.05);
}

.brand-logo {
  height: 52px;
  width: auto;
  display: block;
  color: var(--text-hi);
}

/* Utilities */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Nav controls (theme toggle + hamburger) */
.nav-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.theme-toggle {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
  color: var(--text-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
  transform: scale(1.05);
}

.theme-toggle__icon {
  width: 20px;
  height: 20px;
}

.theme-toggle__icon--sun { display: none; }
.theme-toggle__icon--moon { display: block; }

.theme-toggle--mobile {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

/* Mobile nav overlay + drawer */
.nav-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
  z-index: 1500;
  pointer-events: none;
}

@supports (backdrop-filter: blur(6px)) {
  .nav-overlay {
    background: rgba(0, 0, 0, .40);
    backdrop-filter: blur(6px);
  }
}

.nav-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav {
  width: min(90vw, 320px);
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-glass);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-radius: var(--radius-lg);
  padding: 3.5rem 1.75rem 1.75rem;
  position: fixed;
  top: 50%;
  right: 1.25rem;
  transform: translateY(-50%) translateX(25px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--transition-base), opacity var(--transition-base), visibility var(--transition-base);
  box-shadow: var(--shadow-soft);
  z-index: 1600;
  border: 1px solid var(--bg-glass-brd);
  pointer-events: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mobile-nav { background: var(--bg-2); }
}

.mobile-nav.active {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-links {
  display: grid;
  gap: 1rem;
  position: relative;
  z-index: 10;
  width: 100%;
}

.mobile-nav-links .nav-link {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 700;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text-hi);
  text-align: left;
  display: block;
  transition: background var(--transition-base), color var(--transition-base);
  cursor: pointer;
}

.mobile-nav-links .nav-link:hover,
.mobile-nav-links .nav-link:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
}

.nav-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}

.mobile-nav-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.mobile-nav-brand img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  opacity: 0.95;
}

.nav-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 36px;
  height: 36px;
  background: var(--accent-soft);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--text-hi);
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base), border-color var(--transition-base);
  z-index: 100;
}

.nav-close:hover,
.nav-close:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

/* Toolkit nav dropdown - plan/06 §5 "Toolkit is a dropdown listing all
   four [now seven] tools by name". Trigger styling matches .desktop-nav a;
   panel reuses the same card/shadow tokens as .mobile-nav. The panel's
   base visibility is the `hidden` attribute (set in markup, toggled by
   js/navbar.js) so it degrades safely on pages that don't load this
   stylesheet yet - only the open (:not([hidden])) state gets positioned
   here, so there's no conflict with the browser's native [hidden] rule. */
.nav-dropdown { position: relative; }

.nav-dropdown-trigger {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  border-radius: var(--radius-sm);
  transition: color var(--transition-base);
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible,
.nav-dropdown-trigger[aria-expanded="true"] {
  color: var(--accent);
}

.nav-dropdown-caret {
  transition: transform var(--transition-base);
}

.nav-dropdown-trigger[aria-expanded="true"] .nav-dropdown-caret {
  transform: rotate(180deg);
}

.nav-dropdown-panel:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  min-width: 230px;
  margin: 0;
  padding: 0.5rem;
  list-style: none;
  background: var(--bg-2);
  border: 1px solid var(--bg-glass-brd);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  z-index: 1100;
  /* Nine entries can outgrow a short landscape viewport. */
  max-height: min(70vh, 26rem);
  overflow-y: auto;
}

.nav-dropdown-panel a {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-body);
  padding: 0.55rem 0.7rem;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base);
}

.nav-dropdown-panel a:hover,
.nav-dropdown-panel a:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Breadcrumbs - used unscoped (service pages) and previously
   scoped under .legal-page-shell (legal pages); one rule now
   serves both markup patterns. */
.breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  flex-wrap: wrap;
  padding: 1.25rem 0 0;
  font-size: 0.85rem;
  color: var(--text-mute);
}

.legal-page-shell .breadcrumbs {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 0.6rem 0.95rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.breadcrumbs a { color: var(--text-mute); text-decoration: none; transition: color var(--transition-base); }
.breadcrumbs a:hover,
.breadcrumbs a:focus-visible { color: var(--accent); }
.breadcrumbs span[aria-current="page"] { color: var(--text-hi); }


/* ── 9. Hero - homepage ──────────────────────────────────────
   Chevron motif per brand-guidelines-dev.md §5. */
.hero {
  padding-top: clamp(4rem, 10vw, 6rem);
  padding-bottom: clamp(3rem, 8vw, 5rem);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%233CDBC0' stroke-width='2' opacity='0.06'%3E%3Cpath d='M18 20 L8 36 L18 52'/%3E%3Cpath d='M38 20 L28 36 L38 52'/%3E%3Cpath d='M56 28 L64 36 L56 44'/%3E%3C/g%3E%3C/svg%3E") repeat,
    var(--bg-0);
  background-size: 144px 144px;
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  gap: clamp(2rem, 8vw, 4rem);
}

.hero-content h1 {
  font-size: clamp(2.4rem, 6vw, 3.4rem);
  margin-bottom: 1rem;
}

.hero-subtext {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  color: var(--text-body);
  max-width: 46ch;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.75rem;
  justify-content: center;
}

/* Glass hero card recipe (plan/01 §4) */
.hero-card {
  background: linear-gradient(155deg, var(--sheen) 0%, transparent 45%), var(--bg-glass);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--bg-glass-brd);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow-soft);
  min-height: 100%;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-card { background: var(--bg-2); }
}

.hero-card-title {
  font-size: 1.25rem;
  color: var(--text-hi);
  font-weight: 600;
  margin: 1rem 0 1.5rem;
}

.hero-features {
  display: grid;
  gap: 1.25rem;
  margin-top: 0.5rem;
}

.hero-feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-feature-item img { flex-shrink: 0; opacity: 0.9; }

.hero-feature-item p {
  margin: 0;
  color: var(--text-body);
  font-size: 0.95rem;
  line-height: 1.4;
}

/* Hero image slot (plan/06 §12 decision 4: hero now takes a photo).
   Duotone stand-in + the scrim any text-bearing gradient needs
   (plan/06 §10 "CTA gradient needs a scrim" - applied here too). */
.hero-media {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    repeating-linear-gradient(135deg, transparent 0 13px, var(--sheen) 13px 26px),
    linear-gradient(118deg, var(--prussian-tint) 0%, rgba(60, 219, 192, .22) 55%, transparent 100%);
}

.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--bg-0) 0%, color-mix(in srgb, var(--bg-0) 88%, transparent) 42%, color-mix(in srgb, var(--bg-0) 62%, transparent) 100%);
}


/* ── 10. Hero - toolkit / service "dashboard" pages ───────────
   cyber-toolkit/index.html and /services/* share this pattern. */
.toolkit-hero {
  padding: clamp(28px, 6vw, 56px) 0 clamp(20px, 4vw, 40px);
}

.toolkit-hero h1 {
  font-size: clamp(1.95rem, 5.6vw, 2.95rem);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-bottom: 14px;
}

.toolkit-hero h1 .accent { color: var(--accent); }

.toolkit-hero .lead {
  color: var(--text-body);
  font-size: 1.02rem;
  max-width: 60ch;
  margin: 0 0 24px;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
}

@media (min-width: 880px) {
  .dashboard-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
}

.hero-meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  color: var(--text-mute);
  font-size: 0.85rem;
}

.hero-meta__item { font-weight: 600; }
.hero-meta__sep { color: var(--line); }


/* ── 11. Card grids & core card types ─────────────────────── */
.card-grid {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.card-grid--four { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.card-grid--three { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.info-card,
.service-card,
.about-card,
.contact-card {
  background: linear-gradient(155deg, var(--sheen) 0%, transparent 45%), var(--bg-2);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-soft);
  border: 1px solid var(--line);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
  position: relative;
}

.about-card { text-align: center; }

.info-card:hover, .info-card:focus-within,
.service-card:hover, .service-card:focus-within {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}

/* Clickable service cards: visible "Learn more" affordance.
   Scoped to <a> so the info-only <article> cards stay neutral. */
a.service-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  color: inherit;
}

a.service-card::after {
  content: "Learn more \2192";
  margin-top: auto;
  padding-top: 1rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  align-self: flex-start;
  transition: transform var(--transition-base), color var(--transition-base);
}

a.service-card:hover::after,
a.service-card:focus-visible::after { transform: translateX(4px); }

article.service-card { cursor: default; }

article.service-card:hover,
article.service-card:focus-within {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

@media (prefers-reduced-motion: reduce) {
  a.service-card::after { transition: none; }
}

.contact-card:hover, .contact-card:focus-within,
.about-card:hover, .about-card:focus-within {
  will-change: transform;
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}

.info-card:focus-visible, .service-card:focus-visible,
.contact-card:focus-visible, .about-card:focus-visible,
.tool-card:focus-visible, .stat-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

@media (hover: none) and (pointer: coarse) {
  .info-card:active, .service-card:active,
  .contact-card:active, .about-card:active {
    transform: scale(0.98);
  }
}

.about-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 1.25rem;
  transition: transform var(--transition-spring);
}

.about-card:hover .about-icon { transform: translateY(-4px); }
.about-card:hover .about-icon img { transform: scale(1.08); }
.about-icon img { transition: transform var(--transition-spring); }

.about-card h3 { color: var(--accent); font-size: 1.35rem; }
.about-card p { color: var(--text-body); line-height: 1.7; }

.info-card img, .service-card img {
  margin-inline: auto;
  margin-bottom: 1.25rem;
}

@media (max-width: 640px) {
  .info-card, .service-card, .about-card, .contact-card, .tool-card {
    box-shadow: 0 8px 16px rgba(0, 0, 0, .18);
  }
}


/* ── 12. Tool cards ────────────────────────────────────────── */
.tool-card {
  background: var(--bg-2);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2rem);
  box-shadow: var(--shadow-soft), 0 0 0 1px var(--bg-glass-brd) inset;
  border: 1px solid var(--line);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}

.tool-card:hover, .tool-card:focus-within {
  will-change: transform;
  transform: translateY(-8px);
  border-color: var(--accent);
  box-shadow: var(--shadow-hover);
}

.tool-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-inline: auto;
  margin-bottom: 1.25rem;
  background: var(--accent-soft);
  border-radius: var(--radius-md);
}

.tool-icon img { width: 40px; height: 40px; }

.tool-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  margin-top: 1.5rem;
}

.tool-link::after { content: ">"; transition: transform var(--transition-base); }
.tool-card:hover .tool-link::after { transform: translateX(4px); }


/* ── 13. Dashboard components (toolkit + services) ────────────
   Shared by cyber-toolkit/index.html and /services/*. */
.toolkit-page p, .service-page p { line-height: 1.7; max-width: 65ch; }

.toolkit-section { padding: clamp(28px, 5vw, 56px) 0; }
.toolkit-section__head { margin-bottom: clamp(20px, 3vw, 28px); }
.toolkit-section__head h2 { font-size: clamp(1.5rem, 3.2vw, 1.9rem); margin: 8px 0; }
.toolkit-section__head p { color: var(--text-body); max-width: 60ch; margin: 0; }

/* "Featured" promo card - the hero's right-column card on
   toolkit/service dashboards. Distinct BEM children from the blog
   listing's .featured-card (§18) so both share this base safely. */
.featured-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 30px);
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.featured-card--danger {
  border-color: var(--risk-brd);
  background: var(--risk-bg);
}

.featured-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.featured-card--danger .featured-card__eyebrow { color: var(--risk); }

.featured-card h2 { font-size: clamp(1.2rem, 3vw, 1.5rem); margin: 0; }

.featured-card__body { color: var(--text-body); font-size: 0.98rem; margin: 0; }

.featured-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.featured-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--text-body);
  font-size: 0.95rem;
  line-height: 1.5;
}

.featured-card__list li::before {
  content: "";
  flex-shrink: 0;
  margin-top: 6px;
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.featured-card--danger .featured-card__list li::before { background: var(--risk); box-shadow: 0 0 0 3px var(--risk-bg); }

.featured-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 22px;
  border-radius: 6px;
  background: linear-gradient(135deg, #0767BB 0%, #0554A3 55%, #04438E 100%);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-weight: 700;
  min-height: 48px;
  transition: filter var(--transition-base), transform 160ms var(--transition-base);
  align-self: flex-start;
}

.featured-card__cta:hover { filter: brightness(1.08); }
.featured-card__cta:active { transform: scale(0.97); }

.featured-card__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 0.8rem;
  color: var(--text-mute);
}

.featured-card__trust span { display: inline-flex; align-items: center; gap: 6px; }
.featured-card__trust span::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.featured-card--danger .featured-card__trust span::before { background: var(--risk); }

@media (hover: hover) and (pointer: fine) {
  .featured-card:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); }
}

/* Metric panel (cyber-toolkit only) */
.metric-panel {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-soft);
}

.metric-panel__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.metric-panel__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--text-mute);
}
.metric-panel h2 { font-size: 1.1rem; margin: 12px 0 18px; }

.metric-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.metric-tile {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 14px;
}
.metric-tile--wide {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--accent-soft) 0%, var(--accent-soft) 100%);
  border-color: var(--accent);
}
.metric-tile__value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 1.8rem);
  color: var(--text-hi);
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.metric-tile--wide .metric-tile__value { font-size: clamp(1.05rem, 2.6vw, 1.25rem); color: var(--accent); }
.metric-tile__label { font-size: 0.78rem; color: var(--text-mute); margin-top: 4px; }

.metric-panel__inside-label {
  margin: 18px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--text-mute);
}
.metric-panel__inside { display: grid; gap: 6px; }
.metric-panel__inside a {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 14px; min-height: 44px; font-size: 0.92rem;
  color: var(--text-hi);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  transition: background var(--transition-base), border-color var(--transition-base), transform 160ms var(--transition-base);
}
.metric-panel__inside a > span:first-child { display: inline-flex; align-items: center; gap: 10px; }
.metric-panel__inside a > span:first-child::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0;
}
.metric-panel__inside-chev { color: var(--accent); font-size: 1.1rem; line-height: 1; transition: transform var(--transition-base); }
@media (hover: hover) and (pointer: fine) {
  .metric-panel__inside a:hover { background: var(--accent-soft); border-color: var(--accent); }
  .metric-panel__inside a:hover .metric-panel__inside-chev { transform: translateX(3px); }
}
.metric-panel__inside a:active { transform: scale(0.99); }

/* Feature-card grid (cyber-toolkit "explore the toolkit") */
.feature-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .feature-grid, .feature-grid--3 { grid-template-columns: 1fr 1fr 1fr; } }
@media (min-width: 1100px) { .feature-grid--4 { grid-template-columns: repeat(4, 1fr); } }
/* Live-review fix (2026-09-13): a single leftover card in a 3-column
   row read as broken, pinned left with empty space beside it. Cap its
   width to what it would have been in the full row and centre it, so
   it reads as one deliberately highlighted item. Only fires when a
   row has exactly one child, so full 3-card rows are untouched. */
@media (min-width: 960px) { .feature-grid--3:has(> :only-child) { grid-template-columns: minmax(0, 380px); justify-content: center; } }

.feature-card {
  position: relative;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.feature-card--danger .feature-card__icon { background: var(--risk-bg); }
.feature-card--danger .feature-card__icon .icon { color: var(--risk); }
.feature-card__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  background: var(--accent-soft);
  display: grid; place-items: center;
}
.feature-card__icon img { width: 32px; height: 32px; }
.feature-card__icon .icon { width: 28px; height: 28px; color: var(--accent); }
.feature-card h3 { font-size: 1.1rem; margin: 0; }
.feature-card h3 a { color: var(--text-hi); text-decoration: none; }
.feature-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 0; }
.feature-card__body { color: var(--text-body); font-size: 0.95rem; margin: 0; }
.feature-card__meta { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.78rem; color: var(--text-mute); letter-spacing: 0.04em; }
.feature-card__arrow {
  margin-top: auto; color: var(--accent); font-weight: 700; font-size: 0.9rem;
  display: inline-flex; align-items: center; gap: 6px; transition: gap var(--transition-base);
}
.feature-card__related { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px; position: relative; z-index: 1; }
.feature-card__related a {
  font-size: 0.78rem; color: var(--text-mute); text-decoration: none; padding: 6px 10px;
  border-radius: var(--radius-pill); background: var(--bg-1); border: 1px solid var(--line);
  min-height: 32px; display: inline-flex; align-items: center;
  transition: color var(--transition-base), border-color var(--transition-base);
}
@media (hover: hover) and (pointer: fine) {
  .feature-card:hover { border-color: var(--accent); box-shadow: var(--shadow-hover); transform: translateY(-2px); }
  .feature-card:hover .feature-card__arrow { gap: 10px; }
  .feature-card__related a:hover { color: var(--text-hi); border-color: var(--line); }
}
.feature-card h3 a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }

/* Trust grid (cyber-toolkit) */
.trust-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 560px) { .trust-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 880px) { .trust-grid { grid-template-columns: 1fr 1fr 1fr; } }
.trust-card { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 20px; }
.trust-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.trust-card__head img { width: 24px; height: 24px; }
.trust-card__head .icon--sm { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.trust-card h3 { font-size: 0.98rem; margin: 0; }
.trust-card ul { list-style: none; margin: 0; padding: 0; }
.trust-card li { border-top: 1px solid var(--line); }
.trust-card li:first-child { border-top: 0; }
.trust-card a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 0; min-height: 44px; text-decoration: none; color: var(--text-hi); font-size: 0.92rem;
  position: relative; transition: color var(--transition-base), padding-right var(--transition-base);
}
.trust-card a::after {
  content: "\203A"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  color: var(--accent); font-size: 1.1rem; opacity: 0; transition: opacity var(--transition-base), transform var(--transition-base);
}
.trust-card a span { font-size: 0.78rem; color: var(--text-mute); text-align: right; }
@media (hover: hover) and (pointer: fine) {
  .trust-card a:hover { color: var(--accent); padding-right: 16px; }
  .trust-card a:hover::after { opacity: 1; transform: translate(3px, -50%); }
}

/* Habits / FAQ accordion (cyber-toolkit + services) */
.habits-list { display: grid; gap: 10px; }
.habit-item { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition-base); }
.habit-item[open] { border-color: var(--accent); }
.habit-summary { display: flex; align-items: center; gap: 14px; padding: 14px 18px; min-height: 56px; cursor: pointer; list-style: none; }
.habit-summary::-webkit-details-marker { display: none; }
.habit-num {
  width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem; display: grid; place-items: center; flex-shrink: 0;
}
.habit-title { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text-hi); }
.habit-chevron { color: var(--text-mute); transition: transform var(--transition-base); font-size: 1.2rem; line-height: 1; }
.habit-item[open] .habit-chevron { transform: rotate(90deg); }
.habit-body { padding: 0 18px 18px 64px; color: var(--text-body); max-width: 65ch; margin: 0; line-height: 1.7; font-size: 0.95rem; }
.habit-summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Numbered step list (services) */
.step-list { display: grid; gap: 12px; }
.step-item {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md);
  padding: 18px 20px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-base);
}
.step-item__num {
  width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent);
  font-family: var(--font-mono); font-weight: 700; font-size: 1rem; display: grid; place-items: center; flex-shrink: 0;
}
.step-item__content h3 { font-size: 1.05rem; margin: 0 0 6px; }
.step-item__content p { color: var(--text-body); margin: 0; font-size: 0.95rem; line-height: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .step-item:hover { border-color: var(--accent); box-shadow: var(--shadow-soft); }
}

/* Stat row / stat tile (services - distinct from homepage's
   .stats-grid/.stat-card, §16) */
.stat-row { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .stat-row { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
/* Live-review fix (2026-09-13): same reasoning as the feature-grid--3
   fix above, applied to a lone stat tile in what was a 3-tile row. */
@media (min-width: 960px) { .stat-row:has(> :only-child) { grid-template-columns: minmax(0, 380px); justify-content: center; } }
/* Phase 3 gradient/motion cleanup (2026-09-13): the same 2-of-3 gap
   problem, one child short of the only-child case above. Fires only
   when a row has exactly 2 children, so 1-child and 3-child rows are
   both untouched. First used by services/popia-compliance/index.html,
   written generally so any future 2-item stat-row benefits too. */
@media (min-width: 960px) { .stat-row:has(> :nth-child(2):last-child) { grid-template-columns: 1fr 1fr; } }
.stat-tile { background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.stat-tile--accent { background: var(--accent-soft); border-color: var(--accent); }
.stat-tile__badge {
  align-self: flex-start; font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--line);
  padding: 4px 10px; border-radius: var(--radius-pill); margin-bottom: 4px;
}
.stat-tile__badge--danger { color: var(--risk); background: var(--risk-bg); border-color: var(--risk-brd); }
.stat-tile__value { font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 5vw, 2.6rem); color: var(--text-hi); letter-spacing: -0.01em; line-height: 1.3; }
.stat-tile--accent .stat-tile__value { color: var(--accent); }
.stat-tile__label { font-size: 1rem; color: var(--text-hi); margin: 0; }
.stat-tile__copy { color: var(--text-body); font-size: 0.9rem; margin: 0; line-height: 1.55; }
.stat-tile__source { font-size: 0.76rem; color: var(--text-mute); letter-spacing: 0.04em; margin-top: auto; padding-top: 4px; }

/* Toolkit / service CTA band */
.toolkit-cta {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 40px);
  text-align: center;
  box-shadow: var(--shadow-soft);
  margin: clamp(24px, 5vw, 56px) 0;
}
.toolkit-cta .eyebrow { margin-bottom: 10px; }
.toolkit-cta h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin: 0 0 10px; }
.toolkit-cta p { color: var(--text-body); max-width: 55ch; margin: 0 auto 22px; }
.toolkit-cta__buttons { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Service-page contact card grid (distinct DOM shape from the
   homepage .contact-card in §16 - coexists via the __icon child) */
.contact-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.contact-card__icon {
  width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--accent-soft);
  display: grid; place-items: center; margin-bottom: 4px;
}
.contact-card__icon img { width: 18px; height: 18px; }
.contact-card:has(.contact-card__icon) {
  padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; text-align: left;
}
.contact-card:has(.contact-card__icon) h3 {
  font-family: var(--font-mono); font-size: 0.85rem; margin: 0; color: var(--text-mute);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700;
}
.contact-card:has(.contact-card__icon) a,
.contact-card:has(.contact-card__icon) p { color: var(--text-hi); font-size: 0.95rem; margin: 0; word-break: break-word; }
.contact-card:has(.contact-card__icon) a:hover { color: var(--accent); }

/* Fade-in entry (IntersectionObserver-driven, toolkit + services) */
.fade-in {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms var(--transition-base), transform 280ms var(--transition-base);
}
.fade-in.visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-in.visible { opacity: 1; transform: none; transition: none; }
}

@media (prefers-contrast: high) {
  .feature-card, .step-item, .habit-item, .stat-tile, .featured-card, .contact-card,
  .trust-card, .metric-panel, .tool-card { border-width: 2px; }
}


/* ── 14. Statistics section - homepage ────────────────────────
   The old coral "danger" accent is retired (brand-guidelines-dev.md
   §3); these are alarming SA-crisis stats, so they inherit the
   brand's one sanctioned non-brand hue, --risk, the same way the
   urgent bar does (plan/06 §7) - a deliberate extension, noted in
   the report as a judgment call. */
/* Bottom clearance for the fixed Elfsight review badge (spec
   2026-09-13-whatsapp-plausible-badge-placement-design.md §3.3
   Option B). The badge is a closed-shadow-DOM third-party widget
   with no reachable CSS handle, so this pushes this site's own
   content out of its known bottom-left footprint instead of trying
   to restyle it. */
#statistics {
  padding-bottom: 96px;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.stat-card {
  background: var(--bg-2);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border: 1px solid var(--risk-brd);
  border-top: 3px solid var(--risk);
  box-shadow: var(--shadow-soft);
  display: grid;
  gap: 0.75rem;
  transition: border-top-color var(--transition-base), box-shadow var(--transition-base);
}

.stat-card:hover { box-shadow: var(--shadow-hover); }

.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 3.1rem);
  font-weight: 700;
  color: var(--stat);
}

.stat-source { font-size: 0.9rem; color: var(--text-mute); }


/* ── 15. Contact section & forms ──────────────────────────── */
.contact-layout { display: grid; gap: clamp(2rem, 5vw, 3rem); }
.contact-details { display: grid; gap: 1.25rem; }

/* Homepage .contact-card variant: bare centered <img>, no
   .contact-card__icon wrapper (that's the §13 service variant) */
.contact-card > img {
  display: block;
  margin-inline: auto;
  margin-bottom: 1rem;
  opacity: 0.9;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: var(--accent-soft);
  border-radius: 50%;
  transition: transform var(--transition-spring);
}

.contact-card:hover > img,
.contact-card:focus-within > img { transform: rotate(5deg) scale(1.1); }

.contact-card:not(:has(.contact-card__icon)) { text-align: center; }

.contact-label {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-hi);
  margin: 0 0 4px 0;
}

.contact-card a {
  color: var(--accent);
  font-weight: 600;
  word-break: break-word;
  transition: color var(--transition-base);
}

.contact-card a:hover,
.contact-card a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.contact-form-wrapper {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.contact-form { display: grid; gap: 1.25rem; }
.contact-form h3 { margin-bottom: 0.5rem; font-size: 1.35rem; }
.contact-form .form-group { margin-bottom: 0; }

.form-group { display: grid; gap: 0.5rem; }
.form-group label,
.contact-form label {
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  color: var(--text-hi);
}

.form-group input, .form-group select, .form-group textarea,
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-1);
  color: var(--text-hi);
  font-size: 1rem;
  font-family: var(--font-display);
  transition: box-shadow var(--transition-base), border-color var(--transition-base), background var(--transition-base);
}

.form-group textarea, .contact-form textarea { resize: vertical; min-height: 140px; }

.form-group input::placeholder, .form-group textarea::placeholder,
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--text-mute); }

.form-group input:hover:not(:focus):not(:disabled),
.contact-form input:hover:not(:focus):not(:disabled) { border-color: var(--text-mute); }

.form-group input:focus-visible, .form-group select:focus-visible, .form-group textarea:focus-visible,
.contact-form input:focus-visible, .contact-form textarea:focus-visible, .contact-form select:focus-visible {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-2);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.form-group input:user-invalid, .form-group select:user-invalid, .form-group textarea:user-invalid {
  border-color: var(--risk-brd);
}

.form-group input:user-invalid:focus-visible, .form-group select:user-invalid:focus-visible, .form-group textarea:user-invalid:focus-visible {
  box-shadow: 0 0 0 4px var(--risk-bg);
}

.form-submit {
  width: 100%;
  max-width: fit-content;
  margin-inline: auto;
}

.contact-form .form-submit { width: 100%; margin-top: 6px; max-width: none; }


/* ── 16. Footer - always dark, both themes ────────────────── */
.site-footer {
  padding: 4rem 0 2rem;
  background: linear-gradient(180deg, var(--footer-bg-top) 0%, var(--footer-bg-bottom) 100%);
  color: var(--footer-text);
  border-top: 1px solid var(--footer-brd-top);
  margin-top: 5rem;
  position: relative;
}

.legal-page-shell .site-footer { margin-top: 0; }

.footer-grid { display: grid; gap: 3rem; }

.footer-nav-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--footer-line);
}

.footer-column { display: flex; flex-direction: column; gap: 1.25rem; }

.footer-heading {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.footer-links, .footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.footer-links a {
  color: var(--footer-link);
  font-size: 0.95rem;
  transition: all var(--transition-base);
  display: inline-block;
  position: relative;
  padding-left: 1rem;
}

.footer-links a::before {
  content: '→';
  position: absolute;
  left: 0;
  opacity: 0;
  transform: translateX(-4px);
  transition: all var(--transition-base);
  color: var(--accent);
}

.footer-links a:hover, .footer-links a:focus-visible {
  color: var(--accent);
  padding-left: 1.25rem;
}

.footer-links a:hover::before, .footer-links a:focus-visible::before {
  opacity: 1;
  transform: translateX(0);
}

.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: var(--footer-link);
  font-size: 0.95rem;
  line-height: 1.6;
}

.footer-contact img { flex-shrink: 0; opacity: 0.85; margin-top: 2px; }

.footer-contact a { color: var(--footer-link); transition: all var(--transition-base); }

.footer-contact a:hover, .footer-contact a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-social { display: flex; justify-content: center; gap: 1.25rem; padding: 2rem 0; }

.footer-social a {
  background: var(--accent-soft);
  border: 2px solid var(--footer-line);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: all var(--transition-base);
}

.footer-social a:hover, .footer-social a:focus-visible {
  transform: translateY(-6px) scale(1.1);
  border-color: var(--accent);
  box-shadow: 0 8px 20px var(--accent-soft);
}

.footer-social a:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--footer-line);
  margin-bottom: 1rem;
}

.footer-brand img { width: 64px; height: 64px; border-radius: 50%; opacity: 0.9; }

.footer-tagline {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--footer-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
}

.footer-meta {
  text-align: center;
  color: var(--footer-caption);
  font-size: 0.9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--footer-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.footer-meta p { margin: 0; width: 100%; }
.footer-meta p:first-child { color: var(--footer-text); font-weight: 500; }

.footer-legal-notice { font-size: 0.85rem; color: var(--footer-caption); }


/* ── 17. Floating WhatsApp button ─────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  height: 56px;
  min-width: 56px;
  padding: 0;
  background: #25D366;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, .45);
  z-index: 999;
  overflow: hidden;
  white-space: nowrap;
  transition: transform var(--transition-spring), box-shadow var(--transition-base),
              padding 280ms var(--transition-base), opacity 200ms ease, bottom var(--transition-base);
  animation: wa-pulse 2.5s ease-in-out infinite;
}

.wa-float:hover, .wa-float:focus-visible {
  transform: scale(1.12) translateY(-3px);
  box-shadow: 0 8px 28px rgba(37, 211, 102, .6);
  animation: none;
  outline: none;
}

.wa-float:focus-visible { outline: 3px solid #25D366; outline-offset: 4px; }

.wa-float svg { width: 30px; height: 30px; fill: #ffffff; flex-shrink: 0; }

.wa-float__label {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: #ffffff;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  transition: max-width 280ms var(--transition-base) 80ms, opacity 140ms ease, margin-left 280ms var(--transition-base) 80ms;
}

.wa-float--with-label { padding: 0 22px 0 16px; }

.wa-float--with-label .wa-float__label {
  max-width: 180px;
  opacity: 1;
  margin-left: 10px;
  transition: max-width 280ms var(--transition-base), opacity 200ms ease 120ms, margin-left 280ms var(--transition-base);
}

.wa-float--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(20px) scale(0.9);
}

body.has-reviews-badge .wa-float { bottom: 96px; }

@keyframes wa-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(37, 211, 102, .45); }
  50% { box-shadow: 0 4px 28px rgba(37, 211, 102, .7), 0 0 0 10px rgba(37, 211, 102, .08); }
}

@media (prefers-reduced-motion: reduce) {
  .wa-float { animation: none; }
  .wa-float, .wa-float__label { transition-duration: 1ms !important; }
}

body.nav-open .wa-float {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}


/* ── 18. Scroll animations ────────────────────────────────────
   Two different scripts drive this site (indexv2.js adds
   .is-visible; the blog listing script adds .visible) - both
   selectors are supported so neither JS needs to change. */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.animate-on-scroll.is-visible,
.animate-on-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.card-grid .info-card, .card-grid .service-card, .card-grid .about-card,
.card-grid .contact-card, .card-grid .tool-card, .stats-grid .stat-card,
.contact-details .contact-card {
  opacity: 0;
  transform: translateY(20px) scale(0.96);
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
              border-color var(--transition-base), box-shadow var(--transition-base);
}

.card-grid .info-card.is-visible, .card-grid .service-card.is-visible, .card-grid .about-card.is-visible,
.card-grid .contact-card.is-visible, .card-grid .tool-card.is-visible, .stats-grid .stat-card.is-visible,
.contact-details .contact-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@media (min-width: 640px) {
  .card-grid .info-card:nth-child(even), .card-grid .service-card:nth-child(even) {
    transform: translateX(-15px) translateY(20px) scale(0.96);
  }
  .card-grid .info-card:nth-child(odd), .card-grid .service-card:nth-child(odd) {
    transform: translateX(15px) translateY(20px) scale(0.96);
  }
  .card-grid .info-card.is-visible, .card-grid .service-card.is-visible {
    transform: translateX(0) translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate-on-scroll,
  .card-grid .info-card, .card-grid .service-card, .card-grid .about-card,
  .card-grid .contact-card, .card-grid .tool-card, .stats-grid .stat-card,
  .contact-details .contact-card {
    opacity: 1;
    transform: none;
  }
}


/* ── 19. Legal pages ───────────────────────────────────────── */
.legal-page-shell {
  background:
    radial-gradient(circle at 10% 8%, var(--accent-soft), transparent 34%),
    radial-gradient(circle at 90% 12%, var(--accent-soft), transparent 40%),
    var(--bg-0);
  color: var(--text-body);
}

.legal-page-shell .seo-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.legal-page-shell .legal-breadcrumb-wrap { margin-top: 0.9rem; }

.legal-page-shell .policy-page {
  width: min(100% - 2rem, 940px);
  margin-inline: auto;
  padding: clamp(1.2rem, 3vw, 2rem) 0 clamp(3rem, 6vw, 4.5rem);
}

.legal-page-shell .policy-header {
  text-align: center;
  margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
}

.legal-page-shell .policy-header::before {
  content: "";
  position: absolute;
  width: 16rem; height: 16rem;
  border-radius: 50%;
  top: -9rem; right: -7rem;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  pointer-events: none;
}

.legal-page-shell .policy-header::after {
  content: "";
  position: absolute;
  left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(220px, 70%);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}

.legal-page-shell .policy-title {
  margin: 0 0 0.75rem;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

.legal-page-shell .last-updated {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  border: 1px solid var(--line);
  color: var(--text-body);
  font-weight: 600;
  position: relative;
  z-index: 1;
}

.legal-page-shell .effective-notice,
.legal-page-shell .highlight-box,
.legal-page-shell .warning-box,
.legal-page-shell .contact-info,
.legal-page-shell .third-party-service {
  border-radius: var(--radius-md);
}

.legal-page-shell .effective-notice {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  padding: clamp(1rem, 3vw, 1.25rem);
  margin-bottom: clamp(1.2rem, 3vw, 1.6rem);
}

.legal-page-shell .effective-notice h3 { font-size: 1.05rem; margin: 0 0 0.45rem; }
.legal-page-shell .effective-notice p { margin: 0; color: var(--text-body); }

.legal-page-shell .policy-section {
  margin-bottom: 1rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: clamp(1rem, 2.6vw, 1.5rem);
  box-shadow: var(--shadow-soft);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.legal-page-shell .policy-section:hover { border-color: var(--accent); }

.legal-page-shell .policy-page .section-title {
  margin: 0 0 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: clamp(1.15rem, 2.6vw, 1.4rem);
  line-height: 1.3;
}

.legal-page-shell .section-number {
  width: 30px; height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--text-hi);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8rem;
}

.legal-page-shell .section-content p, .legal-page-shell .section-content li,
.legal-page-shell .policy-page table, .legal-page-shell .policy-page td, .legal-page-shell .policy-page th {
  color: var(--text-body);
}

.legal-page-shell .section-content p { margin: 0 0 0.9rem; }
.legal-page-shell .section-content p:last-child { margin-bottom: 0; }

.legal-page-shell .section-content a,
.legal-page-shell .policy-page a.contact-link,
.legal-page-shell .policy-page a[href^="mailto:"] {
  color: var(--accent);
}

.legal-page-shell .section-content a:hover,
.legal-page-shell .policy-page a.contact-link:hover,
.legal-page-shell .section-content a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.legal-page-shell .policy-list { list-style: none; margin: 0.8rem 0 1rem; padding: 0; display: grid; gap: 0.35rem; }
.legal-page-shell .policy-list li { position: relative; padding: 0.55rem 0 0.55rem 1.5rem; border-bottom: 1px solid var(--line); }
.legal-page-shell .policy-list li:last-child { border-bottom: 0; }
.legal-page-shell .policy-list li::before {
  content: "";
  position: absolute; left: 0.15rem; top: 1rem;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

.legal-page-shell .highlight-box, .legal-page-shell .warning-box {
  margin: 1rem 0;
  padding: 0.9rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
}

.legal-page-shell .warning-box { border-left-color: var(--risk); background: var(--risk-bg); }
.legal-page-shell .highlight-box p, .legal-page-shell .warning-box p { margin: 0; }

.legal-page-shell .contact-info {
  margin-top: 0.8rem;
  padding: 1rem;
  text-align: center;
  border: 1px solid var(--line);
  background: var(--bg-1);
}

.legal-page-shell .contact-info h3 { margin: 0 0 0.6rem; font-size: 1.05rem; }
.legal-page-shell .contact-link { font-weight: 700; font-size: 1rem; }

.legal-page-shell .third-party-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.7rem; margin: 0.9rem 0; }
.legal-page-shell .third-party-service { padding: 0.8rem; border: 1px solid var(--line); background: var(--bg-1); text-align: center; }
.legal-page-shell .third-party-service strong { display: block; margin-bottom: 0.35rem; color: var(--text-hi); }
.legal-page-shell .third-party-service span { color: var(--text-mute); font-size: 0.9rem; }

.legal-page-shell .cookie-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 0.8rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-1);
}

.legal-page-shell .cookie-table th, .legal-page-shell .cookie-table td {
  padding: 0.8rem;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legal-page-shell .cookie-table th { color: var(--text-hi); background: var(--accent-soft); font-weight: 700; }
.legal-page-shell .cookie-table tr:last-child td { border-bottom: 0; }

@media (max-width: 768px) {
  .legal-page-shell .policy-page { width: min(100% - 1rem, 940px); padding-top: 1rem; }
  .legal-page-shell .policy-page .section-title { align-items: flex-start; gap: 0.55rem; }
  .legal-page-shell .cookie-table { font-size: 0.9rem; display: block; overflow-x: auto; white-space: nowrap; }
}

@media (max-width: 560px) {
  .legal-page-shell .legal-breadcrumb-wrap { margin-top: 0.65rem; }
  .legal-page-shell .breadcrumbs { width: 100%; justify-content: center; text-align: center; }
  .legal-page-shell .policy-page .section-title { flex-direction: column; align-items: flex-start; }
  .legal-page-shell .third-party-grid { grid-template-columns: 1fr; }
}


/* ── 20. Blog article typography ──────────────────────────────
   article.css and blog.css duplicated this entire block; it now
   exists once. */
.blog-header {
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2rem) clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  border-bottom: 1px solid var(--line);
}

.blog-header h1 {
  font-size: clamp(1.55rem, 4vw, 2.6rem);
  max-width: 820px;
  margin: 0 auto 1rem;
  line-height: 1.3;
}

.blog-meta {
  font-family: var(--font-mono);
  color: var(--text-mute);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}

.blog-content {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1rem, 4vw, 2rem) 4rem;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--text-body);
}

.blog-content p { margin: 1.35rem 0; }

.blog-content h2 {
  font-size: clamp(1.2rem, 3vw, 1.6rem);
  color: var(--accent);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.blog-content h3 {
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: var(--text-hi);
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

.blog-content strong { font-weight: 700; color: var(--text-hi); }
.blog-content em { color: var(--text-body); font-style: italic; }

.blog-content ul, .blog-content ol { padding-left: 1.5rem; margin: 1.25rem 0; line-height: 1.85; }
.blog-content li { margin-bottom: 0.65rem; }

.blog-content a {
  color: var(--accent);
  border-bottom: 1px solid var(--accent-soft);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.blog-content a:hover { border-bottom-color: var(--accent); }

/* Pull quote: a markdown blockquote in a post renders as a display-size
   quote with a cyan hairline above and below (spec 2026-09-12 §3.3). */
.blog-content blockquote {
  margin: 2.25rem 0;
  padding: 1.25rem 0;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text-hi);
}
.blog-content blockquote p { margin: 0; }
.blog-content blockquote p + p { margin-top: 0.75rem; }

.article-meta-info {
  text-align: center;
  color: var(--text-mute);
  font-size: 0.88rem;
  margin-bottom: 2.5rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}

.article-meta-info span { margin: 0 0.4rem; }

.reading-time {
  display: inline-block;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  margin-top: 0.5rem;
  color: var(--accent);
}

/* Callout boxes */
.emphasis {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.warning-box {
  background: var(--warn-bg);
  border-left: 3px solid var(--warn);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.danger-box {
  background: var(--risk-bg);
  border-left: 3px solid var(--risk);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.emphasis p:first-child, .warning-box p:first-child, .danger-box p:first-child { margin-top: 0; }
.emphasis p:last-child, .warning-box p:last-child, .danger-box p:last-child { margin-bottom: 0; }

/* Inline stats strip (distinct from the homepage's card-based
   .stats-grid, §14 - same class name, compatible grid base) */
.stats-grid.stats-grid,
.blog-content .stats-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 1.75rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.stat-item { text-align: center; }
.stat-item .stat-number {
  font-size: 2.2rem;
  display: block;
  margin-bottom: 0.3rem;
}
.stat-label { font-size: 0.9rem; color: var(--text-body); }

.ranking-table {
  margin: 2rem 0;
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-2);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.ranking-table th {
  background: var(--accent-soft);
  padding: 0.9rem 1rem;
  text-align: left;
  font-weight: 700;
  color: var(--accent);
  border-bottom: 2px solid var(--line);
}

.ranking-table td { padding: 0.9rem 1rem; border-bottom: 1px solid var(--line); color: var(--text-body); }
.ranking-table tr:last-child td { border-bottom: none; }
.ranking-table tr.highlight { background: var(--accent-soft); font-weight: 600; color: var(--text-hi); }
.rank-number { font-weight: 700; color: var(--accent); font-size: 1.05rem; }

.tech-box {
  background: var(--code-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin: 1.75rem 0;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--text-body);
}

.tech-box-title {
  color: var(--warn);
  font-weight: 700;
  margin-bottom: 0.75rem;
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.05em;
}

.checklist { list-style: none; padding-left: 0; }
.checklist li { padding-left: 1.75rem; position: relative; margin-bottom: 0.85rem; }
.checklist li::before { content: "▶"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

.cta-section {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  margin: 3rem 0;
  text-align: center;
}

.cta-section h3 { margin-top: 0; margin-bottom: 0.75rem; font-size: 1.3rem; }
.cta-section p { margin-bottom: 1.25rem; }

.social-share { display: flex; gap: 0.75rem; justify-content: center; margin: 2.5rem 0; flex-wrap: wrap; }

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1.1rem;
  background: var(--accent-soft);
  color: var(--text-body);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  border: 1px solid var(--line);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.share-btn:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--text-hi); transform: translateY(-1px); }
.share-btn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }

.sources { margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); font-size: 0.92rem; }
.sources h2 { font-size: 1.1rem; margin-bottom: 1rem; margin-top: 0; }

.source-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1.25rem 0; }
.source-links a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.source-links a:hover { border-color: var(--accent); color: var(--text-hi); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 2.5rem 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.88rem;
  padding: 0.65rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.back-link:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--text-hi); }

a.back-link[style*="text-align: center"],
.blog-content > a.back-link {
  display: block;
  text-align: center;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}


/* ── 21. Blog listing page ────────────────────────────────── */
.blog-hero {
  padding: clamp(4rem, 8vw, 6rem) 0 clamp(2rem, 4vw, 3rem);
  background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-0) 100%);
  position: relative;
  overflow: hidden;
}

.hero-container { max-width: var(--max-width); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 1.5rem); text-align: center; position: relative; }
.hero-eyebrow { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.24em; font-size: 0.75rem; color: var(--accent); margin-bottom: 0.75rem; }

/* Solid heading, not gradient-clipped text - a gradient spanning
   accent-to-prussian fails AA on its Prussian half against a dark
   background (the same lesson as the CTA gradient in plan/06 §10),
   so this uses the same solid treatment as every other H2/H1. */
.hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 700;
  color: var(--text-hi);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.hero-subtitle { font-size: clamp(1rem, 2.5vw, 1.15rem); color: var(--text-body); margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.7; }

/* Search, filter chips and card grid of the pre-2026-09-12 listing removed; the listing now uses the bl-* block below. */

.blog-section { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.section-container { max-width: var(--max-width); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 1.5rem); }

.blog-section-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  text-align: center;
  position: relative;
}

.blog-section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--gradient-brand);
  border-radius: 2px;
  margin: 0.75rem auto 0;
}

/* Featured article card (blog listing). Same top-level class name
   as the dashboard "featured-card" in §13 - the two never share a
   page and are distinguished by their descendant classes, so both
   are safe to keep verbatim. */
.featured-card:has(.featured-content) {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
  border: 1px solid var(--line);
  position: relative;
  cursor: pointer;
}

.featured-card:has(.featured-content)::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gradient-brand);
}

.featured-card:has(.featured-content):hover { transform: translateY(-6px); box-shadow: var(--shadow-hover); }
.featured-card:has(.featured-content):focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }

.featured-content { padding: clamp(1.75rem, 4vw, 2.5rem); }
.featured-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; flex-wrap: wrap; }

.featured-tag {
  background: var(--accent-soft);
  color: var(--accent);
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.featured-title { font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 1rem; line-height: 1.3; }
.featured-excerpt { color: var(--text-body); font-size: 1.05rem; margin-bottom: 1.75rem; line-height: 1.7; }

.featured-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #0767BB 0%, #0554A3 55%, #04438E 100%);
  color: #FFFFFF;
  padding: 0.85rem 1.5rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  transition: transform var(--transition-base), filter var(--transition-base);
  min-height: 48px;
}

.featured-cta:hover { transform: translateY(-2px); filter: brightness(1.06); }
.featured-cta .arrow-icon { transition: transform var(--transition-base); width: 16px; height: 16px; }
.featured-cta:hover .arrow-icon { transform: translateX(4px); }

.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.85rem; }

.article-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  color: var(--accent);
  padding: 0.65rem 1.1rem;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  transition: all var(--transition-base);
  min-height: 40px;
  justify-content: center;
  margin-top: auto;
  align-self: flex-start;
  cursor: pointer;
}

.arrow-icon { transition: transform var(--transition-base); width: 16px; height: 16px; flex-shrink: 0; }

.back-to-top {
  position: fixed;
  bottom: 6rem;
  right: 1.5rem;
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  color: var(--accent);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { transform: translateY(-3px); background: var(--accent); color: var(--accent-ink); }
.back-to-top svg { width: 20px; height: 20px; }

@media (prefers-contrast: high) {
  :root { --line: rgba(255, 255, 255, .3); }
  /* Dark-only sweep: a stray data-theme="light" keeps the same dark line. */
  [data-theme="light"] { --line: rgba(255, 255, 255, .3); }
}


/* Blog listing, 2026-09-12 redesign: "Front Page" landing and the six topic
   hub pages (spec docs/superpowers/specs/2026-09-12-blog-front-page-and-
   hubs-design.md). Rendered by blog/js/blog-page.js. Tokens only, mobile
   first. The older listing rules above this comment stay only where other
   pages use them (hero-*, blog-section*, back-to-top, animate-on-scroll). */

.bl-wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 clamp(1rem, 3vw, 1.5rem); }

/* Masthead */
.bl-masthead {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  padding: clamp(1.5rem, 4vw, 2.5rem) 0 1rem;
  border-bottom: 1px solid var(--line);
}
.bl-wordmark { font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 700; color: var(--text-hi); margin: 0; letter-spacing: -0.01em; }
.bl-dateline { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; color: var(--text-mute); text-transform: uppercase; }
.bl-search { position: relative; flex: 1 1 100%; }
.bl-search input {
  width: 100%; min-height: 44px; padding: 0.6rem 2.5rem 0.6rem 2.4rem;
  background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-md);
  color: var(--text-hi); font-family: var(--font-display); font-size: 0.95rem;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.bl-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.bl-search input::placeholder { color: var(--text-mute); }
.bl-search img { position: absolute; left: 0.8rem; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-mute); pointer-events: none; }
.bl-search-clear {
  position: absolute; right: 0.4rem; top: 50%; transform: translateY(-50%);
  background: none; border: 0; color: var(--text-mute); font-family: var(--font-mono); font-size: 0.75rem; cursor: pointer; padding: 0.4rem;
}
.bl-search-clear[hidden] { display: none; }

/* Mono section label with a cyan chevron */
.bl-label {
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text-mute); margin: 0 0 1rem;
}
.bl-label::before { content: "\203A "; color: var(--accent); }

/* Cover images: every ratio crops the same file */
.bl-cover { display: block; width: 100%; height: auto; object-fit: cover; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md); }
.bl-cover--16-9 { aspect-ratio: 16 / 9; }
.bl-cover--3-2 { aspect-ratio: 3 / 2; }
.bl-cover--1-1 { aspect-ratio: 1 / 1; }

/* Meta line */
.bl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.6rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-mute); letter-spacing: 0.02em; }
.bl-meta a { color: var(--accent); }
.bl-meta a:hover { text-decoration: underline; }
.bl-avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%;
  /* Initials sit on a theme-invariant dark badge, so use the footer's fixed
     light text token (§16, "always dark, both themes") not --text-hi, which
     goes near-black in light theme. */
  background: linear-gradient(135deg, var(--prussian-tint), var(--accent)); color: var(--footer-text); font-size: 0.75rem; font-weight: 700; flex: none;
}

/* Front page grid */
.bl-front { display: grid; gap: 2rem; padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.bl-lead { display: grid; gap: 1rem; }
.bl-lead-title { font-size: clamp(1.5rem, 4vw, 2rem); line-height: 1.3; margin: 0; }
.bl-lead-title a { color: var(--text-hi); }
.bl-lead-title a:hover { color: var(--accent); }
.bl-lead-standfirst { color: var(--text-body); font-size: 1.05rem; line-height: 1.6; margin: 0; }
.bl-topic { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }

/* Rows (aside, river, hub list, results) */
.bl-rows { list-style: none; margin: 0; padding: 0; }
.bl-row { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 0.9rem 1rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid var(--line); }
.bl-row--aside { grid-template-columns: 64px minmax(0, 1fr); }
.bl-row--aside .bl-cover { order: -1; }
.bl-row-title { font-size: 1rem; line-height: 1.35; margin: 0 0 0.35rem; }
.bl-row-title a { color: var(--text-hi); transition: color var(--transition-base); }
.bl-row-title a:hover { color: var(--accent); }
.bl-row-excerpt { color: var(--text-body); font-size: 0.9rem; line-height: 1.55; margin: 0 0 0.5rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bl-row .bl-topic { display: block; margin-bottom: 0.3rem; }

/* River footer: more button + count */
.bl-more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0 0; }
.bl-count { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; color: var(--text-mute); text-transform: uppercase; }

/* Topic band */
.bl-band { display: grid; gap: 1.5rem; padding: 2rem 0; border-top: 1px solid var(--line); }
.bl-band-col h3 { font-size: 1.1rem; margin: 0 0 0.75rem; display: flex; justify-content: space-between; align-items: baseline; }
.bl-band-col h3 small { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-mute); font-weight: 400; }
.bl-band-col ul { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.bl-band-col li { padding: 0.45rem 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; line-height: 1.4; }
.bl-band-col li a { color: var(--text-body); }
.bl-band-col li a:hover { color: var(--accent); }
.bl-band-all { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); text-decoration: underline; }
.bl-band-rest { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; padding: 1rem 0 2rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); }
.bl-band-rest a { color: var(--text-body); }
.bl-band-rest a:hover { color: var(--accent); }

/* Search results and hub layouts: list + rail */
.bl-results { display: grid; gap: 2rem; padding: clamp(1.5rem, 4vw, 2.5rem) 0; }
.bl-results-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.5rem 1rem; margin: 0 0 0.5rem; }
.bl-results-line h2 { font-size: 1.1rem; margin: 0; }
.bl-rail { display: grid; gap: 1.25rem; align-content: start; }
.bl-rail-box { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1rem 1.1rem; }
.bl-rail-box ul { list-style: none; margin: 0; padding: 0; }
.bl-rail-box li { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.bl-rail-box li:last-child { border-bottom: 0; }
.bl-rail-box li a { color: var(--text-body); }
.bl-rail-box li a:hover, .bl-rail-box li[aria-current="page"] a { color: var(--accent); }
.bl-rail-box li small { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-mute); }
.bl-rail-cta { background: var(--accent-soft); border-color: var(--accent); }
.bl-rail-cta p { margin: 0 0 0.9rem; color: var(--text-body); font-size: 0.92rem; }
.bl-empty { padding: 2rem 0; color: var(--text-body); }
.bl-empty p { margin: 0 0 0.75rem; }
.bl-empty-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; font-family: var(--font-mono); font-size: 0.78rem; }
.bl-empty-links a { color: var(--accent); }

/* Hub pages */
/* Pins below the site header (sticky, 85px tall at every width, z-index 1000),
   not under it: z-index 900 stays below the header and above content. */
.bl-subnav { position: sticky; top: 85px; z-index: 900; background: var(--bg-glass); border-bottom: 1px solid var(--bg-glass-brd); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.bl-subnav ul { list-style: none; margin: 0; padding: 0.6rem 0; display: flex; gap: 0.5rem; overflow-x: auto; scrollbar-width: none; }
.bl-subnav ul::-webkit-scrollbar { display: none; }
.bl-subnav a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0.35rem 0.9rem; white-space: nowrap;
  border: 1px solid var(--line); border-radius: 6px; color: var(--text-body);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em;
  transition: border-color var(--transition-base), color var(--transition-base);
}
.bl-subnav a:hover { border-color: var(--accent); color: var(--text-hi); }
.bl-subnav a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.bl-hubhead { padding: clamp(1.5rem, 4vw, 2.5rem) 0 1rem; max-width: 46em; }
.bl-hubhead .bl-label { margin-bottom: 0.4rem; }
.bl-hubhead h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin: 0 0 0.25rem; }
.bl-hubhead .bl-count { display: block; margin-bottom: 0.75rem; }
.bl-hubhead p { color: var(--text-body); line-height: 1.65; margin: 0 0 1.25rem; }
.bl-pinned { padding: 1rem 0 0.5rem; }
.bl-pinned-grid { display: grid; gap: 1rem; }
.bl-card { display: block; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base); }
.bl-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.bl-card .bl-cover { border: 0; border-radius: 0; }
.bl-card-body { padding: 0.9rem 1rem 1rem; }
.bl-card-title { font-size: 0.98rem; line-height: 1.35; margin: 0 0 0.5rem; color: var(--text-hi); }
.bl-hublist { padding: 1rem 0 0; }
.bl-hublist .bl-row { grid-template-columns: 64px minmax(0, 1fr); }
.bl-hublist .bl-row .bl-cover { order: -1; }

@media (min-width: 640px) {
  .bl-search { flex: 0 1 320px; }
  .bl-row { grid-template-columns: 180px minmax(0, 1fr); }
  .bl-row .bl-cover { order: -1; }
  .bl-row--aside, .bl-hublist .bl-row { grid-template-columns: 64px minmax(0, 1fr); }
  .bl-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bl-pinned-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 960px) {
  .bl-front { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 2.5rem; }
  .bl-front > .bl-river, .bl-front > .bl-band, .bl-front > .bl-band-rest { grid-column: 1 / -1; }
  .bl-results { grid-template-columns: 220px minmax(0, 1fr); column-gap: 2.5rem; }
  .bl-results--hub { grid-template-columns: minmax(0, 1fr) 220px; }
  .bl-rail { position: sticky; top: 72px; }
}


/* ── 22. Blog post template ("The Briefing") ───────────────────
   New components for the post template
   (docs/superpowers/specs/2026-08-31-blog-studio-and-post-template-
   design.md §3). Reuses the existing `.blog-content` class (§20)
   for the prose column unchanged; this section only adds the
   scaffolding around it: layout shell, breadcrumb, byline, short-
   version box, callouts, figure, sticky TOC, CTA, author bio and
   "keep reading" cards. Tokens only, so both themes work for free. */

/* Layout shell: reading column + sticky right rail */
.post-wrap {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) clamp(1rem, 4vw, 2rem) clamp(3rem, 6vw, 5rem);
}

.post-main {
  flex: 1 1 420px;
  min-width: 0;
  max-width: 42em;
  margin: 0 auto;
}

.post-toc {
  flex: 0 0 180px;
  width: 180px;
}

.post-toc-inner {
  position: sticky;
  top: 96px;
}

/* Mono section-label heading, reused for the TOC label (stays a
   <p>, it names a nav not a document section) and for the "short
   version"/"keep reading" <h2> headings. The reset here cancels
   the global h1-h4 rule (§5) so an h2 usage renders identically to
   the plain-text label it replaces. */
.post-section-label {
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  line-height: 1.4;
  margin: 0;
}

.post-toc-inner > .post-section-label {
  font-size: 0.75rem;
  color: var(--text-mute);
  margin: 0 0 0.9rem;
}

.post-toc-inner nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  border-left: 2px solid var(--line);
}

.post-toc-inner nav li { padding-left: 0.9rem; }

.post-toc-inner nav a {
  display: block;
  color: var(--text-mute);
  font-size: 0.85rem;
  line-height: 1.4;
  transition: color var(--transition-base);
}

.post-toc-inner nav a:hover,
.post-toc-inner nav a.is-active { color: var(--accent); }

/* Mobile collapsible TOC: hidden on desktop, the sticky rail
   above is hidden on narrow screens (see §23 breakpoint below) */
.post-toc-mobile {
  display: none;
  margin: 0 0 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-1);
  transition: border-color var(--transition-base);
}

.post-toc-mobile[open] { border-color: var(--accent); }

.post-toc-mobile summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.78rem;
  color: var(--accent);
  padding: 0.9rem 1.1rem;
  cursor: pointer;
  list-style: none;
}

.post-toc-mobile summary::-webkit-details-marker { display: none; }
.post-toc-mobile summary::marker { content: ""; }

.post-toc-chevron {
  color: var(--accent);
  font-size: 1.1rem;
  line-height: 1;
  transition: transform var(--transition-base);
}

.post-toc-mobile[open] .post-toc-chevron { transform: rotate(90deg); }

.post-toc-mobile nav ul {
  list-style: none;
  margin: 0;
  padding: 0 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.post-toc-mobile nav a { color: var(--text-body); font-size: 0.88rem; }
.post-toc-mobile nav a:hover { color: var(--accent); }

/* Breadcrumb */
.post-breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--text-mute);
  margin: 0 0 1.25rem;
}

.post-breadcrumb a { color: inherit; transition: color var(--transition-base); }
.post-breadcrumb a:hover { color: var(--text-hi); }
.post-breadcrumb span { color: var(--accent); }

/* H1 for the post (post-main is the only place it appears) */
.post-main > h1 {
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  line-height: 1.3;
  margin: 0 0 1.5rem;
}

/* Byline row: avatar + name/role (left), published/reviewed (right) */
.post-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.post-avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--accent-ink);
}

.post-byline-who {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-right: auto;
}

.post-byline-who strong { color: var(--text-hi); font-size: 0.95rem; font-weight: 600; }
.post-byline-who span { color: var(--text-mute); font-size: 0.82rem; }

.post-byline-dates {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.7;
  color: var(--text-mute);
  text-align: right;
}

.post-reviewed { display: block; color: var(--accent); }

/* "The short version" box */
.post-shortver {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.75rem;
  margin: 0 0 2rem;
}

.post-shortver > .post-section-label {
  font-size: 0.78rem;
  color: var(--accent);
  margin: 0 0 0.9rem;
}

.post-shortver ul { list-style: none; margin: 0; padding: 0; }
.post-shortver li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: 0.65rem;
  color: var(--text-body);
  line-height: 1.6;
}
.post-shortver li:last-child { margin-bottom: 0; }
.post-shortver li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}

/* Callouts (from markdown `:::` fences at generation time) */
.post-callout {
  border-left: 3px solid var(--line);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--bg-1);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}

.post-callout p:first-of-type { margin-top: 0; }
.post-callout p:last-child { margin-bottom: 0; }

.post-callout-label {
  display: block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.post-callout-warning {
  border-left-color: var(--risk);
  background: var(--risk-bg);
}
.post-callout-warning .post-callout-label { color: var(--risk); }

.post-callout-tip {
  border-left-color: var(--accent);
  background: var(--accent-soft);
}
.post-callout-tip .post-callout-label { color: var(--accent); }

.post-callout-step {
  border-left-color: var(--text-mute);
}
.post-callout-step .post-callout-label { color: var(--text-hi); }

/* Evidence figures */
.post-figure { margin: 2.25rem 0; }

.post-figure img {
  width: 100%;
  display: block;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.post-figure figcaption {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-mute);
  text-align: center;
  margin-top: 0.6rem;
}

/* CTA block */
.post-cta {
  /* Flat accent fill + accent border, matching .svc-tile--featured and
     .cta-section (spec section 3.8). The old gradient used --prussian-tint,
     opaque in light theme, which put near-black default text over a
     navy corner at some widths; confirmed live, both desktop and 375px,
     via studio/preview-fixture.html (this class has not shipped on a
     published post yet). */
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 2.5rem clamp(1.5rem, 4vw, 3rem);
  margin: 3rem 0;
  text-align: center;
}

.post-cta h3 { font-size: 1.4rem; margin-bottom: 0.75rem; }
.post-cta p { color: var(--text-body); margin-bottom: 1.5rem; }

/* Author bio card */
.post-authorbox {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.75rem;
  margin: 3rem 0;
}

.post-authorbox .post-avatar { width: 56px; height: 56px; font-size: 1rem; }
.post-authorbox strong { display: block; color: var(--text-hi); font-size: 1rem; margin-bottom: 0.35rem; }
.post-authorbox p { color: var(--text-body); font-size: 0.92rem; line-height: 1.6; margin: 0; }

/* Keep reading */
.post-keepread {
  margin: 3.5rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.post-keepread > .post-section-label {
  font-size: 0.78rem;
  color: var(--text-mute);
  margin: 0 0 1.25rem;
}

.kr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.25rem;
}

.kr-card {
  display: block;
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.4rem;
  transition: border-color var(--transition-base), transform var(--transition-base);
}

.kr-card:hover { border-color: var(--accent); transform: translateY(-3px); }

.kr-card span {
  display: inline-block;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.kr-card strong { display: block; color: var(--text-hi); font-size: 0.95rem; font-weight: 600; line-height: 1.4; }

/* Post pages never show the WhatsApp float (spec §3.1); the float
   markup itself lives in partials/header.html (class `.wa-float`)
   and stays completely unchanged on every other page. Legal pages
   get the same treatment (spec 2026-09-13-whatsapp-plausible-badge-
   placement-design.md §4.2/4.3, Option 2, applying the spec's own
   recommendation): a compliance or reference page is a reading
   moment, not a conversion moment, same reasoning as posts. Reuses
   the existing `legal-page-shell` body class already on all four
   legal pages rather than adding a redundant one. */
body.blog-post .wa-float, body.legal-page-shell .wa-float, body.tool-page .wa-float { display: none; }

/* Front Page article layout, 2026-09-12: cover strip, centred header with
   standfirst, left rail (short version + TOC), topic navigation after
   Keep reading. Studio posts get this from generator.js; the 80 standard
   legacy posts got it from tools/blog/retrofit_posts.py. */
.post-cover { margin: 0 0 1.5rem; }
.post-cover img { display: block; width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--bg-2); }
.post-head { max-width: 46em; margin: 0 auto 2rem; text-align: center; }
.post-head .post-breadcrumb { justify-content: center; }
.post-head h1 { font-size: clamp(1.75rem, 4.5vw, 2.4rem); line-height: 1.3; margin: 0.5rem 0 0.9rem; color: var(--text-hi); }
.post-standfirst { font-size: 1.1rem; line-height: 1.6; color: var(--text-body); margin: 0 0 1.25rem; }
.post-head .post-byline { justify-content: center; text-align: left; border-bottom: 0; }
.post-rail { display: block; }
.post-rail .post-toc-inner { position: static; }
.post-rail .post-toc { display: none; }
.post-wrap--front .post-rail:not(:has(*)) { display: none; }
.post-topicnav { max-width: 42em; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2rem) 3rem; }
.post-main .post-topicnav { max-width: none; padding: 2rem 0 0; }
.post-topicnav[hidden] { display: none; }
.post-topicnav .post-section-label { font-size: 0.78rem; color: var(--text-mute); margin: 0 0 1rem; }
.post-topicnav .bl-rows { margin-bottom: 1.5rem; }
.post-topicnav-pair { display: grid; gap: 1rem; }
.post-topicnav-pair a { display: block; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1rem 1.1rem; color: var(--text-hi); transition: border-color var(--transition-base); }
.post-topicnav-pair a:hover { border-color: var(--accent); }
.post-topicnav-pair small { display: block; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.4rem; }
.kr-card .bl-cover { margin: -1.25rem -1.4rem 0.9rem; width: auto; border-radius: var(--radius-md) var(--radius-md) 0 0; border: 0; }

@media (min-width: 640px) {
  .post-topicnav-pair { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .post-wrap--front { display: grid; grid-template-columns: 200px minmax(0, 42em); justify-content: center; column-gap: 2.5rem; }
  .post-wrap--front > .post-cover, .post-wrap--front > .post-head { grid-column: 1 / -1; }
  .post-wrap--front .post-rail { position: sticky; top: 96px; align-self: start; }
  .post-wrap--front .post-rail .post-toc { display: block; width: auto; flex: none; }
  .post-wrap--front .post-rail .post-toc-mobile { display: none; }
  .post-wrap--front .post-main { margin: 0; }
  .post-wrap--front:not(:has(.post-rail *)) { grid-template-columns: minmax(0, 42em); justify-content: center; }
}


@media (max-width: 1023px) {
  .post-toc { display: none; }
  .post-toc-mobile { display: block; }
}


/* ── 23. Responsive breakpoints ───────────────────────────────
   Preserves every breakpoint already in use, so mobile layout does
   not regress. Site-wide (styles-v3): 481 / 640 / 769 / 960 / 1025
   / 1200 / 1441. Dashboard family (cyber-toolkit + services) adds
   560 / 600 / 880 / 1100, already declared inline with their
   components above; the remainder are grouped here. Blog post
   template (§22) adds its own 1023/1024 pair, declared inline
   there (desktop TOC rail vs. mobile <details> TOC). */

@media (min-width: 481px) {
  .card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .hero-cta { justify-content: flex-start; }
  .form-submit { margin-inline: 0; }
  .hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
  .contact-layout { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); align-items: start; }
}

@media (min-width: 769px) {
  .desktop-nav { display: block; }
  .hamburger { display: none; }

  .footer-grid {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "nav nav nav"
      "brand social meta";
    align-items: center;
    text-align: left;
  }
  .footer-nav-wrapper { grid-area: nav; }
  .footer-social { grid-area: social; padding: 0; }
  .footer-brand {
    grid-area: brand;
    flex-direction: row;
    align-items: center;
    text-align: left;
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
  }
  .footer-meta {
    grid-area: meta;
    align-items: flex-end;
    text-align: right;
    border-top: 0;
    padding-top: 0;
  }
}

@media (min-width: 960px) {
  .stats-grid:not(.blog-content .stats-grid) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .contact-layout { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
}

@media (min-width: 1025px) {
  .container { padding-inline: 1.5rem; }
}

@media (min-width: 1200px) {
  .hero { padding-top: 7rem; padding-bottom: 6rem; }
}

@media (min-width: 1441px) {
  .card-grid { gap: 2.5rem; }
  .hero-grid { gap: 4rem; }
}

@media (max-width: 768px) {
  .site-footer { padding: 3rem 0 1.5rem; margin-top: 3rem; }
  .footer-nav-wrapper { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-column { text-align: left; }
  .footer-contact li { justify-content: flex-start; }
  .footer-social { padding: 1.5rem 0; }
}

@media (min-width: 768px) {
  .blog-hero { padding: clamp(5rem, 9vw, 7rem) 0 clamp(2.5rem, 4vw, 3.5rem); }
}

@media (max-width: 640px) {
  .info-card, .service-card, .about-card, .contact-card, .tool-card { box-shadow: 0 8px 16px rgba(0, 0, 0, .18); }
  .stats-grid.stats-grid { grid-template-columns: 1fr 1fr; }
  .ranking-table { font-size: 0.86rem; }
  .ranking-table th, .ranking-table td { padding: 0.65rem 0.7rem; }
  .social-share { flex-direction: column; align-items: stretch; }
  .share-btn { justify-content: center; }
  .cta-section { padding: 1.5rem 1.25rem; }
}

@media (max-width: 600px) {
  .contact-cards { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; }
}


/* ── 24. Services hub (/services/, svc-*) ─────────────────────
   Featured First layout (docs/superpowers/specs/2026-09-12-
   services-hub-rebuild-design.md). Mobile-first: the base rules
   are the phone layout, min-width queries add columns. The
   audience filter dims non-matching tiles with :has(), already
   used in section 21; browsers without it never dim, the page
   still reads top to bottom. The hero entrance is a plain
   keyframe, no observer script; the global reduced-motion rule
   in section 2 collapses it to 0.01ms. */

.svc-hero { animation: svc-rise 420ms var(--transition-base) both; }
.svc-hero h1 { max-width: 27ch; }

@keyframes svc-rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade-in reveal, restored from the services hub's own sibling pages
   (spec 2026-09-13-light-theme-gradient-cleanup section 5.1: every service
   detail page still has this, the hub lost it as a side effect of its
   2026-09-12 CSS-only rebuild, not a deliberate call). Reuses the
   shared .fade-in class from section 13, not a new mechanism. .svc-
   tile sets its own transition for hover and audience-filter dimming;
   since transition is a shorthand, the two rules would not merge on
   their own, so this merges them explicitly. */
.svc-tile.fade-in {
  transition: opacity 280ms var(--transition-base), transform 280ms var(--transition-base),
              border-color var(--transition-base), box-shadow var(--transition-base);
}

/* Decorative parallax mark (client request: "scroll parallax or some
   kind of animation"). Flat single-colour SVG (currentColor, no
   gradient), non-interactive, purely visual. Static unless the
   browser supports scroll-driven animation and the user has not
   requested reduced motion; the @supports guard means unsupported
   browsers simply never animate it, no broken fallback state. */
.svc-hero { position: relative; overflow: hidden; }
.svc-hero .container { position: relative; z-index: 1; }
.svc-hero__mark {
  position: absolute;
  top: -15%;
  right: -8%;
  width: clamp(180px, 30vw, 340px);
  color: var(--accent);
  opacity: .06;
  pointer-events: none;
  z-index: 0;
}
.svc-hero__mark svg { display: block; width: 100%; height: auto; }

/* Live-review fix (Phase 3 gradient/motion cleanup): the desktop clamp's
   180px floor does not shrink fast enough on narrow phones, where the
   hero heading wraps across more lines and grows tall enough for the
   mark's bounding box to reach into it. Confirmed live at 375px before
   this fix (getBoundingClientRect overlap with #hero-h1); this override
   keeps the mark small and tucked into the corner on phones instead. */
@media (max-width: 480px) {
  .svc-hero__mark { width: clamp(96px, 26vw, 130px); top: -6%; right: -10%; }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .svc-hero__mark {
      animation: svc-parallax linear both;
      animation-timeline: scroll(root);
      animation-range: 0 70vh;
    }
  }
}

@keyframes svc-parallax {
  from { transform: translateY(0); }
  to   { transform: translateY(70px); }
}

.svc-section .toolkit-section__head { margin-bottom: 16px; }

/* Audience filter: a fieldset of radios styled as chips */
.svc-filter { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.svc-filter__options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.svc-filter__label {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-2); color: var(--text-body);
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.04em; text-align: center; cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}
.svc-filter__input:checked + .svc-filter__label { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.svc-filter__input:focus-visible + .svc-filter__label { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Tiles */
.svc-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.svc-tile {
  position: relative; display: flex; flex-direction: column; gap: 10px;
  padding: 20px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius-md);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), opacity var(--transition-base);
}
.svc-tile p { margin: 0; }
.svc-tile__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.svc-tile__index { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); }
.svc-tile__tag {
  display: inline-flex; align-items: center; padding: 4px 10px;
  border-radius: var(--radius-sm); background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.svc-tile__title { font-size: 1.15rem; line-height: 1.3; margin: 0; }
.svc-tile__title a { color: var(--text-hi); transition: color var(--transition-base); }
.svc-tile__body { color: var(--text-body); font-size: 0.95rem; }
.svc-tile__cta--link {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px;
  color: var(--accent); font-family: var(--font-mono); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.04em;
  text-decoration: underline; text-underline-offset: 4px;
  transition: gap var(--transition-base);
}

/* Featured tile (Cybersecurity Assessment, the recommended start) */
.svc-tile--featured { gap: 16px; border-color: var(--accent); background: var(--accent-soft); }
.svc-tile__main { display: flex; flex-direction: column; gap: 10px; }
.svc-tile__aside { display: flex; flex-direction: column; gap: 14px; }
.svc-tile--featured .svc-tile__title { font-size: clamp(1.35rem, 4vw, 1.7rem); }
.svc-tile--featured .btn { align-self: flex-start; }
.svc-tile__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.svc-tile__list li { position: relative; padding-left: 20px; color: var(--text-body); font-size: 0.92rem; line-height: 1.5; }
.svc-tile__list li::before {
  content: ""; position: absolute; left: 0; top: 0.5em; width: 10px; height: 10px;
  border-radius: 2px; background: var(--accent-soft); border: 1px solid var(--accent);
}

/* Filter behaviour: dim tiles that do not match the chosen audience */
.svc-section:has(#svc-aud-business:checked) .svc-tile:not([data-aud~="business"]),
.svc-section:has(#svc-aud-personal:checked) .svc-tile:not([data-aud~="personal"]),
.svc-section:has(#svc-aud-urgent:checked) .svc-tile:not([data-aud~="urgent"]) { opacity: 0.35; }

/* Testimonial (ships hidden until a real quote is approved) */
.svc-quote-section[hidden] { display: none; }
.svc-quote { margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--accent); max-width: 60ch; }
.svc-quote blockquote { margin: 0; }
.svc-quote p { font-size: 1.05rem; color: var(--text-hi); margin: 0 0 8px; }
.svc-quote figcaption { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--text-mute); }

@media (hover: hover) and (pointer: fine) {
  .svc-filter__label:hover { border-color: var(--accent); color: var(--text-hi); }
  .svc-tile:hover { border-color: var(--accent); box-shadow: var(--shadow-soft); }
  .svc-tile__title a:hover { color: var(--accent); }
  .svc-tile__cta--link:hover { gap: 10px; }
}

@media (prefers-contrast: high) {
  .svc-tile, .svc-filter__label { border-width: 2px; }
}

/* 640px and up: two columns, the featured tile spans both, chips go inline */
@media (min-width: 640px) {
  .svc-filter__options { display: inline-flex; flex-wrap: wrap; }
  .svc-filter__label { min-height: 40px; padding: 8px 16px; }
  .svc-grid { grid-template-columns: 1fr 1fr; }
  .svc-tile--featured { grid-column: 1 / -1; }
}

/* 960px and up: the featured tile splits into copy | list + CTA */
@media (min-width: 960px) {
  .svc-tile--featured { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); align-items: center; gap: 28px; padding: 28px; }
}

/* 1100px and up: the four standard tiles sit in one row under the featured tile */
@media (min-width: 1100px) {
  .svc-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ── 25. Print ─────────────────────────────────────────────── */
@media print {
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  body { font-size: 12pt; line-height: 1.5; }
  h1 { font-size: 24pt; }
  h2 { font-size: 18pt; page-break-after: avoid; }
  h3 { font-size: 14pt; page-break-after: avoid; }
  p, h2, h3 { orphans: 3; widows: 3; }
  .section { page-break-inside: avoid; }

  .site-header, .mobile-nav, .nav-overlay, .footer-social, .wa-float,
  .btn, form, .contact-form-wrapper, .hamburger, .back-to-top,
  .post-toc, .post-toc-mobile {
    display: none !important;
  }

  .post-wrap { display: block !important; }

  .hero { padding: 2rem 0; }
  .hero-features { display: block; }
  .hero-feature-item { display: inline-block; margin-right: 1rem; page-break-inside: avoid; }

  .card-grid, .stats-grid { display: block; }

  .service-card, .stat-card, .info-card, .featured-card {
    page-break-inside: avoid;
    margin-bottom: 1.5rem;
    border: 1px solid #ccc;
    padding: 1rem;
  }

  img { max-width: 100% !important; page-break-inside: avoid; }

  a[href]::after { content: " (" attr(href) ")"; }
  a[href^="#"]::after, a[href^="javascript:"]::after { content: ""; }

  .stat-source, .eyebrow { font-size: 9pt; color: #666 !important; }
  .impact-badge { border: 1px solid #000; padding: 0.25rem 0.5rem; display: inline-block; }

  @page { margin: 2cm; }
}

/* ── Responsive remediation 2026-09-15 (audit plan W1/W3/W4) ──
   44px touch targets on coarse pointers; scroll affordances.
   Inline text links inside paragraphs are WCAG-exempt and untouched. */
@media (pointer: coarse) {
  .footer-links a,
  .footer-contact a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-links { gap: 0.25rem; }

  .breadcrumbs a,
  .tk-breadcrumb a,
  .contact-info a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    min-width: 44px;
  }

  /* Blog topic subnav chips: 36px -> 44px on touch */
  .bl-subnav a { min-height: 44px; }

  /* Blog list rows, topic pills, "All …" links, hub band links */
  .bl-row-title,
  .bl-row-title a,
  .bl-lead a,
  .bl-row a,
  .bl-band-col li a,
  .bl-hublist a,
  .bl-band-all,
  .bl-band-rest a,
  .bl-empty-links a,
  .bl-rail-box li a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .bl-topic {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Services tiles + toolkit cards: title/resource links */
  .svc-tile__title a,
  .hp-tool__foot a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Scroll affordance: right-edge fade on horizontally scrollable strips
   (content remains fully reachable by swipe; mask stays on the element
   box, not the scrolling content) */
@media (max-width: 768px) {
  .legal-page-shell .cookie-table {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 99%);
    mask-image: linear-gradient(to right, #000 88%, transparent 99%);
  }
  .bl-subnav ul {
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%);
    mask-image: linear-gradient(to right, #000 90%, transparent 100%);
  }
}