/* JungleBet promo — landing-only sections. Design tokens come from tokens.css. */

/* ---- Footer pay row (defined on the base site's page CSS; re-declared here) ---- */
.footer-col--brand .footer-blurb { max-width: 34ch; }
.footer-pay { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); margin: var(--sp-5) 0; }
.footer-pay__label { font-size: var(--fs-xs); color: var(--fg-500); flex: 1 1 260px; }
.footer-pay__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); }
.footer-pay__logos img { display: block; opacity: .9; background: #fff; border-radius: 4px; padding: 2px 4px; }

/* ---- Hero ---- */
.hero { position: relative; z-index: 1; overflow: hidden; border-bottom: 1px solid var(--bg-300); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
/* Same dark diagonal brand wash as junglebet.co: text-side darkest, amber glow bottom-right,
   plus a bottom fade so the hero melts into the page. */
.hero::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(135deg, rgba(10,20,13,.94) 0%, rgba(10,20,13,.62) 55%, rgba(224,149,63,.22) 100%),
    linear-gradient(180deg, transparent 60%, var(--bg-000) 100%); }
.hero__inner { position: relative; z-index: 2; padding: calc(var(--sp-9)) var(--sp-5) var(--sp-8); max-width: 780px; }
.hero__title { font-size: var(--fs-2xl); line-height: var(--lh-tight); margin: var(--sp-3) 0 var(--sp-4); }
.hero__lead { font-size: var(--fs-md); color: var(--fg-100); max-width: 56ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); }
.hero__note { font-size: var(--fs-sm); color: var(--fg-300); }

/* ---- Why grid ---- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
.why-card { padding: var(--sp-5); }
.why-card h3 { font-size: var(--fs-md); color: var(--accent-2); margin-bottom: var(--sp-2); }
.why-card p { color: var(--fg-100); font-size: var(--fs-sm); }

/* ---- Split (image + text) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); align-items: center; }
.split__media img { width: 100%; height: auto; border-radius: var(--r-lg); border: 1px solid var(--bg-300); box-shadow: var(--sh-2); display: block; }
.split__body h2 { font-size: var(--fs-lg); margin: var(--sp-2) 0 var(--sp-3); }
.split__body p { margin-bottom: var(--sp-3); color: var(--fg-100); }
.split__body .btn { margin-top: var(--sp-2); }

/* ---- Steps ---- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); list-style: none; }
.step { padding: var(--sp-5); position: relative; }
.step__n { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); margin-bottom: var(--sp-3); }
.step h3 { font-size: var(--fs-md); margin-bottom: var(--sp-2); }
.step p { color: var(--fg-100); font-size: var(--fs-sm); }

/* ---- Safer gambling block ---- */
.rg-list { margin: var(--sp-4) 0 var(--sp-4) var(--sp-5); }
.rg-list li { color: var(--fg-100); margin: 6px 0; }
.rg-help { color: var(--fg-300); font-size: var(--fs-sm); }

/* ---- Register ---- */
.register { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--sp-6); align-items: start; scroll-margin-top: 80px; }
.register__copy h2 { font-size: var(--fs-xl); margin: var(--sp-2) 0 var(--sp-3); }
.register__copy p { color: var(--fg-100); }
.register__ticks { list-style: none; margin-top: var(--sp-4); display: grid; gap: 8px; }
.register__ticks li { position: relative; padding-left: 26px; color: var(--fg-100); font-size: var(--fs-sm); }
.register__ticks li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-2); font-weight: 700; }

.reg-form { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.reg-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-4); }
.reg-form__fine { margin-top: var(--sp-4); font-size: var(--fs-xs); color: var(--fg-300); }
.reg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- FAQ ---- */
.faq { display: grid; gap: var(--sp-3); }
.faq__item { padding: var(--sp-4) var(--sp-5); }
.faq__item summary { cursor: pointer; font-family: var(--font-display); font-weight: 700; color: var(--fg-000); font-size: var(--fs-md); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; color: var(--accent-2); font-size: 1.4em; line-height: 1; }
.faq__item[open] summary::after { content: "–"; }
.faq__item p { color: var(--fg-100); margin-top: var(--sp-3); font-size: var(--fs-sm); }

/* ---- Reveal (used by motion.js) ---- */
[data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---- Responsive ---- */
@media (max-width: 980px) {
  .why-grid { grid-template-columns: 1fr 1fr; }
  .register { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .steps { grid-template-columns: 1fr; }
  .hero__inner { padding-top: var(--sp-8); }
}
@media (max-width: 520px) {
  .why-grid { grid-template-columns: 1fr; }
  .reg-form__grid { grid-template-columns: 1fr; }
}