/* =========================================================================
   FTCC Vision Fund — self-contained gamified campaign module.
   All styles are scoped under .ftcc-vision and use the ftcc-vision__ prefix
   so nothing bleeds into (or out of) the theme or the regular donate form.
   ========================================================================= */

.ftcc-vision,
.ftcc-vision *,
.ftcc-vision *::before,
.ftcc-vision *::after {
    box-sizing: border-box;
}

.ftcc-vision {
    --vf-bg:      #05080f;
    --vf-bg-2:    #0a1120;
    --vf-blue:    #1e90ff;
    --vf-blue-2:  #00bfff;
    --vf-green:   #2ecc71;
    --vf-green-2: #28c76f;
    --vf-glow:    rgba(30, 144, 255, 0.65);
    --vf-text:    #eaf2ff;
    --vf-muted:   #8aa0bd;
    --vf-line:    rgba(120, 160, 220, 0.18);
    --vf-card:    rgba(255, 255, 255, 0.04);

    --vf-green-glow: rgba(46, 204, 113, 0.45);
    --vf-neon-border: rgba(70, 150, 250, 0.55);

    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 40px;
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(30,144,255,0.16), transparent 60%),
        radial-gradient(800px 500px at -10% 110%, rgba(0,191,255,0.10), transparent 55%),
        linear-gradient(160deg, #060a14, #03060c);
    color: var(--vf-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

/* ---------------------------------------------------------------- Video */

.ftcc-vision__video {
    position: relative;
    max-width: 1000px;
    margin: 0 auto 36px auto;
}

.ftcc-vision__video-title {
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vf-blue-2);
    margin-bottom: 14px;
}

.ftcc-vision__video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    border: 1px solid var(--vf-neon-border);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.4),
        0 18px 50px rgba(0, 0, 0, 0.55),
        0 0 60px -20px var(--vf-glow);
}

/* aspect-ratio fallback for older engines */
@supports not (aspect-ratio: 16 / 9) {
    .ftcc-vision__video-frame {
        height: 0;
        padding-bottom: 56.25%;
    }
}

.ftcc-vision__video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

/* ---------------------------------------------------------------- Layout */

.ftcc-vision--has-wall {
    max-width: none;
}

/* Full-width container, but keep the inner content centered and capped. */
.ftcc-vision__layout {
    display: block;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Honor Wall + Vision Fund are shown one at a time via the column tabs. */
.ftcc-vision--has-wall .ftcc-vision__layout {
    display: block;
}

.ftcc-vision__col {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.ftcc-vision--has-wall .ftcc-vision__col {
    display: none;
}
.ftcc-vision--has-wall[data-active-col="wall"] .ftcc-vision__col--wall {
    display: flex;
}
.ftcc-vision--has-wall[data-active-col="fund"] .ftcc-vision__col--fund {
    display: flex;
}

/* Column tabs (Honor Wall / Vision Fund) */
.ftcc-vision__coltabs {
    display: flex;
    gap: 8px;
    max-width: 460px;
    margin: 0 auto 30px;
    padding: 6px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--vf-line);
}

.ftcc-vision__coltab {
    flex: 1 1 0;
    text-align: center;
    padding: 13px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--vf-muted);
    cursor: pointer;
    user-select: none;
    transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.ftcc-vision__coltab:hover { color: var(--vf-text); }

.ftcc-vision__coltab.is-active {
    background: linear-gradient(180deg, var(--vf-blue), #1577e6);
    color: #fff;
    box-shadow: 0 0 18px rgba(30, 144, 255, 0.35);
}

/* Neon-bordered panel that frames the whole Vision Fund column. */
.ftcc-vision__panel {
    position: relative;
    flex: 1 1 auto;
    padding: 30px 34px 34px;
    border-radius: 20px;
    background:
        radial-gradient(900px 400px at 60% -10%, rgba(30,144,255,0.10), transparent 60%),
        rgba(8, 14, 26, 0.55);
    box-shadow:
        0 0 22px rgba(30, 144, 255, 0.18),
        inset 0 0 26px rgba(30, 144, 255, 0.06);
}

/* ---------------------------------------------------------------- Brand */

.ftcc-vision__brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.ftcc-vision__brand-logo {
    flex: none;
    display: inline-flex;
    color: var(--vf-blue-2);
}

.ftcc-vision__logo-img {
    display: block;
    width: auto;
    height: 56px !important;
    max-width: 80px !important;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(30, 144, 255, 0.45)) !important;
}

.ftcc-vision__brand-name {
    font-size: clamp(12px, 1.4vw, 16px);
    font-weight: 800;
    letter-spacing: 0.24em;
    line-height: 1.35;
    text-transform: uppercase;
    color: #d4e4f8;
}

.ftcc-vision__brand-rule {
    height: 2px;
    margin: 14px 0 6px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(120, 175, 240, 0.7), transparent);
}

/* ---------------------------------------------------------------- Hero row */

.ftcc-vision__hero {
    display: grid;
    grid-template-columns: 196px minmax(0, 1fr);
    gap: 30px;
    align-items: center;
    width: 510px;
    max-width: 100%;
    margin: 30px auto 0;
}

/* The Vision Fund tab is full-width now, so it uses the same comfortable
   thermometer sizing as the standalone (no-wall) layout. */

/* ---------------------------------------------------------------- Thermometer */

.ftcc-vision__meter {
    display: flex;
    justify-content: center;
}

.ftcc-vision__tube {
    position: relative;
    width: 58px;
    min-height: 600px;
    align-self: stretch;
    /* Leave room for the bulb that hangs below the tube. */
    margin: 6px 0 64px 0;
}

/* The glass tube: rounded top, straight sides, neon rim + outer glow. */
.ftcc-vision__track {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 50px;
    border-radius: 26px 26px 14px 14px;
    background: linear-gradient(180deg, #04070e, #0a1420);
    border: 2px solid rgba(150, 190, 245, 0.45);
    box-shadow:
        0 0 14px rgba(30, 144, 255, 0.4),
        0 0 34px rgba(30, 144, 255, 0.22),
        inset 0 0 26px rgba(0, 0, 0, 0.85);
    overflow: hidden;
    z-index: 1;
}

.ftcc-vision__fill {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    background: linear-gradient(180deg, #7fd1ff, var(--vf-blue-2) 40%, var(--vf-blue) 100%);
    box-shadow:
        0 0 20px var(--vf-glow),
        0 0 46px var(--vf-glow);
    transition: height 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.ftcc-vision__fill-glow {
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 12px;
    background: rgba(255, 255, 255, 0.9);
    filter: blur(4px);
    opacity: 0.85;
}

/* The reservoir bulb at the base — always glowing, like the prototype.
   It sits IN FRONT of the tube so the tube plunges cleanly into a solid
   round reservoir with no dark notch at the junction. */
.ftcc-vision__bulb {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -40px;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #cfeeff, var(--vf-blue-2) 48%, var(--vf-blue) 100%);
    border: 2px solid rgba(160, 200, 250, 0.65);
    box-shadow:
        0 0 26px var(--vf-glow),
        0 0 64px var(--vf-glow),
        inset 0 4px 12px rgba(255, 255, 255, 0.55);
    z-index: 3;
}

.ftcc-vision__markers {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    bottom: 0;
    width: 50px;
    pointer-events: none;
    z-index: 2;
}

.ftcc-vision__marker {
    position: absolute;
    left: 0;
    width: 100%;
    transform: translateY(50%);
}

/* Dashed tick that runs from just left of the tube toward the label. */
.ftcc-vision__marker-tick {
    position: absolute;
    right: calc(100% + 2px);
    top: 0;
    width: 26px;
    height: 0;
    border-top: 2px dashed rgba(150, 190, 240, 0.6);
}

.ftcc-vision__marker-label {
    position: absolute;
    right: calc(100% + 36px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--vf-text);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    line-height: 1.05;
    text-align: right;
}

.ftcc-vision__marker--goal .ftcc-vision__marker-label {
    text-align: center;
    line-height: 1;
}

.ftcc-vision__marker--goal .ftcc-vision__marker-label strong {
    display: block;
    font-size: 16px;
    line-height: 1.15;
    margin-bottom: 5px;
}

.ftcc-vision__marker--goal .ftcc-vision__marker-label em {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.18em;
    /* offset the trailing letter-spacing so the word is truly centered */
    text-indent: 0.18em;
    text-transform: uppercase;
    color: var(--vf-blue-2);
}

.ftcc-vision__marker.is-hit .ftcc-vision__marker-label {
    color: var(--vf-blue-2);
}

/* A quick pop applied by JS when the bar crosses a marker. */
.ftcc-vision__marker.is-celebrate .ftcc-vision__marker-tick {
    border-top-color: var(--vf-blue-2);
    box-shadow: 0 0 12px var(--vf-glow);
    animation: ftcc-vision-pop 0.7s ease;
}

@keyframes ftcc-vision-pop {
    0%   { opacity: 1; }
    40%  { opacity: 0.4; transform: scaleY(2); }
    100% { opacity: 1; }
}

/* ---------------------------------------------------------------- Content */

.ftcc-vision__content {
    min-width: 0;
}

.ftcc-vision__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    font-size: clamp(11px, 1.5vw, 15px);
    font-weight: 700;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: #d4e4f8;
    text-align: center;
    margin-bottom: 10px;
}

.ftcc-vision__eyebrow::before,
.ftcc-vision__eyebrow::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(150, 190, 240, 0.65), transparent);
}

.ftcc-vision__title {
    margin: 25px 0 0;
    font-size: clamp(40px, 7vw, 82px);
    font-weight: 900;
    line-height: 0.92;
    letter-spacing: -0.015em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    filter: drop-shadow(0 0 30px rgba(30, 144, 255, 0.28));
}

.ftcc-vision--has-wall .ftcc-vision__title {
    font-size: clamp(38px, 6.4vw, 70px);
}

.ftcc-vision__title-1 {
    background: linear-gradient(180deg, #ffffff 28%, #aebfd2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ftcc-vision__title-2 {
    background: linear-gradient(180deg, #6cb6ff 18%, #1576e6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.ftcc-vision__subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 14px;
    font-size: clamp(11px, 1.5vw, 16px);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-align: center;
    color: var(--vf-blue);
}

.ftcc-vision__subtitle span {
    flex: none;
}

.ftcc-vision__subtitle::before,
.ftcc-vision__subtitle::after {
    content: "";
    flex: 1 1 auto;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(30, 144, 255, 0.6), transparent);
}

.ftcc-vision__stats {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
    padding: 20px 24px;
    border-radius: 18px;
    background: var(--vf-card);
    border: 1px solid var(--vf-line);
    backdrop-filter: blur(6px);
}

.ftcc-vision__stat {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.ftcc-vision__stat-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--vf-blue-2);
    border: 1.5px solid rgba(30, 144, 255, 0.5);
    box-shadow: 0 0 16px rgba(30, 144, 255, 0.25);
}

.ftcc-vision__stat-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vf-muted);
}

.ftcc-vision__stat-value {
    display: block;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--vf-text);
}

.ftcc-vision__stat-divider {
    width: 1px;
    align-self: stretch;
    background: var(--vf-line);
}

.ftcc-vision__pct-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2px;
    margin-top: 22px;
    padding: 18px 24px;
    border-radius: 18px;
    background: var(--vf-card);
    border: 1px solid var(--vf-line);
}

.ftcc-vision__pct {
    font-size: 52px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--vf-blue);
    text-shadow: 0 0 26px rgba(30, 144, 255, 0.4);
}

.ftcc-vision__pct-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--vf-muted);
}

.ftcc-vision__thanks {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
}

.ftcc-vision__thanks-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    color: var(--vf-blue-2);
    border: 1.5px solid rgba(30, 144, 255, 0.5);
    box-shadow: 0 0 16px rgba(30, 144, 255, 0.25);
}

.ftcc-vision__thanks-text strong {
    display: block;
    font-size: 16px;
    font-weight: 800;
    color: var(--vf-text);
}

.ftcc-vision__thanks-text em {
    display: block;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vf-muted);
}

.ftcc-vision__cta-row {
    margin-top: 28px;
}

.ftcc-vision__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
    padding: 17px 40px;
    margin: 0;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(180deg, #3aa0ff, #1366d6) !important;
    color: #ffffff !important;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.03em;
    text-transform: none;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 0 26px var(--vf-glow), 0 14px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ftcc-vision__cta:focus-visible {
    outline: 2px solid var(--vf-blue-2);
    outline-offset: 3px;
}

.ftcc-vision__cta:hover,
.ftcc-vision__cta:focus {
    transform: translateY(-2px);
    color: #ffffff !important;
    box-shadow: 0 0 40px var(--vf-glow), 0 18px 38px rgba(0, 0, 0, 0.5);
}

.ftcc-vision__cta-arrow {
    font-size: 20px;
    transition: transform 0.15s ease;
}

.ftcc-vision__cta:hover .ftcc-vision__cta-arrow {
    transform: translateX(4px);
}

/* ---------------------------------------------------------------- Give form (modal) */

.ftcc-vision__give {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px 20px;
    background: rgba(3, 6, 12, 0.78);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    overflow-y: auto;
    overscroll-behavior: contain;
    animation: ftcc-vision-overlay 0.25s ease;
}

.ftcc-vision__give[hidden] {
    display: none;
}

@keyframes ftcc-vision-overlay {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes ftcc-vision-reveal {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Prevent the page behind the modal from scrolling while it is open. */
body.ftcc-vision-modal-open {
    overflow: hidden;
}

.ftcc-vision__give-card {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: auto;
    padding: 32px;
    border-radius: 20px;
    background:
        radial-gradient(800px 360px at 50% -10%, rgba(30,144,255,0.12), transparent 60%),
        #070d18;
    border: 1.5px solid var(--vf-neon-border);
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.6),
        0 0 26px rgba(30, 144, 255, 0.2),
        inset 0 0 26px rgba(30, 144, 255, 0.06);
    animation: ftcc-vision-reveal 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.ftcc-vision__give-close {
    position: absolute;
    top: 14px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 50% !important;
    border: 1px solid var(--vf-line) !important;
    background: transparent !important;
    color: var(--vf-muted) !important;
    font-size: 22px;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.ftcc-vision__give-close:hover {
    color: var(--vf-text) !important;
    border-color: var(--vf-blue) !important;
}

.ftcc-vision__give-title {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.ftcc-vision__give-sub {
    margin-top: 4px;
    font-size: 14px;
    color: var(--vf-muted);
}

.ftcc-vision__amounts-label {
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vf-muted);
}

.ftcc-vision__amounts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 0;
}

.ftcc-vision__amount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 14px 8px;
    margin: 0;
    border-radius: 12px !important;
    border: 1.5px solid var(--vf-line) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--vf-text) !important;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.ftcc-vision__amount:hover {
    border-color: rgba(30, 144, 255, 0.6) !important;
}

.ftcc-vision__amount.is-active {
    border-color: var(--vf-blue) !important;
    background: rgba(30, 144, 255, 0.16) !important;
    box-shadow: 0 0 18px rgba(30, 144, 255, 0.3);
}

.ftcc-vision__custom {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1.5px solid var(--vf-blue);
    background: rgba(30, 144, 255, 0.1);
}

.ftcc-vision__custom-currency {
    font-size: 18px;
    font-weight: 800;
    color: var(--vf-blue-2);
}

.ftcc-vision__input.ftcc-vision__input--amount {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 14px 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.ftcc-vision__input.ftcc-vision__input--amount:focus {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.ftcc-vision__field {
    margin-top: 16px;
}

.ftcc-vision__label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--vf-muted);
    margin-bottom: 6px;
}

.ftcc-vision__optional {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.ftcc-vision__input {
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 13px 14px !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--vf-line) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--vf-text) !important;
    font-size: 15px !important;
    font-family: inherit !important;
    line-height: 1.4 !important;
    outline: none !important;
    box-shadow: none !important;
    text-transform: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
    appearance: none;
}

.ftcc-vision__input::placeholder { color: rgba(138, 160, 189, 0.7) !important; opacity: 1; }

.ftcc-vision__input:focus {
    border-color: var(--vf-blue) !important;
    box-shadow: 0 0 0 3px rgba(30, 144, 255, 0.2) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--vf-text) !important;
}

.ftcc-vision__textarea {
    resize: vertical;
    min-height: 56px !important;
}

.ftcc-vision__hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--vf-muted);
}

.ftcc-vision__alert {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(214, 59, 59, 0.14);
    border: 1px solid rgba(214, 59, 59, 0.4);
    color: #ffb4b4;
    font-size: 14px;
}

.ftcc-vision__checkout:not(:empty) {
    margin-top: 20px;
    padding: 16px;
    border-radius: 12px;
    background: #ffffff;
}

.ftcc-vision__pay {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    margin-top: 20px;
    padding: 16px;
    border: 0 !important;
    border-radius: 12px !important;
    background: linear-gradient(180deg, var(--vf-blue-2), var(--vf-blue)) !important;
    color: #04101f !important;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 0 22px var(--vf-glow);
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.ftcc-vision__pay:hover:not(.is-disabled) { transform: translateY(-1px); }

.ftcc-vision__pay.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.ftcc-vision__pay--ghost {
    background: transparent !important;
    color: var(--vf-text) !important;
    border: 1.5px solid var(--vf-line) !important;
    box-shadow: none;
}

.ftcc-vision__secure {
    margin-top: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--vf-muted);
}

.ftcc-vision__secure strong { color: var(--vf-text); }

.ftcc-vision__test-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(247, 201, 72, 0.18);
    color: #f7c948;
    font-weight: 700;
    font-size: 11px;
}

/* ---------------------------------------------------------------- Success */

.ftcc-vision__give-step[data-ftcc-vision-view="success"] {
    text-align: center;
    padding: 8px 0;
}

.ftcc-vision__success-icon {
    color: var(--vf-blue-2);
    margin: 0 auto 10px;
    line-height: 0;
}

.ftcc-vision__success-icon svg {
    width: 56px;
    height: 56px;
    display: inline-block;
}

.ftcc-vision__success-title {
    font-size: 22px;
    font-weight: 800;
}

.ftcc-vision__success-amount {
    margin-top: 8px;
    font-size: 36px;
    font-weight: 900;
    color: var(--vf-blue);
    text-shadow: 0 0 24px rgba(30, 144, 255, 0.4);
}

.ftcc-vision__success-meta {
    margin-top: 6px;
    font-size: 14px;
    color: var(--vf-muted);
}

.ftcc-vision__success-receipt {
    margin-top: 14px;
    font-size: 14px;
    color: var(--vf-text);
}

.ftcc-vision__success-receipt strong { color: var(--vf-blue-2); }

.ftcc-vision__success-redirect {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vf-blue-2);
}

.ftcc-vision__success-redirect-spinner {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(127, 212, 255, 0.3);
    border-top-color: var(--vf-blue-2);
    animation: ftcc-vision-spin 0.7s linear infinite;
}

@keyframes ftcc-vision-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .ftcc-vision__success-redirect-spinner { animation: none; }
}

/* ---------------------------------------------------------------- Stat rows */

.ftcc-vision__statlist {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Collapsible toggle header for the stat cards. */
.ftcc-vision__statlist-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 11px 16px;
    border-radius: 13px !important;
    border: 1px solid var(--vf-line) !important;
    background: linear-gradient(180deg, rgba(30, 144, 255, 0.12), rgba(30, 144, 255, 0.04)) !important;
    color: var(--vf-text) !important;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ftcc-vision__statlist-toggle:hover {
    border-color: rgba(30, 144, 255, 0.5) !important;
}

.ftcc-vision__statlist-toggle:focus-visible {
    outline: 2px solid var(--vf-blue-2);
    outline-offset: 2px;
}

.ftcc-vision__statlist-toggle-label {
    color: var(--vf-blue);
}

.ftcc-vision__statlist-toggle-icon {
    flex: none;
    display: inline-flex;
    color: var(--vf-blue-2);
    transition: transform 0.25s ease;
}

.ftcc-vision__statlist-toggle[aria-expanded="false"] .ftcc-vision__statlist-toggle-icon {
    transform: rotate(-90deg);
}

/* The cards wrapper that collapses/expands. */
.ftcc-vision__statlist-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
    max-height: 1200px;
    opacity: 1;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin 0.35s ease;
}

.ftcc-vision__statlist-body.is-collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.ftcc-vision__statrow {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 16px;
    border-radius: 13px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
    border: 1px solid var(--vf-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ftcc-vision__statrow:hover {
    border-color: rgba(30, 144, 255, 0.5);
    transform: translateX(2px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 22px rgba(30, 144, 255, 0.14);
}

/* Slim accent bar on the left edge of each card. */
.ftcc-vision__statrow::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, var(--vf-blue-2), var(--vf-blue));
    opacity: 0.65;
}

.ftcc-vision__statrow-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    color: var(--vf-blue-2);
    background: radial-gradient(circle at 35% 30%, rgba(30, 144, 255, 0.22), rgba(30, 144, 255, 0.08));
    border: 1.5px solid rgba(30, 144, 255, 0.5);
    box-shadow: 0 0 18px rgba(30, 144, 255, 0.25), inset 0 0 12px rgba(30, 144, 255, 0.15);
}

.ftcc-vision__statrow-icon svg {
    width: 20px;
    height: 20px;
}

.ftcc-vision__statrow-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.ftcc-vision__statrow-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vf-muted);
}

.ftcc-vision__statrow-value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--vf-text);
}

.ftcc-vision__statrow-sub {
    display: inline-flex;
    align-self: flex-start;
    margin-top: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(30, 144, 255, 0.14);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vf-blue-2);
}

/* ---------------------------------------------------------------- Note box */

.ftcc-vision__notebox {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding: 16px 20px;
    border-radius: 14px;
    border: 1.5px solid var(--vf-neon-border);
    background: rgba(30, 144, 255, 0.06);
    box-shadow: 0 0 18px rgba(30, 144, 255, 0.12), inset 0 0 16px rgba(30, 144, 255, 0.05);
}

.ftcc-vision__notebox-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    color: var(--vf-blue-2);
    background: rgba(30, 144, 255, 0.12);
    border: 1.5px solid rgba(30, 144, 255, 0.45);
}

.ftcc-vision__notebox-text strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vf-blue);
}

.ftcc-vision__notebox-text em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vf-muted);
}

/* Full-width call-to-action button (left + wall). */
.ftcc-vision__cta--block {
    display: flex;
    width: 100%;
    margin-top: 22px;
    box-sizing: border-box;
    border-radius: 14px !important;
}

.ftcc-vision__cta--wall {
    margin-top: auto;
}

/* ---------------------------------------------------------------- Honor Wall */

.ftcc-vision__wall {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    gap: 18px;
    padding: 30px 30px 32px;
    border-radius: 20px;
    background:
        radial-gradient(900px 400px at 50% -10%, rgba(30,144,255,0.12), transparent 60%),
        rgba(8, 14, 26, 0.55);
    box-shadow:
        0 0 22px rgba(30, 144, 255, 0.18),
        inset 0 0 26px rgba(30, 144, 255, 0.06);
}

/* Double-lined neon frame around the title block. */
.ftcc-vision__wall-head {
    position: relative;
    text-align: center;
    padding: 26px 26px 20px;
    border-radius: 16px;
    border: 1.5px solid rgba(90, 160, 245, 0.55);
    background: rgba(6, 12, 24, 0.4);
    box-shadow:
        0 0 22px rgba(30, 144, 255, 0.18),
        inset 0 0 0 5px rgba(8, 14, 26, 0.5),
        inset 0 0 0 6.5px rgba(90, 160, 245, 0.4),
        inset 0 0 28px rgba(30, 144, 255, 0.10);
}

.ftcc-vision__wall-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
    color: var(--vf-blue-2);
}

.ftcc-vision__wall-logo-img {
    max-height: 60px;
    max-width: 80px;
    width: auto;
    height: auto;
    filter: drop-shadow(0 0 10px rgba(30, 144, 255, 0.5));
}

.ftcc-vision__wall-logo-svg {
    width: 48px;
    height: 48px;
}

.ftcc-vision__wall-title {
    margin: 0;
    font-size: clamp(26px, 3.4vw, 40px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #ffffff 30%, #8fb6e6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 18px rgba(30, 144, 255, 0.3));
}

.ftcc-vision__wall-subtitle {
    margin-top: 2px;
    font-family: "Brush Script MT", "Segoe Script", "Snell Roundhand", cursive;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 500;
    font-style: italic;
    color: var(--vf-blue-2);
    text-shadow: 0 0 18px rgba(30, 144, 255, 0.35);
}

.ftcc-vision__wall-tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--vf-blue);
}

.ftcc-vision__wall-tagline span { flex: none; }

.ftcc-vision__wall-tagline::before,
.ftcc-vision__wall-tagline::after {
    content: "";
    flex: 1 1 auto;
    max-width: 40px;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, rgba(30, 144, 255, 0.6), transparent);
}

.ftcc-vision__wall-collabel {
    text-align: right;
    padding-right: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--vf-blue);
}

.ftcc-vision__wall-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ftcc-vision__wall-empty {
    padding: 28px 20px;
    text-align: center;
    border-radius: 14px;
    border: 1px dashed var(--vf-line);
    color: var(--vf-muted);
    font-size: 14px;
}

.ftcc-vision__wall-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-radius: 13px;
    background: rgba(10, 18, 32, 0.7);
    border: 1.5px solid rgba(70, 130, 210, 0.35);
    box-shadow: 0 0 14px rgba(30, 144, 255, 0.1), inset 0 0 16px rgba(30, 144, 255, 0.04);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.ftcc-vision__wall-card:hover {
    border-color: rgba(30, 144, 255, 0.6);
    background: rgba(30, 144, 255, 0.08);
}

.ftcc-vision__wall-card.is-fulfilled {
    border-color: rgba(46, 204, 113, 0.45);
    box-shadow: 0 0 14px rgba(46, 204, 113, 0.12), inset 0 0 16px rgba(46, 204, 113, 0.05);
}

.ftcc-vision__wall-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    color: var(--vf-blue-2);
    background: rgba(30, 144, 255, 0.12);
    border: 1.5px solid rgba(30, 144, 255, 0.5);
    box-shadow: 0 0 14px rgba(30, 144, 255, 0.2);
}

.ftcc-vision__wall-card.is-fulfilled .ftcc-vision__wall-avatar {
    color: var(--vf-green);
    border-color: rgba(46, 204, 113, 0.55);
    box-shadow: 0 0 14px rgba(46, 204, 113, 0.22);
}

.ftcc-vision__wall-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: clamp(16px, 1.6vw, 20px);
    font-weight: 700;
    color: var(--vf-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ftcc-vision__wall-ringwrap {
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ftcc-vision__wall-ring {
    flex: none;
    display: block;
    width: 44px;
    height: 44px;
    line-height: 0;
}

.ftcc-vision__wall-ring-track {
    stroke: rgba(140, 170, 220, 0.22);
}

.ftcc-vision__wall-ring-arc {
    stroke: var(--vf-blue-2);
    filter: drop-shadow(0 0 5px rgba(30, 144, 255, 0.55));
    transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.ftcc-vision__wall-pct {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    min-width: 64px;
}

.ftcc-vision__wall-pct strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--vf-blue-2);
}

.ftcc-vision__wall-pct em {
    margin-top: 3px;
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--vf-muted);
}

.ftcc-vision__wall-status {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--vf-green);
}

.ftcc-vision__wall-check {
    flex: none;
    display: grid;
    place-items: center;
    color: var(--vf-green);
    filter: drop-shadow(0 0 8px rgba(46, 204, 113, 0.5));
}

.ftcc-vision__wall-status-text {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1.15;
    text-align: left;
    color: var(--vf-green-2);
}

.ftcc-vision__wall-foot {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1.5px solid var(--vf-neon-border);
    background: rgba(30, 144, 255, 0.06);
    box-shadow: 0 0 18px rgba(30, 144, 255, 0.12), inset 0 0 16px rgba(30, 144, 255, 0.05);
}

.ftcc-vision__wall-foot-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 13px;
    color: var(--vf-blue-2);
    background: rgba(30, 144, 255, 0.12);
    border: 1.5px solid rgba(30, 144, 255, 0.45);
}

.ftcc-vision__wall-foot-text strong {
    display: block;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vf-blue);
}

.ftcc-vision__wall-foot-text em {
    display: block;
    margin-top: 3px;
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--vf-muted);
}

/* ---------------------------------------------------------------- Mode toggle */

.ftcc-vision__modes {
    display: flex;
    gap: 6px;
    margin-bottom: 22px;
    padding: 5px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--vf-line);
}

.ftcc-vision__mode {
    flex: 1;
    box-sizing: border-box;
    padding: 11px 10px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    color: var(--vf-muted);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.ftcc-vision__mode:hover { color: var(--vf-text); }

.ftcc-vision__mode.is-active {
    background: linear-gradient(180deg, var(--vf-blue-2), var(--vf-blue));
    color: #04101f;
    box-shadow: 0 0 18px rgba(30, 144, 255, 0.3);
}

/* ---------------------------------------------------------------- Pledge form */

.ftcc-vision__pledge-banner {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(30, 144, 255, 0.12);
    border: 1px solid rgba(30, 144, 255, 0.4);
    color: var(--vf-text);
    font-size: 14px;
    line-height: 1.45;
}

.ftcc-vision__pledge-banner strong { color: var(--vf-blue-2); }

/* "No pledge found" nudge on the Fulfill tab. */
.ftcc-vision__nudge {
    margin-top: 18px;
    padding: 18px 18px 16px;
    border-radius: 12px;
    border: 1px solid rgba(30, 144, 255, 0.35);
    background: rgba(30, 144, 255, 0.06);
    text-align: center;
}

.ftcc-vision__nudge-text {
    margin-bottom: 14px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--vf-text);
}

/* Optional "also pledge" block inside the Give now form. */
.ftcc-vision__givepledge {
    margin-top: 18px;
    padding: 16px 16px 4px;
    border: 1px solid var(--vf-line);
    border-radius: 12px;
    background: rgba(30, 144, 255, 0.04);
}

.ftcc-vision__check--toggle { margin-bottom: 0; }
.ftcc-vision__check--toggle span { font-size: 13.5px; line-height: 1.45; color: var(--vf-text); }

.ftcc-vision__givepledge-fields {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--vf-line);
}

.ftcc-vision__amount-main { display: block; }

.ftcc-vision__amount-sub {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--vf-muted);
}

.ftcc-vision__amount.is-active .ftcc-vision__amount-sub { color: var(--vf-blue-2); }

.ftcc-vision__check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    color: var(--vf-text);
    cursor: pointer;
    user-select: none;
}

.ftcc-vision__check span {
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
}

.ftcc-vision__check input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--vf-blue);
    flex: none;
}

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

/* Stack the Honor Wall beneath the fund on narrower screens. */
@media (max-width: 1100px) {
    .ftcc-vision--has-wall .ftcc-vision__layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .ftcc-vision--has-wall .ftcc-vision__hero {
        grid-template-columns: 210px 1fr;
        gap: 48px;
    }
    .ftcc-vision--has-wall .ftcc-vision__meter {
        justify-content: center;
        padding-left: 0;
    }
}

@media (max-width: 980px) {
    .ftcc-vision {
        padding: 30px 24px;
    }
    .ftcc-vision__panel { padding: 24px 22px 26px; }
    .ftcc-vision__wall { padding: 24px 22px 26px; }
    .ftcc-vision__wall-head { padding: 22px 20px 18px; }
    .ftcc-vision__hero,
    .ftcc-vision--has-wall .ftcc-vision__hero {
        grid-template-columns: 180px 1fr;
        gap: 36px;
    }
    .ftcc-vision__tube { min-height: 480px; }
    .ftcc-vision__stat-value { font-size: 26px; }
    .ftcc-vision__statrow-value { font-size: 22px; }
}

/* Stack to a single column: thermometer on top, content beneath.

   Centering strategy: center the WHOLE graphic (left-hand labels + tube +
   bulb) as a single unit, not just the tube. Because the labels stick out to
   the left and the bulb sticks out to the right, the tube itself must be
   nudged right so the empty margin is equal on both sides.

   With justify-content:center the tube centre lands at (width + padding-left)/2.
   Setting padding-left to (label reach left of centre) − (bulb reach right of
   centre) makes the left and right margins equal, and the value is independent
   of container width — so one fixed number balances it at every size. */
@media (max-width: 720px) {
    .ftcc-vision {
        padding: 24px 16px;
        border-radius: 20px;
    }
    .ftcc-vision__panel { padding: 20px 16px 22px; }
    .ftcc-vision__wall { padding: 20px 16px 22px; }
    .ftcc-vision__wall-head { padding: 20px 16px 16px; }
    .ftcc-vision__hero,
    .ftcc-vision--has-wall .ftcc-vision__hero {
        grid-template-columns: 1fr;
        gap: 14px;
        margin-top: 50px;
    }
    .ftcc-vision__meter,
    .ftcc-vision--has-wall .ftcc-vision__meter {
        order: 0;
        justify-content: center;
        padding-left: 78px;
    }
    .ftcc-vision__tube {
        min-height: 380px;
        margin: 4px 0 48px 0;
    }
    .ftcc-vision__stats { gap: 16px; }
}

@media (max-width: 520px) {
    .ftcc-vision {
        padding: 20px 12px;
        border-radius: 18px;
    }
    .ftcc-vision__panel { padding: 18px 13px 20px; }
    .ftcc-vision__wall { padding: 18px 13px 20px; }
    .ftcc-vision__wall-head { padding: 18px 13px 14px; }
    .ftcc-vision__eyebrow { letter-spacing: 0.16em; gap: 10px; }
    .ftcc-vision__subtitle { letter-spacing: 0.12em; gap: 10px; }
    .ftcc-vision__meter,
    .ftcc-vision--has-wall .ftcc-vision__meter {
        padding-left: 64px;
    }
    .ftcc-vision__tube {
        min-height: 320px;
        width: 52px;
    }
    .ftcc-vision__track { width: 46px; }
    .ftcc-vision__markers { width: 46px; }
    .ftcc-vision__bulb { width: 74px; height: 74px; bottom: -34px; }
    .ftcc-vision__marker-label { font-size: 13px; right: calc(100% + 24px); }
    .ftcc-vision__marker--goal .ftcc-vision__marker-label strong { font-size: 14px; }
    .ftcc-vision__marker-tick { width: 14px; }
    .ftcc-vision__stats {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 18px;
    }
    .ftcc-vision__stat-divider { display: none; }
    .ftcc-vision__stat-value { font-size: 24px; }
    .ftcc-vision__pct { font-size: 40px; }
    .ftcc-vision__amounts { grid-template-columns: repeat(2, 1fr); }
    .ftcc-vision__give-card { padding: 22px 16px; }
    .ftcc-vision__cta { width: 100%; justify-content: center; }

    .ftcc-vision__statrow { padding: 10px 14px; gap: 12px; }
    .ftcc-vision__statrow-icon { width: 38px; height: 38px; }
    .ftcc-vision__statrow-value { font-size: 21px; }
    .ftcc-vision__wall-card { padding: 12px 14px; gap: 10px; }
    .ftcc-vision__wall-name { font-size: 16px; }
    .ftcc-vision__wall-pct { min-width: 56px; }
    .ftcc-vision__wall-pct strong { font-size: 19px; }
    .ftcc-vision__wall-ringwrap { gap: 8px; }
}

/* Very narrow phones: tighten the graphic so the tube can stay centered
   without the labels crowding the left edge. */
@media (max-width: 380px) {
    .ftcc-vision__meter,
    .ftcc-vision--has-wall .ftcc-vision__meter {
        padding-left: 58px;
    }
    .ftcc-vision__tube {
        min-height: 300px;
        width: 48px;
    }
    .ftcc-vision__track { width: 42px; }
    .ftcc-vision__markers { width: 42px; }
    .ftcc-vision__bulb { width: 66px; height: 66px; bottom: -30px; }
    .ftcc-vision__marker-label { font-size: 12px; right: calc(100% + 20px); }
    .ftcc-vision__marker--goal .ftcc-vision__marker-label strong { font-size: 13px; }
    .ftcc-vision__marker-tick { width: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .ftcc-vision__fill { transition: none; }
    .ftcc-vision__give,
    .ftcc-vision__give-card { animation: none; }
    .ftcc-vision__marker.is-celebrate .ftcc-vision__marker-tick { animation: none; }
    .ftcc-vision__wall-ring-arc { transition: none; }
}