/* Joe Jennings 2026 homepage styles. Loaded ONLY on the Home 2026 template,
   so it can never affect Divi pages. Image url()s resolve relative to this
   file's folder (jj-home/), where the assets/ folder also lives. */



/* ===== TOKENS — extracted from the Bolt build, not eyeballed ===== */
:root{
  --forest:#0d2f1a;        /* primary dark green */
  --forest-mid:#1a5c35;    /* gradient partner */
  --forest-dark:#091f10;   /* darkest — bars, footer */
  --tg:#229ED9;            /* Telegram green */
  --tg-hover:#1c8fc4;
  --amber-400:#fdf462;   /* lighter tint of logo yellow - hover + odds text */
  --amber-500:#faea27;     /* LOGO YELLOW - exact value read from logo.svg */
  --amber-600:#d97706;
  --amber-50:#fffbeb;
  --amber-200:#fde68a;
  --amber-700:#b45309;
  --amber-800:#92400e;
  --green-100:#dcfce7;
  --green-400:#4ade80;
  --green-700:#15803d;
  --green-800:#166534;
  --stone-50:#fafaf9;
  --gray-200:#e5e7eb;
  --gray-400:#9ca3af;
  --gray-900:#111827;      /* text on gold buttons */
  --font-display:Merriweather,Georgia,serif;
  --font-body:"Source Sans 3",system-ui,sans-serif;
  --r-sm:.25rem; --r:.5rem; --r-md:.75rem; --r-lg:1rem; --r-full:9999px;
  --maxw:1200px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;} *{animation:none!important;transition:none!important;}}
body{margin:0;font-family:var(--font-body);background:var(--forest);color:#fff;
  -webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
:focus-visible{outline:3px solid var(--amber-400);outline-offset:3px;border-radius:var(--r-sm);}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 1rem;}
/* Skip link: invisible until keyboard-focused (press Tab on page load).
   Lets keyboard/screen-reader users jump past the nav to the content. WCAG 2.4.1. */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--amber-500);
  color:var(--gray-900);padding:.75rem 1.25rem;font-weight:700;border-radius:0 0 var(--r) 0;}
.skip:focus{left:0;}
h1,h2,h3{font-family:var(--font-display);margin:0;}

/* ===== ANIMATIONS — copied verbatim from the build ===== */
/* Pulse rings. Applied to .circ (not the button) so the glow is circular,
   not a rectangle around the label. Drop shadow is repeated inside the
   keyframe, otherwise the animation would override it and the FAB would
   lose its shadow mid-cycle. */
@keyframes pulse-tg{
  0%,to{box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 0 #229ED980;}
  50%{box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 12px #229ED900;}}
@keyframes pulse-gold{
  0%,to{box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 0 #faea2780;}
  50%{box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 12px #faea2700;}}
@keyframes odds-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
@keyframes fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.fab-tg .circ{animation:pulse-tg 3s ease-in-out infinite;}
.fab-call .circ{animation:pulse-gold 3s ease-in-out infinite;}
.reveal{opacity:1;}                 /* visible by default — safe if JS fails */
.js .reveal{opacity:0;}             /* only hidden when JS is active, ready to animate in */
.js .reveal.in{opacity:1;}
.reveal.in{animation:slide-up .5s ease-out forwards;}

/* ===== TOP BAR ===== */
/* Top bar. On mobile this is ONE line: Freephone + open status.
   The Telegram handle and 2nd number are hidden below 768 - the Telegram FAB
   and the hero button already cover that channel, so repeating it here just
   cost three lines of a small screen. */
.topbar{background:var(--forest-dark);padding:.45rem 1rem;font-size:.8rem;}
.topbar .inner{max-width:var(--maxw);margin:0 auto;display:flex;flex-direction:row;
  align-items:center;justify-content:center;gap:.55rem;text-align:center;flex-wrap:nowrap;}
.topbar .tg{display:none;align-items:center;gap:.5rem;color:var(--tg);font-weight:600;white-space:nowrap;}
.topbar .tg svg{width:18px;height:18px;flex:none;color:#fff;fill:#fff;}
.topbar .tg .handle{color:#fff;font-weight:700;}
.topbar .tg:hover .handle{color:var(--tg);}
.topbar .ph{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap;justify-content:center;
  color:var(--gray-400);}
.topbar .ph svg{width:15px;height:15px;color:var(--amber-500);}
.topbar .ph a{color:var(--amber-500);font-weight:700;}
.topbar .ph .sep{color:#4b5a51;display:none;}
.topbar .ph .num2{display:none;}
/* Opening-hours indicator — tells a phone-first customer if they can call NOW */
.openpill{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;font-weight:600;
  padding:.15rem .5rem;border-radius:var(--r-full);white-space:nowrap;flex:none;}
.openpill .dot{width:7px;height:7px;border-radius:50%;}
.openpill.on{background:#229ED91a;color:var(--green-400);}
.openpill.on .dot{background:var(--green-400);animation:pulse 2s infinite;}
.openpill.off{background:#ffffff0d;color:var(--gray-400);}
.openpill.off .dot{background:var(--gray-400);}

/* ===== HEADER ===== */
.hdr{position:sticky;top:0;z-index:50;background:#0d2f1acc;backdrop-filter:blur(8px);
  border-bottom:1px solid #ffffff0f;transition:box-shadow .2s;}
.hdr .row{transition:padding .2s ease;display:flex;align-items:center;
  justify-content:space-evenly;gap:2.5rem;width:100%;max-width:none;
  padding-left:1rem;padding-right:1rem;box-sizing:border-box;}
   /* header spans wider so 7 items + buttons fit */
.hdr .wrap{max-width:none;padding:0;}
.hdr .logo{flex:0 0 auto;}
.hdr .nav{flex:0 1 auto;justify-content:center;}
.hdr .hdr-cta{flex:0 0 auto;}
.hdr.small .row{padding:.4rem 0;}
.hdr.small{box-shadow:0 6px 24px rgba(0,0,0,.28);}
.hdr.small .logo-mark{height:34px;width:293px;transition:all .2s ease;}
.logo-mark{transition:all .2s ease;}
.hdr .row{position:relative;display:flex;align-items:center;justify-content:center;padding:.75rem 0;gap:1rem;}
.logo img{height:46px;width:auto;}
.logo-mark{display:block;flex:none;}
.nav{display:none;align-items:center;gap:.15rem;}
.nav a{padding:.5rem .6rem;border-radius:var(--r);font-weight:600;font-size:.9rem;
  color:#e6efe9;white-space:nowrap;transition:background .15s,color .15s;}
.nav a:hover{background:#ffffff0f;color:#fff;}
.nav a.active{background:var(--green-800);color:#fff;}
.hdr-cta{display:none;gap:.5rem;flex:none;}
.hdr-msg{display:none;}
.burger{position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:var(--r);}
.burger svg{width:26px;height:26px;}

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border-radius:var(--r);padding:.75rem 1.5rem;font-weight:700;font-size:1rem;
  transition:all .2s cubic-bezier(.4,0,.2,1);min-height:48px;}
.btn svg{width:18px;height:18px;flex:none;}
.btn-gold{background:var(--amber-500);color:var(--gray-900);
  box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a;}
.btn-gold:hover{background:var(--amber-400);transform:translateY(-1px);}
.btn-tg{color:#fff;background:var(--tg);color:#fff;box-shadow:0 4px 6px -1px #0000001a;}
.btn-tg:hover{background:var(--tg-hover);transform:translateY(-1px);}
.btn-tg-ghost{background:var(--tg);border:1px solid var(--tg);color:#fff;}
.btn-tg-ghost:hover{background:var(--tg-hover);border-color:var(--tg-hover);}
.btn-ghost{background:transparent;border:1px solid #ffffff47;color:#fff;}
.btn-ghost:hover{background:#ffffff0a;border-color:#ffffff99;}
.btn-block{width:100%;}

/* ===== MOBILE MENU ===== */
.mmenu{position:fixed;inset:0;z-index:100;background:var(--forest);padding:1rem;
  transform:translateX(100%);transition:transform .28s ease;display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;width:100%;max-width:100vw;box-sizing:border-box;}
.mmenu.open{transform:translateX(0);}
.mmenu .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;}
.mmenu .x{width:44px;height:44px;display:flex;align-items:center;justify-content:center;}
.mmenu .x svg{width:26px;height:26px;}
.mmenu nav{display:flex;flex-direction:column;}
.mmenu nav a{font-family:var(--font-display);font-weight:700;font-size:1.25rem;padding:.9rem .25rem;
  border-bottom:1px solid #ffffff14;}
.mmenu .ctas{margin-top:1.5rem;display:flex;flex-direction:column;gap:.6rem;}

/* ===== HERO ===== */
.hero{min-height:100svh;display:flex;align-items:center;position:relative;text-align:center;padding:3rem 0 3.5rem;overflow:hidden;
  background:linear-gradient(160deg,var(--forest) 0%,var(--forest-mid) 100%);}
/* HERO PHOTO
   - Mobile gets the 960w file (38KB webp); desktop gets 1920w (84KB webp).
   - image-set() serves WebP to browsers that support it, JPEG to those that don't.
   - The dark gradient overlay keeps the headline readable and lets us compress hard.
   - background-position:center 30% keeps the horses/jockeys in frame as it crops. */
.hero.photo{
  background-image:linear-gradient(rgba(9,31,16,.74),rgba(13,47,26,.9)),
    image-set(url("assets/hero-sm.webp") type("image/webp"), url("assets/hero-sm.jpg") type("image/jpeg"));
  background-image:linear-gradient(rgba(9,31,16,.74),rgba(13,47,26,.9)),
    -webkit-image-set(url("assets/hero-sm.webp") type("image/webp"), url("assets/hero-sm.jpg") type("image/jpeg"));
  background-size:cover;background-position:center 30%;background-repeat:no-repeat;}
@media (min-width:768px){
  .hero.photo{
    background-image:linear-gradient(rgba(9,31,16,.72),rgba(13,47,26,.88)),
      image-set(url("assets/hero.webp") type("image/webp"), url("assets/hero.jpg") type("image/jpeg"));
    background-image:linear-gradient(rgba(9,31,16,.72),rgba(13,47,26,.88)),
      -webkit-image-set(url("assets/hero.webp") type("image/webp"), url("assets/hero.jpg") type("image/jpeg"));}
}
.hero .wrap{position:relative;z-index:2;}
.eyebrow{display:inline-block;border:1px solid #faea278c;color:var(--amber-500);font-weight:600;
  font-size:.9rem;padding:.6rem 1.25rem;border-radius:var(--r-full);margin-bottom:1.5rem;}
.hero h1{color:#ffffff;font-weight:900;line-height:1.05;font-size:clamp(2.5rem,11vw,4.25rem);margin-bottom:1.25rem;}
.hero h1 span{display:block;color:var(--amber-500);}
.hero .lede{font-size:1.125rem;color:#dbe6de;max-width:42rem;margin:0 auto 1.75rem;}
.hero .ctas{display:flex;flex-direction:column;gap:.75rem;max-width:34rem;margin:0 auto;}
.chips{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-top:1.75rem;}
.chip{display:inline-flex;align-items:center;gap:.5rem;background:#ffffff0d;border:1px solid #ffffff14;
  border-radius:var(--r-full);padding:.6rem 1rem;font-weight:600;font-size:.9rem;}
.chip svg{width:16px;height:16px;flex:none;}
.i-gold{color:var(--amber-500);} .i-green{color:var(--green-400);} .i-blue{color:#60a5fa;}

/* ===== SECTIONS ===== */
.sec{padding:3.25rem 0;}
.sec--band{background:var(--forest-dark);}
.sec-hd{text-align:center;max-width:40rem;margin:0 auto 2.5rem;}
.sec-hd h2{color:#ffffff;font-weight:900;font-size:clamp(1.75rem,6vw,2.25rem);margin-bottom:.75rem;}
.sec-hd p{color:var(--gray-400);font-size:1.05rem;margin:0;}

/* ===== HOW IT WORKS ===== */
.steps{display:flex;flex-direction:column;gap:2rem;max-width:36rem;margin:0 auto;text-align:center;}
.step{position:relative;}
.step .n{width:3rem;height:3rem;border-radius:var(--r-md);background:var(--amber-500);
  color:var(--gray-900);font-weight:700;font-size:1.15rem;display:flex;align-items:center;
  justify-content:center;margin:0 auto 1rem;}
.step h3{font-weight:700;font-size:1.25rem;margin-bottom:.4rem;}
.step p{color:var(--gray-400);margin:0;}

/* ===== FEATURED RACE ===== */
.fcard{max-width:44rem;margin:0 auto;background:#fff;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.28);}
.fcard .hd{background:var(--forest);padding:1.5rem;position:relative;}
.fcard .hd .badge{position:absolute;top:1.25rem;right:1.25rem;background:var(--amber-500);
  color:var(--gray-900);font-weight:700;font-size:.78rem;padding:.4rem .9rem;border-radius:var(--r-full);}
.fcard .hd .silk{font-size:1.5rem;margin-bottom:.5rem;}
.fcard .hd h3{font-weight:900;font-size:1.6rem;line-height:1.15;}
.fcard .hd .venue{color:var(--gray-400);margin-top:.25rem;font-size:.95rem;}
.fcard .live{display:flex;align-items:center;justify-content:center;gap:.45rem;
  background:var(--forest-dark);color:var(--green-400);font-size:.8rem;font-weight:600;padding:.5rem;}
.fcard .live .dot{width:7px;height:7px;border-radius:50%;background:var(--green-400);
  animation:pulse 2s infinite;}
@keyframes pulse{50%{opacity:.4}}
.runners{padding:.5rem 1.25rem;}
.rw{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.05rem .5rem;
  border-radius:var(--r-md);animation:odds-in .3s ease-out;}
.rw+.rw{border-top:1px solid #f1f5f3;}
.rw.pick{background:var(--green-100);border:1px solid #bbf7d0;margin:.35rem 0;}
.rw .nm{color:var(--gray-900);font-weight:700;font-size:1.05rem;}
.rw .jk{color:var(--gray-400);font-size:.9rem;margin-top:.1rem;}
.rw .rt{display:flex;align-items:center;gap:.75rem;}
.odds{background:var(--green-800);color:var(--amber-400);font-weight:700;font-size:1rem;
  padding:.5rem .9rem;border-radius:var(--r);min-width:3.75rem;text-align:center;}
.rw .cv{color:#cbd5d1;display:flex;} .rw.pick .cv{color:var(--green-700);}
.rw .cv svg{width:20px;height:20px;}
.fcard .ft{padding:1.25rem;}
.fcard .guide{text-align:center;color:var(--gray-400);margin-top:.75rem;font-size:.88rem;}

/* ===== MEETINGS TABLE ===== */
.meet{display:grid;grid-template-columns:1fr;gap:.4rem;margin:1rem 0 1.25rem;}
.meet .r{display:flex;justify-content:space-between;align-items:center;background:var(--stone-50);
  border-radius:var(--r);padding:.65rem .9rem;font-size:.92rem;}
.meet .d{color:#64748b;font-weight:500;} .meet .v{color:var(--gray-900);font-weight:700;}

/* ===== STATS ===== */
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;max-width:40rem;
  margin:0 auto 2.5rem;text-align:center;}
.stat{background:#0b2417;border:1px solid #ffffff14;border-radius:var(--r-lg);
  padding:1.75rem 1rem;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;transition:transform .2s,border-color .2s;}
.stat:hover{transform:translateY(-3px);border-color:#ffffff2a;}
.stat .ic{color:var(--amber-500);display:flex;justify-content:center;margin-bottom:.9rem;}
.stat .ic svg{width:34px;height:34px;}
.stat .v{font-weight:800;font-size:clamp(1.5rem,3.2vw,1.85rem);line-height:1.1;color:#fff;}
.stat .l{color:var(--gray-400);margin-top:.45rem;font-size:.9rem;line-height:1.35;}
.fine{text-align:center;color:var(--gray-400);margin-top:.75rem;font-size:.9rem;}

/* ===== OFFERS (bet365-style teaser cards) =====
   Layout copied from bet365: image takes the top of the card, large real-text
   headline below, small T&Cs line under that. Typeface stays Merriweather -
   that's Joe Jennings' brand, not bet365's.
   Homepage cards are TEASERS. Full detail lives on /offers/. */
.offers-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;max-width:44rem;margin:0 auto;}
.oc{background:#0b2717;border:1px solid #ffffff14;border-radius:var(--r-lg);overflow:hidden;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;}
.oc:hover{transform:translateY(-3px);border-color:#faea2740;box-shadow:0 18px 40px rgba(0,0,0,.35);}
.oc > a{display:block;height:100%;text-decoration:none;}
/* 4:3 box via padding-top (75% of width). Deliberately NOT aspect-ratio +
   display:flex - that combination is unreliable in Safari and rendered this
   at 16:9 on iOS, cropping the dark zone the headline needs. */
.oc-img{position:relative;padding-top:75%;background:var(--forest-mid);
  background-size:cover;background-position:center;}
.oc.has-img .oc-img{background-image:var(--oc-img);}
/* WebP with JPEG fallback per card. image-set() picks the format the browser
   supports. Set --oc-img-webp and --oc-img on the <article>. */
.oc.has-img[style*="--oc-img-webp"] .oc-img{
  background-image:-webkit-image-set(var(--oc-img-webp) type("image/webp"), var(--oc-img) type("image/jpeg"));
  background-image:image-set(var(--oc-img-webp) type("image/webp"), var(--oc-img) type("image/jpeg"));}
/* Steep gradient behind the headline - bet365 style. Transparent for the top
   half, then ramps hard into the card colour so white text stays readable. */
.oc-img::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,39,23,0) 42%, rgba(11,39,23,.55) 62%,
    rgba(11,39,23,.88) 80%, #0b2717 100%);}
.oc-pill{position:absolute;top:.75rem;left:.75rem;background:var(--green-800);color:#fff;
  font-weight:700;font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;
  padding:.3rem .7rem;border-radius:var(--r-full);}
.oc-pill.new{background:var(--amber-500);color:var(--gray-900);}
.oc-title{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 1.25rem 1rem;text-align:center;}
.oc-body{padding:.75rem 1.25rem 1.5rem;text-align:center;}
.oc-title h3{font-family:var(--font-display);font-weight:900;color:#fff;line-height:1.12;
  font-size:1.5rem;margin:0;text-shadow:0 2px 12px rgba(0,0,0,.6);}
.oc-terms{color:var(--gray-400);font-size:.78rem;line-height:1.5;margin:0;}
.oc-more{display:inline-flex;align-items:center;gap:.3rem;color:var(--amber-500);
  font-weight:700;font-size:.85rem;margin-top:.75rem;}
.oc-more svg{width:14px;height:14px;}
/* 4th card is desktop-only - user's call, to save vertical space on phones */
.oc--wide{display:none;}

/* ===== TELEGRAM WIDGET ===== */
.tgw{position:fixed;right:1rem;bottom:6.5rem;z-index:70;width:min(21rem,calc(100vw - 2rem));
  background:#fff;border-radius:var(--r-lg);box-shadow:0 20px 55px rgba(0,0,0,.4);overflow:hidden;
  display:none;}
.tgw.open{display:block;animation:fade-in .25s ease-out;}
.tgw .hd{background:var(--forest);padding:1rem;display:flex;align-items:center;gap:.75rem;}
.tgw .av{width:2.5rem;height:2.5rem;border-radius:50%;background:var(--tg);display:flex;
  align-items:center;justify-content:center;flex:none;}
.tgw .av svg{width:18px;height:18px;color:#fff;}
.tgw .who{font-weight:700;color:#fff;}
.tgw .st{font-size:.82rem;color:var(--gray-400);}
.tgw .x{margin-left:auto;color:var(--gray-400);width:32px;height:32px;display:flex;
  align-items:center;justify-content:center;}
.tgw .x svg{width:18px;height:18px;}
.tgw .bd{padding:1rem;}
.tgw .bub{background:var(--stone-50);border-radius:var(--r-md);padding:.9rem;color:#374151;
  font-size:.92rem;line-height:1.55;}
.tgw .bub .h{color:var(--gray-400);font-size:.8rem;margin-top:.5rem;}
.tgw .qmt{font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:#94a3b8;margin:1rem 0 .5rem;}
.tgw .qm{display:flex;flex-direction:column;gap:.4rem;}
.tgw .qm a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  border:1px solid var(--gray-200);border-radius:var(--r);padding:.7rem .85rem;color:var(--gray-900);
  font-size:.92rem;font-weight:500;transition:border-color .15s,background .15s;}
.tgw .qm a:hover{border-color:var(--tg);background:#229ED90d;}
.tgw .qm a svg{width:15px;height:15px;color:var(--gray-400);flex:none;}
.tgw .ft{padding:0 1rem 1rem;}

/* ===== FLOATING ACTION BUTTONS ===== */
.fabs{position:fixed;left:0;right:0;bottom:1rem;z-index:60;display:flex;justify-content:space-between;
  padding:0 1rem;pointer-events:none;}
.fab{pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:.3rem;}
.fab .circ{width:3.5rem;height:3.5rem;border-radius:50%;display:flex;align-items:center;
  justify-content:center;box-shadow:0 10px 28px rgba(0,0,0,.35);transition:transform .15s;}
.fab:hover .circ{transform:scale(1.06);}
.fab .circ svg{width:26px;height:26px;color:#fff;}
.fab .cap{font-size:.72rem;font-weight:700;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7);}
.fab-call .circ{background:var(--amber-500);}
.fab-call .circ svg{color:var(--gray-900);}
.fab-call .cap{color:var(--amber-400);}
.fab-tg .circ{background:var(--tg);}

/* ===== FOOTER ===== */
.ft{background:var(--forest-dark);padding:3rem 0 1.75rem;font-size:.93rem;}
.ft-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2rem;}
.ft-col h4{font-weight:700;font-size:.8rem;letter-spacing:.07em;text-transform:uppercase;
  color:#fff;margin:0 0 .9rem;}
.ft-col ul{list-style:none;margin:0;padding:0;}
.ft-col a,.ft-col p{color:var(--gray-400);display:block;margin-bottom:.55rem;line-height:1.5;}
.ft-col a:hover{color:var(--amber-500);}
.ft-col .logo img{height:42px;margin-bottom:.9rem;}
.ages{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.5rem;}
.age{display:flex;align-items:center;gap:.6rem;background:#ffffff0d;border:1px solid #ffffff1a;
  border-radius:var(--r-md);padding:.65rem .9rem;}
.age b{font-size:1.15rem;color:var(--amber-500);}
.age span{color:var(--gray-400);font-size:.78rem;line-height:1.3;}
.help{background:#ffffff08;border:1px solid #ffffff14;border-radius:var(--r-md);padding:1rem;
  margin-bottom:1.5rem;color:#cbd5d1;font-size:.9rem;line-height:1.6;}
.help strong{color:var(--amber-500);}
.legal{border-top:1px solid #ffffff14;padding-top:1.5rem;color:#8b9d92;line-height:1.65;font-size:.82rem;}
.orgs{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:1.25rem;}
.orgs a{color:#b6c7bd;font-weight:600;font-size:.85rem;}
.orgs a:hover{color:var(--amber-500);}
.legal p{margin:0 0 .75rem;}
.legal .cp{margin-top:1.25rem;color:#6d7f74;}

/* ===== DESKTOP ===== */
@media (min-width:768px){
  .topbar{padding:.6rem 1rem;font-size:.95rem;}
  .topbar .inner{gap:1.75rem;}
  .topbar .tg{display:inline-flex;}
  .topbar .ph .sep,.topbar .ph .num2{display:inline;}
  .openpill{font-size:.82rem;padding:.2rem .6rem;}
  .meet{grid-template-columns:repeat(2,1fr);}
  .offers-grid{grid-template-columns:repeat(2,1fr);max-width:56rem;}
  .oc--wide{display:block;}
  .oc-title h3{font-size:1.55rem;}
  .ft-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1024px){
  .sec{padding:4.5rem 0;}
  .hero{padding:5rem 0 5.5rem;}
  .hero .ctas{flex-direction:row;justify-content:center;}
  .hero .ctas .btn{width:auto;min-width:15rem;}
  /* nav/burger switch moved to 1200px - see below */
  .steps{flex-direction:row;max-width:none;gap:2rem;}
  .step{flex:1;}
  .step::after{content:"";position:absolute;top:1.5rem;left:calc(50% + 2.5rem);
    right:calc(-50% + 2.5rem);height:2px;background:#ffffff14;}
  .step:last-child::after{display:none;}
  .stats{grid-template-columns:repeat(4,1fr);max-width:64rem;gap:1.25rem;}
  .ft-grid{grid-template-columns:1.5fr 1fr 1fr 1fr;}
  .fabs{left:auto;right:1.5rem;bottom:1.5rem;gap:1rem;padding:0;}
  .tgw{right:1.5rem;bottom:7.5rem;}
}

/* Header nav budget at 1100px:
     logo 184 + 7 nav items ~660 + Open Account ~150 + padding 32 = ~1026. Fits.
   Adding the header "Message Us" button (~170) would push it to ~1196 - so that
   button waits until 1360. It's redundant anyway: the top bar and the FAB both
   link to Telegram. */
@media (min-width:1280px){
  .hdr .row{justify-content:space-evenly;}
  .nav{display:flex;}
  .hdr-cta{display:flex;}
  .burger{display:none;}
}
@media (min-width:1520px){
  .hdr-msg{display:inline-flex;}
  .nav a{padding:.55rem .9rem;}
  .nav{gap:.35rem;}
}


/* Offer-card background images (moved out of inline HTML so url() resolves
   from this stylesheet's folder, not the page URL). */
.ocimg-risk-free-bet{--oc-img-webp:url("assets/offers/risk-free-bet.webp");--oc-img:url("assets/offers/risk-free-bet.jpg");}
.ocimg-cashback{--oc-img-webp:url("assets/offers/cashback.webp");--oc-img:url("assets/offers/cashback.jpg");}
.ocimg-best-odds-guaranteed{--oc-img-webp:url("assets/offers/best-odds-guaranteed.webp");--oc-img:url("assets/offers/best-odds-guaranteed.jpg");}
.ocimg-daily-concessions{--oc-img-webp:url("assets/offers/daily-concessions.webp");--oc-img:url("assets/offers/daily-concessions.jpg");}
.ocimg-2up .oc-img{background-image:url("https://www.joejennings.co.uk/wp-content/uploads/ChatGPT-Image-Sep-15-2026-04_15_40-PM-1.png") !important;}


/* Telegram icons forced white (both were inheriting green). */
.fab-tg .circ svg{color:#ffffff!important;fill:#ffffff!important;}
.btn-tg-ghost svg{color:#ffffff!important;fill:#ffffff!important;}
/* How It Works step headings -> white (were inheriting dark). */
.step h3{color:#ffffff;}


/* ============================================================================
   INNER PAGES (JJ Inner Page 2026 template)
   Styles the-content() output from the WordPress editor so any inner page
   looks professional without per-page design work.
   ============================================================================ */
.inner{background:var(--forest);color:#fff;}

/* Page title band */
.page-hero{background:var(--forest);padding:2.75rem 0 2rem;}
.page-hero .wrap{max-width:1100px;}
.page-hero h1{font-family:var(--font-display);font-weight:900;color:#fff;
  font-size:clamp(1.9rem,5vw,2.9rem);line-height:1.1;margin:0;display:inline-block;
  padding-bottom:.6rem;border-bottom:3px solid var(--amber-500);}

/* Body content — readable measure, generous spacing */
.page-body{padding:2.75rem 0 3.5rem;}
.page-body .wrap{max-width:1100px;}
.entry{color:#dbe6de;font-size:1.15rem;line-height:1.75;text-align:justify;-webkit-hyphens:auto;hyphens:auto;}
.entry > *:first-child{margin-top:0;}

/* Headings inside content */
.entry h2{text-align:left;font-family:var(--font-display);font-weight:700;color:#fff;
  font-size:1.6rem;line-height:1.2;margin:2.5rem 0 .9rem;}
.entry h3{text-align:left;font-family:var(--font-display);font-weight:700;color:var(--amber-500);
  font-size:1.25rem;margin:2rem 0 .6rem;}
.entry h4{font-weight:700;color:#fff;font-size:1.08rem;margin:1.6rem 0 .5rem;}

/* Paragraphs, lists */
.entry p{margin:0 0 1.15rem;}
.entry ul,.entry ol{margin:0 0 1.3rem;padding-left:1.6rem;}
.entry ul{list-style:disc outside;}
.entry ol{list-style:decimal outside;}
.entry ul li,.entry ol li{display:list-item;list-style:inherit;}
.entry li{margin-bottom:.55rem;}
.entry ul li::marker{color:var(--amber-500);}
.entry ol li::marker{color:var(--amber-500);font-weight:700;}

/* Links */
.entry a{color:var(--amber-500);text-decoration:underline;text-underline-offset:2px;}
.entry a:hover{color:var(--amber-400);}

/* Strong / emphasis */
.entry strong,.entry b{color:#fff;font-weight:700;}

/* Images the editor drops in */
.entry img{max-width:100%;height:auto;border-radius:var(--r-md);margin:1.5rem 0;}

/* Tables (rules pages, T&Cs) */
.entry table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.98rem;}
.entry th,.entry td{border:1px solid #ffffff1f;padding:.7rem .85rem;text-align:left;}
.entry th{background:#ffffff0d;color:#fff;font-weight:700;}

/* Blockquote */
.entry blockquote{border-left:3px solid var(--amber-500);margin:1.5rem 0;
  padding:.5rem 0 .5rem 1.25rem;color:#cbd5d1;font-style:italic;}

/* Buttons the editor/shortcodes may output — keep them on-brand */
.entry .wp-block-button__link,.entry .button{display:inline-block;background:var(--amber-500);
  color:var(--gray-900);font-weight:700;padding:.75rem 1.5rem;border-radius:var(--r);
  text-decoration:none;margin:.5rem 0;}

/* Buttons row / CTA at the bottom of a page (optional helper class) */
.entry .jj-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem;}

/* Horizontal rule */
.entry hr{border:none;border-top:1px solid #ffffff1f;margin:2.5rem 0;}


/* ============================================================================
   TEAM CARDS (for About Us) — responsive grid of photo + name + role + bio.
   Add each person with the .team-card snippet inside a .team-grid wrapper.
   ============================================================================ */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:2rem 0;}
.team-card{background:#0b2417;border:1px solid #ffffff14;border-radius:var(--r-lg);
  overflow:hidden;text-align:center;transition:transform .18s,border-color .18s;}
.team-card:hover{transform:translateY(-3px);border-color:#faea2740;}
.team-card .photo{width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--forest-mid);}
.team-card .photo img{width:100%;height:100%;object-fit:cover;display:block;margin:0;border-radius:0;}
.team-card .info{padding:1.25rem;}
.team-card .name{font-family:var(--font-display);font-weight:900;color:#fff;
  font-size:1.2rem;line-height:1.2;margin:0 0 .25rem;}
.team-card .role{color:var(--amber-500);font-weight:700;font-size:.9rem;margin:0 0 .75rem;}
.team-card .bio{color:#cbd5d1;font-size:.9rem;line-height:1.55;margin:0;text-align:left;}
@media (min-width:960px){ .team-grid{grid-template-columns:repeat(3,1fr);gap:1.25rem;} }


/* Inner pages: reduce side gutters on mobile so content + cards use the width. */
@media (max-width:600px){
  .inner .wrap{padding-left:.6rem;padding-right:.6rem;}
  .entry{font-size:1.08rem;text-align:left;}  /* justify off on small screens - looks ragged narrow */
  .team-card .info{padding:.9rem;}
  .team-card .name{font-size:1.05rem;}
  .team-card .bio{font-size:.82rem;}
}


/* How-To-Bet 3-step graphic embedded in an inner page's text flow. */
.entry .how-to-steps{max-width:none;margin:2rem 0;flex-direction:row;flex-wrap:wrap;
  justify-content:space-between;gap:1.25rem;text-align:center;}
.entry .how-to-steps .step{flex:1 1 200px;background:#0b2417;border:1px solid #ffffff14;
  border-radius:var(--r-lg);padding:1.5rem 1.25rem;}
.entry .how-to-steps .step .n{width:2.75rem;height:2.75rem;border-radius:var(--r-md);
  background:var(--amber-500);color:var(--gray-900);font-weight:900;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;margin:0 auto 1rem;}
.entry .how-to-steps .step h3{color:#fff;font-size:1.15rem;margin:0 0 .5rem;text-align:center;}
.entry .how-to-steps .step p{color:#cbd5d1;font-size:.92rem;line-height:1.55;margin:0;text-align:center;}
@media (max-width:600px){ .entry .how-to-steps{flex-direction:column;} }

/* Remove the connector line between the How-To-Bet step cards (only the homepage
   version has the joining line). */
.entry .how-to-steps .step::after{display:none!important;}


/* ===== OFFERS PAGE — card grid inside inner-page content ===== */
.entry .offers-page-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin:2rem 0 2.5rem;}
.entry .offers-page-grid .oc{background:#0b2417;border:1px solid #ffffff14;border-radius:var(--r-lg);
  overflow:hidden;margin:0;}
.entry .offers-page-grid .oc-img{position:relative;padding-top:56%;background-size:cover;
  background-position:center;background-image:var(--oc-img);}
.entry .offers-page-grid .oc-img .oc-pill{position:absolute;top:.75rem;left:.75rem;z-index:2;
  background:var(--amber-500);color:var(--gray-900);font-weight:700;font-size:.72rem;
  padding:.25rem .6rem;border-radius:100px;text-transform:uppercase;letter-spacing:.03em;}
.entry .offers-page-grid .oc-title{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:1.5rem 1rem .85rem;background:linear-gradient(to top,#000000e6 0%,#00000000 100%);}
.entry .offers-page-grid .oc-title h3{color:#fff;margin:0;font-size:1.2rem;text-align:left;}
.entry .offers-page-grid .oc-body{padding:1rem;}
.entry .offers-page-grid .oc-terms{color:#cbd5d1;font-size:.9rem;line-height:1.5;margin:0;text-align:left;}
@media (min-width:640px){ .entry .offers-page-grid{grid-template-columns:repeat(2,1fr);} }
@media (min-width:980px){ .entry .offers-page-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));} }
/* webp support: use image-set where available */
.entry .ocimg-risk-free-bet .oc-img{background-image:image-set(var(--oc-img-webp) type("image/webp"), var(--oc-img) type("image/jpeg"));}
.entry .ocimg-best-odds-guaranteed .oc-img{background-image:image-set(var(--oc-img-webp) type("image/webp"), var(--oc-img) type("image/jpeg"));}
.entry .ocimg-cashback .oc-img{background-image:image-set(var(--oc-img-webp) type("image/webp"), var(--oc-img) type("image/jpeg"));}
.entry .ocimg-daily-concessions .oc-img{background-image:image-set(var(--oc-img-webp) type("image/webp"), var(--oc-img) type("image/jpeg"));}


/* ===== FIND US — map + shop list ===== */
.entry .wpgmza_map,.entry .wpgmza-google-maps-container{border-radius:var(--r-lg);overflow:hidden;
  margin:1.5rem 0 2rem;border:1px solid #ffffff14;}
.entry h3 + ul{margin-top:.5rem;}
/* shop list: 2-col on wider screens for a tidy layout */
@media (min-width:640px){
  .entry .find-us-shops{columns:2;column-gap:2rem;}
}


/* ===== Settlement tables (Asian Handicap etc.) — crisp, mobile-friendly ===== */
.entry table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.95rem;
  background:#0b2417;border-radius:var(--r-md);overflow:hidden;}
.entry table th{background:#12351f;color:var(--amber-500);font-weight:700;
  text-align:left;padding:.6rem .8rem;border:1px solid #ffffff14;}
.entry table td{padding:.55rem .8rem;border:1px solid #ffffff10;color:#dbe6de;vertical-align:middle;}
.entry table tr:hover td{background:#ffffff06;}
/* on small screens, let wide tables scroll horizontally rather than squash */
@media (max-width:600px){
  .entry table{display:block;overflow-x:auto;white-space:nowrap;font-size:.85rem;}
}


/* ===== TESTIMONIALS — styled quote cards ===== */
.entry .jj-quotes{display:grid;grid-template-columns:1fr;gap:1.1rem;margin:2rem 0;}
.entry .jj-quote{position:relative;background:#0b2417;border:1px solid #ffffff14;
  border-left:3px solid var(--amber-500);border-radius:var(--r-md);
  margin:0;padding:1.4rem 1.5rem 1.4rem 3rem;color:#e4ede8;font-size:1.02rem;
  line-height:1.6;font-style:italic;text-align:left;}
.entry .jj-quote::before{content:"\201C";position:absolute;left:.8rem;top:.4rem;
  font-family:Georgia,serif;font-size:2.6rem;color:var(--amber-500);opacity:.55;
  font-style:normal;line-height:1;}
.entry .jj-quote p{margin:0 0 .7rem;font-style:italic;}
.entry .jj-quote p:last-child{margin-bottom:0;}
.entry .jj-quote-long{background:#0c2a1a;border-left-width:4px;}
@media (min-width:820px){
  .entry .jj-quotes{grid-template-columns:1fr 1fr;}
  .entry .jj-quote-long{grid-column:1 / -1;}  /* the long one spans full width */
}


/* ===== SPORTS MARQUEE — continuous scroll band (replaces featured race) ===== */
.sports-band{background:var(--forest-dark);border-top:1px solid #ffffff10;
  border-bottom:1px solid #ffffff10;padding:1.5rem 0;overflow:hidden;}
.sports-band-inner{width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);}
.sports-track{display:flex;width:max-content;gap:2.75rem;
  animation:sports-scroll 60s linear infinite;}
.sports-band:hover .sports-track{animation-play-state:paused;}
.sport{display:flex;flex-direction:column;align-items:center;gap:.5rem;
  color:#cfe0d6;flex:0 0 auto;min-width:74px;transition:color .2s;}
.sport svg{width:34px;height:34px;color:var(--amber-500);}
.sport span{font-size:.78rem;font-weight:600;white-space:nowrap;letter-spacing:.01em;}
.sport:hover{color:#fff;}
@keyframes sports-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}   /* -50% because content is doubled */
}
@media (max-width:600px){
  .sports-band{padding:1.1rem 0;}
  .sport svg{width:28px;height:28px;}
  .sport span{font-size:.72rem;}
  .sports-track{gap:2rem;animation-duration:45s;}
}
@media (prefers-reduced-motion:reduce){
  .sports-track{animation:none;flex-wrap:wrap;justify-content:center;width:100%;gap:1.5rem 2rem;}
}

/* Hero Telegram button icon forced white */
.btn-tg svg{color:#fff!important;fill:#fff!important;}

/* Any Telegram plane icon inside the hero -> white */
.hero .tg svg,.hero .btn-tg svg,.hero svg.i-tg{color:#fff!important;fill:#fff!important;}


/* Mobile header: cap the logo width so it stops before the burger, with even gaps. */
@media (max-width:1279px){
  .hdr .row{justify-content:space-between;gap:.75rem;padding-left:1rem;padding-right:1rem;}
  .hdr .logo{flex:0 1 auto;min-width:0;max-width:70vw;}
  .hdr .logo .logo-mark{width:auto;max-width:100%;height:48px;}
  .burger{flex:0 0 auto;}
}
@media (max-width:600px){
  .hdr .logo{max-width:68vw;}
  .hdr .logo .logo-mark{height:43px;}
}

/* White Telegram plane (header Message Us) */
.i-tgwhite{color:#fff;fill:#fff;}


/* Centre the logo in the header */
@media (max-width:1279px){
  .hdr .row{position:relative;justify-content:center;}
  .hdr .logo{position:static;margin:0 auto;}
  .burger{position:absolute;right:1rem;top:50%;transform:translateY(-50%);}
}


/* Mobile menu: cap logo so it fits beside the X with no horizontal scroll. */
.mmenu .top{gap:1rem;}
.mmenu .top .logo{flex:1 1 auto;min-width:0;max-width:calc(100% - 60px);}
.mmenu .top .logo .logo-mark{width:auto;max-width:100%;height:34px;}
.mmenu .top .x{flex:0 0 44px;}
.mmenu *{max-width:100%;box-sizing:border-box;}


/* ===== WhatsApp elements (WhatsApp green #25D366) ===== */
.btn-wa{background:#25D366;color:#fff;border:1px solid #25D366;}
.btn-wa:hover{background:#20c05c;border-color:#20c05c;transform:translateY(-1px);}
.btn-wa svg{color:#fff;fill:#fff;}
/* topbar WhatsApp link */
.topbar .wa{display:none;align-items:center;gap:.5rem;color:#25D366;font-weight:600;white-space:nowrap;}
.topbar .wa svg{width:18px;height:18px;flex:none;color:#25D366;fill:#25D366;}
.topbar .wa .handle{color:#fff;font-weight:700;}
@media (min-width:1024px){ .topbar .wa{display:inline-flex;} }
/* WhatsApp FAB */
.fab-wa .circ{background:#25D366;animation:pulse-wa 3s ease-in-out infinite;}
.fab-wa .circ svg{color:#fff;fill:#fff;}
.fab-wa .cap{color:#25D366;}
@keyframes pulse-wa{
  0%,to{box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 0 #25D36680;}
  50%{box-shadow:0 10px 28px rgba(0,0,0,.35),0 0 0 12px #25D36600;}
}
/* FAB layout: Call on the LEFT, WhatsApp + Telegram grouped on the RIGHT */
.fabs{align-items:flex-end;}
.fab-call{margin-right:auto;}
.fab-wa,.fab-tg{margin-left:.75rem;}


/* ===== TOP BAR — continuous rolling ticker, single line ===== */
.topbar{background:var(--forest-dark);padding:0;overflow:hidden;height:2.4rem;
  display:flex;align-items:center;border-bottom:1px solid #ffffff10;}
.tk-viewport{width:100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);}
.tk-track{display:flex;align-items:center;width:max-content;gap:3rem;
  animation:tk-scroll 38s linear infinite;white-space:nowrap;}
.topbar:hover .tk-track{animation-play-state:paused;}
.tk-item{display:inline-flex;align-items:center;gap:.4rem;font-size:.82rem;
  line-height:1;color:#cfe0d6;text-decoration:none;flex:0 0 auto;font-weight:600;}
.tk-item svg{width:16px;height:16px;flex:none;}
.tk-item b{font-weight:700;color:#fff;}
.tk-item span{color:#cfe0d6;}
.tk-wa svg{color:#25D366;fill:#25D366;}
.tk-wa b{color:#fff;}
.tk-tg svg{color:#fff;fill:#fff;}
.tk-ph svg{color:var(--amber-500);}
.tk-ph b{color:var(--amber-500);}
.tk-open svg{color:#7bdca0;}
.tk-open b{color:#7bdca0;font-weight:600;}
@keyframes tk-scroll{
  from{transform:translateX(0);}
  to{transform:translateX(-50%);}   /* doubled content -> seamless */
}
@media (prefers-reduced-motion:reduce){
  .tk-track{animation:none;}
}


/* ===== HOW TO BET — clickable method cards ===== */
.entry .method-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2.25rem 0 3rem;}
.entry .method-card{position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:.4rem;background:linear-gradient(160deg,#0d2c1b 0%,#0a2114 100%);
  border:1px solid #ffffff14;border-radius:var(--r-lg);padding:2rem 1.25rem 1.75rem;
  text-decoration:none;overflow:hidden;transition:transform .22s ease,border-color .22s,box-shadow .22s;}
.entry .method-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:currentColor;opacity:.9;}
.entry .method-card:hover{transform:translateY(-4px);border-color:#ffffff2e;
  box-shadow:0 14px 34px rgba(0,0,0,.32);}
/* icon in a soft coloured badge */
.entry .method-card .mc-ic{width:4rem;height:4rem;border-radius:50%;display:flex;
  align-items:center;justify-content:center;margin-bottom:.7rem;
  background:color-mix(in srgb, currentColor 16%, transparent);
  border:1px solid color-mix(in srgb, currentColor 35%, transparent);}
.entry .method-card .mc-ic svg{width:2rem;height:2rem;}
.entry .method-card .mc-title{font-family:var(--font-display);font-weight:800;
  font-size:1.3rem;color:#fff;letter-spacing:-.01em;}
.entry .method-card .mc-sub{font-size:.88rem;color:var(--gray-400);}
.entry .method-card .mc-go{margin-top:.6rem;font-size:.8rem;font-weight:700;
  color:currentColor;display:inline-flex;align-items:center;gap:.3rem;
  opacity:.85;transition:gap .2s,opacity .2s;}
.entry .method-card:hover .mc-go{gap:.55rem;opacity:1;}
/* per-method brand colour drives the accent bar, badge + arrow */
.entry .mc-phone{color:var(--amber-500);}
.entry .mc-wa{color:#25D366;}
.entry .mc-tg{color:#229ED9;}
.entry .method-card .mc-ic{color:inherit;}
.entry .method-card .mc-title,.entry .method-card .mc-sub{color:#fff;}
.entry .method-card .mc-sub{color:var(--gray-400);}
/* offset anchor jumps so the sticky header doesn't cover the heading */
/* Anchor-jump offset. The sticky header (.hdr.small) measures ~61px, so we
   clear it plus a little breathing room. Previously set far too high (144px),
   which overshot and scrolled the heading off the top of the screen. */
#bet-by-phone,#bet-by-whatsapp,#bet-by-telegram,
h2[id],h3[id]{scroll-margin-top:80px !important;}

/* Method cards: always 3 across; shrink hard on mobile so all 3 fit in one row. */
@media (max-width:600px){
  .entry .method-cards{gap:.45rem;margin:1.5rem 0 2rem;}
  .entry .method-card{padding:.85rem .35rem .75rem;border-radius:10px;gap:.25rem;min-width:0;}
  .entry .method-card::before{height:2px;}
  .entry .method-card .mc-ic{width:2.1rem;height:2.1rem;margin-bottom:.35rem;}
  .entry .method-card .mc-ic svg{width:1.05rem;height:1.05rem;}
  .entry .method-card .mc-title{font-size:.72rem;line-height:1.15;letter-spacing:0;}
  .entry .method-card .mc-sub{display:none;}
  .entry .method-card .mc-go{font-size:.6rem;margin-top:.3rem;gap:.2rem;}
  .entry .method-card .mc-go svg{width:9px;height:9px;}
}
@media (max-width:400px){
  .entry .method-cards{gap:.35rem;}
  .entry .method-card{padding:.7rem .25rem .6rem;}
  .entry .method-card .mc-title{font-size:.66rem;}
  .entry .method-card .mc-go{display:none;}
}


/* ===== HOME BUTTON UPDATES (Chris's changes) ===== */
/* WhatsApp logo inside the hero WhatsApp button */
.btn-wa .i-wa{width:1.1em;height:1.1em;vertical-align:-0.15em;margin-right:.15em;
  color:#fff;fill:#fff;display:inline-block;}
/* Header: now only the Sign Up button remains — keep it neatly placed (desktop only, matches the existing .hdr-cta show/hide breakpoint) */
@media (min-width:1280px){ .hdr-cta{display:flex;align-items:center;justify-content:flex-end;gap:.6rem;} }
/* Telegram logo inside the hero Telegram button (match WhatsApp icon sizing) */
.btn-tg .i-tg-btn{width:1.1em;height:1.1em;vertical-align:-0.15em;margin-right:.15em;
  color:#fff;fill:#fff;display:inline-block;}


/* how-to-bet video is now unwrapped with inline styling - no CSS needed */