/* PMC — prototype styles.
   Sizes are written in design points ("u"): the Illustrator page is 989.44 pt wide and the
   whole layout scales with the window. build-css.mjs turns every `Nu` into
   calc(N * var(--u)) and writes site/styles.css. Edit this file, then run: node build-css.mjs */

@font-face { font-family: "AG";  font-weight: 400; src: url(assets/fonts/AmericanGrotesk-NormalRegular.otf) format("opentype"); font-display: block; }
@font-face { font-family: "AG";  font-weight: 500; src: url(assets/fonts/AmericanGrotesk-NormalMedium.otf) format("opentype"); font-display: block; }
@font-face { font-family: "AG";  font-weight: 700; src: url(assets/fonts/AmericanGrotesk-NormalBold.otf) format("opentype"); font-display: block; }
@font-face { font-family: "AG";  font-weight: 900; src: url(assets/fonts/AmericanGrotesk-NormalBlack.otf) format("opentype"); font-display: block; }
@font-face { font-family: "AGC"; font-weight: 700; src: url(assets/fonts/AmericanGrotesk-CondensedBold.otf) format("opentype"); font-display: block; }
@font-face { font-family: "AGC"; font-weight: 900; src: url(assets/fonts/AmericanGrotesk-CondensedBlack.otf) format("opentype"); font-display: block; }
@font-face { font-family: "MP";  font-weight: 400; src: url(assets/fonts/MartinaPlantijn-Regular.otf) format("opentype"); font-display: block; }
@font-face { font-family: "MP";  font-weight: 500; src: url(assets/fonts/MartinaPlantijn-Medium.otf) format("opentype"); font-display: block; }
@font-face { font-family: "MP";  font-weight: 700; src: url(assets/fonts/MartinaPlantijn-Bold.otf) format("opentype"); font-display: block; }

:root {
  --u: calc(100vw / 989.44);
  --dark: #0b3535;
  --turq: #2ad4d4;
  --agua: #7fe5e5;
  --hielo: #d4f6f6;
  --loader: #1ecbcd;
  --ease: cubic-bezier(.22, .8, .24, 1);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* No scrollbar: the layout is measured against the full window width, and it is a presentation piece. */
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: calc(58 * var(--u)); background: #fff; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body { color: var(--dark); font-family: "AG", sans-serif; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body.is-loading { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video, svg, canvas { display: block; }
ul { list-style: none; }
address { font-style: normal; }
::selection { background: var(--turq); color: var(--dark); }

.h36 { font: 700 calc(36 * var(--u))/1.2222 "AGC", sans-serif; text-align: center; position: absolute; left: 0; right: 0; }

/* A link that goes Black on hover without changing width: the Black version reserves the space. */
[data-text] { display: inline-grid; }
[data-text]::after { content: attr(data-text); font-weight: 900; visibility: hidden; height: 0; overflow: hidden; grid-area: 1 / 1; }
[data-text] > span { grid-area: 1 / 1; }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--loader); }
.loader video { width: 100%; height: 100%; object-fit: cover; }

/* ---------- menu ---------- */
.nav { position: fixed; top: 0; left: 0; width: 100%; height: calc(58 * var(--u)); background: #fff; z-index: 50; }
.nav__logo { position: absolute; left: calc(32.2 * var(--u)); top: calc(13.8 * var(--u)); width: calc(51.64 * var(--u)); height: calc(32.13 * var(--u)); color: var(--dark); }
.nav__logo svg { width: 100%; height: 100%; fill: currentColor; }
.nav__menu { position: absolute; right: calc(31.4 * var(--u)); top: 0; height: calc(59.6 * var(--u)); display: flex; align-items: center; gap: calc(16.4 * var(--u)); }
.nav__item { font: 500 calc(13 * var(--u))/1.27 "AG", sans-serif; color: var(--dark); transition: color .18s; }
.nav__item:hover { color: var(--turq); }
.nav__item:hover > span { font-weight: 900; }
.nav__search { width: calc(15 * var(--u)); height: calc(15 * var(--u)); margin: 0 calc(2.5 * var(--u)) 0 calc(1.5 * var(--u)); }
.nav__search svg { width: 100%; height: 100%; fill: none; stroke: var(--dark); stroke-width: 1.5; stroke-linecap: round; transition: stroke .18s; }
.nav__search:hover svg { stroke: var(--turq); }
.nav__donate { font: 700 calc(13 * var(--u))/1 "AG", sans-serif; height: calc(19.2 * var(--u)); padding: 0 calc(6.3 * var(--u)); display: flex; align-items: center; border-radius: calc(3 * var(--u)); background: var(--agua); color: var(--dark); transition: background .18s, color .18s; }
.nav__donate:hover { background: var(--dark); color: var(--agua); }

/* ---------- hero ---------- */
.hero { position: relative; height: calc(556.56 * var(--u)); overflow: hidden; background: #fff; }
.hero__slide { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .55s ease; }
.hero__slide.is-active { opacity: 1; pointer-events: auto; }
.hero__type { position: absolute; left: 0; top: calc(-17 * var(--u)); width: 100%; height: auto; aspect-ratio: 16 / 9; }
.hero__photo { position: absolute; left: calc(341 * var(--u)); top: calc(76.5 * var(--u)); width: calc(307.5 * var(--u)); height: calc(367.7 * var(--u)); object-fit: cover; border-radius: calc(6 * var(--u)); }
.hero__cta { position: absolute; left: 0; right: 0; top: calc(468.6 * var(--u)); text-align: center; font: 700 calc(20 * var(--u))/1.22 "AGC", sans-serif; color: var(--c); }
.hero__cta--22 { font-size: calc(22 * var(--u)); top: calc(466.2 * var(--u)); }
.hero__dots { position: absolute; left: 50%; top: calc(518 * var(--u)); transform: translateX(-50%); display: flex; gap: calc(2.9 * var(--u)); z-index: 3; }
.hero__dots button { position: relative; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #d8dddd; transition: background .25s; }
.hero__dots button::before { content: ""; position: absolute; inset: calc(-6 * var(--u)) calc(-1.4 * var(--u)); }
.hero__dots button.is-active { background: var(--dark); }

/* ---------- mission + reel ---------- */
.mission { position: relative; height: calc(843.44 * var(--u)); }
.mission__text { position: absolute; left: 0; right: 0; top: calc(50.1 * var(--u)); text-align: center; font: 700 calc(36 * var(--u))/calc(42 * var(--u)) "AGC", sans-serif; }
.reel { position: absolute; left: calc(32 * var(--u)); top: calc(292.94 * var(--u)); width: calc(926 * var(--u)); height: calc(521.4 * var(--u)); border-radius: calc(10 * var(--u)); overflow: hidden; background: #0b1414; }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.player { position: absolute; left: calc(8.5 * var(--u)); right: calc(8.5 * var(--u)); bottom: calc(8.5 * var(--u)); height: calc(21.4 * var(--u)); display: flex; gap: calc(4.3 * var(--u)); opacity: 0; transition: opacity .25s; }
.reel:hover .player, .reel.is-paused .player, .reel:focus-within .player { opacity: 1; }
.player__play { width: calc(34.3 * var(--u)); height: 100%; border-radius: calc(1.8 * var(--u)); background: #17110f; display: grid; place-items: center; }
.player__play svg { width: calc(10.5 * var(--u)); height: calc(10.5 * var(--u)); fill: #fff; grid-area: 1 / 1; }
.player__play .i-pause { display: none; }
.reel.is-playing .player__play .i-play { display: none; }
.reel.is-playing .player__play .i-pause { display: block; }
.player__play:hover svg { fill: var(--turq); }
.player__bar { flex: 1; height: 100%; border-radius: calc(1.8 * var(--u)); background: #17110f; display: flex; align-items: center; gap: calc(6.5 * var(--u)); padding: 0 calc(7.5 * var(--u)) 0 calc(8.5 * var(--u)); }
.player__track { position: relative; flex: 1; height: 100%; display: flex; align-items: center; cursor: pointer; margin-right: calc(2 * var(--u)); }
.player__rail { position: relative; width: 100%; height: calc(1.4 * var(--u)); border-radius: calc(1 * var(--u)); background: rgba(255, 255, 255, .32); }
.player__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: calc(1 * var(--u)); background: var(--turq); }
.player__time { position: absolute; bottom: calc(15.4 * var(--u)); left: 0; transform: translateX(-50%); background: #fff; color: #111; font: 700 calc(5.6 * var(--u))/1 "AG", sans-serif; padding: calc(2 * var(--u)) calc(2.6 * var(--u)); border-radius: calc(1.4 * var(--u)); opacity: 0; pointer-events: none; transition: opacity .15s; font-variant-numeric: tabular-nums; }
.player__track:hover .player__time { opacity: 1; }
.player__icon { width: calc(12.5 * var(--u)); height: calc(12.5 * var(--u)); flex: none; }
.player__icon svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: stroke .15s, fill .15s; }
.player__icon svg.solid { fill: #fff; stroke: none; }
.player__icon svg .fillr { fill: #fff; stroke: none; }
.player__icon:hover svg { stroke: var(--turq); }
.player__icon:hover svg.solid, .player__icon:hover svg .fillr { fill: var(--turq); stroke: none; }

/* ---------- our work ---------- */
.work { position: relative; padding-top: calc(151.9 * var(--u)); }
.work__title { top: calc(49.1 * var(--u)); }
.work__sub { position: absolute; left: 0; right: 0; top: calc(97 * var(--u)); text-align: center; font: 700 calc(12 * var(--u))/1.225 "AGC", sans-serif; }
.band { position: relative; height: calc(101 * var(--u)); margin-bottom: calc(-12 * var(--u)); border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0; overflow: hidden; background: var(--bg); color: var(--dark);
  transition: background-color .28s ease, color .28s ease, transform .35s var(--ease), height .6s var(--ease); }
.band--light { --bg: var(--hielo); }
.band--mid { --bg: var(--agua); }
.band:hover, .band.is-open { background: var(--hover-bg); color: var(--hover-fg); }
.band:hover { transform: translateY(calc(-4 * var(--u))); }
.band--open { cursor: pointer; outline: none; }
.band__title { position: absolute; top: calc(6.5 * var(--u)); font: 700 calc(59 * var(--u))/1.2203 "AGC", sans-serif; white-space: nowrap; }
.band__desc { position: absolute; top: calc(63 * var(--u)); transform: translateY(-100%); font: 500 calc(10 * var(--u))/calc(11.3 * var(--u)) "MP", serif; white-space: nowrap; }
.band--left .band__title { left: calc(30.7 * var(--u)); }
.band--left .band__desc { left: calc(716.6 * var(--u)); }
.band--right .band__title { right: calc(49.4 * var(--u)); }
.band--right .band__desc { left: calc(32.5 * var(--u)); }
.band.is-open { height: calc(503.4 * var(--u)); }
.band__more { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.band.is-open .band__more { opacity: 1; visibility: visible; transition: opacity .45s ease .22s, visibility 0s; }
.band__more-title { position: absolute; left: calc(32.5 * var(--u)); top: calc(129.6 * var(--u)); font: 700 calc(29.1 * var(--u))/1.223 "AGC", sans-serif; }
.series { position: absolute; left: calc(32 * var(--u)); top: calc(195.9 * var(--u)); display: flex; gap: calc(14.65 * var(--u)); }
.series img { width: calc(298 * var(--u)); height: calc(219 * var(--u)); object-fit: cover; border-radius: calc(5 * var(--u)); }
.series figcaption { padding-top: calc(9.4 * var(--u)); }
.series b { display: block; font: 700 calc(16 * var(--u))/1.22 "AGC", sans-serif; }
.series span { display: block; margin-top: calc(2.9 * var(--u)); font: 400 calc(14 * var(--u))/1.236 "MP", serif; }

/* ---------- impact + charts ---------- */
.impact { position: relative; z-index: 5; height: calc(942.1 * var(--u)); background: #fff; border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0; }
.impact__title { top: calc(43 * var(--u)); }
.stats { position: absolute; left: calc(101.2 * var(--u)); top: calc(140.9 * var(--u)); width: calc(785.4 * var(--u)); display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.stat__num { font: 700 calc(59 * var(--u))/1.2203 "AGC", sans-serif; font-variant-numeric: tabular-nums; }
.stat__label { margin-top: calc(-5.6 * var(--u)); font: 700 calc(16 * var(--u))/1.22 "AGC", sans-serif; }
.stat p { margin-top: calc(23 * var(--u)); font: 400 calc(12.4 * var(--u))/calc(13.5 * var(--u)) "MP", serif; }
.numbers__title { top: calc(372.7 * var(--u)); line-height: calc(40 * var(--u)); }
.numbers__title em { font-style: normal; color: var(--turq); }
.charts { position: absolute; left: calc(30.7 * var(--u)); top: calc(522 * var(--u)); display: flex; gap: calc(24 * var(--u)); }
.charts video { width: calc(293.2 * var(--u)); height: calc(365.5 * var(--u)); object-fit: cover; border-radius: calc(10 * var(--u)); background: #002e2b; }

/* ---------- partners ---------- */
.partners { position: relative; height: calc(345 * var(--u)); }
.partners__title { top: calc(40.6 * var(--u)); }
.partners__text { position: absolute; left: 0; right: 0; top: calc(92 * var(--u)); text-align: center; font: 400 calc(14 * var(--u))/calc(16 * var(--u)) "MP", serif; }
.logos { position: absolute; left: 0; top: calc(150 * var(--u)); width: 100%; height: calc(110 * var(--u)); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.3) 6%, #000 13%, #000 87%, rgba(0,0,0,.3) 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, rgba(0,0,0,.3) 6%, #000 13%, #000 87%, rgba(0,0,0,.3) 94%, transparent 100%); }
.logos.is-dragging { cursor: grabbing; }
.logos__track { display: flex; align-items: center; height: 100%; width: max-content; will-change: transform; }
.logos__track img { height: calc(var(--h) * var(--u)); width: auto; flex: none; margin-right: calc(44 * var(--u)); pointer-events: none; -webkit-user-drag: none; }

/* ---------- donate ---------- */
.donate { position: relative; height: calc(669 * var(--u)); background: var(--hielo); overflow: hidden; }
.donate__warp { position: absolute; left: 0; top: 0; width: 100%; height: calc(350 * var(--u)); pointer-events: none; }
.donate__title { position: absolute; left: 0; right: 0; top: calc(174.3 * var(--u)); text-align: center; font: 700 calc(26 * var(--u))/1.219 "AGC", sans-serif; }
.donate__sub { position: absolute; left: 0; right: 0; top: calc(214.6 * var(--u)); text-align: center; font: 400 calc(14 * var(--u))/calc(16 * var(--u)) "MP", serif; }
.chips { position: absolute; left: 0; right: 0; top: calc(285 * var(--u)); display: flex; justify-content: center; gap: calc(9 * var(--u)); }
.chips button { height: calc(24.4 * var(--u)); min-width: calc(53.5 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(12.2 * var(--u)); border: calc(2 * var(--u)) solid var(--agua); background: rgba(255, 255, 255, .32); color: var(--dark);
  font: 700 calc(15 * var(--u))/1 "AGC", sans-serif; transition: background-color .2s, color .2s, border-color .2s; }
.chips button:hover { border-color: var(--turq); }
.chips button.is-active { background: var(--dark); border-color: var(--dark); color: var(--turq); }
.amount { position: absolute; left: calc(361.7 * var(--u)); top: calc(331.6 * var(--u)); width: calc(265.6 * var(--u)); height: calc(71.7 * var(--u)); border-radius: calc(7 * var(--u)); background: #fff; cursor: text; overflow: hidden; }
.amount__view { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; font: 700 calc(54 * var(--u))/calc(67 * var(--u)) "AG", sans-serif; white-space: nowrap; }
.amount__view .col { display: inline-block; height: calc(67 * var(--u)); overflow: hidden; }
.amount__view .strip { display: flex; flex-direction: column; will-change: transform; }
.amount__view .strip span { display: flex; justify-content: center; height: calc(67 * var(--u)); }
.amount__view .strip i { font-style: normal; flex: none; }
.amount__caret { display: inline-block; width: calc(2.6 * var(--u)); height: calc(46 * var(--u)); margin-left: calc(3 * var(--u)); border-radius: calc(1 * var(--u)); background: var(--turq); animation: caret 1.06s steps(1) infinite; }
@keyframes caret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
.amount input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; cursor: text; font-size: 16px; }
.donate__equals { position: absolute; left: 0; right: 0; top: calc(422.6 * var(--u)); text-align: center; font: 700 calc(26 * var(--u))/1.219 "AGC", sans-serif; }
.donate__equals b { font-weight: 700; color: var(--turq); font-variant-numeric: tabular-nums; }
.donate__note { position: absolute; left: 0; right: 0; top: calc(462.8 * var(--u)); text-align: center; font: 400 calc(14 * var(--u))/1.236 "MP", serif; }
.donate__note b { font-weight: 700; }
.donate__btn { position: absolute; left: calc(389 * var(--u)); top: calc(523 * var(--u)); width: calc(212 * var(--u)); height: calc(42.7 * var(--u)); border-radius: calc(6 * var(--u)); background: var(--dark); color: var(--agua); font: 900 calc(24 * var(--u))/1 "AGC", sans-serif;
  transition: background-color .2s, color .2s; font-variant-numeric: tabular-nums; }
.donate__btn:hover { background: var(--turq); color: var(--dark); }

/* ---------- newsroom ---------- */
.newsroom { position: relative; height: calc(696 * var(--u)); }
.newsroom__title { position: absolute; left: 0; right: 0; top: calc(65.8 * var(--u)); z-index: 2; text-align: center; font: 700 calc(59 * var(--u))/1.2203 "AGC", sans-serif; }
.newsroom__video { position: absolute; left: 0; top: calc(77 * var(--u)); width: 100%; height: auto; aspect-ratio: 3072 / 1726; mix-blend-mode: multiply; z-index: 1; }
.newsroom__link { position: absolute; left: 50%; top: calc(545.7 * var(--u)); transform: translateX(-50%); z-index: 2; display: flex; align-items: center; font: 700 calc(26 * var(--u))/1.219 "AGC", sans-serif; color: var(--turq); transition: color .2s; white-space: nowrap; }
.newsroom__link svg { width: 0; height: calc(11 * var(--u)); margin-left: 0; opacity: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: translateX(calc(-4 * var(--u)));
  transition: width .3s var(--ease), margin-left .3s var(--ease), opacity .2s, transform .3s var(--ease); }
.newsroom__link:hover { color: var(--dark); }
.newsroom__link:hover svg { width: calc(16 * var(--u)); margin-left: calc(6 * var(--u)); opacity: 1; transform: none; }
.newsroom__sub { position: absolute; left: 0; right: 0; top: calc(584.6 * var(--u)); z-index: 2; text-align: center; font: 400 calc(14 * var(--u))/calc(16 * var(--u)) "MP", serif; }

/* ---------- footer ---------- */
.footer { position: relative; height: calc(231.4 * var(--u)); background: var(--turq); border-radius: calc(12 * var(--u)) calc(12 * var(--u)) 0 0; color: var(--dark); }
.footer__logo { position: absolute; left: calc(30.7 * var(--u)); top: calc(99.4 * var(--u)); width: calc(151.3 * var(--u)); height: calc(94.1 * var(--u)); fill: var(--dark); }
.footer__col { position: absolute; font: 700 calc(13 * var(--u))/calc(14.2 * var(--u)) "AGC", sans-serif; }
.footer__col--1 { left: calc(494.7 * var(--u)); top: calc(42.75 * var(--u)); }
.footer__col--2 { left: calc(649.3 * var(--u)); top: calc(41.35 * var(--u)); line-height: calc(17 * var(--u)); }
.footer__col--3 { left: calc(802.2 * var(--u)); top: calc(42.75 * var(--u)); }
.footer__col a { transition: color .18s; }
.footer__col a:hover { color: var(--hielo); }
.footer__col a:hover > span { font-weight: 900; }
.footer__legal { position: absolute; left: calc(649.3 * var(--u)); top: calc(170.5 * var(--u)); font: 500 calc(10 * var(--u))/1.23 "AG", sans-serif; }
.footer__legal a { transition: color .18s; }
.footer__legal a:hover { color: var(--hielo); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- donation pop-up ---------- */
html.is-modal { overflow: hidden; }
.modal { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(12 * var(--u));
  background: rgba(11, 53, 53, .9); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s .3s; }
.modal.is-open { opacity: 1; visibility: visible; transition: opacity .3s ease, visibility 0s; }
.modal__card { position: relative; width: calc(760 * var(--u)); height: calc(478 * var(--u)); padding: calc(8 * var(--u)); display: grid; grid-template-columns: calc(372 * var(--u)) 1fr; gap: calc(8 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--hielo); color: var(--dark);
  transform: translateY(calc(18 * var(--u))) scale(.975); transition: transform .45s var(--ease); }
.modal.is-open .modal__card { transform: none; }
.modal__close { position: absolute; right: calc(-34 * var(--u)); top: 0; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; background: var(--hielo); display: grid; place-items: center; transition: background-color .18s; }
.modal__close svg { width: calc(9 * var(--u)); height: calc(9 * var(--u)); fill: none; stroke: var(--dark); stroke-width: 1.8; stroke-linecap: round; }
.modal__close:hover { background: var(--turq); }

.modal__info { position: relative; padding: 0 calc(20 * var(--u)) 0 calc(14 * var(--u)); }
.modal__img { width: calc(100% + calc(34 * var(--u))); max-width: none; margin: 0 calc(-20 * var(--u)) 0 calc(-14 * var(--u)); height: calc(208 * var(--u)); object-fit: cover; object-position: 50% 30%; border-radius: calc(9 * var(--u)); }
.modal__logo { width: calc(45 * var(--u)); height: calc(28 * var(--u)); margin-top: calc(24 * var(--u)); fill: var(--dark); }
.modal__h { margin-top: calc(16 * var(--u)); font: 700 calc(26 * var(--u))/1.219 "AGC", sans-serif; }
.modal__p { margin-top: calc(8 * var(--u)); font: 400 calc(14 * var(--u))/calc(17.5 * var(--u)) "MP", serif; }
.modal__links { position: absolute; left: calc(14 * var(--u)); bottom: calc(12 * var(--u)); font: 500 calc(8.6 * var(--u))/1.3 "AG", sans-serif; white-space: nowrap; }
.modal__links a, .modal__faq a { text-decoration: underline; text-underline-offset: calc(1.6 * var(--u)); transition: color .18s; }
.modal__links a:hover { color: #1aa9a9; }

.modal__form, .modal__thanks { background: #fff; border-radius: calc(9 * var(--u)); padding: calc(22 * var(--u)) calc(22 * var(--u)) calc(18 * var(--u)); display: flex; flex-direction: column; min-width: 0; }
.modal__form[hidden], .modal__thanks[hidden], .modal__field[hidden] { display: none; }
.modal__secure { display: flex; align-items: center; gap: calc(7 * var(--u)); font: 700 calc(20 * var(--u))/1.2 "AGC", sans-serif; }
.modal__secure svg { width: calc(16 * var(--u)); height: calc(18 * var(--u)); }
.modal__secure .sh { fill: var(--agua); }
.modal__secure .lk { fill: var(--dark); }
.modal__secure .lk2 { fill: none; stroke: var(--dark); stroke-width: 1.3; }
.modal__freq { margin-top: calc(14 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); }
.modal__freq button { height: calc(30 * var(--u)); border-radius: calc(15 * var(--u)); border: calc(2 * var(--u)) solid var(--agua); display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); font: 700 calc(15 * var(--u))/1 "AGC", sans-serif; color: var(--dark);
  transition: background-color .2s, color .2s, border-color .2s; }
.modal__freq button svg { width: calc(10 * var(--u)); height: calc(9 * var(--u)); fill: #ff4c01; }
.modal__freq button:hover { border-color: var(--turq); }
.modal__freq button.is-active { background: var(--dark); border-color: var(--dark); color: var(--turq); }
.modal__amount { position: relative; margin-top: calc(10 * var(--u)); height: calc(54 * var(--u)); border-radius: calc(7 * var(--u)); background: var(--hielo); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(14 * var(--u)); cursor: text; }
.modal__amount-view { display: flex; align-items: center; font: 700 calc(34 * var(--u))/1 "AG", sans-serif; }
.modal__amount-view .amount__caret { height: calc(30 * var(--u)); width: calc(2 * var(--u)); margin-left: calc(2.4 * var(--u)); }
.modal__usd { font: 700 calc(12 * var(--u))/1 "AGC", sans-serif; letter-spacing: .04em; }
.modal__amount input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; cursor: text; font-size: 16px; }
.modal__equals { margin-top: calc(8 * var(--u)); font: 700 calc(13 * var(--u))/1.22 "AGC", sans-serif; }
.modal__equals b { color: #17b8b8; font-weight: 700; }
.modal__check { margin-top: calc(14 * var(--u)); display: flex; align-items: center; gap: calc(7 * var(--u)); font: 400 calc(12.5 * var(--u))/1.2 "MP", serif; cursor: pointer; }
.modal__check input { position: absolute; opacity: 0; pointer-events: none; }
.modal__check .box { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(3 * var(--u)); border: calc(1.6 * var(--u)) solid var(--dark); display: grid; place-items: center; transition: background-color .15s; }
.modal__check .box::after { content: ""; width: calc(5.4 * var(--u)); height: calc(2.8 * var(--u)); border-left: calc(1.6 * var(--u)) solid var(--turq); border-bottom: calc(1.6 * var(--u)) solid var(--turq); transform: translateY(calc(-.8 * var(--u))) rotate(-45deg); opacity: 0; }
.modal__check input:checked + .box { background: var(--dark); }
.modal__check input:checked + .box::after { opacity: 1; }
.modal__check input:focus-visible + .box { outline: calc(1.6 * var(--u)) solid var(--turq); outline-offset: calc(1.6 * var(--u)); }
.modal__field { margin-top: calc(7 * var(--u)); height: calc(26 * var(--u)); border: 0; border-radius: calc(6 * var(--u)); background: var(--hielo); padding: 0 calc(9 * var(--u)); font: 400 calc(12 * var(--u))/1.2 "MP", serif; color: var(--dark); outline: none; width: 100%; }
.modal__field--area { height: calc(44 * var(--u)); padding: calc(7 * var(--u)) calc(9 * var(--u)); resize: none; }
.modal__field::placeholder { color: rgba(11, 53, 53, .5); }
.modal__field:focus { box-shadow: 0 0 0 calc(1.6 * var(--u)) var(--turq); }
.modal__comment { margin-top: calc(9 * var(--u)); align-self: flex-start; font: 400 calc(12.5 * var(--u))/1.2 "MP", serif; text-decoration: underline; text-underline-offset: calc(1.6 * var(--u)); transition: color .18s; }
.modal__comment:hover { color: #1aa9a9; }
.modal__pay { margin-top: auto; padding-top: calc(10 * var(--u)); display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); }
.pay { height: calc(34 * var(--u)); border-radius: calc(6 * var(--u)); display: flex; align-items: center; justify-content: center; font: 500 calc(16 * var(--u))/1 "AG", sans-serif; transition: transform .18s var(--ease), filter .18s; }
.pay:hover { transform: translateY(calc(-1.5 * var(--u))); filter: brightness(1.06); }
.pay--gpay { background: #0b0b0b; color: #fff; gap: calc(4 * var(--u)); }
.pay--gpay b { font-weight: 700; background: conic-gradient(from -45deg, #ea4335 0 25%, #4285f4 0 50%, #34a853 0 75%, #fbbc05 0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pay--paypal { background: #ffc439; font-weight: 900; font-size: calc(17 * var(--u)); }
.pay--paypal i { font-style: italic; color: #003087; }
.pay--paypal i + i { color: #0070e0; }
.modal__go { margin-top: calc(8 * var(--u)); height: calc(38 * var(--u)); flex: none; border-radius: calc(6 * var(--u)); background: var(--dark); color: var(--agua); font: 900 calc(18 * var(--u))/1 "AGC", sans-serif; transition: background-color .2s, color .2s; }
.modal__go:hover { background: var(--turq); color: var(--dark); }
.modal__cards { margin-top: calc(9 * var(--u)); display: flex; justify-content: center; gap: calc(5 * var(--u)); }
.modal__cards span { height: calc(11 * var(--u)); min-width: calc(19 * var(--u)); padding: 0 calc(3 * var(--u)); border-radius: calc(2 * var(--u)); border: calc(.8 * var(--u)) solid rgba(11, 53, 53, .35); display: flex; align-items: center; justify-content: center; font: 900 calc(5.2 * var(--u))/1 "AG", sans-serif; letter-spacing: .03em; }
.modal__cards .mc i { width: calc(6 * var(--u)); height: calc(6 * var(--u)); border-radius: 50%; background: #eb001b; }
.modal__cards .mc i + i { background: #f79e1b; margin-left: calc(-2.2 * var(--u)); mix-blend-mode: multiply; }

.modal__thanks { align-items: center; justify-content: center; text-align: center; }
.modal__thanks-h { font: 700 calc(59 * var(--u))/1.1 "AGC", sans-serif; }
.modal__thanks-p { margin-top: calc(12 * var(--u)); max-width: calc(250 * var(--u)); font: 400 calc(15 * var(--u))/calc(19 * var(--u)) "MP", serif; }
.modal__thanks-p b { font: 700 calc(15 * var(--u))/calc(19 * var(--u)) "AGC", sans-serif; color: #17b8b8; }
.modal__thanks .modal__go { margin-top: calc(26 * var(--u)); width: calc(150 * var(--u)); }

.modal__faq { font: 500 calc(8.6 * var(--u))/1.3 "AG", sans-serif; color: var(--hielo); opacity: .85; white-space: nowrap; }
.modal__faq a:hover { color: var(--turq); }