/* sponsor.html: "Your Support Reaches Real People" (#support) and the "Get in Touch" form.
   Individual Giving is the wide featured card (why on the left, how to give on the right);
   Brand Sponsorship and Partnership sit side by side under it. Follows the light/dark theme. */
.sp-who { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: -12px auto 34px; padding: 0; }
.sp-who li { padding: 7px 14px; border-radius: 999px; font-size: 0.86rem; font-weight: 600; color: var(--text); background: var(--surface); border: 1px solid var(--border); }
.sp-who li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--accent-2); vertical-align: 1px; }

.sp-tag { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 12%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 30%, transparent); }
.sp-tag svg { width: 14px; height: 14px; }
.sp-tag-gold { color: color-mix(in srgb, var(--gold) 80%, var(--text)); background: color-mix(in srgb, var(--gold) 14%, transparent); border-color: color-mix(in srgb, var(--gold) 40%, transparent); }
.sp-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.sp-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: 0.95rem; line-height: 1.45; }
.sp-list svg { flex-shrink: 0; width: 20px; height: 20px; padding: 3px; margin-top: 1px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.sp-arrow { width: 16px; height: 16px; transition: transform 0.2s ease; }

/* Individual Giving */
.sp-give {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 40px; align-items: start;
  padding: 40px; border-radius: var(--radius-lg); border: 1px solid color-mix(in srgb, var(--gold) 35%, var(--border));
  background:
    radial-gradient(520px 320px at 0% 0%, color-mix(in srgb, var(--gold) 14%, transparent), transparent 70%),
    radial-gradient(560px 360px at 100% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--surface);
  box-shadow: var(--shadow);
}
.sp-give h3 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 14px 0 8px; }
.sp-give-intro > p { color: var(--text-muted); margin: 0; font-size: 1.02rem; }
.sp-give .sp-list svg { background: linear-gradient(135deg, #e8a317, var(--gold)); }
.sp-thanks { display: flex; gap: 10px; align-items: center; margin: 24px 0 0; padding: 12px 14px; border-radius: var(--radius-md); font-size: 0.9rem; color: var(--text); background: color-mix(in srgb, var(--gold) 10%, transparent); border: 1px dashed color-mix(in srgb, var(--gold) 45%, transparent); }
.sp-thanks svg { flex-shrink: 0; width: 20px; height: 20px; color: #e5484d; fill: color-mix(in srgb, #e5484d 30%, transparent); }
.sp-pay { display: grid; gap: 14px; }
.sp-method { padding: 18px 18px 16px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--bg-elevated) 85%, transparent); border: 1px solid var(--border); }
.sp-method-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sp-method-head strong { display: block; font-size: 1rem; color: var(--text); }
.sp-method-head span { font-size: 0.82rem; color: var(--text-muted); }
.sp-method-ic { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; color: #fff; }
.sp-method-ic svg { width: 21px; height: 21px; }
.sp-ng { background: linear-gradient(145deg, #1aa564, #0b7a46); }
.sp-us { background: linear-gradient(145deg, #3b82f6, #1d4ed8); }
.sp-rows { margin: 0; display: grid; gap: 2px; flex: 1; min-width: 0; }
.sp-rows > div { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.sp-rows > div:first-child { border-top: 0; }
.sp-rows dt { font-size: 0.86rem; color: var(--text-muted); }
.sp-rows dd { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; color: var(--text); }
.sp-acct { font-family: var(--font-head); font-size: 1.35rem; letter-spacing: 0.06em; }
.sp-wrap { overflow-wrap: anywhere; }
.sp-copy { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; padding: 5px 11px; border-radius: 999px; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent); transition: background 0.2s ease; }
.sp-copy svg { width: 14px; height: 14px; }
.sp-copy:hover { background: color-mix(in srgb, var(--accent-2) 20%, transparent); }
.sp-copy.is-done { color: #16a34a; border-color: color-mix(in srgb, #16a34a 45%, transparent); background: color-mix(in srgb, #16a34a 12%, transparent); }
.sp-us-body { display: flex; gap: 18px; align-items: center; }
.sp-qr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.sp-qr img { width: 112px; height: 112px; padding: 5px; border-radius: 12px; background: #fff; border: 1px solid var(--border); }
.sp-qr figcaption { font-size: 0.75rem; color: var(--text-muted); }
.sp-cashapp { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 11px 16px; border-radius: 999px; font-weight: 700; color: #fff; text-decoration: none; background: linear-gradient(135deg, #00c244, #00a63a); box-shadow: 0 12px 26px -14px #00c244; }
.sp-cashapp:hover { color: #fff; filter: brightness(1.06); }
.sp-cashapp:hover .sp-arrow, .sp-card-btn:hover .sp-arrow { transform: translateX(3px); }

/* Companies + Organizations */
.sp-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.sp-card { --c: var(--accent); position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 30px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); overflow: hidden; transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.sp-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, var(--c), transparent); }
.sp-org { --c: #10b981; }
.sp-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 45%, var(--border)); box-shadow: 0 24px 50px -30px color-mix(in srgb, var(--c) 70%, transparent); }
.sp-card-ic { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 16px; border-radius: 14px; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.sp-card-ic svg { width: 25px; height: 25px; }
.sp-org .sp-tag { color: #0f9f6e; background: color-mix(in srgb, #10b981 12%, transparent); border-color: color-mix(in srgb, #10b981 32%, transparent); }
.sp-card h3 { font-size: 1.4rem; margin: 12px 0 6px; }
.sp-card > p { color: var(--text-muted); margin: 0; }
.sp-org .sp-list svg { background: linear-gradient(135deg, #059669, #10b981); }
.sp-card-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 0.93rem; text-decoration: none; color: #fff; background: var(--c); }
.sp-card .sp-list { margin-bottom: 24px; }
.sp-org .sp-card-btn { background: #0b8a5f; }
.sp-card-btn:hover { color: #fff; filter: brightness(1.08); }

/* "Get in Touch" form */
.sp-modal { width: min(620px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--border); border-radius: 22px; color: var(--text); background: var(--surface); box-shadow: 0 40px 100px -30px rgba(0, 0, 0, 0.65); overflow: auto; }
.sp-modal::backdrop { background: rgba(3, 8, 24, 0.7); backdrop-filter: blur(5px); }
.sp-modal[open] { animation: sp-in 0.22s ease-out; }
@keyframes sp-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.sp-form, .sp-done { position: relative; padding: 28px; }
.sp-x { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.sp-form-head { display: flex; gap: 14px; align-items: flex-start; padding-right: 40px; margin-bottom: 20px; }
.sp-form-head h2 { font-size: 1.35rem; margin: 0 0 4px; }
.sp-form-head p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.sp-form-ic { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--accent), var(--accent-2)); }
.sp-form-ic svg { width: 22px; height: 22px; }
.sp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.sp-field { display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; font-weight: 600; color: var(--text); }
.sp-field em { color: #e5484d; font-style: normal; }
.sp-full { grid-column: 1 / -1; }
.sp-field input, .sp-field select, .sp-field textarea { font: inherit; font-size: 16px; font-weight: 400; padding: 11px 13px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); width: 100%; box-sizing: border-box; }
.sp-field textarea { resize: vertical; min-height: 110px; }
.sp-field input:focus, .sp-field select:focus, .sp-field textarea:focus { outline: none; border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 25%, transparent); }
.sp-field .is-bad { border-color: #e5484d; }
.sp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sp-status { min-height: 1.3em; margin: 14px 0 0; font-size: 0.88rem; color: #e5484d; }
.sp-status a { color: inherit; }
.sp-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }
.sp-send[disabled] { opacity: 0.7; cursor: wait; }
.sp-done { text-align: center; padding: 40px 28px 32px; }
.sp-done h2 { margin: 14px 0 8px; }
.sp-done p { color: var(--text-muted); margin: 0 auto 22px; max-width: 420px; }
.sp-done p strong { color: var(--text); overflow-wrap: anywhere; }
.sp-done-ic { display: inline-grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 14px 30px -12px #22c55e; }
.sp-done-ic svg { width: 30px; height: 30px; }

@media (max-width: 960px) {
  .sp-give { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 30px; }
}
@media (max-width: 760px) {
  .sp-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .sp-give { padding: 22px 16px; }
  .sp-card { padding: 24px 18px; }
  .sp-method { padding: 16px 14px 14px; }
  .sp-qr { display: none; } /* you can't scan your own phone; the Cash App button does the job */
  .sp-acct { font-size: 1.15rem; }
  .sp-fields { grid-template-columns: minmax(0, 1fr); }
  .sp-form, .sp-done { padding: 22px 16px; }
  .sp-actions .btn { flex: 1; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .sp-card, .sp-arrow, .sp-modal[open] { transition: none; animation: none; } }
.sp-invite-link { margin: 18px 0 0; font-size: 0.92rem; }
.sp-invite-link a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 2026-10-03 (founder): intro on 2 rows, the thank-you card lower and redesigned ---------- */
@media (min-width: 900px) {
  #support .section-head > p { max-width: 880px; text-wrap: balance; }
}
/* The intro column stretches to the card's height so the thank-you note sits at its foot,
   level with the bottom of the payment methods instead of floating halfway down. */
@media (min-width: 861px) {
  .sp-give-intro { align-self: stretch; display: flex; flex-direction: column; }
  .sp-give-intro .sp-thanks { margin-top: auto; }
  .sp-give-intro .sp-list { margin-bottom: 32px; }
}
.sp-thanks {
  position: relative; overflow: hidden; isolation: isolate; gap: 16px; padding: 18px 20px; margin-top: 36px;
  border-radius: 18px; border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, #e5484d 22%, transparent), transparent 55%),
    radial-gradient(120% 140% at 100% 100%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 60%),
    color-mix(in srgb, var(--surface) 88%, var(--gold) 12%);
  box-shadow: 0 18px 40px -26px color-mix(in srgb, var(--gold) 80%, transparent);
  font-size: 0.95rem; line-height: 1.5;
}
.sp-thanks::after { /* a slow light passing across the card */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.07) 50%, transparent 65%);
  transform: translateX(-100%); animation: sp-thanks-shine 6s ease-in-out 1.5s infinite;
}
.sp-thanks svg {
  width: 46px; height: 46px; padding: 12px; border-radius: 50%; box-sizing: border-box;
  color: #fff; fill: #fff; stroke: #fff;
  background: linear-gradient(135deg, #ff6b6b, #e5484d 45%, var(--gold));
  box-shadow: 0 8px 20px -6px color-mix(in srgb, #e5484d 70%, transparent), 0 0 0 5px color-mix(in srgb, #e5484d 14%, transparent);
  animation: sp-thanks-beat 2.4s ease-in-out infinite;
}
.sp-thanks strong { display: block; margin-bottom: 2px; font: 700 1.15rem/1.2 var(--font-head); color: var(--text); }
.sp-thanks span { color: color-mix(in srgb, var(--text) 82%, transparent); }
@keyframes sp-thanks-beat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(0.98); } 45% { transform: scale(1.07); } }
@keyframes sp-thanks-shine { 0% { transform: translateX(-100%); } 40%, 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .sp-thanks svg, .sp-thanks::after { animation: none; } }
/* "Reach out and let's talk…" on one line on computers (founder request). */
@media (min-width: 900px) {
  #sponsor-contact .community-panel > p:not(.sp-invite-link) { max-width: none; white-space: nowrap; }
}

/* FULL-WIDTH PAGE (founder request). The page was a 1180px column sitting above a footer that already
   spans width: calc(100% - 48px), so on a wide monitor the content looked boxed in while the footer did
   not. These use the footer's exact width so the two line up at every window size.
   No upper cap on purpose: a cap just moves the same mismatch to a bigger monitor. Long lines are not a
   risk here because every paragraph already carries its own reading width (the lede at 970px, the section
   intro at 880px), so what actually grows is the cards, the globe panel and the supporters wall, which all
   want the room. Above 1240px only, so laptops and phones keep the layout they have. */
@media (min-width: 1240px) {
  .page-header > .container,
  #support > .container,
  #sponsor-contact > .container { max-width: none; width: calc(100% - 48px); }
}