/* Support page: centered intro, cards for the free ways to help (Spotify player, YouTube, socials, share), then the optional Ko-fi tip. No divider lines between sections. */
.support { padding-block: var(--hero-top) var(--hero-bottom); }
.support-free { padding-block: 0 var(--section-y); }
.support-kofi { padding-block: 0 var(--section-y); }
.support__hero { text-align: center; display: grid; justify-items: center; }
.support__hero .lead { max-width: 34em; text-wrap: balance; }
.support__hero h1 { text-wrap: balance; }
.support__cards { display: grid; gap: var(--s-5); }
@media (min-width: 900px) {
  .support__cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto; gap: var(--s-5); }
  .scard--spotify { grid-row: 1 / span 3; }
}
.scard { display: grid; align-content: start; gap: var(--s-4); padding: var(--s-6); border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--surface); }
@media (max-width: 560px) { .scard { padding: var(--s-5); } }
.scard__head { display: flex; align-items: center; gap: var(--s-3); }
.scard__head svg { width: 24px; height: 24px; flex: none; fill: currentColor; color: var(--moon); }
.scard__head svg.ln { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.scard h2 { margin: 0; font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-card); letter-spacing: var(--tracking-display-sm); line-height: var(--lh-snug); }
.scard p { margin: 0; color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55; max-width: 34em; }
.scard__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); counter-reset: step; }
.scard__steps li { color: var(--text-2); font-size: var(--fs-sm); line-height: 1.55; }
.scard__steps li::before { counter-increment: step; content: "Step " counter(step); display: block; font-size: var(--fs-xs); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-3); margin-bottom: 2px; }
.scard__steps b { color: var(--text); font-weight: var(--fw-medium); margin-right: .4em; }
.scard__embed { display: flex; justify-content: center; }
.scard__embed iframe { width: 100%; max-width: 460px; border: 0; border-radius: var(--r-md); background: transparent; color-scheme: normal; }
.scard__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.scard--spotify .scard__actions, .scard--spotify .scard__note { justify-content: center; text-align: center; margin-inline: auto; }
.scard__note { font-size: var(--fs-xs) !important; color: var(--text-3) !important; }
.btn--arrow::after { content: "→"; transition: transform var(--t-base) var(--ease-out); }
.btn--arrow:hover::after { transform: translateX(3px); }
.scard .btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.support__grid { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 900px) { .support__grid { grid-template-columns: 1fr minmax(320px, 420px); gap: var(--s-8); } }
.support h1 { font-size: var(--fs-hero); margin-bottom: var(--hero-lead); }
.support__h2 { font-size: var(--fs-3xl); margin: 0; max-width: 20ch; text-wrap: balance; }
.support__h2 + .support__text, .support__h2 + .support__text { margin: var(--s-6) 0 0; color: var(--text-2); max-width: 34em; }
.support__note { margin: var(--s-5) 0 0; font-size: var(--fs-xs); color: var(--text-3); }
.support__box { display: grid; gap: var(--s-3); justify-items: start; }
.support__box iframe { width: 100%; border: 0; border-radius: var(--r-xl); background: #f9f9f9; color-scheme: light; }