/* ==========================================================================
   Site Implementation Styles
   Consumes design tokens from harmony-brand.css
   ========================================================================== */

/* ---- Base / Typography ---- */

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--brand-font-body);
    color: var(--brand-text-dark);
    line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--brand-font-heading);
    font-weight: 700;
    color: var(--brand-dark);
}

a {
    color: var(--brand-primary);
    text-decoration: none;
    transition: color 0.2s;
}

a:hover {
    color: var(--brand-primary-dark);
}

/* ---- Navbar ---- */

/* Pink-dominant navbar (/od design-first pass, 2026-08-05): re-skinned from the original
   --brand-dark navy strip to the sourced pink family, with navy doing 100% of its work as the
   accent (text/logo/button) rather than as a second competing dark background - see
   brand-slug-brand.css's "Pink-Dominant Surface Tokens" note. */
.navbar {
    background-color: var(--brand-surface-pink-light);
    font-family: var(--brand-font-heading);
    padding: 0.75rem 0;
    box-shadow: var(--brand-shadow);
    border-bottom: 1px solid rgba(14, 23, 44, 0.14);
}

.navbar .navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--brand-primary);
}

.navbar .navbar-brand img {
    max-height: 48px;
    width: auto;
}

.navbar .nav-link {
    color: var(--brand-primary);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 1rem;
    transition: opacity 0.2s;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--brand-primary);
    opacity: 0.65;
}

/* Bootstrap's navbar-dark toggler icon is a white SVG - swap to navy now that the
   navbar background is light, matching the /od artifact's override exactly. */
.navbar .navbar-toggler {
    border-color: rgba(14, 23, 44, 0.35);
}

.navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(14,23,44,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar .btn-accent {
    padding: 0.4rem 1.25rem;
    font-size: 0.9rem;
    border-radius: var(--brand-radius);
}

/* ---- Hero Section ----
   Pink-dominant (/od design-first pass, 2026-08-05): swapped from the navy-dominant
   --brand-dark -> --brand-primary-dark gradient to the sourced pink -> lavender gradient,
   with navy text (contrast independently reverified: navy h1 on pink 12.20:1, navy-muted
   .lead on pink 7.08:1 - both clear WCAG AA with wide margin). See brand-slug-brand.css. */

.hero-section {
    background: linear-gradient(135deg, var(--brand-accent) 0%, var(--brand-accent) 55%, var(--brand-gradient-end) 100%);
    color: var(--brand-navy-muted);
    padding: 5rem 0;
    text-align: center;
}

.hero-section h1 {
    color: var(--brand-primary);
    font-size: 2.75rem;
    margin-bottom: 1rem;
}

.hero-section .lead {
    color: var(--brand-navy-muted);
    font-size: 1.25rem;
    opacity: 1;
    max-width: 640px;
    margin: 0 auto;
}

/* .btn-outline-light is a hero-only secondary button (verified: every usage site-wide sits
   inside .hero-section - Home, SubscribeCheckEmail, SubscribeConfirmed, ThankYou). Bootstrap's
   white-on-transparent styling is illegible on the new pink background; override to navy. */
.hero-section .btn-outline-light {
    --bs-btn-color: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-hover-bg: var(--brand-primary);
    --bs-btn-hover-border-color: var(--brand-primary);
    --bs-btn-hover-color: var(--brand-white);
    --bs-btn-active-bg: var(--brand-primary-dark);
    --bs-btn-active-border-color: var(--brand-primary-dark);
    --bs-btn-active-color: var(--brand-white);
}

/* .btn-accent is pink-bg/dark-text (brand-slug-brand.css) - correct and contrast-safe on the
   white .card surfaces it was designed for, but placed directly on the now-pink
   .hero-section/.section-dark it has almost no visible button shape (pink-on-pink). Override to
   filled navy/white text in these two contexts specifically - matches what the /od artifact
   recommended for buttons sitting directly on the pink field. White-on-navy: 17.4:1. */
.hero-section .btn-accent,
.section-dark .btn-accent {
    --bs-btn-bg: var(--brand-primary);
    --bs-btn-border-color: var(--brand-primary);
    --bs-btn-color: var(--brand-white);
    --bs-btn-hover-bg: var(--brand-primary-dark);
    --bs-btn-hover-border-color: var(--brand-primary-dark);
    --bs-btn-hover-color: var(--brand-white);
    background-color: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-white);
}

.hero-section .btn-accent:hover,
.section-dark .btn-accent:hover {
    background-color: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: var(--brand-white);
    filter: none;
}

.hero-home {
    padding: 6rem 0;
}

.hero-home h1 {
    font-size: 3.25rem;
}

/* ---- Sections ---- */

.section {
    padding: var(--brand-section-padding);
}

.section-light {
    background-color: var(--brand-light);
}

/* Pink-dominant (/od design-first pass, 2026-08-05): matches .hero-section's treatment - see
   brand-slug-brand.css's "Pink-Dominant Surface Tokens" note. Buttons inside .section-dark use
   .btn-accent (pink bg / dark text, already contrast-safe - see brand-slug-brand.css), which
   needed no change since it was never white-on-dark to begin with. */
.section-dark {
    background-color: var(--brand-accent);
    color: var(--brand-navy-muted);
}

.section-dark h2,
.section-dark h3 {
    color: var(--brand-primary);
}

.section-title {
    font-size: 2rem;
    margin-bottom: 1rem;
}

.section-subtitle {
    color: var(--brand-text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2.5rem auto;
}

/* ---- Cards ---- */

.card {
    border: none;
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--brand-shadow-lg);
}

.about-headshot {
    width: 160px;
    height: 160px;
    object-fit: cover;
    margin-left: auto;
    margin-right: auto;
    border: 3px solid var(--brand-accent);
}

.card .card-title {
    font-family: var(--brand-font-heading);
    font-weight: 600;
}

.card .bi {
    font-size: 2rem;
    color: var(--brand-primary);
}

/* ---- CTA Panels ---- */

.cta-panel {
    text-align: center;
    padding: 2rem 1.5rem;
}

.cta-panel .bi {
    font-size: 2.5rem;
    color: var(--brand-primary);
    margin-bottom: 1rem;
}

.cta-panel h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

/* ---- Breadcrumb ---- */

.breadcrumb-wrapper {
    background-color: var(--brand-light);
    padding: 0.75rem 0;
    border-bottom: 1px solid #e9ecef;
}

.breadcrumb {
    margin-bottom: 0;
    font-size: 0.875rem;
}

.breadcrumb-item a {
    color: var(--brand-primary);
}

/* ---- Forms ---- */

.form-control:focus {
    border-color: var(--brand-primary);
    /* rgba(14, 23, 44, ...) is the decimal RGB of --brand-primary (#0e172c) - was
       previously rgba(37, 99, 235, ...), the same stale scaffold blue (#2563eb)
       Plan 04-01 already fixed in --bs-primary-rgb. Site-wide form-control focus
       glow (contact form, lead-magnet opt-in) rendered blue against navy brand
       until fixed here. Found by 04-01's round-3 re-audit (gandalf, 2026-08-05). */
    box-shadow: 0 0 0 0.2rem rgba(14, 23, 44, 0.15);
}

.form-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.validation-message {
    color: #dc3545;
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* The sitewide `a { text-decoration: none }` above strips the underline, which
   leaves a link sitting inside a block of label text distinguishable by color
   alone - the link/text color pair is under the 3:1 that WCAG 1.4.1 requires for
   a color-only distinction. Restore the underline here, matching the same fix
   already applied to `.lead-magnet-optin__consent a`. */
.form-check-label a {
    text-decoration: underline;
}

/* ---- Contact Info ---- */

.contact-info-card {
    border-left: 4px solid var(--brand-primary);
}

.contact-info-card .bi {
    color: var(--brand-primary);
    font-size: 1.1rem;
    width: 1.5rem;
    text-align: center;
}

/* ---- Footer ---- */

.site-footer {
    background-color: var(--brand-dark);
    color: rgba(253, 252, 251, 0.8);
    padding: 3rem 0 1.5rem 0;
}

.site-footer h5 {
    color: var(--brand-white);
    font-family: var(--brand-font-heading);
    font-weight: 600;
    margin-bottom: 1rem;
}

.site-footer a {
    color: rgba(253, 252, 251, 0.7);
    transition: color 0.2s;
}

.site-footer a:hover {
    color: var(--brand-accent);
}

.site-footer .bi {
    font-size: 1.25rem;
}

.footer-bottom {
    border-top: 1px solid rgba(253, 252, 251, 0.1);
    padding-top: 1.5rem;
    margin-top: 2rem;
    font-size: 0.875rem;
    color: rgba(253, 252, 251, 0.5);
}

/* ---- Google Maps Embed ---- */

.map-embed {
    border-radius: var(--brand-radius);
    overflow: hidden;
}

.map-embed iframe {
    width: 100%;
    height: 250px;
    border: 0;
}

/* ---- Utilities ---- */

.text-brand {
    color: var(--brand-primary);
}

.text-accent {
    color: var(--brand-accent);
}

.bg-brand {
    background-color: var(--brand-primary);
    color: var(--brand-text-light);
}

/* ---- Coaching Packages ---- */

.pkg-orient__item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.pkg-orient__icon {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--brand-primary) 12%, white);
    color: var(--brand-primary);
    font-size: 1.15rem;
}

.pkg-orient__icon .bi {
    font-size: 1.15rem;
    color: var(--brand-primary);
}

.pkg-orient__label {
    font-family: var(--brand-font-heading);
    font-weight: 600;
    color: var(--brand-text-dark);
    margin-bottom: 0.15rem;
}

.pkg-orient__desc {
    color: var(--brand-text-muted);
    font-size: 0.9rem;
    margin-bottom: 0;
}

.package-card {
    position: relative;
}

.package-card__kicker {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

.package-card__kicker .bi {
    font-size: 1.05rem;
    /* Uses --brand-primary, not --brand-accent: --brand-accent is sourced as Amy's live
       button/link TEXT color, designed to sit on a dark navy background (see
       brand-slug-brand.css). On this white .card surface it renders ~1.46:1 against
       #ffffff (near-invisible) - a regression surfaced by Plan 04-01's multi-agent
       re-audit (round 2, 2026-08-05). --brand-primary matches the existing
       .package-card__inclusions li .bi precedent and clears contrast easily on white. */
    color: var(--brand-primary);
}

.package-card--group .package-card__kicker .bi {
    color: var(--brand-primary-dark);
}

.package-card__name {
    font-family: var(--brand-font-heading);
    font-weight: 700;
    color: var(--brand-text-dark);
    font-size: 1.35rem;
    margin-bottom: 0.6rem;
}

/* Cadence badge - single shared shape, color mapped per cadence.
   Monthly -> primary / Series -> accent / One-time -> dark / Group -> primary-dark.
   All four pairs meet 4.5:1 contrast. */
.package-card__badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--brand-font-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
    line-height: 1.4;
}

.package-card__badge--monthly {
    background: var(--brand-primary);
    color: var(--brand-text-light);
}

.package-card__badge--series {
    background: var(--brand-accent);
    color: var(--brand-text-dark);
}

.package-card__badge--onetime {
    background: var(--brand-dark);
    color: var(--brand-text-light);
}

.package-card__badge--group {
    background: var(--brand-primary-dark);
    color: var(--brand-text-light);
}

.package-card__inclusions {
    margin: 0 0 0.9rem;
    padding: 0;
}

.package-card__inclusions li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.92rem;
    color: var(--brand-text-dark);
    padding-block: 0.2rem;
}

.package-card__inclusions li .bi {
    font-size: 1rem;
    color: var(--brand-primary);
    margin-top: 0.18rem;
    flex: 0 0 auto;
}

.package-card__target {
    font-size: 0.8rem;
    color: var(--brand-text-muted);
    font-style: italic;
    margin-bottom: 0;
}

.package-card__footer {
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

/* Price slot holds a placeholder until real pricing is confirmed - the dashed
   treatment reads as a deliberate note-in-progress rather than missing data. */
.package-card__price {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-family: var(--brand-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--brand-text-muted);
    background: var(--brand-light);
    border: 1px dashed color-mix(in srgb, var(--brand-primary) 35%, var(--brand-text-muted));
    border-radius: var(--brand-radius);
    padding: 0.55rem 0.75rem;
    margin-bottom: 0.85rem;
}

.package-card__price .bi {
    font-size: 1rem;
    /* --brand-primary, not --brand-accent - same white-card contrast regression and fix
       as .package-card__kicker .bi above (Plan 04-01 re-audit round 2, 2026-08-05). */
    color: var(--brand-primary);
}

.package-card__cta {
    width: 100%;
    text-align: center;
}

/* ---- Accent button focus ring (WCAG 2.4.7) ----
   Bootstrap's `.btn:focus-visible` sets `outline: 0` and draws its ring with
   `rgba(var(--bs-btn-focus-shadow-rgb), .5)`. `.btn-accent` is a custom button
   that never defines `--bs-btn-focus-shadow-rgb`, so that box-shadow resolves to
   nothing and accent buttons end up with NO visible focus indicator at all
   (verified on the navbar "Get in Touch" link and the /coaching-packages CTA).
   The two-ring treatment stays visible on both light and dark backgrounds: the
   white inner ring reads against `.section-dark`, the blue outer ring reads
   against light sections. `.package-card__cta` is always paired with
   `.btn-accent` (see PackageCard.razor), so it needs no rule of its own here. */
.btn-accent:focus-visible {
    outline: 3px solid var(--brand-primary-dark);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--brand-white);
}

/* ---- Outline-light button focus ring (WCAG 2.4.7) ----
   Same root cause as `.btn-accent` above: Bootstrap's `.btn:focus-visible` sets
   `outline: 0` and draws its ring from `--bs-btn-focus-shadow-rgb`, which for
   `.btn-outline-light` resolves to `rgba(0, 0, 0, 0) 0 0 0 0` - fully transparent
   and zero-sized, so the button has NO visible focus indicator (measured on the
   "Back to Home" links of /subscribe/check-email and /subscribe/confirmed, and on
   the Home hero button). axe-core does not test this rule, matching Feature 01's
   finding. Inverted from white-outer/dark-inner to navy-outer/white-inner
   (/od design-first pass, 2026-08-05) now that `.hero-section` (this button's only
   use site-wide) is pink-dominant rather than dark - a white ring on the light pink
   background would itself have failed contrast. Navy ring: 12.20:1 on the pink hero
   background, independently reverified. */
.btn-outline-light:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--brand-white);
}

/* ---- Lead Magnet Opt-In ----
   Per the /od design artifact for Plan 02-02
   (.planning/features/v01/02-owned-email-capture/artifacts/02-02-lead-magnet-optin.html).
   The component sits in a plain white `.section` sandwiched between `.section-light`
   above and `.section-dark` below, so it is given a contained tinted panel to keep it
   from visually dissolving into the white band. */

.lead-magnet-optin__panel {
    background: var(--brand-light);
    border-radius: var(--brand-radius-lg);
    box-shadow: var(--brand-shadow);
    padding: 2.5rem;
    max-width: 720px;
    margin: 0 auto;
}

.lead-magnet-optin__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: 0.75rem;
}

.lead-magnet-optin__eyebrow .bi {
    font-size: 0.9rem;
    color: var(--brand-primary);
}

.lead-magnet-optin__title {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.lead-magnet-optin__desc {
    color: var(--brand-text-muted);
    max-width: 52ch;
    margin-bottom: 1.75rem;
}

.lead-magnet-optin__field .form-label .req {
    color: var(--brand-primary);
    margin-left: 0.15rem;
}

.lead-magnet-optin__submit {
    padding: 0.65rem 1.75rem;
    border-radius: var(--brand-radius);
    font-size: 1rem;
}

/* Non-color focus indicator layered on top of the sitewide `.form-control:focus`
   soft ring, so field focus never depends on color alone (WCAG 2.4.7 / 1.4.1).
   The submit button deliberately has no rule here - `.btn-accent:focus-visible`
   above already gives it a two-ring treatment that works on light and dark. */
.lead-magnet-optin__panel .form-control:focus {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.lead-magnet-optin__consent {
    font-size: 0.8125rem;
    color: var(--brand-text-muted);
    margin-top: 1rem;
    margin-bottom: 0;
}

.lead-magnet-optin__consent a {
    color: var(--brand-primary);
    text-decoration: underline;
}

.lead-magnet-optin__consent a:hover,
.lead-magnet-optin__consent a:focus-visible {
    color: var(--brand-primary-dark);
}

.lead-magnet-optin__consent a:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

.lead-magnet-optin__error {
    max-width: 720px;
    margin: 0 auto 1.25rem;
}

/* Honeypot - MUST stay off-screen via position, never display:none /
   visibility:hidden (bots skip those two, humans and AT never reach it). */
.lead-magnet-optin__honeypot {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .lead-magnet-optin__panel {
        padding: 1.75rem 1.25rem;
    }

    .lead-magnet-optin__title {
        font-size: 1.5rem;
    }
}

/* ---- Subscribe Confirmation Pages ----
   Shared by /subscribe/check-email and /subscribe/confirmed. Both sit inside
   `.hero-section`, which was navy-dominant (light-on-dark) when this panel was designed as
   a frosted-glass translucent-white overlay. /od's pink-dominant redesign (2026-08-05) makes
   that treatment illegible (near-white-on-pink has poor panel definition and the warm-tan
   label color fails contrast outright), so this panel is redesigned as a solid off-white
   card - the same "white card floating on a colored field" convention already used
   sitewide (.card, .package-card) - with navy text. Contrast independently computed: navy on
   the off-white panel 17.4:1, navy-muted on the panel 10.1:1 - both clear AA/AAA. */

.confirm-hero__icon {
    color: var(--brand-primary);
    margin-bottom: 1.5rem;
}

.confirm-hero__lead {
    max-width: 44ch;
    margin: 0 auto 2rem;
}

.confirm-hero__guide-panel {
    background: var(--brand-white);
    border: 1px solid rgba(14, 23, 44, 0.1);
    border-radius: var(--brand-radius-lg);
    box-shadow: var(--brand-shadow);
    padding: 1.5rem 1.75rem;
    max-width: 560px;
    margin: 0 auto 2rem;
    text-align: left;
}

.confirm-hero__guide-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand-primary);
    margin-bottom: 0.4rem;
}

.confirm-hero__guide-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: var(--brand-primary);
}

.confirm-hero__guide-desc {
    font-size: 0.9375rem;
    color: var(--brand-navy-muted);
    margin-bottom: 0;
}

/* ---- Testimonials ----
   Lifted from the /od design artifact for Plan 04-03
   (.planning/features/v01/04-brand-content-fidelity/artifacts/04-03-testimonials-disclaimer.html),
   "NEW - TESTIMONIALS PAGE CUSTOM CSS" block. The artifact's preview-only reproduction of the
   existing tokens/.section/.card/.btn-accent rules is deliberately NOT lifted - those already
   live above in this file. */

/* Primary testimonial: one featured card. Gradient top rule + accent glyph give it weight
   without a shouting full-bleed tinted band, keeping the supporter chorus below subordinate. */
.testimonial-primary {
    position: relative;
    background: var(--brand-white);
    border-radius: var(--brand-radius-lg);
    box-shadow: var(--brand-shadow-lg);
    padding: 3rem clamp(1.5rem, 5vw, 4rem);
    text-align: center;
    border-top: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--brand-gradient-start), var(--brand-gradient-end)) 1;
}

.testimonial-primary__glyph {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--brand-accent);
    margin-bottom: 1.25rem;
}

/* Navy glyph on the blush-pink chip - 14.6:1. The reverse (blush on white) would fail AA,
   which is why --brand-accent is only ever used as a background here. */
.testimonial-primary__glyph i {
    color: var(--brand-primary);
    font-size: 1.375rem;
}

.testimonial-primary__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--brand-primary-dark);
    margin-bottom: 0.5rem;
}

.testimonial-primary__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--brand-text-dark);
    margin-bottom: 1.5rem;
}

.testimonial-primary__quote {
    margin: 0 0 1.75rem;
}

.testimonial-primary__quote p {
    font-size: clamp(1.125rem, 2vw, 1.375rem);
    line-height: 1.6;
    color: var(--brand-text-dark);
    font-style: italic;
}

.testimonial-primary__footer {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-style: normal;
}

/* Suppress Bootstrap's default .blockquote-footer::before em-dash glyph; the avatar chip
   below is the attribution anchor instead. */
.testimonial-primary__footer.blockquote-footer::before {
    content: "";
}

/* Decorative initials chip - aria-hidden in markup, the <cite> carries the real name. */
.testimonial-primary__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--brand-primary);
    color: var(--brand-text-light);
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.testimonial-primary__footer cite {
    font-style: normal;
    font-weight: 600;
    color: var(--brand-text-dark);
}

/* Supporter chorus. auto-fit with a max track width + centered justification handles the
   awkward 5-item count: the trailing row centers rather than stranding an orphan left. */
.supporter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
    justify-content: center;
    gap: 1.5rem;
}

.supporter-note {
    background: var(--brand-white);
    border-radius: var(--brand-radius);
    box-shadow: var(--brand-shadow);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.supporter-note__icon {
    color: var(--brand-primary);
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

/* flex-grow keeps the author row bottom-aligned across the very uneven note lengths;
   overflow-wrap guards the long email-shaped supporter handle from overflowing its card. */
.supporter-note__text {
    color: var(--brand-text-dark);
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0 0 0.75rem;
    flex-grow: 1;
    overflow-wrap: anywhere;
}

.supporter-note__author {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--brand-text-muted);
    padding-top: 0.5rem;
    border-top: 1px solid #e9ecef;
    margin: 0;
    overflow-wrap: anywhere;
}

/* Legal disclaimer: quiet bordered panel, not a full section band - see the rationale comment
   in Testimonials.razor. Kept at 15px / --brand-charcoal (12.6:1 on white) so "quiet" is a
   layout decision, never a legibility one. */
.legal-disclaimer-panel {
    margin: 3rem auto 0;
    max-width: 860px;
    padding: 1.75rem clamp(1.25rem, 4vw, 2.5rem);
    background: var(--brand-white);
    border: 1px solid #e2e2e2;
    border-radius: var(--brand-radius);
}

.legal-disclaimer-panel__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--brand-text-dark);
    margin-bottom: 0.75rem;
}

.legal-disclaimer-panel__title i {
    color: var(--brand-primary);
    font-size: 1.0625rem;
}

.legal-disclaimer-panel__text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--brand-charcoal);
    margin: 0;
}

/* ---- Responsive ---- */

@media (max-width: 991.98px) {
    .hero-section {
        padding: 3.5rem 0;
    }

    .hero-section h1 {
        font-size: 2rem;
    }

    .hero-home h1 {
        font-size: 2.25rem;
    }

    .section {
        padding: var(--brand-section-padding-sm);
    }
}

@media (max-width: 575.98px) {
    .hero-section h1 {
        font-size: 1.75rem;
    }

    .navbar .navbar-brand img {
        max-height: 36px;
    }
}