/*
 * Generations Screwed / Génération Sacrifiée microsite skin.
 *
 * Loads after `ctf-main` (parent theme) so every rule here either layers
 * on top of, or surgically overrides, the shared design system.
 *
 * Tone: tabloid-bold, college-poster energy. High-contrast black canvas,
 * an angry red accent, and a hazard-yellow highlight reserved for #debtsucks-
 * style emphasis. We deliberately avoid CTF teal — that's the corporate
 * parent brand; GS is its punk-rock kid sibling.
 *
 * Structure:
 *   1. Design tokens scoped to .gs-site
 *   2. Layout primitives + buttons + links
 *   3. Site chrome (header, footer, mobile nav)
 *   4. Homepage sections (hero, stats, featured-petition, newsletter, join)
 *   5. Inherited template skins (donation form, petition form)
 *   7. Content pages (About, policy, join info)
 *   8. Petitions archive
 *   9. Join sign-up page
 *  10. Tax burden calculator
 *   6. Locale-specific tweaks (.gs-site--gs_fr)
 */

/* 1. Design tokens ----------------------------------------------------- *
 * Tuned for sustained reading on a dark canvas: WCAG AA against bg for
 * every fg token, accent red is the slightly desaturated `#e8323e`
 * (instead of the full-saturation `#ff2e3a` that vibrated against
 * white text), and the previously full-bleed accent surfaces are
 * gone — accent is reserved for inline emphasis, buttons, and rules.
 */
.gs-site {
    --gs-color-bg:           #0d0d0d;
    --gs-color-fg:           #ffffff;
    --gs-color-fg-muted:     #cfcfcf;
    --gs-color-fg-subtle:    #9aa0a6;
    --gs-color-surface:      #181818;
    --gs-color-surface-2:    #232323;
    --gs-color-border:       rgba(255, 255, 255, 0.10);

    --gs-color-accent:       #e8323e;
    /* Darken on hover (parent .btn-primary: #dd230f → #cd3423). Keeps white
     * labels readable; stepped down again from #c41e2a per design feedback. */
    --gs-color-accent-hover: #9e1520;
    --gs-color-accent-ink:   #ffffff;
    --gs-color-accent-soft:  rgba(232, 50, 62, 0.18);

    --gs-color-highlight:    #ffd400;
    --gs-color-highlight-ink:#101010;

    --gs-radius-sm: 4px;
    --gs-radius-md: 10px;
    --gs-radius-lg: 18px;

    /* Match parent `ctf-landing-pages` button corners (components.css,
     * donation-template.css) — not the pill shape we used early on. */
    --gs-btn-radius: 4px;
    --gs-btn-radius-donate: 8px;

    --gs-shadow-card: 0 24px 48px -24px rgba(0, 0, 0, 0.6);

    --gs-space-1:  4px;
    --gs-space-2:  8px;
    --gs-space-3:  16px;
    --gs-space-4:  24px;
    --gs-space-5:  40px;
    --gs-space-6:  64px;
    --gs-space-7:  96px;

    --gs-container: 1180px;
    --gs-font-display: "Inter", "Helvetica Neue", Arial, sans-serif;
    --gs-font-body:    "Inter", "Helvetica Neue", Arial, sans-serif;

    background: var(--gs-color-bg);
    color: var(--gs-color-fg);
    font-family: var(--gs-font-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Interaction model (dark UI):
 *   • No underlines anywhere — parent `style.css` underlines all `a:hover`.
 *   • Chrome (logo, nav, footer): neutral hover (tint / opacity), not accent red.
 *   • Accent red is for CTAs and in-content text links only.
 *   • Buttons: deepen fill on hover (see .gs-btn--*). */
.gs-site a,
.gs-site a:hover,
.gs-site a:focus {
    text-decoration: none;
}
.gs-site main a:not(.gs-btn):not(.btn):not(.donate-button),
.gs-site .gs-link {
    color: var(--gs-color-fg-muted);
    transition: color 0.15s ease;
}
.gs-site main a:not(.gs-btn):not(.btn):not(.donate-button):hover,
.gs-site main a:not(.gs-btn):not(.btn):not(.donate-button):focus-visible,
.gs-site .gs-link:hover,
.gs-site .gs-link:focus-visible {
    color: var(--gs-color-fg);
}
.gs-site .gs-link--bold,
.gs-site .gs-link--bold:hover,
.gs-site .gs-link--bold:focus-visible {
    color: var(--gs-color-accent);
}
.gs-site .gs-link--bold:hover,
.gs-site .gs-link--bold:focus-visible {
    color: var(--gs-color-fg);
}
.gs-site a:focus-visible {
    outline: 2px solid var(--gs-color-accent);
    outline-offset: 3px;
}
.gs-site .gs-btn:focus-visible,
.gs-site .btn:focus-visible {
    outline-offset: 2px;
}

.gs-site h1, .gs-site h2, .gs-site h3, .gs-site h4 {
    font-family: var(--gs-font-display);
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin: 0;
}

/* 2. Primitives -------------------------------------------------------- */
.gs-site main { display: block; }

.gs-section-header { max-width: 760px; }
.gs-section-header__title { font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; }
.gs-section-header__lead {
    margin-top: var(--gs-space-3);
    color: var(--gs-color-fg-muted);
    font-size: 1.125rem;
    line-height: 1.55;
}

.gs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gs-space-2);
    padding: 14px 22px;
    border: 2px solid transparent;
    border-radius: var(--gs-btn-radius);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.gs-btn:active { transform: translateY(1px); }
.gs-btn--lg { padding: 18px 28px; font-size: 1.0625rem; }

.gs-btn--accent {
    background: var(--gs-color-accent);
    color: var(--gs-color-accent-ink);
    border-color: var(--gs-color-accent);
}
.gs-btn--accent:hover {
    background: var(--gs-color-accent-hover);
    border-color: var(--gs-color-accent-hover);
    color: var(--gs-color-accent-ink);
}

/* Link-styled CTAs: beat parent `a:hover { text-decoration: underline }`. */
.gs-site a.gs-btn,
.gs-site a.gs-btn:hover,
.gs-site a.gs-btn:focus,
.gs-site a.gs-btn:focus-visible,
.gs-site a.btn,
.gs-site a.btn:hover,
.gs-site a.btn:focus,
.gs-site a.btn:focus-visible {
    text-decoration: none;
}
.gs-site a.gs-btn--accent,
.gs-site a.gs-btn--accent:hover,
.gs-site a.gs-btn--accent:focus,
.gs-site a.gs-btn--accent:focus-visible,
.gs-site a.btn.btn-primary,
.gs-site a.btn.btn-primary:hover,
.gs-site a.btn.btn-primary:focus,
.gs-site a.btn.btn-primary:focus-visible {
    color: var(--gs-color-accent-ink);
}
.gs-site a.gs-btn--ghost,
.gs-site a.gs-btn--ghost:hover,
.gs-site a.gs-btn--ghost:focus,
.gs-site a.gs-btn--ghost:focus-visible {
    color: var(--gs-color-fg);
}

/* Outline secondary (404 etc.) — accent border, not a second solid CTA. */
.gs-btn--ghost {
    background: transparent;
    color: var(--gs-color-fg);
    border-color: var(--gs-color-accent);
}
.gs-btn--ghost:hover,
.gs-btn--ghost:focus-visible {
    background: var(--gs-color-accent-soft);
    border-color: var(--gs-color-accent);
    color: var(--gs-color-fg);
}

.gs-link { font-weight: 600; }
.gs-link--inline { font-weight: 600; }
.gs-link--bold {
    display: inline-flex;
    align-items: center;
    gap: var(--gs-space-2);
    font-weight: 700;
}

/* 3. Site chrome ------------------------------------------------------- */
.gs-site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(13, 13, 13, 0.92);
    backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--gs-color-border);
}
.gs-site-header__inner {
    max-width: var(--gs-container);
    margin: 0 auto;
    padding: var(--gs-space-3) var(--gs-space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gs-space-4);
}

.gs-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--gs-space-2);
    text-decoration: none;
    color: var(--gs-color-fg);
    border-radius: var(--gs-radius-sm);
}
.gs-logo:hover,
.gs-logo:focus-visible {
    text-decoration: none;
    color: var(--gs-color-fg);
}
/* Only the mark reacts — wordmark stays steady so the lockup doesn't flash. */
.gs-logo:hover .gs-logo__mark,
.gs-logo:focus-visible .gs-logo__mark {
    background: var(--gs-color-accent-hover);
}
.gs-logo__mark {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: var(--gs-color-accent);
    color: var(--gs-color-accent-ink);
    font-family: var(--gs-font-display);
    font-weight: 900;
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    border-radius: var(--gs-radius-sm);
    transition: background 0.15s ease;
}
.gs-logo__wordmark {
    font-family: var(--gs-font-display);
    font-weight: 800;
    font-size: 1.125rem;
    letter-spacing: 0.01em;
}
.gs-logo--floating {
    position: fixed;
    top: var(--gs-space-3);
    left: var(--gs-space-4);
    z-index: 60;
}
.gs-logo--footer { color: var(--gs-color-fg); cursor: default; }

.gs-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--gs-space-4);
}
.gs-nav a {
    color: var(--gs-color-fg);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
}
/* Text nav items: quiet pill hover (parent .main-navigation pattern), not
 * accent-red — that colour is reserved for the Donate CTA beside them. */
.gs-nav a:not(.gs-btn) {
    padding: 0.5rem 0.75rem;
    border-radius: var(--gs-btn-radius);
    transition: background-color 0.15s ease, color 0.15s ease;
}
.gs-nav a:not(.gs-btn):hover,
.gs-nav a:not(.gs-btn):focus-visible {
    color: var(--gs-color-fg);
    background: rgba(255, 255, 255, 0.08);
    text-decoration: none;
}
.gs-nav__cta a { padding: 10px 18px; }

.gs-menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    width: 36px;
    height: 36px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}
.gs-menu-toggle span { display: block; width: 22px; height: 2px; background: var(--gs-color-fg); }

.gs-site-footer {
    border-top: 1px solid var(--gs-color-border);
    background: var(--gs-color-bg);
    padding: var(--gs-space-7) var(--gs-space-4) var(--gs-space-5);
    margin-top: var(--gs-space-7);
}
.gs-site-footer__inner {
    max-width: var(--gs-container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: var(--gs-space-6);
}
.gs-site-footer__brand .gs-logo { margin-bottom: var(--gs-space-3); }
.gs-site-footer__tagline { color: var(--gs-color-fg-muted); max-width: 36ch; line-height: 1.5; }
.gs-site-footer__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gs-space-5); }
.gs-site-footer__col-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--gs-space-3);
    color: var(--gs-color-fg-muted);
}
.gs-site-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--gs-space-2); }
.gs-site-footer__col a {
    text-decoration: none;
    padding: 0.15rem 0;
    border-radius: var(--gs-radius-sm);
    transition: color 0.15s ease, opacity 0.15s ease;
}
.gs-site-footer__col a:hover,
.gs-site-footer__col a:focus-visible {
    color: var(--gs-color-fg);
    text-decoration: none;
    opacity: 0.9;
}
.gs-site-footer__legal {
    grid-column: 1 / -1;
    margin-top: var(--gs-space-5);
    padding-top: var(--gs-space-4);
    border-top: 1px solid var(--gs-color-border);
    display: flex;
    justify-content: space-between;
    gap: var(--gs-space-3);
    color: var(--gs-color-fg-muted);
    font-size: 0.875rem;
}
.gs-site-footer__legal a { color: var(--gs-color-fg-muted); }

/* 4. Homepage sections ------------------------------------------------ */
.gs-home > section { padding: var(--gs-space-7) var(--gs-space-4); }
.gs-home > section:first-child { padding-top: var(--gs-space-6); }

/* Hero */
.gs-hero {
    background:
        radial-gradient(circle at 85% 0%, var(--gs-color-accent-soft), transparent 55%),
        var(--gs-color-bg);
    border-bottom: 1px solid var(--gs-color-border);
}
.gs-hero__inner {
    max-width: var(--gs-container);
    margin: 0 auto;
    display: grid;
    gap: var(--gs-space-4);
    padding: var(--gs-space-5) 0;
}
.gs-hero__eyebrow {
    display: inline-block;
    width: max-content;
    padding: 6px 12px;
    background: var(--gs-color-highlight);
    color: var(--gs-color-highlight-ink);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: var(--gs-radius-sm);
}
.gs-hero__headline {
    font-size: clamp(2.5rem, 6vw, 5.25rem);
    font-weight: 900;
    text-wrap: balance;
    color: var(--gs-color-fg);
}
.gs-hero__headline-pre {
    display: block;
    color: var(--gs-color-fg-muted);
    font-weight: 700;
    font-size: clamp(1.25rem, 2.4vw, 1.875rem);
    margin-bottom: var(--gs-space-2);
}
/* Half-white / half-red text effect on the emphasis line. The fill is a
 * hard-stop linear gradient masked through the glyphs via background-clip,
 * giving each letter a top-half white / bottom-half accent split. Uses
 * the desaturated `--gs-color-accent` (#e8323e) so the bottom half reads
 * as bold without vibrating against the top white. Keep `color` set as a
 * fallback for browsers that ignore -webkit-text-fill-color.            */
.gs-hero__headline-emph {
    display: block;
    color: var(--gs-color-fg);
    background: linear-gradient(180deg, var(--gs-color-fg) 60%, var(--gs-color-accent) 60%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gs-hero__lead {
    max-width: 60ch;
    color: var(--gs-color-fg-muted);
    font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
    line-height: 1.55;
}
.gs-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gs-space-3);
    margin-top: var(--gs-space-3);
}
/* Hero secondary ("Calculate your tax burden"): transparent at rest;
 * hover inverts to white fill + accent red label. */
.gs-hero__ctas .gs-btn--ghost {
    background: transparent;
    color: var(--gs-color-fg);
    border-color: var(--gs-color-fg);
}
.gs-hero__ctas .gs-btn--ghost:hover,
.gs-hero__ctas .gs-btn--ghost:focus-visible {
    background: var(--gs-color-fg);
    border-color: var(--gs-color-fg);
    color: var(--gs-color-accent);
}
.gs-site .gs-hero__ctas a.gs-btn--ghost,
.gs-site .gs-hero__ctas a.gs-btn--ghost:focus,
.gs-site .gs-hero__ctas a.gs-btn--ghost:focus-visible {
    text-decoration: none;
    color: var(--gs-color-fg);
}
.gs-site .gs-hero__ctas a.gs-btn--ghost:hover,
.gs-site .gs-hero__ctas a.gs-btn--ghost:focus-visible {
    color: var(--gs-color-accent);
}
.gs-hero__hashtag {
    margin-top: var(--gs-space-4);
    font-family: var(--gs-font-display);
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--gs-color-accent);
    font-size: 1.125rem;
}

/* Stats */
.gs-stats { background: var(--gs-color-surface); }
.gs-stats__inner { max-width: var(--gs-container); margin: 0 auto; }
.gs-stats__grid {
    list-style: none;
    margin: var(--gs-space-5) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--gs-space-3);
}
.gs-stat {
    background: var(--gs-color-surface-2);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-radius-md);
    padding: var(--gs-space-4);
    display: grid;
    gap: var(--gs-space-2);
    position: relative;
}
.gs-stat::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    background: var(--gs-color-accent);
    border-radius: 2px;
    margin-bottom: var(--gs-space-2);
}
.gs-stat__value {
    font-family: var(--gs-font-display);
    font-size: clamp(2rem, 3.6vw, 3rem);
    font-weight: 900;
    color: var(--gs-color-fg);
    line-height: 1;
}
.gs-stat__label { color: var(--gs-color-fg-muted); line-height: 1.45; }
.gs-stats__cta { margin-top: var(--gs-space-5); }

/* Featured petition */
.gs-featured__inner { max-width: var(--gs-container); margin: 0 auto; }
.gs-featured__card {
    background: var(--gs-color-surface);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-radius-lg);
    padding: clamp(var(--gs-space-4), 4vw, var(--gs-space-6));
    box-shadow: var(--gs-shadow-card);
    display: grid;
    gap: var(--gs-space-3);
}
.gs-featured__eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--gs-color-accent);
    margin: 0;
}
.gs-featured__title { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; max-width: 22ch; }
.gs-featured__body { color: var(--gs-color-fg-muted); line-height: 1.6; max-width: 64ch; }
.gs-featured__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gs-space-4); margin-top: var(--gs-space-3); }

/* Newsletter — dark canvas with accent rule on the side. The previous
 * full-bleed red background reads at-a-glance but fatigues on extended
 * exposure (saturated red + white text vibrates). Now uses the same
 * surface colors as the rest of the page with a left accent border so
 * the section is still visually distinct without screaming. */
.gs-newsletter {
    background: var(--gs-color-surface);
    color: var(--gs-color-fg);
    border-top: 1px solid var(--gs-color-border);
    border-bottom: 1px solid var(--gs-color-border);
}
.gs-newsletter__inner {
    max-width: var(--gs-container);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gs-space-5);
    align-items: center;
    border-left: 4px solid var(--gs-color-accent);
    padding-left: var(--gs-space-4);
}
.gs-newsletter__title { font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 900; max-width: 18ch; color: var(--gs-color-fg); }
.gs-newsletter__lead { margin-top: var(--gs-space-3); color: var(--gs-color-fg-muted); line-height: 1.55; max-width: 50ch; }
.gs-newsletter__form { display: grid; gap: var(--gs-space-3); }
.gs-field { display: grid; gap: 6px; }
.gs-field__label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gs-color-fg-muted); }
.gs-newsletter__form input,
.gs-newsletter__form select {
    width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-btn-radius);
    background-color: var(--gs-color-bg);
    color: var(--gs-color-fg);
    font-size: 1rem;
    line-height: 1.5;
    font-family: inherit;
}
/* Native `<select>` shows a second chevron on macOS/Safari unless we strip
 * appearance and paint one arrow — same approach as parent .form-control. */
.gs-newsletter__form select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.75rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23cfcfcf' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}
.gs-newsletter__form select:hover { border-color: rgba(255, 255, 255, 0.22); }
.gs-newsletter__form input::placeholder { color: var(--gs-color-fg-subtle); }
.gs-newsletter__form input:focus,
.gs-newsletter__form select:focus {
    outline: 2px solid var(--gs-color-accent);
    outline-offset: 1px;
    border-color: var(--gs-color-accent);
}
.gs-newsletter__form .gs-btn--accent {
    background: var(--gs-color-accent);
    border-color: var(--gs-color-accent);
    color: var(--gs-color-accent-ink);
    margin-top: var(--gs-space-2);
}
.gs-newsletter__form .gs-btn--accent:hover {
    background: var(--gs-color-accent-hover);
    border-color: var(--gs-color-accent-hover);
    color: var(--gs-color-accent-ink);
    text-decoration: none;
}

/* Join CTA */
.gs-join__inner { max-width: var(--gs-container); margin: 0 auto; }
.gs-join__kicker {
    display: inline-block;
    color: var(--gs-color-accent);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    margin-bottom: var(--gs-space-2);
}
.gs-join__title { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 900; max-width: 18ch; }
.gs-join__body { margin-top: var(--gs-space-3); color: var(--gs-color-fg-muted); line-height: 1.55; max-width: 60ch; font-size: 1.125rem; }
.gs-join__cards {
    list-style: none;
    margin: var(--gs-space-5) 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--gs-space-3);
}
.gs-join-card {
    background: var(--gs-color-surface);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-radius-md);
    padding: var(--gs-space-4);
    display: grid;
    gap: var(--gs-space-2);
    transition: transform 160ms ease, border-color 160ms ease;
}
.gs-join-card:hover { transform: translateY(-2px); border-color: var(--gs-color-accent); }
.gs-join-card__eyebrow {
    color: var(--gs-color-accent);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
    font-weight: 800;
}
.gs-join-card__title { font-size: 1.5rem; font-weight: 800; }
.gs-join-card__body { color: var(--gs-color-fg-muted); line-height: 1.5; }

/* 5. Inherited template skins ----------------------------------------- *
 * The donation + petition flows render via the parent's
 * page-donation.php / page-petition.php and content-* template parts.
 * Class names targeted here are taken verbatim from the parent (see
 * template-parts/content-donation.php, content-petition.php, and the
 * action-sections/*.php files) — don't rename without updating both.
 */
.gs-site .donation-template,
.gs-site .donation-with-video,
.gs-site .petition-form,
.gs-site .donation-form,
.gs-site .next-step-question-block {
    color: var(--gs-color-fg);
}
.gs-site .donation-template,
.gs-site [class*="action-section-"] {
    background: var(--gs-color-surface);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-radius-lg);
    color: var(--gs-color-fg);
}
.gs-site .donation-template h1,
.gs-site .donation-headline,
.gs-site .next-step-selected-answer__value,
.gs-site .petition-form h1 { color: var(--gs-color-fg); font-weight: 900; }

.gs-site input[type="text"],
.gs-site input[type="email"],
.gs-site input[type="tel"],
.gs-site input[type="number"],
.gs-site select,
.gs-site textarea {
    box-sizing: border-box;
    min-height: 44px;
    padding: 0.75rem 1rem;
    line-height: 1.5;
    background: var(--gs-color-surface-2);
    border: 1px solid var(--gs-color-border);
    color: var(--gs-color-fg);
    border-radius: var(--gs-btn-radius);
}
.gs-site select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.5rem;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23cfcfcf' d='M6 8 0 0h12z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px 8px;
}
.gs-site select:hover { border-color: rgba(255, 255, 255, 0.22); }
.gs-site input:focus,
.gs-site select:focus,
.gs-site textarea:focus {
    outline: 2px solid var(--gs-color-accent);
    outline-offset: 1px;
    border-color: var(--gs-color-accent);
}

/* Re-skin every primary button in the parent's flows. The parent uses
 * `.btn.btn-primary.btn-large` everywhere (donate, sign petition,
 * survey, action-continue), so a single rule re-brands them all. */
.gs-site .btn.btn-primary,
.gs-site .action-continue-btn,
.gs-site button[type="submit"] {
    background: var(--gs-color-accent);
    color: var(--gs-color-accent-ink);
    border-color: var(--gs-color-accent);
    border-radius: var(--gs-btn-radius);
    font-weight: 800;
    letter-spacing: 0.02em;
}
.gs-site .donate-button {
    background: var(--gs-color-accent);
    color: var(--gs-color-accent-ink);
    border-color: var(--gs-color-accent);
    border-radius: var(--gs-btn-radius-donate);
    font-weight: 800;
    letter-spacing: 0.02em;
}
.gs-site .btn.btn-primary:hover,
.gs-site .action-continue-btn:hover,
.gs-site button[type="submit"]:hover,
.gs-site .donate-button:hover {
    background: var(--gs-color-accent-hover);
    border-color: var(--gs-color-accent-hover);
    color: var(--gs-color-accent-ink);
    text-decoration: none;
}

/* --- Donation template body copy contrast ---------------------------- *
 * The parent renders intro copy in dark grey on a white card. Our card
 * is black, so the inherited text becomes near-invisible. Force a
 * readable foreground for everything inside .donation-template that
 * the parent didn't already explicitly color (i.e. paragraphs, links,
 * lists, strong/em, the small notes under the amount grid).            */
.gs-site .donation-template,
.gs-site .donation-content,
.gs-site .donation-content p,
.gs-site .donation-content li,
.gs-site .donation-info-text p,
.gs-site .donation-info-text em {
    color: var(--gs-color-fg);
}
.gs-site .donation-content p,
.gs-site .donation-content li {
    color: rgba(255, 255, 255, 0.86);
    line-height: 1.55;
}
.gs-site .donation-content strong { color: var(--gs-color-fg); }
.gs-site .donation-content a {
    color: var(--gs-color-fg-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}
.gs-site .donation-content a:hover,
.gs-site .donation-content a:focus-visible {
    color: var(--gs-color-fg);
    text-decoration: none;
}

/* The "Donations of $100 and higher receive The Taxpayer magazine" line
 * uses the parent's accent red — that still works on dark, but bump the
 * weight so it doesn't fade into the surrounding muted text. */
.gs-site .magazine-note { color: var(--gs-color-accent); font-weight: 700; }
.gs-site .donation-info-text em { color: var(--gs-color-fg-muted); }

/* --- Amount preset buttons re-skinned for dark canvas ---------------- *
 * Parent declares background / hover / checked states with !important
 * (donation-template.css line 227+, 238+). Keep equal specificity here
 * and re-declare with !important so the cascade actually flips. Source
 * of truth for the class names: template-parts/content-donation.php
 * and css/donation-template.css. Don't rename without grepping both.  */
.gs-site .amount-display,
.gs-site .custom-amount .amount-display,
.gs-site .custom-amount input[type="number"] {
    background: var(--gs-color-surface-2) !important;
    border-color: var(--gs-color-border) !important;
    color: var(--gs-color-fg) !important;
}
.gs-site .amount-option:hover .amount-display,
.gs-site .custom-amount:hover .amount-display,
.gs-site .custom-amount:hover input[type="number"] {
    background: var(--gs-color-accent-soft) !important;
    border-color: var(--gs-color-accent) !important;
    color: var(--gs-color-fg) !important;
}
.gs-site .amount-option input[type="radio"]:checked + .amount-display,
.gs-site .custom-amount.selected .amount-display,
.gs-site .custom-amount:has(input[type="radio"]:checked) .amount-display {
    background: var(--gs-color-accent) !important;
    border-color: var(--gs-color-accent) !important;
    color: var(--gs-color-accent-ink) !important;
}
.gs-site .amount-option.amount-featured .amount-display {
    border-color: var(--gs-color-accent) !important;
}
.gs-site .amount-option small { color: var(--gs-color-fg-muted); }
.gs-site .amount-option input[type="radio"]:checked + .amount-display + small,
.gs-site .amount-option input[type="radio"]:checked ~ small { color: var(--gs-color-accent-ink); }

/* --- Frequency toggle dark-mode polish -------------------------------- *
 * Parent (`donation-template.css` line 128) sets `.toggle-label { color:
 * #1a2a3a }` — designed for a white pill. On our dark canvas that's
 * navy-on-charcoal, near-invisible. The selected label is overridden
 * to #fff by a (0,4,2) selector that targets sibling-checked + last-of-
 * type, so we only need to fix the unselected one — but use !important
 * defensively because the parent has !important sprinkled across this
 * file and we want to survive any future refactor / load-order shuffle. */
.gs-site .donation-frequency-toggle {
    background: var(--gs-color-surface-2) !important;
    border: 1px solid var(--gs-color-border) !important;
}
.gs-site .donation-frequency-toggle .toggle-label,
.gs-site .toggle-wrapper .toggle-label {
    color: var(--gs-color-fg) !important;
    opacity: 0.55;
    transition: opacity 0.2s ease, color 0.2s ease;
}
/* Promote the *currently-selected* label back to fully opaque. The
 * parent's color rule uses a fragile sibling chain that misfires in
 * one of the two states (when MONTHLY is checked, the `:last-of-type`
 * branch lights up DONATE TODAY too). `:has()` on the toggle container
 * lets us bind each label to its own radio cleanly:
 *   - monthly radio checked  -> only label[for=frequency-monthly] opaque
 *   - once radio checked     -> only label[for=frequency-once]    opaque
 * Both are paired with hover so the inactive pill brightens on point. */
.gs-site .donation-frequency-toggle:has(#frequency-monthly:checked) .toggle-label[for="frequency-monthly"],
.gs-site .donation-frequency-toggle:has(#frequency-once:checked)    .toggle-label[for="frequency-once"] {
    opacity: 1;
}
.gs-site .donation-frequency-toggle .toggle-label:hover { opacity: 1; }
.gs-site .frequency-description { color: var(--gs-color-fg-muted); }

/* Parent's `.prompt-arrow` is a 39x30 black PNG sprite
 * (taxpayer.com/media/black_arrow_25.png) sitting next to the "A monthly
 * gift will go even further..." copy. Black-on-black is invisible — use
 * a CSS filter to flip the asset to white without coordinating a new
 * image with the brand team. invert+brightness keeps any anti-aliased
 * edges crisp instead of smearing them grey.                             */
.gs-site .prompt-arrow { filter: invert(1) brightness(2); opacity: 0.85; }
.gs-site .monthly-prompt p { color: var(--gs-color-fg-muted); }

/* --- Donation payment block (Stripe / PayPal) ------------------------- *
 * Parent `.payment-section` is #f8fafb; Stripe iframes use GS appearance
 * via `window.ctfStripeAppearance` (GS functions.php). These rules skin the
 * surrounding chrome and legacy Card Element wrapper. */
.gs-site .payment-section {
    background: var(--gs-color-surface-2) !important;
    border: 1px solid var(--gs-color-border) !important;
    border-radius: var(--gs-radius-md);
    padding: clamp(var(--gs-space-3), 4vw, var(--gs-space-4)) !important;
}
.gs-site .payment-section-overlay {
    background: rgba(13, 13, 13, 0.92) !important;
}
.gs-site .payment-section-overlay p {
    color: var(--gs-color-fg-muted) !important;
}
.gs-site .payment-section-spinner {
    border-color: var(--gs-color-border) !important;
    border-top-color: var(--gs-color-accent) !important;
}
.gs-site .payment-divider {
    color: var(--gs-color-fg-muted) !important;
}
.gs-site .payment-divider span {
    color: inherit;
}
.gs-site .express-payment-buttons {
    gap: var(--gs-space-2);
}
.gs-site .express-checkout-container,
.gs-site .paypal-button-container {
    border-radius: var(--gs-btn-radius);
    overflow: hidden;
}
.gs-site .stripe-card-element,
.gs-site .stripe-payment-element {
    /* Slightly lifted from page bg so Stripe's inner field (#232323) has separation. */
    background: var(--gs-color-surface-2) !important;
    border: 1px solid var(--gs-color-border) !important;
    border-radius: var(--gs-btn-radius);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    color: var(--gs-color-fg);
}
.gs-site .stripe-card-element.StripeElement--focus,
.gs-site .stripe-payment-element:focus-within {
    border-color: var(--gs-color-accent) !important;
    box-shadow: 0 0 0 2px var(--gs-color-accent-soft) !important;
    background: var(--gs-color-bg) !important;
}
.gs-site .stripe-card-element.StripeElement--invalid {
    border-color: #ff6b7a !important;
}
.gs-site .stripe-card-element.StripeElement--complete {
    border-color: rgba(72, 187, 120, 0.65) !important;
}
.gs-site .card-errors,
.gs-site #payment-element-errors {
    color: #ff8a94;
    font-size: 0.875rem;
}
.gs-site .payment-section .card-lock-icon {
    filter: brightness(0) invert(1);
    opacity: 0.75;
}
.gs-site .other-options {
    border-top-color: var(--gs-color-border) !important;
}
.gs-site .other-options h3 {
    color: var(--gs-color-fg) !important;
}
.gs-site .option-list p,
.gs-site .contact-info {
    color: var(--gs-color-fg-muted) !important;
}
.gs-site .contact-info a {
    color: var(--gs-color-fg-muted);
}
.gs-site .contact-info a:hover,
.gs-site .contact-info a:focus-visible {
    color: var(--gs-color-fg);
}

/* --- Petition flow re-skin ------------------------------------------- *
 * Parent's petition template + petition-card grid assume a white card.
 * Bring them onto the GS surface palette so titles, body copy, meta
 * lines, and the inline form labels all stay readable.               */
.gs-site .petition-form,
.gs-site .petition-template,
.gs-site .petition-card,
.gs-site .petition-archive-grid .petition-card {
    background: var(--gs-color-surface);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-radius-lg);
    color: var(--gs-color-fg);
}
.gs-site .petition-form h1,
.gs-site .petition-form h2,
.gs-site .petition-form h3,
.gs-site .petition-template h1,
.gs-site .petition-template h2,
.gs-site .petition-card h1,
.gs-site .petition-card h2,
.gs-site .petition-card h3,
.gs-site .petition-card-title,
.gs-site .petition-card .petition-title { color: var(--gs-color-fg); }
.gs-site .petition-form p,
.gs-site .petition-form label,
.gs-site .petition-template p,
.gs-site .petition-card p,
.gs-site .petition-card-excerpt { color: var(--gs-color-fg-muted); line-height: 1.55; }
.gs-site .petition-card-meta,
.gs-site .petition-card-date,
.gs-site .petition-meta { color: var(--gs-color-fg-subtle); }

/* Newsroom + donation card grids on archive pages */
.gs-site .newsroom-card,
.gs-site .donation-card,
.gs-site .home-template,
.gs-site .home-template .content-block {
    background: var(--gs-color-surface);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-radius-lg);
    color: var(--gs-color-fg);
}
.gs-site .newsroom-card h2,
.gs-site .newsroom-card h3,
.gs-site .donation-card h2,
.gs-site .donation-card h3 { color: var(--gs-color-fg); }
.gs-site .newsroom-card p,
.gs-site .donation-card p { color: var(--gs-color-fg-muted); }

/* Section headers in inherited templates */
.gs-site .section-header h2,
.gs-site .home-header h1 { color: var(--gs-color-fg); }
.gs-site .home-subtitle,
.gs-site .signup-prompt-title { color: var(--gs-color-fg-muted); }

/* Action / multi-step flow */
.gs-site .action-flow,
.gs-site [class*="action-section-"] h1,
.gs-site [class*="action-section-"] h2,
.gs-site [class*="action-section-"] h3 { color: var(--gs-color-fg); }
.gs-site [class*="action-section-"] p,
.gs-site [class*="action-section-"] label { color: var(--gs-color-fg-muted); }

/* Next-step / petition-question UI (parent's quiz-like flow) */
.gs-site .next-step-question-block,
.gs-site .petition-question-block {
    background: var(--gs-color-surface);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-radius-lg);
    color: var(--gs-color-fg);
}
.gs-site .next-step-selected-answer__label { color: var(--gs-color-fg-muted); }
.gs-site .next-step-selected-answer__value { color: var(--gs-color-fg); }
.gs-site .next-step-noscript-note { color: var(--gs-color-fg-subtle); }

/* Generic dark-mode contrast for any inline text the parent left to
 * inherit from <body>. Most pages on a CTF Landing Pages site lean on
 * <body> color coming from the parent's main stylesheet, which is
 * tuned for a white card. Force the dark equivalents so 99% of pages
 * are readable without per-template overrides. */
.gs-site,
.gs-site p,
.gs-site li,
.gs-site dd,
.gs-site dt,
.gs-site blockquote,
.gs-site figcaption { color: var(--gs-color-fg); }
.gs-site small,
.gs-site .text-muted,
.gs-site .meta { color: var(--gs-color-fg-muted); }
.gs-site h1, .gs-site h2, .gs-site h3, .gs-site h4, .gs-site h5, .gs-site h6 { color: var(--gs-color-fg); }
.gs-site hr { border-color: var(--gs-color-border); }
.gs-site code,
.gs-site pre {
    background: var(--gs-color-surface-2);
    color: var(--gs-color-fg);
    border-radius: var(--gs-radius-sm);
}
.gs-site ::placeholder { color: var(--gs-color-fg-subtle); opacity: 1; }
.gs-site ::selection { background: var(--gs-color-accent-soft); color: var(--gs-color-fg); }
.gs-site :focus-visible { outline: 2px solid var(--gs-color-accent); outline-offset: 2px; }

/* 7. Content pages (About, policy, join info) ------------------------- *
 * Used by page.php, page-gs-content.php, and template-parts/gs/content-page.php.
 * Compose body copy in the block editor (video embeds, h2 sections, etc.). */
.gs-content { display: block; }

.gs-content-page {
    padding-bottom: var(--gs-space-7);
    background:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(232, 50, 62, 0.14), transparent 55%),
        var(--gs-color-bg);
}

.gs-content-page__hero {
    padding: var(--gs-space-6) var(--gs-space-4) var(--gs-space-5);
    border-bottom: 1px solid var(--gs-color-border);
}
.gs-content-page__hero-inner {
    max-width: var(--gs-container);
    margin: 0 auto;
    display: grid;
    gap: var(--gs-space-3);
}
.gs-content-page__eyebrow {
    display: inline-block;
    width: max-content;
    padding: 6px 12px;
    background: var(--gs-color-highlight);
    color: var(--gs-color-highlight-ink);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-size: 0.75rem;
    font-weight: 800;
    border-radius: var(--gs-radius-sm);
}
.gs-content-page__title {
    font-size: clamp(2.5rem, 5.5vw, 4.25rem);
    font-weight: 900;
    line-height: 1.02;
    text-wrap: balance;
    max-width: 16ch;
    color: var(--gs-color-fg);
}
.gs-content-page__lead {
    max-width: 52ch;
    font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
    line-height: 1.6;
    color: var(--gs-color-fg-muted);
}

.gs-content-page__main {
    max-width: var(--gs-container);
    margin: 0 auto;
    padding: var(--gs-space-5) var(--gs-space-4) 0;
    display: grid;
    gap: var(--gs-space-4);
}

.gs-content-page__media {
    margin: 0;
}
.gs-content-page__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--gs-radius-lg);
    border: 1px solid var(--gs-color-border);
    box-shadow: var(--gs-shadow-card);
}

.gs-content-page__body {
    background: var(--gs-color-surface);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-card);
    padding: clamp(var(--gs-space-4), 4vw, var(--gs-space-6));
    font-size: 1.0625rem;
    line-height: 1.7;
}
.gs-content-page__body > *:first-child { margin-top: 0; }
.gs-content-page__body > *:last-child { margin-bottom: 0; }

/* Opening paragraphs read slightly larger before the first section break. */
.gs-content-page__body > p:nth-child(-n+2) {
    font-size: 1.125rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.9);
}

.gs-content-page__body h2 {
    margin: var(--gs-space-6) 0 var(--gs-space-3);
    font-size: clamp(1.5rem, 3vw, 2.125rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--gs-color-fg);
    padding-top: var(--gs-space-2);
    border-top: 1px solid var(--gs-color-border);
}
.gs-content-page__body > h2:first-child,
.gs-content-page__body > .wp-block-heading:first-child + h2 {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}
.gs-content-page__body h2.gs-hashtag,
.gs-content-page__body .gs-hashtag {
    border-top: 0;
    margin-top: var(--gs-space-5);
    font-family: var(--gs-font-display);
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 900;
    letter-spacing: 0.04em;
    color: var(--gs-color-accent);
    text-transform: lowercase;
}

.gs-content-page__body h3 {
    margin: var(--gs-space-5) 0 var(--gs-space-2);
    font-size: 1.2rem;
    font-weight: 700;
    padding-left: var(--gs-space-3);
    border-left: 3px solid var(--gs-color-accent);
    color: var(--gs-color-fg);
}
.gs-content-page__body h4 {
    margin: var(--gs-space-4) 0 var(--gs-space-2);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--gs-color-fg);
}
.gs-content-page__body p {
    margin: 0 0 1.35em;
    color: var(--gs-color-fg-muted);
}
.gs-content-page__body ul,
.gs-content-page__body ol {
    margin: 0 0 1.35em;
    padding-left: 1.35em;
    color: var(--gs-color-fg-muted);
}
.gs-content-page__body li { margin: 0.4em 0; }
.gs-content-page__body li::marker { color: var(--gs-color-accent); }
.gs-content-page__body strong { color: var(--gs-color-fg); font-weight: 700; }

/* Editor placeholders ("Add video…") — stand out as todo notes, not body copy. */
.gs-content-page__body p.gs-content-note,
.gs-content-page__body .gs-content-note {
    margin: var(--gs-space-4) 0;
    padding: var(--gs-space-3) var(--gs-space-4);
    background: var(--gs-color-accent-soft);
    border: 1px dashed rgba(232, 50, 62, 0.45);
    border-radius: var(--gs-radius-md);
    color: var(--gs-color-fg);
    font-size: 0.9375rem;
    font-style: normal;
}
.gs-content-page__body p.gs-content-note em,
.gs-content-page__body .gs-content-note em { font-style: normal; color: var(--gs-color-fg-muted); }

.gs-content-page__body blockquote {
    margin: var(--gs-space-4) 0;
    padding: var(--gs-space-3) var(--gs-space-4);
    border-left: 4px solid var(--gs-color-accent);
    background: var(--gs-color-surface-2);
    color: var(--gs-color-fg);
    border-radius: 0 var(--gs-radius-md) var(--gs-radius-md) 0;
}
.gs-content-page__body a {
    color: var(--gs-color-fg);
    text-decoration: underline;
    text-decoration-color: var(--gs-color-accent);
    text-underline-offset: 3px;
}
.gs-content-page__body a:hover,
.gs-content-page__body a:focus-visible {
    color: var(--gs-color-accent);
    text-decoration: none;
}

.gs-content-page__body .wp-block-separator {
    margin: var(--gs-space-5) 0;
    border: 0;
    height: 1px;
    background: var(--gs-color-border);
}

.gs-content-page__body .wp-block-embed,
.gs-content-page__body .wp-block-video {
    margin: var(--gs-space-4) 0;
    border-radius: var(--gs-radius-lg);
    overflow: hidden;
    border: 1px solid var(--gs-color-border);
    box-shadow: var(--gs-shadow-card);
}
.gs-content-page__body .wp-block-embed iframe,
.gs-content-page__body .wp-block-video video,
.gs-content-page__body iframe {
    display: block;
    max-width: 100%;
    border-radius: 0;
}
.gs-content-page__body .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper {
    aspect-ratio: 16 / 9;
}
.gs-content-page__body .wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper iframe {
    width: 100%;
    height: 100%;
}

.gs-content-page__body .wp-block-buttons {
    margin: var(--gs-space-4) 0;
    gap: var(--gs-space-3);
}
.gs-content-page__body .wp-block-button__link {
    border-radius: var(--gs-btn-radius);
    font-weight: 700;
    padding: 14px 22px;
}

/* Long-form pages (e.g. debt explained) — readable prose, no cards or CTA band. */
.gs-content-page--minimal {
    background: var(--gs-color-bg);
}
.gs-content-page--minimal .gs-content-page__hero {
    padding: var(--gs-space-5) var(--gs-space-4) var(--gs-space-4);
    border-bottom: none;
}
.gs-content-page--minimal .gs-content-page__title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    max-width: 22ch;
    letter-spacing: -0.02em;
}
.gs-content-page--minimal .gs-content-page__lead {
    max-width: 42ch;
    font-size: 1.125rem;
}
.gs-content-page--minimal .gs-content-page__main {
    max-width: 42rem;
    padding-top: 0;
}
.gs-content-page--minimal .gs-content-page__body {
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0 var(--gs-space-4) var(--gs-space-6);
    font-size: 1.0625rem;
}
.gs-content-page--minimal .gs-content-page__body > p:nth-child(-n+2) {
    font-size: inherit;
    color: var(--gs-color-fg-muted);
}
.gs-content-page--minimal .gs-content-page__body h2 {
    margin: var(--gs-space-5) 0 var(--gs-space-2);
    padding-top: 0;
    border-top: none;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: 0;
}
.gs-content-page--minimal .gs-content-page__body > h2:first-child {
    margin-top: 0;
}
.gs-content-page--minimal .gs-content-page__body h3 {
    margin: var(--gs-space-4) 0 var(--gs-space-2);
    padding-left: 0;
    border-left: none;
    font-size: 1.125rem;
}
.gs-content-page--minimal .gs-content-page__body .gs-debt-facts {
    margin: var(--gs-space-4) 0 var(--gs-space-5);
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--gs-space-3);
}
.gs-content-page--minimal .gs-content-page__body .gs-debt-facts li {
    margin: 0;
    padding: 0 0 0 1rem;
    border-left: 2px solid var(--gs-color-border);
    color: var(--gs-color-fg-muted);
    line-height: 1.55;
}
.gs-content-page--minimal .gs-content-page__body .gs-debt-facts strong {
    color: var(--gs-color-fg);
    font-weight: 600;
}

.gs-content-page__cta {
    margin-top: var(--gs-space-6);
    padding: var(--gs-space-6) var(--gs-space-4) var(--gs-space-7);
}
.gs-content-page__cta-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    display: grid;
    gap: var(--gs-space-3);
    justify-items: center;
    padding: clamp(var(--gs-space-5), 5vw, var(--gs-space-6));
    background: var(--gs-color-surface);
    border: 1px solid var(--gs-color-border);
    border-left: 4px solid var(--gs-color-accent);
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-card);
}
.gs-content-page__cta-kicker {
    margin: 0;
    color: var(--gs-color-accent);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.75rem;
}
.gs-content-page__cta-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 900;
    margin: 0;
    max-width: 20ch;
    text-wrap: balance;
}
.gs-content-page__cta-body {
    margin: 0;
    color: var(--gs-color-fg-muted);
    line-height: 1.55;
    max-width: 42ch;
}

/* 8. Petitions archive ------------------------------------------------ *
 * Child theme `archive-petition.php` — GS hero + parent's filter/grid markup. */
.gs-petitions {
    padding-bottom: var(--gs-space-7);
    background:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(232, 50, 62, 0.14), transparent 55%),
        var(--gs-color-bg);
}

.gs-petitions__hero {
    padding: var(--gs-space-6) var(--gs-space-4) var(--gs-space-5);
    text-align: center;
}
.gs-petitions__hero-inner {
    max-width: var(--gs-container);
    margin: 0 auto;
}
.gs-petitions__eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--gs-color-accent);
    margin: 0 0 var(--gs-space-3);
}
.gs-petitions__title {
    font-family: var(--gs-font-display);
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 900;
    line-height: 1.05;
    margin: 0 0 var(--gs-space-3);
    color: var(--gs-color-fg);
}
.gs-petitions__lead {
    margin: 0 auto;
    max-width: 52ch;
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    line-height: 1.55;
    color: var(--gs-color-fg-muted);
}

.gs-petitions__main.petition-archive {
    max-width: var(--gs-container);
    margin: 0 auto;
    padding: 0 var(--gs-space-4) var(--gs-space-6);
    background: transparent;
    box-shadow: none;
    border: none;
}

/* Filter bar — parent `.petition-filters` is a white card; re-skin to GS surface. */
.gs-site .gs-petitions .petition-filters {
    background: var(--gs-color-surface);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-card);
    padding: var(--gs-space-4);
    margin-bottom: var(--gs-space-5);
}
.gs-site .gs-petitions .filter-group label {
    color: var(--gs-color-fg-muted);
    margin-bottom: var(--gs-space-2);
}
.gs-site .gs-petitions .filter-group select,
.gs-site .gs-petitions .filter-group input[type="search"] {
    background-color: var(--gs-color-bg);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-btn-radius);
    color: var(--gs-color-fg);
    min-height: 48px;
}
.gs-site .gs-petitions .filter-group select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23cfcfcf' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
}
.gs-site .gs-petitions .filter-group select:hover,
.gs-site .gs-petitions .filter-group input[type="search"]:hover {
    border-color: rgba(255, 255, 255, 0.22);
}
.gs-site .gs-petitions .filter-group select:focus,
.gs-site .gs-petitions .filter-group input[type="search"]:focus {
    border-color: var(--gs-color-accent);
    box-shadow: 0 0 0 3px var(--gs-color-accent-soft);
    background-color: var(--gs-color-bg);
    outline: none;
}
.gs-site .gs-petitions .petition-filters .search-group .search-button {
    background: var(--gs-color-accent);
    border: 1px solid var(--gs-color-accent);
    border-radius: var(--gs-btn-radius);
    color: var(--gs-color-accent-ink);
    min-width: 48px;
    font-weight: 700;
}
.gs-site .gs-petitions .petition-filters .search-group .search-button:hover {
    background: var(--gs-color-accent-hover);
    border-color: var(--gs-color-accent-hover);
}
.gs-site .gs-petitions .petition-filters .search-group .search-button:focus {
    box-shadow: 0 0 0 3px var(--gs-color-accent-soft);
}

.gs-site .gs-petitions .petition-archive-grid {
    gap: var(--gs-space-4);
    margin: var(--gs-space-4) 0 var(--gs-space-5);
}

/* Archive cards — beat parent `.petition-card.archive { background:#fff }`. */
.gs-site .gs-petitions .petition-card.archive {
    background: var(--gs-color-surface);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.gs-site .gs-petitions .petition-card.archive:hover {
    transform: translateY(-4px);
    border-color: rgba(232, 50, 62, 0.35);
    box-shadow: 0 28px 56px -28px rgba(0, 0, 0, 0.75);
}
.gs-site .gs-petitions .petition-card .card-image {
    height: 200px;
    background: var(--gs-color-surface-2);
}
.gs-site .gs-petitions .petition-card .card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gs-site .gs-petitions .petition-card .card-content {
    padding: var(--gs-space-4);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: var(--gs-space-2);
}
.gs-site .gs-petitions .petition-card .card-content h3,
.gs-site .gs-petitions .petition-card-title {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.35;
    height: auto;
    font-weight: 800;
}
.gs-site .gs-petitions .petition-card .card-content h3 a,
.gs-site .gs-petitions .petition-card-title a {
    color: var(--gs-color-fg);
    text-decoration: none;
}
.gs-site .gs-petitions .petition-card .card-content h3 a:hover,
.gs-site .gs-petitions .petition-card-title a:hover,
.gs-site .gs-petitions .petition-card .card-content h3 a:focus-visible,
.gs-site .gs-petitions .petition-card-title a:focus-visible {
    color: var(--gs-color-accent);
    text-decoration: none;
}
.gs-site .gs-petitions .petition-card .card-excerpt {
    color: var(--gs-color-fg-muted);
    height: auto;
    flex: 1 1 auto;
    margin-bottom: var(--gs-space-2);
}
.gs-site .gs-petitions .petition-card-meta {
    margin-top: auto;
    padding-top: var(--gs-space-2);
}
.gs-site .gs-petitions .card-category {
    display: inline-block;
    background: var(--gs-color-accent-soft);
    color: var(--gs-color-accent);
    padding: 0.2rem 0.55rem;
    border-radius: var(--gs-radius-sm);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.gs-site .gs-petitions .petition-card .card-cta {
    margin-top: var(--gs-space-3);
    width: 100%;
    text-align: center;
}

.gs-site .gs-petitions .no-petitions {
    text-align: center;
    padding: var(--gs-space-6) var(--gs-space-4);
    background: var(--gs-color-surface);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-radius-lg);
    color: var(--gs-color-fg-muted);
}
.gs-site .gs-petitions .no-petitions h2 {
    color: var(--gs-color-fg);
    margin: 0 0 var(--gs-space-3);
}
.gs-site .gs-petitions .no-petitions p {
    margin: 0 0 var(--gs-space-4);
    color: var(--gs-color-fg-muted);
}

.gs-site .gs-petitions__pagination.pagination {
    margin: var(--gs-space-5) 0 0;
}
.gs-site .gs-petitions__pagination a,
.gs-site .gs-petitions__pagination span {
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-btn-radius);
    color: var(--gs-color-fg-muted);
    background: var(--gs-color-surface);
}
.gs-site .gs-petitions__pagination a:hover {
    background: var(--gs-color-surface-2);
    color: var(--gs-color-fg);
    border-color: rgba(255, 255, 255, 0.2);
    text-decoration: none;
}
.gs-site .gs-petitions__pagination .current {
    background: var(--gs-color-accent);
    border-color: var(--gs-color-accent);
    color: var(--gs-color-accent-ink);
}

/* 9. Join sign-up page ------------------------------------------------ *
 * Fieldsets use <p> group labels (not <legend>) to avoid min-content grid blowout. */
.gs-join-page {
    padding-bottom: var(--gs-space-7);
    overflow-x: clip;
    background:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(232, 50, 62, 0.14), transparent 55%),
        var(--gs-color-bg);
}
.gs-join-page__article {
    width: 100%;
    max-width: var(--gs-container);
    margin: 0 auto;
}
.gs-join-page__hero {
    padding: var(--gs-space-6) var(--gs-space-4) var(--gs-space-5);
    text-align: center;
}
.gs-join-page__hero-inner {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--gs-space-2);
}
.gs-join-page__eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--gs-color-accent);
    margin: 0 0 var(--gs-space-3);
}
.gs-join-page__title {
    font-family: var(--gs-font-display);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 900;
    line-height: 1.08;
    margin: 0 0 var(--gs-space-3);
    max-width: 100%;
    overflow-wrap: break-word;
}
.gs-join-page__lead {
    margin: 0 auto;
    max-width: 52ch;
    font-size: clamp(1rem, 2vw, 1.125rem);
    line-height: 1.55;
    color: var(--gs-color-fg-muted);
}
.gs-join-page__main {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    padding: 0 var(--gs-space-4) var(--gs-space-6);
    box-sizing: border-box;
}
.gs-join-form {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background: var(--gs-color-surface);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-card);
    padding: clamp(var(--gs-space-4), 4vw, var(--gs-space-5));
}
.gs-join-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-space-4);
}
@media (min-width: 640px) {
    .gs-join-form__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.gs-join-form__grid > .gs-field,
.gs-join-form__grid > .gs-join-form__fieldset {
    min-width: 0;
}
.gs-join-form__field--full { grid-column: 1 / -1; }
.gs-join-form__fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}
.gs-join-form__group-label {
    display: block;
    margin: 0 0 var(--gs-space-3);
}
.gs-join-form__req { color: var(--gs-color-accent); }
.gs-join-form__radios {
    display: grid;
    gap: var(--gs-space-2);
}
.gs-join-form__radio {
    display: flex;
    align-items: flex-start;
    gap: var(--gs-space-2);
    min-width: 0;
    padding: var(--gs-space-2) var(--gs-space-3);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-btn-radius);
    cursor: pointer;
    color: var(--gs-color-fg-muted);
    transition: border-color 0.15s ease, background 0.15s ease;
}
.gs-join-form__radio span {
    flex: 1;
    min-width: 0;
    line-height: 1.45;
    overflow-wrap: break-word;
}
.gs-join-form__radio:has(input:checked) {
    border-color: var(--gs-color-accent);
    background: var(--gs-color-accent-soft);
    color: var(--gs-color-fg);
}
.gs-join-form__radio input[type="radio"] {
    flex-shrink: 0;
    margin: 0.25rem 0 0;
    width: 1.125rem;
    height: 1.125rem;
    min-height: 0;
    padding: 0;
    border: none;
    background: transparent;
    accent-color: var(--gs-color-accent);
    outline: none;
}
.gs-join-form__other { margin-top: var(--gs-space-3); }
.gs-join-form .gs-field {
    min-width: 0;
}
.gs-join-form input:not([type="radio"]):not([type="hidden"]),
.gs-join-form textarea,
.gs-join-form select {
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-btn-radius);
    background-color: var(--gs-color-bg);
    color: var(--gs-color-fg);
    font-size: 1rem;
    font-family: inherit;
}
.gs-join-form textarea {
    min-height: 120px;
    resize: vertical;
}
.gs-join-form__actions { margin-top: var(--gs-space-5); }
.gs-join-form__actions .gs-btn { width: 100%; max-width: 100%; }
.gs-join-form__messages {
    margin-bottom: var(--gs-space-4);
    padding: var(--gs-space-3) var(--gs-space-4);
    border-radius: var(--gs-btn-radius);
    font-weight: 600;
}
.gs-join-form__messages--success {
    background: rgba(40, 167, 69, 0.15);
    border: 1px solid rgba(40, 167, 69, 0.4);
    color: #b8e6c8;
}
.gs-join-form__messages--error {
    background: var(--gs-color-accent-soft);
    border: 1px solid var(--gs-color-accent);
    color: var(--gs-color-fg);
}
.gs-join-form__field-error input,
.gs-join-form__field-error textarea {
    border-color: var(--gs-color-accent);
}
.gs-join-form__field-error .gs-field__label,
.gs-join-form__field-error .gs-join-form__group-label {
    color: var(--gs-color-accent);
}

/* 10. Tax burden calculator ------------------------------------------- *
 * C.D. Howe generational accounting data (1917–2017 birth cohorts). */
.gs-tax-calc {
    padding-bottom: var(--gs-space-7);
    overflow-x: clip;
    background:
        radial-gradient(ellipse 80% 50% at 20% -10%, rgba(232, 50, 62, 0.14), transparent 55%),
        var(--gs-color-bg);
}
.gs-tax-calc__article {
    width: 100%;
    max-width: var(--gs-container);
    margin: 0 auto;
}
.gs-tax-calc__hero {
    padding: var(--gs-space-6) var(--gs-space-4) var(--gs-space-5);
    text-align: center;
}
.gs-tax-calc__hero-inner {
    max-width: 720px;
    margin: 0 auto;
}
.gs-tax-calc__eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--gs-color-accent);
    margin: 0 0 var(--gs-space-3);
}
.gs-tax-calc__title {
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 900;
    line-height: 1.08;
    margin: 0 0 var(--gs-space-3);
}
.gs-tax-calc__lead,
.gs-tax-calc__sublead {
    margin: 0 auto var(--gs-space-3);
    max-width: 54ch;
    line-height: 1.55;
    color: var(--gs-color-fg-muted);
}
.gs-tax-calc__sublead { margin-bottom: 0; font-size: 1.05rem; }
.gs-tax-calc__main {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--gs-space-4) var(--gs-space-6);
    box-sizing: border-box;
}
.gs-tax-calc__app {
    background: var(--gs-color-surface);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-radius-lg);
    box-shadow: var(--gs-shadow-card);
    padding: clamp(var(--gs-space-4), 4vw, var(--gs-space-5));
}
.gs-tax-calc__pickers {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-space-4);
    margin-bottom: var(--gs-space-4);
}
@media (min-width: 600px) {
    .gs-tax-calc__pickers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gs-tax-calc__pickers .gs-field { min-width: 0; }
.gs-tax-calc__pickers select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    min-height: 48px;
    padding: 12px 2.25rem 12px 16px;
    appearance: none;
    background-color: var(--gs-color-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23cfcfcf' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-btn-radius);
    color: var(--gs-color-fg);
    font-size: 1rem;
    font-family: inherit;
}
.gs-tax-calc__form-error {
    margin: 0 0 var(--gs-space-3);
    color: var(--gs-color-accent);
    font-weight: 600;
}
.gs-tax-calc__form .gs-btn { width: 100%; max-width: 100%; }
.gs-tax-calc__results { margin-top: var(--gs-space-2); }
.gs-tax-calc__results-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gs-space-4);
    margin-bottom: var(--gs-space-5);
}
@media (min-width: 720px) {
    .gs-tax-calc__results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.gs-tax-calc__panel {
    min-width: 0;
    padding: var(--gs-space-4);
    border: 1px solid var(--gs-color-border);
    border-radius: var(--gs-radius-md);
    background: var(--gs-color-bg);
}
.gs-tax-calc__panel--you {
    border-color: rgba(232, 50, 62, 0.35);
}
.gs-tax-calc__panel-title {
    margin: 0 0 var(--gs-space-3);
    font-size: 1.125rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--gs-color-fg-muted);
}
.gs-tax-calc__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}
.gs-tax-calc__table th,
.gs-tax-calc__table td {
    padding: 0.65rem 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--gs-color-border);
    line-height: 1.4;
}
.gs-tax-calc__table th {
    font-weight: 600;
    color: var(--gs-color-fg-muted);
    width: 55%;
    padding-right: var(--gs-space-3);
}
.gs-tax-calc__table td {
    color: var(--gs-color-fg);
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}
.gs-tax-calc__table-total th,
.gs-tax-calc__table-total td {
    border-bottom: none;
    padding-top: var(--gs-space-3);
    font-weight: 800;
    color: var(--gs-color-fg);
}
.gs-tax-calc__panel--you .gs-tax-calc__table-total td {
    color: var(--gs-color-accent);
    font-size: 1.125rem;
}
.gs-tax-calc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gs-space-3);
    margin-bottom: var(--gs-space-3);
}
.gs-tax-calc__actions .gs-btn { flex: 1 1 auto; min-width: min(100%, 10rem); }
.gs-tax-calc__credit {
    margin: 0;
    font-size: 0.875rem;
    color: var(--gs-color-fg-subtle);
    font-style: italic;
}
.gs-tax-calc__footnote {
    margin-top: var(--gs-space-5);
    padding: var(--gs-space-4);
    border-left: 3px solid var(--gs-color-border);
}
.gs-tax-calc__footnote p {
    margin: 0 0 var(--gs-space-3);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: var(--gs-color-fg-subtle);
}
.gs-tax-calc__footnote p:last-child { margin-bottom: 0; }

/* 6. Locale tweaks ---------------------------------------------------- */
.gs-site--gs_fr .gs-hero__hashtag { letter-spacing: 0.02em; }

/* 8. Responsive ------------------------------------------------------- */
@media (max-width: 880px) {
    .gs-newsletter__inner { grid-template-columns: 1fr; }
    .gs-site-footer__inner { grid-template-columns: 1fr; }
    .gs-site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gs-space-4); }
    .gs-site-footer__legal { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 720px) {
    .gs-menu-toggle { display: inline-flex; }
    .gs-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: var(--gs-space-3) var(--gs-space-4); background: var(--gs-color-bg); border-bottom: 1px solid var(--gs-color-border); }
    .gs-nav.is-open { display: block; }
    .gs-nav ul { flex-direction: column; align-items: stretch; gap: var(--gs-space-3); }
    .gs-nav__cta a { width: 100%; }
    .gs-home > section,
    .gs-content-page__hero,
    .gs-content-page__main,
    .gs-content-page__cta,
    .gs-petitions__hero,
    .gs-petitions__main,
    .gs-join-page__hero,
    .gs-join-page__main,
    .gs-tax-calc__hero,
    .gs-tax-calc__main { padding-left: var(--gs-space-3); padding-right: var(--gs-space-3); }
    .gs-join-form { padding: var(--gs-space-4); }
    .gs-join-form__grid { grid-template-columns: 1fr; } /* always single column on narrow viewports */
    .gs-site-footer__cols { grid-template-columns: 1fr; }
}