/* Support thank-you (Stripe return) — the thank-you prints like a receipt (rebuilt 2026-09-29).
   A paper receipt feeds down out of a slot, torn edge and all, and a gold heart seal is pressed
   onto it. The heading and receipt line keep their ids so js/thank-you.js can set the once/monthly
   wording. No sponsor block or community grid here by design. Scoped to body.p-support-thanks. */

.p-support-thanks main { overflow-x: clip; }
.p-support-thanks .ty-open h1 { font-size: clamp(34px, 4.4vw, 56px); max-width: 15em; }
.p-support-thanks .ty-open .lede { color: var(--navy); font-size: clamp(18px, 1.6vw, 20.5px); max-width: 32em; }
.p-support-thanks .ty-band { position: relative; z-index: 2; margin-top: clamp(-130px, -8.5vw, -52px); padding-bottom: clamp(56px, 8vw, 110px); }

/* the slot the receipt feeds out of */
.p-support-thanks .ty-slot { position: relative; z-index: 2; width: min(100%, 520px); height: 22px; margin: 0 auto; border-radius: 12px;
  background: linear-gradient(180deg, var(--navy-soft), var(--navy-deep, #14203a)); box-shadow: 0 8px 14px -6px rgba(20, 32, 58, .5), inset 0 1px 0 rgba(255, 255, 255, .15); }
.p-support-thanks .ty-slot::after { content: ""; position: absolute; left: 24px; right: 24px; top: 9px; height: 4px; border-radius: 4px; background: #0d1629; }

.p-support-thanks .ty-receipt { --zig: 12px; position: relative; width: min(calc(100% - 28px), 460px); margin: -11px auto 0; padding: 40px clamp(22px, 5vw, 44px) calc(34px + var(--zig)); text-align: center;
  background: linear-gradient(180deg, rgba(60, 40, 10, .1), transparent 18px), var(--paper);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--zig) * 2) var(--zig) repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--zig)) no-repeat;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(var(--zig) * 2) var(--zig) repeat-x, linear-gradient(#000 0 0) top / 100% calc(100% - var(--zig)) no-repeat; }
.p-support-thanks .ty-band .container { filter: drop-shadow(0 22px 22px rgba(60, 40, 10, .2)); }
.p-support-thanks .ty-mark { display: block; width: 44px; height: 44px; margin: 0 auto 16px; border-radius: 10px; }
.p-support-thanks .ty-receipt h2 { margin: 0 0 14px; padding-bottom: 16px; border-bottom: 2px dashed rgba(58, 71, 96, .25); font-size: clamp(26px, 3vw, 34px); line-height: 1.15; }
.p-support-thanks .ty-receipt p { margin: 0 auto; max-width: 24em; font-size: 18px; line-height: 1.65; color: var(--text); }
.p-support-thanks .ty-actions { margin-top: 26px; padding-top: 22px; border-top: 2px dashed rgba(58, 71, 96, .25); display: flex; justify-content: center; }
.p-support-thanks .ty-actions .btn { min-height: 52px; padding-inline: 26px; font-size: 17px; }
.p-support-thanks .ty-heart { position: absolute; top: 26px; right: 20px; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; rotate: 12deg; color: var(--brick-ink);
  border: 3px double var(--brick-ink); background: rgba(244, 220, 205, .55); }
.p-support-thanks .ty-heart svg { width: 28px; height: 28px; fill: currentColor; }
@media (max-width: 420px) { .p-support-thanks .ty-heart { width: 50px; height: 50px; top: 18px; right: 12px; } .p-support-thanks .ty-receipt { padding-top: 76px; } }

/* ---------- meaningful movement ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* the receipt feeds out of the slot line by line, then the heart seal is pressed on it */
  @keyframes ty-print { 0% { transform: translateY(-70%); clip-path: inset(70% 0 0 0); } 100% { transform: none; clip-path: inset(0 0 0 0); } }
  @keyframes ty-press { 0% { opacity: 0; transform: scale(1.9) rotate(-20deg); } 60% { opacity: 1; transform: scale(.92); } 100% { opacity: 1; transform: none; } }
  .p-support-thanks .ty-receipt { animation: ty-print 1.3s .25s steps(14, end) both; }
  .p-support-thanks .ty-heart { animation: ty-press .5s 1.7s var(--spring) both; }
}
@media print { .p-support-thanks .ty-slot { display: none; } .p-support-thanks .ty-receipt { -webkit-mask: none; mask: none; border: 1px solid #ccc; } }