@import url("/zz/fonts.css");
/*
 * The sponsor page (/sponsor/: components/sponsor/SponsorView.tsx + SponsorForm.tsx + SponsorFaq.tsx). The banner comes
 * from public/zz/cause.css, the children from public/zz/orphans.css; the questions are styled here as the site's FAQs. The card is the donate page's gift card
 * (public/zz/give-card.css + give-inline.css): the form on the left, a side picture on the right; serif title, navy
 * Monthly / Pay ahead switch, raised tiles, soft fields, the fee as a toggle card and a gradient button.
 * Site colours: the logo's blue #006DB8 (buttons and chosen options in its gradient), green #8BC34A; Source Serif 4 titles, Poppins labels and buttons, Roboto text.
 */
.zzs {
  --b: #006db8; --b-d: #005592; --navy: #006db8; --ink: #101828; --t: #344054; --m: #667085; --line: #e4e7ec; --soft: #f5f7fa; --g: #8bc34a;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  display: block; padding: 0 24px 88px; background: linear-gradient(180deg, #f3f8fd 0, #fff 640px); font-family: "Roboto", system-ui, sans-serif; color: var(--t);
}
.zzs, .zzs *, .zzs *::before, .zzs *::after { box-sizing: border-box; }
.zzs a { text-decoration: none !important; }
.zzs__wrap { max-width: 1200px; margin: 0 auto; }
.zzs-hero { min-height: 420px; padding-bottom: 140px; }
.zzs-hero .zzc-hero__inner > * { max-width: 600px; }
/* the card overlaps the banner's bottom here, so the illustration stays pinned to the top */
.zzs-hero .zzc-hero__art { top: 0; bottom: auto; max-height: 320px; }
.zzs-hero .zzc-crumbs { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin: 0 auto 18px !important; font: 400 14.5px/1.4 "Roboto", sans-serif; color: rgb(255 255 255 / 0.7); }
.zzs-hero .zzc-crumbs a { color: rgb(255 255 255 / 0.85) !important; transition: color 0.2s ease; }
.zzs-hero .zzc-crumbs a:hover, .zzs-hero .zzc-crumbs a:focus-visible { color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px; }
.zzs-hero .zzc-crumbs [aria-current] { color: #fff; font-weight: 500; }

/* ---------- the card ---------- */
.zzs-card {
  position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); margin-top: -96px; overflow: hidden; scroll-margin-top: 110px;
  border-radius: 32px; background: #fff;
  box-shadow: 0 0 0 1px rgb(0 85 146 / 0.06), 0 1px 2px rgb(0 85 146 / 0.06), 0 4px 8px -2px rgb(0 85 146 / 0.06), 0 24px 48px -12px rgb(0 85 146 / 0.18), 0 48px 96px -24px rgb(0 109 184 / 0.14);
}
.zzs-aside { position: relative; display: flex; flex-direction: column; min-height: 100%; overflow: hidden; background: #f6f3ec; }
/* the picture fills the space under the text in full colour, fading softly into the panel at its top edge */
.zzs-aside__pic { position: relative; flex: 1 1 auto; min-height: 320px; margin-top: 32px; }
.zzs-aside__pic img {
  position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center top;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22%); mask-image: linear-gradient(180deg, transparent 0, #000 22%);
}
.zzs-aside__text { padding: 64px 12% 0 14%; }
.zzs .zzs-aside__title { margin: 0 !important; font: 700 36px/1.1 var(--serif) !important; letter-spacing: -0.02em; color: #0b1b36 !important; text-wrap: balance; }
.zzs .zzs-aside__lead { max-width: 320px; margin: 14px 0 0 !important; font: 400 16.5px/1.55 "Roboto", sans-serif !important; color: #5b6576 !important; text-wrap: pretty; }
.zzs .zzs-aside__list { display: grid; gap: 10px; margin: 24px 0 0 !important; padding: 0 !important; list-style: none !important; }
.zzs .zzs-aside__list li { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; font: 500 15px/1.4 "Roboto", sans-serif; color: var(--ink); }
.zzs .zzs-aside__list li::before { display: none !important; }
.zzs-aside__list svg { flex: none; padding: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--g); color: #fff; }

/* ---------- the form ---------- */
.zzs-f { display: flex; flex-direction: column; gap: 0; min-width: 0; margin: 0 !important; padding: 52px 52px 40px; }
.zzs-f__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.zzs .zzs-f__title { margin: 0 !important; font: 700 42px/1.06 var(--serif) !important; letter-spacing: -0.02em; color: #0b1b36 !important; text-transform: none !important; }
.zzs .zzs-f__sub { margin: 10px 0 0 !important; font: 400 17px/1.45 "Roboto", sans-serif !important; color: #5d6b7e !important; }
.zzs-seg { display: inline-flex; flex-shrink: 0; margin-top: 4px; padding: 5px; border-radius: 999px; background: #f2f4f7; box-shadow: inset 0 0 0 1px #e6e9ee; }
.zzs .zzs-seg button, .zzs .zzs-tiles button, .zzs .zzs-chips button, .zzs .zzs-group, .zzs .zzs-child__x, .zzs .zzs-terms__toggle, .zzs .zzs-submit {
  margin: 0 !important; letter-spacing: 0 !important; text-transform: none !important; cursor: pointer;
}
.zzs .zzs-seg button {
  padding: 12px 24px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: #475467 !important;
  font: 500 15px/1 "Poppins", sans-serif !important; box-shadow: none !important; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.zzs .zzs-seg button:hover { color: var(--ink) !important; }
.zzs .zzs-seg button.is-on { background: linear-gradient(135deg, #0b7ac4 0%, #006db8 50%, #005592 100%) !important; color: #fff !important; box-shadow: 0 8px 16px -8px rgb(0 85 146 / 0.6) !important; }

.zzs-f__group { min-width: 0; margin: 0 0 26px !important; padding: 0 !important; border: 0 !important; }
.zzs .zzs-f__label { display: block; margin: 0 0 12px !important; padding: 0 !important; font: 500 15px/1.3 "Poppins", sans-serif !important; color: var(--ink) !important; }

/* number of children */
.zzs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 12px; }
.zzs .zzs-tiles button {
  display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 82px !important; padding: 0 8px !important;
  border: 1px solid var(--line) !important; border-radius: 14px !important; background: #fff !important; color: var(--ink) !important;
  box-shadow: 0 1px 2px rgb(16 24 40 / 0.05), 0 4px 10px -4px rgb(16 24 40 / 0.08) !important;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}
.zzs-tiles strong { font: 600 24px/1 "Poppins", sans-serif; }
.zzs-tiles span { font: 400 13px/1 "Roboto", sans-serif; color: var(--m); }
.zzs .zzs-tiles button:hover { border-color: #b9cce3 !important; color: #006db8 !important; transform: translateY(-1px); }
.zzs .zzs-tiles button.is-on {
  border-color: transparent !important; background: linear-gradient(135deg, #0b7ac4 0%, #006db8 50%, #005592 100%) !important; color: #fff !important;
  box-shadow: 0 14px 26px -14px rgb(0 85 146 / 0.75), inset 0 1px 0 rgb(255 255 255 / 0.14) !important;
}
.zzs-tiles button.is-on span { color: rgb(255 255 255 / 0.8); }
.zzs .zzs-group {
  display: flex !important; align-items: center; gap: 12px; width: 100% !important; height: auto !important; margin-top: 12px !important; padding: 14px 18px !important;
  border: 1px dashed #cdd5df !important; border-radius: 14px !important; background: #fafbfc !important; color: var(--t) !important; text-align: left !important;
  font: 400 14.5px/1.45 "Roboto", sans-serif !important; box-shadow: none !important; white-space: normal !important; transition: border-color 0.15s ease, background 0.15s ease;
}
.zzs .zzs-group strong { font-weight: 600; color: var(--navy); }
.zzs .zzs-group:hover { border-color: #9fb6d1 !important; }
.zzs .zzs-group.is-on { border-style: solid !important; border-color: var(--b) !important; background: #f2f8fe !important; }
.zzs-group__dot { flex: none; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #98a2b3; transition: box-shadow 0.15s ease; }
.zzs-group.is-on .zzs-group__dot { box-shadow: inset 0 0 0 5px var(--b); }

/* months */
.zzs-chips { display: flex; flex-wrap: wrap; gap: 10px; }
/* Pay with: PayPal or card (Stripe), as on the donation forms */
.zzs .zzs-field[hidden] { display: none !important; } /* the card field while PayPal is chosen */
.zzs .zzs-pay__label { display: block; margin: 0 0 8px; font: 500 14px/1.2 "Roboto", sans-serif; color: var(--ink); }
.zzs-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zzs .zzs-pay button {
  margin: 0 !important; height: 50px !important; padding: 0 16px !important; border: 1px solid var(--line) !important; border-radius: 14px !important; background: #fff !important; color: var(--ink) !important;
  display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; font: 600 15px/1 "Poppins", sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; box-shadow: none !important; cursor: pointer;
}
.zzs .zzs-pay button:hover { border-color: #b9cce3 !important; }
.zzs .zzs-pay button.is-on { border-color: var(--navy) !important; background: #f0f7fd !important; box-shadow: 0 0 0 1px var(--navy) inset !important; }
.zzs .zzs-pay button svg { flex-shrink: 0; }
.zzs-paypal { display: grid; gap: 10px; min-height: 60px; margin-top: 6px; }
.zzs .zzs-paypal__total { margin: 0 !important; text-align: center; font: 400 15px/1.4 "Roboto", sans-serif !important; color: var(--m) !important; }
.zzs .zzs-paypal__total strong { color: var(--ink); font-weight: 600; }
.zzs .zzs-chips button {
  height: 46px !important; padding: 0 20px !important; border: 1px solid var(--line) !important; border-radius: 999px !important; background: #fff !important; color: var(--ink) !important;
  font: 500 15px/1 "Poppins", sans-serif !important; box-shadow: none !important; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.zzs .zzs-chips button:hover { border-color: #b9cce3 !important; }
.zzs .zzs-chips button.is-on { border-color: var(--navy) !important; background: var(--navy) !important; color: #fff !important; }

/* the child the sponsor started from */
.zzs-child { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; padding: 12px 12px 12px 12px; border-radius: 16px; background: #f4f9ec; box-shadow: inset 0 0 0 1px #dfe9d2; }
.zzs-child img, .zzs-child__ph { flex: none; width: 56px !important; height: 56px !important; border-radius: 12px; object-fit: cover; }
.zzs-child__ph { display: grid; place-items: center; background: linear-gradient(135deg, #e8f1fa, #f4f8ec); font: 700 26px/1 var(--serif); color: rgb(0 85 146 / 0.4); }
.zzs .zzs-child p { flex: 1; min-width: 0; margin: 0 !important; display: flex; flex-direction: column; gap: 3px; }
.zzs-child p strong { font: 600 16px/1.3 "Poppins", sans-serif; color: var(--navy); }
.zzs-child p span { font: 400 14px/1.3 "Roboto", sans-serif; color: var(--m); }
.zzs .zzs-child__x {
  display: grid !important; place-items: center; width: 36px !important; height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important;
  background: transparent !important; color: var(--m) !important; box-shadow: none !important;
}
.zzs .zzs-child__x:hover { background: rgb(16 24 40 / 0.06) !important; color: var(--ink) !important; }
.zzs .zzs-f__note { margin: 0 0 22px !important; font: 400 13.5px/1.5 "Roboto", sans-serif !important; color: var(--m) !important; }

/* summary */
.zzs-sum { margin: 4px 0 22px; padding: 18px 20px; border-radius: 16px; background: var(--soft); box-shadow: inset 0 0 0 1px #edf0f3; }
.zzs .zzs-sum__row { display: flex; justify-content: space-between; gap: 16px; margin: 0 0 6px !important; font: 400 15px/1.45 "Roboto", sans-serif; color: var(--t); }
.zzs .zzs-sum__total { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 10px 0 0 !important; padding-top: 12px; border-top: 1px solid #e2e6ec; font: 500 15px/1.3 "Poppins", sans-serif; color: var(--ink); }
.zzs-sum__total strong { font: 600 26px/1 "Poppins", sans-serif; letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums; }
.zzs .zzs-sum__note { margin: 10px 0 0 !important; font: 400 13.5px/1.5 "Roboto", sans-serif !important; color: var(--m) !important; }
.zzs-sum__row:first-child + .zzs-sum__total, .zzs-sum > .zzs-sum__note:only-child { margin-top: 0 !important; }

/* fee toggle card */
.zzs-fee {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; margin: 0 0 26px; padding: 18px 20px; cursor: pointer;
  border: 1px solid #edf0f3; border-radius: 16px; background: #fafbfc; transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.zzs-fee:has(input:checked) { border-color: #a6d36b; background: #f7fbf1; box-shadow: 0 0 0 3px rgb(139 197 63 / 0.15); }
.zzs-fee__text { font: 500 15px/1.4 "Roboto", sans-serif; color: var(--ink); }
.zzs .zzs-fee input {
  -webkit-appearance: none; appearance: none; position: relative; width: 50px !important; height: 30px !important; margin: 0 !important; border: 0 !important;
  border-radius: 999px !important; background: #d9dee5 !important; cursor: pointer; transition: background 0.2s ease;
}
.zzs .zzs-fee input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(16 24 40 / 0.25); transition: transform 0.2s ease; }
.zzs .zzs-fee input:checked { background: var(--g) !important; }
.zzs .zzs-fee input:checked::after { transform: translateX(20px); }
.zzs .zzs-fee input:focus-visible { outline: 3px solid rgb(0 109 184 / 0.25); outline-offset: 2px; }

/* fields */
.zzs-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.zzs-field { display: flex; flex-direction: column; margin-bottom: 14px; }
.zzs .zzs-field label { margin: 0 0 7px !important; font: 500 14px/1.3 "Roboto", sans-serif !important; color: #475467 !important; text-transform: none !important; }
.zzs .zzs-field input, .zzs-card-box {
  width: 100% !important; height: 56px !important; margin: 0 !important; padding: 0 18px !important; border: 1px solid var(--line) !important; border-radius: 14px !important;
  background: var(--soft) !important; color: var(--ink) !important; font: 400 16px/1 "Roboto", sans-serif !important; box-shadow: none !important; outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.zzs .zzs-field input::placeholder { color: #98a2b3; opacity: 1; }
.zzs .zzs-field input:focus, .zzs-card-box.StripeElement--focus { border-color: #006db8 !important; background: #fff !important; box-shadow: 0 0 0 4px rgb(0 109 184 / 0.12) !important; }
.zzs .zzs-field input[aria-invalid="true"], .zzs-card-box.is-invalid { border-color: #f04438 !important; }
.zzs-card-box { display: flex; flex-direction: column; justify-content: center; }
.zzs-card-box > * { width: 100%; }
.zzs-card-box.is-loading { background: linear-gradient(90deg, var(--soft) 0%, #eef1f5 50%, var(--soft) 100%) !important; background-size: 200% 100% !important; animation: zzs-shimmer 1.2s linear infinite; }
@keyframes zzs-shimmer { to { background-position: -200% 0; } }
.zzs .zzs-field__error { margin: 6px 0 0 !important; font: 400 13.5px/1.4 "Roboto", sans-serif; color: #d92d20; }
.zzs-field--count { max-width: 260px; margin-top: 14px; }
.zzs-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

/* terms */
.zzs-terms { margin: 0 0 20px; font: 400 14.5px/1.5 "Roboto", sans-serif; color: var(--t); }
.zzs-terms label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.zzs .zzs-terms input { width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: var(--navy); }
.zzs .zzs-terms__toggle { margin-left: 12px !important; padding: 0 !important; border: 0 !important; background: none !important; color: var(--b) !important; font: 500 14px/1 "Roboto", sans-serif !important; box-shadow: none !important; text-decoration: underline; text-underline-offset: 3px; }
.zzs-terms__text { max-height: 220px; margin-top: 10px; padding: 14px 16px; overflow-y: auto; border-radius: 12px; background: var(--soft); font-size: 13.5px; color: var(--m); }
.zzs .zzs-terms__text p { margin: 0 0 10px !important; }

/* error, button, trust line */
.zzs-error { margin: 0 0 16px; padding: 14px 16px; border-radius: 12px; background: #fef3f2; box-shadow: inset 0 0 0 1px #fecdca; font: 500 14.5px/1.45 "Roboto", sans-serif; color: #b42318; }
.zzs .zzs-submit {
  display: flex !important; align-items: center; justify-content: center; gap: 12px; width: 100% !important; height: auto !important; min-height: 68px; padding: 14px 24px !important;
  line-height: 1.25 !important; text-align: center; text-wrap: balance;
  border: 0 !important; border-radius: 999px !important; background: linear-gradient(135deg, #0b7ac4 0%, #006db8 50%, #005592 100%) !important; color: #fff !important;
  font-family: "Poppins", sans-serif !important; font-size: 19px !important; font-weight: 600 !important; box-shadow: 0 18px 32px -16px rgb(0 85 146 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.14) !important;
  transition: box-shadow 0.2s ease, transform 0.2s ease, filter 0.2s ease !important;
}
.zzs .zzs-submit svg { flex: none; transition: transform 0.2s ease; }
.zzs-submit__text { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 8px; }
.zzs-submit__price { display: inline-flex; align-items: baseline; gap: 8px; }
.zzs .zzs-submit:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.zzs .zzs-submit:hover:not(:disabled) svg { transform: translateX(4px); }
.zzs .zzs-submit:disabled { cursor: not-allowed; filter: grayscale(0.4) brightness(1.1); opacity: 0.75; }
.zzs .zzs-submit:focus-visible { outline: 3px solid rgb(0 109 184 / 0.35) !important; outline-offset: 3px; }
.zzs .zzs-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 18px 0 0 !important; font: 400 14px/1.4 "Roboto", sans-serif; color: var(--m); }
.zzs-foot span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.zzs-foot span + span::before { content: ""; width: 1px; height: 14px; margin: 0 16px; background: #d0d5dd; }

/* closed */
.zzs-closed { position: relative; z-index: 1; max-width: 680px; margin: -96px auto 0; padding: 48px 40px; border-radius: 28px; background: #fff; text-align: center; box-shadow: 0 24px 48px -12px rgb(0 85 146 / 0.18); }
.zzs .zzs-closed p { margin: 0 0 22px !important; font-size: 16.5px; line-height: 1.6; color: var(--m); }
.zzs .zzs-closed .zzs-closed__title { margin-bottom: 10px !important; font: 700 32px/1.15 var(--serif); color: #0b1b36; }
.zzs-closed__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; }
.zzs-closed__actions .zzc-btn { width: auto; }
.zzs .zzs-closed__link { font: 500 15px/1 "Poppins", sans-serif; color: var(--navy) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* the children under the card */
.zzs-children .zzo { border-top: 0; }

/* ---------- questions, as the site's FAQs (Home, About Us) ---------- */
.zzs-faqs { --b: #006db8; display: block; padding: 88px 24px 96px; background: #fff; font-family: "Roboto", system-ui, sans-serif; color: #151515; }
.zzs-faqs, .zzs-faqs *, .zzs-faqs *::before, .zzs-faqs *::after { box-sizing: border-box; }
.zzs-faqs__wrap { max-width: 880px; margin: 0 auto; }
.zzs-faqs .zzs-faqs__eyebrow { margin: 0 0 14px !important; text-align: center; font: 400 20px/1.3 "Roboto", sans-serif !important; color: #151515 !important; }
.zzs-faqs .zzs-faqs__title { margin: 0 0 40px !important; text-align: center; font: 600 42px/1.2 "Roboto Condensed", "Roboto", sans-serif !important; letter-spacing: 0; color: #151515 !important; text-transform: none !important; text-wrap: balance; }

.zzs-faqs .zzs-faqs__more { margin: 32px 0 0 !important; text-align: center; font: 400 16px/1.6 "Roboto", sans-serif !important; color: #667085 !important; }
.zzs-faqs__more a { color: var(--b) !important; text-decoration: underline !important; text-underline-offset: 3px; }
@media (max-width: 767px) {
  .zzs-faqs { padding: 56px 16px 64px; }
  .zzs-faqs .zzs-faqs__eyebrow { font-size: 18px !important; }
  .zzs-faqs .zzs-faqs__title { margin-bottom: 28px !important; font-size: 32px !important; }
  
  
  
}
@media (prefers-reduced-motion: reduce) { .zzs-faqs * { transition: none !important; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .zzs-f { padding: 44px 36px 36px; }
  .zzs .zzs-f__title { font-size: 36px !important; }
  .zzs-aside__text { padding: 52px 10% 0 12%; }
  .zzs .zzs-aside__title { font-size: 30px !important; }
}
@media (max-width: 999px) {
  .zzs-hero { min-height: 0; padding-bottom: 120px; }
  .zzs-card { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin-left: auto; margin-right: auto; }
  .zzs-aside { display: none; }
}
@media (max-width: 600px) {
  .zzs { padding: 0 12px 64px; }
  .zzs-hero { padding-bottom: 104px; }
  .zzs-card { margin-top: -80px; border-radius: 24px; }
  .zzs-f { padding: 28px 20px 24px; }
  .zzs-f__head { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 24px; }
  .zzs .zzs-f__title { font-size: 30px !important; }
  .zzs .zzs-f__sub { font-size: 15.5px !important; }
  .zzs-seg { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; }
  .zzs-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .zzs .zzs-tiles button { height: 72px !important; }
  .zzs-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .zzs .zzs-submit { min-height: 62px; font-size: 16.5px !important; }
  /* the price on its own line on phones, without the separator */
  .zzs-submit__text { flex-direction: column; align-items: center; row-gap: 2px; }
  .zzs-submit__dot { display: none; }
  .zzs-submit__price { font-size: 15px; font-weight: 500; opacity: 0.92; }
  .zzs .zzs-foot { flex-direction: column; align-items: center; gap: 2px; font-size: 13px; }
  .zzs-foot span + span::before { display: none; }
  .zzs-closed { margin-top: -80px; padding: 32px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .zzs * { transition: none !important; animation: none !important; }
}

/* ---------- the sponsorship pop-up (components/sponsor/SponsorModal.tsx): the child on the left, the form on the right ---------- */
html.zzm-lock { overflow: hidden; }
dialog.zzm {
  width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 28px;
  background: #fff; color: #344054; overflow: hidden; box-shadow: 0 40px 100px -20px rgb(0 20 50 / 0.45);
}
dialog.zzm::backdrop { background: rgb(6 18 40 / 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
dialog.zzm[open] { animation: zzm-in 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes zzm-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }
.zzm *, .zzm *::before, .zzm *::after { box-sizing: border-box; }
.zzm__panel { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); height: min(860px, calc(100dvh - 32px)); }
.zzm .zzm__close {
  position: absolute; z-index: 3; top: 14px; right: 14px; display: grid !important; place-items: center; width: 42px !important; height: 42px !important;
  margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #f2f4f7 !important; color: #344054 !important;
  box-shadow: none !important; cursor: pointer; transition: background 0.2s ease;
}
.zzm .zzm__close:hover { background: #e4e7ec !important; }
.zzm .zzm__close:focus-visible { outline: 3px solid rgb(0 109 184 / 0.35); outline-offset: 2px; }
.zzm__child { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; background: #f3f8fd; }
/* the picture takes whatever height the text leaves, so the column never ends in an empty block */
.zzm__photo { position: relative; flex: 1 1 auto; min-height: 300px; overflow: hidden; background: linear-gradient(135deg, #e8f1fa, #f4f8ec); }
.zzm__photo img { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; object-position: center 30%; }
.zzm__photo::after { content: ""; position: absolute; inset: auto 0 0 0; height: 28%; background: linear-gradient(0deg, rgb(0 20 50 / 0.22), rgb(0 20 50 / 0)); pointer-events: none; }
.zzm__ph { position: absolute; inset: 0; display: grid; place-items: center; width: 100%; height: 100%; font: 700 120px/1 "Source Serif 4", Georgia, serif; color: rgb(0 85 146 / 0.22); }
.zzm__chip {
  position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 999px;
  background: rgb(255 255 255 / 0.94); box-shadow: 0 4px 14px -4px rgb(16 24 40 / 0.3); font: 500 12.5px/1 "Poppins", sans-serif; color: #006db8;
}
.zzm__info { flex: none; padding: 26px 32px 30px; }
.zzm .zzm__name { margin: 0 !important; font: 700 34px/1.1 "Source Serif 4", Georgia, serif; letter-spacing: -0.02em; color: #0b1b36; }
.zzm .zzm__meta { margin: 6px 0 0 !important; font: 400 15.5px/1.4 "Roboto", sans-serif; color: #667085; }
.zzm .zzm__price { margin: 18px 0 0 !important; font: 400 16px/1.5 "Roboto", sans-serif; color: #344054; }
.zzm__price strong { font: 600 18px/1 "Poppins", sans-serif; color: #006db8; }
.zzm .zzm__list { display: grid; gap: 9px; margin: 16px 0 0 !important; padding: 0 !important; list-style: none !important; }
.zzm .zzm__list li { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 0 !important; list-style: none !important; font: 500 14.5px/1.4 "Roboto", sans-serif; color: #101828; }
.zzm .zzm__list li::before { display: none !important; }
.zzm__list svg { flex: none; padding: 3px; width: 22px; height: 22px; border-radius: 50%; background: #8bc34a; color: #fff; }
.zzm .zzm__note, .zzm .zzm__safe { margin: 16px 0 0 !important; font: 400 13.5px/1.5 "Roboto", sans-serif; color: #667085; }
.zzm .zzm__safe { margin-top: 8px !important; }
.zzm__pay.zzs { min-height: 0; overflow-y: auto; padding: 0; background: #fff; }
.zzm .zzs-f { padding: 44px 44px 32px; }
.zzm .zzs .zzs-f__title { padding-right: 40px; font-size: 32px !important; }
.zzm .zzs-f__head { flex-direction: column; align-items: stretch; gap: 14px; margin-bottom: 24px; }
.zzm .zzs-seg { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; }
@media (max-width: 860px) {
  dialog.zzm { width: 100vw; height: 100dvh; max-height: none; border-radius: 0; }
  .zzm__panel { display: block; height: 100dvh; overflow-y: auto; }
  .zzm__child { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 0 16px; padding: 64px 20px 4px; overflow: visible; background: #fff; }
  .zzm__photo { width: 112px; min-height: 0; aspect-ratio: 1 / 1; border-radius: 18px; }
  .zzm__photo::after { display: none; }
  .zzm__ph { font-size: 56px; }
  .zzm__chip { display: none; }
  .zzm__info { padding: 0; align-self: center; }
  .zzm .zzm__name { font-size: 26px; }
  .zzm .zzm__price { margin-top: 8px !important; font-size: 14.5px; }
  .zzm .zzm__list, .zzm .zzm__safe { display: none; }
  .zzm .zzm__note { grid-column: 1 / -1; margin-top: 12px !important; }
  .zzm__pay.zzs { overflow: visible; }
  .zzm .zzs-f { padding: 20px 20px 28px; }
  .zzm .zzs .zzs-f__title { font-size: 26px !important; }
}
@media (prefers-reduced-motion: reduce) { dialog.zzm[open] { animation: none; } }