/**
 * Supporting T-VINE: the contribute page, the chooser, and the support banner.
 *
 * Built on the incumbent T-VINE world rather than a new one — Poppins body,
 * Playfair Display for display type, #e93314 red, #292929 dark, #bcd532 lime,
 * 2px radii. Everything is scoped under .support-* / .tv-epic so it cannot
 * reach the rest of the theme.
 */

:root {
    --sup-red: #e93314;
    --sup-red-dark: #c4290f;
    --sup-ink: #292929;
    --sup-lime: #bcd532;
    --sup-line: #e0ddd8;
    --sup-paper: #fbfaf8;
    /* Secondary text tinted from the ink, never a neutral gray: on this warm
       paper a true gray reads as a different, colder design. */
    --sup-muted: #6b6560;
}

/* ------------------------------------------------------------------ page */

.support-hero {
    background: var(--sup-ink);
    color: #fff;
    /* Kept deliberately short: the ask has to be reachable without scrolling on
       a laptop, so the hero states the case and gets out of the way. */
    padding: 40px 0 44px;
    position: relative;
}

.support-hero__inner { max-width: 720px; }

.support-hero h1 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.95rem, 1.2rem + 2.6vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 14px;
    text-wrap: balance;
}

.support-hero h1 em {
    font-style: italic;
    color: var(--sup-lime);
}

.support-hero__lede {
    font-size: clamp(0.97rem, 0.93rem + 0.25vw, 1.1rem);
    line-height: 1.6;
    /* Warm off-white rather than a gray: 8.9:1 on #292929. */
    color: #ddd6cf;
    max-width: 62ch;
    margin: 0;
}

.support-hero__rule {
    width: 64px;
    height: 4px;
    background: var(--sup-red);
    margin-bottom: 20px;
}

/* The chooser lifts out of the dark hero onto the page below it. The theme
   gives <section> its own vertical padding, which would otherwise eat most of
   this and leave the card sitting flush against the seam instead of crossing
   it. */
/* No overlap across the hero seam. The theme stacks every <section> at
   z-index 10 and its inner .container at 2, so a card lifted across the seam
   paints behind the dark band however the local z-indexes are set. A clean
   edge is worth more than a flourish that depends on the theme not changing. */
.support-stage {
    position: relative;
    padding: 38px 0 60px;
}

.support-card {
    background: #fff;
    border: 1px solid var(--sup-line);
    border-radius: 3px;
    padding: 30px;
    max-width: 560px;
    box-shadow: 0 18px 44px -18px rgba(41, 41, 41, .38);
}

.support-aside {
    max-width: 46ch;
}

.support-aside h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0 0 12px;
}

.support-aside p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--sup-muted);
    margin: 0 0 16px;
}

.support-aside__signoff {
    font-size: 14px;
    color: var(--sup-ink);
    border-top: 1px solid var(--sup-line);
    padding-top: 16px;
}

/* --------------------------------------------------------------- chooser */

.support-chooser__legend {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sup-muted);
    padding: 0;
    margin-bottom: 10px;
}

.support-chooser fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 22px;
}

/* Honeypot. Off-screen rather than display:none, which some bots skip. */
.support-chooser__hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Frequency tabs ---------------------------------------------------------- */

.support-tabs__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    background: #f1efec;
    border-radius: 3px;
    padding: 4px;
}

.support-tabs__tab {
    margin: 0;
    cursor: pointer;
}

/* The radio stays in the accessibility tree and keeps keyboard behaviour; the
   label is what gets drawn. */
.support-tabs__tab input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.support-tabs__tab span {
    display: block;
    padding: 11px 6px;
    border-radius: 2px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    color: var(--sup-muted);
    transition: background 140ms ease-out, color 140ms ease-out;
}

.support-tabs__tab:hover span { color: var(--sup-ink); }

.support-tabs__tab input:checked + span {
    background: var(--sup-ink);
    color: #fff;
}

.support-tabs__tab input:focus-visible + span {
    outline: 2px solid var(--sup-red);
    outline-offset: 2px;
}

.support-panel__blurb {
    font-size: 14px;
    line-height: 1.6;
    color: var(--sup-muted);
    margin: 0 0 20px;
}

/* Amounts ----------------------------------------------------------------- */

.support-amounts__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.support-amounts__option {
    position: relative;
    margin: 0;
    cursor: pointer;
}

.support-amounts__option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.support-amounts__value {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 8px 4px;
    border: 1.5px solid var(--sup-line);
    border-radius: 3px;
    background: #fff;
    font-size: 17px;
    font-weight: 600;
    /* Amounts sit in a row and must not jitter as digits change. */
    font-variant-numeric: tabular-nums;
    color: var(--sup-ink);
    transition: border-color 140ms ease-out, background 140ms ease-out;
}

.support-amounts__option:hover .support-amounts__value {
    border-color: #bdb7b0;
}

.support-amounts__option input:checked + .support-amounts__value {
    border-color: var(--sup-red);
    background: #fdf1ee;
}

.support-amounts__option input:focus-visible + .support-amounts__value {
    outline: 2px solid var(--sup-red);
    outline-offset: 2px;
}

.support-amounts__note {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: var(--sup-lime);
    color: #2c3405;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 2px;
}

.support-amounts__option--other .support-amounts__value { font-size: 13px; }

.support-other { margin-top: 12px; }

.support-other label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 5px;
    color: var(--sup-muted);
}

.support-other__field {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--sup-line);
    border-radius: 3px;
    background: #fff;
    transition: border-color 140ms ease-out;
}

.support-other__field:focus-within { border-color: var(--sup-red); }

.support-other__symbol {
    padding: 0 4px 0 14px;
    font-size: 17px;
    font-weight: 600;
    color: var(--sup-muted);
}

.support-other__field input {
    flex: 1;
    border: 0;
    background: none;
    padding: 13px 14px 13px 2px;
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--sup-ink);
    min-width: 0;
}

.support-other__field input:focus { outline: none; }

/* Name and email ---------------------------------------------------------- */

.support-fields { margin-bottom: 20px; }

.support-field + .support-field { margin-top: 14px; }

.support-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--sup-muted);
    margin-bottom: 5px;
}

.support-field input {
    display: block;
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--sup-line);
    border-radius: 3px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    color: var(--sup-ink);
    transition: border-color 140ms ease-out;
}

.support-field input:focus {
    outline: none;
    border-color: var(--sup-red);
}

.support-field small {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--sup-muted);
}

/* Submit ------------------------------------------------------------------ */

.support-submit {
    display: block;
    width: 100%;
    border: 0;
    border-radius: 3px;
    background: var(--sup-red);
    color: #fff;
    padding: 16px 20px;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 140ms ease-out;
}

.support-submit:hover { background: var(--sup-red-dark); }

.support-submit:focus-visible {
    outline: 2px solid var(--sup-ink);
    outline-offset: 2px;
}

.support-submit[disabled] {
    background: #cfcac4;
    cursor: not-allowed;
}

.support-reassure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--sup-muted);
}

.support-reassure svg { flex: none; }

/* Validation -------------------------------------------------------------- */

.support-errors {
    /* Colour and weight carry the alert, not a thick side rule. */
    border: 1px solid #d98a78;
    background: #fdf1ee;
    border-radius: 3px;
    padding: 12px 14px;
    margin-bottom: 22px;
    font-size: 14px;
    color: #8c2410;
}

.support-errors strong { color: #7a1d0b; }

.support-errors ul { margin: 6px 0 0; padding-left: 18px; }

/* --------------------------------------------------- the support banner */

.tv-epic {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9500;
    background: var(--sup-ink);
    color: #fff;
    border-top: 4px solid var(--sup-red);
    box-shadow: 0 -8px 30px -10px rgba(0, 0, 0, .5);
    /* The one authored moment on this surface: the bar rises once, from an
       already-laid-out position, and never animates again. */
    transform: translateY(100%);
    transition: transform 520ms cubic-bezier(.16, 1, .3, 1);
}

.tv-epic.is-open { transform: translateY(0); }

.tv-epic[hidden] { display: none; }

.tv-epic__inner {
    display: flex;
    align-items: center;
    gap: 26px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 46px 18px 20px;
}

.tv-epic__copy { flex: 1 1 auto; min-width: 0; }

.tv-epic__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.22rem;
    line-height: 1.25;
    margin: 0 0 4px;
    color: #fff;
}

.tv-epic__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #ccc4bc;
    max-width: 66ch;
}

.tv-epic__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
}

.tv-epic__amount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 58px;
    padding: 11px 13px;
    border: 1.5px solid #5a544e;
    border-radius: 3px;
    background: none;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color 140ms ease-out, background 140ms ease-out;
}

.tv-epic__amount:hover {
    border-color: var(--sup-lime);
    background: rgba(188, 213, 50, .12);
}

.tv-epic__cta {
    padding: 12px 20px;
    border-radius: 3px;
    background: var(--sup-red);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 140ms ease-out;
}

.tv-epic__cta:hover { background: var(--sup-red-dark); color: #fff; }

.tv-epic__close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: 0;
    background: none;
    color: #9a938c;
    font-size: 24px;
    line-height: 1;
    padding: 4px 8px;
    cursor: pointer;
    transition: color 140ms ease-out;
}

.tv-epic__close:hover { color: #fff; }

.tv-epic a:focus-visible,
.tv-epic button:focus-visible {
    outline: 2px solid var(--sup-lime);
    outline-offset: 2px;
}

/* ------------------------------------------------------ browser surfaces */

.support-hero ::selection,
.tv-epic ::selection {
    background: var(--sup-lime);
    color: #2c3405;
}

.support-chooser ::selection { background: #fbd9d1; color: var(--sup-ink); }

.support-chooser input { caret-color: var(--sup-red); }

/* The number field's spinners fight the tabular alignment and are useless for
   money entry on every platform that draws them. */
.support-other__field input::-webkit-outer-spin-button,
.support-other__field input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.support-other__field input[type="number"] { -moz-appearance: textfield; }

/* The theme centres text inside .content, so each block added below states its
   own alignment rather than inheriting a centred paragraph. */
.support-rewards,
.support-goals,
.support-org,
.support-faq,
.support-list { text-align: left; }

/* ---------------------------------------------------------- consent opt-in */

.support-consent {
    border-top: 1px solid var(--sup-line);
    padding-top: 16px;
}

/* .support-consent sits inside .support-field for its spacing, which also
   brings the uppercase field-caption label styling — wrong for a sentence the
   reader has to actually read. Reset rather than dropping the class. */
.support-consent__row,
.support-consent .support-consent__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: normal;
    color: var(--sup-ink);
    text-align: left;
    cursor: pointer;
}

/* Sized explicitly: the field rules above stretch an unstyled checkbox to the
   full width of the card. */
.support-consent__row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    min-width: 16px;
    height: 16px;
    margin: 2px 0 0;
    padding: 0;
    accent-color: var(--sup-red);
    cursor: pointer;
}

.support-consent__row > span {
    font-size: 14px;
    line-height: 1.5;
    color: var(--sup-ink);
}

.support-consent__row small {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--sup-muted);
}

.support-consent__name { margin-top: 12px; }
.support-consent__name[hidden] { display: none; }

.support-consent__name label {
    display: block;
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sup-muted);
}

.support-consent__name small {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--sup-muted);
}

/* ---------------------------------------------------------------- rewards */

.support-rewards {
    margin: 26px 0 4px;
    padding-top: 22px;
    border-top: 1px solid var(--sup-line);
}

.support-rewards__title {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--sup-muted);
}

.support-rewards__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: none;
}

.support-rewards__tier {
    position: relative;
    padding: 0 0 18px 20px;
    /* The rail that ties the three rungs into one ladder. */
    border-left: 2px solid var(--sup-line);
}
.support-rewards__tier:last-child { padding-bottom: 0; border-left-color: transparent; }

.support-rewards__tier::before {
    content: "";
    position: absolute;
    left: -6px;
    top: 6px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sup-red);
}

.support-rewards__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 8px;
}

.support-rewards__from {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sup-ink);
}
.support-rewards__from span {
    font-family: inherit;
    font-size: .62em;
    font-weight: 400;
    color: var(--sup-muted);
}

.support-rewards__name {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--sup-red);
}

.support-rewards__plus {
    margin: 0 0 6px;
    font-size: 12.5px;
    font-style: italic;
    color: var(--sup-muted);
}

.support-rewards__benefits {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.support-rewards__benefits li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 5px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--sup-ink);
}

/* A tick drawn in CSS rather than an icon font: this file is loaded on every
   page of the site for the banner, and it should not drag a dependency along. */
.support-rewards__benefits li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 6px;
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--sup-lime);
    border-bottom: 2px solid var(--sup-lime);
    transform: rotate(-45deg);
}

.support-rewards__pick {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sup-red);
    text-decoration: none;
}
.support-rewards__pick:hover { color: var(--sup-red-dark); text-decoration: underline; }
.support-rewards__pick span { transition: transform .15s ease; }
.support-rewards__pick:hover span { transform: translateX(3px); }

.support-rewards__annual {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--sup-muted);
}

.support-rewards__unavailable {
    margin: 0 0 16px;
    padding: 12px 14px;
    background: var(--sup-paper);
    border-left: 3px solid var(--sup-red);
    font-size: 13px;
    line-height: 1.6;
    color: var(--sup-ink);
}
.support-rewards__unavailable a { color: var(--sup-red); font-weight: 600; }

.support-rewards__note {
    margin: 16px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--sup-muted);
}

/* ------------------------------------------------------------------ goals */

.support-goals {
    padding: 46px 0;
    background: var(--sup-paper);
    border-top: 1px solid var(--sup-line);
    border-bottom: 1px solid var(--sup-line);
}

.support-goals__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 0 0 24px;
    color: var(--sup-ink);
}

.support-goals__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.support-goals__list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--sup-ink);
}

.support-goals__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--sup-red);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
}

/* ----------------------------------------------------- organisation tiers */

.support-org { padding: 52px 0; }

.support-org__intro { max-width: 60ch; margin-bottom: 28px; }

.support-org__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.75rem;
    line-height: 1.2;
    margin: 0 0 12px;
    color: var(--sup-ink);
}

.support-org__intro p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--sup-muted);
}

.support-org__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    max-width: 860px;
}

.support-org__card {
    display: flex;
    flex-direction: column;
    padding: 28px 26px;
    background: #fff;
    border: 1px solid var(--sup-line);
    border-top: 3px solid var(--sup-red);
    border-radius: 3px;
    box-shadow: 0 14px 34px -22px rgba(41, 41, 41, .4);
}

.support-org__price {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--sup-ink);
}
.support-org__price span {
    font-size: .5em;
    font-weight: 400;
    color: var(--sup-muted);
}

.support-org__name {
    margin: 10px 0 6px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--sup-red);
}

.support-org__blurb {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--sup-muted);
}

.support-org__benefits {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    /* Pushes the button to the bottom so cards of different heights line up. */
    flex: 1 1 auto;
}

.support-org__benefits li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--sup-ink);
}

.support-org__benefits li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 6px;
    width: 9px;
    height: 5px;
    border-left: 2px solid var(--sup-lime);
    border-bottom: 2px solid var(--sup-lime);
    transform: rotate(-45deg);
}

.support-org__cta {
    display: block;
    padding: 13px 18px;
    border-radius: 3px;
    background: var(--sup-red);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    color: #fff;
    text-decoration: none;
    transition: background .15s ease;
}
.support-org__cta:hover { background: var(--sup-red-dark); color: #fff; text-decoration: none; }

.support-org__contact {
    margin: 24px 0 0;
    font-size: 14px;
    color: var(--sup-muted);
}
.support-org__contact a { color: var(--sup-red); font-weight: 600; }

/* -------------------------------------------------------------------- faq */

.support-faq {
    padding: 48px 0 56px;
    background: var(--sup-paper);
    border-top: 1px solid var(--sup-line);
}

.support-faq__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.6rem;
    line-height: 1.2;
    margin: 0 0 26px;
    color: var(--sup-ink);
}

.support-faq__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 26px 32px;
    max-width: 1000px;
}

.support-faq__item h3 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--sup-ink);
}

.support-faq__item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: var(--sup-muted);
}
.support-faq__item a { color: var(--sup-red); }

.support-faq__foot {
    margin: 30px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--sup-line);
    font-size: 14px;
    color: var(--sup-muted);
}
.support-faq__foot a { color: var(--sup-red); font-weight: 600; }

/* ------------------------------------------------------- supporters page */

.support-list { padding: 44px 0 60px; }

.support-list__head { max-width: 62ch; margin-bottom: 34px; }

.support-list__title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.4rem;
    line-height: 1.1;
    margin: 0 0 14px;
    color: var(--sup-ink);
}

.support-list__lede {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--sup-muted);
}

.support-list__names {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 2px 20px;
    margin: 0 0 40px;
    padding: 26px 0;
    border-top: 1px solid var(--sup-line);
    border-bottom: 1px solid var(--sup-line);
    list-style: none;
}

.support-list__names li {
    padding: 7px 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--sup-ink);
}

.support-list__empty {
    padding: 40px 30px;
    margin-bottom: 36px;
    border: 1px dashed var(--sup-line);
    border-radius: 3px;
    background: var(--sup-paper);
}
.support-list__empty p {
    margin: 0;
    font-size: 15px;
    line-height: 1.7;
    color: var(--sup-muted);
}
.support-list__empty a { color: var(--sup-red); font-weight: 600; }

.support-list__cta { max-width: 56ch; }
.support-list__cta p {
    margin: 0 0 16px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--sup-muted);
}

.support-list__button {
    display: inline-block;
    padding: 14px 30px;
    border-radius: 3px;
    background: var(--sup-red);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: background .15s ease;
}
.support-list__button:hover { background: var(--sup-red-dark); color: #fff; text-decoration: none; }

.support-list__note {
    margin: 20px 0 0 !important;
    font-size: 13px;
}
.support-list__note a { color: var(--sup-red); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 991px) {
    .support-card { max-width: none; }
    /* Stacked below the card now, so it needs its own separation. */
    .support-aside { padding-top: 34px; max-width: none; }
}

@media (max-width: 767px) {
    .support-hero { padding: 30px 0 34px; }
    .support-card { padding: 22px 18px; }

    .support-goals { padding: 34px 0; }
    .support-goals__title,
    .support-org__title { font-size: 1.45rem; }
    .support-org { padding: 36px 0; }
    .support-org__card { padding: 22px 18px; }
    .support-faq { padding: 34px 0 40px; }
    .support-list { padding: 30px 0 44px; }
    .support-list__title { font-size: 1.9rem; }
    .support-list__button { display: block; text-align: center; }

    /* One column: two columns of names at phone width leaves both cramped. */
    .support-list__names { grid-template-columns: 1fr; }

    .support-amounts__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    /* The "most chosen" flag needs headroom once the grid wraps. */
    .support-amounts__grid { padding-top: 6px; }

    /* iOS zooms the page when a focused field is under 16px. */
    .support-field input,
    .support-other__field input { font-size: 16px; }

    .tv-epic__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px 16px 18px;
    }

    .tv-epic__actions { flex-wrap: wrap; }
    .tv-epic__amount { flex: 1 1 auto; }
    .tv-epic__cta { flex: 1 0 100%; text-align: center; }
    .tv-epic__text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tv-epic { transition: none; }
    .support-tabs__tab span,
    .support-amounts__value,
    .support-submit { transition: none; }
}