/* ============================================================
   AdoptMeTV - Supporter pages (supporter, supporter levels, premier)
   Loaded after styles.css on those three pages only.
   ============================================================ */
:root { --orange-700:#C2410C; --gold:#C08A1E; --gold-700:#96680B; }

/* ---------- Support level cards ---------- */
.support-grid { grid-template-columns: repeat(4, 1fr); gap: 1.1rem; align-items: stretch; }
@media (max-width: 1080px){ .support-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } }
@media (max-width: 620px){ .support-grid { grid-template-columns: 1fr; } }

.t-teal   { --t: var(--teal);       --tp: var(--teal); }
.t-orange { --t: var(--orange-700); --tp: var(--orange-600); }
.t-gold   { --t: var(--gold-700);   --tp: var(--gold); }

.support-grid .tier { padding: 1.5rem 1.35rem 1.4rem; }
.support-grid .tier.featured { background: #EEF7F5; }
.tier-art { height: 150px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; }
.tier-art img { height: 100%; width: auto; max-width: 100%; object-fit: contain; }
.support-grid .tier-role { color: var(--t); font-size: .72rem; }
.support-grid .tier h3 { font-size: 1.4rem; line-height: 1.1; margin: .35rem 0 .55rem; }
.support-grid .tier p { font-size: .93rem; line-height: 1.5; }
.tier-price { margin-top: 1.1rem; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 1.7rem; line-height: 1.1; letter-spacing: -.02em; color: var(--tp); }
.tier-price span { display: block; margin-top: .3rem; font-family: 'Inter', sans-serif; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.tier-price.is-from { font-size: 1.35rem; }
.support-grid .tier .btn { margin-top: 1.1rem; white-space: normal; text-align: center; line-height: 1.25; font-size: .92rem; padding: .7rem 1rem; min-height: 3.4rem; }
.btn-line { background: #fff; color: var(--t); border-color: var(--tp); }
.btn-line:hover { background: var(--t); border-color: var(--t); color: #fff; }
.btn:focus-visible { outline: 3px solid var(--teal-400); outline-offset: 3px; }

.support-intro .lead + .lead { margin-top: 1rem; }

/* ---------- Become a Supporter (level) page ---------- */
.level { text-align: center; padding-block: clamp(2.5rem, 6vw, 4.5rem); }
html[data-level] .level { display: none; }
html[data-level="cameo"] #level-cameo,
html[data-level="spotlight"] #level-spotlight,
html[data-level="series"] #level-series { display: block; }
.level-card { max-width: 680px; margin-inline: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: clamp(2rem, 5vw, 3.5rem) clamp(1.4rem, 5vw, 3.25rem); }
.level-art { height: clamp(140px, 24vw, 190px); width: auto; margin: 0 auto 1.75rem; }
.level-card h1 { font-size: clamp(2rem, 4.6vw, 3rem); }
.level-price { margin-top: 1rem; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: clamp(2rem, 4.4vw, 2.75rem); line-height: 1; letter-spacing: -.02em; color: var(--tp); }
.level-price span { font-size: .5em; font-weight: 700; letter-spacing: 0; color: var(--stone); }
.level-card .lead { margin-top: 1.4rem; }
.level-card .btn { margin-top: 2rem; white-space: normal; text-align: center; line-height: 1.3; padding: 1rem 1.75rem; }

/* ---------- Premier Support page ---------- */
.premier-hero { text-align: center; padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 7vw, 5rem); }
.premier-star { width: clamp(180px, 30vw, 260px); height: auto; margin: clamp(1.5rem, 5vw, 3.5rem) auto clamp(2.5rem, 6vw, 4.5rem); }
.premier-hero .lead { margin-top: 1.25rem; }
.premier-from { margin-top: 1.5rem; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: clamp(1.2rem, 2.2vw, 1.5rem); color: var(--ink); }
.premier-hero .btn-row { margin-top: 1.75rem; }
.premier-copy p + p { margin-top: 1rem; }
.pillar { text-align: left; }
.pillar h3 { font-family: 'Inter', sans-serif; font-size: .85rem; font-weight: 700; letter-spacing: .16em; color: var(--t); margin-bottom: .7rem; }
.pillar { border-top: 4px solid var(--tp); }
.receive-grid { text-align: left; }
.receive-grid .card h3 { font-size: 1.25rem; }
#inquiry { scroll-margin-top: 96px; }
.inquiry-wrap { max-width: 760px; margin-inline: auto; }
.inquiry-wrap .form-card { margin-top: 2.25rem; text-align: left; }
.choices { border: 0; padding: 0; margin: 0 0 1.1rem; min-width: 0; }
.choices legend { padding: 0; font-weight: 600; font-size: .9rem; color: var(--ink); margin-bottom: .55rem; }
.choices label { display: flex; align-items: center; gap: .65rem; padding: .7rem .9rem; margin-bottom: .5rem; border: 1px solid var(--line); border-radius: 12px; background: var(--cream); font-weight: 500; font-size: 1rem; color: var(--ink); cursor: pointer; }
.choices label:hover { border-color: var(--teal); }
.choices input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--teal); }
.choices.inline { display: block; }
.choices.inline .choice-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.choices.inline .choice-row label { margin-bottom: 0; }
@media (max-width: 560px){ .choices.inline .choice-row { grid-template-columns: 1fr; } }