/* Support band and the thank-you sheet (support.js, js/support3d.js). */
.sup2 { padding: clamp(72px, 8vw, 112px) 0; }
.sup-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 40px; }
.sup-txt h2 { margin: 12px 0 16px; font-family: var(--display); font-size: var(--t-h2); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; color: var(--on-dark); text-wrap: balance; }
.sup-txt h2 span { display: block; }
.sup-txt h2 span + span { color: var(--signal); }
.sup-txt > p:not(.eyebrow) { margin: 0 0 24px; font-size: var(--t-body); line-height: 1.55; color: var(--on-dark-soft); text-wrap: pretty; }
.sup-txt .support-credit { margin: 18px 0 0; font-size: 13px; color: var(--on-dark-2); }
.sup2 .support-btn, .ty .support-btn { height: 58px; padding: 0 30px; border-radius: var(--r-pill); font-size: 18px; box-shadow: 0 16px 40px -14px oklch(0.86 0.165 92 / .9); }
.sup-vis { position: relative; aspect-ratio: 1; max-height: 520px; justify-self: center; width: 100%; }
.sup-vis::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, oklch(0.75 0.16 40 / .28), transparent 70%); filter: blur(20px); }
.sup-canvas, .ty-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.ty { width: min(520px, calc(100% - 24px)); max-height: none; padding: 0; border: 0; border-radius: var(--r-xl); background: none; color: var(--on-dark); overflow: visible; }
.ty::backdrop { background: oklch(0.12 0.01 70 / .72); backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; }
.ty.is-in::backdrop { opacity: 1; }
.ty-card { position: relative; padding: 0 28px 28px; border-radius: var(--r-xl); text-align: center; background: radial-gradient(120% 80% at 50% 0%, oklch(0.3 0.04 60), oklch(0.17 0.01 70) 70%); box-shadow: 0 0 0 1px oklch(1 0 0 / .1), 0 40px 90px -30px oklch(0 0 0 / .9); translate: 0 40px; scale: .96; opacity: 0; transition: translate .5s cubic-bezier(.2, .9, .2, 1), scale .5s cubic-bezier(.2, .9, .2, 1), opacity .3s; }
.ty.is-in .ty-card { translate: 0 0; scale: 1; opacity: 1; }
.ty-vis { position: relative; height: 230px; margin: 0 -28px 4px; }
.ty-k { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 500 13px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal); }
.ty-k .ic { width: 16px; height: 16px; }
.ty h2 { margin: 0 0 10px; font-family: var(--display); font-size: clamp(28px, 4vw, 36px); font-weight: 500; line-height: 1.1; text-wrap: balance; }
.ty h2 span { display: block; } .ty h2 span + span { color: var(--signal); }
.ty-sub { margin: 0 0 22px; color: var(--on-dark-soft); font-size: 16px; }
.ty-act { display: grid; justify-items: center; gap: 8px; }
.ty-later { border: 0; background: none; color: var(--on-dark-2); font-size: 15px; padding: 10px 14px; cursor: pointer; }
.ty-later:hover { color: var(--on-dark); }
@media (max-width: 800px) {
  .sup-in { grid-template-columns: 1fr; gap: 8px; }
  .sup-vis { order: -1; max-width: 340px; }
  .sup2 .support-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ty-card, .ty::backdrop { transition: none; } }
.ty h2 span:first-child, .sup-txt h2 span:first-child { color: var(--on-dark); }
.ty h2 span + span, .sup-txt h2 span + span { color: var(--signal); }
#support .sup-txt h2 span + span { color: var(--signal); } #support .sup-txt h2 span:first-child { color: var(--on-dark); }
.sup-txt > p:not(.eyebrow), .sup-txt .support-credit { text-wrap: pretty; }