/* BetPro Exchange - marketing site
   Separate from the portal's stylesheet by design: this file is only ever
   loaded by pages under home-site/, and nothing in the portal reads it.
   Mobile-first. The audience is Android on mobile data, so the base styles
   are the 360px styles and wider screens add to them. */

@font-face{font-family:"Montserrat";font-weight:400;font-display:swap;src:url("/fonts/montserrat-400.woff2") format("woff2")}
@font-face{font-family:"Montserrat";font-weight:600;font-display:swap;src:url("/fonts/montserrat-600.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:700;font-display:swap;src:url("/fonts/poppins-700.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-weight:800;font-display:swap;src:url("/fonts/poppins-800.woff2") format("woff2")}

:root{
  --navy:#071f38;
  --navy-2:#0d2f4f;
  --ink:#132430;
  --ink-2:#41596b;
  --ink-3:#64798a;
  --paper:#ffffff;
  --paper-2:#f2f7f9;
  --paper-3:#e7eff3;
  --rule:#d5e2e9;
  --rule-soft:#e8f0f4;

  /* Brand green, darkened until body-size text on white clears 4.5:1.
     The brief calls this out specifically - brand greens usually fail. */
  --green:#0f7a44;
  --green-ink:#0a5c33;
  --green-soft:#e3f4ea;
  --mint:#0e7b6e;
  --mint-soft:#def2ef;
  --wa:#1a8d47;

  --flag:#8a5a08;
  --flag-soft:#fdf3e2;
  --stop:#9c2b2b;
  --stop-soft:#fbeceb;

  --shadow:0 1px 2px rgba(7,31,56,.05),0 12px 30px -20px rgba(7,31,56,.4);
  --radius:10px;
  --measure:68ch;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --navy:#040f1c;--navy-2:#0a2138;
    --ink:#e4edf2;--ink-2:#adc1cd;--ink-3:#8399a8;
    --paper:#0a141c;--paper-2:#101f2a;--paper-3:#162a37;
    --rule:#22394a;--rule-soft:#1a2c3a;
    --green:#4dc483;--green-ink:#7ad9a5;--green-soft:#0e2a1c;
    --mint:#4cc5b6;--mint-soft:#0c2b28;
    --flag:#dda94f;--flag-soft:#261c0c;
    --stop:#e08d86;--stop-soft:#2a1311;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --navy:#040f1c;--navy-2:#0a2138;
  --ink:#e4edf2;--ink-2:#adc1cd;--ink-3:#8399a8;
  --paper:#0a141c;--paper-2:#101f2a;--paper-3:#162a37;
  --rule:#22394a;--rule-soft:#1a2c3a;
  --green:#4dc483;--green-ink:#7ad9a5;--green-soft:#0e2a1c;
  --mint:#4cc5b6;--mint-soft:#0c2b28;
  --flag:#dda94f;--flag-soft:#261c0c;
  --stop:#e08d86;--stop-soft:#2a1311;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 30px -20px rgba(0,0,0,.8);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 17px/1.62 "Montserrat","Segoe UI",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;background:var(--green);color:#fff;font-weight:600}
.skip:focus{left:0}

h1,h2,h3,h4{font-family:"Poppins","Segoe UI",system-ui,sans-serif;font-weight:700;line-height:1.18;letter-spacing:-.018em;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(28px,6.4vw,44px);margin:0 0 16px}
h2{font-size:clamp(22px,4.6vw,31px);margin:44px 0 14px}
h3{font-size:clamp(18px,3.4vw,22px);margin:30px 0 10px}
h4{font-size:17px;margin:22px 0 8px}
p{margin:0 0 17px;max-width:var(--measure)}
a{color:var(--green-ink);text-underline-offset:2px}
a:hover{color:var(--green)}
:focus-visible{outline:3px solid var(--mint);outline-offset:2px}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:var(--navy);color:#fff}
.hdr__bar{max-width:1120px;margin:0 auto;padding:11px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-family:"Poppins",sans-serif;font-weight:700;font-size:16px;flex-shrink:0}
.brand img{border-radius:50%;display:block;width:34px;height:34px;object-fit:contain}
.brand__word strong{font-weight:800}
.nav{display:flex;align-items:center}
.nav__toggle{display:flex;align-items:center;justify-content:center;width:42px;height:42px;background:transparent;border:1px solid rgba(255,255,255,.24);border-radius:8px;color:#fff;cursor:pointer}
.nav__bars,.nav__bars::before,.nav__bars::after{display:block;width:18px;height:2px;background:currentColor;border-radius:2px}
.nav__bars{position:relative}
.nav__bars::before,.nav__bars::after{content:"";position:absolute;left:0}
.nav__bars::before{top:-6px}.nav__bars::after{top:6px}
.nav__list{display:none;list-style:none;margin:0;padding:0}
.nav__list.open{display:flex;flex-direction:column;gap:2px;position:absolute;left:0;right:0;top:100%;background:var(--navy-2);padding:10px 16px 16px;border-top:1px solid rgba(255,255,255,.12)}
.nav__list a{display:block;padding:12px 4px;color:#dbe8f0;text-decoration:none;font-weight:600;font-size:15.5px}
.nav__list a[aria-current="page"]{color:#fff}
.nav__cta{margin-top:8px;background:var(--green);color:#fff !important;border-radius:9px;text-align:center;padding:13px 16px !important}

.wa-strip{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px 12px;background:var(--wa);color:#fff;text-decoration:none;font-size:13.5px;font-weight:600}
.wa-strip strong{font-weight:800;letter-spacing:.02em;white-space:nowrap}
.wa-strip svg{flex-shrink:0}

/* ---------- layout ---------- */
.wrap{max-width:820px;margin:0 auto;padding:0 16px}
.wrap--wide{max-width:1120px}
section.band{padding:44px 0;border-bottom:1px solid var(--rule-soft)}
section.band:last-of-type{border-bottom:0}
.band--tint{background:var(--paper-2)}

/* ---------- hero ---------- */
.hero{background:linear-gradient(168deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;padding:38px 0 42px}
.hero h1{color:#fff;margin-bottom:14px}
.hero p{color:#c9dcea;font-size:17.5px;max-width:58ch}
.hero .lede{font-size:19px;color:#dcebf5}
.hero__cta{display:flex;flex-direction:column;gap:10px;margin:24px 0 0;max-width:380px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:14px 22px;border-radius:10px;font-family:"Poppins",sans-serif;font-weight:700;font-size:16px;text-decoration:none;text-align:center;border:1px solid transparent}
.btn--primary{background:var(--green);color:#fff;box-shadow:0 8px 20px -10px rgba(15,122,68,.9)}
.btn--primary:hover{background:var(--green-ink);color:#fff}
.btn--ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.3)}
.btn--ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.hero__facts{display:grid;gap:10px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.hero__fact{display:flex;gap:10px;align-items:baseline;color:#dcebf5;font-size:15px}
.hero__fact b{font-family:"Poppins",sans-serif;color:#fff;font-size:16px;white-space:nowrap}

/* ---------- content bits ---------- */
.lede{font-size:18.5px;color:var(--ink-2)}
.answer{background:var(--green-soft);border-left:4px solid var(--green);padding:18px 20px;border-radius:0 var(--radius) var(--radius) 0;margin:0 0 26px}
.answer p{margin:0;font-size:17.5px;max-width:62ch}
.answer p+p{margin-top:10px}

.callout{padding:18px 20px;border-radius:var(--radius);margin:24px 0;border-left:4px solid}
.callout p{margin:0;max-width:62ch}
.callout p+p{margin-top:9px}
.callout__t{font-family:"Poppins",sans-serif;font-weight:700;font-size:15.5px;margin-bottom:7px !important}
.callout--warn{background:var(--flag-soft);border-color:var(--flag)}
.callout--warn .callout__t{color:var(--flag)}
.callout--stop{background:var(--stop-soft);border-color:var(--stop)}
.callout--stop .callout__t{color:var(--stop)}
.callout--info{background:var(--mint-soft);border-color:var(--mint)}
.callout--info .callout__t{color:var(--mint)}

ul,ol{max-width:var(--measure);padding-left:22px;margin:0 0 18px}
li{margin-bottom:9px}
.steps{list-style:none;padding:0;counter-reset:s}
.steps>li{counter-increment:s;position:relative;padding-left:44px;margin-bottom:18px}
.steps>li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;font-family:"Poppins",sans-serif;font-weight:700;font-size:14px}
.steps>li b{display:block;font-family:"Poppins",sans-serif;font-size:16.5px;margin-bottom:3px}

.tw{overflow-x:auto;margin:22px 0;border:1px solid var(--rule);border-radius:var(--radius);background:var(--paper)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:460px}
caption{text-align:left;padding:12px 15px 0;color:var(--ink-3);font-size:14px}
th,td{text-align:left;padding:11px 15px;border-bottom:1px solid var(--rule-soft);vertical-align:top}
th{font-family:"Poppins",sans-serif;font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);background:var(--paper-2)}
tbody tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

.cards{display:grid;gap:14px;margin:22px 0}
.card{padding:20px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--shadow)}
.card h3{margin:0 0 8px;font-size:18px}
.card p{margin:0;color:var(--ink-2);font-size:15.5px}
.card p+p{margin-top:9px}

.faq{margin:24px 0}
.faq details{border:1px solid var(--rule);border-radius:var(--radius);margin-bottom:10px;background:var(--paper)}
.faq summary{padding:15px 18px;cursor:pointer;font-family:"Poppins",sans-serif;font-weight:700;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;line-height:1;color:var(--green);flex-shrink:0}
.faq details[open] summary::after{content:"\2013"}
.faq .faq__a{padding:0 18px 16px}
.faq .faq__a p{margin:0 0 10px;color:var(--ink-2);font-size:16px}
.faq .faq__a p:last-child{margin-bottom:0}

.toc{background:var(--paper-2);border:1px solid var(--rule);border-radius:var(--radius);padding:18px 20px;margin:0 0 28px}
.toc h2{font-size:14px;margin:0 0 10px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3)}
.toc ol{margin:0;padding-left:20px;column-gap:30px}
.toc li{margin-bottom:6px;font-size:15.5px}

.cta-band{background:var(--navy);color:#fff;padding:34px 0;text-align:center}
.cta-band h2{color:#fff;margin-top:0}
.cta-band p{color:#c9dcea;margin-left:auto;margin-right:auto}
.cta-band .btn{margin-top:8px}

.crumb{font-size:14px;color:var(--ink-3);padding:14px 0 0}
.crumb a{color:var(--ink-2)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:7px;padding:0;margin:0;max-width:none}
.crumb li{margin:0}
.crumb li+li::before{content:"/";margin-right:7px;color:var(--rule)}

.meta{color:var(--ink-3);font-size:14.5px;margin:0 0 22px}
.updated{font-variant-numeric:tabular-nums}

/* scroll-margin so anchor jumps clear the sticky header */
:target,h2[id],h3[id]{scroll-margin-top:112px}

/* ---------- footer ---------- */
.ftr{background:var(--navy);color:#c2d6e4;padding:38px 0 0;margin-top:10px}
.ftr__grid{max-width:1120px;margin:0 auto;padding:0 16px 28px;display:grid;gap:26px}
.ftr__col h2{font-family:"Poppins",sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#8fb0c6;margin:0 0 11px}
.ftr__col ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.ftr__col a{color:#d3e4ef;text-decoration:none;font-size:15px}
.ftr__col a:hover{color:#fff;text-decoration:underline}
.ftr__col--brand img{border-radius:50%;object-fit:contain}
.ftr__col--brand p{color:#9db9cc;font-size:14.5px;margin:11px 0 0;max-width:34ch}
.ftr__legal{border-top:1px solid rgba(255,255,255,.11);padding:18px 16px 26px}
.ftr__legal p{max-width:1088px;margin:0 auto 9px;font-size:13.5px;color:#9db9cc}
.ftr__legal a{color:#d3e4ef}
.age{display:inline-block;background:#fff;color:var(--navy);font-family:"Poppins",sans-serif;font-weight:800;font-size:12px;padding:2px 7px;border-radius:4px;margin-right:7px}
.ftr__copy{color:#7f9db3 !important}

/* ---------- floating whatsapp ---------- */
.wa-fab{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:70;width:54px;height:54px;border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(26,141,71,.45);text-decoration:none}
.wa-fab:hover{background:#15753a;color:#fff}

/* ---------- wider screens ---------- */
@media (min-width:760px){
  body{font-size:17.5px}
  .wrap{padding:0 28px}
  section.band{padding:56px 0}
  .hero{padding:56px 0 60px}
  .hero__cta{flex-direction:row;max-width:none}
  .hero__facts{grid-template-columns:repeat(2,1fr);gap:12px 30px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .ftr__grid{grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
  .nav__toggle{display:none}
  .nav__list{display:flex;align-items:center;gap:6px}
  .nav__list a{padding:9px 12px;font-size:15px}
  .nav__cta{margin-top:0;padding:11px 17px !important}
  .toc ol{columns:2}
}
@media (min-width:1040px){
  .cards--3{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;scroll-behavior:auto !important}}

/* ============================================================
   Home page components
   Added for the richer homepage: banners, illustrated feature
   rows, stat strip, payment and city grids. Every colour here
   is taken from the token set above so both themes resolve, and
   text over any tinted panel was checked against 4.5:1.
   ============================================================ */

/* --- hero banner with the brand mark --- */
.hero__brand{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.hero__brand img{width:60px;height:60px;border-radius:50%;object-fit:contain;flex-shrink:0;
  box-shadow:0 0 0 6px rgba(255,255,255,.07)}
.hero__brandtext{font-family:"Poppins",sans-serif;font-weight:700;font-size:15px;line-height:1.25;color:#cfe3f0}
.hero__brandtext b{display:block;color:#fff;font-size:19px;font-weight:800;letter-spacing:-.01em}

/* --- animated stat strip --- */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--rule);
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;margin:26px 0}
.stat{background:var(--paper);padding:18px 16px;text-align:center}
.stat__n{display:block;font-family:"Poppins",sans-serif;font-weight:800;font-size:26px;
  line-height:1.1;color:var(--green-ink);letter-spacing:-.02em}
.stat__l{display:block;margin-top:5px;color:var(--ink-3);font-size:13px;line-height:1.35}
@media (min-width:760px){.stats{grid-template-columns:repeat(4,1fr)}.stat{padding:22px 16px}.stat__n{font-size:31px}}

/* --- illustrated feature row --- */
.frow{display:grid;gap:20px;align-items:center;margin:30px 0;padding:22px;
  background:var(--paper-2);border:1px solid var(--rule);border-radius:14px}
.frow__art{display:flex;align-items:center;justify-content:center}
.frow__art svg{width:100%;height:auto;max-width:280px;display:block}
.frow h3{margin:0 0 10px}
.frow p:last-child{margin-bottom:0}
@media (min-width:760px){
  .frow{grid-template-columns:1fr 280px;gap:34px;padding:28px 30px}
  .frow--flip .frow__art{order:-1}
}

/* --- icon cards --- */
.icards{display:grid;gap:14px;margin:24px 0}
.icard{padding:22px 20px;background:var(--paper);border:1px solid var(--rule);
  border-radius:14px;box-shadow:var(--shadow)}
.icard__ico{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;
  background:var(--green-soft);margin-bottom:13px}
.icard__ico svg{width:26px;height:26px;color:var(--green-ink);display:block}
.icard h3{margin:0 0 7px;font-size:17.5px}
.icard p{margin:0;color:var(--ink-2);font-size:15.5px}
@media (min-width:760px){.icards{grid-template-columns:repeat(3,1fr)}}

/* --- payment grid --- */
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:22px 0}
.pay{display:flex;align-items:center;gap:10px;padding:13px 14px;background:var(--paper);
  border:1px solid var(--rule);border-radius:11px;font-weight:600;font-size:14.5px;color:var(--ink)}
.pay__dot{width:9px;height:9px;border-radius:50%;background:var(--green);flex-shrink:0}
.pay small{display:block;color:var(--ink-3);font-weight:400;font-size:12.5px}
@media (min-width:620px){.pgrid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.pgrid{grid-template-columns:repeat(5,1fr)}}

/* --- city grid --- */
.cities{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:22px 0}
.city{display:block;padding:15px 16px;background:var(--paper);border:1px solid var(--rule);
  border-radius:11px;text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.city:hover{border-color:var(--green);transform:translateY(-2px)}
.city strong{display:block;font-family:"Poppins",sans-serif;font-size:16px;color:var(--ink)}
.city span{display:block;margin-top:3px;color:var(--ink-3);font-size:13px}
.city--soon{opacity:.62;pointer-events:none}
@media (min-width:620px){.cities{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1040px){.cities{grid-template-columns:repeat(4,1fr)}}

/* --- closing banner with the mark --- */
.banner{margin:34px 0 0;padding:30px 24px;border-radius:16px;text-align:center;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff}
.banner img{width:64px;height:64px;border-radius:50%;object-fit:contain;margin:0 auto 14px;display:block;
  box-shadow:0 0 0 6px rgba(255,255,255,.08)}
.banner h2{color:#fff;margin:0 0 10px}
.banner p{color:#c9dcea;margin-left:auto;margin-right:auto;max-width:52ch}
.banner .btn{margin-top:6px}

/* --- entrance animation, motion-safe only --- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);animation:rise .55s ease forwards}
  .reveal--2{animation-delay:.08s}
  .reveal--3{animation-delay:.16s}
  .reveal--4{animation-delay:.24s}
  @keyframes rise{to{opacity:1;transform:none}}
}

/* Button variants for light sections. btn--ghost is white-on-transparent and
   only works inside the navy hero and banner, so body-copy buttons need their
   own treatment rather than borrowing it. */
.btn--soft{background:var(--green-soft);color:var(--green-ink);border-color:var(--accent-line,var(--rule))}
.btn--soft:hover{background:var(--paper-3);color:var(--green-ink)}
.btn--outline{background:transparent;color:var(--green-ink);border-color:var(--green)}
.btn--outline:hover{background:var(--green-soft);color:var(--green-ink)}
.btn--sm{min-height:44px;padding:11px 18px;font-size:15px}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 26px}
.btnrow .btn{flex:1 1 auto;min-width:0}
@media (min-width:620px){.btnrow .btn{flex:0 0 auto}}

/* Flat nav for the minimal layout: no hamburger, always visible. */
.nav__list--flat{display:flex;align-items:center;gap:6px}
.nav__list--flat a{padding:9px 12px;font-size:15px}
.nav__list--flat .nav__cta{margin-top:0;padding:11px 17px !important}