/* ─────────────────────────────────────────────────────────────────
   Block: hero2  (SPLIT-PANE variant)
   Text-left / image-right at desktop; stacks on mobile (image is
   the hero, not an afterthought).
   T1 (2026-05-06) — added trust-badge row, helper text, alignment +
   overlay variables, focus-visible ring, fluid type, mobile thumb-zone.
   WAVE10 (2026-05-07) — Toronto/GTA construction CRO pass:
     • Eyebrow + pulsing live-dot (DRY with hero, prefixed hero2-)
     • Phone (tel:) ghost CTA support inside .hero2-buttons
     • Risk-reversal pill row
     • Trust strip
     • <figure>/<img> split-pane with object-fit cover and 4:3 ratio
     • Schema.org Service + LocalBusiness JSON-LD
   Differentiated from hero: hero2 is SPLIT-PANE and image-driven.
   ───────────────────────────────────────────────────────────── */

.block-hero2 {
    position: relative;
    isolation: isolate;
    background-color: var(--scheme-bg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    color: var(--scheme-fg);
    font-family: var(--ds-font-body);
    padding-block: var(--ds-space-8);
    overflow: hidden;
    --block-hero2-overlay: 0.65;
    /* SENIOR-T2: floor scrim for AAA 7:1 contrast even when admin sets 0% overlay */
    --block-hero2-min-scrim: 0.45;
}
/* WAVE3-F01 (2026-05-08): replaced literal rgb(14,30,51) deep-blue scrim
   with scheme-aware mix (scheme-bg + black). Mirrors hero.css fix; keeps
   the dark photographic-floor without imposing a cool-blue cast on
   warm/colored parent schemes (accent, trust, paper). */
.block-hero2::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg,
        transparent 0%,
        color-mix(in srgb, var(--scheme-bg, var(--ds-ink)) 20%, rgba(0,0,0, var(--block-hero2-min-scrim, 0.45))) 100%);
    pointer-events: none;
}
@supports not (color: color-mix(in srgb, white, black)) {
    .block-hero2::after {
        background: linear-gradient(180deg,
            transparent 0%,
            rgba(0, 0, 0, var(--block-hero2-min-scrim, 0.45)) 100%);
    }
}

.block-hero2 > .container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
}

/* Ink gradient overlay (intensity = --block-hero2-overlay) -- */
.block-hero2::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--scheme-bg) 0%, transparent) 0%,
            color-mix(in srgb, var(--scheme-bg) calc(var(--block-hero2-overlay) * 100%), transparent) 100%
        ),
        linear-gradient(
            90deg,
            color-mix(in srgb, var(--scheme-bg) calc(var(--block-hero2-overlay) * 110%), transparent) 0%,
            color-mix(in srgb, var(--scheme-bg) 0%, transparent) 60%
        );
    pointer-events: none;
}

.block-hero2[data-align="center"] .row { justify-content: center; }
.block-hero2[data-align="center"] .hero2-text { text-align: center; }
.block-hero2[data-align="center"] .hero2-cta-row,
.block-hero2[data-align="center"] .hero2-trust-badges { justify-content: center; }

/* Text column ------------------------------------------------- */
.block-hero2 .hero2-text { color: var(--scheme-fg); }

.block-hero2 .hero2-text h1,
.block-hero2 .hero2-text .hero-title,
.block-hero2 .hero2-title {
    font-family: var(--ds-font-display);
    font-size: clamp(2.4rem, 5.5vw, 4.6rem);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--scheme-fg);
    margin: 0 0 var(--ds-space-4) 0;
    letter-spacing: 0.005em;
    max-width: 18ch;
}
.block-hero2 .hero2-text h2 {
    font-family: var(--ds-font-display);
    font-size: var(--ds-fs-display-lg);
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--scheme-fg);
    margin: 0 0 var(--ds-space-4) 0;
}
.block-hero2 .hero2-text em,
.block-hero2 .hero2-text h1 em,
.block-hero2 .hero2-text h2 em,
.block-hero2 .hero2-title em {
    font-family: var(--ds-font-serif);
    font-style: italic;
    color: var(--ds-cta);
}

.block-hero2 .hero2-text p,
.block-hero2 .hero2-text .lead,
.block-hero2 .hero2-subtitle {
    font-family: var(--ds-font-body);
    /* SENIOR-T2: floor at 18px AAA min */
    font-size: clamp(var(--ds-fs-body), 1.6vw, var(--ds-fs-body-lg));
    line-height: var(--ds-lh-body, 1.6);
    color: var(--scheme-fg-soft);
    margin-bottom: var(--ds-space-4);
    max-width: 56ch;
}

.block-hero2 .hero2-text strong { color: var(--scheme-fg); font-weight: 700; }
.block-hero2 .hero2-text a { color: var(--ds-cta); }

/* Buttons ----------------------------------------------------- */
.block-hero2 .hero2-buttons,
.block-hero2 .hero2-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ds-space-3);
    margin: var(--ds-space-4) 0 var(--ds-space-2) 0;
}

.block-hero2 .btn,
.block-hero2 .hero2-cta-primary,
.block-hero2 .hero2-cta-secondary {
    border-radius: var(--ds-radius-sm) !important;
    /* SENIOR-T2: 48px floor, primary overridden below */
    min-height: var(--ds-touch-target, 48px);
    padding: 0.875rem 1.5rem !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-family: var(--ds-font-body);
}

.block-hero2 .hero2-cta-primary {
    background: var(--ds-cta) !important;
    /* WAVE3-F01 2026-05-08: --ds-paper → --ds-cta-fg (constant white on
       constant orange). Doctrine Pattern C. */
    color: var(--ds-cta-fg, #fff) !important;
    border: none !important;
    /* SENIOR-T2: AARP primary CTA = 56px tall, 20px font, filled */
    min-height: var(--ds-touch-target-primary, 56px);
    padding: 1rem 1.75rem !important;
    font-size: var(--ds-fs-body-lg, 1.25rem);
    font-weight: 700;
    letter-spacing: 0.005em;
}
.block-hero2 .hero2-cta-primary:hover {
    background: var(--ds-cta-dk) !important;
    color: var(--ds-cta-fg, #fff) !important;
}
.block-hero2 .hero2-cta-secondary {
    background: transparent !important;
    color: var(--scheme-fg) !important;
    /* WAVE3-F01 2026-05-08: Pattern D — currentColor border. */
    border: 1.5px solid currentColor !important;
    box-shadow: none !important;
}
.block-hero2 .hero2-cta-secondary:hover {
    /* WAVE3-F01 2026-05-08: clean inversion (was --scheme-card-bg fallback trap). */
    background: var(--scheme-fg) !important;
    color: var(--scheme-bg) !important;
    border-color: var(--scheme-fg) !important;
}

.block-hero2 a:focus-visible,
.block-hero2 .btn:focus-visible,
.block-hero2 .hero2-cta-primary:focus-visible,
.block-hero2 .hero2-cta-secondary:focus-visible,
.block-hero2 .hero2-cta-phone: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));
}

.block-hero2 .hero2-cta-helper {
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    color: var(--scheme-fg-mute);
    margin: 0 0 var(--ds-space-4) 0;
    opacity: 0.9;
}

/* Trust badges ----------------------------------------------- */
.block-hero2 .hero2-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;
}
.block-hero2 .hero2-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: var(--scheme-fg);
    line-height: 1.3;
}
.block-hero2 .hero2-trust-icon {
    color: var(--ds-cta);
    font-size: 1.05em;
}

/* Rating ------------------------------------------------------ */
.block-hero2 .hero2-rating { gap: var(--ds-space-3); align-items: center; }

.block-hero2 .hero2-avatars { padding-left: var(--ds-space-4); }
.block-hero2 .hero2-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    border: 4px solid var(--scheme-fg);
    margin-left: -1rem;
    object-fit: cover;
    background: var(--scheme-card-bg);
}

.block-hero2 .hero2-rating-stars {
    font-size: var(--ds-fs-body-lg);
    color: var(--scheme-fg);
}
.block-hero2 .hero2-stars-wrap { position: relative; margin-right: var(--ds-space-1); }
.block-hero2 .hero2-stars-mask {
    position: absolute;
    top: 0; bottom: 0; right: 0;
    background-color: var(--scheme-bg);
}
.block-hero2 .hero2-rating-value { color: var(--scheme-fg); font-weight: 700; }
.block-hero2 .hero2-rating-label {
    font-family: var(--ds-font-mono);
    font-size: var(--ds-fs-body-sm);
    color: var(--scheme-fg-mute);
}

/* Media ------------------------------------------------------- */
/* FIX-T1 (2026-05-06): broaden img guard so any <img> inside hero2
   inherits max-width/height-auto, preventing overscaling. */
.block-hero2 img,
.block-hero2 .hero2-media img {
    max-width: 100%;
    height: auto;
}
.block-hero2 .hero2-media { color: var(--scheme-fg); }
.block-hero2 .hero2-media img {
    border-radius: var(--ds-radius-lg);
}

/* Responsive -------------------------------------------------- */
@media (max-width: 992px) {
    .block-hero2 {
        padding-block: var(--ds-space-7);
    }
}
@media (max-width: 600px) {
    .block-hero2 {
        padding-block: var(--ds-space-6);
    }
    .block-hero2 .hero2-text h1,
    .block-hero2 .hero2-text .hero-title,
    .block-hero2 .hero2-title { font-size: clamp(2rem, 9vw, 2.8rem); max-width: 100%; }
    .block-hero2 .hero2-cta-row { flex-direction: column; align-items: stretch; gap: var(--ds-touch-spacing, 8px); }
    .block-hero2 .hero2-cta-primary,
    .block-hero2 .hero2-cta-secondary,
    .block-hero2 .btn { width: 100%; min-height: var(--ds-touch-target, 48px); }
    /* SENIOR-T2: keep mobile primary at AARP 56px target */
    .block-hero2 .hero2-cta-primary { min-height: var(--ds-touch-target-primary, 56px); }
    .block-hero2 .hero2-avatar { width: 2.5rem; height: 2.5rem; border-width: 3px; }
    .block-hero2 .hero2-avatars { padding-left: var(--ds-space-3); }
}

/* ─────────────────────────────────────────────────────────────────
   W2-A20 — legacy yellow CTA neutralisation (kept for back-compat)
   ───────────────────────────────────────────────────────────── */
.block-hero2 .btn-try-demo,
.block-hero2 .try-demo-btn,
.block-hero2 .btn-warning {
    background: var(--ds-cta, #e36218) !important;
    background-color: var(--ds-cta, #e36218) !important;
    color: var(--ds-paper, #fbf6eb) !important;
    border-color: var(--ds-cta, #e36218) !important;
    border-radius: var(--ds-radius-sm) !important;
}
.block-hero2 .btn-try-demo:hover,
.block-hero2 .try-demo-btn:hover,
.block-hero2 .btn-warning:hover {
    background: var(--ds-accent, #a4543f) !important;
    background-color: var(--ds-accent, #a4543f) !important;
    color: var(--ds-paper, #fbf6eb) !important;
}
/* F-EMAILBTN 2026-05-08: scheme-aware outline button.
   Was hardcoding --ds-ink, which is invisible on dark heroes
   (scheme-steel, scheme-ink, scheme-accent, scheme-trust).
   Use --scheme-fg so the button inherits the active scheme.
   WAVE3-F01 2026-05-08: aligned inner-fallback hex from #0e1e33 (deep blue)
   to #0e0f0c (canonical --ds-ink) so the FOUC fallback doesn't drift to a
   different color than the loaded token resolves to. */
.block-hero2 .btn-outline-primary {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--scheme-fg, var(--ds-ink, #0e0f0c)) !important;
    border: 1px solid currentColor !important;
    border-radius: var(--ds-radius-sm) !important;
}
.block-hero2 .btn-outline-primary:hover {
    background: var(--scheme-fg, var(--ds-ink, #0e0f0c)) !important;
    background-color: var(--scheme-fg, var(--ds-ink, #0e0f0c)) !important;
    color: var(--scheme-bg, var(--ds-paper, #fbf7ef)) !important;
    border-color: var(--scheme-fg, var(--ds-ink, #0e0f0c)) !important;
}

@media (prefers-reduced-motion: reduce) {
    .block-hero2 * { transition-duration: 0.01ms !important; }
}

/* ─────────────────────────────────────────────────────────────
   WAVE10 additions: eyebrow + pulsing dot, phone-CTA, risk
   pills, trust strip, split-pane figure with cover crop.
   ───────────────────────────────────────────────────────── */

/* Eyebrow with pulsing live-dot ----------------------------- */
.block-hero2 .hero2-eyebrow {
    margin: 0 0 var(--ds-space-3) 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-hero2 .hero2-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: hero2-live-pulse 1.4s var(--ds-ease, ease-in-out) infinite;
    flex-shrink: 0;
}
@keyframes hero2-live-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.4; }
}
.block-hero2[data-align="center"] .hero2-eyebrow { justify-content: center; }

/* Phone (tel:) CTA — ghost button with phone icon ----------- */
.block-hero2 .hero2-cta-phone {
    display: inline-flex !important;
    align-items: center;
    gap: var(--ds-space-2);
    background: transparent !important;
    color: var(--scheme-fg) !important;
    /* WAVE3-F01 2026-05-08: Pattern D — currentColor border. */
    border: 1.5px solid currentColor !important;
    border-radius: var(--ds-radius-sm) !important;
    /* SENIOR-T2: trades phone CTA promoted to AARP primary target */
    min-height: var(--ds-touch-target-primary, 56px);
    padding: 0.875rem 1.25rem !important;
    text-decoration: none;
    font-family: var(--ds-font-body);
    font-weight: 700;
    font-size: var(--ds-fs-body, 1.125rem);
}
.block-hero2 .hero2-cta-phone:hover {
    /* WAVE3-F01 2026-05-08: clean inversion (was --scheme-card-bg fallback trap). */
    background: var(--scheme-fg) !important;
    color: var(--scheme-bg) !important;
    border-color: var(--scheme-fg) !important;
}
.block-hero2 .hero2-phone-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* Risk-reversal pills --------------------------------------- */
.block-hero2 .hero2-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-hero2[data-align="center"] .hero2-risk-pills { justify-content: center; }
.block-hero2 .hero2-risk-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3rem 0.85rem;
    border-radius: var(--ds-radius-pill, 999px);
    border: 1px solid var(--scheme-fg);
    border-color: color-mix(in srgb, var(--scheme-fg) 30%, transparent);
    font-family: var(--ds-font-body);
    font-size: var(--ds-fs-body-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.3;
    color: var(--scheme-fg);
}
.block-hero2 .hero2-risk-icon {
    width: 0.95em;
    height: 0.95em;
    flex-shrink: 0;
    color: var(--ds-cta);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.block-hero2 .hero2-risk-icon svg { width: 100%; height: 100%; }
@supports not (color: color-mix(in srgb, white, black)) {
    .block-hero2 .hero2-risk-pill { border-color: rgba(255, 255, 255, 0.3); }
}

/* Trust strip (single-line footer) -------------------------- */
.block-hero2 .hero2-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.04em;
    line-height: 1.4;
    color: color-mix(in srgb, var(--scheme-fg) 75%, transparent);
}
@supports not (color: color-mix(in srgb, white, black)) {
    .block-hero2 .hero2-trust-strip { color: var(--scheme-fg-mute, var(--scheme-fg)); }
}

/* Split-pane figure (right column — IMAGE IS THE HERO) ----- */
.block-hero2 .hero2-split { align-items: center; }
.block-hero2 .hero2-figure {
    margin: 0;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--ds-radius-lg);
    box-shadow: var(--ds-shadow-lg);
}
.block-hero2 .hero2-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 0; /* figure already clipped */
}

/* Split-pane mobile order: image second so text reads first */
@media (max-width: 992px) {
    .block-hero2 .hero2-split .hero2-text  { order: 1; }
    .block-hero2 .hero2-split .hero2-media { order: 2; margin-top: var(--ds-space-5); }
    .block-hero2 .hero2-figure { aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
    /* SENIOR-T2: floor mobile eyebrow / pill / phone-cta sizes to senior AAA mins */
    .block-hero2 .hero2-eyebrow { font-size: var(--ds-fs-eyebrow, 0.875rem); letter-spacing: 0.1em; }
    .block-hero2 .hero2-cta-phone { width: 100%; min-height: var(--ds-touch-target-primary, 56px); }
    .block-hero2 .hero2-risk-pill { font-size: var(--ds-fs-body-sm, 1rem); padding: 0.35rem 0.85rem; }
}

/* Reduced motion (extends earlier rule) --------------------- */
@media (prefers-reduced-motion: reduce) {
    .block-hero2 .hero2-live-dot { animation: none !important; }
}

/* ── Bug fix 2026-05-07-bugs (BUG-T2): defend against global `ul li::before`
       checkmark leak from theme.min.css. The hero2 risk-pills and
       trust-badges render their own SVG inside `.hero2-risk-icon` /
       `.hero2-trust-icon` — without this guard the global green check
       stacks on top of every pill. The intentional `.has-list-checked
       .hero2-bullets li::before` (markdown body bullets) is preserved. ── */
.block-hero2 .hero2-risk-pills li::before,
.block-hero2 .hero2-risk-pill::before,
.block-hero2 .hero2-trust-badges li::before,
.block-hero2 .hero2-trust-badge::before {
    content: none !important;
    background: none !important;
    background-image: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

/* ── Bug fix 2026-05-08-sweep (SWEEP-T03): rating-block FA stars fallback.
       Same root cause as hero: the rating macro renders <i class="fa fa-star">
       icons that depend on FontAwesome's glyph font, which isn't loaded
       site-wide. Result was an empty black bar (stars-mask covering empty
       FA boxes) with only the numeric "4.9" visible, breaking the trust
       cue for ICP age 45-70+. Fix: render Unicode ★ via ::before regardless
       of FA loading state. Stars-mask continues to indicate fractional
       fill on the right. Scoped to .block-hero2. ── */
.block-hero2 .hero2-stars-wrap i.fa.fa-star,
.block-hero2 .hero2-rating-stars i.fa.fa-star {
    font-family: inherit !important;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: auto;
    min-width: 1em;
}
.block-hero2 .hero2-stars-wrap i.fa.fa-star::before,
.block-hero2 .hero2-rating-stars i.fa.fa-star::before {
    content: "★" !important;
    font-family: inherit !important;
    font-weight: 400;
    color: var(--ds-cta, #e36218);
}
.block-hero2 .hero2-stars-wrap {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    letter-spacing: 0.04em;
    font-size: var(--ds-fs-body-lg, 1.25rem);
}
.block-hero2 .hero2-rating-value {
    margin-inline-start: var(--ds-space-2, 0.5rem);
}
/* See hero.css for rationale — same shared-macro mask issue. The mask
   covers nearly all stars due to inverted calc; disabling it shows all
   5 stars filled, with the numeric "4.9" carrying any fractional cue. */
.block-hero2 .hero2-stars-mask { display: none !important; }