:root {
    --navy-0: #050b14;
    --navy-1: #08131f;
    --navy-2: #0c1d2b;
    --gold: #d8b35d;
    --gold-soft: #f1d58e;
    --teal: #65d5ce;
    --text: #f3efe5;
    --muted: #a8b4bc;
    --line: rgba(216, 179, 93, 0.22);
}


* {
    box-sizing: border-box;
}


html {
    background: var(--navy-0);
}


body {
    margin: 0;
    min-height: 100vh;
    color: var(--text);

    background:
        radial-gradient(
            circle at 18% 10%,
            rgba(40, 125, 123, 0.15),
            transparent 32rem
        ),
        radial-gradient(
            circle at 85% 18%,
            rgba(216, 179, 93, 0.10),
            transparent 28rem
        ),
        linear-gradient(
            180deg,
            #07111d,
            var(--navy-0)
        );

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


a {
    color: inherit;
}


.ot-header {
    min-height: 88px;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    padding:
        12px
        clamp(20px, 4vw, 70px);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.06);

    background:
        rgba(5, 11, 20, 0.78);
}


.ot-brand {
    display: flex;
    align-items: center;

    gap: 13px;

    text-decoration: none;
}


.ot-brand img {
    width: 58px;
    height: 58px;

    object-fit: contain;
}


.ot-brand-copy {
    display: flex;
    flex-direction: column;
}


.ot-brand-copy strong {
    color: var(--gold-soft);

    font-size: 1rem;
    letter-spacing: 0.05em;
}


.ot-brand-copy small {
    margin-top: 3px;

    color: var(--muted);

    font-size: 0.68rem;
}


.ot-nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    flex-wrap: wrap;

    gap: 7px;
}


.ot-nav a {
    padding: 9px 11px;

    border-radius: 999px;

    text-decoration: none;

    color: #c4cdd3;

    font-size: 0.88rem;
}


.ot-nav a:hover,
.ot-nav a.active {
    color: var(--gold-soft);

    background:
        rgba(216, 179, 93, 0.08);
}


main {
    overflow: hidden;
}


.support-hero {
    position: relative;

    padding:
        clamp(64px, 9vw, 125px)
        clamp(20px, 6vw, 90px)
        80px;
}


.hero-glow {
    position: absolute;

    width: 520px;
    height: 520px;

    right: -180px;
    top: -160px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(216, 179, 93, 0.14),
            transparent 68%
        );
}


.support-shell {
    position: relative;

    z-index: 1;

    max-width: 1180px;

    margin: auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(300px, 0.65fr);

    gap:
        clamp(35px, 7vw, 95px);

    align-items: center;
}


.eyebrow,
.principles-heading span,
.thanks span {
    color: var(--teal);

    font-size: 0.77rem;

    font-weight: 800;

    letter-spacing: 0.19em;
}


.support-copy h1 {
    max-width: 780px;

    margin:
        15px
        0
        20px;

    font-size:
        clamp(2.8rem, 6vw, 5.8rem);

    line-height: 0.98;

    letter-spacing: -0.055em;
}


.lead {
    max-width: 700px;

    margin: 0;

    color: #b8c2c8;

    font-size:
        clamp(1rem, 1.5vw, 1.2rem);

    line-height: 1.75;
}


.amounts {
    display: flex;

    gap: 10px;

    flex-wrap: wrap;

    margin:
        31px
        0
        24px;
}


.amounts span,.amounts button {
    min-width: 72px;

    padding:
        12px
        17px;

    border:
        1px solid
        var(--line);

    border-radius: 12px;

    text-align: center;

    color: var(--gold-soft);

    background:
        linear-gradient(
            180deg,
            rgba(216, 179, 93, 0.09),
            rgba(216, 179, 93, 0.03)
        );

    font-weight: 800;
}

.amounts button{border:0;background:transparent;font:inherit;cursor:pointer}.custom-amount{display:flex;flex:0 0 100%;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;font-weight:800}.custom-amount input{width:88px;margin:0;padding:8px}.custom-amount button{min-width:auto;padding:8px 10px}


.support-button {
    display: inline-flex;

    min-height: 52px;

    align-items: center;
    justify-content: center;

    padding:
        0
        24px;

    border-radius: 13px;

    border:
        1px solid
        rgba(241, 213, 142, 0.65);

    text-decoration: none;

    color: #07111d;

    background:
        linear-gradient(
            135deg,
            #f2d993,
            #c99c42
        );

    box-shadow:
        0
        14px
        44px
        rgba(216, 179, 93, 0.11);

    font-weight: 900;
}


.support-button-disabled {
    cursor: default;

    opacity: 0.58;
}


.payment-note {
    max-width: 610px;

    margin:
        15px
        0
        0;

    color: #7f919d;

    font-size: 0.82rem;

    line-height: 1.55;
}


.support-card {
    position: relative;

    padding: 31px;

    border:
        1px solid
        var(--line);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 38, 54, 0.88),
            rgba(6, 17, 28, 0.92)
        );

    box-shadow:
        0
        30px
        80px
        rgba(0, 0, 0, 0.28);
}


.support-card::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.05),
            transparent 40%
        );
}


.card-icon {
    font-size: 2.3rem;
}


.support-card h2 {
    margin:
        15px
        0
        20px;

    color: var(--gold-soft);

    font-size: 1.35rem;
}


.support-card ul {
    padding: 0;
    margin: 0;

    list-style: none;
}


.support-card li {
    position: relative;

    padding:
        12px
        0
        12px
        27px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.055);

    color: #b8c3ca;
}


.support-card li::before {
    content: "\2713";

    position: absolute;

    left: 1px;

    color: var(--teal);

    font-weight: 900;
}


.principles {
    max-width: 1180px;

    margin: auto;

    padding:
        30px
        clamp(20px, 4vw, 40px)
        90px;
}


.principles-heading {
    margin-bottom: 30px;
}


.principles-heading h2 {
    max-width: 700px;

    margin:
        10px
        0
        0;

    font-size:
        clamp(1.8rem, 3vw, 3rem);
}


.principle-grid {
    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 14px;
}


.principle-grid article {
    min-height: 190px;

    padding: 24px;

    border:
        1px solid
        rgba(255, 255, 255, 0.07);

    border-radius: 18px;

    background:
        rgba(255, 255, 255, 0.025);
}


.principle-grid strong {
    color: var(--gold-soft);
}


.principle-grid p {
    margin-bottom: 0;

    color: #93a4ae;

    line-height: 1.65;

    font-size: 0.9rem;
}


.thanks {
    max-width: 1100px;

    margin:
        0
        auto
        90px;

    padding: 35px;

    display: flex;

    gap: 26px;

    align-items: center;

    border:
        1px solid
        rgba(101, 213, 206, 0.14);

    border-radius: 22px;

    background:
        linear-gradient(
            110deg,
            rgba(101, 213, 206, 0.055),
            rgba(216, 179, 93, 0.035)
        );
}


.thanks img {
    width: 100px;
    height: 100px;

    object-fit: contain;
}


.thanks h2 {
    margin:
        8px
        0
        7px;
}


.thanks p {
    max-width: 700px;

    margin: 0;

    color: #9bacb5;

    line-height: 1.65;
}


footer {
    min-height: 110px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex-direction: column;

    gap: 7px;

    padding: 30px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.055);

    color: #667985;
}


footer strong {
    color: var(--gold-soft);
}


footer span {
    font-size: 0.8rem;
}


@media (max-width: 950px) {

    .ot-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .ot-nav {
        justify-content: flex-start;
    }


    .support-shell {
        grid-template-columns: 1fr;
    }


    .principle-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 620px) {

    .support-hero {
        padding-top: 55px;
    }


    .ot-brand-copy small {
        max-width: 220px;
    }


    .principle-grid {
        grid-template-columns: 1fr;
    }


    .thanks {
        align-items: flex-start;

        flex-direction: column;
    }


    .thanks img {
        width: 75px;
        height: 75px;
    }
}

/* ORIGIN TORTOISE SUPPORT BRAND POLISH V1 */

.ot-header {
    min-height: 106px;
}

.founding-supporter-badge,
.founding-unlocked {
    color: var(--gold-soft);
    font-weight: 800;
    letter-spacing: .04em;
}

.founding-supporter-badge {
    display: grid;
    gap: 5px;
    max-width: 420px;
    margin-top: 24px;
    padding: 15px 17px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: rgba(216, 179, 93, .08);
}

.founding-supporter-badge span { color: var(--muted); font-size: .9rem; }
.support-modal-open { overflow: hidden; }
.support-thanks-modal { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; }
.support-thanks-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .72); }
.support-thanks-dialog { position: relative; width: min(100%, 590px); max-height: calc(100vh - 40px); overflow: auto; padding: clamp(26px, 6vw, 46px); border: 1px solid var(--line); border-radius: 22px; background: linear-gradient(145deg, #102535, #07111d); box-shadow: 0 30px 90px rgba(0, 0, 0, .55); }
.support-thanks-dialog h2 { margin: 10px 34px 16px 0; color: var(--gold-soft); font-size: clamp(1.7rem, 5vw, 2.45rem); }
.support-thanks-dialog p { color: #c4cdd3; line-height: 1.65; }
.founding-copy { color: var(--gold-soft) !important; }
.support-thanks-close { position: absolute; top: 15px; right: 17px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; color: var(--gold-soft); background: transparent; font-size: 1.6rem; cursor: pointer; }
.support-modal-continue { display: inline-flex; min-height: 48px; align-items: center; padding: 0 19px; border-radius: 11px; color: #07111d; background: linear-gradient(135deg, #f2d993, #c99c42); font-weight: 900; text-decoration: none; }

.ot-brand {
    flex: 0 1 320px;
    max-width: 320px;
    min-width: 260px;
}

.ot-brand img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 137px;
    object-fit: contain;
    object-position: left center;
}

.card-icon {
    width: 78px;
    height: 78px;

    display: grid;
    place-items: center;

    padding: 7px;

    border: 1px solid rgba(216, 179, 93, 0.36);
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(216, 179, 93, 0.12),
            rgba(7, 18, 31, 0.18) 70%
        );

    box-shadow:
        0 0 28px rgba(216, 179, 93, 0.08);

    overflow: hidden;
}

.card-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

@media (max-width: 950px) {

    .ot-brand {
        width: min(390px, 100%);
        max-width: 100%;
    }

    .ot-brand img {
        width: min(390px, 100%);
    }
}

@media (max-width: 620px) {

    .ot-header {
        min-height: auto;
    }

    .ot-brand {
        min-width: 0;
        width: 100%;
    }

    .ot-brand img {
        width: min(340px, 100%);
        max-height: 82px;
    }

    .card-icon {
        width: 68px;
        height: 68px;
    }
}

/* Task 160 Founder Visual Correction V1 */
.support-hero { padding-bottom: 48px; }
.amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 28px 0 18px; }
.amounts > .amount-choice { min-width: 0; min-height: 96px; padding: 16px 10px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg, rgba(17,46,63,.92), rgba(6,17,28,.9)); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.amounts > .amount-choice > span { color: var(--gold-soft); font-size: 1.55rem; line-height: 1; }
.amounts > .amount-choice > small { margin-top: 5px; }
.custom-amount { grid-column: 1 / -1; display: grid; gap: 12px; padding: 20px; border-radius: 16px; background: linear-gradient(135deg, rgba(10,31,46,.88), rgba(5,14,24,.9)); }
.custom-amount-row { display: flex; gap: 12px; align-items: center; }
.custom-amount-row > button { flex: 0 0 auto; min-height: 46px; padding: 0 18px !important; }
.custom-amount-help { color: #94a7b1; }
.sandbox-status { display: grid; gap: 4px; max-width: 610px; margin-top: 14px; padding: 13px 15px; border: 1px solid rgba(241,213,142,.5); border-radius: 12px; background: rgba(216,179,93,.11); color: var(--gold-soft); }
.sandbox-status strong { font-size: .72rem; letter-spacing: .14em; }
.sandbox-status span { color: #eadbb7; font-size: .88rem; }
.checkout-unavailable { max-width: 610px; margin-top: 12px; padding: 12px 14px; border: 1px dashed rgba(168,180,188,.35); border-radius: 11px; color: #a8b4bc; background: rgba(255,255,255,.025); font-size: .9rem; }
.support-card { align-self: start; padding: 28px; }
.support-card h2 { font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; }
.support-card li { padding: 10px 0 10px 25px; }
.money-flow { display:none; }
.money-flow-section { max-width: 1180px; margin: 0 auto; padding: 32px clamp(20px,4vw,40px); display: grid; grid-template-columns: .8fr 1.2fr; gap: 28px; align-items: center; border: 1px solid rgba(216,179,93,.24); border-radius: 22px; background: linear-gradient(115deg, rgba(14,39,55,.84), rgba(5,14,24,.82)); }
.money-flow-section-copy > span { color: var(--teal); font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.money-flow-section h2 { margin: 8px 0; color: var(--gold-soft); font-size: clamp(1.45rem,3vw,2.3rem); }
.money-flow-section p { margin:0; color:#afbdc5; line-height:1.6; }
.money-flow-section .money-flow-steps { grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; align-items:center; gap: 8px; margin:0; }
.money-flow-section .money-flow-steps span { padding: 13px 10px; border: 1px solid rgba(216,179,93,.22); border-radius: 12px; background: rgba(5,11,20,.5); text-align:center; }
.principles { padding-top: 52px; padding-bottom: 52px; }
.principles-heading { margin-bottom: 20px; }
.principle-grid article { min-height: 160px; padding: 20px; }
.principle-grid strong { display:block; margin-bottom: 10px; }
.supporter-recognition { display:grid; grid-template-columns: auto 1fr; column-gap: 22px; align-items:center; margin-bottom: 22px; padding: 26px clamp(20px,4vw,36px); }
.supporter-recognition::before { content:""; width:68px; height:68px; grid-row: span 3; border:1px solid rgba(216,179,93,.34); border-radius:50%; background: url('/static/assets/origin-tortoise-medallion-v1.png') center/78% no-repeat, radial-gradient(circle, rgba(216,179,93,.15), transparent 70%); }
.supporter-recognition h2 { margin: 5px 0 8px; }
.thanks { margin-bottom: 48px; }
@media (max-width: 950px) { .money-flow-section { grid-template-columns:1fr; } .money-flow-section .money-flow-steps { grid-template-columns:1fr auto 1fr; } .money-flow-section .money-flow-steps span:nth-of-type(3), .money-flow-section .money-flow-steps span:nth-of-type(4) { grid-column: span 1; } }
@media (max-width: 620px) { .amounts { grid-template-columns: repeat(2, minmax(0,1fr)); } .amounts > .amount-choice { min-height:88px; } .custom-amount-row { display:grid; } .custom-amount-row > button { width:100%; } .money-flow-section { margin: 0 14px; padding:24px 18px; } .money-flow-section .money-flow-steps { grid-template-columns:1fr; } .money-flow-section .money-flow-steps b { transform:rotate(90deg); } .supporter-recognition { grid-template-columns:1fr; } .supporter-recognition::before { grid-row:auto; } }

/* Task 160 money-flow defect fix: explicit scoped cards and arrows. */
.money-flow-section { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.money-flow-section .money-flow-steps { display: grid; grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr) 28px minmax(0,1fr); gap: 9px; width: 100%; }
.money-flow-section .flow-card { min-height: 92px; display: grid; place-items: center; padding: 12px 9px; border: 1px solid rgba(216,179,93,.38); border-radius: 14px; background: linear-gradient(145deg, rgba(20,52,70,.92), rgba(6,17,28,.94)); color: var(--gold-soft); text-align: center; font-size: .74rem; font-weight: 900; letter-spacing: .06em; line-height: 1.35; box-shadow: inset 0 1px rgba(255,255,255,.05); }
.money-flow-section .flow-arrow { display: grid; place-items: center; color: var(--teal); font-size: 1.4rem; font-weight: 900; }
@media (max-width: 950px) { .money-flow-section .money-flow-steps { grid-template-columns: minmax(0,1fr) 28px minmax(0,1fr); } .money-flow-section .flow-card:nth-of-type(5), .money-flow-section .flow-card:nth-of-type(7) { grid-column:auto; } }
@media (max-width: 620px) { .money-flow-section { width: calc(100% - 28px); } .money-flow-section .money-flow-steps { grid-template-columns: 1fr; gap: 8px; } .money-flow-section .flow-card { min-height: 68px; } .money-flow-section .flow-arrow { min-height: 20px; transform: rotate(90deg); } }
/* ORIGIN TORTOISE SUPPORT MEDALLION FIT V1 */

.card-icon img {
    transform: translateX(-3px) scale(1.50);
    transform-origin: center;
}

/* TASK 160 — Final GBP polish: currency clarity and support transparency. */
.amounts > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(216, 179, 93, 0.09), rgba(216, 179, 93, 0.03));
    cursor: pointer;
}

.amounts > button:hover,
.amounts > button:focus-visible {
    border-color: rgba(241, 213, 142, 0.72);
    outline: none;
    transform: translateY(-1px);
}

.amounts > button > span,
.amounts > button > small {
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.amounts > button > small {
    color: var(--teal);
    font-size: 0.62rem;
    letter-spacing: 0.12em;
}

.custom-amount {
    display: flex;
    flex: 0 0 100%;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(7, 17, 29, 0.58);
}

.custom-amount-title,
.custom-amount-help {
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.custom-amount-title {
    color: var(--gold-soft);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.12em;
}

.custom-input-wrap {
    display: inline-flex;
    align-items: center;
    min-height: 42px;
    min-width: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(216, 179, 93, 0.36) !important;
    border-radius: 10px !important;
    overflow: hidden;
    color: var(--gold-soft);
    background: rgba(5, 11, 20, 0.82) !important;
    font-weight: 800;
}

.custom-input-wrap > span {
    min-width: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: inherit;
    background: transparent !important;
    font-size: 0.84rem;
}

.custom-input-wrap > span:last-child {
    border-left: 1px solid rgba(216, 179, 93, 0.22) !important;
    color: var(--teal);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
}

.custom-amount input {
    width: 96px;
    min-height: 40px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    outline: 0;
    color: var(--text);
    background: transparent;
    font: inherit;
}

.custom-amount button {
    min-width: 0 !important;
    min-height: 42px;
    padding: 0 14px !important;
    border: 1px solid rgba(241, 213, 142, 0.65) !important;
    border-radius: 10px !important;
    color: #07111d;
    background: linear-gradient(135deg, #f2d993, #c99c42) !important;
    cursor: pointer;
    font: inherit;
    font-weight: 900;
}

.custom-amount-help {
    flex: 0 0 100%;
    color: var(--muted);
    font-size: 0.72rem;
}

.payment-processing-copy {
    max-width: 610px;
    margin: 14px 0 0;
    color: var(--gold-soft);
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.55;
}

.sandbox-warning {
    display: inline-block;
    padding: 10px 13px;
    border: 1px solid rgba(241, 213, 142, 0.42);
    border-radius: 10px;
    color: var(--gold-soft);
    background: rgba(216, 179, 93, 0.10);
}

.money-flow {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
}

.money-flow-label,
.supporter-recognition > span {
    color: var(--teal);
    font-size: 0.7rem;
    font-weight: 900;
    letter-spacing: 0.14em;
}

.money-flow-steps {
    display: grid;
    gap: 5px;
    margin: 14px 0;
    color: var(--gold-soft);
    font-size: 0.85rem;
    font-weight: 800;
}

.money-flow-steps b { color: var(--teal); }

.money-flow p {
    margin: 12px 0 0;
    color: #aebbc2;
    font-size: 0.84rem;
    line-height: 1.6;
}

.supporter-recognition {
    max-width: 1180px;
    margin: 0 auto 30px;
    padding: 28px clamp(20px, 4vw, 40px);
    border: 1px solid rgba(216, 179, 93, 0.28);
    border-radius: 20px;
    background: linear-gradient(110deg, rgba(216, 179, 93, 0.09), rgba(7, 17, 29, 0.55));
}

.supporter-frame-preview { position:relative; width:min(360px,100%); aspect-ratio:3/2; margin:0; justify-self:center; }
.supporter-frame-preview img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; }
.supporter-frame-initials { position:absolute; top:45%; left:50%; z-index:1; display:grid; place-items:center; width:39%; aspect-ratio:1; border-radius:50%; transform:translate(-50%,-50%); background:linear-gradient(135deg,#163a5b,#07111d); color:#f3d98c; font-weight:900; font-size:clamp(1.2rem,4vw,2.5rem); }
.supporter-recognition-copy { min-width:0; }

.supporter-recognition h2 {
    margin: 9px 0;
    color: var(--gold-soft);
    font-size: clamp(1.35rem, 2.6vw, 2.2rem);
}

.supporter-recognition p {
    max-width: 860px;
    margin: 0;
    color: #b8c3ca;
    line-height: 1.65;
}

.supporter-recognition .supporter-thanks { color: var(--gold-soft); font-weight: 800; }
.supporter-recognition .supporter-reassurance { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(216,179,93,.24); color: #b9c6cc; font-size: .92rem; }
.supporter-recognition .supporter-reassurance strong { color: var(--teal); }

@media (max-width: 620px) {
    .amounts { gap: 8px; }
    .amounts > button { flex: 1 1 calc(50% - 8px); min-width: 0; }
    .custom-amount { align-items: stretch; }
    .custom-amount-title,
    .custom-input-wrap,
    .custom-amount button { width: 100%; }
    .custom-input-wrap > input { flex: 1; width: auto; }
    .custom-amount button { justify-content: center; }
    .supporter-frame-preview { width:min(330px,100%); }
}

/* ORIGIN TORTOISE FOUNDING SUPPORTER FINAL VISUAL FIX V1 */

/*
   Founder-approved Support preview:
   - no OT initials inside frame
   - no legacy medallion/logo beside recognition copy
   - ornate frame should be the visual focus
*/

.supporter-frame-initials {
    display: none !important;
}

/* Remove old decorative/legacy medallion beside this section. */
.supporter-recognition::before {
    content: none !important;
    display: none !important;
}

/* Collapse the old logo column after removing the medallion. */
.supporter-recognition {
    grid-template-columns: minmax(0, 1fr) !important;
}

/* Make the approved Founding Supporter frame feel substantial again. */
.supporter-frame-preview {
    width: min(470px, 100%) !important;
    max-width: 470px !important;
    aspect-ratio: 1 / 1 !important;

    margin:
        0
        auto
        24px !important;

    display: block !important;
}

/* The approved frame artwork itself owns the visual treatment. */
.supporter-frame-preview img {
    display: block !important;

    width: 100% !important;
    height: auto !important;

    max-width: none !important;

    object-fit: contain !important;
}

/* Keep the gratitude copy centred beneath the collectible frame. */
.supporter-recognition > div {
    min-width: 0;
}

@media (max-width: 620px) {

    .supporter-frame-preview {
        width: min(430px, 100%) !important;
        max-width: 430px !important;

        margin-bottom: 20px !important;
    }
}