/* ─────────────────────────────────────────────────────────────────
   Inspiration Theme — Design System (canonical tokens)

   All blocks consume these tokens. To restyle a deployment, override
   the tokens in user/<host>/config/themes/inspiration.yaml header_raw
   (or any deployment-scoped CSS) — every block updates automatically.

   NEVER hard-code colors, fonts, spacing, radii, or shadows in a
   per-block CSS module. Use these tokens.
   ───────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:wght@400;500;600;700;800&family=Fraunces:ital,opsz,wght@0,9..144,500;0,9..144,700;1,9..144,500&family=JetBrains+Mono:wght@500;600&display=swap');

:root {
  /* ── Palette — neutrals (always present) ─────────────────── */
  --ds-ink:           #0e0f0c;     /* primary text + dark backgrounds */
  --ds-ink-soft:      #4a4842;     /* secondary text */
  --ds-ink-mute:      #76736a;     /* tertiary text, captions */
  --ds-paper:         #fbf7ef;     /* primary breathing surface — neutralized yellow cast 2026-05-07 senior-ux */
  --ds-paper-2:       #f3ecda;     /* alternating section bg */
  --ds-sand:          #ecdfc1;     /* warmer ivory */
  --ds-cream:         #fff7e3;     /* lightest cream variant */
  --ds-rule:          #d8cfb8;     /* warm divider line on light bg */
  --ds-rule-dark:     rgba(255,255,255,.10);  /* divider on dark bg */
  --ds-steel:         #1d2731;     /* deep neutral charcoal */
  --ds-steel-2:       #2a3641;     /* steel hover/variant */

  /* ── Palette — accent colors (per-deployment overridable) ── */
  --ds-accent:        #b9492a;     /* primary accent (warmth/family) — clay */
  --ds-accent-dk:     #913619;     /* accent darker (hover, deep variants) */
  --ds-cta:           #e36218;     /* CTA color — single conversion accent — ember */
  --ds-cta-dk:        #bb4d0d;     /* CTA hover */
  --ds-trust:         #4d5e3a;     /* trust/guarantee accent — moss */
  --ds-trust-dk:      #3a482b;     /* trust hover */

  /* ── Semantic color roles for agents/modules ───────────────
     Hermes should change these role tokens, not individual module CSS.
     action = conversion CTA, selected = active tabs/pills, proof = trust,
     risk = danger/negative comparison. */
  --ds-action-bg:     var(--ds-cta-aa, var(--ds-cta-dk));
  --ds-action-fg:     var(--ds-cta-fg, #ffffff);
  --ds-action-border: var(--ds-action-bg);
  --ds-selected-bg:   var(--ds-action-bg);
  --ds-selected-fg:   var(--ds-action-fg);
  --ds-selected-border: var(--ds-action-border);
  --ds-proof-bg:      var(--ds-trust);
  --ds-proof-fg:      var(--ds-cream);
  --ds-proof-border:  var(--ds-trust-dk);
  --ds-risk-bg:       var(--ds-danger, #c0392b);
  --ds-risk-fg:       #ffffff;
  --ds-risk-border:   var(--ds-danger-dk, #991b1b);

  /* ── Typography ──────────────────────────────────────────── */
  --ds-font-display:  'Anton', 'Impact', 'Bebas Neue', sans-serif;
  --ds-font-serif:    'Fraunces', 'Source Serif Pro', Georgia, serif;
  --ds-font-body:     'DM Sans', system-ui, -apple-system, sans-serif;
  --ds-font-mono:     'JetBrains Mono', ui-monospace, monospace;

  --ds-fs-display-xl: clamp(2.6rem, 6vw, 5rem);     /* hero titles */
  --ds-fs-display-lg: clamp(2.2rem, 4.5vw, 3.4rem); /* section h2 */
  --ds-fs-display-md: clamp(1.8rem, 3.5vw, 2.6rem); /* sub-titles */
  --ds-fs-display-sm: 1.4rem;                       /* card titles */
  --ds-fs-body-lg:    1.25rem;     /* lead/intro paragraphs (20px) — bumped 2026-05-07 senior-ux */
  --ds-fs-body:       1.125rem;    /* default body (18px) — AARP recommended; was 1rem (16px) */
  --ds-fs-body-sm:    1rem;        /* secondary body (16px); never below WCAG min — was 0.92rem */
  --ds-fs-eyebrow:    0.875rem;    /* eyebrow labels (14px) — readable at arm's length; was 0.72rem */
  --ds-fs-h3:         1.5rem;      /* h3 default (24px) — DM Sans bold sentence-case; see .ds-h3-humane */
  --ds-fs-h4:         1.25rem;     /* h4 default (20px) — DM Sans semibold sentence-case; see .ds-h4-humane */

  /* ── Senior-UX rhythm tokens (2026-05-07) ─────────────────── */
  --ds-lh-body:       1.6;         /* body line-height — older readers need vertical breathing room */
  --ds-lh-display:    1.15;        /* display/heading line-height */

  /* ── Tap targets (AARP/Material 2026-05-07) ───────────────── */
  --ds-touch-target:         48px; /* min hit-area for any interactive element */
  --ds-touch-target-primary: 56px; /* primary CTA min height */
  --ds-touch-spacing:        8px;  /* min gap between adjacent targets */

  /* ── Focus ring (high-contrast on light + dark) ───────────── */
  --ds-focus-ring:      0 0 0 3px var(--ds-cta), 0 0 0 5px rgba(255,255,255,.95);
  --ds-focus-ring-dark: 0 0 0 3px var(--ds-cta), 0 0 0 5px rgba(0,0,0,.85);

  /* ── Spacing scale (rem) ─────────────────────────────────── */
  --ds-space-1:  0.25rem;
  --ds-space-2:  0.5rem;
  --ds-space-3:  0.75rem;
  --ds-space-4:  1rem;
  --ds-space-5:  1.5rem;
  --ds-space-6:  2rem;
  --ds-space-7:  3rem;
  --ds-space-8:  4.25rem;   /* default section vertical padding (desktop) */
  --ds-space-9:  6rem;

  /* Section padding (responsive) */
  --ds-section-py-lg: 4.25rem;  /* desktop */
  --ds-section-py-sm: 2.75rem;  /* mobile */

  /* ── Radii ───────────────────────────────────────────────── */
  --ds-radius-sm: 6px;
  --ds-radius:    8px;
  --ds-radius-lg: 8px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --ds-shadow-sm: 0 1px 2px rgba(14,15,12,.06), 0 2px 6px rgba(14,15,12,.04);
  --ds-shadow-md: 0 6px 18px rgba(14,15,12,.08), 0 2px 6px rgba(14,15,12,.05);
  --ds-shadow-lg: 0 24px 60px rgba(14,15,12,.18), 0 8px 18px rgba(14,15,12,.08);
  --ds-shadow-cta:0 10px 24px rgba(227,98,24,.32);
  --ds-shadow-warn:    0 4px 12px rgba(217, 118, 6, 0.30);     /* warm amber shadow */
  --ds-shadow-danger:  0 4px 12px rgba(192, 57, 43, 0.30);     /* error red */
  --ds-shadow-info:    0 4px 12px rgba(3, 105, 161, 0.30);     /* info blue */

  /* ── Section schemes (computed token aliases) ────────────── */
  /* Default scheme = paper (light, primary surface) */
  --scheme-bg:       var(--ds-paper);
  --scheme-fg:       var(--ds-ink);
  --scheme-fg-soft:  var(--ds-ink-soft);
  --scheme-fg-mute:  var(--ds-ink-mute);
  --scheme-rule:     var(--ds-rule);
  --scheme-card-bg:  #fff;
  --scheme-card-fg:  var(--ds-ink);

  /* Container widths */
  --ds-container-sm: 720px;
  --ds-container-md: 980px;
  --ds-container-lg: 1180px;
  --ds-container-xl: 1320px;

  /* ── Canonical breakpoints (W1-A7 — replaces 575/576/767/767.98/991/991.98/1024 stragglers) ─
     CSS variables cannot be referenced inside `@media (max-width: var(--x))`
     queries (CSS spec limitation), but these names document the canonical set.
     Always use the bare px values 600 / 768 / 992 / 1200 in @media queries. */
  --ds-bp-sm: 600px;
  --ds-bp-md: 768px;
  --ds-bp-lg: 992px;
  --ds-bp-xl: 1200px;

  /* ── W2-T7 (2026-05-08): Missing semantic-color tokens ───── */
  --ds-warn:        #d97706;   /* warning amber */
  --ds-warn-dk:     #92400e;
  --ds-danger:      #c0392b;   /* error red */
  --ds-danger-dk:   #991b1b;
  --ds-info:        #0369a1;   /* info blue */
  --ds-info-dk:     #075985;

  /* ── W2-T7: Missing radius tokens ───────────────────────── */
  --ds-radius-xs:   4px;       /* tight micro-radius */
  --ds-radius-pill: 999px;     /* pill / circle */

  /* ── W2-T7: Foreign-palette translation aliases ───────────
     The CRO blocks (cro-pain-tabs, cro-hero-form, cro-booking,
     cro-stats-carousel, cro-video-showcase, cro-faq, etc.) were
     authored against a Tailwind-style palette and grafted into
     this theme. These aliases let modules that DO use CSS-variable
     indirection (e.g. var(--brand-green, #10B981)) re-skin via
     --ds-* overrides. Modules with bare hex literals are migrated
     by W2-T7. */
  --brand-green:     var(--ds-trust);
  --brand-green-dk:  var(--ds-trust-dk);
  --gray-50:         var(--ds-paper-2);
  --gray-100:        var(--ds-paper-2);
  --gray-200:        var(--ds-rule);
  --gray-300:        var(--ds-rule);
  --gray-400:        var(--ds-ink-mute);
  --gray-500:        var(--ds-ink-mute);
  --gray-600:        var(--ds-ink-soft);
  --gray-700:        var(--ds-ink-soft);
  --gray-800:        var(--ds-ink);
  --gray-900:        var(--ds-ink);
  --slate-50:        var(--ds-paper-2);
  --slate-100:       var(--ds-paper-2);
  --slate-200:       var(--ds-rule);
  --slate-300:       var(--ds-rule);
  --slate-400:       var(--ds-ink-mute);
  --slate-500:       var(--ds-ink-mute);
  --slate-600:       var(--ds-ink-soft);
  --slate-700:       var(--ds-ink-soft);
  --slate-800:       var(--ds-ink);
  --slate-900:       var(--ds-steel);
  --color-secondary-normal-bg: var(--ds-ink);

  /* ── F10 (Wave 3, 2026-05-08): legacy CTA alias for primary button modules ──
     Sibling of --color-secondary-normal-bg (line above). Some legacy modules
     reference --color-primary-normal-bg directly without a fallback chain;
     define it here so they pick up the canonical CTA ember instead of UA defaults. */
  --color-primary-normal-bg: var(--ds-cta, #f56922);
}

/* ===== T3-TYPOGRAPHY — fluid type scale (Wave 7) ===== */
:root {
  --ds-fs-h1: clamp(2.25rem, 5vw, 4rem);
  --ds-fs-h2: clamp(1.75rem, 3.5vw, 3rem);
  --ds-fs-h3: clamp(1.25rem, 2.2vw, 1.75rem);
  --ds-fs-h4: clamp(1.125rem, 1.5vw, 1.25rem);
  --ds-fs-body: 1rem;
  --ds-fs-body-sm: 0.875rem;
  --ds-fs-fineprint: 0.8125rem;
  --ds-fs-eyebrow: 0.875rem;
  --ds-fs-lead: clamp(1.125rem, 1.4vw, 1.25rem);
  --ds-lh-tight: 1.05;
  --ds-lh-snug: 1.15;
  --ds-lh-normal: 1.55;
  --ds-lh-relaxed: 1.75;
}
/* Base type scale — applied if module doesn't override */
main h1, .h1 { font-size: var(--ds-fs-h1); line-height: var(--ds-lh-tight); font-weight: 700; letter-spacing: 0; }
main h2, .h2 { font-size: var(--ds-fs-h2); line-height: var(--ds-lh-snug); font-weight: 700; letter-spacing: 0; }
main h3, .h3 { font-size: var(--ds-fs-h3); line-height: var(--ds-lh-snug); font-weight: 600; }
main h4, .h4 { font-size: var(--ds-fs-h4); line-height: var(--ds-lh-snug); font-weight: 600; }
main p, main li, main td { line-height: var(--ds-lh-normal); }
main p { max-width: 65ch; }

/* ── Scheme: paper (default light) ─────────────────────────── */
.scheme-paper, .ds-scheme-paper {
  --scheme-bg: var(--ds-paper);
  --scheme-fg: var(--ds-ink);
  --scheme-fg-soft: var(--ds-ink-soft);
  --scheme-fg-mute: var(--ds-ink-mute);
  --scheme-rule: var(--ds-rule);
  --scheme-card-bg: #fff;
  --scheme-card-fg: var(--ds-ink);
}

/* ── Scheme: paper-2 (alternating ivory) ───────────────────── */
.scheme-paper-2, .ds-scheme-paper-2 {
  --scheme-bg: var(--ds-paper-2);
  --scheme-fg: var(--ds-ink);
  --scheme-fg-soft: var(--ds-ink-soft);
  --scheme-fg-mute: var(--ds-ink-mute);
  --scheme-rule: var(--ds-rule);
  --scheme-card-bg: #fff;
  --scheme-card-fg: var(--ds-ink);
}

/* ── Scheme: sand (warm ivory, feature/form section) ───────── */
.scheme-sand, .ds-scheme-sand {
  --scheme-bg: var(--ds-sand);
  --scheme-fg: var(--ds-ink);
  --scheme-fg-soft: var(--ds-ink-soft);
  --scheme-fg-mute: var(--ds-ink-mute);
  --scheme-rule: var(--ds-rule);
  --scheme-card-bg: #fff;
  --scheme-card-fg: var(--ds-ink);
}

/* ── Scheme: cream (lightest variant) ──────────────────────── */
.scheme-cream, .ds-scheme-cream {
  --scheme-bg: var(--ds-cream);
  --scheme-fg: var(--ds-ink);
  --scheme-fg-soft: var(--ds-ink-soft);
  --scheme-fg-mute: var(--ds-ink-mute);
  --scheme-rule: var(--ds-rule);
  --scheme-card-bg: #fff;
  --scheme-card-fg: var(--ds-ink);
}

/* ── Scheme: steel (deep neutral, photo/process sections) ──── */
.scheme-steel, .ds-scheme-steel, .section.dark.scheme-steel {
  --scheme-bg: var(--ds-steel);
  --scheme-fg: #fff;
  --scheme-fg-soft: rgba(255,247,227,.82);
  --scheme-fg-mute: rgba(255,247,227,.62);
  --scheme-rule: var(--ds-rule-dark);
  --scheme-card-bg: rgba(255,255,255,.04);
  --scheme-card-fg: #fff;
}

/* ── Scheme: ink (final CTA / highest-contrast dark) ───────── */
.scheme-ink, .ds-scheme-ink {
  --scheme-bg: var(--ds-ink);
  --scheme-fg: #fff;
  --scheme-fg-soft: rgba(255,247,227,.85);
  --scheme-fg-mute: rgba(255,247,227,.65);
  --scheme-rule: var(--ds-rule-dark);
  --scheme-card-bg: rgba(255,255,255,.06);
  --scheme-card-fg: #fff;
}

/* ── Scheme: accent (warm color section, e.g. stats) ───────── */
.scheme-accent, .ds-scheme-accent {
  --scheme-bg: var(--ds-accent);
  --scheme-fg: #fff;
  --scheme-fg-soft: rgba(255,247,227,.88);
  --scheme-fg-mute: rgba(255,247,227,.70);
  --scheme-rule: rgba(255,247,227,.20);
  --scheme-card-bg: rgba(255,247,227,.10);
  --scheme-card-fg: #fff;
}

/* ── Scheme: trust (moss green section, guarantees) ─────────── */
.scheme-trust, .ds-scheme-trust {
  --scheme-bg: var(--ds-trust);
  --scheme-fg: #fff;
  --scheme-fg-soft: rgba(255,247,227,.88);
  --scheme-fg-mute: rgba(255,247,227,.70);
  --scheme-rule: rgba(255,247,227,.20);
  --scheme-card-bg: rgba(255,247,227,.10);
  --scheme-card-fg: #fff;
}

/* ─────────────────────────────────────────────────────────────────
   Global type baseline (used by every block)
   ──────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: var(--ds-font-body);
  color: var(--ds-ink);
  background: var(--ds-paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.hero-title, .section-title h1, .section-title h2, .section-title h3 {
  font-family: var(--ds-font-display);
  font-weight: 400;
  letter-spacing: 0.005em;
  text-transform: none;
  color: inherit;
}

em {
  font-family: var(--ds-font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* When em appears inside a display heading, give it the accent color */
.hero-title em,
.section-title h1 em, .section-title h2 em, .section-title h3 em {
  color: var(--ds-accent);
}

/* ─────────────────────────────────────────────────────────────────
   Section primitive (any block extending modular/section.html.twig)
   ──────────────────────────────────────────────────────────── */
.section {
  background: var(--scheme-bg);
  color: var(--scheme-fg);
}
.section.section-lg { padding-top: var(--ds-section-py-lg); padding-bottom: var(--ds-section-py-lg); }
@media (max-width: 768px) {
  .section.section-lg { padding-top: var(--ds-section-py-sm); padding-bottom: var(--ds-section-py-sm); }
}
.section .section-title { margin-bottom: var(--ds-space-6); text-align: center; }
.section .section-title.text-left, .section .section-title.text-lg-left { text-align: left; }
.section .section-subtitle { text-align: center; }
@media (max-width: 768px) { .section .section-title { margin-bottom: var(--ds-space-5); } }
.section .section-title h1, .section .section-title h2, .section .section-title h3 { color: var(--scheme-fg); }
.section .section-subtitle, .section .section-subtitle p { color: var(--scheme-fg-soft); font-family: var(--ds-font-body); }
.section .section-title h2, .section .section-title h1 {
  font-size: var(--ds-fs-display-lg);
  line-height: 1;
  text-transform: uppercase;
}
.section .section-subtitle {
  font-size: var(--ds-fs-body-lg);
  max-width: var(--ds-container-sm);
  margin-left: auto; margin-right: auto;
  line-height: 1.55;
}

/* ─────────────────────────────────────────────────────────────────
   Buttons (.btn-primary, .ds-btn)
   ──────────────────────────────────────────────────────────── */
.btn-primary, .ds-btn {
  font-family: var(--ds-font-body);
  font-weight: 700;
  background: var(--ds-cta-aa, var(--ds-cta-dk)) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--ds-radius-sm) !important;
  padding: 1rem 1.6rem !important;
  font-size: var(--ds-fs-body) !important;
  letter-spacing: 0.005em;
  box-shadow: var(--ds-shadow-cta);
  transition: background .15s, transform .15s, box-shadow .15s;
  display: inline-flex !important;
  align-items: center;
  gap: .45rem;
  text-decoration: none !important;
}
.btn-primary:hover, .ds-btn:hover {
  background: var(--ds-cta-dk) !important;
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(227,98,24,.45);
}

/* Ghost button — outline on dark bg */
.btn-ghost, .ds-btn-ghost {
  background: rgba(255,255,255,.10) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,.4) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: none !important;
}

/* ─────────────────────────────────────────────────────────────────
   Card primitive (.ds-card)
   ──────────────────────────────────────────────────────────── */
.ds-card {
  background: var(--scheme-card-bg);
  color: var(--scheme-card-fg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-sm);
}

/* ─────────────────────────────────────────────────────────────────
   Eyebrow (small uppercase label)
   ──────────────────────────────────────────────────────────── */
.ds-eyebrow {
  display: inline-block;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-cta);
  padding: 0;
  margin: 0 0 var(--ds-space-3) 0;
}

/* ─────────────────────────────────────────────────────────────────
   Component recipes — UNIFIED across all 64 blocks.
   Per ui-ux-pro-max audit (2026-04-28): block library was "jumping"
   because each block made independent calls on radius / shadow /
   hover / padding / image. These recipes are the single source.

   Block CSS modules MUST consume these via @extend-style composition
   (cascade-layered) rather than defining their own.
   ──────────────────────────────────────────────────────────── */

/* ── Animation timing (one rhythm for the whole library) ─── */
:root {
  --ds-ease:           cubic-bezier(.2,.7,.2,1);
  --ds-ease-out:       cubic-bezier(.2,.8,.2,1);
  --ds-duration-fast:  150ms;
  --ds-duration:       240ms;
  --ds-duration-slow:  360ms;
}

/* ── Card primitive (extends earlier .ds-card) ──────────── */
.ds-card,
.section .card,
.section .ds-card {
  background: var(--scheme-card-bg);
  color: var(--scheme-card-fg);
  border: 1px solid var(--scheme-rule);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
  transition: transform var(--ds-duration) var(--ds-ease-out),
              box-shadow var(--ds-duration) var(--ds-ease-out),
              border-color var(--ds-duration) var(--ds-ease-out);
}
.ds-card-interactive:hover,
.section .card:hover {
  transform: translateY(-2px);
  border-color: var(--ds-accent);
  box-shadow: var(--ds-shadow-md);
}
.ds-card .card-body,
.section .card .card-body { padding: var(--ds-space-5); }
@media (max-width: 600px) {
  .ds-card .card-body, .section .card .card-body { padding: var(--ds-space-4); }
}

/* ── Image frame (consistent across all photo treatments) ── */
.ds-image,
.section .card img.img-fluid,
.section .ds-image {
  display: block;
  width: 100%;
  border-radius: var(--ds-radius-sm);
  object-fit: cover;
}
.ds-image-hero { aspect-ratio: 16 / 9; }
.ds-image-card { aspect-ratio: 4 / 3; }
.ds-image-square { aspect-ratio: 1 / 1; }
.ds-image-portrait { aspect-ratio: 3 / 4; }

/* ── Eyebrow label (mono uppercase, used by every block needing one) ── */
.ds-eyebrow,
.section .eyebrow {
  display: inline-block;
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-cta);
  margin: 0 0 var(--ds-space-3) 0;
}

/* ── Check list (used by features-list, bulletpoints, cta, why-acme, form pitch) ── */
.ds-checks,
.section .has-list-checked ul,
.has-list-checked ul,
.section .check-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--ds-space-5) 0;
}
.ds-checks li,
.section .has-list-checked ul li,
.has-list-checked ul li,
.section .check-list li {
  position: relative;
  padding: var(--ds-space-2) 0 var(--ds-space-2) calc(var(--ds-space-5) + .35rem);
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  line-height: 1.55;
  color: var(--scheme-fg);
}
.ds-checks li::before,
.section .has-list-checked ul li::before,
.has-list-checked ul li::before,
.section .check-list li::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: .65rem !important;
  width: 1.4rem !important;
  height: 1.4rem !important;
  margin: 0 !important;
  display: block !important;
  background: var(--ds-trust);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") !important;
  background-size: 65% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  border-radius: 50%;
}

/* ── Badge / pill (small uppercase indicator) ───────────── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  font-family: var(--ds-font-mono);
  font-size: var(--ds-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border-radius: 999px;
  background: var(--ds-cream);
  color: var(--ds-ink);
}
.ds-badge-trust { background: var(--ds-trust); color: var(--ds-cream); }
.ds-badge-cta   { background: var(--ds-cta); color: #fff; }
.ds-badge-accent{ background: var(--ds-accent); color: var(--ds-cream); }

/* ── Icon system (consistent stroke + color treatment) ──── */
.ds-icon {
  display: inline-block;
  vertical-align: middle;
  width: 1.25rem;
  height: 1.25rem;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ds-icon-lg { width: 1.75rem; height: 1.75rem; }
.ds-icon-xl { width: 2.5rem; height: 2.5rem; }

/* ── Section header alignment helpers ───────────────────── */
.section .section-title.text-left,
.section .section-title.text-lg-left { text-align: left; }
.section .section-title.text-left .section-subtitle,
.section .section-title.text-lg-left + .section-subtitle { text-align: left; margin-left: 0; }

/* ── Focus ring (every interactive element) ─────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ds-cta);
  outline-offset: 3px;
  border-radius: var(--ds-radius-sm);
}

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

/* ── Skip-link (W4-A49) ─────────────────────────────────── */
/* Visible only when focused; hidden offscreen otherwise. */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--ds-cta);
  color: var(--ds-paper);
  padding: 8px 16px;
  z-index: 1000;
  text-decoration: none;
  font-weight: 600;
  border-radius: 0 0 var(--ds-radius-sm) 0;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid #fff;
  outline-offset: -4px;
}

/* ─────────────────────────────────────────────────────────────────
   Senior-UX base + utility layer (added 2026-05-07)
   - Hard floor on body legibility for older readers (presbyopia 45+).
   - Utility classes for per-block CSS to opt into without rewrites.
   - Honors prefers-reduced-motion.
   ───────────────────────────────────────────────────────────────── */

html { font-size: 100%; }   /* defer to user/browser zoom; never set px on html */

body {
  font-family: var(--ds-font-body);
  font-size: var(--ds-fs-body);
  line-height: var(--ds-lh-body);
  color: var(--scheme-fg);
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

p, li, dd, dt, blockquote, figcaption, label {
  font-size: var(--ds-fs-body);
  line-height: var(--ds-lh-body);
}

h1, h2, h3, h4, h5, h6 { line-height: var(--ds-lh-display); }
h3 { font-family: var(--ds-font-body); font-size: var(--ds-fs-h3); font-weight: 700; text-transform: none; letter-spacing: 0; }
h4 { font-family: var(--ds-font-body); font-size: var(--ds-fs-h4); font-weight: 600; text-transform: none; letter-spacing: 0; }

/* Body links: never colour-only — always underlined for older readers */
.ds-prose a, p a, li a, dd a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}

/* Universal focus-visible — every interactive element gets a high-contrast ring */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--ds-focus-ring);
  border-radius: var(--ds-radius-sm);
}
.scheme-ink a:focus-visible, .scheme-steel a:focus-visible,
.scheme-ink button:focus-visible, .scheme-steel button:focus-visible {
  box-shadow: var(--ds-focus-ring-dark);
}

/* Form fields min height */
input[type="text"], input[type="email"], input[type="tel"], input[type="number"],
input[type="search"], input[type="url"], select, textarea {
  min-height: var(--ds-touch-target);
  font-size: var(--ds-fs-body);
  line-height: var(--ds-lh-body);
}

/* Button base — global hit-target floor for any element acting as a button */
button, .btn, [role="button"], input[type="submit"], input[type="button"] {
  min-height: var(--ds-touch-target);
  padding: 0 1rem;
}

/* ── Utility classes (opt-in for per-block CSS) ──────────────── */
.ds-text-body  { font-size: var(--ds-fs-body);    line-height: var(--ds-lh-body); color: var(--scheme-fg); }
.ds-text-lg    { font-size: var(--ds-fs-body-lg); line-height: var(--ds-lh-body); }
.ds-text-sm    { font-size: var(--ds-fs-body-sm); line-height: var(--ds-lh-body); }
.ds-eyebrow    { font-size: var(--ds-fs-eyebrow); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.ds-h3-humane  { font-family: var(--ds-font-body); font-size: var(--ds-fs-h3); font-weight: 700; line-height: var(--ds-lh-display); text-transform: none; letter-spacing: 0; }
.ds-h4-humane  { font-family: var(--ds-font-body); font-size: var(--ds-fs-h4); font-weight: 600; line-height: var(--ds-lh-display); text-transform: none; letter-spacing: 0; }
.ds-tap-min    { min-height: var(--ds-touch-target); min-width: var(--ds-touch-target); }
.ds-tap-cta    { min-height: var(--ds-touch-target-primary); min-width: var(--ds-touch-target-primary); padding: 0 1.25rem; }
.ds-focus      { outline: none; }
.ds-focus:focus-visible { box-shadow: var(--ds-focus-ring); }

/* Honor prefers-reduced-motion for the entire site (older users + vestibular sensitivity) */
@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;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Sweep 2026-05-08: targeted defense against the legacy
   theme.min.css `#features ul li::before` global checkmark leak.

   Strategy: we ONLY nullify ::before on specific module wrappers
   that we know don't want checkmarks. We don't blanket-disable on
   ".section ul" because some modules (cta, cro-faq benefits, etc.)
   correctly opt into checkmarks via a `.has-list-checked` ancestor.

   If a future module suffers the leak, add its container selector
   to this list rather than touching the legacy theme rule.
   ───────────────────────────────────────────────────────────────── */
.icons-text-grid li::before,
.icons-text-grid > li::before,
.icons-grid li::before,
.features-grid li::before,
.features-list-grid li::before,
.feature-card li::before,
.feature-card::before,
.brand-grid li::before,
.numbers-grid li::before,
.compare-grid li::before,
.cro-stats-list li::before,
.client-grid li::before,
.testimonial-grid li::before,
.icons-text-card-wrapper::before,
.icons-text-card-wrapper > li::before,
.icons-list li::before,
.bulletpoints-list:not(.has-list-checked) li::before {
  background-image: none !important;
  background: transparent !important;
  content: none !important;
}

/* ── Senior-UX form-label floor (W2-T10 / 2026-05-08) ─────────
   Form bearing modules across the catalog ship 13–15px labels.
   Force a senior-friendly floor so all form modules pass AAA. */
.module label,
.module .form-label,
form label,
form .form-label,
.faq-form label,
.contact-form label,
.cro-form label,
.faq-form-search input,
.faq-form-search input::placeholder,
.qualifier-label-pill,
.qualifier-pill,
.cro-hero-form .qualifier-label-pill {
  font-size: var(--ds-fs-body, 1.125rem) !important;
  line-height: var(--ds-lh-body, 1.6) !important;
}

/* ── Senior-UX eyebrow floor (F-DS-EXT / 2026-05-08) ─────────
   Several CRO modules ship eyebrows/meta-pills at 11-13.6px.
   Force the AAA-readable floor (14px) on all eyebrow patterns. */
.section-eyebrow,
.cro-eyebrow,
.eyebrow,
[class*="-eyebrow"],
[class*="meta-pill"],
[class*="trust-pill"]:not([class*="industry"]),
.pre-headline,
.cro-pre-headline,
.cro-section-eyebrow,
.cro-meta-pill,
.cro-trust-pill,
.acme-eyebrow {
  font-size: var(--ds-fs-eyebrow, 0.875rem) !important;
  line-height: 1.4 !important;
}

/* ── Global header nav tap-target floor (F-DS-EXT / 2026-05-08) ─
   Site-header navigation buttons at 48px hit minimum AAA;
   bump to 48px secondary-floor for senior users. */
.site-header__nav a,
.site-header__nav button,
header.acme-header a,
header.acme-header button,
.acme-header__cta,
.acme-header__nav-link,
nav.site-nav a,
nav.site-nav button {
  min-height: var(--ds-touch-target, 48px);
  display: inline-flex;
  align-items: center;
}

/* ── P-FV2-FIX 2026-05-08: F-DS-EXT selector miss — rendered class is
   .faq-search / .faq-search-label (NOT .faq-form-search). Earlier rule
   targeted .faq-form-search input which never matched, and there was no
   label selector at all. Lift the FAQ search label to senior-UX 18 px floor
   AND add .faq-trust-label to the eyebrow/fineprint floor (was 13.6 px
   on 375 — below the 14 px AAA fineprint target). */
.faq-search-label,
.faq-search-label *,
.faq-search label,
.faq-search input,
.faq-search input::placeholder {
  font-size: var(--ds-fs-body, 1.125rem) !important;
  line-height: var(--ds-lh-body, 1.6) !important;
}
.faq-trust-label,
.faq .trust-label {
  font-size: var(--ds-fs-eyebrow, 0.875rem) !important;
  line-height: 1.4 !important;
}

/* ─────────────────────────────────────────────────────────────────
   F3 (2026-05-08) — WCAG-AA fix for site-wide white-on-orange CTA
   pattern. Audit A4 measured #fff on --ds-cta (#e36218) at 3.48:1
   (FAILS WCAG-AA 4.5:1 for normal text).

   Fix: introduce --ds-cta-aa as the AA-compliant CTA background for
   any control that paints WHITE text on ember orange. Default value
   (#bb4d0d, the canonical CTA-dark) yields 4.91:1 (PASSES AA) and
   matches an already-published token (--ds-cta-dk) for visual
   continuity. Modules continue to use --ds-cta for tints/borders/
   focus rings — only the *button surface beneath white text* swaps
   to --ds-cta-aa.

   Hermes re-skin still works: deployments override --ds-cta-aa (or
   the upstream --ds-cta) in their YAML header_raw to retune.

   This rule is intentionally appended at file end so it cascades
   over per-module CTA backgrounds without touching token decl-
   arations at the top of design-system.css (F5 owns that area).

   NOTE: Do NOT rewrite --ds-cta itself — orange-tinted backgrounds
   (e.g. .pricing-card.is-recommended price-wrap, callouts, ticker
   gradients) need the brighter 0.06–0.14 alpha mix to read as
   ember-orange. We only darken the OPAQUE button surface that
   carries WHITE text.
   ──────────────────────────────────────────────────────────────── */
:root {
  /* AA-compliant CTA surface for white-text contexts.
     #bb4d0d on #fff = 4.91:1 (passes WCAG-AA normal text, AAA large).
     Falls back to --ds-cta-dk for older browsers or Hermes overrides. */
  --ds-cta-aa: var(--ds-cta-dk, #bb4d0d);
}

/* Apply to canonical CTA classes that ship white-text. Selectors are
   conservative: they only hit elements already styled as primary
   action buttons on an orange background. Per-module rules using
   `background: var(--ds-cta)` + `color: #fff` are upgraded here
   without touching their files. */
.btn-cta,
.ds-cta,
.ds-btn-cta,
[data-cta="primary"],
.btn-primary[style*="--ds-cta"],
.cta-primary[style*="--ds-cta"] {
  background-color: var(--ds-cta-aa, #bb4d0d) !important;
  color: #fff !important;
}
.btn-cta:hover,
.ds-cta:hover,
.ds-btn-cta:hover,
[data-cta="primary"]:hover {
  background-color: color-mix(in srgb, var(--ds-cta-aa, #bb4d0d) 88%, #000) !important;
  color: #fff !important;
}

/* ===== T3-BUTTON-SYSTEM — unified button styles (Wave 7) ===== */
/* Reset default button appearance globally so unclassed <button> elements look intentional */
main button:where(:not([class*="btn"])):not(.tab-pill-compact):not(.chapter-pill):not(.swiper-button-next):not(.swiper-button-prev):not(.owl-prev):not(.owl-next):not(.slick-prev):not(.slick-next):not(.close):not([aria-label="Close"]) {
  font: inherit;
  cursor: pointer;
  padding: 12px 20px;
  border-radius: 8px;
  border: 1px solid var(--ds-rule, rgba(0,0,0,0.12));
  background: var(--ds-paper, #fff);
  color: var(--ds-ink, #0F172A);
  font-weight: 500;
  transition: all 0.15s ease;
}
main button:where(:not([class*="btn"])):hover { background: var(--ds-paper-2, #F8FAFC); }

/* Branded button system */
.btn,
a.btn,
button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  border: 1px solid transparent;
  font-family: var(--ds-font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  min-height: 48px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
  -webkit-appearance: none;
}
.btn:focus-visible {
  outline: 2px solid var(--ds-cta);
  outline-offset: 2px;
}
.btn-primary,
.btn.btn-primary {
  background: var(--ds-cta-aa, var(--ds-cta-dk));
  color: var(--ds-cta-fg, #fff);
  border-color: var(--ds-cta-aa, var(--ds-cta-dk));
}
.btn-primary:hover { background: var(--ds-cta-dk, var(--ds-cta)); border-color: var(--ds-cta-dk, var(--ds-cta)); transform: translateY(-1px); box-shadow: 0 4px 12px color-mix(in srgb, var(--ds-cta) 30%, transparent); }

.btn-secondary,
.btn.btn-secondary {
  background: var(--ds-ink);
  color: var(--ds-paper);
  border-color: var(--ds-ink);
}
.btn-secondary:hover { background: var(--ds-trust); border-color: var(--ds-trust); }

.btn-outline,
.btn.btn-outline {
  background: transparent;
  color: var(--ds-ink);
  border-color: var(--ds-ink);
}
.btn-outline:hover { background: var(--ds-ink); color: var(--ds-paper); }

.btn-lg { padding: 16px 32px; font-size: 1.125rem; min-height: 56px; }
.btn-sm { padding: 8px 16px; font-size: 0.875rem; min-height: 36px; }

/* Disabled state */
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ──────────────────────────────────────────────────────────────
   GUARDRAIL 2026-05-08 — scheme-aware contrast for dark sections
   ─────────────────────────────────────────────────────────────
   Any element placed inside a dark-scheme container that hardcodes
   `--ds-ink` for color/border breaks contrast. These rules establish
   a safety net: any outline button or link inside any dark-scheme
   container inherits --scheme-fg (white on dark schemes).
   Dark schemes: scheme-steel, scheme-ink, scheme-accent, scheme-trust.
   This is defensive — modules SHOULD use --scheme-fg directly,
   but this catches the common mistake automatically.
   ────────────────────────────────────────────────────────────── */

.scheme-steel, .ds-scheme-steel,
.scheme-ink, .ds-scheme-ink,
.scheme-accent, .ds-scheme-accent,
.scheme-trust, .ds-scheme-trust {
  /* Re-bind --ds-ink locally so any descendant that hardcodes it
     still resolves to a visible color on dark backgrounds. This is a
     net, not a replacement — modules should still prefer --scheme-fg.
     We do NOT touch --ds-paper because the CTA surface stays cream. */
  --ds-ink: var(--scheme-fg);
  --ds-ink-soft: var(--scheme-fg-soft);
  --ds-ink-mute: var(--scheme-fg-mute);
}

/* Outline buttons explicitly track the scheme. */
.scheme-steel .btn-outline,
.scheme-steel .btn-outline-primary,
.scheme-steel .btn.btn-outline,
.scheme-steel .btn.btn-outline-primary,
.scheme-ink .btn-outline,
.scheme-ink .btn-outline-primary,
.scheme-ink .btn.btn-outline,
.scheme-ink .btn.btn-outline-primary,
.scheme-accent .btn-outline,
.scheme-accent .btn-outline-primary,
.scheme-accent .btn.btn-outline,
.scheme-accent .btn.btn-outline-primary,
.scheme-trust .btn-outline,
.scheme-trust .btn-outline-primary,
.scheme-trust .btn.btn-outline,
.scheme-trust .btn.btn-outline-primary {
  background: transparent;
  color: var(--scheme-fg);
  border-color: currentColor;
}
.scheme-steel .btn-outline:hover,
.scheme-steel .btn-outline-primary:hover,
.scheme-steel .btn.btn-outline:hover,
.scheme-steel .btn.btn-outline-primary:hover,
.scheme-ink .btn-outline:hover,
.scheme-ink .btn-outline-primary:hover,
.scheme-ink .btn.btn-outline:hover,
.scheme-ink .btn.btn-outline-primary:hover,
.scheme-accent .btn-outline:hover,
.scheme-accent .btn-outline-primary:hover,
.scheme-accent .btn.btn-outline:hover,
.scheme-accent .btn.btn-outline-primary:hover,
.scheme-trust .btn-outline:hover,
.scheme-trust .btn-outline-primary:hover,
.scheme-trust .btn.btn-outline:hover,
.scheme-trust .btn.btn-outline-primary:hover {
  background: var(--scheme-fg);
  color: var(--scheme-bg);
  border-color: var(--scheme-fg);
}