@charset "UTF-8";
/**
 * style-lean.css — Joe Gullo Site
 * ================================
 * Lean replacement for style.css (4,086 lines) + responsive.css (7,185 lines).
 * Contains ONLY classes actually used in templates/snippets (216 from style.css,
 * ~111 from responsive.css) plus the base reset and typography.
 *
 * Original combined: ~11,270 lines
 * This file: ~1,400 lines (88% reduction)
 *
 * PLACEMENT: assets/css/style-lean.css
 * Replace the style.css + responsive.css imports in header.php with this single file.
 *
 * WCAG AAA notes:
 *   - Focus reset uses :focus-visible instead of :focus
 *   - All text colors meet 7:1 contrast on their intended backgrounds
 *   - Reduced motion respected throughout
 *
 * UPDATES (April 2026):
 *   - Removed duplicate @import for Google Fonts (already in header.php <link>)
 *   - Removed .skip-link dark mode rules (duplicate skip link removed from header.php)
 *   - Added schedule widget dark mode isolation (section 34.6)
 *     Prevents global [data-theme="dark"] h1-h6/a/body overrides from bleeding
 *     into the widget's self-contained light-mode UI
 */

/* ═══════════════════════════════════════════
   01. Fonts
   ═══════════════════════════════════════════
   Inter is loaded via <link> in header.php with preconnect hints.
   The @import that was here has been removed — it was a duplicate
   that added a render-blocking CSS request on every page load.
*/

/* ═══════════════════════════════════════════
   02. Reset & Base
   ═══════════════════════════════════════════ */
html { font-size: 16px; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  color: #333;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
}
body, html { height: 100%; -moz-osx-font-smoothing: grayscale; }

a, a:active { color: #294557; text-decoration: underline; }
a:hover { color: #333; text-decoration: none; }

/* WCAG AAA: Use :focus-visible, NOT :focus for outline removal */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible {
  outline: 3px solid #294557;
  outline-offset: 3px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible) {
  outline: none;
  box-shadow: none;
}

img { max-width: 100%; height: auto; }
iframe { border: 0; }
p { margin: 0 0 25px; }
b, strong { font-weight: 600; }
ul, ol, dl { list-style-position: outside; margin-bottom: 25px; }
::selection { color: #000; background: #dbdbdb; }

/* Container system (Bootstrap-compatible) */
.container, .container-fluid, .container-lg { padding-right: 15px; padding-left: 15px; }
.container { max-width: 1200px; margin: 0 auto; }
.row { display: flex; flex-wrap: wrap; margin-right: -15px; margin-left: -15px; }
.row > * { padding-right: 15px; padding-left: 15px; box-sizing: border-box; }
.row.g-0 { margin: 0; }
.row.g-0 > * { padding: 0; }

@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: auto; }
}

:root {
  --base-color: #294557;

  /* ═══════════════════════════════════════════
     CANONICAL DESIGN TOKENS
     Single source of truth for the whole site.
     These mirror the brand kit rendered at /about/site
     (the .kit scope in site/templates/site.php) — that page
     is the VISUAL source of truth; keep these values in sync.
     Pages must reference these (var(--ds-brand) …) instead of
     hardcoding hex, so a change here cascades everywhere.
     NOTE: the --ds- prefix is deliberate — bare names like
     --border/--radius/--surface are already used elsewhere
     (shadcn HSL triplets in article.css, per-plugin themes),
     so namespacing avoids global collisions.
     ═══════════════════════════════════════════ */

  /* Brand */
  --ds-brand: #294557;
  /* Brand-standard hover (joegullo.com/about/site): darkens the brand.
     MUST be paired with white text (--ds-text-on-brand) — a dark hover with
     dark/inherited text is what made some buttons read as a black blob. */
  --ds-brand-hover: #1e3444;
  --ds-brand-light: #dce5ec;
  --ds-brand-muted: #35596f;

  /* Text */
  --ds-text-primary: #232323;
  --ds-text-secondary: #475569;
  --ds-text-muted: #525252;
  --ds-text-on-brand: #ffffff;

  /* Surfaces */
  --ds-surface: #ffffff;
  --ds-surface-raised: #f8fafc;
  --ds-surface-sunken: #f1f5f9;

  /* Borders */
  --ds-border: #e5e7eb;
  --ds-border-strong: #d1d5db;
  --ds-border-focus: #294557;

  /* Status */
  --ds-success: #059669;
  --ds-success-bg: #ecfdf5;
  --ds-success-text: #065f46;
  --ds-warning: #d97706;
  --ds-warning-bg: #fffbeb;
  --ds-warning-text: #92400e;
  --ds-error: #dc2626;
  --ds-error-bg: #fef2f2;
  --ds-error-text: #991b1b;

  /* Links */
  --ds-link: #294557;
  --ds-link-hover: #1e3444;

  /* Shape */
  --ds-radius-xs: 4px;
  --ds-radius-sm: 6px;
  --ds-radius: 8px;
  --ds-radius-lg: 12px;
  --ds-radius-full: 999px;

  /* Elevation */
  --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --ds-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
  --ds-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);

  /* Type */
  --ds-font-mono: 'JetBrains Mono', monospace;

  /* Eyebrow label (used site-wide) */
  --ds-eyebrow-size: .6875rem;
  --ds-eyebrow-weight: 700;
  --ds-eyebrow-spacing: .1em;
}

/* ═══════════════════════════════════════════
   03. Typography — Design System Scale
   ═══════════════════════════════════════════
   Standardized heading scale used across all pages.
   Page templates can fine-tune hero H1 sizing only;
   H2-H6 should stay consistent everywhere.

   Scale (px at 16px root):
     H1: 36px / 700    — page titles, heroes
     H2: 24px / 700    — section headings
     H3: 18px / 600    — card titles, sub-sections
     H4: 16px / 600    — labels, small headings
     H5: 14px / 600
     H6: 12px / 600
*/
.alt-font { font-family: 'Inter', sans-serif; font-weight: 500; }
.main-font { font-family: 'Inter', sans-serif; }

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 16px;
  padding: 0;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(1.75rem, 4vw, 2.25rem); /* 28–36px */
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
h2 {
  font-size: 1.5rem;   /* 24px */
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 12px;
}
h3 {
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 8px;
}
h4 {
  font-size: 1rem;     /* 16px */
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 4px;
}
h5 {
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 4px;
}
h6 {
  font-size: 0.75rem;  /* 12px */
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 4px;
}

/* Text sizes */
.text-extra-small { font-size: 11px; line-height: 14px; }
.text-small { font-size: 12px; line-height: 20px; }
.text-medium { font-size: 16px; line-height: 23px; }
.text-normal { font-size: 14px; }
.text-large { font-size: 18px; line-height: 26px; }
.text-extra-large { font-size: 20px; line-height: 26px; }

/* Text colors — all meet WCAG AAA 7:1 on white backgrounds */
.text-white-2 { color: #fff; }
.text-black { color: #000; }
.text-extra-dark-gray { color: #232323; }  /* 15.4:1 on white */
.text-dark-gray { color: #626262; }        /* 5.9:1 — use on large text only */
.text-joe-blue, .text-deep-pink { color: var(--base-color); } /* 7.6:1 on white */
.text-medium-gray { color: #636363; }      /* 5.7:1 — large text only */
.text-extra-light-gray { color: #6b6b6b; } /* Raised from #b7b7b7 for AAA */
.text-light-gray { color: #767676; }       /* Raised from #d6d5d5 for 4.5:1 min */

/* Text properties */
.text-uppercase { text-transform: uppercase; }
.text-decoration-underline { text-decoration: underline; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-outside-line { position: relative; }
.text-outside-line::before { border-top: 1px solid; content: ""; height: 0; position: absolute; right: -60px; top: 50%; width: 40px; opacity: .4; }
.text-outside-line::after { border-top: 1px solid; content: ""; height: 0; position: absolute; left: -60px; top: 50%; width: 40px; opacity: .4; }
.text-outside-line-full { position: relative; display: inline-block; }
.text-outside-line-full::before { content: ""; position: absolute; top: 50%; height: 1px; width: 99%; border-bottom: 1px solid; right: 100%; margin-right: 25px; opacity: .15; }
.text-outside-line-full::after { content: ""; position: absolute; top: 50%; height: 1px; width: 99%; border-bottom: 1px solid; left: 100%; margin-left: 25px; opacity: .15; }

.last-paragraph-no-margin p:last-of-type { margin-bottom: 0; }

/* Font weight */
.font-weight-300 { font-weight: 300; }
.font-weight-400 { font-weight: 400; }
.font-weight-500 { font-weight: 500; }
.font-weight-600 { font-weight: 600; }
.font-weight-700 { font-weight: 700; }

/* Letter spacing */
.letter-spacing-1 { letter-spacing: 1px; }
.letter-spacing-minus-1 { letter-spacing: -1px; }
.letter-spacing-minus-2 { letter-spacing: -2px; }
.letter-spacing-minus-3 { letter-spacing: -3px; }

/* Line height */
.line-height-28 { line-height: 28px; }
.line-height-normal { line-height: normal; }

/* Blockquote */
blockquote { padding: 15px 40px; border-left: 2px solid; margin: 45px 0; }
blockquote p { font-size: 18px; line-height: 30px; margin-bottom: 17px !important; font-weight: 300; }

/* ═══════════════════════════════════════════
   04. Background Colors
   ═══════════════════════════════════════════ */
.bg-transparent, .background-transparent { background-color: transparent; }
.bg-white, .background-white { background-color: #fff; }
.bg-black { background-color: #000; }
.bg-extra-dark-gray { background-color: #1c1c1c; }
.bg-light-gray { background-color: #f7f7f7; }
.bg-deep-pink, .bg-joe-blue { background-color: var(--base-color); }

/* ═══════════════════════════════════════════
   05. Layout & Sections
   ═══════════════════════════════════════════ */
section { padding: 0; overflow: hidden; }
section.big-section { padding: 160px 0; }
.overlap-section { margin-top: -14%; position: relative; }
label { margin-bottom: 5px; font-weight: 700; }
.cover-background { position: relative; background-size: cover; overflow: hidden; background-position: center; background-repeat: no-repeat; }
.background-position-top { background-position: center top !important; }

/* ═══════════════════════════════════════════
   06. Inputs & Forms (used variants only)
   ═══════════════════════════════════════════ */
input, textarea, select {
  border: 1px solid #d1d1d1;
  font-size: 14px;
  padding: 8px 15px;
  width: 100%;
  margin: 0 0 20px 0;
  max-width: 100%;
  resize: none;
  color: inherit;
  box-sizing: border-box;
}
input[type="submit"] { width: auto; }
input:focus, textarea:focus { border-color: #294557; box-shadow: 0 0 0 3px rgba(41,69,87,.15); outline: none; }

.big-input, .big-textarea, .big-select select { padding: 18px 25px; font-size: 14px; border-radius: 0; }
.extra-big-input { padding: 18px 25px; font-size: 14px; line-height: 24px; height: 62px; }
.select-style { width: 100%; overflow: hidden; border: 1px solid #d1d1d1; margin-bottom: 20px; }
.select-style select { width: 100%; border: none; background: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; }
.input-group input, .input-group textarea { margin: 0; border-radius: 4px 0 0 4px; border-color: #fff; padding: 19px 25px; }
.input-group-append .btn { border-radius: 0 4px 4px 0; }
.form-results { clear: both; margin: 0 0 15px; text-align: center; padding: 10px 0; display: none; font-size: 14px; }
.form-control:focus { border-color: #294557; box-shadow: 0 0 0 3px rgba(41,69,87,.15); }

/* ═══════════════════════════════════════════
   07. Buttons — Design System
   ═══════════════════════════════════════════
   4 visual states, 2 classes:

   CLASS            LIGHT MODE                   DARK MODE
   ─────────────    ─────────────────────────    ─────────────────────────
   .btn-primary     bg:#294557  text:#fff         bg:#7cb8f7  text:#0f172a
                    hover:bg:#1e3444 (12.9:1)     hover:bg:#a5d4fd (11.4:1)

   .btn-secondary   bg:transparent               bg:transparent
                    text:#294557                  text:#7cb8f7
                    border:#294557                border:#7cb8f7
                    hover:bg:#dce5ec (7.9:1)      hover:bg:rgba(124,184,247,.08)

   All 8 states verified WCAG AAA (7:1+).

   Legacy classes .btn-white, .btn-transparent-black,
   .btn-transparent-dark-gray all render as .btn-secondary.

   Sizes: default (16px/12px 24px), .btn-small (13px/6px 14px),
          .btn-very-small (11px/4px 14px), .btn-medium (14px/8px 20px)
*/
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* 44px floor kept from the folded-in resources.css button, which was the
     only one guaranteeing WCAG 2.5.8 target size. */
  min-height: 44px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  padding: 12px 24px;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:focus-visible { outline: 3px solid #294557; outline-offset: 3px; }
.btn i { font-size: 1em; }

/* ── Primary (filled) ── */
.btn-primary,
.btn.btn-primary {
  background: #294557;
  color: #fff;
  border-color: #294557;
}
.btn-primary:hover,
.btn.btn-primary:hover {
  background: var(--ds-brand-hover, #1e3444);
  border-color: var(--ds-brand-hover, #1e3444);
  color: #fff;
}

/* ── Secondary (outlined) ── */
.btn-secondary,
.btn.btn-secondary {
  background: transparent;
  color: #294557;
  border: 2px solid #294557;
}
.btn-secondary:hover,
.btn.btn-secondary:hover {
  background: #dce5ec;
  color: #294557;
  border-color: #294557;
}

/* Legacy aliases → secondary */
.btn.btn-white {
  background: #fff;
  border-color: #fff;
  color: #294557;
}
.btn.btn-white:hover { background: #dce5ec; }
.btn.btn-transparent-black,
.btn.btn-transparent-dark-gray {
  background: transparent;
  color: #294557;
  border-color: #294557;
}
.btn.btn-transparent-black:hover,
.btn.btn-transparent-dark-gray:hover {
  background: #dce5ec;
  color: #294557;
  border-color: #294557;
}
.btn.btn-danger { color: #fff; }

/* BEM aliases — some templates use double-dash (btn--primary).
   These map to the same styles as the single-dash versions. */
/* Tokenised so the whole button flips together. The background used to be a
   hardcoded #294557 while a [data-theme="dark"] rule forced the text to
   #0f172a — near-black on dark navy, 1.77:1. The dark rule assumed a
   background that never actually changed. */
.btn--primary {
  background: var(--ds-brand);
  color: var(--ds-text-on-brand, #fff);
  border-color: var(--ds-brand);
}
.btn--primary:hover { background: var(--ds-brand-hover, #1e3444); border-color: var(--ds-brand-hover, #1e3444); color: var(--ds-text-on-brand, #fff); }
/* Border tokenised with the text. It was a hardcoded #294557, which on the
   dark page sits at 1.77:1 — the dark rule recoloured the label and left the
   outline invisible. */
.btn--secondary { background: transparent; color: var(--ds-brand); border: 2px solid var(--ds-brand); }
.btn--secondary:hover { background: #dce5ec; color: #294557; border-color: #294557; }
.btn--ghost { background: transparent; color: #294557; border-color: transparent; }
.btn--ghost:hover { background: #dce5ec; color: #294557; }

/* Sizes */
.btn.btn-very-small { font-size: 11px; padding: 4px 14px; border-radius: 6px; }
.btn.btn-small { font-size: 13px; padding: 6px 14px; border-radius: 6px; }
.btn.btn-medium { font-size: 14px; padding: 8px 20px; }
.btn.btn-large { font-size: 16px; padding: 12px 24px; }

/* ═══════════════════════════════════════════
   08. Borders (used only)
   ═══════════════════════════════════════════ */
.border-bottom { border-bottom: 1px solid; }
.border-right { border-right: 1px solid; }
.border-none { border-style: none !important; }
.border-color-extra-light-gray { border-color: #ededed !important; }
.border-color-light-gray { border-color: #f5f5f5 !important; }
.border-color-medium-dark-gray { border-color: #363636 !important; }

/* ═══════════════════════════════════════════
   09. Spacing — Only used classes
   ═══════════════════════════════════════════ */

/* No-margin / no-padding */
.no-margin { margin: 0 !important; }
.no-margin-bottom { margin-bottom: 0 !important; }

/* Margin - pixel */
.margin-5px-top { margin-top: 5px; }
.margin-5px-bottom { margin-bottom: 5px; }
.margin-5px-left { margin-left: 5px; }
.margin-5px-right { margin-right: 5px; }
.margin-10px-bottom { margin-bottom: 10px; }
.margin-10px-top { margin-top: 10px; }
.margin-15px-bottom { margin-bottom: 15px; }
.margin-15px-top { margin-top: 15px; }
.margin-20px-bottom { margin-bottom: 20px; }
.margin-20px-top { margin-top: 20px; }
.margin-25px-top { margin-top: 25px; }
.margin-30px-bottom { margin-bottom: 30px; }
.margin-30px-top { margin-top: 30px; }
.margin-40px-bottom { margin-bottom: 40px; }
.margin-40px-tb { margin-top: 40px; margin-bottom: 40px; }
.margin-45px-right { margin-right: 45px; }
.margin-50px-bottom { margin-bottom: 50px; }
.margin-50px-top { margin-top: 50px; }
.margin-60px-bottom { margin-bottom: 60px; }
.margin-75px-left { margin-left: 75px; }
.margin-100px-bottom { margin-bottom: 100px; }
.margin-350px-lr { margin-left: 350px; margin-right: 350px; }

/* Margin - percent */
.margin-one-top { margin-top: 1%; }
.margin-four-bottom { margin-bottom: 4%; }
.margin-six-bottom { margin-bottom: 6%; }
.margin-eight-bottom { margin-bottom: 8%; }

/* Padding - pixel */
.padding-10px-tb { padding-top: 10px; padding-bottom: 10px; }
.padding-10px-top { padding-top: 10px; }
.padding-15px-all { padding: 15px; }
.padding-15px-lr { padding-left: 15px; padding-right: 15px; }
.padding-20px-tb { padding-top: 20px; padding-bottom: 20px; }
.padding-30px-tb { padding-top: 30px; padding-bottom: 30px; }
.padding-35px-all { padding: 35px; }
.padding-40px-lr { padding-left: 40px; padding-right: 40px; }
.padding-50px-all { padding: 50px; }
.padding-50px-tb { padding-top: 50px; padding-bottom: 50px; }
.padding-60px-bottom { padding-bottom: 60px; }
.padding-90px-top { padding-top: 90px; }

/* Padding - percent */
.padding-two-tb { padding-top: 2%; padding-bottom: 2%; }
.padding-five-lr { padding-left: 5%; padding-right: 5%; }
.padding-six-all { padding: 6%; }
.padding-eight-all { padding: 8%; }
.padding-seventeen-lr { padding-left: 17%; padding-right: 17%; }
.padding-twenty-tb { padding-top: 20%; padding-bottom: 20%; }

/* ═══════════════════════════════════════════
   10. Display & Position (used only)
   ═══════════════════════════════════════════ */
.d-block { display: block !important; }
.d-inline-block { display: inline-block !important; }
.d-inline { display: inline !important; }
.d-flex { display: flex !important; }
.d-table { display: table !important; }
.d-table-cell { display: table-cell !important; }
.d-none { display: none !important; }
.overflow-hidden { overflow: hidden !important; }
.position-relative { position: relative; }
.position-absolute { position: absolute; }

.top-0 { top: 0 !important; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.left-8 { left: 8px; }
.right-0 { right: 0; }

.z-index-0 { z-index: 0; }
.z-index-minus2 { z-index: -2; }

/* Width */
.w-30 { width: 30%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }
.w-100px { width: 100px; }
.h-100 { height: 100%; }

/* Opacity */
.opacity6 { opacity: .6; }
.opacity-medium { position: absolute; height: 100%; width: 100%; opacity: 0.75; top: 0; left: 0; }
.opacity-extra-medium { position: absolute; height: 100%; width: 100%; opacity: 0.5; top: 0; left: 0; }
.opacity-full-dark { position: absolute; height: 100%; width: 100%; opacity: 0.9; top: 0; left: 0; }

/* Box shadow */
.box-shadow { box-shadow: 0 0 3px rgba(0,0,0,.2); }

/* ═══════════════════════════════════════════
   11. Icons (used sizes only)
   ═══════════════════════════════════════════ */
.icon-small { font-size: 24px; }
.icon-medium { font-size: 35px; }
[class^="ti-"], [class*=" ti-"] { display: inline-block; }

/* ═══════════════════════════════════════════
   12. Header & Navigation (jg-nav)
   ═══════════════════════════════════════════ */
header { width: 100%; z-index: 99; }

/* ═══════════════════════════════════════════
   13. Blog & Content
   ═══════════════════════════════════════════ */
.blog-grid .grid-item a { position: relative; z-index: 11; }
.blog-image a > img { width: 100%; }
.blog-post .author { padding: 10px 0; position: relative; }
.blog-post-style8:hover { background-color: #1c1c1c !important; color: #fff; }
.blog-post-style8 .author:before {
  width: 100px; height: 1px; background-color: #939393 !important;
  opacity: 0.25; position: absolute; top: 0; left: 0; display: inline-block; content: "";
}

/* Tags */
.tag-cloud a {
  font-size: 10px; padding: 3px 8px; border: 1px solid #d9d9d9;
  margin: 0 8px 8px 0; display: inline-block; text-transform: uppercase;
  color: #232323; line-height: 18px;
}
.tag-cloud a:hover { background: var(--ds-brand-hover, #1e3444); color: var(--ds-text-on-brand, #fff) !important; border-color: var(--ds-brand-hover, #1e3444); }
.tags {
  font-size: 10px; padding: 3px 8px; border: 1px solid #d9d9d9;
  margin: 0 8px 8px 0; display: inline-block; text-transform: uppercase;
  color: #232323; line-height: 18px;
}

/* ═══════════════════════════════════════════
   14. Grid & Portfolio (used systems only)
   ═══════════════════════════════════════════ */
.grid { list-style: none; padding: 0; margin: 0; }
.grid-sizer { padding: 0 !important; margin: 0 !important; }
.grid.grid-3col li { width: 33.33%; float: left; list-style: none; }
.grid.gutter-medium li { padding: 7px; }
.grid-item { opacity: 1; overflow: hidden; }

.portfolio-wrapper .grid-item figure { margin: 0; position: relative; overflow: hidden; }
.portfolio-wrapper .grid-item figure img { cursor: pointer; display: block; opacity: 1; width: 100%; transition: all 0.3s ease; }
.portfolio-wrapper .grid-item figcaption {
  bottom: 0; left: 0; opacity: 0; position: absolute; transition: all 0.3s ease;
  width: 100%; height: 100%; padding: 45px; z-index: 1; text-align: center;
}
.portfolio-wrapper .grid-item figure:hover img { opacity: 0.15; transform: scale(1.1); }
.portfolio-wrapper .grid-item figure:hover figcaption { opacity: 1; }

/* Portfolio hover option 6 */
.hover-option6 .grid-item figcaption { height: 100%; position: relative; opacity: 1; padding: 35px 10px; background: #fff; }
.hover-option6 .grid-item .portfolio-hover-main { transform: none; display: table; height: 100%; top: 0; width: 100%; }
.hover-option6 .grid-item .portfolio-icon {
  transition: all 0.3s ease; position: absolute; transform: translateY(-50%);
  top: 55%; left: 0; right: 0; opacity: 0;
}
.hover-option6 .grid-item figure:hover .portfolio-icon { opacity: 1; top: 50%; }
.hover-option6 .grid-item figure:hover img { cursor: default; opacity: .15; transform: scale(1); }

.portfolio-hover-main { display: table; height: 100%; width: 100%; }
.portfolio-hover-box { display: table-cell; height: 100%; vertical-align: middle; }
.portfolio-hover-content { position: relative; }
.portfolio-img { position: relative; overflow: hidden; }
.portfolio-icon { text-align: center; }

/* ═══════════════════════════════════════════
   15. Swiper (minimal)
   ═══════════════════════════════════════════ */
.swiper { overflow: hidden; position: relative; width: 100%; z-index: 1; }
.swiper-wrapper { display: flex; }
.swiper-slide { flex-shrink: 0; }
.swiper-pagination { width: 100%; }
.swiper-pagination-white .swiper-pagination-bullet { background: #fff; }
.swiper-pagination-white .swiper-pagination-bullet-active { background: #fff; }

/* ═══════════════════════════════════════════
   16. Tabs (style 2 only)
   ═══════════════════════════════════════════ */
.nav-tabs { border-bottom: 1px solid #e5e5e5; display: flex; list-style: none; padding: 0; margin: 0; }
.nav-tabs > li { display: inline-block; }
.nav-tabs a.nav-link { transition: all .3s ease; text-decoration: none; }
.tab-style2 .tab-content { padding: 55px 0 0; border-top: 1px solid #e5e5e5; }
.tab-style2 .nav-tabs { border: 0; }
.tab-style2 .nav-tabs li { border: 1px solid #e5e5e5; border-bottom: none; display: inline-block; margin-right: 5px; }
.tab-style2 .nav-tabs li a { background-color: #f7f7f7; border: none; color: #575757; line-height: 44px; padding: 0 25px; }
.tab-style2 .nav-tabs > li > a.active { background: #fff; top: 1px; position: relative; }
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }

/* ═══════════════════════════════════════════
   17. Feature Box (used styles only)
   ═══════════════════════════════════════════ */
.feature-box-5 { padding-left: 75px; }
.feature-box-5 i { position: absolute; top: 0; left: 0; }
.feature-box-16 .feature-box-content { position: absolute; bottom: 0; width: 100%; transition: ease-in-out 0.4s; height: 60px; }
.feature-box-16 .feature-box-content p { opacity: 0; transition: ease-in-out 0.5s; }
.feature-box-16 { position: relative; overflow: hidden; }
.feature-box-16:hover .feature-box-content { height: 100%; }
.feature-box-16:hover .feature-box-content p { opacity: 1; }

/* ═══════════════════════════════════════════
   18. Pagination
   ═══════════════════════════════════════════ */
.pagination { border-radius: 0; padding: 0; margin: 0; }
.pagination li { display: inline; }
.pagination a { float: left; padding: 0 18px; line-height: 40px; border: 1px solid #ddd; border-left-width: 0; background: #fff; text-decoration: none; }
.pagination a:hover { background-color: var(--ds-brand-hover, #1e3444); color: var(--ds-text-on-brand, #fff); }
.pagination li:first-child a { border-left-width: 1px; }

/* ═══════════════════════════════════════════
   19. Footer
   ═══════════════════════════════════════════ */
.scroll-top-arrow, .scroll-top-arrow:focus {
  color: #fff; background: #878787; line-height: 28px; display: none;
  height: 30px; width: 30px; padding: 0; position: fixed; right: 45px;
  text-align: center; text-decoration: none; top: 91%; z-index: 10006; border-radius: 100%;
  border: none; cursor: pointer; font-size: inherit;
}
.scroll-top-arrow:hover { background: var(--ds-brand-hover, #1e3444); opacity: .8; color: #fff; }
.scroll-top-arrow:focus-visible { outline: 2px solid #294557; outline-offset: 2px; }
.scroll-top-arrow i { line-height: 30px; }
.footer-standard { margin-top: auto; }

/* Grid filter */
.grid-filter li { display: inline-block; float: none; padding: 0 20px; }
.grid-filter li a { border-bottom: 1px solid transparent; color: #828282; padding-bottom: 2px; }
.grid-filter > li.active > a, .grid-filter > li > a:hover { border-bottom: 1px solid #232323; color: #232323; }

/* List style 6 */
.list-style-6 { list-style: none; margin: 0; padding: 0; }
.list-style-6 li { position: relative; padding: 0 15px 8px 0; margin: 0 0 8px 0; border-bottom: 1px solid rgba(0,0,0,.1); }
.list-style-6 li span { position: absolute; top: 3px; right: 0; }
.list-style-6 li:last-child { border-bottom: none; }

/* Page title */
.page-title-large h1 { font-size: 46px; line-height: 49px; }
.one-third-screen { height: 700px; }
.down-section { position: absolute; width: 100%; bottom: 50px; left: 0; right: 0; }

/* Separator lines */
.separator-line-horrizontal-full { width: 100%; height: 1px; display: inline-block; }
.separator-line-horrizontal-medium-light2 { width: 40%; height: 1px; }

/* ═══════════════════════════════════════════
   20. Status Indicator
   ═══════════════════════════════════════════ */
.user-status { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.95em; }
.status-indicator {
  width: 10px; height: 10px; border-radius: 50%; display: inline-block;
  background-color: #9e9e9e; transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.status-online { background-color: #4caf50; box-shadow: 0 0 6px 1px rgba(76,175,80,.4); }
.status-away { background-color: #ff9800; box-shadow: 0 0 6px 1px rgba(255,152,0,.4); }
.status-offline { background-color: #9e9e9e; }

@keyframes subtle-pulse {
  0% { box-shadow: 0 0 6px 1px rgba(0,0,0,.1); }
  50% { box-shadow: 0 0 8px 2px rgba(0,0,0,.2); }
  100% { box-shadow: 0 0 6px 1px rgba(0,0,0,.1); }
}
.status-online, .status-away { animation: subtle-pulse 2.4s infinite ease-in-out; }

/* ═══════════════════════════════════════════
   21. External Link Indicator
   ═══════════════════════════════════════════ */
.ext-icon-target:after,
a[href]:not(:where(
  [href^="#"], [href^="tel:"], [href^="javascript:" i],
  [href^="/"]:not([href^="//"]),
  [href*="//joegullo.com"], [href*="joegullo"],
  [href*="//flourish.studio"]
)):after {
  /* Was a base64 SVG with fill="#000000" baked in, so the marker stayed black
     on every ground — including dark mode, where it disappeared into the page.
     A data URI cannot inherit colour, so the glyph is now a mask and the paint
     comes from currentColor: it always matches the link it belongs to, in both
     themes and inside coloured components (buttons, the CTA band) alike. */
  content: "";
  display: inline-block;
  /* 0.8em sits just above the cap-height of Inter at 16px (12.8px vs 11.5px),
     so the marker reads clearly without competing with the link text. */
  width: 0.8em;
  height: 0.8em;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M192%2C136v72a16%2C16%2C0%2C0%2C1-16%2C16H48a16%2C16%2C0%2C0%2C1-16-16V80A16%2C16%2C0%2C0%2C1%2C48%2C64h72a8%2C8%2C0%2C0%2C1%2C0%2C16H48V208H176V136a8%2C8%2C0%2C0%2C1%2C16%2C0Zm32-96a8%2C8%2C0%2C0%2C0-8-8H152a8%2C8%2C0%2C0%2C0-5.66%2C13.66L172.69%2C72l-42.35%2C42.34a8%2C8%2C0%2C0%2C0%2C11.32%2C11.32L184%2C83.31l26.34%2C26.35A8%2C8%2C0%2C0%2C0%2C224%2C104Z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%3E%3Cpath%20d%3D%22M192%2C136v72a16%2C16%2C0%2C0%2C1-16%2C16H48a16%2C16%2C0%2C0%2C1-16-16V80A16%2C16%2C0%2C0%2C1%2C48%2C64h72a8%2C8%2C0%2C0%2C1%2C0%2C16H48V208H176V136a8%2C8%2C0%2C0%2C1%2C16%2C0Zm32-96a8%2C8%2C0%2C0%2C0-8-8H152a8%2C8%2C0%2C0%2C0-5.66%2C13.66L172.69%2C72l-42.35%2C42.34a8%2C8%2C0%2C0%2C0%2C11.32%2C11.32L184%2C83.31l26.34%2C26.35A8%2C8%2C0%2C0%2C0%2C224%2C104Z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  margin: 0 1px 0 3px;
  vertical-align: middle;
  flex: none;
}

/* Opt-out. Put .no-ext-icon on the link itself, or on any ancestor to
   suppress the marker for everything inside it — useful where the link
   already carries its own icon, or in tight UI like cards and buttons. */
a.no-ext-icon:after,
.no-ext-icon a:after {
  content: none !important;
}

/* No-underline helper */
a.nounderline:link, a.nounderline:active, a.nounderline:visited, a.nounderline:hover { text-decoration: none; }

/* ═══════════════════════════════════════════
   22. Chip Component
   ═══════════════════════════════════════════ */
[data-chip="true"] {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0 0.6rem;
  min-height: 1.6rem; border-radius: 999px; font-size: 0.8rem; line-height: 1;
  border: 1px solid #e5e7eb; background-color: #f3f4f6; color: #111827; white-space: nowrap;
}
[data-chip="true"][data-chip-type="wcag"] { background-color: #0f766e; border-color: #0f766e; color: #ecfdf5; }
[data-chip="true"][data-chip-type="eaa"] { background-color: #1d4ed8; border-color: #1d4ed8; color: #eff6ff; }
[data-chip="true"][data-chip-type="ada"] { background-color: #7c3aed; border-color: #7c3aed; color: #f5f3ff; }
[data-chip="true"][data-chip-variant="outline"] { background-color: transparent; }
[data-chip="true"][data-chip-icon]:before { content: attr(data-chip-icon); margin-right: 0.25rem; font-size: 0.9em; }

/* ═══════════════════════════════════════════
   23. Mobile / Responsive Visibility
   ═══════════════════════════════════════════ */
.mobileShow { display: none; }
@media (max-width: 480px) { .mobileShow { display: inline; } }
.mobileHide { display: inline; }
@media (max-width: 480px) { .mobileHide { display: none; } }

/* ═══════════════════════════════════════════
   24. Responsive — Used breakpoint classes
   ═══════════════════════════════════════════ */

/* --- Medium screens (tablets, < 992px) --- */
@media (max-width: 991px) {
  .md-w-100 { width: 100% !important; }
  .md-w-80 { width: 80% !important; }
  .md-h-500px { height: 500px; }
  .md-margin-10px-bottom { margin-bottom: 10px !important; }
  .md-margin-30px-bottom { margin-bottom: 30px !important; }
  .md-margin-30px-top { margin-top: 30px !important; }
  .md-margin-40px-bottom { margin-bottom: 40px !important; }
  .md-margin-50px-bottom { margin-bottom: 50px !important; }
  .md-margin-60px-bottom { margin-bottom: 60px !important; }
  .md-margin-lr-auto { margin-left: auto !important; margin-right: auto !important; }
  .md-margin-two-bottom { margin-bottom: 2% !important; }
  .md-no-border { border: 0 !important; }
  .md-no-margin-right { margin-right: 0 !important; }
  .md-no-margin-tb { margin-top: 0 !important; margin-bottom: 0 !important; }
  .md-no-margin-top { margin-top: 0 !important; }
  .md-no-padding-left { padding-left: 0 !important; }
  .md-no-padding-lr { padding-left: 0 !important; padding-right: 0 !important; }
  .md-padding-15px-lr { padding-left: 15px !important; padding-right: 15px !important; }
  .md-padding-25px-lr { padding-left: 25px !important; padding-right: 25px !important; }
  .md-padding-30px-bottom { padding-bottom: 30px !important; }
  .md-padding-50px-tb { padding-top: 50px !important; padding-bottom: 50px !important; }
  .md-padding-50px-top { padding-top: 50px !important; }
  .md-grid-2col li { width: 50% !important; }
  .text-md-start { text-align: start !important; }
  .text-md-end { text-align: end !important; }
  .d-lg-inline-block { display: none !important; }
}

/* --- Small screens (phones, < 768px) --- */
@media (max-width: 767px) {
  .sm-w-100 { width: 100% !important; }
  .sm-w-90 { width: 90% !important; }
  .sm-h-300px { height: 300px; }
  .sm-margin-10px-bottom { margin-bottom: 10px !important; }
  .sm-margin-20px-bottom { margin-bottom: 20px !important; }
  .sm-margin-30px-bottom { margin-bottom: 30px !important; }
  .sm-margin-40px-bottom { margin-bottom: 40px !important; }
  .sm-margin-50px-bottom { margin-bottom: 50px !important; }
  .sm-no-margin-lr { margin-left: 0 !important; margin-right: 0 !important; }
  .sm-no-margin-tb { margin-top: 0 !important; margin-bottom: 0 !important; }
  .sm-no-padding-lr { padding-left: 0 !important; padding-right: 0 !important; }
  .sm-padding-10px-all { padding: 10px !important; }
  .sm-padding-15px-lr { padding-left: 15px !important; padding-right: 15px !important; }
  .sm-padding-30px-all { padding: 30px !important; }
  .sm-padding-30px-tb { padding-top: 30px !important; padding-bottom: 30px !important; }
  .sm-padding-30px-top { padding-top: 30px !important; }
  .sm-grid-1col li { width: 100% !important; }

  /* Heading scaling */
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.3em; }
  .margin-350px-lr { margin-left: 15px; margin-right: 15px; }
}

/* --- Large screens (> 992px) --- */
@media (min-width: 992px) {
  .d-lg-inline-block { display: inline-block !important; }
  .text-lg-start { text-align: start !important; }
  .lg-w-100 { width: 100% !important; }
  .lg-margin-15px-bottom { margin-bottom: 15px !important; }
  .lg-margin-50px-bottom { margin-bottom: 50px !important; }
  .lg-margin-50px-top { margin-top: 50px !important; }
  .lg-margin-three-top { margin-top: 3% !important; }
  .lg-no-border-right { border-right: 0 !important; }
  .lg-padding-30px-all { padding: 30px !important; }
  .lg-padding-30px-tb { padding-top: 30px !important; padding-bottom: 30px !important; }
  .lg-padding-40px-lr { padding-left: 40px !important; padding-right: 40px !important; }
  .lg-padding-ten-all { padding: 10% !important; }
  .lg-padding-two-lr { padding-left: 2% !important; padding-right: 2% !important; }
  .lg-grid-3col li { width: 33.33% !important; }
}

/* Bootstrap-compatible column grid */
@media (min-width: 576px) {
  .container { max-width: 540px; }
}
@media (min-width: 768px) {
  .container { max-width: 720px; }
  .col-md-2 { flex: 0 0 16.667%; max-width: 16.667%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-5 { flex: 0 0 41.667%; max-width: 41.667%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-md-10 { flex: 0 0 83.333%; max-width: 83.333%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  .row-cols-md-2 > * { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 992px) {
  .container { max-width: 960px; }
  .col-lg-2 { flex: 0 0 16.667%; max-width: 16.667%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-lg-5 { flex: 0 0 41.667%; max-width: 41.667%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.333%; max-width: 58.333%; }
  .col-lg-8 { flex: 0 0 66.667%; max-width: 66.667%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.333%; max-width: 83.333%; }
}
@media (min-width: 1200px) {
  .container { max-width: 1140px; }
}
@media (min-width: 1400px) {
  .container-lg { max-width: 1200px; }
}

/* Column base */
[class*="col-"] { position: relative; width: 100%; min-height: 1px; }
.row-cols-1 > * { flex: 0 0 100%; max-width: 100%; }
.col-auto { flex: 0 0 auto; width: auto; }
.col { flex: 1 0 0%; }

/* Flexbox utilities */
.justify-content-center { justify-content: center !important; }
.justify-content-end { justify-content: flex-end !important; }
.align-items-center { align-items: center !important; }
.flex-wrap { flex-wrap: wrap; }

/* Bootstrap spacing utilities used in templates */
.mb-0 { margin-bottom: 0 !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.ps-0 { padding-left: 0 !important; }
.pe-0 { padding-right: 0 !important; }
.pe-md-3 { }
@media (min-width: 768px) { .pe-md-3 { padding-right: 1rem !important; } }

/* Collapse utility */
.collapse:not(.show) { display: none; }
.collapse.show { display: block; }

/* ═══════════════════════════════════════════
   25. Connect Page — Button Alignment
   ═══════════════════════════════════════════ */
.connect-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-top: 1.25rem;
}

.connect-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  color: #374151;
  background-color: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  transition: all 0.2s ease;
  cursor: pointer;
  width: 100%;
  min-height: 48px;
  line-height: 1;
}

.connect-action-btn i,
.connect-action-btn [class^="ph-"],
.connect-action-btn [class*=" ph-"] {
  font-size: 1.125rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.connect-action-btn:hover {
  border-color: #294557;
  color: #294557;
  background-color: rgba(41, 69, 87, 0.04);
}

.connect-action-btn:focus-visible {
  outline: 3px solid #294557;
  outline-offset: 3px;
}

/* ═══════════════════════════════════════════
   26. Accessibility Demo Page — Site Design Alignment
   ═══════════════════════════════════════════ */
.a11y-demo-methodology {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  line-height: 1.6;
  max-width: 72rem;
  margin: 0 auto;
}

.a11y-demo-methodology .demo-header {
  margin-bottom: 0;
  padding: 4rem 1.5rem 3rem;
  border-bottom: none;
  text-align: center;
  background: #fff;
}

.a11y-demo-methodology .demo-header h1 {
  color: #111827;
  margin-bottom: 1rem;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.a11y-demo-methodology .demo-intro {
  color: #4b5563;
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 44rem;
  margin: 0 auto;
}

.a11y-demo-methodology .feature-section {
  display: grid;
  gap: 1.5rem;
  margin: 0;
  padding: 3rem 1.5rem;
  background: #f8fafc;
}

.a11y-demo-methodology .feature-card {
  background: #fff;
  padding: 2rem;
  border-radius: 0.75rem;
  border-left: none;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.06);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.a11y-demo-methodology .feature-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #d1d5db;
  transform: none;
}

.a11y-demo-methodology .feature-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.a11y-demo-methodology .feature-icon {
  font-size: 1.75rem;
  line-height: 1;
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(41, 69, 87, 0.08);
  border-radius: 0.625rem;
  flex-shrink: 0;
}

.a11y-demo-methodology .feature-header h3 {
  color: #111827;
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.a11y-demo-methodology .feature-body {
  margin-left: 0;
}

.a11y-demo-methodology .feature-description {
  color: #4b5563;
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.7;
}

.a11y-demo-methodology .compliance-info {
  background: #f8fafc;
  padding: 1.5rem;
  border-radius: 0.625rem;
  margin: 1.25rem 0;
  font-size: 0.875rem;
  border: 1px solid #e5e7eb;
}

.a11y-demo-methodology .compliance-info strong {
  color: #294557;
  display: block;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.a11y-demo-methodology .compliance-info strong:first-child {
  margin-top: 0;
}

.a11y-demo-methodology .compliance-info ul {
  margin: 0.5rem 0;
  padding-left: 1.5rem;
}

.a11y-demo-methodology .compliance-info li {
  margin: 0.375rem 0;
  color: #4b5563;
  font-size: 0.875rem;
  line-height: 1.6;
}

.a11y-demo-methodology .demo-btn {
  padding: 0.75rem 1.5rem;
  background: #294557;
  color: #fff;
  border: 2px solid #294557;
  border-radius: 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  margin-top: 1rem;
  font-family: inherit;
  min-height: 48px;
}

.a11y-demo-methodology .demo-btn:hover {
  background: #1a2f3d;
  border-color: #1a2f3d;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.a11y-demo-methodology .demo-btn:focus-visible {
  outline: 3px solid #294557;
  outline-offset: 3px;
}

.a11y-demo-methodology .demo-btn:active {
  transform: translateY(0);
}

.a11y-demo-methodology .demo-btn[aria-pressed="true"] {
  background: #0f766e;
  border-color: #0f766e;
}

.a11y-demo-methodology .demo-output {
  min-height: 3.5rem;
  padding: 1.25rem;
  background: #eff6ff;
  border-left: 3px solid #294557;
  border-radius: 0.5rem;
  margin: 0 1.5rem 1.5rem;
  font-size: 0.875rem;
  color: #1e3a5f;
  line-height: 1.6;
}

.a11y-demo-methodology .text-size-controls {
  background: #f8fafc;
  padding: 1.25rem;
  border-radius: 0.625rem;
  margin: 1.25rem 0;
  border: 1px solid #e5e7eb;
}

.a11y-demo-methodology kbd {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  color: #374151;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

@media (max-width: 768px) {
  .a11y-demo-methodology .demo-header {
    padding: 2.5rem 1rem 2rem;
  }
  .a11y-demo-methodology .feature-section {
    padding: 2rem 1rem;
  }
  .a11y-demo-methodology .feature-card {
    padding: 1.5rem;
  }
  .a11y-demo-methodology .feature-icon {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.375rem;
  }
  .a11y-demo-methodology .feature-header h3 {
    font-size: 1.125rem;
  }
}

/* ═══════════════════════════════════════════
   27. Reduced Motion (global)
   ═══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════
   28. Navigation (jg-nav)
   ═══════════════════════════════════════════ */
.jg-nav ul,.jg-nav ol,.jg-nav li,
.jg-nav__overlay ul,.jg-nav__overlay ol,.jg-nav__overlay li{list-style:none;margin:0;padding:0}
.jg-nav a{text-decoration:none}

.jg-skip{position:absolute;top:-60px;left:0;background:#294557;color:#fff;padding:12px 24px;text-decoration:none;z-index:10000;font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:14px;transition:top .2s}
.jg-skip:focus{top:0;outline:3px solid #294557;outline-offset:2px}

.jg-nav{position:relative;z-index:1000;font-family:'Inter',system-ui,sans-serif;border-bottom:1px solid #e0e0e0;background:#fff}
.jg-nav__bar{max-width:1200px;margin:0 auto;padding:10px 15px;display:flex;align-items:center;justify-content:space-between}
.jg-nav__logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.jg-nav__logo img{display:block;height:60px;width:auto}
.jg-nav__logo:focus-visible{outline:3px solid #294557;outline-offset:4px;border-radius:4px}

.jg-nav__mob{display:none;align-items:center;gap:12px}
.jg-nav__mob-lang{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;border:1.5px solid #e5e7eb;border-radius:6px;color:#232323;font-size:13px;font-weight:600;text-decoration:none;transition:all .15s}
.jg-nav__mob-lang:hover{border-color:#294557;color:#294557}
.jg-nav__mob-lang:focus-visible{outline:3px solid #294557;outline-offset:2px}

.jg-nav__burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px;background:none;border:1.5px solid #e5e7eb;border-radius:6px;cursor:pointer;padding:0;transition:border-color .15s}
.jg-nav__burger:hover{border-color:#294557}
.jg-nav__burger:focus-visible{outline:3px solid #294557;outline-offset:2px}
.jg-nav__burger-line{display:block;width:18px;height:2px;background:#232323;border-radius:1px}

.jg-nav__desktop{display:flex;align-items:center;gap:0}
.jg-nav__list{display:flex;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.jg-nav__item{position:relative}
.jg-nav__link{display:inline-flex;align-items:center;gap:4px;padding:5px 0;margin:0 20px;color:#232323;text-decoration:none;font-size:14px;font-weight:600;transition:color .15s;white-space:nowrap;position:relative}
.jg-nav__link:hover{color:rgba(0,0,0,.6)}
.jg-nav__link:focus-visible{outline:3px solid #294557;outline-offset:3px;border-radius:2px}
.jg-nav__link--active,.jg-nav__link[aria-current="page"]{color:#294557;font-weight:700}
.jg-nav__link--active::after,.jg-nav__link[aria-current="page"]::after{content:'';position:absolute;bottom:-10px;left:0;right:0;height:2px;background:#294557;border-radius:1px}
.jg-nav__chevron{transition:transform .2s;flex-shrink:0}
.jg-nav__link[aria-expanded="true"] .jg-nav__chevron{transform:rotate(180deg)}

.jg-nav__dropdown{display:none;position:absolute;top:calc(100% + 10px);left:0;min-width:200px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.1);padding:6px 0;list-style:none;margin:0;z-index:100}
.jg-nav__dropdown--open{display:block;animation:jgDropIn .15s ease}
@keyframes jgDropIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.jg-nav__dd-link{display:block;padding:10px 16px;color:#232323;text-decoration:none;font-size:13px;font-weight:500;transition:color .1s,background .1s;min-height:40px;line-height:1.4}
.jg-nav__dd-link:hover{color:#294557;background:rgba(41,69,87,.05)}
.jg-nav__dd-link:focus-visible{outline:3px solid #294557;outline-offset:-3px;border-radius:4px}
.jg-nav__dd-link--active{color:#294557;font-weight:700}

.jg-nav__lang{position:relative;margin-left:20px}
.jg-nav__lang-btn{display:inline-flex;align-items:center;gap:4px;padding:7px 12px;background:none;border:1.5px solid #e5e7eb;border-radius:6px;color:#232323;font-family:'Inter',system-ui,sans-serif;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.jg-nav__lang-btn:hover{border-color:#294557;color:#294557}
.jg-nav__lang-btn:focus-visible{outline:3px solid #294557;outline-offset:2px}
.jg-nav__lang-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.jg-nav__lang-dd{display:none;position:absolute;top:calc(100% + 6px);right:0;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.1);min-width:120px;padding:4px 0;list-style:none;margin:0;z-index:100}
.jg-nav__lang-dd--open{display:block}
.jg-nav__lang-link{display:block;padding:8px 16px;color:#232323;text-decoration:none;font-size:14px;transition:background .1s,color .1s}
.jg-nav__lang-link:hover{background:rgba(41,69,87,.05);color:#294557}
.jg-nav__lang-link:focus-visible{outline:3px solid #294557;outline-offset:-3px}
.jg-nav__lang-link--active{color:#294557;font-weight:600}

/* Mobile overlay */
.jg-nav__overlay{position:fixed;inset:0;z-index:9999;background:#111827;display:flex;flex-direction:column;padding:5rem 2rem 2rem;overflow-y:auto;-webkit-overflow-scrolling:touch;opacity:0;visibility:hidden;transform:translateX(100%);transition:opacity .3s,transform .3s,visibility 0s .3s}
.jg-nav__overlay--open{opacity:1;visibility:visible;transform:translateX(0);transition:opacity .3s,transform .3s,visibility 0s 0s}
.jg-nav__close{position:absolute;top:20px;right:20px;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:none;border:1.5px solid rgba(255,255,255,.15);border-radius:50%;color:#f9fafb;cursor:pointer;transition:background .15s}
.jg-nav__close:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.3)}
.jg-nav__close:focus-visible{outline:3px solid #7cb8f7;outline-offset:2px}
.jg-nav__ov-list{list-style:none;margin:0;padding:0;flex:1}
.jg-nav__ov-item{opacity:0;transform:translateX(20px);border-bottom:1px solid rgba(255,255,255,.08)}
.jg-nav__overlay--open .jg-nav__ov-item{opacity:1;transform:translateX(0);transition:opacity .35s,transform .35s;transition-delay:calc(.08s * var(--i,0))}
.jg-nav__ov-link{display:flex;align-items:center;padding:18px 0;color:#f9fafb;text-decoration:none;font-size:20px;font-weight:500;letter-spacing:-.01em;min-height:56px;transition:color .15s}
.jg-nav__ov-link:hover{color:#7cb8f7}
.jg-nav__ov-link:focus-visible{outline:3px solid #7cb8f7;outline-offset:4px;border-radius:4px}
.jg-nav__ov-link--active{color:#7cb8f7;font-weight:600}
.jg-nav__ov-sub{list-style:none;margin:0;padding:0 0 8px 20px}
.jg-nav__ov-sublink{display:flex;align-items:center;padding:10px 0;color:#9ca3af;text-decoration:none;font-size:16px;font-weight:400;min-height:48px;transition:color .15s}
.jg-nav__ov-sublink:hover{color:#f9fafb}
.jg-nav__ov-sublink:focus-visible{outline:3px solid #7cb8f7;outline-offset:4px;border-radius:4px}
.jg-nav__ov-sublink--active{color:#7cb8f7;font-weight:600}
.jg-nav__ov-lang{display:flex;gap:12px;padding-top:24px;margin-top:auto;border-top:1px solid rgba(255,255,255,.08)}
.jg-nav__ov-lang-link{display:inline-flex;align-items:center;justify-content:center;padding:10px 20px;border:1.5px solid rgba(255,255,255,.15);border-radius:6px;color:#9ca3af;text-decoration:none;font-size:15px;font-weight:500;min-height:48px;transition:all .15s;flex:1;text-align:center}
.jg-nav__ov-lang-link:hover{border-color:#7cb8f7;color:#f9fafb}
.jg-nav__ov-lang-link:focus-visible{outline:3px solid #7cb8f7;outline-offset:2px}
.jg-nav__ov-lang-link--active{background:rgba(124,184,247,.12);border-color:#7cb8f7;color:#7cb8f7;font-weight:600}

@media(max-width:991px){
  .jg-nav__mob{display:flex}
  .jg-nav__burger{display:flex}
  .jg-nav__desktop{display:none}
  .jg-nav__bar{padding:8px 15px}
  .jg-nav__logo img{height:48px}
}
@media(min-width:1400px){.jg-nav__bar{padding:10px 30px}}
body.jg-nav-open{overflow:hidden}
@media(min-width:992px){body.jg-nav-open{overflow:auto}}

/* ═══════════════════════════════════════════
   28.5 Breadcrumbs (sc-breadcrumbs) — global
   ═══════════════════════════════════════════ */
.sc-breadcrumbs{background:#f7f7f7;padding:.75rem 0;margin:0;width:100%}
.sc-breadcrumb-list{max-width:1200px;margin:0 auto;padding:0 1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;list-style:none}
.sc-breadcrumb-item{display:inline-flex;align-items:center;gap:.5rem}
.sc-breadcrumb-link{color:#374151;text-decoration:none;transition:color .2s;font-size:.875rem;line-height:1.25rem;font-weight:400;border-radius:4px;padding:.25rem .4rem;margin:-.25rem -.4rem}
.sc-breadcrumb-link:hover{color:#111827}
.sc-breadcrumb-link:focus-visible{outline:3px solid #294557;outline-offset:2px;color:#111827;border-radius:4px}
.sc-breadcrumb-page{color:#111827;font-size:.875rem;line-height:1.25rem;font-weight:600}
.sc-breadcrumb-separator{color:#4b5563;user-select:none;font-size:.875rem}

/* ═══════════════════════════════════════════
   29. Footer (jg-footer)
   ═══════════════════════════════════════════ */
.jg-footer{background-color:#f7f7f7;padding:50px 0;font-family:'Inter',system-ui,sans-serif;font-size:12px;line-height:20px;color:#4b5563}
.jg-footer__inner{max-width:1200px;margin:0 auto;padding:0 15px;display:flex;justify-content:space-between;align-items:center;gap:2rem}
.jg-footer__left{flex-shrink:0}
.jg-footer__copy{margin:0;color:#232323;font-weight:500}
.jg-footer__cookies{margin:4px 0 0}
.jg-footer__cookies a,.jg-footer__cookies-btn{color:#374151 !important;text-decoration:underline;text-underline-offset:2px;background:none !important;background-color:transparent !important;border:none !important;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;cursor:pointer;padding:0;margin:0;-webkit-appearance:none;appearance:none;display:inline;box-shadow:none}
.jg-footer__cookies a:hover,.jg-footer__cookies-btn:hover{color:#294557 !important}
.jg-footer__cookies-btn:focus-visible{outline:2px solid #294557;outline-offset:2px;border-radius:2px}
.jg-footer__nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px;justify-content:flex-end;line-height:1.8}
.jg-footer__nav a{color:#374151 !important;text-decoration:underline;text-underline-offset:2px;padding:4px 6px;white-space:nowrap;transition:color .15s}
.jg-footer__nav a:hover{color:#294557 !important}
.jg-footer__nav a:focus-visible{outline:2px solid #294557;outline-offset:2px;border-radius:2px}
.jg-footer__sep{display:inline-block;width:1px;height:.9em;background:#9ca3af;vertical-align:middle;margin:0 6px}
@media(max-width:768px){
  .jg-footer{padding:30px 0}
  .jg-footer__inner{flex-direction:column;text-align:center;gap:1.25rem}
  .jg-footer__left{text-align:center}
  .jg-footer__nav{justify-content:center}
  .jg-footer__sep{display:none}
  .jg-footer__nav a{padding:4px 10px}
}

/* ═══════════════════════════════════════════
   30. Reduced Motion & Accessibility
   ═══════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .jg-nav__overlay,.jg-nav__ov-item,.jg-nav__link,.jg-nav__dd-link,.jg-nav__dropdown,.jg-nav__chevron,.jg-nav__burger-line,.jg-skip{transition:none!important;animation:none!important}
  .jg-nav__overlay--open .jg-nav__ov-item{opacity:1;transform:none;transition-delay:0s!important}
}
@media(forced-colors:active){
  .jg-nav__link:focus-visible,.jg-nav__dd-link:focus-visible,.jg-nav__burger:focus-visible,.jg-nav__close:focus-visible,.jg-nav__ov-link:focus-visible{outline:3px solid LinkText}
  .jg-nav__link--active::after{background:LinkText}
}

/* ═══════════════════════════════════════════
   32. Score Badge (jg-score)
   ═══════════════════════════════════════════ */
.jg-score{position:relative;display:inline-flex}
.jg-score__pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;background:#f8fafc;border:1px solid #e5e7eb;border-radius:6px;font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:600;color:#374151;cursor:pointer;transition:all .15s;white-space:nowrap;-webkit-appearance:none;appearance:none}
.jg-score__pill:hover{border-color:#294557;background:#f0f4f8}
.jg-score__pill:focus-visible{outline:3px solid #294557;outline-offset:2px}
.jg-score__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;animation:jgPulse 2s ease infinite}
@keyframes jgPulse{0%,100%{opacity:1}50%{opacity:.5}}
.jg-score__card{position:absolute;bottom:calc(100% + 10px);left:0;width:280px;background:#fff;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.12);padding:1rem;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility 0s .2s;z-index:100}
.jg-score__card[aria-hidden="false"]{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .2s,transform .2s,visibility 0s 0s}
.jg-score__card-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.75rem}
.jg-score__ring{position:relative;width:48px;height:48px;flex-shrink:0}
.jg-score__ring svg{display:block}
.jg-score__ring-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.jg-score__level{display:block;font-size:14px;font-weight:600;color:#232323}
.jg-score__date{display:block;font-size:11px;color:#4b5563;margin-top:2px}
.jg-score__card-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(55px,1fr));gap:6px;margin-bottom:.75rem}
.jg-score__stat{text-align:center;padding:6px 4px;background:#f8fafc;border-radius:6px}
.jg-score__stat-val{display:block;font-size:16px;font-weight:700}
.jg-score__stat-label{display:block;font-size:10px;color:#4b5563;text-transform:uppercase;letter-spacing:.04em;margin-top:1px}
.jg-score__card-link{display:block;text-align:center;font-size:12px;font-weight:600;color:#294557;text-decoration:none;padding:8px;border-top:1px solid #e5e7eb;margin:0 -1rem -1rem;border-radius:0 0 12px 12px;transition:background .15s}
.jg-score__card-link:hover{background:#f0f4f8}
.jg-score__card-link:focus-visible{outline:3px solid #294557;outline-offset:-3px}
@media(max-width:768px){
  .jg-score__card{left:auto;right:0}
}

/* ═══════════════════════════════════════════
   33. Dark Mode Toggle (jg-theme)
   ═══════════════════════════════════════════ */
.jg-theme{display:inline-flex;align-items:center;justify-content:center;gap:2px;min-width:36px;height:36px;background:none;border:1.5px solid #e5e7eb;border-radius:6px;cursor:pointer;color:#374151;transition:all .15s;padding:0 6px;margin-left:8px;-webkit-appearance:none;appearance:none;font-size:18px;line-height:1}
.jg-theme:hover{border-color:#294557;color:#294557}
.jg-theme:focus-visible{outline:3px solid #294557;outline-offset:2px}
/* In light mode: show moon (click to go dark), hide sun */
.jg-theme__sun{display:none}
.jg-theme__moon{display:inline-block}
/* In dark mode: show sun (click to go light), hide moon */
[data-theme="dark"] .jg-theme__sun{display:inline-block}
[data-theme="dark"] .jg-theme__moon{display:none}
[data-theme="dark"] .jg-theme{border-color:rgba(255,255,255,.2);color:#e5e7eb}
[data-theme="dark"] .jg-theme:hover{border-color:#7cb8f7;color:#7cb8f7}

/* ═══════════════════════════════════════════
   36. Blog — Editorial Feed (jg-blog)
   ═══════════════════════════════════════════
   All colors WCAG AAA verified (7:1 minimum).
   Scoped with jg-blog__ prefix.                */

.jg-blog{background:#fff}
.jg-blog__container{max-width:720px;margin:0 auto;padding:4rem 2rem 5rem}

/* Header */
.jg-blog__header{margin-bottom:3rem}
.jg-blog__title{font-size:1.75rem;font-weight:700;color:#232323;margin-bottom:.5rem}
.jg-blog__intro{font-size:.9375rem;color:#475569;line-height:1.7}

/* Filter chips */
.jg-blog__filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2.5rem;padding-bottom:1.5rem;border-bottom:1px solid #e5e7eb}
.jg-blog__filter{padding:.375rem .875rem;border:1px solid #e5e7eb;border-radius:6px;font-size:.75rem;font-weight:600;color:#475569;background:none;cursor:pointer;font-family:inherit;transition:all .15s;min-height:36px}
.jg-blog__filter:hover{border-color:#294557;color:#294557}
.jg-blog__filter:focus-visible{outline:3px solid #294557;outline-offset:2px}
.jg-blog__filter--active{background:#294557;color:#fff;border-color:#294557}
.jg-blog__filter--active:hover{background:var(--ds-brand-hover,#1e3444);color:#fff;border-color:var(--ds-brand-hover,#1e3444)}

/* Tag pills — all AAA verified on their backgrounds */
.jg-blog__tag{display:inline-block;padding:2px 10px;border-radius:4px;font-size:.6875rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.jg-blog__tag--a11y{background:#e8eef2;color:#294557}
.jg-blog__tag--ux{background:#fef3c7;color:#7c2d12}
.jg-blog__tag--eaa{background:#ecfdf5;color:#065f46}
.jg-blog__tag--dev{background:#ede9fe;color:#5b21b6}
.jg-blog__tag--docs{background:#f1f5f9;color:#374151}
.jg-blog__tag--default{background:#f1f5f9;color:#374151}

/* Featured article */
.jg-blog__featured{margin-bottom:3rem;padding-bottom:2.5rem;border-bottom:1px solid #e5e7eb}
.jg-blog__featured-label{font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#294557;margin-bottom:.75rem}
.jg-blog__featured-title{font-size:1.375rem;font-weight:700;line-height:1.3;margin-bottom:.625rem}
.jg-blog__featured-title a{color:#232323;text-decoration:none;transition:color .15s}
.jg-blog__featured-title a:hover{color:#294557}
.jg-blog__featured-title a:focus-visible{outline:3px solid #294557;outline-offset:2px;border-radius:2px}
.jg-blog__featured-meta{display:flex;align-items:center;flex-wrap:wrap;gap:.75rem;font-size:.8125rem;color:#475569;margin-bottom:.75rem}
.jg-blog__featured-excerpt{font-size:.9375rem;line-height:1.8;color:#475569}
.jg-blog__dot{user-select:none}

/* Read link */
.jg-blog__read-link{display:inline-flex;align-items:center;gap:4px;font-size:.875rem;font-weight:600;color:#294557;text-decoration:none;margin-top:.75rem;transition:gap .15s}
.jg-blog__read-link:hover{gap:8px}
.jg-blog__read-link:focus-visible{outline:3px solid #294557;outline-offset:2px;border-radius:2px}

/* Article list */
.jg-blog__list{display:flex;flex-direction:column;gap:0}
.jg-blog__article{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:1.125rem 0;border-bottom:1px solid #e5e7eb}
.jg-blog__article:last-child{border-bottom:none}
.jg-blog__article-body{flex:1;min-width:0}
.jg-blog__article-title{font-size:1rem;font-weight:600;line-height:1.4;margin-bottom:.25rem}
.jg-blog__article-title a{color:#232323;text-decoration:none;transition:color .15s}
.jg-blog__article-title a:hover{color:#294557}
.jg-blog__article-title a:focus-visible{outline:3px solid #294557;outline-offset:2px;border-radius:2px}
.jg-blog__article-meta{display:flex;align-items:center;gap:.625rem;font-size:.75rem;color:#475569}
.jg-blog__article-date{flex-shrink:0;font-size:.75rem;color:#475569;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Pagination */
.jg-blog__pagination{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #e5e7eb;flex-wrap:wrap}
.jg-blog__pagination-btns{display:flex;gap:.5rem}
.jg-blog__pagination-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .9rem;border:1px solid #e5e7eb;border-radius:6px;font-size:.8125rem;font-weight:600;color:#294557;text-decoration:none;background:#fff;transition:all .15s;min-height:36px}
.jg-blog__pagination-btn:hover{border-color:#294557;background:#f8fafc}
.jg-blog__pagination-btn:focus-visible{outline:3px solid #294557;outline-offset:2px}
.jg-blog__pagination-btn--disabled{color:#9ca3af;cursor:not-allowed;pointer-events:none;opacity:.5}
.jg-blog__pagination-info{font-size:.8125rem;color:#475569}

/* Empty state */
.jg-blog__empty{padding:3rem 1.5rem;border:1px dashed #e5e7eb;border-radius:8px;text-align:center;color:#475569;font-size:.9375rem}

/* Mobile */
@media(max-width:640px){
  .jg-blog__container{padding:2.5rem 1.25rem 3rem}
  .jg-blog__article{flex-direction:column;gap:.25rem}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .jg-blog__read-link,.jg-blog__featured-title a,.jg-blog__article-title a,.jg-blog__filter,.jg-blog__pagination-btn{transition:none}
}

/* ═══════════════════════════════════════════
   34. Dark Mode Theme Colors
   ═══════════════════════════════════════════
   All colors defined as CSS custom properties.
   Light mode = defaults (no change needed).
   Dark mode = overrides on [data-theme="dark"].
   AAA contrast ratios maintained in both modes. */

[data-theme="dark"] {
  /* Page */
  --jg-bg: #0f172a;
  --jg-bg-surface: #1e293b;
  --jg-bg-card: #1e293b;
  --jg-text: #e2e8f0;
  --jg-text-muted: #a8b5c4;
  --jg-text-heading: #f1f5f9;
  --jg-border: #334155;
  --jg-primary: #7cb8f7;
  --jg-primary-hover: #93c5fd;

  /* Canonical design tokens — dark (mirror of .kit dark on /about/site) */
  --ds-brand: #7cb8f7;
  --ds-brand-hover: #a5d4fd;
  --ds-brand-light: rgba(124,184,247,0.08);
  --ds-brand-muted: #5a9ad5;
  --ds-text-primary: #e2e8f0;
  --ds-text-secondary: #a8b5c4;
  --ds-text-muted: #a8b5c4;
  --ds-text-on-brand: #0f172a;
  --ds-surface: #0f172a;
  --ds-surface-raised: #1e293b;
  --ds-surface-sunken: #0c1322;
  --ds-border: #607888;
  --ds-border-strong: #7a8fa0;
  --ds-border-focus: #7cb8f7;
  --ds-success: #8cf0b5;
  --ds-success-bg: #064e3b;
  --ds-success-text: #8cf0b5;
  --ds-warning: #fbbf24;
  --ds-warning-bg: #451a03;
  --ds-warning-text: #fbbf24;
  --ds-error: #fca5a5;
  --ds-error-bg: #450a0a;
  --ds-error-text: #fca5a5;
  --ds-link: #7cb8f7;
  --ds-link-hover: #a5d4fd;
  --ds-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --ds-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --ds-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.3);
  --ds-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.3), 0 4px 6px -4px rgba(0,0,0,0.3);

  color-scheme: dark;
}

/* Apply dark mode to major site elements.
   Headings are scoped to .main to prevent bleeding into
   self-contained components like the schedule widget. */
[data-theme="dark"] body { background-color: #0f172a; color: #e2e8f0; }
[data-theme="dark"] .main { background-color: #0f172a; }
[data-theme="dark"] .main h1,
[data-theme="dark"] .main h2,
[data-theme="dark"] .main h3,
[data-theme="dark"] .main h4,
[data-theme="dark"] .main h5,
[data-theme="dark"] .main h6 { color: #f1f5f9; }
[data-theme="dark"] a { color: #7cb8f7; }
[data-theme="dark"] a:hover { color: #93c5fd; }

/* Prevent global anchor color from bleeding into button text.
   The global [data-theme="dark"] a { color: #7cb8f7 } would otherwise
   override button text for <a> elements with btn classes. */
[data-theme="dark"] a.btn,
[data-theme="dark"] a.btn:hover { text-decoration: none; }
[data-theme="dark"] a.btn-primary,
[data-theme="dark"] a.btn--primary,
[data-theme="dark"] a[class*="btn-primary"] { color: #0f172a !important; }
[data-theme="dark"] a.btn-primary:hover,
[data-theme="dark"] a.btn--primary:hover { color: #0f172a !important; }
[data-theme="dark"] a.btn-secondary,
[data-theme="dark"] a.btn--secondary,
[data-theme="dark"] a[class*="btn-secondary"] { color: #7cb8f7 !important; }
[data-theme="dark"] a.btn-secondary:hover,
[data-theme="dark"] a.btn--secondary:hover { color: #a5d4fd !important; }
[data-theme="dark"] a.btn--ghost { color: #7cb8f7 !important; }
[data-theme="dark"] a.btn--ghost:hover { color: #a5d4fd !important; }
/* Text-link CTAs only. Without the :not(), this also caught filled buttons
   whose class happens to contain "__cta" — e.g. .projects-sidebar__cta, which
   is a .btn--primary. It painted the label #7cb8f7 on a #7cb8f7 background:
   1:1, an invisible CTA. Both rules are !important at equal specificity, so
   this one won purely by coming later in the file. */
[data-theme="dark"] a[class*="__cta"]:not([class*="btn"]) { color: #7cb8f7 !important; }
[data-theme="dark"] a[class*="__link"]:not(.jg-nav__link):not(.jg-nav__dd-link) { text-decoration: none; }

/* Skip link — white on brand for AAA
   Only .jg-skip remains (in navigation.php). The duplicate .skip-link
   that was in header.php has been removed — it had no base CSS in this
   file, rendering it visible/unstyled above breadcrumbs on most pages. */
[data-theme="dark"] .jg-skip { background: #0f172a; color: #7cb8f7; }
[data-theme="dark"] .jg-skip:focus { outline-color: #7cb8f7; }

/* ── Dark Mode Button System ──
   Same 2 classes, automatic dark mode switching.
   Primary: bright blue fill, dark text (8.55:1 AAA)
   Secondary: blue outline, transparent bg
   Legacy .btn-white/.btn-transparent-* map to secondary in dark mode. */

[data-theme="dark"] .btn:focus-visible { outline-color: #7cb8f7; }

/* Primary (filled) — #7cb8f7 bg + #0f172a text = 8.55:1 AAA ✓ */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn.btn-primary,
[data-theme="dark"] .btn--primary,
[data-theme="dark"] .btn-dark,
[data-theme="dark"] .btn-outline-dark {
  background: #7cb8f7;
  color: #0f172a;
  border-color: #7cb8f7;
}
[data-theme="dark"] .btn-primary:hover,
[data-theme="dark"] .btn.btn-primary:hover,
[data-theme="dark"] .btn--primary:hover,
[data-theme="dark"] .btn-dark:hover {
  background: #a5d4fd;
  border-color: #a5d4fd;
  color: #0f172a;
}

/* Secondary (outlined) — single definition for all outlined buttons */
[data-theme="dark"] .btn-secondary,
[data-theme="dark"] .btn.btn-secondary,
[data-theme="dark"] .btn--secondary,
[data-theme="dark"] .home-demo__cta.btn-secondary,
[data-theme="dark"] .btn.btn-white,
[data-theme="dark"] .btn.btn-transparent-black,
[data-theme="dark"] .btn.btn-transparent-dark-gray {
  background: transparent;
  color: #7cb8f7;
  border: 2px solid #7cb8f7;
}
[data-theme="dark"] .btn-secondary:hover,
[data-theme="dark"] .btn.btn-secondary:hover,
[data-theme="dark"] .btn--secondary:hover,
[data-theme="dark"] .home-demo__cta.btn-secondary:hover,
[data-theme="dark"] .btn.btn-white:hover,
[data-theme="dark"] .btn.btn-transparent-black:hover,
[data-theme="dark"] .btn.btn-transparent-dark-gray:hover {
  background: rgba(124,184,247,.08);
  color: #a5d4fd;
  border-color: #a5d4fd;
}

/* Ghost (text-link style) */
[data-theme="dark"] .btn--ghost {
  background: transparent;
  color: #7cb8f7;
  border-color: transparent;
}
[data-theme="dark"] .btn--ghost:hover {
  background: rgba(124,184,247,.08);
  color: #a5d4fd;
}

/* Theme utility classes used in templates */
[data-theme="dark"] .text-joe-blue { color: #7cb8f7 !important; }
[data-theme="dark"] .text-extra-dark-gray { color: #e2e8f0 !important; }
[data-theme="dark"] .text-dark-gray { color: #e2e8f0 !important; }
[data-theme="dark"] .text-medium-gray { color: #a8b5c4 !important; }
[data-theme="dark"] .bg-light-gray { background-color: #1e293b !important; }
[data-theme="dark"] .bg-white,[data-theme="dark"] .background-white { background-color: #1e293b !important; }
[data-theme="dark"] .border-color-light-gray { border-color: #607888 !important; }

/* Nav dark mode */
[data-theme="dark"] .jg-nav { background: #1e293b; border-bottom-color: #334155; }
[data-theme="dark"] .jg-nav__link { color: #e2e8f0; }
[data-theme="dark"] .jg-nav__link:hover { color: #7cb8f7; }
[data-theme="dark"] .jg-nav__link--active,[data-theme="dark"] .jg-nav__link[aria-current="page"] { color: #7cb8f7; }
[data-theme="dark"] .jg-nav__link--active::after,[data-theme="dark"] .jg-nav__link[aria-current="page"]::after { background: #7cb8f7; }
[data-theme="dark"] .jg-nav__dropdown { background: #1e293b; border-color: #334155; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
[data-theme="dark"] .jg-nav__dd-link { color: #e2e8f0; }
[data-theme="dark"] .jg-nav__dd-link:hover { color: #7cb8f7; background: rgba(124,184,247,.1); }
[data-theme="dark"] .jg-nav__logo img { filter: brightness(0) invert(1); opacity: 0.92; }
[data-theme="dark"] .jg-nav__mob-lang { color: #e2e8f0; border-color: #334155; }
[data-theme="dark"] .jg-nav__burger { border-color: #334155; }
[data-theme="dark"] .jg-nav__burger-line { background: #e2e8f0; }
[data-theme="dark"] .jg-nav__lang-btn { color: #e2e8f0; border-color: #334155; }
[data-theme="dark"] .jg-nav__lang-dd { background: #1e293b; border-color: #334155; }
[data-theme="dark"] .jg-nav__lang-link { color: #e2e8f0; }
[data-theme="dark"] .jg-nav__lang-link:hover { color: #7cb8f7; background: rgba(124,184,247,.1); }

/* Footer dark mode */
/* Breadcrumbs dark mode */
[data-theme="dark"] .sc-breadcrumbs { background: #1e293b; }
[data-theme="dark"] .sc-breadcrumb-link { color: #a8b5c4; }
[data-theme="dark"] .sc-breadcrumb-link:hover { color: #f1f5f9; }
[data-theme="dark"] .sc-breadcrumb-link:focus-visible { outline-color: #7cb8f7; color: #f1f5f9; }
[data-theme="dark"] .sc-breadcrumb-page { color: #f1f5f9; }
[data-theme="dark"] .sc-breadcrumb-separator { color: #a8b5c4; }

[data-theme="dark"] .jg-footer { background-color: #1e293b; }
[data-theme="dark"] .jg-footer__copy { color: #e2e8f0; }
[data-theme="dark"] .jg-footer__nav a { color: #a8b5c4 !important; }
[data-theme="dark"] .jg-footer__nav a:hover { color: #7cb8f7 !important; }
[data-theme="dark"] .jg-footer__cookies { color: #a8b5c4; }
[data-theme="dark"] .jg-footer__cookies-btn { color: #a8b5c4 !important; }
[data-theme="dark"] .jg-footer__cookies-btn:hover { color: #7cb8f7 !important; }
[data-theme="dark"] .jg-footer__sep { background: #475569; }

/* Score badge dark mode */
[data-theme="dark"] .jg-score__pill { background: #1e293b; border-color: #334155; color: #e2e8f0; }
[data-theme="dark"] .jg-score__pill:hover { border-color: #7cb8f7; background: #293548; }
[data-theme="dark"] .jg-score__card { background: #1e293b; border-color: #334155; box-shadow: 0 8px 32px rgba(0,0,0,.4); }
[data-theme="dark"] .jg-score__level { color: #f1f5f9; }
[data-theme="dark"] .jg-score__stat { background: #0f172a; }
[data-theme="dark"] .jg-score__card-link { color: #7cb8f7; border-top-color: #334155; }
[data-theme="dark"] .jg-score__card-link:hover { background: rgba(124,184,247,.1); }

/* Blog dark mode */
[data-theme="dark"] .jg-blog { background: #0f172a; }
[data-theme="dark"] .jg-blog__title { color: #f1f5f9; }
[data-theme="dark"] .jg-blog__intro,
[data-theme="dark"] .jg-blog__featured-meta,
[data-theme="dark"] .jg-blog__featured-excerpt,
[data-theme="dark"] .jg-blog__article-meta,
[data-theme="dark"] .jg-blog__article-date,
[data-theme="dark"] .jg-blog__pagination-info { color: #a8b5c4; }
[data-theme="dark"] .jg-blog__featured-label,
[data-theme="dark"] .jg-blog__read-link { color: #7cb8f7; }
[data-theme="dark"] .jg-blog__featured-title a,
[data-theme="dark"] .jg-blog__article-title a { color: #e2e8f0; }
[data-theme="dark"] .jg-blog__featured-title a:hover,
[data-theme="dark"] .jg-blog__article-title a:hover { color: #7cb8f7; }
[data-theme="dark"] .jg-blog__filters,
[data-theme="dark"] .jg-blog__featured,
[data-theme="dark"] .jg-blog__article,
[data-theme="dark"] .jg-blog__pagination { border-color: #1e293b; }
[data-theme="dark"] .jg-blog__filter { color: #a8b5c4; border-color: #334155; background: transparent; }
[data-theme="dark"] .jg-blog__filter:hover { color: #7cb8f7; border-color: #7cb8f7; }
[data-theme="dark"] .jg-blog__filter--active { background: #7cb8f7; color: #0f172a !important; border-color: #7cb8f7; }
[data-theme="dark"] .jg-blog__filter--active:hover { background: #a5d4fd; color: #0f172a !important; border-color: #a5d4fd; }
[data-theme="dark"] .jg-blog__pagination-btn { color: #7cb8f7; border-color: #334155; background: #1e293b; }
[data-theme="dark"] .jg-blog__pagination-btn:hover { border-color: #7cb8f7; background: #293548; }
[data-theme="dark"] .jg-blog__empty { border-color: #334155; color: #a8b5c4; }
[data-theme="dark"] .jg-blog__tag--a11y { background: #1e3a50; color: #a5d4fd; }
[data-theme="dark"] .jg-blog__tag--ux { background: #451a03; color: #fbbf24; }
[data-theme="dark"] .jg-blog__tag--eaa { background: #064e3b; color: #8cf0b5; }
[data-theme="dark"] .jg-blog__tag--dev { background: #2e1065; color: #c4b5fd; }
[data-theme="dark"] .jg-blog__tag--docs,
[data-theme="dark"] .jg-blog__tag--default { background: #1e293b; color: #a8b5c4; }

/* Cards, containers, and common Bootstrap overrides */
[data-theme="dark"] .bg-light-gray,[data-theme="dark"] .bg-white,[data-theme="dark"] .background-white { background-color: #1e293b !important; }
[data-theme="dark"] .bg-extra-dark-gray { background-color: #0f172a !important; }
[data-theme="dark"] .container,[data-theme="dark"] .container-lg { color: #e2e8f0; }
[data-theme="dark"] .text-medium,.text-small { color: #a8b5c4; }
[data-theme="dark"] img { opacity: .92; }
[data-theme="dark"] .scroll-top-arrow { background: #334155; color: #e2e8f0; }
[data-theme="dark"] .scroll-top-arrow:hover { background: #475569; }

/* Theme text utilities — Bootstrap/theme classes with dark text */
[data-theme="dark"] .text-extra-dark-gray { color: #e2e8f0 !important; }
[data-theme="dark"] .text-dark-gray { color: #a8b5c4 !important; }
[data-theme="dark"] .text-medium-gray { color: #a8b5c4 !important; }
[data-theme="dark"] .text-extra-light-gray { color: #a8b5c4 !important; }
[data-theme="dark"] .text-light-gray { color: #a8b5c4 !important; }

/* Buttons in dark mode */
/* Legacy button aliases: dark mode already handled in section 34 button system */

/* Tags, chips, filters */
[data-theme="dark"] .tag-cloud a { color: #a8b5c4 !important; }
[data-theme="dark"] .tag-cloud a:hover { color: var(--ds-text-on-brand, #0f172a) !important; }
[data-theme="dark"] .tags { color: #a8b5c4; }
[data-theme="dark"] [data-chip="true"] { color: #e2e8f0 !important; background-color: #1e293b !important; border-color: #607888 !important; }
[data-theme="dark"] .grid-filter > li > a { color: #a8b5c4 !important; }
[data-theme="dark"] .grid-filter > li.active > a { color: #7cb8f7 !important; }

/* Tab navigation */
[data-theme="dark"] .tab-style2 .nav-tabs li a { color: #a8b5c4 !important; }
[data-theme="dark"] .tab-style2 .nav-tabs li.active a,[data-theme="dark"] .tab-style2 .nav-tabs li a:hover { color: #e2e8f0 !important; }

/* Nav states missing dark overrides */
[data-theme="dark"] .jg-nav__mob-lang { color: #e2e8f0; border-color: #607888; }
[data-theme="dark"] .jg-nav__mob-lang:hover { border-color: #7cb8f7; color: #7cb8f7; }
[data-theme="dark"] .jg-nav__dd-link--active { color: #7cb8f7 !important; }
[data-theme="dark"] .jg-nav__lang-btn { color: #e2e8f0; border-color: #607888; }
[data-theme="dark"] .jg-nav__lang-btn:hover { color: #7cb8f7; border-color: #7cb8f7; }
[data-theme="dark"] .jg-nav__lang-link--active { color: #7cb8f7 !important; }

/* Footer cookies button */
[data-theme="dark"] .jg-footer__cookies a,[data-theme="dark"] .jg-footer__cookies-btn { color: #a8b5c4 !important; }
[data-theme="dark"] .jg-footer__cookies a:hover,[data-theme="dark"] .jg-footer__cookies-btn:hover { color: #7cb8f7 !important; }

/* Score badge sub-elements */
[data-theme="dark"] .jg-score__date { color: #a8b5c4; }
[data-theme="dark"] .jg-score__stat-label { color: #a8b5c4; }

/* Accessibility demo page */
[data-theme="dark"] .a11y-demo-methodology .demo-header h1,
[data-theme="dark"] .a11y-demo-methodology .feature-header h3 { color: #f1f5f9 !important; }
[data-theme="dark"] .a11y-demo-methodology .demo-intro,
[data-theme="dark"] .a11y-demo-methodology .feature-description,
[data-theme="dark"] .a11y-demo-methodology .compliance-info li { color: #a8b5c4 !important; }
[data-theme="dark"] .a11y-demo-methodology .compliance-info strong { color: #7cb8f7 !important; }
[data-theme="dark"] .a11y-demo-methodology .demo-output { color: #e2e8f0 !important; background-color: #1e293b !important; }
[data-theme="dark"] .a11y-demo-methodology kbd { color: #e2e8f0 !important; background-color: #0f172a !important; border-color: #607888 !important; }

/* Connect action buttons (loaded via style-lean, not connect.css) */
[data-theme="dark"] .connect-action-btn { color: #e2e8f0 !important; background-color: #0f172a !important; border-color: #607888 !important; }
[data-theme="dark"] .connect-action-btn:hover { color: #7cb8f7 !important; border-color: #7cb8f7 !important; background-color: #1e293b !important; }

/* Connect form error states */
[data-theme="dark"] .connect-form__label--required::after { color: #fca5a5 !important; }
[data-theme="dark"] .connect-form__error-message { color: #fca5a5 !important; }

/* Cookie consent dark mode */
[data-theme="dark"] .jg-cc__panel { background: #1e293b; color: #e2e8f0; }
[data-theme="dark"] .jg-cc__panel-header { border-bottom-color: #334155; }
[data-theme="dark"] .jg-cc__panel-title { color: #f1f5f9; }
[data-theme="dark"] .jg-cc__panel-close { color: #a8b5c4; }
[data-theme="dark"] .jg-cc__panel-close:hover { background: rgba(255,255,255,.06); color: #e2e8f0; }
[data-theme="dark"] .jg-cc__panel-desc { color: #a8b5c4; }
[data-theme="dark"] .jg-cc__category { border-bottom-color: #334155; }
[data-theme="dark"] .jg-cc__category-name { color: #e2e8f0; }
[data-theme="dark"] .jg-cc__category-desc { color: #a8b5c4; }
[data-theme="dark"] .jg-cc__panel-footer { border-top-color: #334155; }
[data-theme="dark"] .jg-cc__toggle-slider { background: #475569; }

/* ═══════════════════════════════════════════
   34.5 Moments Plugin — Dark Mode
   ═══════════════════════════════════════════ */
/* Page & containers */
[data-theme="dark"] .moments-page { background: #0f172a; }
[data-theme="dark"] .moments-page-title { color: #f1f5f9; }
[data-theme="dark"] .moments-page-subtitle { color: #a8b5c4; }
[data-theme="dark"] .moments-container { color: #e2e8f0; }
[data-theme="dark"] .moments-results { color: #a8b5c4; }

/* Sidebar cards */
[data-theme="dark"] .moments-card { background: #1e293b; border-color: #607888; }
[data-theme="dark"] .moments-card__header { border-bottom-color: #334155; }
[data-theme="dark"] .moments-card__icon { color: #a8b5c4; }
[data-theme="dark"] .moments-card__title { color: #f1f5f9; }
[data-theme="dark"] .moments-card__body { color: #e2e8f0; }

/* Badges & filters */
[data-theme="dark"] .moments-badge { background: #1e293b; color: #e2e8f0; border-color: #607888; }
[data-theme="dark"] .moments-badge:hover { background: #334155; border-color: #7cb8f7; }
[data-theme="dark"] .moments-badge--active { background: #7cb8f7; color: #0f172a !important; border-color: #7cb8f7; }

/* Buttons */
[data-theme="dark"] .moments-btn--primary { background: #7cb8f7; color: #0f172a !important; border-color: #7cb8f7; }
[data-theme="dark"] .moments-btn--primary:hover { background: #a5d4fd; color: #0f172a !important; }
[data-theme="dark"] .moments-btn--secondary { background: #1e293b; color: #e2e8f0; border-color: #607888; }
[data-theme="dark"] .moments-btn--secondary:hover { background: #334155; border-color: #7cb8f7; }
[data-theme="dark"] .moments-btn:focus { outline-color: #7cb8f7; }

/* Filter form */
[data-theme="dark"] .moments-filter-form__label { color: #e2e8f0; }
[data-theme="dark"] .moments-filter-form__label i { color: #a8b5c4; }
[data-theme="dark"] .moments-filter-form__select { background: #0f172a; color: #e2e8f0; border-color: #607888; }
[data-theme="dark"] .moments-filter-form__select:focus { outline-color: #7cb8f7; border-color: #7cb8f7; }
[data-theme="dark"] .moments-active-filters { border-top-color: #334155; }
[data-theme="dark"] .moments-active-filters__label { color: #a8b5c4; }

/* Empty state */
[data-theme="dark"] .moments-empty { background: #1e293b; border-color: #607888; }
[data-theme="dark"] .moments-empty__icon { color: #a8b5c4; }
[data-theme="dark"] .moments-empty__title { color: #f1f5f9; }
[data-theme="dark"] .moments-empty__text { color: #a8b5c4; }

/* Moment feed cards (mf-card) */
[data-theme="dark"] .mf-card { background: #1e293b; border-color: #607888; }
[data-theme="dark"] .mf-card:hover { border-color: #7cb8f7; box-shadow: 0 4px 16px rgba(0,0,0,.3); }
[data-theme="dark"] .mf-card:focus-within { outline-color: #7cb8f7; }
[data-theme="dark"] .mf-card__body { color: #e2e8f0; }
[data-theme="dark"] .mf-card__header { color: #f1f5f9; border-bottom-color: #334155; }
[data-theme="dark"] .mf-card__title { color: #f1f5f9; }
[data-theme="dark"] .mf-card__title a { color: #f1f5f9 !important; }
[data-theme="dark"] .mf-card__title a:hover { color: #7cb8f7 !important; }
[data-theme="dark"] .mf-card__date { color: #a8b5c4; }
[data-theme="dark"] .mf-card__content { color: #e2e8f0; }
[data-theme="dark"] .mf-card__content a { color: #7cb8f7 !important; }
[data-theme="dark"] .mf-card__meta { color: #a8b5c4; border-top-color: #334155; }
[data-theme="dark"] .mf-card__footer { border-top-color: #334155; }
[data-theme="dark"] .mf-card__tag { background: #0f172a; color: #a8b5c4; border-color: #334155; }
[data-theme="dark"] .mf-card__tag:hover { border-color: #7cb8f7; color: #7cb8f7; }
[data-theme="dark"] .mf-card__heading { color: #f1f5f9; }

/* Bookmark/pin icons — #484851 was 1.62:1 FAIL, now #a8b5c4 = 7.02:1 AAA */
[data-theme="dark"] .mf-card i[class*="bookmark"],
[data-theme="dark"] .mf-card i[class*="push-pin"] { color: #a8b5c4 !important; }

/* Badges & category icons */
[data-theme="dark"] .mf-badge { background: #1e293b; color: #a8b5c4; border-color: #607888; }
[data-theme="dark"] .mf-badge:hover { border-color: #7cb8f7; color: #e2e8f0; }
[data-theme="dark"] .mf-badge i { color: #a8b5c4; }
[data-theme="dark"] .mf-like-btn:hover { color: #f472b6; }

/* Weather badges — themed colors (all AAA on #1e293b) */
[data-theme="dark"] .mf-badge[aria-label*="Sunny"] { background: rgba(250,170,22,.12); color: #fbbf24; border-color: rgba(250,170,22,.25); }
[data-theme="dark"] .mf-badge[aria-label*="Sunny"] i { color: #fbbf24; }
[data-theme="dark"] .mf-badge[aria-label*="Rain"] { background: rgba(96,165,250,.12); color: #93c5fd; border-color: rgba(96,165,250,.25); }
[data-theme="dark"] .mf-badge[aria-label*="Rain"] i { color: #93c5fd; }
[data-theme="dark"] .mf-badge[aria-label*="Cloudy"],
[data-theme="dark"] .mf-badge[aria-label*="cloudy"] { background: rgba(148,163,184,.12); color: #cbd5e1; border-color: rgba(148,163,184,.25); }
[data-theme="dark"] .mf-badge[aria-label*="Snow"] { background: rgba(186,230,253,.10); color: #bae6fd; border-color: rgba(186,230,253,.20); }
[data-theme="dark"] .mf-badge[aria-label*="Storm"] { background: rgba(129,140,248,.12); color: #a5b4fc; border-color: rgba(129,140,248,.25); }
[data-theme="dark"] .mf-badge[aria-label*="Wind"],
[data-theme="dark"] .mf-badge[aria-label*="wind"] { background: rgba(168,181,196,.10); color: #a8b5c4; border-color: rgba(168,181,196,.20); }
[data-theme="dark"] .mf-badge[aria-label*="Fog"] { background: rgba(168,181,196,.08); color: #a8b5c4; border-color: rgba(168,181,196,.18); }
[data-theme="dark"] .mf-badge[aria-label*="Clear"] { background: rgba(186,230,253,.08); color: #bae6fd; border-color: rgba(186,230,253,.18); }

/* Ambient strip — AAA verified:
   Label #a8b5c4 on #1e293b = 7.02:1 AAA ✓
   Bar   #607888 on #1e293b = 3.16:1 UI ✓
   Play  #7cb8f7 on #1e293b = 7.01:1 AAA ✓ */
[data-theme="dark"] .mf-ambient-strip { background: linear-gradient(180deg,#1e293b,#1a2536) !important; border-color: #334155 !important; }
[data-theme="dark"] .mf-ambient-strip:hover { background: linear-gradient(180deg,#263248,#1e2d40) !important; }
[data-theme="dark"] .mf-wf-bar { background: #607888; }
[data-theme="dark"] .mf-wf-label { color: #a8b5c4; }
[data-theme="dark"] .mf-ambient-strip.playing .mf-wf-bar { background: #7cb8f7; }
[data-theme="dark"] .mf-ambient-strip.playing .mf-wf-label { color: #7cb8f7; }
[data-theme="dark"] .moment-page { background: #0f172a; }
[data-theme="dark"] .moment-card { background: #1e293b; border-color: #607888; }
[data-theme="dark"] .moment-card[data-weather] { background: #1e293b; border-color: #607888; }
[data-theme="dark"] .moment-card[data-age] { border-color: #607888; filter: none; }
[data-theme="dark"] .moment-title { color: #f1f5f9; }
[data-theme="dark"] .moment-date { color: #a8b5c4; }
[data-theme="dark"] .moment-meta { color: #a8b5c4; }
[data-theme="dark"] .moment-content { color: #e2e8f0; }
[data-theme="dark"] .moment-content a { color: #7cb8f7 !important; }
[data-theme="dark"] .moment-content a:hover { color: #a5d4fd !important; }
[data-theme="dark"] .moment-card__body { color: #e2e8f0; }
[data-theme="dark"] .moment-back-btn { background: #1e293b; color: #a8b5c4 !important; border-color: #607888; }
[data-theme="dark"] .moment-back-btn:hover { background: #334155; color: #e2e8f0 !important; border-color: #7cb8f7; }
[data-theme="dark"] .moment-badge { background: #0f172a; color: #a8b5c4; border-color: #334155; }
[data-theme="dark"] .moment-audio,
[data-theme="dark"] .moment-video { background: #1e293b; border-color: #607888; }
[data-theme="dark"] .audio-play-btn { background: #7cb8f7; color: #0f172a; }
[data-theme="dark"] .audio-progress-container { background: #334155; }
[data-theme="dark"] .audio-progress-fill { background: #7cb8f7; }
[data-theme="dark"] .mpf-link-preview { background: #1e293b; border-color: #607888; }
[data-theme="dark"] .mpf-link-preview:hover { border-color: #7cb8f7; }
[data-theme="dark"] .mpf-link-preview-title { color: #f1f5f9; }
[data-theme="dark"] .mpf-link-preview-description { color: #a8b5c4; }
[data-theme="dark"] .mpf-link-preview-domain { color: #a8b5c4; }

/* Moments logo (time-based SVG) */
[data-theme="dark"] .moments-logo-tagline { color: #a8b5c4; }
[data-theme="dark"] .moments-logo-header { color: #e2e8f0; }

/* ═══════════════════════════════════════════
   34.6 Schedule Widget — Dark Mode Isolation
   ═══════════════════════════════════════════
   The Project Flow schedule widget (#pf-schedule-widget) generates its
   own <style> block with hardcoded light-mode colors. Global dark mode
   rules bleed into it because type-selector overrides like
     [data-theme="dark"] h2 { color: #f1f5f9 }
   beat the widget's class selectors by specificity.

   Result without this fix: headings become near-white on a white card
   background (1.05:1 contrast — invisible).

   This block resets all text/heading/link colors inside the widget back
   to their intended light-mode values, keeping it as a light card on
   the dark page. Uses !important to guarantee these win regardless of
   cascade order (the widget injects its own <style> via JS at runtime).
*/
[data-theme="dark"] #pf-schedule-widget { color: #1a1a2e !important; }
[data-theme="dark"] #pf-schedule-widget h1,
[data-theme="dark"] #pf-schedule-widget h2,
[data-theme="dark"] #pf-schedule-widget h3,
[data-theme="dark"] #pf-schedule-widget h4,
[data-theme="dark"] #pf-schedule-widget p,
[data-theme="dark"] #pf-schedule-widget span,
[data-theme="dark"] #pf-schedule-widget label,
[data-theme="dark"] #pf-schedule-widget td,
[data-theme="dark"] #pf-schedule-widget th { color: #1a1a2e !important; }
[data-theme="dark"] #pf-schedule-widget a { color: #475569 !important; }
[data-theme="dark"] #pf-schedule-widget a:hover { color: #1a1a2e !important; }
[data-theme="dark"] #pf-schedule-widget .sw-card { background: #fff !important; border-color: #e2e8f0 !important; }
[data-theme="dark"] #pf-schedule-widget .sw-header { border-bottom-color: #e2e8f0 !important; }
[data-theme="dark"] #pf-schedule-widget .sw-subtitle { color: #334155 !important; }
[data-theme="dark"] #pf-schedule-widget .sw-tz-note,
[data-theme="dark"] #pf-schedule-widget .sw-type-desc,
[data-theme="dark"] #pf-schedule-widget .sw-no-slots,
[data-theme="dark"] #pf-schedule-widget .sw-payment-note,
[data-theme="dark"] #pf-schedule-widget .sw-cal-dow,
[data-theme="dark"] #pf-schedule-widget .sw-step { color: #475569 !important; }
[data-theme="dark"] #pf-schedule-widget .sw-form-label,
[data-theme="dark"] #pf-schedule-widget .sw-time-back,
[data-theme="dark"] #pf-schedule-widget .sw-type-meta,
[data-theme="dark"] #pf-schedule-widget .sw-confirm-sub,
[data-theme="dark"] #pf-schedule-widget .sw-form-summary { color: #334155 !important; }
[data-theme="dark"] #pf-schedule-widget .sw-type-btn { background: #fff !important; border-color: #e2e8f0 !important; }
[data-theme="dark"] #pf-schedule-widget .sw-time-slot { background: #fff !important; border-color: #e2e8f0 !important; color: #1a1a2e !important; }
[data-theme="dark"] #pf-schedule-widget .sw-cal-day { color: #1a1a2e !important; }
[data-theme="dark"] #pf-schedule-widget .sw-cal-day:disabled { color: #94a3b8 !important; }
[data-theme="dark"] #pf-schedule-widget .sw-cal-btn { background: #fff !important; border-color: #e2e8f0 !important; color: #334155 !important; }
[data-theme="dark"] #pf-schedule-widget .sw-form-input { background: #fff !important; color: #1a1a2e !important; border-color: #e2e8f0 !important; }
[data-theme="dark"] #pf-schedule-widget .sw-form-input[readonly] { background: #f1f5f9 !important; color: #334155 !important; }
[data-theme="dark"] #pf-schedule-widget .sw-form-summary,
[data-theme="dark"] #pf-schedule-widget .sw-confirm-details { background: #f8fafc !important; }
[data-theme="dark"] #pf-schedule-widget .sw-step-num { background: #e2e8f0 !important; color: #334155 !important; }
[data-theme="dark"] #pf-schedule-widget .sw-spinner { border-color: #e2e8f0 !important; }
[data-theme="dark"] #pf-schedule-widget .sw-footer { border-top-color: #e2e8f0 !important; }
[data-theme="dark"] #pf-schedule-widget .sw-footer a { color: #475569 !important; }
[data-theme="dark"] #pf-schedule-widget .sw-photo { border-color: #e2e8f0 !important; }
[data-theme="dark"] #pf-schedule-widget img { opacity: 1 !important; }
[data-theme="dark"] #pf-schedule-widget .sw-type-free { color: #0f766e !important; }

/* ═══════════════════════════════════════════
   35. Print
   ═══════════════════════════════════════════ */
@media print{
  header,footer,.jg-nav,.scroll-top-arrow,.back-to-top,.jg-theme,.jg-score{display:none}
  body{font-size:12pt;line-height:1.4;color:#000}
  a[href]::after{content:" (" attr(href) ")";font-size:0.8em}
}

/* ═══════════════════════════════════════════
   36. Default page (intro + markdown prose)
   ═══════════════════════════════════════════
   Used by templates/default.php for markdown pages (work-with-me/scope +
   methodology, legal pages, …). Colours come from the --ds-* tokens, so the
   prose flips to dark automatically — no per-page dark block. (A hardcoded hex
   set on the element would beat a [data-theme="dark"] rule and leave the body
   unreadable, which is why these live here on classes rather than inline.) */
.default-page__intro { font-size: 1.0625rem; line-height: 1.65; color: var(--ds-text-secondary, #475569); margin: 1rem 0 1.5rem; max-width: 720px; }
.default-page__prose { font-size: 1rem; line-height: 1.7; color: var(--ds-text-primary, #232323); max-width: 760px; }
.default-page__prose h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; color: var(--ds-text-primary, #232323); margin: 2.25rem 0 .75rem; letter-spacing: -.01em; }
.default-page__prose h3 { font-size: 1.125rem; font-weight: 600; line-height: 1.4; color: var(--ds-text-primary, #232323); margin: 1.5rem 0 .5rem; }
.default-page__prose p { margin: 0 0 1rem; }
.default-page__prose ul, .default-page__prose ol { margin: 0 0 1rem 1.25rem; padding: 0; }
.default-page__prose li { margin: .25rem 0; }
.default-page__prose a { color: var(--ds-brand, #294557); text-decoration: underline; text-underline-offset: 3px; }
.default-page__prose a:hover { color: var(--ds-brand-hover, #1e3444); }
.default-page__prose a:focus-visible { outline: 3px solid var(--ds-brand, #294557); outline-offset: 2px; border-radius: 2px; }
.default-page__prose strong { font-weight: 700; color: var(--ds-text-primary, #232323); }
.default-page__prose table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .9375rem; }
.default-page__prose th { text-align: left; padding: .5rem .75rem; border-bottom: 2px solid var(--ds-border, #e5e7eb); font-weight: 700; color: var(--ds-text-primary, #232323); background: var(--ds-surface-raised, #f8fafc); }
.default-page__prose td { padding: .5rem .75rem; border-bottom: 1px solid var(--ds-border, #e5e7eb); vertical-align: top; }
.default-page__prose code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .875rem; background: var(--ds-surface-sunken, #f1f5f9); padding: .125rem .25rem; border-radius: 3px; color: var(--ds-text-primary, #232323); }

/* ═══════════════════════════════════════════
   38. Accessibility scanner (#a11y-radar / .ar-*) — moved from public-scanner.php
   ═══════════════════════════════════════════ */
/* ═══ Tokens — primary values come from the site design system (--ds-*) in
   style-lean.css, with an explicit per-theme fallback after each var() so the
   scanner stays contrast-safe even if the --ds-* tokens aren't present (e.g.
   an older style-lean.css on the live server). Light fallbacks below; the
   dark fallbacks live in the [data-theme="dark"] block that follows. All
   values are WCAG AA-verified in both themes. */
#a11y-radar {
  --ar-brand: var(--ds-brand, #294557); --ar-brand-h: var(--ds-brand-hover, #1e3444);
  --ar-bg: var(--ds-surface-sunken, #f1f5f9); --ar-card: var(--ds-surface, #ffffff); --ar-border: var(--ds-border, #e5e7eb);
  --ar-text: var(--ds-text-primary, #232323); --ar-muted: var(--ds-text-secondary, #475569);
  --ar-on-brand: var(--ds-text-on-brand, #ffffff);
  --ar-red: var(--ds-error-text, #991b1b); --ar-amber: var(--ds-warning-text, #92400e); --ar-green: var(--ds-success-text, #065f46);
  --ar-success: var(--ds-success, #059669); --ar-warning: var(--ds-warning, #d97706);
  --ar-badge-green-bg: var(--ds-success-bg, #ecfdf5);
  --ar-badge-green-border: color-mix(in srgb, var(--ar-success) 45%, transparent);
  --ar-trust-bg: var(--ds-surface-sunken, #f1f5f9);
  --ar-fail-bg: var(--ds-error-bg, #fef2f2); --ar-warn-bg: var(--ds-warning-bg, #fffbeb);
  --ar-sent-bg: var(--ds-success-bg, #ecfdf5); --ar-sent-text: var(--ds-success-text, #065f46);
  --ar-error-bg: var(--ds-error-bg, #fef2f2);
  --ar-shadow: var(--ds-shadow, 0 1px 3px rgba(0,0,0,0.1)); --ar-hover-shadow: var(--ds-shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
  --ar-focus-ring: color-mix(in srgb, var(--ar-brand) 30%, transparent);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  max-width: 760px; margin: 0 auto;
}
/* Dark theme — prefer --ds-*, fall back to AA-verified dark values so the
   scanner never inherits light colors on a dark page (the most common cause
   of a dark-mode contrast failure). */
[data-theme="dark"] #a11y-radar {
  --ar-brand: var(--ds-brand, #7cb8f7); --ar-brand-h: var(--ds-brand-hover, #a5d4fd);
  --ar-bg: var(--ds-surface-sunken, #0c1322); --ar-card: var(--ds-surface-raised, #1e293b); --ar-border: var(--ds-border, #607888);
  --ar-text: var(--ds-text-primary, #e2e8f0); --ar-muted: var(--ds-text-secondary, #a8b5c4);
  --ar-on-brand: var(--ds-text-on-brand, #0f172a);
  --ar-red: var(--ds-error-text, #fca5a5); --ar-amber: var(--ds-warning-text, #fbbf24); --ar-green: var(--ds-success-text, #8cf0b5);
  --ar-success: var(--ds-success, #8cf0b5); --ar-warning: var(--ds-warning, #fbbf24);
  --ar-badge-green-bg: var(--ds-success-bg, #064e3b);
  --ar-trust-bg: var(--ds-surface-sunken, #0c1322);
  --ar-fail-bg: var(--ds-error-bg, #450a0a); --ar-warn-bg: var(--ds-warning-bg, #451a03);
  --ar-sent-bg: var(--ds-success-bg, #064e3b); --ar-sent-text: var(--ds-text-primary, #e2e8f0);
  --ar-error-bg: var(--ds-error-bg, #450a0a);
}
/* Canonical visually-hidden utility. `white-space:nowrap` was previously only
   in shadcnblocks.css, which loads later and so silently won — folded in here
   so this single rule is the whole definition. */
.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; }

/* ═══ Hero ═══ */
.ar-hero { text-align: left; margin-bottom: 2.25rem; }
/* Badge pill + dot styles are shared (see "Shared status badge" below); the
   scanner only adds hero spacing. */
.ar-badge { margin: 0 0 1.25rem; }
/* Plain brand eyebrow (no rule line) — matches the PDF section intros */
/* Brand eyebrow typography is shared (see .pdflp__eyebrow group in §40); the
   scanner only sets its hero spacing here. */
.ar-hero__eyebrow, .ar-eyebrow--rule { margin: 0 0 1.25rem; }
.ar-hero__title { font-size: clamp(1.875rem, 4.5vw, 2.375rem); font-weight: 700; color: var(--ar-text); line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 1.125rem; }
.ar-hero__lead { font-size: 1.1875rem; color: var(--ar-muted); line-height: 1.65; max-width: 620px; margin: 0; }
.ar-hero__lead strong { color: var(--ar-text); font-weight: 600; }

/* ═══ Form card ═══ */
#a11y-radar .ar-form-card { background: var(--ar-card); border: 1px solid var(--ar-border); border-radius: 0.75rem; padding: 1.5rem; margin-bottom: 1.75rem; box-shadow: var(--ar-shadow); }
#a11y-radar .ar-form-card__note { font-size: 0.75rem; color: var(--ar-muted); line-height: 1.55; margin: 1rem 0 0; }
/* Scan form is a single vertical stack (URL → Pages → full-width CTA),
   matching the mockup. The email fallback row stays inline. */
#a11y-radar .ar-form__row { display: flex; flex-direction: row; gap: 1rem; align-items: flex-start; }
#a11y-radar .ar-form__field--url { flex: 1 1 auto; }
#a11y-radar .ar-form__row--email { flex-direction: row; align-items: stretch; gap: 0.75rem; }
#a11y-radar .ar-form__field { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
#a11y-radar .ar-form__field--pages { flex: 0 0 150px; }
#a11y-radar .ar-form__label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--ar-text); margin: 0 0 0.375rem; line-height: 1.3; }
#a11y-radar .ar-form__hint { display: block; font-size: 0.75rem; color: var(--ar-muted); margin: 0.375rem 0 0; line-height: 1.4; }
#a11y-radar .ar-form__input,
#a11y-radar .ar-form__select {
  display: block; width: 100%; height: 44px; min-height: 44px; padding: 0 0.75rem;
  font-size: 16px; line-height: 1.25; font-family: inherit; font-weight: 400;
  color: var(--ar-text); background: var(--ar-bg); border: 1px solid var(--ar-border);
  border-radius: 0.5rem; box-sizing: border-box; margin: 0; -webkit-appearance: none; appearance: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#a11y-radar .ar-form__select {
  padding-right: 2rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23475569' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 0.75rem center;
}
#a11y-radar .ar-form__input:focus,
#a11y-radar .ar-form__select:focus { outline: none; border-color: var(--ar-brand); box-shadow: 0 0 0 3px var(--ar-focus-ring); }
#a11y-radar .ar-form__input:focus-visible,
#a11y-radar .ar-form__select:focus-visible { outline: 2px solid var(--ar-brand); outline-offset: 2px; }
#a11y-radar .ar-form__input::placeholder { color: var(--ar-muted); opacity: 0.7; }
#a11y-radar .ar-form__input--invalid { border-color: var(--ar-red) !important; }
#a11y-radar .ar-form__btn {
  flex-shrink: 0; height: 44px; min-height: 44px; padding: 0 1.5rem; font-size: 1rem; font-weight: 600;
  font-family: inherit; color: var(--ar-on-brand); background: var(--ar-brand); border: 2px solid var(--ar-brand);
  border-radius: 0.5rem; cursor: pointer; white-space: nowrap; line-height: 1; -webkit-appearance: none; appearance: none;
  transition: background 0.15s, border-color 0.15s, transform 0.05s;
}
#a11y-radar .ar-form__btn:hover { background: var(--ar-brand-h); border-color: var(--ar-brand-h); }
#a11y-radar .ar-form__btn:active { transform: scale(0.98); }
#a11y-radar .ar-form__btn:disabled { opacity: 0.5; cursor: not-allowed; }
#a11y-radar .ar-form__btn:focus-visible { outline: 3px solid var(--ar-brand); outline-offset: 3px; }
#a11y-radar .ar-form__btn--block { width: 100%; height: 48px; min-height: 48px; margin-top: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 1.0625rem; }
.ar-error { background: var(--ar-error-bg); color: var(--ar-red); font-size: 0.8125rem; padding: 0.5rem 0.75rem; border-radius: 0.5rem; margin-top: 0.75rem; }
.ar-news-opt { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; color: var(--ar-muted); margin-top: 0.75rem; line-height: 1.4; font-weight: 400; }
/* The site's global input rules size bare inputs full-width/44px — reset the
   checkbox so it stays a small box and the label sits beside it. */
#a11y-radar .ar-news-opt input[type="checkbox"] {
  width: 1rem !important; height: 1rem !important; min-height: 0 !important;
  flex: 0 0 auto; margin: 0.1rem 0 0 !important; padding: 0 !important;
  -webkit-appearance: auto; appearance: auto; accent-color: var(--ar-brand); box-shadow: none !important;
}

/* ═══ Coverage grid (checks / can't) ═══ */
.ar-coverage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.75rem; }
.ar-coverage { background: var(--ar-card); border: 1px solid var(--ar-border); border-top: 3px solid var(--ar-border); border-radius: 0.75rem; padding: 1.25rem 1.25rem; box-shadow: var(--ar-shadow); }
.ar-coverage--can { border-top-color: var(--ds-success); }
.ar-coverage--cant { border-top-color: var(--ds-warning); }
.ar-coverage__title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ar-text); margin: 0 0 0.875rem; }
.ar-coverage__mark { display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ar-coverage__mark--can { color: var(--ds-success); }
.ar-coverage__mark--cant { color: var(--ds-warning); }
.ar-coverage__list { list-style: none; margin: 0; padding: 0; }
.ar-coverage__list li { font-size: 0.8125rem; color: var(--ar-muted); line-height: 1.5; padding: 0.3rem 0 0.3rem 1rem; position: relative; }
.ar-coverage__list li::before { content: ""; position: absolute; left: 0; top: 0.8rem; width: 7px; height: 7px; border-radius: 2px; background: var(--ar-muted); }
.ar-coverage--can .ar-coverage__list li::before { background: var(--ds-success); }
.ar-coverage--cant .ar-coverage__list li::before { background: var(--ds-warning); }
.ar-coverage__foot { font-size: 0.8125rem; color: var(--ar-text); line-height: 1.55; margin: 0.75rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--ar-border); }
.ar-inline-link { color: var(--ar-brand); font-weight: 600; text-decoration: underline; white-space: nowrap; }
.ar-inline-link:focus-visible { outline: 3px solid var(--ar-brand); outline-offset: 2px; border-radius: 2px; }

/* ═══ Trust ═══ */
.ar-trust { text-align: center; padding-top: 0.5rem; }
.ar-trust__text { font-size: 0.8125rem; color: var(--ar-muted); margin: 0 0 0.75rem; }
.ar-trust__badges { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1rem; }
.ar-trust__badge { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; color: var(--ar-brand); background: var(--ar-trust-bg); padding: 0.3rem 0.7rem; border-radius: 4px; }
.ar-trust__sample { font-size: 0.8125rem; color: var(--ar-muted); }

/* ═══ Cards ═══ */
.ar-card { background: var(--ar-card); border: 1px solid var(--ar-border); border-radius: 0.75rem; padding: 1.75rem; box-shadow: var(--ar-shadow); margin-bottom: 1rem; }
/* Big issue count + summary, two columns */
.ar-count { display: flex; align-items: center; gap: 1.5rem; margin: 0 0 1rem; padding: 0 0.25rem; }
.ar-count__num { font-size: clamp(3.25rem, 9vw, 4.75rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; color: var(--ar-brand); flex: none; }
.ar-count__text { font-size: 1.0625rem; color: var(--ar-text); line-height: 1.5; margin: 0; }
.ar-count__lead { font-weight: 700; }
#a11y-radar #ar-res-summary:focus { outline: none; }
#a11y-radar #ar-res-summary:focus-visible { outline: 3px solid var(--ar-brand); outline-offset: 4px; border-radius: 4px; }
.ar-card__title { font-size: 1.375rem; font-weight: 700; color: var(--ar-text); margin: 0 0 0.5rem; line-height: 1.25; }
.ar-card__sub { font-size: 0.9375rem; color: var(--ar-muted); margin: 0 0 0.25rem; line-height: 1.5; }
.ar-card__note { font-size: 0.75rem; color: var(--ar-muted); margin: 0.75rem 0 0; }
.ar-eyebrow { font-size: var(--ds-eyebrow-size); font-weight: var(--ds-eyebrow-weight); color: var(--ar-muted); text-transform: uppercase; letter-spacing: var(--ds-eyebrow-spacing); margin: 0 0 0.25rem; }
.ar-section-title { font-size: 1.0625rem; font-weight: 700; color: var(--ar-text); margin: 0 0 0.75rem; }
/* Collapsible sections — keep the depth available without front-loading it. */
.ar-disclosure > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; }
.ar-disclosure > summary::-webkit-details-marker { display: none; }
.ar-disclosure__title { font-size: 1.0625rem; font-weight: 700; color: var(--ar-text); }
.ar-disclosure .ar-caret { color: var(--ar-muted); font-size: 1.5rem; line-height: 1; transition: transform 0.2s; flex: none; }
.ar-disclosure[open] .ar-caret { transform: rotate(90deg); }
.ar-disclosure[open] > summary { margin-bottom: 1rem; }
.ar-disclosure > summary:focus-visible { outline: 3px solid var(--ar-brand); outline-offset: 6px; border-radius: 4px; }
.ar-disclosure__intro { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .ar-disclosure .ar-caret { transition: none; } }
.ar-prose { font-size: 0.875rem; color: var(--ar-text); line-height: 1.6; margin: 0 0 0.75rem; }
.ar-prose--muted { color: var(--ar-muted); font-size: 0.8125rem; }
.ar-prose:last-child { margin-bottom: 0; }
.ar-band { font-size: 1rem; font-weight: 700; margin: 0 0 0.5rem; }
.ar-glosslink { color: var(--ar-text); text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 2px; }
.ar-glosslink:focus-visible { outline: 3px solid var(--ar-brand); outline-offset: 2px; border-radius: 2px; }
.ar-sc { font-family: var(--ds-font-mono); font-size: 0.75rem; color: var(--ar-muted); }
code { font-family: var(--ds-font-mono); font-size: 0.8125em; background: var(--ar-bg); padding: 0.1em 0.35em; border-radius: 4px; }

/* ═══ Progress ═══ */
.ar-scanning__inner { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; text-align: center; }
.ar-spinner { animation: ar-in 0.3s ease; }
.ar-progress { width: 100%; height: 5px; background: var(--ar-border); border-radius: 3px; overflow: hidden; margin-top: 0.25rem; }
.ar-progress__bar { height: 100%; width: 0%; background: var(--ar-brand); border-radius: 3px; transition: width 0.4s ease; }
.ar-progress__bar--indet { background: linear-gradient(90deg, var(--ar-border) 0%, var(--ar-brand) 50%, var(--ar-border) 100%); background-size: 200% 100%; animation: ar-indet 1.4s linear infinite; }
@keyframes ar-indet { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ═══ Readiness meter — SHARED by the scanner (.ar-meter) and scorecard
   (.sc-meter). One definition; --ds-* tokens work in both scopes. Tone classes
   (.ar-tone-* / .sc-tone-*) place the pointer + colour the verdict; the scanner
   also tints its big issue count. ═══ */
.ar-meter__head, .sc-meter__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.875rem; }
.ar-meter__verdict, .sc-meter__verdict { font-size: 1.0625rem; font-weight: 700; color: var(--ds-brand, #294557); text-align: right; }
.ar-meter__track, .sc-meter__track { position: relative; display: flex; gap: 6px; margin: 0 0 0.5rem; padding-top: 14px; }
.ar-meter__seg, .sc-meter__seg { flex: 1; height: 8px; border-radius: 4px; }
.ar-meter__seg--bad, .sc-meter__seg--bad { background: var(--ds-error-text, #991b1b); }
.ar-meter__seg--mid, .sc-meter__seg--mid { background: var(--ds-warning-text, #92400e); }
.ar-meter__seg--good, .sc-meter__seg--good { background: var(--ds-success-text, #065f46); }
.ar-meter__pointer, .sc-meter__pointer { position: absolute; top: 0; left: 16.66%; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--ds-text-primary, #232323); transition: left 0.5s ease; }
.ar-meter__labels, .sc-meter__labels { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.6875rem; color: var(--ds-text-secondary, #475569); }
.ar-meter__labels span, .sc-meter__labels span { flex: 1; }
.ar-meter__labels span:nth-child(2), .sc-meter__labels span:nth-child(2) { text-align: center; }
.ar-meter__labels span:last-child, .sc-meter__labels span:last-child { text-align: right; }
.ar-meter__labels { margin-bottom: 1rem; }  /* scanner-only spacing */
.ar-tone-good .ar-meter__pointer, .sc-tone-good .sc-meter__pointer { left: 83.33%; }
.ar-tone-mid  .ar-meter__pointer, .sc-tone-mid  .sc-meter__pointer { left: 50%; }
.ar-tone-bad  .ar-meter__pointer, .sc-tone-bad  .sc-meter__pointer { left: 16.66%; }
.ar-tone-good .ar-meter__verdict, .sc-tone-good .sc-meter__verdict, .ar-tone-good .ar-count__num { color: var(--ds-success-text, #065f46); }
.ar-tone-mid  .ar-meter__verdict, .sc-tone-mid  .sc-meter__verdict, .ar-tone-mid  .ar-count__num { color: var(--ds-warning-text, #92400e); }
.ar-tone-bad  .ar-meter__verdict, .sc-tone-bad  .sc-meter__verdict, .ar-tone-bad  .ar-count__num { color: var(--ds-error-text, #991b1b); }

/* ═══ Iceberg ═══ */
.ar-iceberg__bar { display: flex; height: 2.5rem; border-radius: 0.5rem; overflow: hidden; margin: 0 0 1rem; border: 1px solid var(--ar-border); }
.ar-iceberg__seen, .ar-iceberg__unseen { display: flex; align-items: center; justify-content: center; font-size: 0.6875rem; font-weight: 600; text-align: center; padding: 0 0.25rem; }
.ar-iceberg__seen { flex: 0 0 33%; background: var(--ar-brand); color: var(--ar-on-brand); }
.ar-iceberg__unseen { flex: 1 1 67%; background: var(--ar-bg); color: var(--ar-muted); }

/* ═══ Findings (mirrors the report email: dot · severity · label, then
      affected pages, element examples, a one-line fix, glossary link) ═══ */
.ar-findings__list { list-style: none; margin: 0; padding: 0; }
.ar-finding { padding: 1.1rem 0; border-top: 1px solid var(--ar-border); }
.ar-finding:first-child { border-top: none; padding-top: 0; }
.ar-finding__head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.ar-finding__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; align-self: center; }
.ar-finding__dot--fail { background: var(--ar-red); }
.ar-finding__dot--warn { background: var(--ar-amber); }
.ar-finding__sev { flex: none; font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.ar-finding__sev--fail { color: var(--ar-red); }
.ar-finding__sev--warn { color: var(--ar-amber); }
.ar-finding__label { font-size: 0.9375rem; font-weight: 600; color: var(--ar-text); line-height: 1.4; }
/* Severity drives the visual weight, not just the dot: a real ISSUE (an AA
   failure) reads heavier at a glance than a nice-to-have WARNING, so a vetter
   — or a worried buyer — can tell them apart instantly. */
.ar-finding--fail { padding-left: 0.9rem; border-left: 3px solid var(--ar-red); }
.ar-finding--fail:first-child { padding-top: 0.35rem; }
.ar-finding--fail .ar-finding__dot { width: 10px; height: 10px; }
.ar-finding--fail .ar-finding__sev { font-size: 0.6875rem; }
.ar-finding--fail .ar-finding__label { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.ar-finding--warn { padding-top: 0.9rem; padding-bottom: 0.9rem; }
.ar-finding--warn .ar-finding__label { font-size: 0.875rem; font-weight: 600; }
.ar-finding__meta { margin: 0.45rem 0 0 1.1rem; font-size: 0.8125rem; color: var(--ar-muted); line-height: 1.55; }
.ar-finding__examples { margin: 0.55rem 0 0 1.1rem; padding: 0.5rem 0 0.5rem 0.75rem; border-left: 2px solid var(--ar-border); }
.ar-finding__ex { font-size: 0.8125rem; color: var(--ar-muted); line-height: 1.55; margin-top: 0.25rem; }
.ar-finding__ex:first-child { margin-top: 0; }
.ar-finding__ex--more { font-style: italic; margin-top: 0.4rem; }
.ar-finding__muted { color: var(--ar-muted); }
.ar-finding__fix { margin: 0.6rem 0 0 1.1rem; font-size: 0.8125rem; color: var(--ar-text); line-height: 1.55; }
.ar-finding__fixlabel { font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.625rem; color: var(--ar-brand); margin-right: 0.4rem; }
.ar-finding__learn { display: inline-block; margin: 0.55rem 0 0 1.1rem; font-size: 0.8125rem; font-weight: 600; color: var(--ar-brand); text-decoration: none; }
.ar-finding__learn:hover, .ar-finding__learn:focus-visible { text-decoration: underline; }
.ar-findings__more { font-size: 0.8125rem; color: var(--ar-muted); margin: 1rem 0 0; }

/* ═══ Triage ═══ */
.ar-triage { display: flex; gap: 1.25rem; align-items: flex-start; }
.ar-triage__photo { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex: none; border: 1px solid var(--ar-border); }
.ar-triage__photo--monogram { display: inline-flex; align-items: center; justify-content: center; background: var(--ar-brand); color: var(--ar-on-brand); font-weight: 700; font-size: 1.75rem; letter-spacing: 0.01em; border-color: var(--ar-brand); }
.ar-triage__body { flex: 1; min-width: 0; }
.ar-triage__sig { font-size: 0.8125rem; color: var(--ar-muted); margin: 0.75rem 0 0; }
@media (max-width: 599px) { .ar-triage__photo { width: 56px; height: 56px; } }

/* ═══ Scarcity ═══ */
.ar-slots { display: flex; align-items: center; gap: 0.625rem; justify-content: center; font-size: 0.875rem; color: var(--ar-muted); background: transparent; border: 1px solid var(--ar-border); border-radius: 999px; padding: 0.625rem 1.25rem; margin: 0 0 1rem; line-height: 1.5; }
.ar-slots strong { color: var(--ar-text); }
.ar-slots__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ar-amber); flex: none; animation: ar-pulse 2s ease-in-out infinite; }
@keyframes ar-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ═══ Convert (two columns: email | book) ═══ */
#a11y-radar #ar-convert { border-top: 3px solid var(--ar-brand); box-shadow: var(--ar-hover-shadow); }
.ar-convert__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.ar-convert__col { display: flex; flex-direction: column; border: 1px solid var(--ar-border); border-radius: 0.625rem; padding: 1.25rem; background: var(--ar-bg); }
.ar-convert__col--book { background: var(--ds-brand-light); }
.ar-book-points { list-style: none; margin: 0.25rem 0 1.25rem; padding: 0; }
.ar-book-points li { position: relative; padding: 0.3rem 0 0.3rem 1.5rem; font-size: 0.8125rem; color: var(--ar-text); line-height: 1.5; }
.ar-book-points li::before { content: "✓"; position: absolute; left: 0; top: 0.3rem; color: var(--ar-green); font-weight: 700; }
.ar-convert__title { font-size: 1.0625rem; font-weight: 700; color: var(--ar-text); margin: 0 0 0.5rem; }
.ar-form--stack .ar-form__field { margin-bottom: 0.75rem; }
.ar-form--stack .ar-form__btn--block { margin-top: 0; }
.ar-convert__rule { border: 0; border-top: 1px solid var(--ar-border); margin: 1rem 0 0.75rem; }
#a11y-radar .ar-convert__book { margin-top: auto; }
.ar-legal { font-size: 0.6875rem; color: var(--ar-muted); margin-top: 0.75rem; line-height: 1.5; }
@media (max-width: 599px) { .ar-convert__grid { grid-template-columns: 1fr; } }

/* ═══ Buttons ═══ */
.ar-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.7rem 1.4rem; font-size: 0.9375rem; font-weight: 600; font-family: inherit; color: var(--ar-on-brand); background: var(--ar-brand); border: 2px solid var(--ar-brand); border-radius: 0.5rem; cursor: pointer; text-decoration: none; transition: background 0.15s, border-color 0.15s; }
.ar-btn-primary--block { width: 100%; height: 48px; font-size: 1rem; margin-top: 0.25rem; }
/* #a11y-radar scope + explicit on-brand text beats the global a:hover
   (light #333 / dark #93c5fd) that would otherwise wash these <a> button
   labels out to dark-on-dark on the hover. */
#a11y-radar .ar-btn-primary:hover { background: var(--ar-brand-h); border-color: var(--ar-brand-h); color: var(--ar-on-brand); }
.ar-btn-primary:focus-visible { outline: 3px solid var(--ar-brand); outline-offset: 3px; }
.ar-link-btn { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: var(--ar-muted); text-decoration: underline; cursor: pointer; }
.ar-link-btn:focus-visible { outline: 3px solid var(--ar-brand); outline-offset: 2px; }
.ar-again { display: block; margin: 0.5rem auto 0; font-size: 0.8125rem; }

/* ═══ Confirmation ═══ */
.ar-confirm { text-align: center; }
.ar-confirm__check { color: var(--ar-green); margin-bottom: 0.5rem; }
.ar-confirm__sent { font-size: 0.875rem; color: var(--ar-muted); margin: 0 0 0.875rem; }
.ar-confirm__sent strong { color: var(--ar-text); }
.ar-confirm__nopitch { font-size: 0.75rem; color: var(--ar-muted); margin: 0.75rem 0 0; }

/* ═══ Animation ═══ */
@keyframes ar-in { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
#ar-results { animation: ar-in 0.4s ease; }

/* ═══ Responsive ═══ */
@media (max-width: 599px) {
  #a11y-radar .ar-form__row { flex-direction: column; gap: 1rem; }
  #a11y-radar .ar-form__field--pages { flex: 1 1 auto; }
  #a11y-radar .ar-form__row--email { flex-direction: column; align-items: stretch; gap: 1rem; }
  #a11y-radar .ar-form__row--email .ar-form__btn { width: 100%; }
  .ar-coverage-grid { grid-template-columns: 1fr; }
}

/* ═══ Reduced motion ═══ */
@media (prefers-reduced-motion: reduce) {
  .ar-form__input, .ar-form__select, .ar-form__btn, .ar-btn-primary,
  .ar-progress__bar, .ar-progress__bar--indet, .ar-spinner, #ar-results,
  .ar-slots__dot { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════
   39. Accessibility scorecard (.sc- tool) — moved from scorecard/styles.php
   ═══════════════════════════════════════════ */
/* ─── Tokens ───────────────────────────────────────────────────────────────
   Mirrors the site scanner (#a11y-radar) so the scorecard reads as its sibling:
   primary values come from the design system (--ds-*), with an explicit per-theme
   fallback after each var() so the tool stays contrast-safe even if the --ds-*
   layer isn't present. Page sits on the sunken surface; cards are raised. Dark
   fallbacks live in the [data-theme="dark"] block below. WCAG AA in both themes. */
.sc {
  --brand:        var(--ds-brand, #294557);
  --brand-h:      var(--ds-brand-hover, #1e3444);
  --brand-light:  var(--ds-brand-light, #dce5ec);
  --on-brand:     var(--ds-text-on-brand, #ffffff);
  --bg:           var(--ds-surface-sunken, #f1f5f9);
  --card:         var(--ds-surface, #ffffff);          /* white cards, like the PDF page */
  --border:       var(--ds-border, #e5e7eb);
  --border-muted: var(--ds-border, #eef1f5);
  --fg:           var(--ds-text-primary, #232323);
  --fg-muted:     var(--ds-text-secondary, #475569);
  --fg-subtle:    var(--ds-text-secondary, #475569);
  /* Semantic — solid tones (meter, dots) + soft bg/border pairs (answers, badges) */
  --red:          var(--ds-error-text, #991b1b);
  --amber:        var(--ds-warning-text, #92400e);
  --green:        var(--ds-success-text, #065f46);
  --success:      var(--ds-success-text, #065f46);
  --success-light:var(--ds-success-bg, #ecfdf5);
  --success-border: color-mix(in srgb, var(--ds-success, #059669) 45%, transparent);
  --warning:      var(--ds-warning-text, #92400e);
  --warning-light:var(--ds-warning-bg, #fffbeb);
  --warning-border: color-mix(in srgb, var(--ds-warning, #d97706) 45%, transparent);
  --danger:       var(--ds-error-text, #991b1b);
  --danger-light: var(--ds-error-bg, #fef2f2);
  --danger-border: color-mix(in srgb, var(--ds-error, #dc2626) 45%, transparent);
  /* Aliases kept for existing component rules */
  --primary:      var(--brand);
  --primary-hover:var(--brand-h);
  --primary-fg:   var(--on-brand);
  --accent:       var(--brand);
  --accent-light: var(--brand-light);
  --accent-border: color-mix(in srgb, var(--ds-brand, #294557) 28%, transparent);
  --accent-on-light: var(--brand);
  --focus-ring:   var(--ds-border-focus, #294557);
  --radius:       var(--ds-radius, 8px);
  --radius-lg:    var(--ds-radius-lg, 12px);
  --shadow:       var(--ds-shadow, 0 1px 3px rgba(0,0,0,0.1));
  --shadow-md:    var(--ds-shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1));
  --font:         'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;

  font-family: var(--font);
  color: var(--fg);
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 16px 48px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
.sc *, .sc *::before, .sc *::after { box-sizing: border-box; }

/* Dark theme — prefer --ds-*, fall back to AA-verified dark values so the
   scorecard never inherits light colors on a dark page. */
[data-theme="dark"] .sc {
  --brand:        var(--ds-brand, #7cb8f7);
  --brand-h:      var(--ds-brand-hover, #a5d4fd);
  --brand-light:  var(--ds-brand-light, rgba(124,184,247,0.12));
  --on-brand:     var(--ds-text-on-brand, #0f172a);
  --bg:           var(--ds-surface-sunken, #0c1322);
  --card:         var(--ds-surface-raised, #1e293b);
  --border:       var(--ds-border, #607888);
  --border-muted: var(--ds-border, #33465a);
  --fg:           var(--ds-text-primary, #e2e8f0);
  --fg-muted:     var(--ds-text-secondary, #a8b5c4);
  --fg-subtle:    var(--ds-text-secondary, #a8b5c4);
  --red:          var(--ds-error-text, #fca5a5);
  --amber:        var(--ds-warning-text, #fbbf24);
  --green:        var(--ds-success-text, #8cf0b5);
  --success:      var(--ds-success-text, #8cf0b5);
  --success-light:var(--ds-success-bg, #064e3b);
  --warning:      var(--ds-warning-text, #fbbf24);
  --warning-light:var(--ds-warning-bg, #451a03);
  --danger:       var(--ds-error-text, #fca5a5);
  --danger-light: var(--ds-error-bg, #450a0a);
}

/* ─── Reduced motion (WCAG 2.3.3) ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sc *, .sc *::before, .sc *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Breadcrumbs ─────────────────────────────────────────────────────────── */
/* Not styled here — rendered via the shared snippet('breadcrumb') and the
   site-wide .sc-breadcrumbs component in style-lean.css (§28.5), same as the
   scanner, so the trail matches every other page. */

/* ─── Global focus style (WCAG 2.4.7 / 2.4.12) ──────────────────────────── */
.sc :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
.sc :focus:not(:focus-visible) { outline: none; }

/* ─── Layout ──────────────────────────────────────────────────────────────── */
.sc-screen { display: none; }
.sc-screen--active { display: block; }

.sc-fade-in { animation: scFadeIn 0.35s ease forwards; }
@keyframes scFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* Brand eyebrow typography is shared (see .pdflp__eyebrow group in §40); the
   scorecard only sets its own spacing here. */
.sc-eyebrow { margin: 0 0 0.25rem; }
/* .sc-badge--dot / .sc-badge__dot styles are shared (see "Shared status badge" below). */

/* ─── Badge ───────────────────────────────────────────────────────────────── */
.sc-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; font-size: 12px; font-weight: 600; line-height: 18px;
  border-radius: 9999px; background: var(--bg);
  border: 1px solid var(--border); color: var(--fg-muted); white-space: nowrap;
}
.sc-badge--accent  { background: var(--accent-light);  border-color: var(--accent-border);  color: var(--accent-on-light); }
.sc-badge--danger  { background: var(--danger-light);  border-color: var(--danger-border);  color: var(--danger); }
.sc-badge--warning { background: var(--warning-light); border-color: var(--warning-border); color: var(--warning); }
.sc-badge--success { background: var(--success-light); border-color: var(--success-border); color: var(--success); }

/* Standards row — scanner-style trust badges (small, brand, on sunken) */
.sc-standards__list .sc-badge {
  border-radius: 4px; background: var(--bg); border-color: transparent;
  color: var(--brand); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.3rem 0.7rem;
}

/* ─── Card ────────────────────────────────────────────────────────────────── */
.sc-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 0.75rem; padding: 1.75rem;
  box-shadow: var(--shadow); margin-bottom: 1rem;
}
.sc-card--accent { background: var(--accent-light); border-color: var(--accent-border); }
.sc-card__title  { font-size: 1.0625rem; font-weight: 700; color: var(--fg); margin-bottom: 0.75rem; }

/* ─── Button — matches the site-wide .btn the PDF page uses ──────────────── */
.sc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; font-size: 16px; font-weight: 600; font-family: var(--font);
  border-radius: 8px; cursor: pointer; transition: background 0.15s, border-color 0.15s, transform 0.05s;
  line-height: 1.25; border: 2px solid transparent; text-decoration: none;
}
.sc-btn--primary, .sc-btn--accent, .sc-btn--success {
  background: var(--brand); color: var(--on-brand); border-color: var(--brand);
}
.sc-btn--primary:hover, .sc-btn--accent:hover, .sc-btn--success:hover {
  background: var(--brand-h); border-color: var(--brand-h); color: var(--on-brand);
}
.sc-btn:active { transform: scale(0.98); }
.sc-btn--block { width: 100%; height: 48px; font-size: 1rem; }
.sc-btn--ghost { background: transparent; color: var(--fg-muted); border-color: transparent; padding: 0.7rem 0.75rem; }
.sc-btn--ghost:hover { color: var(--fg); }

/* ─── Input ───────────────────────────────────────────────────────────────── */
.sc-input {
  flex: 1; height: 44px; padding: 0 0.75rem; font-size: 16px; font-family: var(--font);
  border-radius: 0.5rem; border: 1px solid var(--border);
  background: var(--bg); outline: none; color: var(--fg);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.sc-input:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent); outline: none; }

/* ─── Intro (scanner hero: eyebrow+rule → title → lead) ───────────────────── */
.sc-intro { margin-bottom: 2.25rem; }
.sc-intro .sc-badge--dot { margin-bottom: 16px; }
.sc-intro__heading {
  font-size: clamp(1.875rem, 4.5vw, 2.375rem); font-weight: 700;
  line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 1.125rem;
}
.sc-intro__sub { font-size: 1.1875rem; line-height: 1.65; color: var(--fg-muted); max-width: 620px; }
.sc-intro__meta { display: flex; gap: 24px; margin-top: 2rem; font-size: 13px; color: var(--fg-muted); }
.sc-intro__meta span { display: flex; align-items: center; gap: 6px; }
.sc-intro__meta i { font-size: 14px; }

.sc-standards { margin-top: 3rem; border-top: 1px solid var(--border); padding-top: 1.5rem; }
.sc-standards__label {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--fg-muted); margin-bottom: 12px;
}
.sc-standards__list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }

/* ─── Progress ────────────────────────────────────────────────────────────── */
.sc-progress { height: 5px; background: var(--border); border-radius: 3px; margin-bottom: 32px; overflow: hidden; }
.sc-progress__fill { height: 100%; border-radius: 3px; background: var(--brand); width: 10%; transition: width 0.4s ease; }
.sc-counter { display: block; font-size: 12px; color: var(--fg-muted); margin-bottom: 10px; }

/* ─── Question ────────────────────────────────────────────────────────────── */
.sc-question-card__category { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.sc-question-card__category i { color: var(--brand); font-size: 18px; }
.sc-question-card__text { font-size: 1.375rem; font-weight: 700; line-height: 1.3; color: var(--fg); margin-bottom: 12px; }
.sc-question-card__context {
  font-size: 13px; color: var(--fg-muted); line-height: 1.6;
  margin-bottom: 28px; padding-left: 14px; border-left: 2px solid var(--border);
}

/* ─── Answers ─────────────────────────────────────────────────────────────── */
.sc-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sc-answer-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 16px; font-size: 14px; font-weight: 600; font-family: var(--font);
  border-radius: 0.5rem; cursor: pointer; transition: all 0.15s ease;
  border-width: 1px; border-style: solid;
}
.sc-answer-btn i { font-size: 18px; }
.sc-answer-btn:hover { box-shadow: 0 0 0 1px currentColor; }
.sc-answer-btn--yes     { background: var(--success-light); color: var(--success); border-color: var(--success-border); }
.sc-answer-btn--partial { background: var(--warning-light); color: var(--warning); border-color: var(--warning-border); }
.sc-answer-btn--no      { background: var(--danger-light);  color: var(--danger);  border-color: var(--danger-border); }
.sc-answer-btn--unsure  { background: var(--bg);            color: var(--fg-muted); border-color: var(--border); }

/* Qualifier questions — neutral, full-width, sunken like the scanner inputs */
.sc-answers--choice { grid-template-columns: 1fr; }
.sc-answer-btn--choice {
  justify-content: flex-start; text-align: left;
  background: var(--bg); color: var(--fg); border-color: var(--border); font-weight: 500;
}
.sc-answer-btn--choice:hover { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }

/* ─── Result verdict + readiness meter ─── (meter styles are SHARED with the
   scanner — see "Readiness meter" in §38; only the scorecard-specific wrapper
   margin lives here.) */
.sc-verdict { text-align: left; border-top: 3px solid var(--brand); }
.sc-meter { margin-bottom: 1.25rem; }

.sc-verdict__title { font-size: 1.375rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--fg); margin: 0 0 10px; }
.sc-verdict__sub   { font-size: 0.9375rem; color: var(--fg-muted); line-height: 1.6; margin: 0; }

/* ─── CTA zone: two doors for in-scope, single kit CTA for exempt ─────────── */
.sc-cta-zone { margin-top: 1.25rem; }
.sc-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sc-door {
  display: flex; flex-direction: column; gap: 4px;
  padding: 1.25rem; text-align: left; text-decoration: none; cursor: pointer;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 0.625rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  font-family: var(--font);
}
.sc-door:hover { border-color: var(--brand); transform: translateY(-1px); box-shadow: var(--shadow); }
.sc-door--emphasized { border-color: var(--brand); background: var(--brand-light); box-shadow: 0 0 0 1px var(--accent-border); }
.sc-door__eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-on-light); }
.sc-door__label { font-size: 1.0625rem; font-weight: 700; }
.sc-door__desc  { font-size: 0.8125rem; color: var(--fg-muted); line-height: 1.5; }
.sc-cta-note { font-size: 12px; color: var(--fg-muted); line-height: 1.6; margin: 10px 0 0; text-align: center; }

/* ─── Conformance note ────────────────────────────────────────────────────── */
.sc-note__head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.sc-note__head i { color: var(--brand); font-size: 18px; }
.sc-note__body { font-size: 13px; color: var(--fg-muted); line-height: 1.6; margin: 0; }

/* ─── Themes (plain-language, no WCAG codes) ──────────────────────────────── */
.sc-theme { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; }
.sc-theme + .sc-theme { border-top: 1px solid var(--border-muted); }
.sc-theme__dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; }
.sc-theme__text { font-size: 14px; color: var(--fg); line-height: 1.5; }
.sc-theme__more { font-size: 13px; color: var(--fg-muted); margin: 12px 0 0; }
.sc-glossary-invite { font-size: 13px; color: var(--fg-muted); margin: 16px 0 0; }
.sc-inline-link { color: var(--brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sc-inline-link:hover { color: var(--brand-h); }

/* ─── Email capture ───────────────────────────────────────────────────────── */
.sc-email__header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 14px; font-weight: 600; color: var(--accent-on-light); }
.sc-email__header i { font-size: 18px; }
.sc-email__sub { font-size: 13px; color: var(--fg-muted); line-height: 1.6; margin-bottom: 16px; }
.sc-email__row { display: flex; gap: 8px; }
.sc-email__status { font-size: 13px; margin-top: 8px; color: var(--danger); font-weight: 500; }
.sc-email-success { display: flex; align-items: center; gap: 12px; }
/* Author display:flex would otherwise override the [hidden] attribute — keep
   the success block genuinely hidden until submit without relying on a global. */
.sc-email-success[hidden] { display: none; }
.sc-email-success__title { font-size: 14px; font-weight: 600; margin: 0; }
.sc-email-success__sub { font-size: 13px; color: var(--fg-muted); margin: 2px 0 0; }

/* ─── Newsletter opt-in + honesty line ────────────────────────────────────── */
.sc-news-opt { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; font-weight: 400; color: var(--fg-muted); line-height: 1.5; margin-top: 14px; cursor: pointer; }
/* The site's global input rules size bare inputs full-width/44px — reset the
   checkbox so it stays a small box and the label sits beside it (same fix the
   scanner uses). */
.sc-news-opt input[type="checkbox"] {
  width: 1rem !important; height: 1rem !important; min-height: 0 !important;
  flex: 0 0 auto; margin: 0.15rem 0 0 !important; padding: 0 !important;
  -webkit-appearance: auto; appearance: auto; accent-color: var(--brand); box-shadow: none !important;
}
.sc-legal { font-size: 0.6875rem; color: var(--fg-subtle); line-height: 1.5; margin: 8px 0 0; }
.sc-honesty { font-size: 12px; color: var(--fg-subtle); text-align: center; line-height: 1.6; margin: 0 0 20px; }

.sc-footer { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; }
.sc-footer__brand { font-size: 12px; color: var(--fg-muted); }
.sc-footer__brand a { color: var(--fg-muted); text-decoration: underline; text-underline-offset: 2px; }
.sc-footer__brand a:hover { color: var(--fg); }

/* ─── Visually hidden ─────────────────────────────────────────────────────── */
.sc-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; }

@media (max-width: 599px) {
  .sc-answers { grid-template-columns: 1fr; }
  .sc-doors { grid-template-columns: 1fr; }
  .sc-email__row { flex-direction: column; }
  .sc-footer { flex-direction: column; gap: 12px; text-align: center; }
  .sc-intro__meta { flex-wrap: wrap; gap: 12px; }
}

/* ═══════════════════════════════════════════
   40. PDF remediation (.pdflp-*) — moved from pdf-remediation.php
   ═══════════════════════════════════════════ */
/* ─── Tokens — single source of truth is style-lean.css (--ds-*). Every colour
   below resolves from a --ds-* token (literal fallback after each var()), so the
   page inherits the exact palette the scanner and scorecard use and flips to
   dark automatically — no per-component dark block. The one alias carries the
   card surface, which is white in light but lifts to the raised surface in dark
   (matching the rest of the site). WCAG AA verified in both themes. */
.pdflp { --pdflp-card: var(--ds-surface, #ffffff); }
[data-theme="dark"] .pdflp { --pdflp-card: var(--ds-surface-raised, #1e293b); }

.pdflp section { padding: 96px 0; overflow: visible; }
/* Shared brand eyebrow — ONE typographic definition for the PDF, scanner and
   scorecard section eyebrows; each tool sets its own margin above. */
.pdflp__eyebrow, .ar-hero__eyebrow, .ar-eyebrow--rule, .sc-eyebrow, .agencies__eyebrow { font-size: var(--ds-eyebrow-size, .6875rem); font-weight: var(--ds-eyebrow-weight, 700); text-transform: uppercase; letter-spacing: var(--ds-eyebrow-spacing, .1em); color: var(--ds-brand, #294557); }
.pdflp__eyebrow { margin-bottom: 8px; }
.pdflp__intro { margin-bottom: 48px; }
.pdflp__intro p { max-width: 560px; color: var(--ds-text-primary, #232323); }

/* Shared status badge (pill + pulsing dot) — ONE definition for all resource
   tools (PDF, scanner, scorecard); prefixed class names kept in the markup. */
.pdflp__badge, .ar-badge, .sc-badge--dot { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; padding: 6px 14px; border-radius: 999px; background: var(--ds-brand-light, #dce5ec); color: var(--ds-brand, #294557); border-color: transparent; }
.pdflp__badge-dot, .ar-badge__dot, .sc-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-brand, #294557); flex: none; animation: jg-pulse 2s ease infinite; }
@keyframes jg-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }

/* Hero */
.pdflp__hero { padding: 64px 0 48px; }
.pdflp__hero h1 { margin-bottom: 16px; max-width: 600px; }
.pdflp__hero > .container > p { max-width: 560px; margin-bottom: 24px; color: var(--ds-text-primary, #232323); }
.pdflp__hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }

/* Features */
.pdflp__features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.pdflp__card { background: var(--pdflp-card, #ffffff); border: 1px solid var(--ds-border, #e5e7eb); border-radius: 12px; padding: 24px; transition: box-shadow .15s, border-color .15s; }
.pdflp__card:hover { box-shadow: 0 4px 6px rgba(0,0,0,.07); border-color: var(--ds-border-strong, #d1d5db); }
.pdflp__feat-icon { width: 40px; height: 40px; border-radius: 8px; background: var(--ds-brand-light, #dce5ec); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--ds-brand, #294557); font-size: 20px; }
.pdflp__card p { font-size: 14px; line-height: 1.6; color: var(--ds-text-primary, #232323); margin: 0; }

/* Free assessment */
.pdflp__assess { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.pdflp__assess-list { list-style: none; margin: 24px 0 0; padding: 0; }
.pdflp__assess-list li { font-size: 14px; color: var(--ds-text-primary, #232323); padding: 6px 0; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5; }
.pdflp__assess-list .check { color: var(--ds-success, #059669); font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.pdflp__assess-form { background: var(--pdflp-card, #ffffff); border: 1px solid var(--ds-border, #e5e7eb); border-radius: 12px; padding: 32px; }
.pdflp__assess-form h3 { margin-bottom: 16px; }
.pdflp__assess-ok { display: none; text-align: center; padding: 32px; }
.pdflp__assess-ok.show { display: block; }
.pdflp__assess-ok h3 { color: var(--ds-text-primary, #232323); margin-bottom: 8px; }
.pdflp__assess-ok p { color: var(--ds-text-secondary, #475569); font-size: 14px; }
@media (max-width: 768px) { .pdflp__assess { grid-template-columns: 1fr; gap: 32px; } }

/* Quiz */
.pdflp__quiz { }
.pdflp__qopts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 600px) { .pdflp__qopts { grid-template-columns: 1fr; } }
.pdflp__qstep { display: none; }
.pdflp__qstep.active { display: block; }
.pdflp__qprog { display: flex; gap: 4px; margin-bottom: 24px; }
.pdflp__qprog-dot { height: 3px; border-radius: 2px; flex: 1; background: var(--ds-border, #e5e7eb); transition: background .2s; }
.pdflp__qprog-dot.done { background: var(--ds-brand, #294557); }
.pdflp__qprog-dot.now { background: var(--ds-brand, #294557); opacity: .4; }
.pdflp__qnum { font-size: 12px; font-weight: 600; color: var(--ds-text-secondary, #525252); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.pdflp__qq { font-size: 18px; font-weight: 700; color: var(--ds-text-primary, #232323); margin-bottom: 4px; }
.pdflp__qhint { font-size: 13px; color: var(--ds-text-secondary, #525252); margin-bottom: 16px; line-height: 1.5; }
.pdflp__qopt {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border: 1px solid var(--ds-border, #e5e7eb); border-radius: 12px; cursor: pointer;
  transition: border-color .15s, background .15s; background: var(--pdflp-card, #ffffff);
}
.pdflp__qopt:hover { border-color: var(--ds-border-strong, #d1d5db); background: var(--ds-surface-raised, #f8fafc); }
.pdflp__qopt:focus-visible { outline: 3px solid var(--ds-brand, #294557); outline-offset: 3px; }
.pdflp__qopt.sel { border-color: var(--ds-brand, #294557); border-width: 2px; background: var(--ds-brand-light, #dce5ec); }
.pdflp__qradio {
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--ds-border-strong, #d1d5db);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center; transition: border-color .15s;
}
.pdflp__qopt.sel .pdflp__qradio { border-color: var(--ds-brand, #294557); }
.pdflp__qopt.sel .pdflp__qradio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-brand, #294557); }
.pdflp__qopt-label { font-size: 14px; font-weight: 600; color: var(--ds-text-primary, #232323); }
.pdflp__qopt-desc { font-size: 13px; color: var(--ds-text-secondary, #525252); margin-top: 2px; }
.pdflp__qslider { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.pdflp__qslider input[type="range"] { flex: 1; accent-color: var(--ds-brand, #294557); }
.pdflp__qslider-val { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 700; min-width: 48px; text-align: right; color: var(--ds-text-primary, #232323); }
.pdflp__qnav { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.pdflp__qback { opacity: .6; }
.pdflp__qback:hover { opacity: 1; }
.pdflp__qresult { display: none; }
.pdflp__qresult.active { display: block; }
.pdflp__qresult-card { background: var(--ds-surface-raised, #f8fafc); border-radius: 12px; padding: 24px; margin-bottom: 16px; }
.pdflp__qresult-label { font-size: 13px; color: var(--ds-text-secondary, #525252); margin-bottom: 4px; }
.pdflp__qresult-price { font-family: 'JetBrains Mono', monospace; font-size: 28px; font-weight: 700; color: var(--ds-text-primary, #232323); }
.pdflp__qresult-detail { font-size: 13px; color: var(--ds-text-secondary, #525252); margin-top: 6px; line-height: 1.6; }
.pdflp__qresult-note { font-size: 13px; color: var(--ds-text-secondary, #525252); line-height: 1.6; margin-bottom: 16px; }
.pdflp__qresult-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.pdflp__qrestart { font-size: 13px; color: var(--ds-text-secondary, #525252); cursor: pointer; background: none; border: none; margin-top: 12px; text-decoration: underline; padding: 0; }
.pdflp__qrestart:hover { color: var(--ds-brand, #294557); }
.pdflp__qrestart:focus-visible { outline: 3px solid var(--ds-brand, #294557); outline-offset: 3px; }

/* FAQ */
.pdflp__faq-item { border-bottom: 1px solid var(--ds-border, #e5e7eb); }
.pdflp__faq-q { width: 100%; background: none; border: none; padding: 24px 0; font-family: 'Inter', system-ui, sans-serif; font-size: 16px; font-weight: 600; color: var(--ds-text-primary, #232323); cursor: pointer; display: flex; justify-content: space-between; align-items: center; text-align: left; line-height: 1.4; transition: color .15s; }
.pdflp__faq-q:hover { color: var(--ds-brand, #294557); }
.pdflp__faq-q:focus-visible { outline: 3px solid var(--ds-brand, #294557); outline-offset: 3px; border-radius: 4px; }
.pdflp__faq-q .chevron { font-size: 20px; flex-shrink: 0; margin-left: 16px; color: var(--ds-text-secondary, #525252); transition: transform .2s; }
.pdflp__faq-item[data-open="true"] .pdflp__faq-q .chevron { transform: rotate(45deg); }
.pdflp__faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.pdflp__faq-item[data-open="true"] .pdflp__faq-a { max-height: 600px; }
.pdflp__faq-a-inner { padding-bottom: 24px; }
.pdflp__faq-a p { font-size: 14px; line-height: 1.65; color: var(--ds-text-primary, #232323); margin-bottom: 12px; }
.pdflp__faq-a p:last-child { margin-bottom: 0; }

/* CTA — brand band; on-brand token keeps text correct as the band colour flips */
.pdflp__cta { background: var(--ds-brand, #294557); color: var(--ds-text-on-brand, #fff); text-align: center; }
.pdflp__cta h2 { color: var(--ds-text-on-brand, #fff); }
.pdflp__cta p { color: var(--ds-text-on-brand, #fff); opacity: 0.85; max-width: 520px; margin: 0 auto 32px; }
.pdflp__cta .btn-primary { background: var(--ds-text-on-brand, #fff); color: var(--ds-brand, #294557); border-color: var(--ds-text-on-brand, #fff); }
.pdflp__cta .btn-primary:hover { background: var(--ds-brand-light, #dce5ec); }
.pdflp__cta .btn-secondary { border-color: color-mix(in srgb, var(--ds-text-on-brand, #fff) 40%, transparent); color: var(--ds-text-on-brand, #fff); }
.pdflp__cta .btn-secondary:hover { border-color: var(--ds-text-on-brand, #fff); background: color-mix(in srgb, var(--ds-text-on-brand, #fff) 12%, transparent); }
/* The CTA band intentionally inverts in dark (brand → dark surface) — the one
   spot a token flip isn't enough, so a minimal dark override restores it. */
[data-theme="dark"] .pdflp__cta { background: var(--ds-surface-raised, #1e293b); color: var(--ds-text-primary, #f1f5f9); border-top: 1px solid var(--ds-border, #334155); }
[data-theme="dark"] .pdflp__cta h2, [data-theme="dark"] .pdflp__cta p { color: var(--ds-text-primary, #f1f5f9); }
[data-theme="dark"] .pdflp__cta .btn-primary { background: var(--ds-brand, #7cb8f7); color: var(--ds-text-on-brand, #0f172a); border-color: var(--ds-brand, #7cb8f7); }
[data-theme="dark"] .pdflp__cta .btn-primary:hover { background: var(--ds-brand-hover, #a5d4fd); }
[data-theme="dark"] .pdflp__cta .btn-secondary { border-color: var(--ds-border, #607888); color: var(--ds-text-primary, #e2e8f0); }
[data-theme="dark"] .pdflp__cta .btn-secondary:hover { border-color: var(--ds-brand, #7cb8f7); background: color-mix(in srgb, var(--ds-brand, #7cb8f7) 10%, transparent); }
.pdflp__cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* Modal */
.pdflp__overlay { display: none; position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 24px; }
.pdflp__overlay.is-open { display: flex; }
/* Modal renders OUTSIDE .pdflp (sibling after it closes), so the --pdflp-card
   alias can't reach it — use the --ds-* surface directly (white in light, raised
   in dark) so it flips correctly regardless of DOM position. */
.pdflp__modal { background: var(--ds-surface, #ffffff); border-radius: 12px; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; box-shadow: var(--ds-shadow-lg, 0 10px 15px rgba(0,0,0,.1)); position: relative; }
[data-theme="dark"] .pdflp__modal { background: var(--ds-surface-raised, #1e293b); }
.pdflp__modal-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 32px 0; }
.pdflp__modal-head h2 { margin-bottom: 0; }
.pdflp__modal-x { background: none; border: none; font-size: 24px; color: var(--ds-text-secondary, #525252); cursor: pointer; padding: 4px; border-radius: 6px; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; transition: color .15s; }
.pdflp__modal-x:hover { color: var(--ds-text-primary, #232323); }
.pdflp__modal-x:focus-visible { outline: 3px solid var(--ds-brand, #294557); outline-offset: 3px; }
.pdflp__modal-body { padding: 24px 32px 32px; }
.pdflp__modal-body > p:first-child { font-size: 14px; color: var(--ds-text-primary, #232323); margin-bottom: 24px; }
.pdflp__fg { margin-bottom: 20px; }
.pdflp__fg label { display: block; font-size: 14px; font-weight: 600; color: var(--ds-text-primary, #232323); margin-bottom: 4px; }
.pdflp__fg .note { font-weight: 400; color: var(--ds-text-secondary, #525252); font-size: 13px; }
.pdflp__fg input, .pdflp__fg textarea, .pdflp__fg select { width: 100%; font-family: 'Inter', system-ui, sans-serif; font-size: 16px; padding: 10px 14px; border: 1px solid var(--ds-border-strong, #d1d5db); border-radius: 8px; color: var(--ds-text-primary, #232323); background: var(--ds-surface, #ffffff); transition: border-color .15s; line-height: 1.5; margin: 0; }
.pdflp__fg input:focus, .pdflp__fg textarea:focus, .pdflp__fg select:focus { border-color: var(--ds-brand, #294557); box-shadow: 0 0 0 3px rgba(41,69,87,.15); outline: none; }
.pdflp__fg textarea { resize: vertical; min-height: 100px; }
.pdflp__req { color: var(--ds-error, #dc2626); }
.pdflp__hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.pdflp__modal-ok { display: none; padding: 48px 32px; text-align: center; }
.pdflp__modal-ok.show { display: block; }
.pdflp__modal-ok h3 { color: var(--ds-text-primary, #232323); margin-bottom: 8px; }
.pdflp__modal-ok p { color: var(--ds-text-secondary, #475569); }
.pdflp__next { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--ds-border, #e5e7eb); }
.pdflp__next h3 { margin-bottom: 16px; font-size: 16px; }
.pdflp__next ol { list-style: none; counter-reset: ns; margin: 0; padding: 0; }
.pdflp__next ol li { counter-increment: ns; font-size: 14px; color: var(--ds-text-primary, #232323); padding: 6px 0; display: flex; gap: 8px; line-height: 1.5; }
.pdflp__next ol li::before { content: counter(ns) "."; font-weight: 700; color: var(--ds-brand, #294557); min-width: 20px; flex-shrink: 0; }

@media (max-width: 991px) { .pdflp section { padding: 64px 0; } .pdflp__hero { padding: 48px 0 32px; } }
@media (prefers-reduced-motion: reduce) { .pdflp__faq-a { transition: none; } .pdflp__badge-dot { animation: none; } }

/* ═══════════════════════════════════════════
   41. Statement generator (.sg-*) — moved from statement-generator.php
   ═══════════════════════════════════════════ */
 in the JS below,
  which is a standalone HTML file and keeps its own literal colours.) */ ?>
<style>
/* Step dots */
.sg-dot {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid var(--ds-border-strong, #d1d5db); background: var(--ds-surface, #ffffff); color: var(--ds-text-secondary, #525252);
  font-family: 'Inter', system-ui, sans-serif; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
  display: flex; align-items: center; justify-content: center;
}
.sg-dot--active { border-color: var(--ds-brand, #294557); background: var(--ds-brand, #294557); color: var(--ds-text-on-brand, #ffffff); }
.sg-dot--done { border-color: var(--ds-success, #059669); background: var(--ds-success, #059669); color: var(--ds-text-on-brand, #ffffff); }
.sg-dot:focus-visible { outline: 3px solid var(--ds-brand, #294557); outline-offset: 3px; }

/* Panels */
.sg-panel { border: 1px solid var(--ds-border, #e5e7eb); border-radius: 12px; padding: 24px; margin-bottom: 16px; display: none; }
.sg-panel--active { display: block; }
.sg-panel__title {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.125rem; font-weight: 700; color: var(--ds-text-primary, #232323); margin-bottom: 4px;
}
.sg-panel__num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--ds-brand, #294557); color: var(--ds-text-on-brand, #ffffff);
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.sg-panel__desc { color: var(--ds-text-secondary, #475569); font-size: 14px; margin-bottom: 20px; line-height: 1.6; }

/* Fields — extends base input styles from style-lean.css */
.sg-field { margin-bottom: 20px; }
.sg-field__label { display: block; font-size: 13px; font-weight: 600; color: var(--ds-text-primary, #232323); margin-bottom: 4px; }
.sg-field__hint { font-size: 12px; color: var(--ds-text-secondary, #525252); margin: 0 0 6px; line-height: 1.45; }
.sg-field__error {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 13px; color: var(--ds-error-text, #991b1b); background: var(--ds-error-bg, #fef2f2); border: 1px solid color-mix(in srgb, var(--ds-error, #dc2626) 35%, transparent);
  border-radius: 6px; padding: 8px 12px; margin-top: 6px; line-height: 1.45;
}
.sg-field__error i { color: var(--ds-error, #dc2626); font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.sg-field__error[hidden] { display: none; }
.sg-field input[aria-invalid="true"],
.sg-field textarea[aria-invalid="true"],
.sg-field select[aria-invalid="true"] { border-color: var(--ds-error, #dc2626); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }

/* Checkboxes */
.sg-checks { display: flex; flex-direction: column; gap: 6px; }
.sg-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; cursor: pointer; padding: 4px 0; line-height: 1.45; }
.sg-check input[type="checkbox"] { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; accent-color: var(--ds-brand, #294557); }

/* Limitations */
.sg-limitation { padding: 16px; background: var(--ds-surface-raised, #f8fafc); border: 1px solid var(--ds-border, #e5e7eb); border-radius: 8px; margin-bottom: 10px; }
.sg-limitation .sg-field:last-child { margin-bottom: 0; }

/* Actions bar */
.sg-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--ds-border, #e5e7eb); }

/* Output panel */
.sg-output { border-color: var(--ds-success, #059669); }
.sg-output .sg-panel__num { background: var(--ds-success, #059669); }

/* Resume banner */
.sg-resume {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--ds-brand-light, #eff6ff); border: 1px solid color-mix(in srgb, var(--ds-brand, #294557) 25%, transparent); border-radius: 8px;
  padding: 16px; margin-bottom: 24px;
}
.sg-resume__icon { color: var(--ds-brand, #294557); font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.sg-resume__body { flex: 1; min-width: 0; }
.sg-resume__title { font-size: 14px; font-weight: 600; color: var(--ds-text-primary, #232323); margin: 0 0 2px; }
.sg-resume__text { font-size: 12px; color: var(--ds-text-secondary, #475569); margin: 0; line-height: 1.45; }
.sg-resume[hidden] { display: none; }

/* Save / edit link box */
.sg-save {
  background: var(--ds-surface-raised, #f8fafc); border: 1px solid var(--ds-border, #e5e7eb); border-radius: 8px;
  padding: 16px; margin-bottom: 24px;
}
.sg-save__header { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.sg-save__url-row { display: flex; gap: 8px; align-items: center; }
.sg-save__url-input {
  flex: 1; font-size: 12px; font-family: 'JetBrains Mono', 'Inter', monospace;
  padding: 8px 12px; margin: 0; border: 1px solid var(--ds-border-strong, #d1d5db); border-radius: 6px;
  background: var(--ds-surface, #ffffff); color: var(--ds-text-secondary, #475569); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sg-save__url-input:focus { border-color: var(--ds-brand, #294557); box-shadow: 0 0 0 3px rgba(41,69,87,.15); outline: none; }
.sg-save__note {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--ds-text-secondary, #525252); margin: 10px 0 0; line-height: 1.4;
}
.sg-save__note i { color: var(--ds-text-secondary, #475569); font-size: 13px; flex-shrink: 0; }

/* Toast */
.sg-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ds-text-primary, #232323); color: var(--ds-surface, #ffffff); padding: 10px 20px; border-radius: 8px;
  font-size: 13px; font-weight: 600; z-index: 999;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.sg-toast--visible { opacity: 1; }

/* Preview */
.sg-preview {
  border: 1px solid var(--ds-border, #e5e7eb); border-radius: 8px; padding: 24px;
  margin: 16px 0; background: var(--ds-surface-raised, #ffffff); max-height: 480px; overflow-y: auto;
}
#sgPreviewContent h1 { font-size: 1.375rem; margin-bottom: 12px; color: var(--ds-text-primary, #232323); }
#sgPreviewContent h2 { font-size: 1rem; margin-top: 20px; margin-bottom: 8px; color: var(--ds-text-primary, #232323); }
#sgPreviewContent p { font-size: 14px; line-height: 1.65; margin-bottom: 12px; color: var(--ds-text-primary, #232323); }
#sgPreviewContent ul { margin: 8px 0 12px 20px; font-size: 14px; line-height: 1.65; }
#sgPreviewContent li { margin-bottom: 4px; color: var(--ds-text-primary, #232323); }
#sgPreviewContent a { color: var(--ds-brand, #294557); }
#sgPreviewContent hr { border: none; border-top: 1px solid var(--ds-border, #e5e7eb); margin: 20px 0; }

/* Upsell */
.sg-upsell {
  background: linear-gradient(135deg, var(--ds-surface-raised, #f0f4f8) 0%, var(--ds-success-bg, #ecfdf5) 100%);
  border: 1px solid var(--ds-border-strong, #d1d5db); border-radius: 12px; padding: 24px; margin: 24px 0;
}
.sg-upsell__heading { font-size: 1.125rem; font-weight: 700; color: var(--ds-text-primary, #232323); margin-bottom: 4px; }
.sg-upsell__text { font-size: 14px; color: var(--ds-text-secondary, #475569); line-height: 1.65; margin-bottom: 12px; }
.sg-upsell__btn { /* inherits .btn .btn-primary */ }

/* Scanner CTA */
.sg-scanner-cta { text-align: center; padding: 20px 0; border-top: 1px solid var(--ds-border, #e5e7eb); margin-top: 16px; }
.sg-scanner-cta__text { font-size: 15px; color: var(--ds-text-secondary, #475569); margin-bottom: 8px; }

/* Email gate */
.sg-email-gate {
  background: var(--ds-surface-raised, #f8fafc); border: 1px solid var(--ds-border, #e5e7eb); border-radius: 8px;
  padding: 24px; margin: 16px 0; text-align: center;
}
.sg-email-gate__heading { font-size: 1rem; font-weight: 700; color: var(--ds-text-primary, #232323); margin-bottom: 4px; }
.sg-email-gate__text { font-size: 13px; color: var(--ds-text-secondary, #475569); margin-bottom: 12px; }
.sg-email-gate__skip {
  background: none; border: none; color: var(--ds-text-secondary, #475569); font-size: 13px;
  cursor: pointer; text-decoration: underline; font-family: inherit; padding: 0;
}

/* Save section */
.sg-save__icon { color: var(--ds-brand, #294557); font-size: 18px; flex-shrink: 0; margin-top: 2px; }
.sg-save__heading { margin: 0 0 2px; font-size: 14px; font-weight: 600; color: var(--ds-text-primary, #232323); }
.sg-save__desc { font-size: 12px; color: var(--ds-text-secondary, #525252); margin: 0; line-height: 1.45; }

/* All colours above come from the --ds-* tokens (style-lean.css), so the tool
   flips to dark automatically — no per-component dark block. */

/* Responsive */
@media (max-width: 640px) {
  .sg-panel { padding: 16px; }
  .sg-actions { flex-wrap: wrap; gap: 8px; }
  #sgOutputActions { flex-direction: column; }
  #sgOutputActions .btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════════
   42. For-agencies (.agencies-*) — moved from for-agencies.php
   Layout K partnership landing. All colours are --ds-* tokens, so it
   adapts to dark mode with the rest of the site.
   ════════════════════════════════════════════════════════════════ */
/* Uses --ds-surface, not --ds-surface-sunken: this was the only hero on the
   site sitting on the sunken grey, which read as a mistake directly under the
   breadcrumb. The token itself is left alone — other components rely on it. */
.agencies-hero { background: var(--ds-surface); border-bottom: 1px solid var(--ds-border); }
.agencies-hero__inner {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center;
  max-width: 1040px; margin: 0 auto; padding: clamp(3rem, 6vw, 4rem) 28px;
}
@media (max-width: 820px) { .agencies-hero__inner { grid-template-columns: 1fr; gap: 32px; } }
.agencies-hero__content { display: flex; flex-direction: column; gap: 18px; }
.agencies-hero__title {
  font-size: clamp(28px, 3.4vw, 36px); line-height: 1.2; font-weight: 700;
  letter-spacing: -0.02em; color: var(--ds-text-primary); margin: 0; text-wrap: balance;
}
.agencies-hero__text {
  font-size: 18px; line-height: 1.6; color: var(--ds-text-secondary); margin: 0;
  max-width: 52ch; text-wrap: pretty;
}
/* CTAs use the canonical .btn / .btn--primary / .btn--secondary component
   (style-lean §buttons) — it carries the dark-mode text fix that the global
   `[data-theme=dark] a { color:#7cb8f7 }` rule otherwise breaks. */
.agencies-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.agencies-hero__media {
  background: var(--ds-brand-light); border: 1px solid var(--ds-border); border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--ds-brand); min-height: 320px;
}
.agencies-hero__media i { font-size: 34px; }
.agencies-hero__media span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.agencies-why { padding: clamp(3rem, 6vw, 4rem) 28px; }
.agencies-why__head, .agencies-faq__head, .agencies-proof__head, .agencies-sample__head {
  text-align: center; max-width: 640px; margin: 0 auto 40px;
  display: flex; flex-direction: column; gap: 10px; align-items: center;
}
.agencies-why__title, .agencies-faq__title, .agencies-proof__heading, .agencies-sample__heading { font-size: 24px; line-height: 1.3; font-weight: 700; color: var(--ds-text-primary); margin: 0; text-wrap: balance; }
.agencies-why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; max-width: 1000px; margin: 0 auto; }
@media (max-width: 820px) { .agencies-why__grid { grid-template-columns: 1fr; } }
.agencies-card {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 12px;
  padding: 26px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--ds-shadow-sm);
}
.agencies-card__icon {
  width: 46px; height: 46px; border-radius: 10px; background: var(--ds-brand-light);
  display: flex; align-items: center; justify-content: center; color: var(--ds-brand);
}
.agencies-card__icon i { font-size: 24px; }
.agencies-card__title { font-size: 18px; line-height: 1.4; font-weight: 600; color: var(--ds-text-primary); margin: 0; }
.agencies-card__text { font-size: 15px; line-height: 1.6; color: var(--ds-text-secondary); margin: 0; }

/* FAQ — native <details> accordions (no JS). */
.agencies-faq { padding: clamp(3rem, 6vw, 4rem) 28px; }
.agencies-faq__list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.agencies-faq__item { border: 1px solid var(--ds-border); border-radius: 10px; background: var(--ds-surface); }
.agencies-faq__q {
  cursor: pointer; list-style: none; padding: 18px 20px; margin: 0;
  font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--ds-text-primary);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.agencies-faq__q::-webkit-details-marker { display: none; }
.agencies-faq__q::after { content: "+"; font-size: 22px; font-weight: 400; line-height: 1; color: var(--ds-brand); flex-shrink: 0; }
.agencies-faq__item[open] > .agencies-faq__q { color: var(--ds-brand); }
.agencies-faq__item[open] > .agencies-faq__q::after { content: "\2013"; }
.agencies-faq__q:focus-visible { outline: 3px solid var(--ds-brand); outline-offset: -2px; border-radius: 10px; }
.agencies-faq__a { padding: 0 20px 18px; color: var(--ds-text-secondary); font-size: 15px; line-height: 1.65; }
.agencies-faq__a p { margin: 0 0 10px; }
.agencies-faq__a p:last-child { margin: 0; }
.agencies-faq__a a { color: var(--ds-link); font-weight: 600; }

/* No-poach promise — brand band (same on-brand contrast handling as the
   stats band; --ds-text-on-brand flips to dark on the light-blue dark-mode
   brand). */
.agencies-nosolicit { padding: 0 28px clamp(3rem, 6vw, 4rem); }
.agencies-nosolicit__inner {
  max-width: 900px; margin: 0 auto; text-align: center;
  background: var(--ds-brand); color: var(--ds-text-on-brand);
  border-radius: 16px; padding: 44px 40px;
}
.agencies-nosolicit__title { font-size: clamp(20px, 3vw, 26px); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 12px; color: var(--ds-text-on-brand); text-wrap: balance; }
.agencies-nosolicit__text { font-size: 16px; line-height: 1.65; margin: 0 auto; max-width: 58ch; color: var(--ds-text-on-brand); opacity: 0.92; }

/* Proof — light bordered cards (reuses the site's proof points, agency-framed). */
.agencies-proof { padding: clamp(3rem, 6vw, 4rem) 28px; }
/* auto-fit so the grid reads well whether there are 2 or 3 proof cards. */
.agencies-proof__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; max-width: 900px; margin: 0 auto; }
.agencies-proof__card {
  background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: 12px;
  padding: 26px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--ds-shadow-sm);
}
.agencies-proof__title { font-size: 17px; line-height: 1.4; font-weight: 700; color: var(--ds-text-primary); margin: 0; }
.agencies-proof__text { font-size: 14.5px; line-height: 1.6; color: var(--ds-text-secondary); margin: 0; }
.agencies-proof__link { margin-top: auto; padding-top: 4px; font-weight: 600; font-size: 14px; color: var(--ds-link); text-decoration: none; }
.agencies-proof__link:hover { text-decoration: underline; }

/* Sample deliverable — one finding rendered in the report format. */
.agencies-sample { padding: clamp(3rem, 6vw, 4rem) 28px; }
.agencies-sample__intro { font-size: 15.5px; line-height: 1.6; color: var(--ds-text-secondary); max-width: 48ch; margin: 0; }
.agencies-sample__card {
  max-width: 640px; margin: 0 auto;
  background: var(--ds-surface); border: 1px solid var(--ds-border-strong); border-radius: 12px;
  box-shadow: var(--ds-shadow-md); padding: 28px; display: flex; flex-direction: column; gap: 14px;
}
.agencies-sample__bar { display: flex; align-items: center; gap: 10px; }
.agencies-sample__tag {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ds-text-muted); background: var(--ds-surface-sunken); border: 1px solid var(--ds-border);
  padding: 3px 8px; border-radius: 4px;
}
.agencies-sample__sev {
  margin-left: auto; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--ds-error-text); background: var(--ds-error-bg); padding: 3px 8px; border-radius: 4px;
}
.agencies-sample__title { font-size: 19px; line-height: 1.35; font-weight: 700; letter-spacing: -0.01em; color: var(--ds-text-primary); margin: 0; }
.agencies-sample__shot { margin: 0; border: 1px solid var(--ds-border); border-radius: 8px; overflow: hidden; }
.agencies-sample__shot img { display: block; width: 100%; height: auto; }
.agencies-sample__cite { font-family: var(--ds-font-mono); font-size: 12.5px; line-height: 1.5; font-weight: 600; color: var(--ds-brand); margin: 0; }
.agencies-sample__problem { font-size: 15px; line-height: 1.6; color: var(--ds-text-secondary); margin: 0; }
.agencies-sample__fix-label { display: inline-block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ds-success-text); margin-bottom: 6px; }
.agencies-sample__code {
  margin: 0; background: var(--ds-surface-sunken); border: 1px solid var(--ds-border); border-radius: 8px;
  padding: 12px 14px; overflow-x: auto;
}
.agencies-sample__code code { font-family: var(--ds-font-mono); font-size: 13px; line-height: 1.55; color: var(--ds-text-primary); white-space: pre; }
.agencies-sample__plain { font-size: 14px; line-height: 1.6; color: var(--ds-text-secondary); margin: 0; padding-top: 14px; border-top: 1px dashed var(--ds-border); }
.agencies-sample__download { text-align: center; margin: 24px 0 0; }

/* ═══════════════════════════════════════════
   43. Projects & project detail (.projects-* / .project-*)
       — moved from projects.css

   Also the canonical home of the global .badge component, which had
   competing definitions in projects.css, shadcnblocks.css and the Bootstrap
   bundle; whichever loaded last won. It lives here now, and the other two
   have been removed.
   ═══════════════════════════════════════════ */

/* ---------- Tokens ----------
   Values aligned to the canonical brand palette documented at /about/site
   §01 (Colors) and §05 (Spacing & Radius). Names kept as --projects-*
   prefix so existing class rules keep working; only the resolved values
   move toward the canonical scale.
*/
/* These alias the canonical --ds-* tokens in style-lean.css rather than
   restating their hex values. Previously this block hardcoded 12 colours that
   happened to match style-lean; any change there left these pages quietly
   off-brand. Referencing the tokens means light and dark both follow the
   design system automatically — style-lean already redefines --ds-* under
   [data-theme="dark"], so almost nothing needs a dark override below.

   The --projects-* names are kept so every existing rule keeps working. */
:root {
  /* Brand */
  --projects-primary: var(--ds-brand);
  --projects-primary-light: var(--ds-brand-hover);
  --projects-primary-muted: var(--ds-text-secondary);
  --projects-accent: var(--ds-text-primary);
  --projects-slate: var(--ds-text-secondary);
  --projects-slate-light: var(--ds-text-muted);
  /* Surfaces — "bg" is the page, "white" is the card sitting on it.
     These used to swap roles between themes: light tinted the PAGE and kept
     cards white, dark tinted the CARD and kept the page dark. That made the
     first band under the breadcrumb grey on this page while every other page
     opened on white. Light now mirrors dark — page = surface, card = raised —
     so elevation reads the same way in both themes and the token pair no
     longer needs re-pointing. */
  --projects-bg: var(--ds-surface);
  --projects-white: var(--ds-surface-raised);
  --projects-border: var(--ds-border);
  --projects-border-light: var(--ds-surface-sunken);
  --projects-text: var(--ds-text-primary);
  --projects-text-muted: var(--ds-text-secondary);
  /* Radius (§05 scale) */
  --projects-radius: var(--ds-radius-lg);
  --projects-radius-sm: var(--ds-radius);
  --projects-radius-xs: var(--ds-radius-sm);
}

/* ---------- Layout ---------- */
.projects-page {
  background: var(--projects-bg);
  min-height: 100vh;
}

/* 1200px is the site's spine: .jg-nav__bar, .sc-breadcrumb-list and
   .jg-footer__inner all sit at 1200px, so page content must too or its edges
   fall out of line with the nav and footer on every scroll. This was the only
   1160px in the entire stylesheet. */
.projects-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 900px) {
  .projects-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

/* ---------- Sidebar ---------- */
.projects-sidebar {
  position: sticky;
  top: 5rem; /* below header */
  padding-top: 4.5rem;
  padding-bottom: 5rem;
}

@media (max-width: 900px) {
  .projects-sidebar {
    position: static;
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
  }
}

/* Sidebar: Header */
.projects-sidebar__eyebrow {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--projects-primary);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.projects-sidebar__eyebrow i {
  font-size: 0.8125rem;
}

.projects-sidebar__title {
  font-family: 'Inter', sans-serif;
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--projects-primary);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-bottom: 0.875rem;
}

.projects-sidebar__description {
  font-size: 0.9375rem;
  color: var(--projects-text-muted);
  line-height: 1.65;
  margin-bottom: 2rem;
}

/* Sidebar: CTA */
.projects-sidebar__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.75rem 1.125rem;
  border-radius: var(--projects-radius-sm);
  background: var(--projects-primary);
  /* Text on a brand-filled surface: white in light, dark navy in dark. */
  color: var(--ds-text-on-brand, #ffffff);
  font-family: 'Inter', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.projects-sidebar__cta:hover {
  background: var(--projects-primary-light);
}

.projects-sidebar__cta:focus-visible {
  outline: 2px solid var(--projects-primary);
  outline-offset: 2px;
}

.projects-sidebar__cta i {
  font-size: 1rem;
}

/* ---------- Content column ---------- */
.projects-content {
  padding-top: 4.5rem;
  padding-bottom: 5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

@media (max-width: 900px) {
  .projects-content {
    padding-top: 1rem;
  }
}

/* Empty state */
.projects-empty {
  text-align: center;
  padding: 3.75rem 0;
  color: var(--projects-slate-light);
}

.projects-empty i {
  font-size: 2rem;
  margin-bottom: 0.75rem;
  display: block;
  opacity: 0.4;
}

.projects-empty p {
  font-size: 0.9375rem;
}

/* ---------- Project Card ---------- */
.project-card {
  background: var(--projects-white);
  border: 1px solid var(--projects-border);
  border-radius: var(--projects-radius);
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.project-card:hover {
  box-shadow: 0 6px 28px rgba(41, 69, 87, 0.07);
  border-color: rgba(41, 69, 87, 0.15);
}

.project-card:focus-within {
  outline: 2px solid var(--projects-primary);
  outline-offset: 2px;
}

.project-card__inner {
  padding: 1.75rem;
}

/* Card: Meta top */
.project-card__meta-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.project-card__meta-left {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.project-card__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--projects-radius-xs);
  background: rgba(41, 69, 87, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.project-card__icon i {
  font-size: 1rem;
  color: var(--projects-primary);
}

.project-card__meta-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.project-card__category {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--projects-primary);
  line-height: 1.2;
  margin: 0;
  padding: 0;
}

.project-card__client {
  font-size: 0.75rem;
  color: var(--projects-slate-light);
  line-height: 1.2;
  margin: 0.125rem 0 0 0;
  padding: 0;
}

.project-card__meta-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.project-card__year {
  font-size: 0.8125rem;
  color: var(--projects-slate-light);
}

/* Card: Title */
.project-card__title {
  font-family: 'Inter', sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--projects-primary);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 0.625rem;
}

.project-card__title a {
  color: inherit;
  text-decoration: none;
}

.project-card__title a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

/* Card: Summary */
.project-card__summary {
  font-size: 0.875rem;
  color: var(--projects-text-muted);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

/* Card: Highlights */
.project-card__highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 600px) {
  .project-card__highlights {
    grid-template-columns: 1fr;
  }
}

.project-card__highlight {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 0.75rem;
  background: var(--projects-bg);
  border-radius: var(--projects-radius-xs);
}

.project-card__highlight i {
  font-size: 0.75rem;
  color: var(--projects-primary);
  flex-shrink: 0;
}

.project-card__highlight span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--projects-accent);
}

/* Card: Tags */
.project-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  margin-bottom: 1.25rem;
}

/* Card: Footer */
.project-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.875rem 1rem;
  background: var(--projects-bg);
  border-radius: var(--projects-radius-sm);
  border: 1px solid var(--projects-border-light);
}

.project-card__outcome {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.project-card__outcome i {
  font-size: 0.8125rem;
  color: var(--projects-primary);
}

.project-card__outcome span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--projects-primary);
}

.project-card__view-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--projects-primary-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.project-card__view-link:hover {
  color: var(--projects-primary);
}

.project-card__view-link:focus-visible {
  outline: 2px solid var(--projects-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.project-card:hover .project-card__view-link {
  color: var(--projects-primary);
}

.project-card__view-link i {
  font-size: 0.8125rem;
  transition: transform 0.15s ease;
}

.project-card:hover .project-card__view-link i {
  transform: translateX(2px);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  /* gap + transition were previously inherited from shadcnblocks.css, and
     text-align from the Bootstrap bundle. Folded in here so this single rule
     reproduces the badge exactly as it rendered when three files stacked. */
  gap: 0.25rem;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1.25rem;
  text-align: center;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* Preserved from the Bootstrap bundle. */
.badge:empty {
  display: none;
}

.badge--primary {
  background: rgba(41, 69, 87, 0.05);
  color: var(--projects-primary);
  border: 1px solid rgba(41, 69, 87, 0.1);
}

.badge--active {
  background: rgba(41, 69, 87, 0.08);
  color: var(--projects-primary);
  border: 1px solid rgba(41, 69, 87, 0.2);
}

.badge--ghost {
  background: transparent;
  color: var(--projects-slate);
  border: 1px solid var(--projects-border);
}

/* Ranks below --primary: the case study is the second invitation, not the
   competing one. Outlined so it reads as secondary in both themes without
   needing a separate surface colour. */
/* ---------- Project Detail ---------- */
.project-detail {
  background: var(--projects-bg);
  min-height: 100vh;
}

.project-detail__container {
  max-width: 760px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}

.project-detail__header {
  margin-bottom: 2rem;
}

.project-detail__meta-top {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.project-detail__icon-wrap {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(41, 69, 87, 0.07);
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-detail__icon-wrap i {
  font-size: 1.25rem;
  color: var(--projects-primary);
}

.project-detail__badges {
  display: flex;
  gap: 0.375rem;
}

.project-detail__year {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--projects-slate-light);
}

.project-detail__title {
  /* §02 H1: clamp(28–36px), 700, lh 1.2, ls -0.02em */
  font-family: 'Inter', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--projects-text);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-bottom: 0.5rem;
}

.project-detail__client {
  font-size: 0.875rem;
  color: var(--projects-slate-light);
}

/* Meta, not a dashboard. This was a boxed grid of centred stat cells, which
   gave two small facts the visual weight of a metrics widget and read as
   template furniture. Now a quiet left-aligned row between hairlines, in the
   same eyebrow language as the section headings. */
.project-detail__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2.5rem;
  padding: 0.875rem 0;
  border-top: 1px solid var(--projects-border);
  border-bottom: 1px solid var(--projects-border);
  margin-bottom: 2.25rem;
}

.project-detail__stat {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.project-detail__stat-label {
  font-size: var(--ds-eyebrow-size, 0.6875rem);
  font-weight: var(--ds-eyebrow-weight, 700);
  text-transform: uppercase;
  letter-spacing: var(--ds-eyebrow-spacing, 0.1em);
  color: var(--projects-text-muted);
}

.project-detail__stat-value {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--projects-text);
}

.project-detail__section {
  margin-bottom: 1.75rem;
}

/* The canonical site eyebrow, from style-lean.css: .6875rem / 700 / .1em in
   brand. This heading previously ran at .75rem / 600 / .08em in muted grey
   with a decorative icon, which is why the detail pages read as a different
   product to the rest of the site. */
/* Same specificity story as .projects-band__label above. */
.project-detail h2.project-detail__section-heading {
  font-size: var(--ds-eyebrow-size, 0.6875rem);
  font-weight: var(--ds-eyebrow-weight, 700);
  text-transform: uppercase;
  letter-spacing: var(--ds-eyebrow-spacing, 0.1em);
  color: var(--projects-primary);
  margin-bottom: 0.875rem;
}

.project-detail__description {
  font-size: 0.875rem;
  color: var(--projects-text-muted);
  line-height: 1.75;
}

.project-detail__highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.project-detail__highlight {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.875rem;
  background: var(--projects-bg);
  border-radius: var(--projects-radius-xs);
  border: 1px solid var(--projects-border-light);
}

.project-detail__highlight i {
  font-size: 0.875rem;
  color: var(--projects-primary);
  flex-shrink: 0;
}

.project-detail__highlight span {
  font-size: 0.8125rem;
  color: var(--projects-text);
}

.project-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.project-detail__actions {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Hidden for JS filtering — !important needed to override article display */
.project-card[hidden] {
  display: none !important;
}

/* ---------- Logo images (card + detail) ---------- */
.project-card__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: calc(var(--projects-radius-xs) - 2px);
}

.project-detail__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: calc(0.75rem - 2px);
}

/* ==========================================
   Dark Mode — all AAA verified
   ========================================== */

/* Only the tokens that genuinely differ in dark. Brand, text, border and
   radius all resolve through --ds-*, which style-lean.css already redefines
   for this theme — restating them here is what let the two palettes drift. */
[data-theme="dark"] {
  /* Page and card swap which --ds-* surface they point at. */
  --projects-bg: var(--ds-surface);
  --projects-white: var(--ds-surface-raised);
  /* No --ds-* equivalent: a subtle divider lighter than the card, where the
     light theme uses a sunken tint darker than it. */
  --projects-border-light: #334155;
}

/* Sidebar */
[data-theme="dark"] .projects-sidebar__title {
  color: #f1f5f9;
}

/* Cards */
[data-theme="dark"] .project-card:hover {
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.3);
  border-color: #7cb8f7;
}

[data-theme="dark"] .project-card__icon {
  background: rgba(124, 184, 247, 0.08);
}

[data-theme="dark"] .project-card__title {
  color: #f1f5f9;
}

/* Badges */
[data-theme="dark"] .badge--primary {
  background: rgba(124, 184, 247, 0.08);
  border-color: rgba(124, 184, 247, 0.2);
}

[data-theme="dark"] .badge--active {
  background: rgba(124, 184, 247, 0.12);
  border-color: rgba(124, 184, 247, 0.3);
}

/* Buttons */
/* Detail page */
[data-theme="dark"] .project-detail__title {
  color: #f1f5f9;
}

[data-theme="dark"] .project-detail__icon-wrap {
  background: rgba(124, 184, 247, 0.1);
}

[data-theme="dark"] .project-detail__highlight {
  background: #1e293b;
  border-color: #334155;
}

/* Breadcrumbs */
/* Empty state */
/* ==========================================================================
   Proof shelf — bands, feature emphasis, dual links, proves line

   Everything below resolves through the existing --projects-* tokens, so the
   [data-theme="dark"] block above retints it without per-rule overrides.
   ========================================================================== */

/* ---------- Bands ----------
   The shelf is grouped rather than filtered: Client work leads, products
   follow. A band renders only when it has cards (see projects.php).
*/
.projects-band {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.projects-band + .projects-band {
  margin-top: 2.75rem;
}

.projects-band__head {
  border-top: 1px solid var(--projects-border);
  padding-top: 1.125rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
}

/* Scoped with the element to reach specificity 0,2,1. These labels are <h2>
   for the heading outline, which makes them targets of the global
   [data-theme="dark"] .main h2 { color: #f1f5f9 } rule (also 0,2,1). A bare
   class (0,1,0) loses to it and the eyebrow turns white in dark mode; matching
   its specificity lets this rule win on source order, since §43 is last. */
.projects-page h2.projects-band__label {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--projects-primary);
}

.projects-band__note {
  margin: 0;
  font-size: 0.875rem;
  color: var(--projects-text-muted);
}

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

/* ---------- Feature card ----------
   The card feed is a single column, so emphasis is carried by border and
   weight rather than width.
*/
.project-card--feature {
  border-color: var(--projects-primary);
  box-shadow: 0 2px 18px rgba(41, 69, 87, 0.06);
}

.project-card--feature .project-card__title {
  font-size: 1.4375rem;
}

/* ---------- "Proves" line ---------- */
.project-card__proves {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--projects-text);
}

.project-card__proves-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--projects-primary);
}

/* ---------- Footer links ----------
   Two invitations, ranked: open the live thing, or read how it was built.
*/
.project-card__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.125rem;
  justify-content: flex-end;
}

.project-card__view-link--sub {
  color: var(--projects-slate-light);
  font-weight: 400;
}

.project-card:hover .project-card__view-link--sub {
  color: var(--projects-text-muted);
}

@media (max-width: 560px) {
  .project-card__footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .project-card__links {
    justify-content: flex-start;
  }
}

/* ---------- Sidebar evidence line ----------
   Replaces the project counter.
*/
.projects-sidebar__evidence {
  margin: 1.5rem 0 1.75rem;
  padding-left: 0.875rem;
  border-left: 3px solid var(--projects-primary);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--projects-text);
}

/* ---------- Sidebar standards ----------
   The rail is sticky, so it accompanies the cards for the whole scroll. This
   block gives it something to say once the old filters and counters were
   removed: the standards the work is measured against, then how to check it.
*/
/* No divider rule here: the evidence line above already carries a left rule,
   and a second horizontal one in a 300px rail reads as clutter. Space does
   the separating. */
.projects-sidebar__standards {
  margin-bottom: 1.75rem;
}

.projects-sidebar__standards-heading {
  margin: 0 0 0.75rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--projects-text-muted);
}

.projects-sidebar__standards-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.projects-sidebar__note {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--projects-text-muted);
}

/* ==========================================================================
   44. European Accessibility Act (.eaa-*) — migrated from the plugin
   --------------------------------------------------------------------------
   Was 3 plugin stylesheets loaded per-page via eaaStyles(): brand.css (26KB,
   of which ZERO of its 74 selectors were used on these pages — it is a slide
   deck stylesheet), eaa.css and eaa-country.css. Only the latter two are
   real, and they are folded in below.

   brand.css also set `html, body { background:#f0eee9 }`, which made the EAA
   pages the only beige pages on the site and left <html> beige in dark mode.
   That rule is gone; the ground now comes from --ds-surface like everywhere.

   The plugin's palette names are kept as thin aliases onto --ds-* so the 250
   rules below did not have to be rewritten, and so style-lean stays the one
   source of truth. Scoped to .eaa rather than :root — both templates wrap
   their content in <div class="eaa eaa-page">.
   ========================================================================== */

.eaa {
  /* ── aliases onto the site tokens (were duplicated in brand.css) ── */
  --brand:            var(--ds-brand);
  --brand-hover:      var(--ds-brand-hover);
  --brand-light:      var(--ds-brand-light);
  --brand-blue:       #7cb8f7;
  --brand-blue-hover: #a5d4fd;
  --text-primary:     var(--ds-text-primary);
  --text-secondary:   var(--ds-text-secondary);
  --text-muted:       var(--ds-text-muted, var(--ds-text-secondary));
  --dk-text-secondary:#e2e8f0;
  --border-strong:    var(--ds-border-strong, var(--ds-border));
  --font-sans:        var(--ds-font-sans, 'Inter', system-ui, sans-serif);
  --font-mono:        var(--ds-font-mono, 'JetBrains Mono', monospace);
  --shadow-sm:        var(--ds-shadow-sm, 0 1px 2px rgba(15,23,42,.06));
  --shadow-md:        var(--ds-shadow-md, 0 4px 14px rgba(15,23,42,.08));

  /* ── EAA surfaces: follow the theme instead of hardcoded white ── */
  --eaa-ground:    var(--ds-surface);
  --eaa-ink:       var(--ds-text-primary);
  --eaa-rule:      var(--ds-border);
  --eaa-rule-soft: var(--ds-border-subtle, var(--ds-border));
  --eaa-card:      var(--ds-surface);
  --eaa-card-warm: var(--ds-surface-raised);

  /* Enforcement-posture scale — a single-hue lightness ramp so it stays
     distinguishable under colour-blindness. Deliberately fixed, not themed:
     the contrast ratios below are the reason it is accessible. */
  --tier-active:  #142f3c;  --tier-active-tx:  #ffffff;
  --tier-watch:   #56798d;  --tier-watch-tx:   #ffffff;
  --tier-inforce: #cdd9e2;  --tier-inforce-tx: #1d2b35;

  --basis-stat: #1f6b4f;  --basis-stat-bg: #e7f4ee;
  --basis-rep:  #8a5a14;  --basis-rep-bg:  #f6eddd;

  /* Page container matches the site canon (.container / .projects-layout).
     Body copy is unaffected — .eaa-body is capped by --measure, so the wider
     shell only affects grids, tables and the fines map. */
  --maxw: 1200px;
  --measure: 68ch;
}

/* ─────────────────────────────────────────────────────────────────────────
   eaa.css — European Accessibility Act landing page
   Joe Gullo · Kirby 5+ template family `eaa`
   Extends brand.css tokens and matches joegullo.com/about/site brand standards:
   Inter for all headings and body, JetBrains Mono for data, eyebrows and
   labels, white/slate surfaces, AAA focus indicators inherited from brand.
   ───────────────────────────────────────────────────────────────────────── */

/* ── Reset within the doc ──────────────────────────────────────────────── */
.eaa { box-sizing: border-box; }
.eaa *, .eaa *::before, .eaa *::after { box-sizing: inherit; }
/* Page wrapper (was body.eaa-body). Renamed from .eaa-body so the content-body
   component below (.eaa-body) no longer collides with the wrapper — otherwise
   `.eaa-body p` would match every paragraph on the page and override the
   component paragraph margins (lede, eyebrow, deck), collapsing the rhythm. */
.eaa-page {
  margin: 0;
  background: var(--eaa-ground);
  color: var(--eaa-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01","cv11";
}

.eaa a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.eaa a:hover { color: var(--brand-hover); }
.eaa :focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Skip link */
.eaa-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand);
  color: #fff;
  padding: 12px 18px;
  font: 600 14px/1 var(--font-sans);
  border-radius: 0 0 8px 0;
}
.eaa-skip:focus { left: 0; }

/* ── Layout shell ──────────────────────────────────────────────────────── */
.eaa-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; }

/* Two-column briefing shell: content + sticky contents rail.
   Uses the same token as .eaa-wrap so the shell and the full-width sections
   line up; it was hardcoded to the old 1080px and would have drifted the
   moment --maxw changed. */
.eaa-layout {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 188px;
  column-gap: 52px;
}
.eaa-main { min-width: 0; }
@media (max-width: 980px) {
  .eaa-layout { grid-template-columns: 1fr; padding: 0 24px; }
}

.eaa-section { padding: 64px 0; border-top: 1px solid var(--eaa-rule); scroll-margin-top: 24px; }
@media (max-width: 760px) { .eaa-section { padding: 48px 0; } }

/* ── Contents rail (sticky) ────────────────────────────────────────────── */
/* Card shell matching .sidebar-card in the article layout. */
.eaa-toc {
  position: sticky;
  top: 6rem;
  align-self: start;
  margin-top: 86px;
  padding: 1rem;
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
}
@media (max-width: 980px) { .eaa-toc { display: none; } }
/* Matches the article sidebar (.sidebar-title): Inter 1.15rem/600 in the
   primary text colour, not a mono uppercase micro-label. */
.eaa-toc-label {
  font: 600 1.15rem/1.3 var(--font-sans);
  letter-spacing: -0.01em;
  color: var(--ds-text-primary);
  margin: 0 0 8px;
}
.eaa-toc ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
/* Padded block links with a hover fill, as in the article TOC — instead of a
   hairline rule with hanging numbers. */
.eaa-toc a {
  display: block;
  padding: 0.5rem 0.5rem;
  border-radius: 4px;
  font: 500 0.85rem/1.4 var(--font-sans);
  color: var(--ds-text-primary);
  text-decoration: none;
  transition: color .12s, background .12s;
  /* Long single-word Dutch labels (e.g. "Toegankelijkheidsverklaring") have no
     space to wrap at and would overflow the narrow TOC card. Break + hyphenate;
     hyphens:auto uses proper break points because the /nl/ pages are lang="nl". */
  overflow-wrap: break-word;
  hyphens: auto;
}
.eaa-toc a:hover { color: var(--brand); background: var(--ds-surface-raised); }
.eaa-toc a[aria-current="true"] { color: var(--brand); background: var(--ds-surface-raised); font-weight: 600; }
.eaa-toc a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

/* ── Inline citation markers ───────────────────────────────────────────── */
.eaa-ref { font: 600 0.64em/1 var(--font-mono); vertical-align: super; margin-left: 1px; white-space: nowrap; }
.eaa-ref a { color: var(--brand); text-decoration: none; padding: 0 1px; border-radius: 2px; }
.eaa-ref a:hover { text-decoration: underline; text-underline-offset: 2px; }
.eaa-ref a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.eaa-section:first-of-type { border-top: 0; }

.eaa-eyebrow {
  font: 600 12px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--brand);
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0; /* neutralise the default <p> margin so the label hugs the H2 (8px via .eaa-h2 margin-top) */
}
.eaa-eyebrow .num {
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Section vertical rhythm: eyebrow → 8px → H2 → 20px → content (lede/body),
   16px between paragraphs. The eyebrow label hugs the heading; the heading is
   clearly separated from its body. */
.eaa-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 8px 0 0;
  color: var(--eaa-ink);
  text-wrap: balance;
}
.eaa-lede {
  font-size: clamp(16px, 1.5vw, 18.5px);
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: var(--measure);
  margin: 20px 0 0;
  text-wrap: pretty;
}
.eaa-body { margin-top: 20px; }
.eaa-body p { font-size: 16.5px; line-height: 1.68; color: var(--text-secondary); max-width: var(--measure); text-wrap: pretty; margin: 0 0 16px; }
.eaa-body p:last-child { margin-bottom: 0; }
.eaa-statement-cta { margin: 24px 0 0; }
.eaa-body p strong { color: var(--eaa-ink); font-weight: 600; }

/* ── Header / hero ─────────────────────────────────────────────────────── */
.eaa-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--eaa-rule);
}
.eaa-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4em;
  font: 700 18px/1 var(--font-sans);
  letter-spacing: -0.02em;
  color: var(--eaa-ink);
  text-decoration: none;
}
.eaa-wordmark .tld {
  font: 500 13px/1 var(--font-mono);
  color: var(--text-muted);
  letter-spacing: 0;
}
.eaa-topnav { display: flex; gap: 14px; align-items: center; }
.eaa-topnav a {
  font: 500 13.5px/1 var(--font-sans);
  color: var(--text-secondary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 6px;
  border-radius: 5px;
}
.eaa-topnav a:hover { color: var(--brand); }
.eaa-topnav .eaa-cta-sm {
  background: var(--brand);
  color: #fff;
  padding: 10px 16px;
  border-radius: 6px;
  font-weight: 600;
}
.eaa-topnav .eaa-cta-sm:hover { background: var(--brand-hover); color: #fff; }
@media (max-width: 720px) { .eaa-topnav .nav-link { display: none; } }

.eaa-hero { padding: 64px 0 48px; }
.eaa-hero-kicker {
  font: 600 12.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--brand);
}
/* Was clamp(38px, 6vw, 68px)/1.02 with a 16ch cap — 68px is ~1.9x the site's
   h1 canon (36px) and 31% larger than this plugin's own country pages, and the
   16ch cap forced it over five lines. Now matches .agencies-hero__title, the
   closest peer (a pillar landing page) and the base h1 scale. */
.eaa-hero h1 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 18px 0 0;
  text-wrap: balance;
}
.eaa-hero .eaa-hero-deck {
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 26px 0 0;
  max-width: 60ch;
  text-wrap: pretty;
}
.eaa-hero-actions { margin-top: 34px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.eaa-btn {
  /* Aligned to the canonical .btn (style-lean §-buttons): 8px radius, 16px
     type, 12px/24px padding, 8px gap, 2px border. Was 7px/15px/14px-22px/
     9px/1px — close enough to look like a mistake rather than a variant when
     an EAA page sat beside any other page. Colours already matched. */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font: 600 16px/1.25 var(--font-sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: background .14s, border-color .14s, color .14s;
}
/* `.eaa` prefix raises specificity above the generic `.eaa a` link colour
   (buttons are <a> elements), so the button text colours win. */
.eaa .eaa-btn-primary { background: var(--brand); color: #fff; }
.eaa .eaa-btn-primary:hover { background: var(--brand-hover); color: #fff; }
.eaa .eaa-btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--eaa-ink); }
.eaa .eaa-btn-ghost:hover { border-color: var(--brand); color: var(--brand); }
.eaa-btn .arrow { font-family: var(--font-mono); }

/* Hero fact strip */
.eaa-facts {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--eaa-rule);
  border: 1px solid var(--eaa-rule);
  border-radius: 12px;
  overflow: hidden;
}
.eaa-fact { background: var(--eaa-card-warm); padding: 22px 22px 24px; }
.eaa-fact .k {
  font: 600 11px/1.2 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.eaa-fact .v {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 27px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-top: 10px;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
.eaa-fact .s { font: 500 12.5px/1.4 var(--font-sans); color: var(--text-secondary); margin-top: 6px; }
@media (max-width: 860px) { .eaa-facts { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 460px) { .eaa-facts { grid-template-columns: 1fr; } }

/* ── Timeline ──────────────────────────────────────────────────────────── */
.eaa-timeline { margin-top: 40px; display: grid; gap: 0; }
.eaa-tl-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 28px;
  padding: 22px 0;
  border-top: 1px solid var(--eaa-rule-soft);
  align-items: start;
}
.eaa-tl-row:first-child { border-top: 0; }
.eaa-tl-date {
  font: 600 14px/1.3 var(--font-mono);
  color: var(--brand);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.eaa-tl-row[data-now="true"] .eaa-tl-date::after {
  content: "now";
  display: inline-block;
  margin-left: 8px;
  font: 700 9px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--brand);
  color: #fff;
  padding: 3px 5px;
  border-radius: 3px;
  vertical-align: middle;
}
.eaa-tl-body h3 { font: 600 17px/1.3 var(--font-sans); margin: 0; letter-spacing: -0.01em; }
.eaa-tl-body p { font-size: 15px; line-height: 1.55; color: var(--text-secondary); margin: 6px 0 0; max-width: 60ch; }
/* Grouped rows that share one date */
.eaa-tl-multi { display: grid; gap: 0; }
.eaa-tl-multi .tl-item + .tl-item { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--eaa-rule-soft); }
.eaa-tl-multi .tl-item h3 { font: 600 17px/1.3 var(--font-sans); margin: 0; letter-spacing: -0.01em; }
.eaa-tl-multi .tl-item p { font-size: 15px; line-height: 1.55; color: var(--text-secondary); margin: 6px 0 0; max-width: 60ch; }
@media (max-width: 640px) {
  .eaa-tl-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ── Cards / scope grids ───────────────────────────────────────────────── */
.eaa-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 40px; }
.eaa-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; margin-top: 36px; }
@media (max-width: 820px) { .eaa-grid-2, .eaa-grid-3 { grid-template-columns: 1fr; } }

.eaa-card {
  background: var(--eaa-card);
  border: 1px solid var(--eaa-rule);
  border-radius: 12px;
  padding: 26px 26px 28px;
}
.eaa-card h3 {
  font: 600 17px/1.25 var(--font-sans);
  letter-spacing: -0.01em;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eaa-card .tag {
  font: 600 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--brand);
  background: var(--brand-light);
  padding: 4px 7px;
  border-radius: 4px;
}
.eaa-card ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.eaa-card li {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-secondary);
  padding-left: 20px;
  position: relative;
}
.eaa-card li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 7px; height: 7px;
  border-radius: 2px;
  background: var(--brand-blue);
}
.eaa-card p { font-size: 14.5px; line-height: 1.55; color: var(--text-secondary); margin: 12px 0 0; }

/* Exemption callout */
.eaa-callout {
  margin-top: 22px;
  border: 1px solid var(--eaa-rule);
  border-left: 4px solid var(--brand);
  background: var(--eaa-card-warm);
  border-radius: 0 10px 10px 0;
  padding: 22px 24px;
}
.eaa-callout h3 { font: 600 16px/1.3 var(--font-sans); margin: 0 0 8px; }
.eaa-callout p { font-size: 14.5px; line-height: 1.6; color: var(--text-secondary); margin: 0; max-width: 64ch; }
.eaa-callout p + p { margin-top: 10px; }

/* ── Map (geo-grid cartogram) ──────────────────────────────────────────── */
.eaa-map-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.eaa-map-shell {
  margin-top: 38px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 900px) { .eaa-map-shell { grid-template-columns: 1fr; gap: 32px; } }

.eaa-cartogram {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-auto-rows: 1fr;
  gap: 6px;
  aspect-ratio: 9 / 8;
}
.eaa-tile-cell { display: flex; min-width: 0; }
.eaa-tile-cell > .eaa-tile { width: 100%; height: 100%; }
a.eaa-tile { text-decoration: none; cursor: pointer; }
.eaa-tile {
  position: relative;
  border-radius: 7px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px;
  border: 0;
  cursor: default;
  font-family: var(--font-mono);
  transition: transform .12s, box-shadow .12s;
}
.eaa-tile .code { font: 700 clamp(11px, 1.4vw, 15px)/1 var(--font-mono); letter-spacing: 0.02em; }
/* Tier is also carried by shape, not colour alone.
   The tiles render only a country code, so hue was the sole visual channel —
   fine for screen readers (the tier is in each tile's aria-label) but not for
   colour-blind sighted users. A three-step lightness ramp cannot rescue this
   on a dark ground: holding the brand blue for "active" would require the
   "inforce" step to be darker than the page itself. So the distinction is
   made structurally instead, matching the rule the Sluip and Hour Terms case
   studies state — status is never signalled by colour alone.
   filled = active · half = watch · hollow = in force.
   currentColor inherits the tier's own label colour, which is already
   contrast-checked against its background. */
.eaa-tile .dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  box-sizing: border-box;
  flex: none;
}
.eaa-tile[data-tier="active"]  .dot { background: currentColor; }
.eaa-tile[data-tier="watch"]   .dot { background: linear-gradient(to right, currentColor 50%, transparent 50%); }
.eaa-tile[data-tier="inforce"] .dot { background: transparent; }
.eaa-tile[data-tier="active"]  { background: var(--tier-active);  color: var(--tier-active-tx); }
.eaa-tile[data-tier="watch"]   { background: var(--tier-watch);   color: var(--tier-watch-tx); }
.eaa-tile[data-tier="inforce"] { background: var(--tier-inforce); color: var(--tier-inforce-tx); }
/* Only linked tiles (every member state) get the clickable affordances:
   pointer cursor, lift, and a corner ↗ on hover/focus. */
a.eaa-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); z-index: 2; }
a.eaa-tile:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; z-index: 3; }
a.eaa-tile::after {
  content: "\2197"; /* ↗ */
  position: absolute; top: 3px; right: 5px;
  font-size: 10px; line-height: 1; opacity: 0; transition: opacity .12s;
}
a.eaa-tile:hover::after, a.eaa-tile:focus-visible::after { opacity: 0.9; }

/* "Select any country…" instruction above the map */
.eaa-map-hint {
  display: flex; align-items: center; gap: 8px;
  margin: 16px 0 20px;
  font: 600 13px/1.4 var(--font-mono);
  letter-spacing: 0.01em;
  color: var(--brand);
}
.eaa-map-hint span { font-size: 16px; line-height: 1; }

.eaa-legend { display: grid; gap: 14px; }
.eaa-legend-item { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.eaa-legend-swatch { width: 22px; height: 22px; border-radius: 5px; margin-top: 2px; }
.eaa-legend-swatch[data-tier="active"]  { background: var(--tier-active); }
.eaa-legend-swatch[data-tier="watch"]   { background: var(--tier-watch); }
.eaa-legend-swatch[data-tier="inforce"] { background: var(--tier-inforce); border: 1px solid var(--eaa-rule); }
/* The legend repeats the tile's shape cue so the mapping is learnable. */
.eaa-legend-swatch { position: relative; }
.eaa-legend-swatch::after {
  content: "";
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 8px; height: 8px; border-radius: 50%;
  border: 1.5px solid var(--tier-active-tx); box-sizing: border-box;
}
.eaa-legend-swatch[data-tier="active"]::after  { border-color: var(--tier-active-tx);  background: var(--tier-active-tx); }
.eaa-legend-swatch[data-tier="watch"]::after   { border-color: var(--tier-watch-tx);   background: linear-gradient(to right, var(--tier-watch-tx) 50%, transparent 50%); }
.eaa-legend-swatch[data-tier="inforce"]::after { border-color: var(--tier-inforce-tx); background: transparent; }
.eaa-legend-item .lt { font: 600 14px/1.3 var(--font-sans); color: var(--eaa-ink); }
.eaa-legend-item .ld { font: 500 13px/1.45 var(--font-sans); color: var(--text-secondary); margin-top: 3px; }
.eaa-legend-item .lc { font: 600 11px/1 var(--font-mono); color: var(--text-muted); margin-top: 6px; letter-spacing: 0.04em; }

.eaa-map-note {
  margin-top: 26px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 64ch;
  border-top: 1px solid var(--eaa-rule-soft);
  padding-top: 18px;
}

/* ── Country index (A–Z browse) ────────────────────────────────────────── */
.eaa-cindex { margin-top: 32px; }
.eaa-cindex-label {
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.eaa-cindex-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.eaa-cindex-list a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--eaa-rule);
  border-radius: 8px;
  background: var(--eaa-card);
  font: 600 13px/1.2 var(--font-sans);
  color: var(--eaa-ink);
  text-decoration: none;
  letter-spacing: -0.005em;
}
.eaa-cindex-list a .cc { font: 700 11px/1 var(--font-mono); color: var(--brand); letter-spacing: 0.04em; }
.eaa-cindex-list a:hover { border-color: var(--brand); background: var(--brand-light); }
.eaa-cindex-list a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }

/* ── Country flags (decorative SVGs via flag-icons; name stays the label) ─ */
.fi.eaa-flag-sm {
  display: inline-block;
  width: 21px;
  height: 15px;
  border-radius: 3px;
  border: 1px solid var(--eaa-rule);
  background-size: cover;
  background-position: center;
  flex: 0 0 auto;
  vertical-align: middle;
}
.fi.eaa-flag-sm::before { content: none; }
.eaa-table .c-country .fi.eaa-flag-sm { margin-right: 9px; }

/* Country names in the fines table link to their detail pages */
.eaa-table .c-country a { color: var(--brand); text-decoration: none; }
.eaa-table .c-country a:hover { text-decoration: underline; text-underline-offset: 3px; }
.eaa-table .c-country a:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

/* ── Fines table ───────────────────────────────────────────────────────── */
/* Fits the content column at any width — no horizontal scroll. Fixed layout
   distributes the four columns and lets long values wrap. */
.eaa-table-wrap { margin-top: 36px; overflow: hidden; border: 1px solid var(--eaa-rule); border-radius: 12px; background: var(--eaa-card); }
table.eaa-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.eaa-table th, .eaa-table td { overflow-wrap: anywhere; }
.eaa-table th:nth-child(1) { width: 32%; }
.eaa-table th:nth-child(2) { width: 30%; }
.eaa-table th:nth-child(3) { width: 22%; }
.eaa-table th:nth-child(4) { width: 16%; }
.eaa-table caption { text-align: left; padding: 16px 20px; font: 500 13px/1.5 var(--font-sans); color: var(--text-muted); border-bottom: 1px solid var(--eaa-rule-soft); }
.eaa-table th, .eaa-table td { text-align: left; padding: 14px 18px; vertical-align: top; }
.eaa-table thead th {
  font: 600 11px/1.2 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--eaa-rule);
  background: var(--eaa-card-warm);
}
.eaa-table tbody tr { border-top: 1px solid var(--eaa-rule-soft); }
.eaa-table tbody tr:first-child { border-top: 0; }
.eaa-table .c-country { font: 600 15px/1.3 var(--font-sans); color: var(--eaa-ink); }
.eaa-table .c-country .law { display: block; font: 500 11.5px/1.3 var(--font-mono); color: var(--text-muted); margin-top: 3px; letter-spacing: 0; }
.eaa-table .c-max { font: 600 14.5px/1.4 var(--font-sans); color: var(--eaa-ink); font-variant-numeric: tabular-nums; }
.eaa-table .c-auth { font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); }
.eaa-basis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 10.5px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.eaa-basis[data-b="stat"] { color: var(--basis-stat); background: var(--basis-stat-bg); }
.eaa-basis[data-b="rep"]  { color: var(--basis-rep);  background: var(--basis-rep-bg); }
.eaa-basis::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.eaa-table-foot { font-size: 13.5px; line-height: 1.6; color: var(--text-muted); padding: 16px 20px; border-top: 1px solid var(--eaa-rule); max-width: none; }
@media (max-width: 600px) {
  .eaa-table th, .eaa-table td { padding: 10px 8px; }
  .eaa-table .c-country { font-size: 13px; }
  .eaa-table .c-max { font-size: 12.5px; }
  .eaa-table .c-auth, .eaa-table thead th { font-size: 10.5px; }
  .eaa-table .c-country .law { font-size: 10.5px; }
  /* Drop the pill's decorative dot on small screens (status is already in the
     label text, so this stays colour-blind-safe) and let it shrink to fit. */
  .eaa-basis { font-size: 9px; padding: 4px 6px; letter-spacing: 0.02em; gap: 0; }
  .eaa-basis::before { display: none; }
}

/* Enforcement reality banner */
.eaa-reality {
  margin-top: 28px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  background: var(--basis-rep-bg);
  border: 1px solid #e6d6b8;
  border-radius: 10px;
  padding: 18px 22px;
}
.eaa-reality .badge {
  font: 700 10px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--basis-rep);
  background: #fff;
  border: 1px solid #e6d6b8;
  padding: 6px 8px;
  border-radius: 5px;
  white-space: nowrap;
}
.eaa-reality p { font-size: 14px; line-height: 1.6; color: #6b4e15; margin: 0; max-width: 72ch; }
.eaa-reality p strong { color: #533c0f; }

/* ── Steps / next ──────────────────────────────────────────────────────── */
.eaa-steps { margin-top: 36px; display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; counter-reset: step; }
@media (max-width: 720px) { .eaa-steps { grid-template-columns: 1fr; } }
.eaa-step {
  background: var(--eaa-card);
  border: 1px solid var(--eaa-rule);
  border-radius: 12px;
  padding: 24px;
  position: relative;
}
.eaa-step .n {
  font: 600 13px/1 var(--font-mono);
  color: var(--brand);
  background: var(--brand-light);
  width: 30px; height: 30px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.eaa-step h3 { font: 600 16.5px/1.3 var(--font-sans); margin: 14px 0 0; letter-spacing: -0.01em; }
.eaa-step p { font-size: 14px; line-height: 1.55; color: var(--text-secondary); margin: 8px 0 0; }

/* ── CTA band ──────────────────────────────────────────────────────────── */
.eaa-cta-band {
  margin: 0;
  background: var(--brand);
  color: #fff;
  border-radius: 16px;
  padding: 56px 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 760px) { .eaa-cta-band { padding: 40px 28px; } }
.eaa-cta-band h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  color: #fff;
  text-wrap: balance;
}
.eaa-cta-band p { color: var(--dk-text-secondary); font-size: 16px; line-height: 1.55; margin: 14px 0 0; max-width: 56ch; }
.eaa-cta-band .eaa-btn-primary { background: #fff; color: var(--brand); }
.eaa-cta-band .eaa-btn-primary:hover { background: var(--brand-light); color: var(--brand); }
.eaa-cta-band .eaa-btn-ghost { border-color: rgba(255,255,255,0.4); color: #fff; }
.eaa-cta-band .eaa-btn-ghost:hover { border-color: #fff; color: #fff; }
.eaa-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Sources ───────────────────────────────────────────────────────────── */
.eaa-sources { margin-top: 32px; display: grid; gap: 2px; }
.eaa-source {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--eaa-rule-soft);
  align-items: baseline;
}
.eaa-source:first-child { border-top: 0; }
.eaa-source { scroll-margin-top: 24px; transition: background .3s ease; border-radius: 8px; }
.eaa-source:target { background: var(--brand-light); box-shadow: 0 0 0 8px var(--brand-light); }
.eaa-source:target .st { color: var(--brand); }
.eaa-source .sn { font: 600 12px/1.4 var(--font-mono); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.eaa-source .st { font: 600 14.5px/1.4 var(--font-sans); color: var(--eaa-ink); }
.eaa-source .sd { font: 500 13px/1.5 var(--font-sans); color: var(--text-secondary); margin-top: 3px; }
.eaa-source a { font: 500 12.5px/1.4 var(--font-mono); word-break: break-all; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.eaa-footer { border-top: 1px solid var(--eaa-rule); padding: 40px 0 64px; }
.eaa-footer p { font-size: 13px; line-height: 1.6; color: var(--text-muted); max-width: 78ch; margin: 0; }
.eaa-footer p + p { margin-top: 10px; }
.eaa-footer .updated {
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 18px;
  display: inline-block;
}

/* Visually-hidden (for table captions / sr labels) */
.eaa-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Print ─────────────────────────────────────────────────────────────── */
/* ── Dark mode ─────────────────────────────────────────────────────────────
   The site sets data-theme="dark" on <html> (cookie jg_theme). Re-point the
   EAA tokens to the established dark palette so every token-based surface,
   border, text and badge flips automatically; the few hard-coded components
   are handled explicitly below. Brand dark palette per joegullo.com/about/site:
   headings #f1f5f9, body #e2e8f0/#cbd5e1, muted #a8b5c4, links #7cb8f7,
   dark surface #0f172a. */
[data-theme="dark"] .eaa {
  --eaa-ground: #0f172a;
  --eaa-ink: #f1f5f9;
  --eaa-rule: #334155;
  --eaa-rule-soft: #28384a;
  --eaa-card: #1e293b;
  --eaa-card-warm: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --text-muted: #a8b5c4; /* established brand dark-muted — 7:1 AAA on cards/ground */
  --border-strong: #475569;
  /* Remap the brand accent to the dark-mode brand blue so every --brand text /
     border / focus accent (kicker, citations, TOC, table links, eyebrows…)
     becomes legible on the dark ground. The few places that use --brand as a
     solid background (primary button, CTA band, timeline “now” badge) are
     pinned explicitly below so they stay high-contrast. */
  --brand: var(--brand-blue);
  --brand-hover: var(--brand-blue-hover);
  --brand-light: rgba(124, 184, 247, 0.16);
  /* Tier ramp re-tuned for a dark ground (light→mid→dark blue); a tile border
     guarantees delineation since adjacent fills sit closer in lightness. */
  --tier-active: #7cb8f7;  --tier-active-tx: #0b1b2b;
  /* #4f80a0 gave white label text only 4.26:1 — below AA for the 11px badge.
     Darkened to #4a7899 (4.73:1) while keeping >=3:1 from the neighbouring
     tiers, so the lightness ramp still reads under colour-blindness. */
  --tier-watch: #4a7899;   --tier-watch-tx: #ffffff;
  --tier-inforce: #34485e; --tier-inforce-tx: #cbd5e1;
  --basis-stat: #6ee7b7;   --basis-stat-bg: #102a1e;
  --basis-rep: #e3b667;    --basis-rep-bg: #2a2410;
}
[data-theme="dark"] .eaa a { color: var(--brand-blue); }
[data-theme="dark"] .eaa a:hover { color: var(--brand-blue-hover); }
[data-theme="dark"] .eaa-eyebrow,
[data-theme="dark"] .eaa-map-hint { color: var(--brand-blue); }
[data-theme="dark"] .eaa-step .n { color: var(--brand-blue); background: rgba(124,184,247,0.16); }
[data-theme="dark"] .eaa .eaa-btn-primary { background: var(--brand-blue); color: #0b1b2b; }
[data-theme="dark"] .eaa .eaa-btn-primary:hover { background: var(--brand-blue-hover); color: #0b1b2b; }
[data-theme="dark"] .eaa-tile { border: 1px solid #3b4f66; }
/* Tiles are <a>, so the dark link colour above would override their labels —
   restore the per-tier label colour with higher specificity. */
[data-theme="dark"] .eaa-tile[data-tier="active"]  { color: var(--tier-active-tx); }
[data-theme="dark"] .eaa-tile[data-tier="watch"]   { color: var(--tier-watch-tx); }
[data-theme="dark"] .eaa-tile[data-tier="inforce"] { color: var(--tier-inforce-tx); }
[data-theme="dark"] .eaa-callout { border-left-color: var(--brand-blue); }
[data-theme="dark"] .eaa-reality { border-color: #5a4a1f; }
[data-theme="dark"] .eaa-reality .badge { background: #1e293b; border-color: #5a4a1f; }
[data-theme="dark"] .eaa-reality p { color: #e8d3a0; }
[data-theme="dark"] .eaa-reality p strong { color: #f3e4c2; }
/* Keep the CTA band a solid brand-navy panel with a white button (literals,
   since --brand is remapped to blue in dark). */
[data-theme="dark"] .eaa-cta-band { background: #294557; }
[data-theme="dark"] .eaa-cta-band .eaa-btn-primary { background: #fff; color: #294557; }
[data-theme="dark"] .eaa-cta-band .eaa-btn-primary:hover { background: #dce5ec; color: #294557; }
/* Timeline “now” badge: dark text on the (now light-blue) brand chip. */
[data-theme="dark"] .eaa-tl-row[data-now="true"] .eaa-tl-date::after { color: #0b1b2b; }

@media print {
  .eaa-page { background: #fff; }
  .eaa-topnav, .eaa-skip, .eaa-cta-band .eaa-cta-actions { display: none; }
  .eaa-section { padding: 28px 0; border-color: #ccc; break-inside: avoid; }
  .eaa-tile { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .eaa-card, .eaa-step, .eaa-table-wrap { break-inside: avoid; }
  a { color: #000; }
  .eaa-source a::after, .eaa-body a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}

@media (prefers-reduced-motion: reduce) {
  .eaa *, .eaa *::before, .eaa *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ── per-country detail pages ── */
/* ─────────────────────────────────────────────────────────────────────────
   eaa-country.css — per-country EAA detail page
   Joe Gullo · Kirby 5+ template `eaa-country`
   Loads after brand.css + eaa.css; reuses their tokens and components.
   ───────────────────────────────────────────────────────────────────────── */

.eaa-cwrap { max-width: 860px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 560px) { .eaa-cwrap { padding: 0 24px; } }

.eaa-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 600 12.5px/1 var(--font-mono);
  letter-spacing: 0.02em;
  color: var(--brand);
  text-decoration: none;
  padding: 22px 0 0;
}
.eaa-back:hover { text-decoration: underline; text-underline-offset: 3px; }
.eaa-back:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 3px; }

.eaa-chero { padding: 28px 0 44px; }
.eaa-chead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.eaa-ccode {
  font: 700 20px/1 var(--font-mono);
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--brand);
  padding: 11px 13px;
  border-radius: 8px;
}
.fi.eaa-flag-hero {
  display: inline-block;
  width: 56px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--eaa-rule);
  box-shadow: var(--shadow-sm);
  background-size: cover;
  background-position: center;
  vertical-align: middle;
}
.fi.eaa-flag-hero::before { content: none; }
.eaa-tierbadge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 9px 13px;
  border-radius: 999px;
}
.eaa-tierbadge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
/* Use the paired *-tx token, not a hardcoded #fff. The tiles already do this;
   the badge did not, so in dark mode (where --tier-active becomes #7cb8f7)
   it rendered white-on-light-blue at 2.09:1 — a WCAG AA failure. */
.eaa-tierbadge[data-tier="active"]  { color: var(--tier-active-tx); background: var(--tier-active); }
.eaa-tierbadge[data-tier="watch"]   { color: var(--tier-watch-tx); background: var(--tier-watch); }
.eaa-tierbadge[data-tier="inforce"] { color: var(--tier-inforce-tx); background: var(--tier-inforce); }

.eaa-ctitle {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 36px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 22px 0 0;
  text-wrap: balance;
}
.eaa-csummary {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 16px 0 0;
  max-width: 62ch;
  text-wrap: pretty;
}

/* At-a-glance grid */
.eaa-glance {
  margin-top: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--eaa-rule);
  border: 1px solid var(--eaa-rule);
  border-radius: 12px;
  overflow: hidden;
}
@media (max-width: 560px) { .eaa-glance { grid-template-columns: 1fr; } }
.eaa-glance .g { background: var(--eaa-card-warm); padding: 20px 22px; }
.eaa-glance .gk {
  font: 600 11px/1 var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}
.eaa-glance .gv { font: 600 16.5px/1.4 var(--font-sans); color: var(--eaa-ink); margin-top: 9px; letter-spacing: -0.005em; }
.eaa-glance .gv .sub { display: block; font: 500 13px/1.45 var(--font-sans); color: var(--text-secondary); margin-top: 5px; letter-spacing: 0; }
.eaa-glance .gv .eaa-basis { vertical-align: middle; }

.eaa-csection { padding: 48px 0; border-top: 1px solid var(--eaa-rule); }
.eaa-csection .eaa-h2 { font-size: clamp(22px, 2.6vw, 30px); }
.eaa-csection .eaa-body p { margin-top: 16px; }
.eaa-csection .eaa-body p:first-child { margin-top: 16px; }
.eaa-csource { margin-top: 16px; }

/* Prev / next country nav */
.eaa-cnav {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 40px 0 8px;
  border-top: 1px solid var(--eaa-rule);
}
.eaa-cnav a {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  font: 600 14px/1.3 var(--font-sans);
  color: var(--brand);
  text-decoration: none;
  max-width: 45%;
}
.eaa-cnav a .lab { font: 600 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); }
.eaa-cnav a:last-child { text-align: right; }
.eaa-cnav a:hover { color: var(--brand-hover); text-decoration: underline; text-underline-offset: 3px; }
.eaa-cnav a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 3px; }

/* ── Dark mode ── (site sets data-theme="dark" on <html>) ──────────────────
   These country-page elements use --brand (deep navy) for text, which is too
   low-contrast on the dark ground — switch them to the brand blue. Surfaces,
   borders, badges and the tier ramp flip via the tokens in eaa.css. */
[data-theme="dark"] .eaa-back,
[data-theme="dark"] .eaa-cnav a { color: var(--brand-blue); }
[data-theme="dark"] .eaa-ccode { background: #1e293b; color: var(--text-primary); }


/* ==========================================================================
   45. Resources (.resource-* / .tool-* / .quiz-*) — folded in from
       assets/css/resources.css
   --------------------------------------------------------------------------
   Was a separate render-blocking-deferred stylesheet loaded on every non-home
   page. It declared 22 tokens under GENERIC names (--text-muted, --border, --bg …) at :root, which collided with style-lean's tokens of the same name;
   because it loaded last it won, and .resource-item-ext ended up resolving to
   the dark-mode muted value in both themes — 2.09:1 on the light ground, under the 3:1 WCAG 1.4.11 needs for a non-text indicator.

   The tokens are namespaced --rs-* rather than aliased onto --ds-*: several
   are not what their name suggests across themes (--rs-navy is the brand in
   light but a dark *surface* in dark), so aliasing would have re-coloured
   them. Namespacing removes the collision with no change to any resolved
   value.

   Its duplicate .btn / .btn-primary rules are dropped — style-lean owns the
   canonical button. Those set 14px type and no border, so buttons on resource
   pages silently rendered smaller than everywhere else.
   ========================================================================== */

/**
 * resources.css — WCAG AAA Compliant Stylesheet
 * For use with site/templates/resources.php
 *
 * ═══════════════════════════════════════════════════
 * COLOR CONTRAST REFERENCE (all verified AAA)
 * ─────────────────────────────────────────────────
 * --rs-text (#232323) on --rs-bg (#fff)               → 15.9:1  ✓ AAA
 * --rs-text-secondary (#334155) on --rs-bg (#fff)      →  9.7:1  ✓ AAA
 * --rs-text-muted (#536379) on --rs-bg (#fff)          →  7.1:1  ✓ AAA
 * --rs-text-muted (#536379) on --rs-bg-muted (#f8fafc) →  6.8:1  ✓ AAA large
 * --rs-blue-link (#294557) on --rs-bg (#fff)           →  7.6:1  ✓ AAA
 * --rs-text-on-dark (#fff) on --rs-navy (#294557)      → 10.1:1  ✓ AAA
 * --rs-text-on-dark-sub (#e2e8f0) on --rs-navy         →  8.2:1  ✓ AAA
 * Icon #1e3a8a on #dbeafe                        →  9.2:1  ✓ AAA
 * Icon #14532d on #dcfce7                        → 10.7:1  ✓ AAA
 * Icon #581c87 on #f3e8ff                        →  9.3:1  ✓ AAA
 * ═══════════════════════════════════════════════════
 */

:root{
  /* ── Brand ── sourced from the global token layer (style-lean.css);
     /about/site is the visual source of truth. Dark values are set in
     the [data-theme="dark"] block below, so rendering is unchanged. */
  --rs-navy: var(--ds-brand, #294557);
  /* Brand hover — derives from the central design-system token so there's a
     single source of truth (only consumer is .btn-primary:hover). */
  --rs-navy-dark: var(--ds-brand-hover, #1e3444);
  --rs-blue-link: var(--ds-link, #294557);
  --rs-blue-focus: var(--ds-border-focus, #294557);
  --rs-green-badge: #15803d;

  /* ── Surfaces ── */
  --rs-bg: var(--ds-surface, #ffffff);
  --rs-bg-muted: var(--ds-surface-raised, #f8fafc);
  --rs-bg-card: var(--ds-surface, #ffffff);
  --rs-border: #d1d9e2;
  --rs-border-hover: #94a3b8;

  /* ── Text — all AAA verified ── */
  --rs-text: var(--ds-text-primary, #232323);
  --rs-text-secondary: #334155;
  --rs-text-muted: #536379;
  --rs-text-on-dark: var(--ds-text-on-brand, #ffffff);
  --rs-text-on-dark-sub: #e2e8f0;

  /* ── Shape ── */
  --rs-radius-sm: 8px;
  --rs-radius: 12px;
  --rs-radius-lg: 16px;
  --rs-radius-xl: 20px;
  --rs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --rs-shadow-md: 0 4px 8px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);

  /* ── Motion ── */
  --rs-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}


/* ════════════════════════════════════════════
   FOCUS — SC 2.4.7 (AA) + 2.4.13 (AAA)
   3px offset, high-contrast blue ring
   ════════════════════════════════════════════ */
.resources-page :focus-visible{
  outline: 3px solid var(--rs-blue-focus);
  outline-offset: 3px;
  border-radius: 4px;
}
.resources-page :focus:not(:focus-visible){
  outline: none;
}


/* ════════════════════════════════════════════
   REDUCED MOTION — SC 2.3.3 (AAA)
   ════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
  .resources-page *,
  .resources-page *::before,
  .resources-page *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ════════════════════════════════════════════
   HIGH CONTRAST — SC 1.4.6 enhanced
   ════════════════════════════════════════════ */
@media (prefers-contrast: more){
  :root {
    --rs-border: #475569;
    --rs-border-hover: #1e293b;
    --rs-bg-muted: #e2e8f0;
    --rs-text-muted: #334155;
    --rs-shadow-sm: none;
    --rs-shadow-md: none;
  }
  .resources-page .tool-card, .resources-page .resource-cat, .resources-page .quiz-banner{
    border-width: 2px;
  }
}


/* ════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════ */
.resources-page .hero{
  padding: 64px 24px 48px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.resources-page .hero h1{
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
  margin-bottom: 12px;
  color: var(--rs-text);
}
.resources-page .hero p{
  font-size: 16px;
  color: var(--rs-text-secondary);
  line-height: 1.65;
  max-width: 480px;
  margin: 0 auto;
}


/* ════════════════════════════════════════════
   SECTIONS
   ════════════════════════════════════════════ */
.resources-page .section{
  padding: 0 24px 56px;
  max-width: 720px;
  margin: 0 auto;
}
.resources-page .section-label{
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rs-navy);
  margin-bottom: 16px;
  display: block;
}
.resources-page .section-heading{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
  margin-bottom: 6px;
  color: var(--rs-text);
}
.resources-page .section-desc{
  font-size: 15px;
  color: var(--rs-text-secondary);
  line-height: 1.65;
  margin-bottom: 24px;
}


/* ════════════════════════════════════════════
   TOOL CARDS
   ════════════════════════════════════════════ */
.resources-page .tools-grid{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.resources-page .tool-card{
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  min-height: 44px;
  background: var(--rs-bg-card);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-lg);
  transition: box-shadow var(--rs-transition), border-color var(--rs-transition);
  color: inherit;
  text-decoration: none;
}
.resources-page .tool-card:hover{
  border-color: var(--rs-border-hover);
  box-shadow: var(--rs-shadow-md);
}
.resources-page .tool-card:focus-visible{
  outline: 3px solid var(--rs-blue-focus);
  outline-offset: 2px;
  border-radius: var(--rs-radius-lg);
}
.resources-page .tool-card-icon{
  width: 48px;
  height: 48px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rs-radius);
  font-size: 22px;
}
.resources-page .icon-blue{ background: #dbeafe; color: #1e3a8a; }
.resources-page .icon-green{ background: #dcfce7; color: #14532d; }
.resources-page .icon-navy{ background: #e2e8f0; color: #0f172a; }
.resources-page .icon-purple{ background: #f3e8ff; color: #581c87; }

.resources-page .tool-card-body{
  flex: 1;
  min-width: 0;
}
.resources-page .tool-card-body h3{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
  color: var(--rs-text);
}
.resources-page .tool-card-body p{
  font-size: 14px;
  color: var(--rs-text-secondary);
  line-height: 1.55;
}
.resources-page .tool-card-arrow{
  color: var(--rs-text-muted);
  font-size: 18px;
  transition: transform var(--rs-transition), color var(--rs-transition);
  flex-shrink: 0;
}
.resources-page .tool-card-arrow i{ display: block; }
.resources-page .tool-card:hover .tool-card-arrow{
  color: var(--rs-blue-link);
  transform: translateX(3px);
}


/* ════════════════════════════════════════════
   QUIZ BANNER
   ════════════════════════════════════════════ */
.resources-page .quiz-banner{
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-xl);
  overflow: hidden;
  margin-top: 32px;
}
.resources-page .quiz-image{
  width: 100%;
  aspect-ratio: 16 / 8;
  overflow: hidden;
}
.resources-page .quiz-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.resources-page .quiz-content{
  padding: 28px 24px 24px;
}
.resources-page .quiz-content .section-label{
  margin-bottom: 10px;
}
.resources-page .quiz-content h2{
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.3;
  margin-bottom: 8px;
  color: var(--rs-text);
}
.resources-page .quiz-content p{
  font-size: 15px;
  color: var(--rs-text-secondary);
  line-height: 1.65;
  margin-bottom: 20px;
}


/* ════════════════════════════════════════════
   BUTTONS — 44px min target (SC 2.5.5 AAA)
   ════════════════════════════════════════════ */
.resources-page .btn i[aria-hidden]{
  font-size: 16px;
}


/* ════════════════════════════════════════════
   RESOURCE CATEGORIES
   ════════════════════════════════════════════ */
.resources-page .resource-categories{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.resources-page .resource-cat{
  background: var(--rs-bg-card);
  border: 1px solid var(--rs-border);
  border-radius: var(--rs-radius-lg);
  padding: 24px;
  transition: box-shadow var(--rs-transition);
}
.resources-page .resource-cat:hover{
  box-shadow: var(--rs-shadow-sm);
}
.resources-page .resource-cat-header{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.resources-page .resource-cat-icon{
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--rs-radius);
  font-size: 20px;
  flex-shrink: 0;
}
.resources-page .rc-blue{ background: #dbeafe; color: #1e3a8a; }
.resources-page .rc-purple{ background: #f3e8ff; color: #581c87; }
.resources-page .rc-green{ background: #dcfce7; color: #14532d; }
.resources-page .rc-navy{ background: #e2e8f0; color: #0f172a; }

.resources-page .resource-cat-header h3{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--rs-text);
  line-height: 1.3;
  margin: 0;
  padding: 0;
}
.resources-page .resource-list{
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.resources-page .resource-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--rs-radius-sm);
  transition: background var(--rs-transition);
  color: inherit;
  text-decoration: none;
}
.resources-page .resource-item:hover{
  background: var(--rs-bg-muted);
}
.resources-page .resource-item:focus-visible{
  outline: 3px solid var(--rs-blue-focus);
  outline-offset: 1px;
}
.resources-page .resource-item-icon{
  width: 32px;
  height: 32px;
  min-width: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rs-bg-muted);
  border-radius: var(--rs-radius-sm);
  color: var(--rs-text-muted);
  font-size: 15px;
  transition: background var(--rs-transition), color var(--rs-transition);
}
.resources-page .resource-item:hover .resource-item-icon{
  background: #dbeafe;
  color: #1e3a8a;
}
.resources-page .resource-item-body{
  flex: 1;
  min-width: 0;
}
.resources-page .resource-item-name{
  font-size: 14px;
  font-weight: 600;
  color: var(--rs-text);
  display: block;
  line-height: 1.4;
}
.resources-page .resource-item-desc{
  font-size: 13px;
  color: var(--rs-text-muted);
  line-height: 1.45;
}
.resources-page .resource-item-ext{
  color: var(--rs-text-muted);
  font-size: 16px;
  transition: color var(--rs-transition), transform var(--rs-transition);
  flex-shrink: 0;
  width: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.resources-page .resource-item:hover .resource-item-ext{
  color: var(--rs-blue-link);
  transform: translateX(2px);
}


/* ════════════════════════════════════════════
   CTA BANNER (dark background)
   ════════════════════════════════════════════ */
.resources-page .cta-banner{
  background: var(--rs-navy);
  color: var(--rs-text-on-dark);
  border-radius: var(--rs-radius-xl);
  padding: 40px 32px;
  text-align: center;
  margin-top: 8px;
}
.resources-page .cta-banner h2{
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}
.resources-page .cta-banner p{
  font-size: 15px;
  color: var(--rs-text-on-dark-sub);
  line-height: 1.65;
  margin-bottom: 24px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.resources-page .cta-buttons{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.resources-page .btn-white{
  background: var(--rs-bg);
  color: var(--rs-navy);
}
.resources-page .btn-white:hover{
  background: var(--rs-bg-muted);
  box-shadow: var(--rs-shadow-sm);
}
.resources-page .btn-ghost{
  background: transparent;
  color: var(--rs-text-on-dark);
  border: 2px solid rgba(255, 255, 255, 0.4);
}
.resources-page .btn-ghost:hover{
  border-color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.08);
}


/* ════════════════════════════════════════════
   VISUALLY HIDDEN (screen reader only)
   ════════════════════════════════════════════ */
/* Deliberately NOT scoped to .resources-page: this is the site's only
   definition of .visually-hidden and 79 files rely on it. Scoping it would
   make screen-reader-only text visible everywhere else. */
.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ════════════════════════════════════════════
   ANIMATIONS
   ════════════════════════════════════════════ */
@keyframes fadeUp{
  from { opacity: 0; transform: translateY(16px); }
  to{ opacity: 1; transform: translateY(0); }
}
.resources-page .animate{ animation: fadeUp 0.5s ease both; }
.resources-page .d1{ animation-delay: 0.05s; }
.resources-page .d2{ animation-delay: 0.1s; }
.resources-page .d3{ animation-delay: 0.15s; }
.resources-page .d4{ animation-delay: 0.2s; }
.resources-page .d5{ animation-delay: 0.25s; }
.resources-page .d6{ animation-delay: 0.3s; }
.resources-page .d7{ animation-delay: 0.35s; }
.resources-page .d8{ animation-delay: 0.4s; }
.resources-page .d9{ animation-delay: 0.45s; }
.resources-page .d10{ animation-delay: 0.5s; }


/* ════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════ */
@media (max-width: 640px){
  .resources-page .hero { padding: 48px 20px 36px; }
  .resources-page .hero h1{ font-size: 26px; }
  .resources-page .section{ padding: 0 20px 44px; }
  .resources-page .tool-card{ padding: 16px; }
  .resources-page .quiz-content{ padding: 20px; }
  .resources-page .cta-banner{ padding: 32px 20px; }
  .resources-page .resource-cat{ padding: 20px 16px; }
  .resources-page .resource-item{ padding: 8px 10px; }
}


/* ════════════════════════════════════════════
   PRINT — SC 1.4.8
   ════════════════════════════════════════════ */
@media print{
  .resources-page .cta-banner { display: none; }
  body{ font-size: 12pt; color: #000; background: #fff; }
  .resources-page .tool-card, .resources-page .resource-cat, .resources-page .quiz-banner{ border: 1px solid #999; break-inside: avoid; }
  a[href]::after{ content: " (" attr(href) ")"; font-size: 0.85em; color: #555; }
}

/* ════════════════════════════════════════════
   DARK MODE — all AAA verified
   ════════════════════════════════════════════ */

[data-theme="dark"]{
  --rs-navy: #1e293b;
  --rs-navy-dark: #0f172a;
  --rs-blue-link: #7cb8f7;
  --rs-blue-focus: #7cb8f7;
  --rs-bg: #0f172a;
  --rs-bg-muted: #1e293b;
  --rs-bg-card: #1e293b;
  --rs-border: #607888;
  --rs-border-hover: #7cb8f7;
  --rs-text: #e2e8f0;
  --rs-text-secondary: #a8b5c4;
  --rs-text-muted: #a8b5c4;
  --rs-text-on-dark: #ffffff;
  --rs-text-on-dark-sub: #a8b5c4;
  --rs-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --rs-shadow-md: 0 4px 8px -1px rgba(0,0,0,0.3);
}

[data-theme="dark"] .resources-page{
  background: #0f172a;
}

/* Section label */
[data-theme="dark"] .section-label{
  color: #7cb8f7;
}

/* Tool cards */
[data-theme="dark"] .tool-card{
  background: #1e293b;
  border-color: #607888;
}

[data-theme="dark"] .resources-page .tool-card:hover{
  border-color: #7cb8f7;
}

/* Icon badges */
[data-theme="dark"] .icon-blue{ background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .icon-green{ background: #064e3b; color: #8cf0b5; }
[data-theme="dark"] .icon-navy{ background: #334155; color: #e2e8f0; }
[data-theme="dark"] .icon-purple{ background: #3b0764; color: #d8b4fe; }

/* Resource categories */
[data-theme="dark"] .resource-cat{
  background: #1e293b;
  border-color: #607888;
}

[data-theme="dark"] .resources-page .resource-cat:hover{
  border-color: #7cb8f7;
}

[data-theme="dark"] .rc-blue{ background: #1e3a5f; color: #93c5fd; }
[data-theme="dark"] .rc-purple{ background: #3b0764; color: #d8b4fe; }
[data-theme="dark"] .rc-green{ background: #064e3b; color: #8cf0b5; }
[data-theme="dark"] .rc-navy{ background: #334155; color: #e2e8f0; }

/* Resource items */
[data-theme="dark"] .resource-item{
  color: #e2e8f0;
}

[data-theme="dark"] .resources-page .resource-item:hover{
  background: #0f172a;
}

[data-theme="dark"] .resource-item-desc{
  color: #a8b5c4;
}

/* Resource tags */
[data-theme="dark"] .resource-tag{
  background: #0f172a;
  color: #a8b5c4;
}

/* Quiz/CTA banner */
[data-theme="dark"] .quiz-banner, [data-theme="dark"] .resources-page .cta-banner{
  background: #1e293b;
  border-color: #607888;
}

/* Heading overrides */
[data-theme="dark"] .resources-page h1, [data-theme="dark"] .resources-page h2, [data-theme="dark"] .resources-page h3{
  color: #f1f5f9;
}

[data-theme="dark"] .resources-page p{
  color: #a8b5c4;
}


/* ==========================================================================
   46. Connect (.connect-*) — folded in from snippets/styles/connect.css
   Was injected inline via file_get_contents (with home.css just for its
   spacing tokens). Home tokens resolved to literals; colours mapped onto
   --ds-* so light + the dark block share one brand palette. Alert dark
   overrides dropped — the --ds-success*/--ds-error* tokens already flip.
   ========================================================================== */
/* Use home page variables */
.connect-page {
  background-color: var(--ds-surface-sunken);
  min-height: 100vh;
}

/* Hero Section */
.connect-form__privacy {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  color: var(--ds-text-secondary, #4a5b76);
}
.connect-form__privacy i { font-size: 0.9rem; opacity: 0.8; }

.connect-hero {
  background-color: var(--ds-surface);
  /* Eyebrow + H1 + one orienting line + trust strip — the booking section sells
     right below, so the hero stays tight and pushes the calendar toward the fold
     instead of leaving an empty band. */
  padding: 2.75rem 2rem 2.5rem;
  border-bottom: 1px solid var(--ds-border);
}

/* Verifiable trust strip in the connect hero */
.connect-trust {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.75rem;
}
.connect-trust__item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; }
.connect-trust__item i { color: var(--ds-brand); font-size: 1.1rem; flex: none; }
.connect-trust__item a {
  color: var(--ds-text-secondary); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color 0.12s, border-color 0.12s;
}
.connect-trust__item a:hover,
.connect-trust__item a:focus-visible { color: var(--ds-brand); border-bottom-color: var(--ds-brand); }
@media (max-width: 560px) { .connect-trust { flex-direction: column; align-items: center; gap: 0.6rem; } }

/* ── Connect FAQ (native <details> accordion; matches booking width) ── */
.connect-faq { max-width: 1000px; margin: 0 auto; padding: 1rem 2rem 3.5rem; }
.connect-faq__title {
  font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; letter-spacing: -0.02em;
  color: var(--ds-text-primary); margin: 0 0 1.25rem; text-wrap: balance;
}
.connect-faq__list { display: flex; flex-direction: column; gap: 0.5rem; }
.connect-faq__item {
  border: 1px solid var(--ds-border); border-radius: 10px;
  background: var(--ds-surface); overflow: hidden;
}
.connect-faq__q {
  list-style: none; cursor: pointer; padding: 1rem 1.25rem;
  font-weight: 600; font-size: 1rem; color: var(--ds-text-primary);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.connect-faq__q::-webkit-details-marker { display: none; }
.connect-faq__q::after {
  content: "+"; font-weight: 400; font-size: 1.4rem; line-height: 1;
  color: var(--ds-brand); transition: transform 0.15s ease; flex: none;
}
.connect-faq__item[open] .connect-faq__q::after { content: "\2013"; }
.connect-faq__q:hover { color: var(--ds-brand); }
.connect-faq__item:focus-within { border-color: var(--ds-brand); }
.connect-faq__q:focus-visible { outline: 3px solid var(--ds-brand); outline-offset: -3px; border-radius: 10px; }
.connect-faq__a { padding: 0 1.25rem 1.15rem; }
.connect-faq__a p { margin: 0; color: var(--ds-text-secondary); line-height: 1.65; }
@media (prefers-reduced-motion: reduce) { .connect-faq__q::after { transition: none; } }
[data-theme="dark"] .connect-faq__item { background: var(--ds-surface-raised); border-color: var(--ds-border); }

.connect-hero__container {
  max-width: 56rem;
  margin: 0 auto;
  text-align: center;
}

.connect-hero__title {
  font-size: 2.25rem;
  font-weight: 700;
  color: var(--ds-text-primary);
  margin-bottom: 1.5rem;
  letter-spacing: -0.025em;
}

.connect-hero__intro {
  font-size: 1.125rem;
  line-height: 1.75;
  color: var(--ds-text-secondary);
  margin-bottom: 3rem;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}

/* Main Content Section - Two Column Layout */
.connect-section {
  padding: 6rem 2rem;
  background-color: var(--ds-surface-sunken);
}

.connect-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 6rem;
  align-items: start;
}

/* Sidebar (Left Column) */
.connect-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 2rem;
}

/* Contact Cards - shadcn/preline style */
.connect-card {
  background: var(--ds-surface);
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--ds-border);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.connect-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  border-color: #d1d5db;
}

.connect-card--highlight {
  background: linear-gradient(135deg, var(--ds-brand) 0%, #1f3644 100%);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.connect-card--highlight:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.15), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

.connect-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.125rem; /* 18px — matches H3 scale */
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0 0 16px 0;
  letter-spacing: -0.01em;
}

.connect-card--highlight .connect-card__title {
  color: white;
}

.connect-card__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.9;
}

.connect-card__content {
  font-size: 0.875rem;
  line-height: 1.625;
}

.connect-card__description {
  color: var(--ds-text-secondary);
  margin-bottom: 1rem;
  line-height: 1.625;
}

.connect-card--highlight .connect-card__description {
  color: rgba(255, 255, 255, 0.85);
}

.connect-highlight {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ds-brand);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.connect-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

/* Contact Link - shadcn style */
.connect-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--ds-brand);
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 0.375rem;
  padding: 0.25rem;
  margin: -0.25rem;
}

.connect-link:hover {
  color: var(--ds-brand-hover);
}

.connect-link:focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
}

.connect-link__icon {
  width: 18px;
  height: 18px;
}

/* Features List - preline style */
.connect-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.connect-features__item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.5;
}

.connect-features__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(255, 255, 255, 1);
  margin-top: 1px;
}

/* Main Content (Right Column) */
.connect-main {
  min-width: 0;
}

.connect-form-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ds-text-primary);
  margin-bottom: 0.75rem;
  letter-spacing: -0.025em;
}

.connect-form-description {
  font-size: 1rem;
  line-height: 1.625;
  color: var(--ds-text-secondary);
  margin-bottom: 2rem;
}

/* Form Styling - shadcn inspired */
.connect-form {
  background: var(--ds-surface);
  border-radius: 0.75rem;
  padding: 3rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--ds-border);
}

.connect-form__fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  margin-bottom: 2rem;
}

.connect-form__legend {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ds-text-primary);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.connect-form__legend-desc {
  font-size: 0.875rem;
  color: var(--ds-text-secondary);
  margin-bottom: 2rem;
  font-weight: 400;
  line-height: 1.625;
}

.connect-form__field {
  margin-bottom: 1.5rem;
}

.connect-form__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ds-text-primary);
  margin-bottom: 0.5rem;
  letter-spacing: -0.01em;
}

.connect-form__label--required::after {
  content: ' *';
  color: #dc2626;
}

.connect-form__input,
.connect-form__textarea {
  display: block;
  width: 100%;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  color: var(--ds-text-primary);
  background-color: var(--ds-surface);
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  line-height: 1.5;
  box-sizing: border-box;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: inherit;
}

.connect-form__input::placeholder,
.connect-form__textarea::placeholder {
  color: #6b7280;
}

.connect-form__textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.625;
}

.connect-form__input:hover,
.connect-form__textarea:hover {
  border-color: #6b7280;
}

.connect-form__input:focus,
.connect-form__textarea:focus {
  border-color: var(--ds-brand);
  outline: none;
  box-shadow: 0 0 0 3px rgba(41, 69, 87, 0.1);
}

.connect-form__input:focus-visible,
.connect-form__textarea:focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(41, 69, 87, 0.1);
}

/* Error States - shadcn style */
.connect-form__input--error,
.connect-form__textarea--error {
  border-color: var(--ds-error);
  background-color: var(--ds-error-bg);
}

.connect-form__input--error:focus,
.connect-form__textarea--error:focus {
  border-color: var(--ds-error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.connect-form__error-message {
  display: block;
  color: var(--ds-error-text);
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

/* Alerts */
.connect-alert {
  padding: 1.5rem;
  border-radius: 0.5rem;
  margin-bottom: 2rem;
  border: 2px solid;
}

.connect-alert--success {
  background-color: var(--ds-success-bg);
  color: var(--ds-success-text);
  border-color: var(--ds-success);
}

.connect-alert--success p {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
}

.connect-alert--error {
  background-color: var(--ds-error-bg);
  color: var(--ds-error-text);
  border-color: var(--ds-error);
}

.connect-alert--error ul {
  margin: 0;
  padding-left: 1.5rem;
}

.connect-alert--error li {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.connect-alert--error li:last-child {
  margin-bottom: 0;
}

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

/* Submit Button - shadcn style */
.connect-form__submit {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.625rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: white;
  background-color: var(--ds-brand);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  height: 40px;
}

.connect-form__submit svg {
  width: 16px;
  height: 16px;
}

.connect-form__submit:hover {
  background-color: var(--ds-brand-hover);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.connect-form__submit:focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
}

.connect-form__submit:active {
  background-color: #152733;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* Business Actions Buttons - preline style */
.connect-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  color: #374151;
  background-color: var(--ds-surface);
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  width: 100%;
}

.connect-action-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.connect-action-btn:hover {
  border-color: var(--ds-brand);
  color: var(--ds-brand);
  background-color: rgba(41, 69, 87, 0.05);
}

.connect-action-btn:focus-visible {
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
}

/* Responsive */
@media (max-width: 1024px) {
  .connect-content {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .connect-sidebar {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .connect-card:nth-child(4) {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .connect-hero {
    padding: 4rem 1.5rem;
  }
  
  .connect-hero__title {
    font-size: 1.875rem;
  }
  
  .connect-section {
    padding: 3rem 1.5rem;
  }
  
  .connect-form {
    padding: 2rem;
  }
  
  .connect-card {
    padding: 1.5rem;
  }
  
  .connect-sidebar {
    grid-template-columns: 1fr;
  }
}

/* Ensure proper focus management for alerts */
.connect-alert:focus {
  outline: 2px solid var(--ds-brand);
  outline-offset: 2px;
}

/* ==========================================
   Dark Mode — all AAA verified
   ========================================== */

[data-theme="dark"] .connect-page {
  background-color: #0f172a;
}

[data-theme="dark"] .connect-section {
  background-color: #0f172a;
}

[data-theme="dark"] .connect-hero {
  background-color: #1e293b;
  border-bottom-color: #607888;
}

[data-theme="dark"] .connect-hero__title {
  color: #f1f5f9;
}

[data-theme="dark"] .connect-hero__intro {
  color: #a8b5c4;
}

/* Sidebar cards */
[data-theme="dark"] .connect-card {
  background: #1e293b;
  border-color: #607888;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .connect-card:hover {
  border-color: #7cb8f7;
}

[data-theme="dark"] .connect-card--highlight {
  background: linear-gradient(135deg, #1e293b 0%, #162032 100%) !important;
  border-color: #607888;
}

[data-theme="dark"] .connect-card--highlight .connect-card__title {
  color: #f1f5f9;
}

[data-theme="dark"] .connect-card--highlight .connect-card__description {
  color: #a8b5c4;
}

[data-theme="dark"] .connect-features__item {
  color: #e2e8f0;
}

[data-theme="dark"] .connect-features__item svg {
  color: #7cb8f7;
}

[data-theme="dark"] .connect-card__title {
  color: #f1f5f9;
}

[data-theme="dark"] .connect-card__description {
  color: #a8b5c4;
}

[data-theme="dark"] .connect-highlight {
  color: #7cb8f7;
}

[data-theme="dark"] .connect-link {
  color: #7cb8f7;
}

[data-theme="dark"] .connect-link:hover {
  color: #a5d4fd;
}

/* Form */
[data-theme="dark"] .connect-form {
  background: #1e293b;
  border-color: #607888;
}

[data-theme="dark"] .connect-form-title {
  color: #f1f5f9;
}

[data-theme="dark"] .connect-form-description {
  color: #a8b5c4;
}

[data-theme="dark"] .connect-form__legend {
  color: #f1f5f9;
}

[data-theme="dark"] .connect-form__legend-desc {
  color: #a8b5c4;
}

[data-theme="dark"] .connect-form__label {
  color: #e2e8f0;
}

[data-theme="dark"] .connect-form__input,
[data-theme="dark"] .connect-form__textarea {
  background-color: #0f172a;
  border-color: #607888;
  color: #e2e8f0;
}

[data-theme="dark"] .connect-form__input::placeholder,
[data-theme="dark"] .connect-form__textarea::placeholder {
  color: #a8b5c4;
}

[data-theme="dark"] .connect-form__input:hover,
[data-theme="dark"] .connect-form__textarea:hover {
  border-color: #7cb8f7;
}

[data-theme="dark"] .connect-form__input:focus,
[data-theme="dark"] .connect-form__textarea:focus {
  border-color: #7cb8f7;
  box-shadow: 0 0 0 3px rgba(124, 184, 247, 0.15);
}

[data-theme="dark"] .connect-form__submit {
  background-color: #7cb8f7;
  color: #0f172a;
}

[data-theme="dark"] .connect-form__submit:hover {
  background-color: #a5d4fd;
  color: #0f172a;
}

/* Alerts */


/* Action buttons — outlined to contrast with filled submit */
[data-theme="dark"] .connect-action-btn {
  background-color: transparent;
  color: #7cb8f7 !important;
  border-color: #7cb8f7;
}

[data-theme="dark"] .connect-action-btn:hover {
  border-color: #a5d4fd;
  color: #a5d4fd !important;
  background-color: rgba(124, 184, 247, 0.08);
}

/* Connect intent router (§46 cont.) — two-path chooser above the fold. Sends
   audit intent to the call, everything else to the form. Reuses the card
   surface + --ds-* tokens so it matches the rest of the page in both themes. */
.connect-router {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem 2rem 0;
}
.connect-router__title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ds-text-primary);
  text-align: center;
  margin: 0 0 1.5rem;
}
.connect-router__paths {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
}
.connect-router__path {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: 0.75rem;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.connect-router__path--primary {
  border-color: var(--ds-brand);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.connect-router__path-title {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ds-text-primary);
  margin: 0;
}
.connect-router__path-desc {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ds-text-secondary);
  margin: 0;
}
.connect-router__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: auto;
}
.connect-router__alt {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ds-brand);
  text-decoration: none;
}
.connect-router__alt:hover { text-decoration: underline; }
.connect-router__proof {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--ds-text-secondary);
  margin: 0.25rem 0 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--ds-border);
}
.connect-router__proof a { color: var(--ds-brand); font-weight: 600; }

@media (max-width: 768px) {
  .connect-router { padding: 2rem 1.5rem 0; }
  .connect-router__paths { grid-template-columns: 1fr; }
}

[data-theme="dark"] .connect-router__path {
  background: #1e293b;
  border-color: #607888;
}
[data-theme="dark"] .connect-router__path--primary { border-color: #7cb8f7; }
[data-theme="dark"] .connect-router__path-title,
[data-theme="dark"] .connect-router__title { color: #f1f5f9; }
[data-theme="dark"] .connect-router__path-desc,
[data-theme="dark"] .connect-router__proof { color: #a8b5c4; }
[data-theme="dark"] .connect-router__alt,
[data-theme="dark"] .connect-router__proof a { color: #7cb8f7; }

/* Mobile-only sticky "Book a call" (snippets/sticky-cta.php). Desktop: hidden.
   Mobile: fixed bottom bar, safe-area aware, 44px touch targets, dismissible. */
.jg-sticky-cta { display: none; }
@media (max-width: 768px) {
  .jg-sticky-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--ds-brand);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
  }
  .jg-sticky-cta[hidden] { display: none; }
  .jg-sticky-cta__link {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.6rem 1rem;
    border-radius: 8px;
    background: #ffffff;
    color: var(--ds-brand);
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
  }
  .jg-sticky-cta__close {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 1.25rem;
    cursor: pointer;
    border-radius: 8px;
  }
  .jg-sticky-cta__link:focus-visible,
  .jg-sticky-cta__close:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
  }
  body.has-sticky-cta { padding-bottom: 76px; }
}
[data-theme="dark"] .jg-sticky-cta { background: #1e293b; }
[data-theme="dark"] .jg-sticky-cta__link { background: #7cb8f7; color: #0f172a; }


/* ==========================================================================
   47. Work with me (.wwm-* / .skip-link) — folded in from
   snippets/styles/work-with-me.css.php. Was injected inline via a
   snippet <style> block plus a redundant unpkg Phosphor <link> (the
   font already loads globally from header.php — dropped here).
   Tokens stay scoped to .wwm-wrapper; all selectors are .wwm-* (or the
   page's own .skip-link), so nothing leaks to other pages.
   ========================================================================== */
/* Skip link for keyboard navigation - AAA compliance */
/* .skip-link intentionally NOT carried over: the wwm page's own skip link was
   already removed (global .jg-skip covers it), and a global .skip-link here
   would duplicate/collide with the one in article.css. Kept namespaced. */

.wwm-wrapper * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wwm-wrapper {
--wwm-primary: #294557;
--wwm-primary-hover: #1f3441;
--wwm-primary-light: #e8f0f3;
--wwm-secondary: #475569;
--wwm-background: #ffffff;
--wwm-foreground: #0f172a;
--wwm-muted: #f1f5f9;
--wwm-muted-foreground: #475569;
--wwm-border: #cbd5e1;
--wwm-accent: #f8fafc;
--wwm-success: #059669;
--wwm-error: #dc2626;
--wwm-spacing-xs: 0.5rem;
--wwm-spacing-sm: 1rem;
--wwm-spacing-md: 1.5rem;
--wwm-spacing-lg: 2rem;
--wwm-spacing-xl: 3rem;
--wwm-spacing-2xl: 4rem;
--wwm-spacing-3xl: 6rem;
--wwm-radius: 0.5rem;
--wwm-radius-lg: 0.75rem;
--wwm-radius-xl: 1rem;
--wwm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--wwm-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--wwm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--wwm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--wwm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
color: var(--wwm-foreground);
background: var(--wwm-background);
line-height: 1.6;
}
.wwm-container {
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--wwm-spacing-md);
}
.wwm-hero {
padding: var(--wwm-spacing-3xl) 0;
text-align: center;
}
.wwm-hero-badge {
display: inline-flex;
align-items: center;
gap: var(--wwm-spacing-xs);
padding: var(--wwm-spacing-xs) var(--wwm-spacing-sm);
background: var(--wwm-primary-light);
color: var(--wwm-primary);
border-radius: 9999px;
font-size: 0.875rem;
font-weight: 500;
margin-bottom: var(--wwm-spacing-md);
}
.wwm-status-dot {
width: 8px;
height: 8px;
background: var(--wwm-success);
border-radius: 50%;
animation: wwm-pulse 2s infinite;
}
@keyframes wwm-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.wwm-hero h1 {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 800;
letter-spacing: -0.025em;
margin-bottom: var(--wwm-spacing-md);
line-height: 1.1;
}
/* Value-prop tagline under the H1 (was the old hero_title) — larger than
   the subtitle, foreground colour, so the pitch still leads the hero. */
.wwm-hero-tagline {
font-size: clamp(1.25rem, 2.6vw, 1.75rem);
font-weight: 600;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--wwm-foreground);
max-width: 44rem;
margin: 0 auto var(--wwm-spacing-md);
}
.wwm-hero-subtitle {
font-size: 1.25rem;
color: var(--wwm-muted-foreground);
max-width: 48rem;
margin: 0 auto var(--wwm-spacing-xl);
}
.wwm-hero-cta {
display: flex;
gap: var(--wwm-spacing-sm);
justify-content: center;
flex-wrap: wrap;
}
.wwm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.5rem;
font-size: 0.875rem;
font-weight: 600;
border-radius: var(--wwm-radius);
border: none;
cursor: pointer;
text-decoration: none;
transition: all 0.2s ease;
white-space: nowrap;
}
.wwm-btn-primary {
background: var(--wwm-primary);
color: white;
}
.wwm-btn-primary:hover {
background: var(--wwm-primary-hover);
transform: translateY(-1px);
box-shadow: var(--wwm-shadow-md);
}
.wwm-btn-secondary {
background: transparent;
border: 2px solid var(--wwm-border);
color: var(--wwm-foreground);
}
.wwm-btn-secondary:hover {
background: var(--wwm-accent);
border-color: var(--wwm-primary);
}
.wwm-btn-lg {
padding: 1rem 2rem;
font-size: 1rem;
}
.wwm-btn-white {
background: white;
color: var(--wwm-primary);
}
.wwm-btn-white:hover {
background: var(--wwm-accent);
}
.wwm-btn-outline-white {
background: transparent;
border: 2px solid white;
color: white;
}
.wwm-btn-outline-white:hover {
background: rgba(255, 255, 255, 0.15);
}
.wwm-section {
padding: var(--wwm-spacing-3xl) 0;
}
.wwm-section-alt {
background: var(--wwm-accent);
}
.wwm-section-header {
text-align: center;
margin-bottom: var(--wwm-spacing-2xl);
}
.wwm-section-header h2 {
font-size: clamp(1.875rem, 4vw, 2.5rem);
font-weight: 700;
margin-bottom: var(--wwm-spacing-sm);
letter-spacing: -0.025em;
}
.wwm-section-header p {
font-size: 1.125rem;
color: var(--wwm-muted-foreground);
max-width: 42rem;
margin: 0 auto;
}
/* Centred call-to-action below a section's grid — e.g. the deliverables
   "view a sample report" link. */
.wwm-section-cta {
margin-top: var(--wwm-spacing-2xl);
text-align: center;
}
.wwm-grid {
display: grid;
gap: var(--wwm-spacing-lg);
}
.wwm-grid-3 {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
@media (min-width: 768px) {
.wwm-grid-3 {
grid-template-columns: repeat(3, 1fr);
}
}
.wwm-card {
background: var(--wwm-background);
border: 1px solid var(--wwm-border);
border-radius: var(--wwm-radius-lg);
padding: var(--wwm-spacing-lg);
transition: all 0.3s ease;
}
.wwm-card:hover {
border-color: var(--wwm-primary);
box-shadow: var(--wwm-shadow-xl);
transform: translateY(-4px);
}
.wwm-card-icon {
width: 48px;
height: 48px;
background: var(--wwm-primary-light);
color: var(--wwm-primary);
border-radius: var(--wwm-radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: var(--wwm-spacing-md);
}
.wwm-card h3 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: var(--wwm-spacing-xs);
}
.wwm-card p {
color: var(--wwm-muted-foreground);
font-size: 0.875rem;
line-height: 1.6;
}
.wwm-grid-2 {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
@media (min-width: 768px) {
.wwm-grid-2 {
grid-template-columns: repeat(2, 1fr);
}
}
/* Card that is itself a link (detail-pages section). .wwm-card already
   carries the border, padding and hover lift; this just resets link
   styling and pins the "read more" cue to the bottom edge. */
.wwm-card--link {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.wwm-card--link .wwm-card__more {
margin-top: auto;
padding-top: var(--wwm-spacing-sm);
color: var(--wwm-primary);
font-weight: 600;
font-size: 0.875rem;
}
.wwm-card--link:hover .wwm-card__more {
text-decoration: underline;
}
/* ── Method block — standards ("measured against") vs WCAG-EM methodology
      ("evaluated using"). A deliberate dark "spec panel": the credibility
      centrepiece, high-contrast, and identical in light and dark mode (like
      the EAA CTA band). ─────────────────────────────────────────────────── */
.wwm-method-panel {
/* Scoped palette aliased onto the design-system tokens (same approach as the
   .eaa block). The panel is a fixed dark brand surface in both themes, so its
   surface and light-on-dark inks live here once instead of as scattered hexes. */
--m-surface: var(--ds-brand);                 /* brand navy (#294557) in light */
--m-inset: rgba(255, 255, 255, 0.045);
--m-line: rgba(255, 255, 255, 0.1);
--m-ink: #ffffff;
--m-ink-label: rgba(248, 250, 252, 0.85);
--m-ink-muted: rgba(248, 250, 252, 0.72);
--m-ink-faint: rgba(248, 250, 252, 0.6);
--m-accent: var(--brand-blue, #7cb8f7);       /* .eaa defines --brand-blue; hex is the fallback */
--m-accent-ink: #12222e;
--m-rail: rgba(124, 184, 247, 0.3);
background: var(--m-surface);
color: var(--m-ink-muted);
border-radius: var(--wwm-radius-lg);
padding: clamp(2rem, 4vw, 3.5rem);
}
/* --ds-brand flips to light-blue in dark mode; pin the panel to brand navy so it
   stays a fixed dark surface (matches the EAA CTA band). */
[data-theme="dark"] .wwm-method-panel { --m-surface: #294557; }
.wwm-method-eyebrow {
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--m-ink-faint);
margin: 0 0 0.5rem;
}
.wwm-method-title {
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
color: var(--m-ink);
margin: 0 0 var(--wwm-spacing-xl);
max-width: 34ch;
}
/* Two-part layout: the WCAG-EM intro (what it is / why it protects you) on the
   left, the step-by-step procedure on the right. Stacks on narrow screens. */
.wwm-method-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--wwm-spacing-xl);
}
@media (min-width: 860px) {
.wwm-method-grid { grid-template-columns: 5fr 6fr; gap: var(--wwm-spacing-2xl); }
}
.wwm-method-em {
font-size: 1.5rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--m-ink);
margin: 0 0 var(--wwm-spacing-sm);
}
.wwm-method-em a { color: var(--m-accent); text-decoration: none; }
.wwm-method-em a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wwm-method-lead {
color: var(--m-ink-muted);
font-size: 1.0625rem;
line-height: 1.65;
margin: 0;
max-width: 46ch;
}
.wwm-method-steplabel {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--m-ink-muted);
margin: 0 0 var(--wwm-spacing-lg);
}
/* Numbered stepper — each step is a badge + title + a plain-language line; a
   rail links each badge to the next so the five read as one sequence. */
.wwm-method-steps {
list-style: none;
margin: 0;
padding: 0;
counter-reset: wcagem-step;
}
.wwm-method-steps > li {
counter-increment: wcagem-step;
position: relative;
padding-left: 2.75rem;
padding-bottom: var(--wwm-spacing-lg);
}
.wwm-method-steps > li:last-child { padding-bottom: 0; }
.wwm-method-steps > li::before {
content: counter(wcagem-step);
position: absolute;
left: 0;
top: 0;
width: 1.75rem;
height: 1.75rem;
border-radius: 50%;
background: var(--m-accent);
color: var(--m-accent-ink);
font-weight: 700;
font-size: 0.8125rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.wwm-method-steps > li:not(:last-child)::after {
content: "";
position: absolute;
left: 0.875rem;
transform: translateX(-50%);
top: 2rem;
bottom: -0.25rem;
width: 2px;
background: var(--m-rail);
}
.wwm-step-title {
display: block;
font-weight: 600;
font-size: 1.0625rem;
color: var(--m-ink);
line-height: 1.75rem;
}
.wwm-step-desc {
display: block;
margin-top: 0.25rem;
color: var(--m-ink-muted);
font-size: 0.9rem;
line-height: 1.55;
}
.wwm-method-note {
margin: var(--wwm-spacing-xl) 0 0;
padding-top: var(--wwm-spacing-lg);
border-top: 1px solid var(--m-line);
color: var(--m-ink-muted);
font-size: 0.9375rem;
line-height: 1.6;
max-width: 70ch;
}

.wwm-pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--wwm-spacing-lg);
margin-bottom: var(--wwm-spacing-2xl);
}
/* Pricing layout (>=1024px). The three core tiers — Audit, Remediation
   (featured), Retainer — sit in an equal three-column row; the catch-all
   (Custom Project, the 4th card) spans the full width below as a
   two-column banner. Placement is by nth-child, so keep the package
   order in the Panel or update the rules below. */
@media (min-width: 1024px) {
.wwm-pricing-grid {
grid-template-columns: repeat(3, 1fr);
align-items: stretch;
}
/* Chain both classes (0,2,0) so this outranks the base `.wwm-pricing-card`
   `display: flex` rule, which is defined later in the file — a class-only
   selector ties on specificity and loses on source order, collapsing the grid. */
.wwm-pricing-card.wwm-pricing-card--custom {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
column-gap: var(--wwm-spacing-2xl);
row-gap: var(--wwm-spacing-lg);
align-items: start;
padding: var(--wwm-spacing-xl) var(--wwm-spacing-2xl);
}
/* Left column: pitch + price + meta, with the CTA directly beneath it. Each
   side sizes to its own content — no element spans shared rows, so the old
   distributed gaps (empty band between the description and the price) are gone. */
.wwm-pc-main { grid-column: 1; grid-row: 1; }
.wwm-pricing-card--custom > .wwm-btn {
grid-column: 1;
grid-row: 2;
justify-self: start;
min-width: min(340px, 100%);
}
/* Right column: the "what's included" checklist, top-aligned. Spans both left
   rows so it can sit alongside the pitch and the button without dictating
   their heights. */
.wwm-pc-aside {
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
}
.wwm-pricing-card--custom .wwm-pricing-card-features { margin-bottom: 0; }
}
/* Small uppercase header above the custom card's included-list (both themes). */
.wwm-pc-aside-label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wwm-muted-foreground);
margin: 0 0 var(--wwm-spacing-sm);
}
.wwm-pricing-card {
background: var(--wwm-background);
border: 1px solid var(--wwm-border);
border-radius: var(--wwm-radius-lg);
padding: var(--wwm-spacing-lg);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
position: relative;
}
.wwm-pricing-card:hover {
border-color: var(--wwm-primary);
box-shadow: var(--wwm-shadow-xl);
transform: translateY(-4px);
}
.wwm-pricing-card.wwm-featured {
border-color: var(--wwm-primary);
border-width: 2px;
box-shadow: var(--wwm-shadow-lg);
}
.wwm-pricing-card.wwm-featured .wwm-badge {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--wwm-primary);
color: white;
padding: 0.25rem 1rem;
border-radius: 9999px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.wwm-pricing-card-header {
margin-bottom: var(--wwm-spacing-md);
}
.wwm-pricing-card-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: var(--wwm-spacing-xs);
}
.wwm-pricing-card-description {
color: var(--wwm-muted-foreground);
font-size: 0.875rem;
}
.wwm-pricing-card-price {
margin-bottom: var(--wwm-spacing-md);
}
.wwm-price {
font-size: 2.5rem;
font-weight: 700;
line-height: 1;
}
.wwm-price-period {
color: var(--wwm-muted-foreground);
font-size: 0.875rem;
}
.wwm-pricing-card-features {
list-style: none;
margin-bottom: var(--wwm-spacing-sm);
}
/* Pin the CTA to the card bottom so cards align, and keep the ✓ list +
   the Best-for / Not-included lines grouped together at the top. (The
   feature list used to carry flex-grow, which opened a gap once those
   two lines moved out of it.) The 4th card is a grid, not a flex column,
   so it's excluded — its button flows naturally after the meta lines. */
.wwm-pricing-card:not(:nth-child(4)) > .wwm-btn {
margin-top: auto;
}
.wwm-pricing-card-features li {
padding: var(--wwm-spacing-xs) 0;
display: flex;
align-items: flex-start;
font-size: 0.875rem;
}
.wwm-pricing-card-features li:before {
content: "✓";
color: var(--wwm-primary);
font-weight: 600;
margin-right: var(--wwm-spacing-xs);
flex-shrink: 0;
}
.wwm-comparison {
margin-top: var(--wwm-spacing-2xl);
}
.wwm-comparison h3 {
font-size: 2rem;
font-weight: 700;
text-align: center;
margin-bottom: var(--wwm-spacing-md);
}
.wwm-comparison > p {
text-align: center;
color: var(--wwm-muted-foreground);
margin-bottom: var(--wwm-spacing-lg);
}
.wwm-comparison-table-wrapper {
background: var(--wwm-background);
border: 1px solid var(--wwm-border);
border-radius: var(--wwm-radius-lg);
overflow: hidden;
}
.wwm-comparison-table {
width: 100%;
border-collapse: collapse;
}
.wwm-comparison-table thead {
background: var(--wwm-accent);
}
.wwm-comparison-table th {
padding: var(--wwm-spacing-sm);
text-align: left;
font-weight: 600;
font-size: 0.875rem;
border-bottom: 1px solid var(--wwm-border);
}
.wwm-comparison-table td {
padding: var(--wwm-spacing-sm);
border-bottom: 1px solid var(--wwm-border);
font-size: 0.875rem;
}
.wwm-comparison-table tbody tr:last-child td {
border-bottom: none;
}
.wwm-comparison-table tbody tr:hover {
background: var(--wwm-accent);
}
.wwm-check {
color: var(--wwm-primary);
font-weight: 600;
text-align: center;
display: block;
}
.wwm-process-steps {
display: grid;
gap: var(--wwm-spacing-lg);
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.wwm-step {
text-align: center;
padding: var(--wwm-spacing-lg);
}
.wwm-step-number {
width: 56px;
height: 56px;
background: var(--wwm-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 700;
margin: 0 auto var(--wwm-spacing-md);
}
.wwm-step h3 {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: var(--wwm-spacing-xs);
}
.wwm-step p {
color: var(--wwm-muted-foreground);
font-size: 0.875rem;
}
.wwm-benefits {
background: var(--wwm-primary-light);
border-radius: var(--wwm-radius-xl);
padding: var(--wwm-spacing-xl);
}
.wwm-benefits-list {
list-style: none;
display: grid;
gap: var(--wwm-spacing-sm);
}
.wwm-benefits-list li {
display: flex;
align-items: flex-start;
gap: var(--wwm-spacing-sm);
}
.wwm-benefits-list li:before {
content: "→";
color: var(--wwm-primary);
font-weight: 700;
flex-shrink: 0;
}
.wwm-benefits-list strong {
color: var(--wwm-primary);
font-weight: 600;
}
.wwm-cta-section {
text-align: center;
padding: var(--wwm-spacing-xl);
background: linear-gradient(135deg, var(--wwm-primary) 0%, var(--wwm-primary-hover) 100%);
border-radius: var(--wwm-radius-xl);
color: white;
}
.wwm-cta-section h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: var(--wwm-spacing-sm);
}
.wwm-cta-section p {
color: rgba(255, 255, 255, 0.95);
margin-bottom: var(--wwm-spacing-lg);
max-width: 36rem;
margin-left: auto;
margin-right: auto;
}
.wwm-cta-buttons {
display: flex;
gap: var(--wwm-spacing-sm);
justify-content: center;
flex-wrap: wrap;
}
.wwm-cta-reassure {
max-width: 44rem;
margin: 1.25rem auto 0;
font-size: 0.875rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
}
.wwm-cta-reassure a {
color: #fff;
text-decoration: underline;
text-underline-offset: 2px;
}
/* Keyboard focus on the dark CTA section: the global focus outline is
   dark navy and would be invisible against this section's navy
   background, so override it to white here. */
.wwm-cta-section .wwm-btn:focus-visible {
outline: 3px solid white;
outline-offset: 3px;
}
.wwm-pricing-cta {
text-align: center;
margin-top: var(--wwm-spacing-2xl);
padding: var(--wwm-spacing-xl);
}
.wwm-pricing-cta h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--wwm-spacing-sm);
}
.wwm-pricing-cta p {
color: var(--wwm-muted-foreground);
margin-bottom: var(--wwm-spacing-md);
}
.wwm-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
z-index: 10000;
align-items: center;
justify-content: center;
padding: var(--wwm-spacing-md);
}
.wwm-modal.active {
display: flex;
}
.wwm-modal-content {
background: var(--wwm-background);
border-radius: var(--wwm-radius-lg);
max-width: 700px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
box-shadow: var(--wwm-shadow-xl);
}
.wwm-modal-header {
padding: var(--wwm-spacing-lg);
border-bottom: 1px solid var(--wwm-border);
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.wwm-modal-header-text h3 {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: var(--wwm-spacing-xs);
}
.wwm-modal-header-text .wwm-plan-price {
color: var(--wwm-muted-foreground);
font-size: 0.875rem;
}
.wwm-modal-close {
background: var(--wwm-accent);
border: 2px solid var(--wwm-border);
font-size: 1.25rem;
cursor: pointer;
color: var(--wwm-foreground);
padding: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--wwm-radius);
transition: all 0.2s;
font-weight: 700;
}
.wwm-modal-close:hover {
background: var(--wwm-muted);
border-color: var(--wwm-primary);
}
.wwm-modal-close:focus-visible {
outline: 3px solid var(--wwm-primary);
outline-offset: 2px;
}
.wwm-modal-body {
padding: var(--wwm-spacing-lg);
}
.wwm-plan-details {
background: var(--wwm-accent);
border-radius: var(--wwm-radius);
padding: var(--wwm-spacing-md);
margin-bottom: var(--wwm-spacing-lg);
}
.wwm-plan-details h4 {
font-size: 1rem;
font-weight: 600;
margin-bottom: var(--wwm-spacing-xs);
}
.wwm-plan-details ul {
list-style: none;
margin-top: var(--wwm-spacing-sm);
}
.wwm-plan-details li {
padding: var(--wwm-spacing-xs) 0;
display: flex;
align-items: flex-start;
font-size: 0.875rem;
}
.wwm-plan-details li:before {
content: "✓";
color: var(--wwm-primary);
font-weight: 600;
margin-right: var(--wwm-spacing-xs);
flex-shrink: 0;
}
.wwm-form-group {
margin-bottom: var(--wwm-spacing-md);
}
.wwm-form-label {
display: block;
font-weight: 600;
margin-bottom: var(--wwm-spacing-xs);
color: var(--wwm-foreground);
font-size: 0.875rem;
}
.wwm-form-required {
color: var(--wwm-error);
}
.wwm-form-input,
.wwm-form-textarea {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--wwm-border);
border-radius: var(--wwm-radius);
font-size: 1rem;
font-family: inherit;
transition: all 0.2s;
background: var(--wwm-background);
color: var(--wwm-foreground);
}
.wwm-form-input:focus,
.wwm-form-textarea:focus {
outline: none;
border-color: var(--wwm-primary);
box-shadow: 0 0 0 3px var(--wwm-primary-light);
}
.wwm-form-input:focus-visible,
.wwm-form-textarea:focus-visible {
outline: 3px solid var(--wwm-primary);
outline-offset: 2px;
}
.wwm-form-input.error,
.wwm-form-textarea.error {
border-color: var(--wwm-error);
}
.wwm-form-textarea {
min-height: 100px;
resize: vertical;
}
.wwm-form-help {
font-size: 0.75rem;
color: var(--wwm-muted-foreground);
margin-bottom: var(--wwm-spacing-xs);
display: block;
}
.wwm-form-error {
font-size: 0.75rem;
color: var(--wwm-error);
margin-top: var(--wwm-spacing-xs);
font-weight: 600;
}
.wwm-next-steps {
background: var(--wwm-primary-light);
border-radius: var(--wwm-radius);
padding: var(--wwm-spacing-md);
margin-top: var(--wwm-spacing-lg);
}
.wwm-next-steps h4 {
font-size: 1rem;
font-weight: 600;
margin-bottom: var(--wwm-spacing-sm);
color: var(--wwm-primary);
}
.wwm-next-steps ol {
margin-left: var(--wwm-spacing-md);
}
.wwm-next-steps li {
padding: var(--wwm-spacing-xs) 0;
font-size: 0.875rem;
}
.wwm-success-message {
background: #d1fae5;
border: 2px solid var(--wwm-success);
border-radius: var(--wwm-radius);
padding: var(--wwm-spacing-md);
margin-bottom: var(--wwm-spacing-md);
}
.wwm-success-message h4 {
color: var(--wwm-success);
font-weight: 600;
margin-bottom: var(--wwm-spacing-xs);
}
@media (max-width: 768px) {
.wwm-hero {
padding: var(--wwm-spacing-2xl) 0;
}
.wwm-section {
padding: var(--wwm-spacing-xl) 0;
}
.wwm-comparison-table-wrapper {
overflow-x: auto;
}
.wwm-comparison-table {
min-width: 600px;
}
.wwm-modal-content {
margin: var(--wwm-spacing-sm);
}
}
.wwm-wrapper :focus-visible {
outline: 3px solid var(--wwm-primary);
outline-offset: 2px;
}
/* Enhanced focus styles for AAA compliance */
.wwm-btn:focus-visible,
.wwm-card:focus-visible,
.wwm-pricing-card:focus-visible {
outline: 3px solid var(--wwm-primary);
outline-offset: 3px;
box-shadow: 0 0 0 6px rgba(41, 69, 87, 0.15);
}
/* High contrast mode support */
@media (prefers-contrast: high) {
.wwm-wrapper {
--wwm-border: #000000;
}
.wwm-btn {
border: 2px solid currentColor;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
.wwm-wrapper *,
.wwm-wrapper *::before,
.wwm-wrapper *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
.wwm-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}

/* ==========================================
   Dark Mode — all AAA verified
   ========================================== */

[data-theme="dark"] .wwm-wrapper {
  --wwm-primary: #7cb8f7;
  --wwm-primary-hover: #a5d4fd;
  --wwm-primary-light: #1e293b;
  --wwm-secondary: #a8b5c4;
  --wwm-background: #0f172a;
  --wwm-foreground: #e2e8f0;
  --wwm-muted: #1e293b;
  --wwm-muted-foreground: #a8b5c4;
  --wwm-border: #607888;
  --wwm-accent: #1e293b;
  --wwm-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --wwm-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
  --wwm-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  --wwm-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  --wwm-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

[data-theme="dark"] .wwm-btn-primary {
  background: #7cb8f7;
  color: #0f172a !important;
}

[data-theme="dark"] .wwm-btn-primary:hover {
  background: #a5d4fd;
  color: #0f172a !important;
}

[data-theme="dark"] .wwm-btn-secondary {
  background: transparent;
  border-color: #7cb8f7;
  color: #7cb8f7 !important;
}

[data-theme="dark"] .wwm-btn-secondary:hover {
  background: rgba(124, 184, 247, 0.08);
  border-color: #a5d4fd;
  color: #a5d4fd !important;
}

[data-theme="dark"] .wwm-btn-white {
  background: transparent;
  color: #7cb8f7 !important;
  border: 2px solid #7cb8f7;
}

[data-theme="dark"] .wwm-btn-outline-white {
  border-color: #607888;
  color: #a8b5c4 !important;
}

[data-theme="dark"] .wwm-btn-outline-white:hover {
  background: rgba(124, 184, 247, 0.08);
  border-color: #7cb8f7;
  color: #7cb8f7 !important;
}

[data-theme="dark"] .wwm-card {
  background: #1e293b;
  border-color: #607888;
}

[data-theme="dark"] .wwm-card:hover {
  border-color: #7cb8f7;
}

[data-theme="dark"] .wwm-pricing-card {
  background: #1e293b;
  border-color: #607888;
}

[data-theme="dark"] .wwm-pricing-card.wwm-featured {
  border-color: #7cb8f7;
}

[data-theme="dark"] .wwm-pricing-card:hover {
  border-color: #7cb8f7;
}

[data-theme="dark"] .wwm-comparison-table-wrapper {
  background: #1e293b;
  border-color: #607888;
}

[data-theme="dark"] .wwm-comparison-table thead {
  background: #0f172a;
}

[data-theme="dark"] .wwm-comparison-table th {
  border-bottom-color: #607888;
  color: #f1f5f9;
}

[data-theme="dark"] .wwm-comparison-table td {
  border-bottom-color: #334155;
  color: #e2e8f0;
}

[data-theme="dark"] .wwm-comparison-table tbody tr:hover {
  background: #0f172a;
}

[data-theme="dark"] .wwm-cta-section {
  background: linear-gradient(135deg, #1e293b 0%, #162032 100%);
  border: 1px solid #607888;
}

[data-theme="dark"] .wwm-modal-content {
  background: #1e293b;
  border: 1px solid #607888;
}

[data-theme="dark"] .wwm-modal-header {
  border-bottom-color: #607888;
}

[data-theme="dark"] .wwm-modal-close {
  background: #0f172a;
  border-color: #607888;
  color: #e2e8f0;
}

[data-theme="dark"] .wwm-modal-close:hover {
  background: #1e293b;
  border-color: #7cb8f7;
}

[data-theme="dark"] .wwm-plan-details {
  background: #0f172a;
}

[data-theme="dark"] .wwm-form-input,
[data-theme="dark"] .wwm-form-textarea {
  background: #0f172a;
  border-color: #607888;
  color: #e2e8f0;
}

[data-theme="dark"] .wwm-form-input:focus,
[data-theme="dark"] .wwm-form-textarea:focus {
  border-color: #7cb8f7;
  box-shadow: 0 0 0 3px rgba(124, 184, 247, 0.15);
}

[data-theme="dark"] .wwm-next-steps {
  background: #0f172a;
}

[data-theme="dark"] .wwm-benefits {
  background: #1e293b;
}

[data-theme="dark"] .wwm-success-message {
  background: #064e3b;
  border-color: #059669;
  color: #8cf0b5;
}

/* ── Pricing standing lines + add-ons (new tier model) ──────────
   Styled with the existing --wwm-* tokens, which are redefined for
   dark mode on .wwm-wrapper, so these adapt automatically. */
/* Statement standing line — the "a published statement at every tier" mission.
   De-boxed: a quiet centred lead under the grid, not a bordered panel. */
.wwm-pricing-standing {
  margin: var(--wwm-spacing-xl) auto 0;
  max-width: 60rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--wwm-foreground);
  text-align: center;
}
.wwm-pricing-standing a { color: var(--wwm-primary); font-weight: 600; }

/* Fine print — pricing basis + VAT / ad-hoc notes as one quiet footnote group
   under a hairline, replacing the old stack of bordered "standing" boxes. */
.wwm-pricing-fineprint {
  margin: var(--wwm-spacing-2xl) auto 0;
  max-width: 60rem;
  padding-top: var(--wwm-spacing-lg);
  border-top: 1px solid var(--wwm-border);
  text-align: center;
}
.wwm-pricing-fineprint p {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--wwm-muted-foreground);
}
.wwm-pricing-fineprint p:last-child { margin-bottom: 0; }
.wwm-pricing-fineprint-lead {
  font-size: 0.95rem !important;
  color: var(--wwm-foreground) !important;
  margin-bottom: 0.75rem !important;
}
.wwm-pricing-fineprint a { color: var(--wwm-primary); font-weight: 600; }

.wwm-addons {
  margin: var(--wwm-spacing-2xl) auto 0;
  max-width: 60rem;
}
.wwm-addons-title {
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--wwm-foreground);
  margin: 0 0 var(--wwm-spacing-md);
  text-align: center;
}
/* Add-ons render on the shared .wwm-card / .wwm-grid-2 system (same pattern as
   Deliverables): a Phosphor icon, a name + monospace price line, then the
   description. Only the name/price line needs bespoke rules — the card shell,
   icon, description text and responsive grid all come from .wwm-card. */
.wwm-addon-name {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.6rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wwm-foreground);
  margin: 0 0 0.4rem;
}
.wwm-addon-price {
  font-family: var(--ds-font-mono);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--wwm-primary);
}

/* Per-package "Best for" / "Not included" lines — distinct from the ✓
   deliverables so they don't read like features. */
.wwm-pkg-meta {
  font-size: 0.85rem;
  line-height: 1.5;
  margin: 0.5rem 0 0;
}
.wwm-pkg-label {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 0.45rem;
  padding: 0.12rem 0.4rem;
  border-radius: 4px;
  vertical-align: 0.05em;
}
.wwm-pkg-audience { color: var(--wwm-foreground); }
.wwm-pkg-audience .wwm-pkg-label {
  background: var(--wwm-primary-light);
  color: var(--wwm-primary);
}
.wwm-pkg-excludes { color: var(--wwm-muted-foreground); }
.wwm-pkg-excludes .wwm-pkg-label {
  background: var(--wwm-muted);
  color: var(--wwm-muted-foreground);
}

/* Subsidy callout — the money hook, given real prominence. */
.wwm-subsidy-callout {
  margin: var(--wwm-spacing-lg) auto 0;
  max-width: 60rem;
  padding: 1rem 1.25rem 1rem 1.1rem;
  background: var(--wwm-accent);
  border: 1px solid var(--wwm-border);
  border-left: 4px solid var(--wwm-success);
  border-radius: 0 10px 10px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--wwm-foreground);
}
.wwm-subsidy-callout .wwm-subsidy-label {
  font-weight: 700;
  /* Design-system success-text token — flips per theme and passes AA on the
     callout in both: #065f46 on light (7.3:1), #8cf0b5 on dark (10.6:1). */
  color: var(--ds-success-text);
  margin-right: 0.4rem;
}
.wwm-subsidy-callout a { color: var(--wwm-primary); font-weight: 600; }

/* Risk-reversal strip under the pricing grid (was appended outside the old
   snippet's <style> block, so it never applied — fixed by folding it in here). */
.wwm-risk-reversal {
list-style: none;
margin: 1.25rem auto 0;
padding: 0;
max-width: 52rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem 1.5rem;
}
.wwm-risk-reversal li {
display: inline-flex;
align-items: center;
gap: 0.4rem;
font-size: 0.875rem;
font-weight: 600;
color: var(--ds-text-secondary, #475569);
}
.wwm-risk-reversal i {
color: var(--ds-success, #059669);
font-size: 1rem;
}
[data-theme="dark"] .wwm-risk-reversal li { color: #a8b5c4; }

/* ==========================================================================
   46 (cont.) — Connect rebuild: compact hero + Cal.com booking + ReUI contact.
   The old .connect-router / .connect-sidebar / .connect-card rules above are
   now unused (markup replaced); left in place for now, safe to prune later.
   ========================================================================== */
.connect-hero__eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-brand);
  margin: 0 0 0.5rem;
}
/* Tighter hero — the booking below is the real hero, so this just sets it up. */
.connect-hero { padding-top: 3rem; padding-bottom: 2rem; }

.connect-booking { max-width: 1000px; margin: 0 auto; padding: 1rem 2rem 2.5rem; }
.connect-booking__title {
  font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--ds-text-primary); margin: 0 0 0.5rem; text-align: center;
}
.connect-booking__note {
  max-width: 46rem; margin: 0 auto 1.5rem; text-align: center;
  font-size: 0.9375rem; line-height: 1.6; color: var(--ds-text-secondary);
}
.connect-cal {
  min-height: 200px;
  border: 1px solid var(--ds-border);
  border-radius: 0.75rem;
  background: var(--ds-surface);
  overflow: hidden;
}
.connect-cal__placeholder {
  display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
  padding: 3rem 1.5rem; text-align: center;
}
.connect-cal__fallback { margin: 0; font-size: 0.875rem; }
.connect-cal__fallback a { color: var(--ds-brand); }
.connect-cal__inline { width: 100%; min-height: 640px; }
.connect-cal__inline iframe { width: 100%; border: 0; }

.connect-contact {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start;
}
.connect-contact__title {
  font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.1; color: var(--ds-text-primary); margin: 0 0 1rem;
}
.connect-contact__lead {
  font-size: 1.0625rem; line-height: 1.65; color: var(--ds-text-secondary);
  margin: 0 0 2rem; max-width: 34rem;
}
.connect-contact__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.connect-contact__meta li { display: flex; flex-direction: column; gap: 0.15rem; font-size: 1rem; color: var(--ds-text-primary); }
.connect-contact__k {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ds-text-secondary);
}
.connect-contact__meta a { color: var(--ds-brand); text-decoration: none; }
.connect-contact__meta a:hover { text-decoration: underline; }
@media (min-width: 901px) {
  .connect-contact__intro { border-right: 1px solid var(--ds-border); padding-right: 3rem; }
}
@media (max-width: 900px) {
  .connect-contact { grid-template-columns: 1fr; gap: 2rem; }
}

[data-theme="dark"] .connect-cal { background: #1e293b; border-color: #607888; }
[data-theme="dark"] .connect-contact__intro { border-right-color: #607888; }
[data-theme="dark"] .connect-contact__title { color: #f1f5f9; }
[data-theme="dark"] .connect-contact__meta li { color: #e2e8f0; }
[data-theme="dark"] .connect-contact__lead,
[data-theme="dark"] .connect-contact__k { color: #a8b5c4; }
[data-theme="dark"] .connect-contact__meta a,
[data-theme="dark"] .connect-cal__fallback a { color: #7cb8f7; }

/* Social profile links (snippets/social-links.php) — footer + reusable. */
.jg-social {
  list-style: none;
  display: flex;
  gap: 0.5rem;
  margin: 0 0 1rem;
  padding: 0;
}
.jg-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border-radius: 8px;
  color: var(--ds-text-secondary, #475569);
  font-size: 1.25rem;
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.jg-social__link:hover { color: var(--ds-brand, #294557); background: var(--ds-surface-sunken, #f1f5f9); }
.jg-social__link:focus-visible { outline: 2px solid var(--ds-brand, #294557); outline-offset: 2px; }
[data-theme="dark"] .jg-social__link { color: #a8b5c4; }
[data-theme="dark"] .jg-social__link:hover { color: #7cb8f7; background: #1e293b; }

/* Social row inside the Connect contact column */
.connect-contact__social-label { margin: 1.75rem 0 0.6rem; }
.connect-contact .jg-social { margin-bottom: 0; }