/* ─────────────────────────────────────────────────────────────────
   Block: banner
   North-American CRO direct-response banner.
   T1 (2026-05-06)  — eyebrow, secondary CTA, helper text, trust badges,
                      alignment toggle, focus-visible, fluid type.
   W9-A8 (2026-05-07) — silver gradient killed; ink/cta/paper variants;
                      reveal animation; first-hover CTA pulse.
   W9-A12 (2026-05-07) — CRO redo: killed 4px CTA-orange left-border,
                      killed corner chip, added 2-column grid (copy +
                      anchor card), pulsing live-dot eyebrow, phone CTA,
                      risk-reversal pills, trust strip, 3-up stats card,
                      testimonial anchor, image anchor.
   ───────────────────────────────────────────────────────────── */

.block-banner {
    background: var(--scheme-bg);
    color: var(--scheme-fg);
    font-family: var(--ds-font-body);
}

/* ── Card shell ─────────────────────────────────────────────── */
.block-banner .banner-card {
    /* Default: dark style (ink) — overridden by .banner-style-* */
    /* WAVE3-F01 2026-05-08: applied Pattern B (local scheme rebind) so this
       self-styled dark card no longer inherits scheme-fg from the outer
       section. Descendants reading var(--scheme-fg) / var(--scheme-bg) /
       var(--ds-ink) now resolve against the card's own palette. See
       /dev-files/audits-2026-05-08-hermes-ready/COLOR-CONTRAST-DOCTRINE.md
       (Case study row "cro-block-1") for prior precedent.
       WAVE4.5-H2 2026-05-08: REG-2 fix. The previous form referenced
       var(--ds-ink) and var(--ds-paper) for --scheme-bg/--scheme-fg in the
       SAME block where --ds-ink was rebound to var(--ds-paper). CSS resolves
       all custom properties after the entire block is parsed, so the
       rebound --ds-ink fed back into --scheme-bg, collapsing bg = fg = ink
       (1.0 contrast, 12 fails on /dev-modules/banner). The doctrine
       (anti-pattern row 6) flags exactly this. Fix: paint with LITERAL
       canonical hex (#0e0f0c / #fbf7ef) so the structural definitions are
       independent of the defensive --ds-ink rebind. */
    --scheme-bg: #0e0f0c;          /* canonical --ds-ink, literal */
    --scheme-fg: #fbf7ef;          /* canonical --ds-paper, literal */
    --scheme-fg-soft: rgba(251, 247, 239, 0.85);
    --scheme-fg-mute: rgba(251, 247, 239, 0.65);
    --scheme-rule: rgba(251, 247, 239, 0.18);
    --scheme-card-bg: rgba(251, 247, 239, 0.06);
    /* Defensive map for descendants that mistakenly reach for ds-ink directly. */
    --ds-ink: #fbf7ef;
    --ds-ink-soft: rgba(251, 247, 239, 0.85);
    --ds-ink-mute: rgba(251, 247, 239, 0.65);

    background-color: #0e0f0c;     /* LITERAL paint — bypasses the rebind */
    color: #fbf7ef;                /* LITERAL paint — bypasses the rebind */
    padding-block: clamp(var(--ds-space-6), 6vw, var(--ds-space-8));
    padding-inline: clamp(var(--ds-space-5), 5vw, var(--ds-space-7));
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-md);
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.block-banner .banner-card > * { position: relative; z-index: 2; }

/* ── Style variants ─────────────────────────────────────────── */
/* WAVE3-F01 2026-05-08: each banner-style-* variant rebinds the full set of
   scheme tokens locally (Pattern B), so the variant's intended palette
   reaches every descendant — including descendants that read --scheme-fg
   directly (e.g. .banner-text via `color: inherit` cascade) and any
   third-party module dropped into the banner-content slot. */

/* Dark (default): ink background. NO left-border, NO corner-chip
   (W9-A12 — owner explicitly called those out as "ugly line bar"). */
/* WAVE4.5-H2 2026-05-08: same REG-2 cascade-order fix as .banner-card. The
   prior form set --scheme-bg: var(--ds-ink); --ds-ink: var(--ds-paper);
   --ds-paper: #0e0f0c — a 3-step rebind chain that collapses --scheme-bg to
   #0e0f0c when --ds-paper is the rebound value (still ink, still safe by
   accident here, but --scheme-fg = var(--ds-paper) ALSO resolves to #0e0f0c
   → bg = fg → 1.0 contrast). Replace structural --scheme-bg / --scheme-fg
   with literal canonical hex; keep defensive --ds-ink / --ds-paper rebinds
   for descendants. Paint via literals. */
.block-banner .banner-card.banner-style-dark {
    --scheme-bg: #0e0f0c;          /* canonical --ds-ink, literal */
    --scheme-fg: #fbf7ef;          /* canonical --ds-paper, literal */
    --scheme-fg-soft: rgba(251, 247, 239, 0.85);
    --scheme-fg-mute: rgba(251, 247, 239, 0.65);
    --scheme-rule: rgba(251, 247, 239, 0.18);
    --scheme-card-bg: rgba(251, 247, 239, 0.06);
    --ds-ink: #fbf7ef;
    --ds-ink-soft: rgba(251, 247, 239, 0.85);
    --ds-ink-mute: rgba(251, 247, 239, 0.65);
    --ds-paper: #0e0f0c; /* swap so any descendant reading --ds-paper for fg gets ink */
    background-color: #0e0f0c;     /* LITERAL paint */
    color: #fbf7ef;                /* LITERAL paint */
}

/* CTA (orange) — high-energy. */
/* WAVE4.5-H2 2026-05-08: REG-2 fix. The previous form set
   --scheme-fg: var(--ds-paper) and --ds-ink: var(--ds-paper) in the same
   block. While --ds-paper itself is NOT rebound here (so the chain wouldn't
   strictly collapse), the same Pattern-B trap applies to descendants that
   later read --ds-ink for an explicit color slot — the rebound resolves to
   paper which is correct, but the rebound value cannot leak into
   --scheme-fg. Pin to literal canonical paper for safety + parity with the
   .banner-style-dark / .banner-style-paper variants. */
.block-banner .banner-card.banner-style-cta {
    --scheme-bg: var(--ds-cta);    /* orange — not in the rebind chain */
    --scheme-fg: #fbf7ef;          /* canonical --ds-paper, literal */
    --scheme-fg-soft: rgba(251, 247, 239, 0.85);
    --scheme-fg-mute: rgba(251, 247, 239, 0.65);
    --scheme-rule: rgba(251, 247, 239, 0.22);
    --scheme-card-bg: rgba(251, 247, 239, 0.08);
    --ds-ink: #fbf7ef;
    --ds-ink-soft: rgba(251, 247, 239, 0.85);
    --ds-ink-mute: rgba(251, 247, 239, 0.65);
    background-color: var(--ds-cta, #e36218);  /* paint via --ds-cta token (not rebound) */
    color: #fbf7ef;                /* LITERAL paint */
}

/* Paper — light surface, ink text. */
/* WAVE4.5-H2 2026-05-08: hardened to paint via canonical literal hex for
   parity with .banner-card / .banner-style-dark / .banner-style-cta. The
   prior form was already safe (--ds-paper not rebound here, --ds-ink set
   to canonical), but using literals keeps the four card variants
   structurally identical and keeps any future descendant rebind from
   being able to collapse this block. */
.block-banner .banner-card.banner-style-paper {
    --scheme-bg: #fbf7ef;          /* canonical --ds-paper, literal */
    --scheme-fg: #0e0f0c;          /* canonical --ds-ink, literal */
    --scheme-fg-soft: color-mix(in srgb, #0e0f0c 78%, transparent);
    --scheme-fg-mute: color-mix(in srgb, #0e0f0c 60%, transparent);
    --scheme-rule: color-mix(in srgb, #0e0f0c 12%, transparent);
    --scheme-card-bg: color-mix(in srgb, #0e0f0c 4%, transparent);
    /* Restore canonical --ds-ink so descendants that reach for it still
       get the dark ink color on this light card. */
    --ds-ink: #0e0f0c;
    --ds-ink-soft: color-mix(in srgb, #0e0f0c 78%, transparent);
    --ds-ink-mute: color-mix(in srgb, #0e0f0c 60%, transparent);
    background-color: #fbf7ef;     /* LITERAL paint */
    color: #0e0f0c;                /* LITERAL paint */
}

/* Subtle 2-3% sheen — depth without wash. */
.block-banner .banner-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 88% 12%, rgba(255,255,255,0.025) 0, transparent 40%),
        radial-gradient(circle at 8% 92%, rgba(255,255,255,0.02) 0, transparent 45%);
    pointer-events: none;
    border-radius: inherit;
    z-index: 1;
}
.block-banner .banner-card.banner-style-paper::before {
    /* WAVE3-F01: align sheen literal to canonical --ds-ink (#0e0f0c). */
    background:
        radial-gradient(circle at 88% 12%, rgba(14,15,12,0.025) 0, transparent 40%),
        radial-gradient(circle at 8% 92%, rgba(14,15,12,0.02) 0, transparent 45%);
}

/* ── Layout grid (copy + anchor) ────────────────────────────── */
.block-banner .banner-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-6);
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
@media (min-width: 600px) {
    .block-banner .banner-grid.has-anchor {
        grid-template-columns: 1fr 1fr;
        gap: var(--ds-space-7);
    }
}
@media (min-width: 992px) {
    .block-banner .banner-grid.has-anchor {
        grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
        gap: var(--ds-space-8);
    }
}

/* ── Copy stack ─────────────────────────────────────────────── */
.block-banner .banner-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ds-space-3);
    text-align: left;
    min-width: 0;
}
.block-banner.align-center .banner-content {
    align-items: center;
    text-align: center;
}

/* ── Eyebrow with pulsing live-dot ──────────────────────────── */
.block-banner .banner-eyebrow {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    color: var(--ds-cta);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-eyebrow);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.2;
}
.block-banner .banner-card.banner-style-cta .banner-eyebrow { color: var(--ds-ink); }

.block-banner .banner-eyebrow .banner-live-dot {
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    border-radius: 50%;
    background: var(--ds-cta);
    box-shadow: var(--ds-shadow-cta);
    animation: banner-live-pulse 1.4s var(--ds-ease, ease-in-out) infinite;
    flex-shrink: 0;
}
.block-banner .banner-card.banner-style-cta .banner-eyebrow .banner-live-dot {
    /* WAVE3-F01: align literal to canonical --ds-ink (#0e0f0c) — was rgb(26,26,26). */
    background: var(--ds-ink);
    box-shadow: 0 0 0 0.18em rgba(14, 15, 12, 0.2);
}
@keyframes banner-live-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}

/* ── Typography ─────────────────────────────────────────────── */
.block-banner h1,
.block-banner h2,
.block-banner h3,
.block-banner .banner-headline {
    font-family: var(--ds-font-display);
    font-size: clamp(2rem, 5vw, 3.5rem);
    line-height: 1.02;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: inherit;
    margin: 0 0 var(--ds-space-3) 0;
}

.block-banner h4,
.block-banner h5,
.block-banner h6 {
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-display-sm);
    margin: 0 0 var(--ds-space-3) 0;
    color: inherit;
}

.block-banner p {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-lg);
    line-height: var(--ds-lh-body, 1.6);
    margin-bottom: var(--ds-space-4);
    color: inherit;
    /* SENIOR-T2: full opacity for AAA 7:1 body contrast */
    opacity: 1;
    max-width: 56ch;
}
.block-banner.align-center p { margin-inline: auto; }

.block-banner em {
    font-family: var(--ds-font-serif);
    font-style: italic;
    color: var(--ds-cta);
}
.block-banner .banner-card.banner-style-cta em { color: var(--ds-ink); }

.block-banner a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.block-banner .banner-text {
    /* SENIOR-T2: 18px AAA floor */
    font-size: clamp(var(--ds-fs-body), 1.8vw, var(--ds-fs-body-lg));
    color: inherit;
    line-height: var(--ds-lh-body, 1.6);
    max-width: 56ch;
    margin: 0;
}
.block-banner .banner-text > *:last-child { margin-bottom: 0; }

/* ── CTA cluster ────────────────────────────────────────────── */
.block-banner .banner-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3);
    justify-content: flex-start;
    align-items: center;
    margin-top: var(--ds-space-3);
    width: 100%;
}
.block-banner.align-center .banner-cta-row { justify-content: center; }

.block-banner .banner-link,
.block-banner .banner-cta-primary {
    background: var(--ds-cta) !important;
    color: var(--ds-paper) !important;
    border: none !important;
    border-radius: var(--ds-radius) !important;
    /* SENIOR-T2: AARP primary CTA = 56px tall, 20px font, filled */
    min-height: var(--ds-touch-target-primary, 56px);
    padding: 1rem 1.75rem !important;
    text-decoration: none;
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-lg, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.005em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds-space-2);
    box-shadow: var(--ds-shadow-cta);
    transition: background var(--ds-duration-fast) var(--ds-ease),
                transform var(--ds-duration-fast) var(--ds-ease);
}
.block-banner .banner-card.banner-style-cta .banner-link,
.block-banner .banner-card.banner-style-cta .banner-cta-primary {
    /* WAVE3-F01: keep hard ink/white pair (constant ink-on-orange CTA), but
       use --ds-cta-fg for the foreground so a future theme override can
       reach it. The banner-style-cta locally rebinds --ds-ink → --ds-paper,
       so reach for the canonical literal here on purpose. */
    background: #0e0f0c !important;
    color: var(--ds-cta-fg, #fff) !important;
}
.block-banner .banner-link:hover,
.block-banner .banner-cta-primary:hover {
    background: var(--ds-cta-dk) !important;
    color: var(--ds-cta-fg, #fff) !important;
    text-decoration: none;
}
.block-banner .banner-card.banner-style-cta .banner-link:hover,
.block-banner .banner-card.banner-style-cta .banner-cta-primary:hover {
    /* WAVE3-F01: align fallback hex to canonical --ds-ink (#0e0f0c) — was #000. */
    background: #0e0f0c !important;
}

/* First-hover pulse (1 → 1.03 → 1, 400ms) */
@keyframes banner-cta-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.03); }
    100% { transform: scale(1); }
}
.block-banner .banner-cta-primary:hover {
    animation: banner-cta-pulse 400ms var(--ds-ease, ease-out) 1;
}

/* Phone CTA (ghost style with phone icon prefix).
   SENIOR-T2: trades phone CTA promoted to AARP primary target. */
.block-banner .banner-cta-phone {
    background: transparent !important;
    color: inherit !important;
    border: 1.5px solid currentColor !important;
    border-radius: var(--ds-radius) !important;
    min-height: var(--ds-touch-target-primary, 56px);
    padding: 0.875rem 1.4rem !important;
    text-decoration: none !important;
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body, 1.125rem);
    font-weight: 700;
    letter-spacing: 0.005em;
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    transition: background var(--ds-duration-fast) var(--ds-ease),
                color var(--ds-duration-fast) var(--ds-ease);
}
.block-banner .banner-cta-phone .banner-phone-icon {
    width: 1.1em;
    height: 1.1em;
    flex-shrink: 0;
}
.block-banner .banner-cta-phone .banner-phone-label {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
}
.block-banner .banner-cta-phone .banner-phone-label small {
    /* SENIOR-T2: 14px floor for tracked-caps eyebrow, full opacity for AAA contrast */
    font-size: var(--ds-fs-eyebrow, 0.875rem);
    font-weight: 600;
    opacity: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.block-banner .banner-card.banner-style-dark .banner-cta-phone:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
.block-banner .banner-card.banner-style-cta .banner-cta-phone:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}
.block-banner .banner-card.banner-style-paper .banner-cta-phone:hover {
    /* WAVE3-F01: align literal to canonical --ds-ink (#0e0f0c) — was rgb(26,26,26). */
    background: rgba(14, 15, 12, 0.06) !important;
}

.block-banner .banner-link-secondary,
.block-banner .banner-cta-secondary {
    background: transparent !important;
    color: inherit !important;
    border: 1.5px solid currentColor !important;
    border-radius: var(--ds-radius) !important;
    /* SENIOR-T2: secondary CTA at 48px AARP min */
    min-height: var(--ds-touch-target, 48px);
    padding: 0.875rem 1.5rem !important;
    text-decoration: none !important;
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body, 1.125rem);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--ds-duration-fast) var(--ds-ease),
                color var(--ds-duration-fast) var(--ds-ease);
}
.block-banner .banner-card.banner-style-dark .banner-link-secondary:hover,
.block-banner .banner-card.banner-style-dark .banner-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
.block-banner .banner-card.banner-style-cta .banner-link-secondary:hover,
.block-banner .banner-card.banner-style-cta .banner-cta-secondary:hover {
    background: rgba(0, 0, 0, 0.08) !important;
}
.block-banner .banner-card.banner-style-paper .banner-link-secondary:hover,
.block-banner .banner-card.banner-style-paper .banner-cta-secondary:hover {
    /* WAVE3-F01: align literal to canonical --ds-ink (#0e0f0c). */
    background: rgba(14, 15, 12, 0.06) !important;
}

.block-banner a:focus-visible,
.block-banner .banner-link:focus-visible,
.block-banner .banner-link-secondary:focus-visible,
.block-banner .banner-cta-phone:focus-visible,
.block-banner .banner-cta-primary:focus-visible,
.block-banner .banner-cta-secondary:focus-visible {
    /* SENIOR-T2: high-contrast dual-color focus ring */
    outline: none;
    box-shadow: var(--ds-focus-ring, 0 0 0 3px var(--ds-cta), 0 0 0 5px rgba(255,255,255,.95));
}
/* On dark/cta cards, swap inner ring to dark token for contrast on light surface */
.block-banner .banner-card.banner-style-paper a:focus-visible {
    box-shadow: var(--ds-focus-ring-dark, 0 0 0 3px var(--ds-cta), 0 0 0 5px rgba(0,0,0,.85));
}

.block-banner .banner-cta-helper {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    margin: var(--ds-space-1) 0 0 0;
    /* SENIOR-T2: full opacity so helper retains AAA contrast on dark/light cards */
    opacity: 1;
    color: inherit;
}

/* ── Risk-reversal pill row ─────────────────────────────────── */
.block-banner .banner-risk-pills {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--ds-space-2) var(--ds-space-3);
    list-style: none;
    margin: var(--ds-space-3) 0 0 0;
    padding: 0;
}
.block-banner.align-center .banner-risk-pills { justify-content: center; }

.block-banner .banner-risk-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25rem 0.75rem;
    border-radius: var(--ds-radius-pill);
    border: 1px solid currentColor;
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    font-weight: 500;
    line-height: 1.3;
    color: inherit;
    /* Soften border to ~30% so pills don't shout. */
    border-color: color-mix(in srgb, currentColor 30%, transparent);
}
.block-banner .banner-risk-pill .banner-risk-icon {
    width: 0.95em;
    height: 0.95em;
    flex-shrink: 0;
    color: var(--ds-cta);
}
.block-banner .banner-card.banner-style-cta .banner-risk-pill .banner-risk-icon {
    color: var(--ds-ink);
}
/* Fallback for browsers without color-mix */
@supports not (color: color-mix(in srgb, white, black)) {
    .block-banner .banner-card.banner-style-dark .banner-risk-pill,
    .block-banner .banner-card.banner-style-cta .banner-risk-pill {
        border-color: rgba(255, 255, 255, 0.3);
    }
    .block-banner .banner-card.banner-style-paper .banner-risk-pill {
        /* WAVE3-F01: align literal to canonical --ds-ink (#0e0f0c). */
        border-color: rgba(14, 15, 12, 0.3);
    }
}

/* ── Trust strip (single-line footer) ───────────────────────── */
.block-banner .banner-trust-strip {
    margin: var(--ds-space-4) 0 0 0;
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.4;
    color: inherit;
    /* SENIOR-T2: 0.75 opacity dropped contrast under 7:1 on dark cards. Hold at 0.92 */
    opacity: 0.92;
}

/* ── Legacy trust badges (kept for back-compat) ─────────────── */
.block-banner .banner-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3) var(--ds-space-4);
    list-style: none;
    padding: 0;
    margin: var(--ds-space-4) 0 0 0;
    justify-content: flex-start;
}
.block-banner.align-center .banner-trust-badges { justify-content: center; }
.block-banner .banner-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-2);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    font-weight: 600;
    color: inherit;
    line-height: 1.3;
    opacity: 0.95;
}
.block-banner .banner-trust-icon {
    /* WAVE3-F01 2026-05-08: pure --ds-trust on --ds-ink card was 2.7:1
       (failed UI-component contrast 3.0). Lift via 60/40 mix with white
       per doctrine §"Case studies" row 6 (footer status fix). */
    color: color-mix(in srgb, var(--ds-trust) 60%, white);
    font-size: 1.05em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    flex-shrink: 0;
}
@supports not (color: color-mix(in srgb, white, black)) {
    .block-banner .banner-trust-icon { color: var(--ds-trust, var(--ds-cta)); }
}

/* ── Anchor card (right column) ─────────────────────────────── */
.block-banner .banner-anchor {
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-md);
    padding: var(--ds-space-5);
    position: relative;
    z-index: 2;
}
/* WAVE3-F01 2026-05-08: anchor cards are an INVERTED Pattern-B context
   (a light card on a dark parent, or a dark card on a light parent). Each
   anchor variant rebinds the full set of scheme tokens locally so its
   descendants resolve against the anchor's own palette, not the parent
   banner-card's rebound palette. Use canonical literals (#0e0f0c / #fbf7ef)
   to short-circuit any chained rebinds. */
/* WAVE4.5-H2 2026-05-08: anchor paints pinned to literal canonical hex.
   Previously these read var(--scheme-bg)/var(--scheme-fg), which were set
   to literals in the same block — already safe — but for parity with the
   parent .banner-card chain (and to defend against any future descendant
   rebinds that could re-introduce the trap), paint via literals here too. */
.block-banner .banner-card.banner-style-dark .banner-anchor {
    --scheme-bg: #fbf7ef;          /* canonical --ds-paper */
    --scheme-fg: #0e0f0c;          /* canonical --ds-ink */
    --scheme-fg-soft: rgba(14, 15, 12, 0.78);
    --scheme-fg-mute: rgba(14, 15, 12, 0.60);
    --scheme-rule: rgba(14, 15, 12, 0.12);
    --scheme-card-bg: rgba(14, 15, 12, 0.04);
    --ds-ink: #0e0f0c;
    --ds-ink-soft: rgba(14, 15, 12, 0.78);
    --ds-ink-mute: rgba(14, 15, 12, 0.60);
    --ds-paper: #fbf7ef;
    background-color: #fbf7ef;     /* LITERAL paint */
    color: #0e0f0c;                /* LITERAL paint */
    outline: 1px solid rgba(14, 15, 12, 0.06);
}
.block-banner .banner-card.banner-style-paper .banner-anchor {
    --scheme-bg: #0e0f0c;
    --scheme-fg: #fbf7ef;
    --scheme-fg-soft: rgba(251, 247, 239, 0.85);
    --scheme-fg-mute: rgba(251, 247, 239, 0.65);
    --scheme-rule: rgba(251, 247, 239, 0.18);
    --scheme-card-bg: rgba(251, 247, 239, 0.06);
    --ds-ink: #fbf7ef;
    --ds-ink-soft: rgba(251, 247, 239, 0.85);
    --ds-ink-mute: rgba(251, 247, 239, 0.65);
    --ds-paper: #0e0f0c;
    background-color: #0e0f0c;     /* LITERAL paint */
    color: #fbf7ef;                /* LITERAL paint */
    outline: 1px solid rgba(255, 255, 255, 0.08);
}
.block-banner .banner-card.banner-style-cta .banner-anchor {
    --scheme-bg: #fbf7ef;
    --scheme-fg: #0e0f0c;
    --scheme-fg-soft: rgba(14, 15, 12, 0.78);
    --scheme-fg-mute: rgba(14, 15, 12, 0.60);
    --scheme-rule: rgba(14, 15, 12, 0.12);
    --scheme-card-bg: rgba(14, 15, 12, 0.04);
    --ds-ink: #0e0f0c;
    --ds-ink-soft: rgba(14, 15, 12, 0.78);
    --ds-ink-mute: rgba(14, 15, 12, 0.60);
    --ds-paper: #fbf7ef;
    background-color: #fbf7ef;     /* LITERAL paint */
    color: #0e0f0c;                /* LITERAL paint */
    outline: 1px solid rgba(14, 15, 12, 0.06);
}

/* ── Stats anchor: 3-up tiles ───────────────────────────────── */
.block-banner .banner-stats {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ds-space-4);
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 480px) and (max-width: 991.98px) {
    .block-banner .banner-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--ds-space-3);
    }
}
.block-banner .banner-stat-tile {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
    padding-block: var(--ds-space-2);
    border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
}
@supports not (color: color-mix(in srgb, white, black)) {
    .block-banner .banner-card.banner-style-dark .banner-stat-tile,
    .block-banner .banner-card.banner-style-cta .banner-stat-tile {
        border-bottom-color: rgba(0, 0, 0, 0.08);
    }
    .block-banner .banner-card.banner-style-paper .banner-stat-tile {
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }
}
.block-banner .banner-stat-tile:last-child { border-bottom: 0; }
@media (min-width: 480px) and (max-width: 991.98px) {
    .block-banner .banner-stat-tile {
        border-bottom: 0;
        border-right: 1px solid color-mix(in srgb, currentColor 12%, transparent);
        padding-inline: var(--ds-space-3);
        text-align: center;
        align-items: center;
    }
    .block-banner .banner-stat-tile:last-child { border-right: 0; }
}
.block-banner .banner-stat-number {
    font-family: var(--ds-font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1;
    color: var(--ds-cta);
    letter-spacing: 0.005em;
}
.block-banner .banner-card.banner-style-cta .banner-stat-number {
    /* anchor sits on light background → keep CTA orange. */
    color: var(--ds-cta);
}
.block-banner .banner-stat-label {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    font-weight: 500;
    line-height: 1.3;
    opacity: 0.85;
}

/* ── Testimonial anchor ─────────────────────────────────────── */
.block-banner .banner-testimonial {
    display: flex;
    flex-direction: column;
    gap: var(--ds-space-3);
    margin: 0;
}
.block-banner .banner-testimonial-stars {
    display: inline-flex;
    gap: 0.1em;
    color: var(--ds-cta);
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: 0.05em;
}
.block-banner .banner-testimonial-quote {
    font-family: var(--ds-font-body);
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    font-weight: 500;
    line-height: 1.45;
    margin: 0;
    quotes: '\201C' '\201D';
}
.block-banner .banner-testimonial-quote::before { content: open-quote; margin-right: 0.05em; }
.block-banner .banner-testimonial-quote::after  { content: close-quote; margin-left: 0.05em; }
.block-banner .banner-testimonial-author {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    font-weight: 600;
    opacity: 0.85;
    line-height: 1.3;
    margin: 0;
}

/* ── Image anchor ───────────────────────────────────────────── */
.block-banner .banner-anchor-image {
    padding: 0;
    overflow: hidden;
}
.block-banner .banner-anchor-image .banner-anchor-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}
.block-banner .banner-anchor-image .banner-anchor-caption {
    display: block;
    padding: var(--ds-space-3) var(--ds-space-4);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    font-weight: 500;
    line-height: 1.3;
}

/* ── Img guard ──────────────────────────────────────────────── */
.block-banner img {
    max-width: 100%;
    height: auto;
}

/* ── Reveal animation (scroll-into-view fade + translateY) ──── */
.block-banner.banner-animate .banner-card {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 600ms var(--ds-ease, ease-out),
                transform 600ms var(--ds-ease, ease-out);
    will-change: opacity, transform;
}
.block-banner.banner-animate.is-visible .banner-card,
.block-banner.banner-animate.in-view .banner-card {
    opacity: 1;
    transform: translateY(0);
}
/* Fallback: if JS never flips the class, reveal after first paint */
@media (scripting: none) {
    .block-banner.banner-animate .banner-card {
        opacity: 1;
        transform: none;
    }
}

/* ── Mobile (< 600px) ───────────────────────────────────────── */
@media (max-width: 600px) {
    .block-banner .banner-card {
        padding-block: var(--ds-space-6);
        padding-inline: var(--ds-space-5);
        border-radius: var(--ds-radius);
    }
    .block-banner h1,
    .block-banner h2,
    .block-banner h3,
    .block-banner .banner-headline { font-size: clamp(1.7rem, 8vw, 2.4rem); }

    .block-banner .banner-cta-row {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: var(--ds-touch-spacing, 8px);
    }
    /* SENIOR-T2: keep mobile primary + phone CTA at AARP 56px, secondary 48px */
    .block-banner .banner-link,
    .block-banner .banner-cta-primary,
    .block-banner .banner-cta-phone {
        width: 100%;
        min-height: var(--ds-touch-target-primary, 56px);
    }
    .block-banner .banner-link-secondary,
    .block-banner .banner-cta-secondary {
        width: 100%;
        min-height: var(--ds-touch-target, 48px);
    }
    .block-banner .banner-cta-phone { justify-content: center; }
    .block-banner .banner-anchor { padding: var(--ds-space-4); }
    .block-banner .banner-stat-number { font-size: clamp(1.8rem, 7vw, 2.4rem); }
}

@media (max-width: 768px) {
    .block-banner .banner-text { font-size: var(--ds-fs-body-lg); }
}

/* ── Reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .block-banner * { transition-duration: 0.01ms !important; }
    .block-banner.banner-animate .banner-card {
        opacity: 1 !important;
        transform: none !important;
    }
    .block-banner .banner-cta-primary:hover { animation: none !important; }
    .block-banner .banner-eyebrow .banner-live-dot {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ─────────────────────────────────────────────────────────────────
   SWEEP-A1 (2026-05-08) — Mobile hardening
   1. Sticky CTA bottom-clearance: at ≤900px the global #acme-sticky-cta
      bar covers the trust-strip + risk-pill row at the bottom of the
      banner card. Reserve --ds-sticky-cta-clearance (96px).
   2. Narrow-width overflow guard: .banner-card had overflow:hidden but
      the inner banner-grid + banner-content had no min-width:0 chain
      below the eyebrow / risk-pills, so long urgency strings can push
      the card horizontally. Add explicit min-width:0 + overflow-wrap.
   3. Risk-pill / eyebrow contrast: keep --ds-fs-body-sm floor and bump
      eyebrow opacity to 1 (was inherited 0.92 on dark cards in some
      browser/font stacks per ICP 45-70+ legibility audit).
   ───────────────────────────────────────────────────────────── */
.block-banner .banner-content,
.block-banner .banner-text,
.block-banner .banner-trust-strip,
.block-banner .banner-cta-helper {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.block-banner .banner-eyebrow {
    /* SWEEP-A1: ensure urgency eyebrow ("BOOKING NOVEMBER 2026") wraps
       cleanly at 320px instead of pushing the card. */
    flex-wrap: wrap;
    opacity: 1;
}
.block-banner .banner-risk-pills {
    /* SWEEP-A1: long pill strings can overflow inline-flex. Force inner
       label wrap so pills shrink-to-fit at 320px. */
    max-width: 100%;
}
.block-banner .banner-risk-pill {
    max-width: 100%;
}
.block-banner .banner-risk-pill .banner-risk-label {
    overflow-wrap: anywhere;
}

@media (max-width: 900px) {
    .block-banner {
        padding-bottom: calc(var(--ds-space-5, 1.5rem) + var(--ds-sticky-cta-clearance, 96px));
    }
}