html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #0B0B0D; color: #F6F3EE; }
a { color: #FB6706; } a:hover { color: #FF8A3D; }
img { max-width: 100%; }
:focus-visible { outline: 3px solid #FB6706; outline-offset: 3px; }
section[id] { scroll-margin-top: 16px; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp { position: absolute; left: -9999px; }

/* accordions (Get started + FAQ) */
details.acc > summary { list-style: none; }
details.acc > summary::-webkit-details-marker { display: none; }
details.acc .sign::after { content: "+"; }
details.acc[open] .sign::after { content: "\2212"; }

/* hero button illustration: shrink on small phones */
@media (max-width: 440px) {
  .puck { width: 288px !important; height: 384px !important; }
  .puck > div { transform: scale(0.48) !important; }
}
@media (max-width: 640px) {
  header nav a:not(:last-child) { display: none; }
}

/* cookie banner (only shown when ad tracking is switched on) */
.consent { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 560px; margin: 0 auto; background: #1C1C20; color: #F6F3EE; border: 1px solid #3A3A40; border-radius: 16px; padding: 16px 18px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; font: 14px/1.5 Poppins, system-ui, sans-serif; box-shadow: 0 12px 40px rgba(0,0,0,0.5); }
.consent p { margin: 0; flex: 1 1 260px; }
.consent button { min-height: 44px; padding: 0 18px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; }
.consent .yes { background: #FB6706; color: #0B0B0D; border: 0; }
.consent .no { background: transparent; color: #F6F3EE; border: 1.5px solid #3A3A40; }

/* confirm page contribution cards */
.amounts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; border: 0; margin: 0; padding: 0; }
.amount { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 22px 20px; border-radius: 18px; background: #FFFFFF; border: 3px solid #E4E1DA; cursor: pointer; min-height: 160px; box-sizing: border-box; }
.amount.rrp { border-color: #FB6706; }
.amount:has(input:checked) { border-color: #FB6706; box-shadow: 0 10px 24px rgba(251,103,6,0.18); }
.amount:has(input:focus-visible) { outline: 3px solid #0B0B0D; outline-offset: 3px; }
.amount input { position: absolute; opacity: 0; pointer-events: none; }
.amount .tick { position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #C2BDB4; box-sizing: border-box; }
.amount:has(input:checked) .tick { border: 7px solid #FB6706; }
.pay[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }