/* ==========================================================================
   matchedbetting.co.za  |  Design system v3.0
   Palette and type derived from the 22 Sep 2026 brand identity pack.
   Bright, high contrast, mobile first, fast.
   ========================================================================== */

/* --- 1. Tokens ------------------------------------------------------------ */
:root{
  --navy-900:#02101F;
  --navy-850:#031628;
  --navy-800:#051B36;
  --navy-700:#0A2647;
  --navy-600:#0F3A6B;
  --navy-500:#15507F;

  --blue-700:#0847A8;
  --blue-600:#0A5BD7;
  --blue-500:#0D7BF0;
  --blue-400:#3B9BFF;

  --cyan-600:#0092BF;
  --cyan-500:#00B4E6;
  --cyan-400:#12D8F5;
  --cyan-300:#00F2E5;
  --cyan-100:#D6F6FF;

  --ice-50:#FAFDFF;
  --ice-100:#F4FAFF;
  --ice-200:#E7F4FD;
  --ice-300:#D3E9F8;

  --white:#FFFFFF;
  --ink:#051B36;
  --body:#3A5573;
  --muted:#6B8098;
  --line:#DFEBF6;
  --line-strong:#C6DCF0;

  --profit:#00A06B;
  --profit-bright:#22E39A;
  --profit-soft:#E4F8F0;
  --warn:#A86A00;
  --warn-soft:#FFF5E0;
  --danger:#D2342A;
  --danger-soft:#FDECEA;
  --gold:#FFB100;
  --gold-soft:#FFF6DE;

  --grad-cta:linear-gradient(112deg,var(--blue-600) 0%,var(--cyan-500) 100%);
  --grad-cta-bright:linear-gradient(112deg,var(--cyan-300) 0%,var(--cyan-400) 45%,var(--cyan-500) 100%);
  --grad-cta-hover:linear-gradient(112deg,var(--blue-700) 0%,var(--cyan-600) 100%);
  --grad-band:linear-gradient(155deg,var(--navy-900) 0%,var(--navy-800) 45%,var(--navy-700) 100%);
  --grad-text:linear-gradient(104deg,var(--cyan-400) 0%,var(--cyan-300) 55%,var(--blue-400) 100%);

  --shadow-xs:0 1px 2px rgba(5,27,54,.06);
  --shadow-sm:0 2px 8px rgba(5,27,54,.07);
  --shadow-md:0 10px 28px -10px rgba(5,27,54,.18);
  --shadow-lg:0 26px 60px -22px rgba(5,27,54,.30);
  --shadow-glow:0 14px 40px -12px rgba(0,180,230,.55);

  --r-sm:9px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;
  --r-pill:999px;

  --maxw:1180px;
  --maxw-narrow:760px;

  --ff-head:'Archivo','Arial Black',system-ui,sans-serif;
  --ff-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;

  --nav-h:66px;
}

/* --- 2. Reset ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.68;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none}
a{color:var(--blue-600);text-decoration:none}
a:hover{color:var(--blue-700);text-decoration:underline}
ul,ol{padding-left:1.15rem}
li{margin-bottom:.35rem}
table{border-collapse:collapse;width:100%}
strong,b{font-weight:700;color:var(--ink)}
hr{border:none;border-top:1px solid var(--line);margin:2rem 0}
:focus-visible{outline:3px solid var(--cyan-500);outline-offset:2px;border-radius:4px}

/* --- 3. Type -------------------------------------------------------------- */
h1,h2,h3,h4,h5{font-family:var(--ff-head);color:var(--ink);line-height:1.1;letter-spacing:-.028em;font-weight:800}
h1{font-size:clamp(2.05rem,6.2vw,3.85rem);letter-spacing:-.04em;line-height:1.02}
h2{font-size:clamp(1.6rem,4.1vw,2.6rem);letter-spacing:-.034em}
h3{font-size:clamp(1.16rem,2.5vw,1.5rem)}
h4{font-size:1.06rem;letter-spacing:-.015em}
p{margin-bottom:1rem}
p:last-child{margin-bottom:0}

.eyebrow{
  font-family:var(--ff-head);
  font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--cyan-600);margin-bottom:.85rem;display:inline-flex;align-items:center;gap:.55rem;
}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--cyan-500);border-radius:2px}
.eyebrow.on-dark{color:var(--cyan-300)}

.lead{font-size:clamp(1rem,2.05vw,1.19rem);line-height:1.62;color:var(--body)}
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4,.on-dark .lead{color:#fff}
.on-dark .lead{color:rgba(255,255,255,.82)}
.on-dark p{color:rgba(255,255,255,.8)}
.on-dark strong{color:#fff}
.on-dark a{color:var(--cyan-300)}
/* Buttons must win over the .on-dark link colour. Without this, a bright CTA on a dark
   band renders cyan text on a cyan gradient, which is effectively invisible. */
.on-dark a.btn{color:#fff}
.on-dark a.btn-bright{color:var(--navy-900)}
.on-dark a.btn-outline{color:#fff;border-color:rgba(255,255,255,.38)}
.on-dark a.btn-outline:hover{color:var(--navy-900);background:#fff;border-color:#fff}

.grad-text{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}
.tiny{font-size:.8rem;color:var(--muted)}
.on-dark .tiny{color:rgba(255,255,255,.6)}
.center{text-align:center}
.narrow{max-width:var(--maxw-narrow);margin-left:auto;margin-right:auto}

/* --- 4. Layout ------------------------------------------------------------ */
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 1.15rem}
.wrap-tight{max-width:900px}
section{padding:clamp(3rem,7vw,5.5rem) 0;position:relative}
section.tight{padding:clamp(2rem,4.5vw,3rem) 0}
.sec-head{max-width:760px;margin-bottom:clamp(1.75rem,4vw,2.75rem)}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center}
.sec-head p{font-size:clamp(.97rem,1.9vw,1.09rem);color:var(--body)}
.on-dark .sec-head p{color:rgba(255,255,255,.78)}

.band{background:var(--grad-band);color:#fff;position:relative;overflow:hidden}
.band::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 45% at 12% 0%,rgba(0,180,230,.22),transparent 65%),
    radial-gradient(ellipse 55% 50% at 92% 100%,rgba(0,242,229,.14),transparent 60%);
}
.band>*{position:relative;z-index:1}
.band-ice{background:var(--ice-100)}
.band-soft{background:linear-gradient(180deg,var(--white),var(--ice-100))}

.grid{display:grid;gap:1.1rem}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}

/* --- 5. Buttons ----------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--ff-head);font-weight:800;font-size:1rem;letter-spacing:-.01em;
  padding:.95rem 1.6rem;border-radius:var(--r-pill);border:none;
  text-decoration:none;text-align:center;line-height:1.2;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
  white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--grad-cta);color:#fff;box-shadow:var(--shadow-glow)}
.btn-primary:hover{color:#fff;background:var(--grad-cta-hover)}
.btn-bright{background:var(--grad-cta-bright);color:var(--navy-900);box-shadow:0 14px 40px -12px rgba(0,242,229,.6)}
.btn-bright:hover{color:var(--navy-900);filter:brightness(1.06)}
.btn-ink{background:var(--navy-800);color:#fff;box-shadow:var(--shadow-md)}
.btn-ink:hover{color:#fff;background:var(--navy-700)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.btn-ghost:hover{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.btn-outline{background:transparent;color:var(--navy-800);border:1.5px solid var(--line-strong)}
.btn-outline:hover{color:var(--navy-800);border-color:var(--navy-800);background:var(--ice-100)}
.btn-sm{padding:.66rem 1.15rem;font-size:.875rem}
.btn-lg{padding:1.1rem 2rem;font-size:1.09rem}
.btn-block{display:flex;width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.btn-row.center{justify-content:center}

/* --- 6. Badges, chips, pills --------------------------------------------- */
.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.79rem;font-weight:600;padding:.32rem .72rem;border-radius:var(--r-pill);
  background:var(--ice-200);color:var(--navy-700);line-height:1.35;
}
.chip svg{width:14px;height:14px;flex:none}
.chip-profit{background:var(--profit-soft);color:var(--profit)}
.chip-warn{background:var(--warn-soft);color:var(--warn)}
.chip-danger{background:var(--danger-soft);color:var(--danger)}
.chip-cyan{background:var(--cyan-100);color:var(--cyan-600)}
.chip-gold{background:var(--gold-soft);color:#8A6100}
.chip-dark{background:var(--navy-800);color:var(--cyan-300);border:1px solid var(--navy-600)}
.on-dark .chip{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.16)}
.on-dark .chip-profit{background:rgba(34,227,154,.14);color:var(--profit-bright);border-color:rgba(34,227,154,.3)}
.chip-row{display:flex;flex-wrap:wrap;gap:.5rem}

.badge{
  display:inline-flex;align-items:center;gap:.4rem;font-family:var(--ff-head);font-weight:800;
  font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.3rem .62rem;border-radius:6px;
}
.badge-verified{background:var(--profit-soft);color:var(--profit)}
.badge-live{background:#FF2E4C;color:#fff}
.badge-live .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.8)}}
.badge-new{background:var(--cyan-100);color:var(--cyan-600)}
.badge-soon{background:var(--ice-200);color:var(--muted)}

/* --- 7. Cards ------------------------------------------------------------- */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.4rem;box-shadow:var(--shadow-xs);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
.card-hover:hover{box-shadow:var(--shadow-md);transform:translateY(-3px);border-color:var(--line-strong)}
.card h3,.card h4{margin-bottom:.45rem}
.card p{font-size:.945rem}
.card-ice{background:var(--ice-100);border-color:var(--line)}
.card-navy{background:var(--navy-800);border-color:var(--navy-600);color:rgba(255,255,255,.8)}
.card-navy h3,.card-navy h4{color:#fff}
.on-dark .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.card-link{display:block;text-decoration:none;color:inherit}
.card-link:hover{text-decoration:none;color:inherit}
.card-icon{
  width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
  background:var(--cyan-100);color:var(--cyan-600);margin-bottom:.85rem;flex:none;
}
.card-icon svg{width:23px;height:23px}
.card-icon.profit{background:var(--profit-soft);color:var(--profit)}
.card-icon.blue{background:#E3EFFF;color:var(--blue-600)}
.card-icon.warn{background:var(--warn-soft);color:var(--warn)}
.on-dark .card-icon{background:rgba(0,242,229,.13);color:var(--cyan-300)}

/* --- 8. Stats -------------------------------------------------------------- */
.stat{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem 1.2rem;box-shadow:var(--shadow-xs);
}
.stat-val{
  font-family:var(--ff-head);font-weight:900;font-size:clamp(1.5rem,3.6vw,2.1rem);
  letter-spacing:-.04em;color:var(--ink);line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat-val.profit{color:var(--profit)}
.stat-val.cyan{color:var(--cyan-600)}
.stat-label{font-size:.79rem;color:var(--muted);margin-top:.35rem;line-height:1.4}
.stat-micro{font-size:.72rem;color:var(--muted);margin-top:.2rem}
.on-dark .stat{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.11)}
.on-dark .stat-val{color:#fff}
.on-dark .stat-val.profit{color:var(--profit-bright)}
.on-dark .stat-val.cyan{color:var(--cyan-300)}
.on-dark .stat-label,.on-dark .stat-micro{color:rgba(255,255,255,.6)}

/* --- 9. Navigation -------------------------------------------------------- */
.nav{
  position:sticky;top:0;z-index:80;background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--maxw);margin:0 auto;padding:.7rem 1.15rem;display:flex;align-items:center;
  gap:1rem;min-height:var(--nav-h);width:100%;overflow:hidden;
}
.nav-logo{display:flex;align-items:center;gap:.6rem;flex:0 1 auto;min-width:0;text-decoration:none}
.nav-logo img{height:30px;width:auto;max-width:100%;object-fit:contain}
.nav-logo:hover{text-decoration:none}
.nav-links{display:flex;align-items:center;gap:.15rem;margin-left:auto}
.nav-links a{
  font-size:.9rem;font-weight:600;color:var(--navy-700);padding:.5rem .7rem;border-radius:8px;
  text-decoration:none;white-space:nowrap;
}
.nav-links a:hover{background:var(--ice-200);color:var(--navy-800);text-decoration:none}
.nav-links a.is-active{color:var(--cyan-600);background:var(--cyan-100)}
.nav-cta{display:flex;align-items:center;gap:.5rem;flex:none}
.nav-cta .btn{padding:.62rem 1.1rem;font-size:.875rem}
.nav-burger{display:none;width:42px;height:42px;border-radius:10px;border:1px solid var(--line);background:#fff;place-items:center}
.nav-burger span{display:block;width:18px;height:2px;background:var(--navy-800);border-radius:2px;position:relative}
.nav-burger span::before,.nav-burger span::after{content:'';position:absolute;left:0;width:18px;height:2px;background:var(--navy-800);border-radius:2px}
.nav-burger span::before{top:-6px}
.nav-burger span::after{top:6px}
.nav-drawer{display:none}

@media(max-width:1040px){
  .nav-links{display:none}
  .nav-burger{display:grid}
  .nav-cta .btn{padding:.58rem .9rem;font-size:.82rem}
  .nav-links.open{
    display:flex;flex-direction:column;align-items:stretch;gap:.15rem;
    position:absolute;top:100%;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);
    padding:.7rem 1.15rem 1rem;box-shadow:var(--shadow-lg);
  }
  .nav-links.open a{padding:.72rem .5rem;font-size:1rem;border-bottom:1px solid var(--line)}
}

/* --- 10. Live countdown ---------------------------------------------------- */
.live-bar{
  display:flex;align-items:center;gap:.9rem;flex-wrap:wrap;justify-content:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-xl);padding:.55rem 1.05rem;width:fit-content;
}
.live-bar .label{font-size:.84rem;color:rgba(255,255,255,.75);font-weight:600}
.live-bar .time{font-family:var(--ff-head);font-weight:800;color:#fff;font-size:.95rem}
.cd{display:flex;gap:.4rem}
.cd-unit{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);
  border-radius:9px;padding:.32rem .48rem;text-align:center;min-width:50px;
}
.cd-num{font-family:var(--ff-head);font-weight:900;font-size:1.05rem;color:#fff;line-height:1;font-variant-numeric:tabular-nums}
.cd-lbl{font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.55);margin-top:.15rem}

/* --- 11. Hero -------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:clamp(2.4rem,6vw,4.5rem) 0 clamp(2.6rem,6vw,4.5rem)}
.hero::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 62% 55% at 8% 4%,rgba(0,180,230,.24),transparent 62%),
    radial-gradient(ellipse 55% 60% at 96% 12%,rgba(0,242,229,.15),transparent 58%),
    radial-gradient(ellipse 75% 45% at 55% 105%,rgba(13,123,240,.16),transparent 62%);
}
.hero>*{position:relative;z-index:1}
.hero h1{margin-bottom:1.1rem;max-width:16ch}
.hero .lead{max-width:56ch;font-size:clamp(1.02rem,2.1vw,1.22rem);margin-bottom:1.5rem}
.hero-proof{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:1.6rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-bottom:1.15rem}
.hero-live{margin-top:1.25rem}
.hero-note{font-size:.83rem;color:rgba(255,255,255,.6);display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}

.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.hero-visual{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-xl);padding:1.35rem;box-shadow:var(--shadow-lg);
  backdrop-filter:blur(6px);
}
.hero-visual .hv-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:1rem;padding-bottom:.85rem;border-bottom:1px solid rgba(255,255,255,.12)}
.hero-visual .hv-title{font-family:var(--ff-head);font-weight:800;color:#fff;font-size:.88rem}
.hero-visual .hv-label{font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:rgba(255,255,255,.5)}

.slip{display:grid;gap:.6rem;margin-bottom:1rem}
.slip-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;font-size:.86rem;padding:.5rem .7rem;border-radius:9px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09)}
.slip-row .k{color:rgba(255,255,255,.68);font-weight:600}
.slip-row .v{font-family:var(--ff-head);font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.slip-row.back{border-left:3px solid var(--blue-400)}
.slip-row.lay{border-left:3px solid #FF64B4}
.slip-row.result{background:rgba(34,227,154,.14);border-color:rgba(34,227,154,.35)}
.slip-row.result .k{color:var(--profit-bright)}
.slip-row.result .v{color:var(--profit-bright);font-size:1.05rem}

.card .slip-row,
.card-ice .slip-row{
  background:#fff;border:1px solid var(--line);
}
.card .slip-row .k,
.card-ice .slip-row .k{color:var(--muted)}
.card .slip-row .v,
.card-ice .slip-row .v{color:var(--ink)}
.card .slip-row.result,
.card-ice .slip-row.result{
  background:var(--profit-soft);border-color:rgba(0,160,107,.22);
}
.card .slip-row.result .k,
.card .slip-row.result .v,
.card-ice .slip-row.result .k,
.card-ice .slip-row.result .v{color:var(--profit)}

/* --- 11b. Method visual ---------------------------------------------------- */
.method-visual{
  display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:.7rem;align-items:stretch;
  margin:0 0 1.4rem;
}
.side-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:1.05rem 1.1rem;box-shadow:var(--shadow-sm);min-width:0;
}
.side-card h3{margin:.15rem 0 .4rem;font-size:1.18rem}
.side-card p{margin-bottom:.7rem;font-size:.92rem}
.side-kicker{
  font-family:var(--ff-head);font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:.2rem;
}
.back-side{border-top:5px solid var(--blue-500)}
.back-side .side-kicker{color:var(--blue-600)}
.lay-side{border-top:5px solid #E11D8F}
.lay-side .side-kicker{color:#C2187A}
.keep-side{border-top:5px solid var(--profit);background:linear-gradient(180deg,#fff,var(--profit-soft))}
.keep-side .side-kicker{color:var(--profit)}
.side-stat{
  font-family:var(--ff-head);font-weight:900;font-size:1.35rem;letter-spacing:-.04em;
  color:var(--ink);line-height:1;margin:.15rem 0 .45rem;
}
.side-stat.profit{color:var(--profit)}
.method-plus{
  font-family:var(--ff-head);font-weight:900;font-size:1.6rem;color:var(--cyan-600);
  display:grid;place-items:center;align-self:center;
}
.story-cards .story-card{min-height:100%}
.story-card .stat-val{margin:.35rem 0 .55rem}
.live-card{border-top:5px solid var(--cyan-500)}

/* --- 12. Tables ------------------------------------------------------------ */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.tbl{min-width:640px;font-size:.9rem}
.tbl th{
  font-family:var(--ff-head);font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);text-align:left;padding:.85rem .9rem;background:var(--ice-100);
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;
}
.tbl td{padding:.8rem .9rem;border-bottom:1px solid var(--line);color:var(--body);vertical-align:top}
.tbl tr:last-child td{border-bottom:none}
.tbl tbody tr:hover{background:var(--ice-50)}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink);white-space:nowrap}
.tbl .num.pos{color:var(--profit)}
.tbl .num.neg{color:var(--danger)}
.tbl .name{font-weight:700;color:var(--ink)}
.tbl tfoot td{font-weight:800;color:var(--ink);background:var(--ice-100);border-top:2px solid var(--line-strong)}
.on-dark .tbl-wrap{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}
.on-dark .tbl th{background:rgba(255,255,255,.06);color:rgba(255,255,255,.6);border-color:rgba(255,255,255,.12)}
.on-dark .tbl td{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.08)}
.on-dark .tbl .num,.on-dark .tbl .name{color:#fff}
.on-dark .tbl .num.pos{color:var(--profit-bright)}

/* --- 13. Calculator -------------------------------------------------------- */
.calc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-md);overflow:hidden}
.calc-tabs{display:flex;gap:.25rem;padding:.5rem;background:var(--ice-100);border-bottom:1px solid var(--line);overflow-x:auto}
.calc-tab{
  font-family:var(--ff-head);font-weight:800;font-size:.8rem;padding:.55rem .85rem;border-radius:8px;
  color:var(--navy-700);white-space:nowrap;flex:none;
}
.calc-tab:hover{background:rgba(0,0,0,.04)}
.calc-tab.active{background:var(--navy-800);color:#fff}
.calc-body{padding:1.35rem}
.calc-pane{display:none}
.calc-pane.active{display:block}
.field{margin-bottom:.9rem}
.field label{display:block;font-size:.83rem;font-weight:700;color:var(--ink);margin-bottom:.3rem}
.field .hint{font-size:.74rem;color:var(--muted);margin-top:.25rem;line-height:1.45}
.input,.select{
  width:100%;padding:.72rem .85rem;border:1.5px solid var(--line-strong);border-radius:var(--r-sm);
  background:#fff;font-size:1rem;font-weight:600;color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease;
}
.input:focus,.select:focus{outline:none;border-color:var(--cyan-500);box-shadow:0 0 0 3px rgba(0,180,230,.16)}
.input-group{position:relative}
.input-group .prefix{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);font-weight:700;color:var(--muted);font-size:.95rem;pointer-events:none}
.input-group .input{padding-left:2rem}
.field-2{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}

.calc-out{margin-top:1.15rem;border-top:1px solid var(--line);padding-top:1.15rem}
.out-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-bottom:.9rem}
.out{
  background:var(--ice-100);border:1px solid var(--line);border-radius:var(--r-sm);padding:.72rem .85rem;
}
.out .k{font-size:.71rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:.2rem}
.out .v{font-family:var(--ff-head);font-weight:900;font-size:1.22rem;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.out.out-profit{background:var(--profit-soft);border-color:rgba(0,160,107,.22)}
.out.out-profit .v{color:var(--profit)}
.out.out-loss{background:var(--warn-soft);border-color:rgba(168,106,0,.2)}
.out.out-loss .v{color:var(--warn)}
.out.out-big{grid-column:span 2}
.out.out-big .v{font-size:1.6rem}

.verdict{
  border-radius:var(--r-sm);padding:.8rem 1rem;font-size:.89rem;font-weight:600;display:flex;gap:.6rem;align-items:flex-start;
}
.verdict svg{width:18px;height:18px;flex:none;margin-top:.15rem}
.verdict.ok{background:var(--profit-soft);color:var(--profit)}
.verdict.warn{background:var(--warn-soft);color:var(--warn)}
.verdict.bad{background:var(--danger-soft);color:var(--danger)}

/* --- 14. Steps ------------------------------------------------------------- */
.steps{list-style:none;padding:0;counter-reset:s;display:grid;gap:1rem}
.steps li{counter-increment:s;display:flex;gap:.9rem;align-items:flex-start;margin:0}
.steps li::before{
  content:counter(s);flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--grad-cta);color:#fff;font-family:var(--ff-head);font-weight:900;font-size:.92rem;
  display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(0,180,230,.6);
}
.steps li .st-body{flex:1;min-width:0}
.steps li .st-body strong{display:block;color:var(--ink);font-family:var(--ff-head);font-weight:800;font-size:1rem;margin-bottom:.15rem}
.steps li .st-body p{font-size:.93rem;margin:0}
.on-dark .steps li::before{background:var(--grad-cta-bright);color:var(--navy-900)}
.on-dark .steps li .st-body strong{color:#fff}
.on-dark .steps li .st-body p{color:rgba(255,255,255,.78)}
.steps-lg li::before{width:44px;height:44px;font-size:1.08rem}

/* --- 15. Accordion --------------------------------------------------------- */
.faq-item{border:1px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:.6rem;overflow:hidden}
.faq-q{
  width:100%;text-align:left;padding:1.05rem 1.2rem;display:flex;gap:.9rem;align-items:center;justify-content:space-between;
  font-family:var(--ff-head);font-weight:800;font-size:1rem;color:var(--ink);line-height:1.35;
}
.faq-q:hover{background:var(--ice-50)}
.faq-q .icon{flex:none;width:22px;height:22px;position:relative}
.faq-q .icon::before,.faq-q .icon::after{content:'';position:absolute;background:var(--cyan-600);border-radius:2px;transition:transform .22s ease}
.faq-q .icon::before{top:10px;left:0;width:22px;height:2px}
.faq-q .icon::after{left:10px;top:0;width:2px;height:22px}
.faq-item.open .faq-q .icon::after{transform:scaleY(0)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a-in{padding:0 1.2rem 1.2rem;font-size:.95rem}
.faq-a-in p{margin-bottom:.7rem}
.faq-item.open .faq-a{max-height:1400px}

/* --- 16. Alerts ------------------------------------------------------------ */
.alert{border-radius:var(--r);padding:1.05rem 1.2rem;display:flex;gap:.85rem;align-items:flex-start;font-size:.93rem}
.alert svg{width:20px;height:20px;flex:none;margin-top:.15rem}
.alert-info{background:var(--ice-100);border:1px solid var(--line-strong);color:var(--navy-700)}
.alert-warn{background:var(--warn-soft);border:1px solid rgba(168,106,0,.22);color:#7A4D00}
.alert-danger{background:var(--danger-soft);border:1px solid rgba(210,52,42,.2);color:#9C2419}
.alert-profit{background:var(--profit-soft);border:1px solid rgba(0,160,107,.22);color:#00664A}
.alert strong{display:block;margin-bottom:.15rem;color:inherit}
.on-dark .alert-info{background:rgba(0,180,230,.1);border-color:rgba(0,242,229,.24);color:rgba(255,255,255,.86)}
.on-dark .alert-info strong{color:var(--cyan-300)}

.quote{
  border-left:3px solid var(--cyan-500);padding:.15rem 0 .15rem 1.1rem;
  font-size:1.03rem;font-style:italic;color:var(--navy-700);
}
.on-dark .quote{border-color:var(--cyan-300);color:rgba(255,255,255,.86)}

/* --- 17. Offer cards ------------------------------------------------------- */
.offer{
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--line-strong);
  border-radius:var(--r);padding:1.05rem 1.15rem;box-shadow:var(--shadow-xs);
}
.offer.done{border-left-color:var(--profit)}
.offer.running{border-left-color:var(--cyan-500)}
.offer.open{border-left-color:var(--gold)}
.offer.avoid{border-left-color:var(--danger)}
.offer-head{display:flex;justify-content:space-between;gap:.75rem;align-items:flex-start;margin-bottom:.55rem}
.offer-name{font-family:var(--ff-head);font-weight:800;font-size:1.05rem;color:var(--ink);line-height:1.2}
.offer-profit{font-family:var(--ff-head);font-weight:900;font-size:1.22rem;color:var(--profit);font-variant-numeric:tabular-nums;white-space:nowrap}
.offer-profit.neg{color:var(--danger)}
.offer-profit.pend{color:var(--cyan-600)}
.offer-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0}
.offer-meta .m{font-size:.76rem;background:var(--ice-100);border:1px solid var(--line);border-radius:6px;padding:.2rem .5rem;color:var(--navy-700);font-weight:600}
.offer p{font-size:.9rem;margin-bottom:.5rem}
.offer .lesson{font-size:.87rem;background:var(--warn-soft);border-radius:8px;padding:.6rem .75rem;color:#7A4D00;margin-top:.5rem}
.offer .lesson strong{color:#7A4D00}

/* --- 18. Progress ---------------------------------------------------------- */
.bar{height:8px;background:var(--ice-200);border-radius:99px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--grad-cta);border-radius:99px;transition:width .5s ease}
.milestone{position:relative;padding-left:2.1rem;padding-bottom:1.75rem;border-left:2px solid var(--line)}
.milestone:last-child{border-left-color:transparent;padding-bottom:0}
.milestone::before{
  content:'';position:absolute;left:-9px;top:.3rem;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--cyan-500);
}
.milestone.done::before{background:var(--profit);border-color:var(--profit)}
.milestone-amt{font-family:var(--ff-head);font-weight:900;font-size:1.35rem;color:var(--profit);letter-spacing:-.03em}
.milestone-date{font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:.15rem}
.milestone-title{font-family:var(--ff-head);font-weight:800;font-size:1.02rem;color:var(--ink);margin-bottom:.25rem}

/* --- 19. Forms ------------------------------------------------------------- */
.form-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(1.35rem,3.5vw,2.1rem);box-shadow:var(--shadow-lg)}
.form-grid{display:grid;gap:.9rem}
.form-grid.two{grid-template-columns:1fr 1fr}
label.lbl{display:block;font-size:.83rem;font-weight:700;color:var(--ink);margin-bottom:.3rem}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{font-size:.78rem;color:var(--muted);line-height:1.55}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.82rem;color:var(--body)}
.consent input{margin-top:.25rem;width:18px;height:18px;flex:none;accent-color:var(--cyan-600)}
#form-ok{display:none}
#form-ok.show{display:block}
#form-err{display:none;font-size:.85rem;color:var(--danger);margin-top:.5rem}
#form-err.show{display:block}
#training-err{display:none;font-size:.85rem;color:var(--danger);margin-top:.5rem}
#training-err.show{display:block}
#start-ok{display:none}
#start-ok.show{display:block}
#start-err{display:none;font-size:.85rem;color:var(--danger);margin-top:.5rem}
#start-err.show{display:block}
.start-hero h1{max-width:18ch}
.start-form-card{color:var(--ink)}
.start-form-card h3{margin-bottom:.2rem}
.start-live .form-card{background:#fff}
.btn[disabled]{opacity:.62;cursor:not-allowed;transform:none!important}

/* --- 20. Footer ------------------------------------------------------------ */
.foot{background:var(--navy-900);color:rgba(255,255,255,.72);padding:clamp(2.5rem,5vw,3.5rem) 0 1.5rem;font-size:.88rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem;margin-bottom:2.25rem}
.foot h5{font-family:var(--ff-head);font-weight:800;font-size:.72rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:.85rem}
.foot a{color:rgba(255,255,255,.75);display:block;padding:.19rem 0;font-size:.875rem}
.foot a:hover{color:var(--cyan-300);text-decoration:none}
.foot img{height:32px;margin-bottom:.9rem}
.foot-brand p{font-size:.86rem;max-width:34ch;color:rgba(255,255,255,.6)}
.foot-bottom{
  border-top:1px solid rgba(255,255,255,.1);padding-top:1.35rem;display:flex;flex-wrap:wrap;gap:1rem;
  justify-content:space-between;align-items:center;font-size:.79rem;color:rgba(255,255,255,.5);
}
.resp{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:var(--r);padding:1rem 1.15rem;margin-top:1.5rem;font-size:.8rem;color:rgba(255,255,255,.6)}
.resp strong{color:rgba(255,255,255,.85)}

/* --- 21. Sticky mobile CTA ------------------------------------------------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  padding:.6rem .9rem calc(.6rem + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  gap:.6rem;box-shadow:0 -8px 24px -12px rgba(5,27,54,.2);
}
.sticky-cta.show{display:flex}
.sticky-cta .btn{flex:1}
@media(max-width:640px){
  body{padding-bottom:86px}
  .sticky-cta{display:flex;gap:.45rem;padding:.55rem .7rem calc(.55rem + env(safe-area-inset-bottom))}
  .sticky-cta .btn{font-size:.86rem;padding:.78rem .7rem;white-space:nowrap}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .hero-proof{gap:.4rem}
  .hide-sm{display:none!important}
  .hero h1{max-width:none;font-size:clamp(1.85rem,8.4vw,2.4rem)}
  .hero .lead{font-size:1.02rem;margin-bottom:1.1rem}
  .hero{padding:2.1rem 0 2.4rem}
  .live-bar{width:100%;border-radius:18px;justify-content:flex-start;gap:.55rem;padding:.7rem .85rem}
  .live-bar .label{width:100%;font-size:.78rem}
  .cd-unit{min-width:44px}
  .hero-visual .tiny{display:none}
  .embed-frame iframe{min-height:70vh}
  .method-visual{grid-template-columns:1fr;gap:.55rem}
  .method-plus{transform:rotate(90deg);font-size:1.2rem;padding:.1rem 0}
  .side-card{padding:.95rem 1rem}
}

/* --- 22. Utilities --------------------------------------------------------- */
.mt0{margin-top:0}.mt1{margin-top:.5rem}.mt2{margin-top:1rem}.mt3{margin-top:1.5rem}.mt4{margin-top:2rem}
.mb0{margin-bottom:0}.mb1{margin-bottom:.5rem}.mb2{margin-bottom:1rem}.mb3{margin-bottom:1.5rem}.mb4{margin-bottom:2rem}
.flex{display:flex}.between{justify-content:space-between}.wrap-f{flex-wrap:wrap}.items-c{align-items:center}
.gap1{gap:.5rem}.gap2{gap:1rem}.gap3{gap:1.5rem}
.hide{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.nowrap{white-space:nowrap}
.link-arrow{font-weight:700;display:inline-flex;align-items:center;gap:.35rem}
.link-arrow svg{transition:transform .18s ease}
.link-arrow:hover svg{transform:translateX(3px)}
.divider{height:1px;background:var(--line);margin:1.5rem 0;border:none}
.read-time{font-size:.76rem;color:var(--muted);font-weight:600;letter-spacing:.03em}
.breadcrumb{font-size:.79rem;color:var(--muted);margin-bottom:.9rem}
.breadcrumb a{color:var(--muted)}
.anchor-nav{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:1.75rem}
.anchor-nav a{font-size:.82rem;font-weight:600;padding:.4rem .75rem;border-radius:var(--r-pill);background:var(--ice-100);border:1px solid var(--line);color:var(--navy-700)}
.anchor-nav a:hover{background:var(--cyan-100);border-color:var(--cyan-400);text-decoration:none}
.toc{border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.25rem;background:var(--ice-100);margin-bottom:2rem}
.toc h4{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.toc ol{margin:0;padding-left:1.2rem;font-size:.9rem}
.toc a{font-weight:600}

/* --- 23. Responsive -------------------------------------------------------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:2rem}
  .split{grid-template-columns:1fr;gap:1.75rem}
  .g4{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:repeat(2,1fr)}
  .foot-grid{grid-template-columns:1fr 1fr;gap:1.5rem}
  .method-visual{grid-template-columns:1fr;gap:.6rem}
  .method-plus{transform:rotate(90deg);padding:.15rem 0}
}
@media(max-width:620px){
  .nav-in{gap:.5rem}
  .nav-logo img{height:24px}
  .nav-burger{width:40px;height:40px}
  .nav-cta .btn{padding:.48rem .72rem;font-size:.76rem}
}

@media(max-width:640px){
  body{font-size:15.5px}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .field-2,.out-grid{grid-template-columns:1fr}
  .out.out-big{grid-column:span 1}
  .form-grid.two{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .btn{width:100%}
  .btn-row .btn{width:100%}
  .nav-cta .btn{width:auto}
  .calc-body{padding:1.1rem}
  section{padding:2.6rem 0}
}

/* --- 24. Print ------------------------------------------------------------- */
@media print{
  .nav,.sticky-cta,.foot,.no-print{display:none!important}
  body{font-size:12pt;color:#000}
  .card,.calc,.tbl-wrap{box-shadow:none;border:1px solid #ccc}
  a{color:#000;text-decoration:underline}
  section{padding:1rem 0;page-break-inside:avoid}
}

/* --- 25. Reduced motion --------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* --- 26. Checklist --------------------------------------------------------- */
.checklist{display:grid;gap:.55rem}
.chk{
  display:flex;gap:.75rem;align-items:flex-start;
  padding:.8rem .95rem;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#fff;cursor:pointer;font-size:.93rem;line-height:1.55;
  transition:background .15s ease,border-color .15s ease;
}
.chk:hover{background:var(--ice-50);border-color:var(--line-strong)}
.chk input{
  width:20px;height:20px;flex:none;margin-top:.1rem;
  accent-color:var(--profit);cursor:pointer;
}
.chk span{color:var(--body)}
.chk:has(input:checked){background:var(--profit-soft);border-color:rgba(0,160,107,.22)}
.on-dark .chk{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.on-dark .chk span{color:rgba(255,255,255,.85)}

/* --- 27. Icon inline ------------------------------------------------------- */
.icon-inline{width:17px;height:17px;display:inline-block;vertical-align:-3px;margin-right:.25rem}
.badge .dot{display:inline-block}

/* --- 27. Video embed -----------------------------------------------------
   Self-hosted, no third-party player. The figure keeps a fixed 16:9 frame with the
   poster as its own background so there is no layout shift and nothing is requested
   until the visitor presses play. */
.video-block{margin:0 0 1.5rem}
.video-frame{position:relative;border-radius:1rem;overflow:hidden;
  background:var(--navy-800);border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(5,27,54,.14)}
.video-block.on-dark .video-frame{border-color:rgba(255,255,255,.14);
  box-shadow:0 18px 50px rgba(0,0,0,.4)}
.video-frame video{display:block;width:100%;height:auto;aspect-ratio:16/9;
  background:var(--navy-900)}
.video-caption{margin:.85rem 0 .25rem;font-weight:700;font-size:.98rem;
  color:var(--ink)}
.video-block.on-dark .video-caption{color:#fff}
.video-note{margin:0;font-size:.82rem;color:var(--body)}
.video-block.on-dark .video-note{color:var(--body-on-dark)}

/* --- 27b. Video lessons and outcome demo -------------------------------- */
.video-lesson{margin:0 0 3.2rem;padding-bottom:2.4rem;border-bottom:1px solid var(--line)}
.video-lesson:last-of-type{border-bottom:0;margin-bottom:0}
.video-lesson-meta{display:flex;justify-content:space-between;gap:.8rem;align-items:center;margin-bottom:.8rem}
.outcome-demo{max-width:760px;margin:0 auto}
.outcome-switch{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center}
.outcome-switch button{border:1px solid var(--line-strong);background:#fff;color:var(--ink);border-radius:var(--r-pill);padding:.7rem 1.05rem;font-weight:700;font-size:.92rem;cursor:pointer;transition:transform .16s var(--ease-out,cubic-bezier(0.23,1,0.32,1)),background .16s,border-color .16s}
.outcome-switch button.is-on{background:var(--navy-800);color:#fff;border-color:var(--navy-800)}
.outcome-switch button:active{transform:scale(.97)}

.linkish{background:none;border:0;padding:0;color:var(--blue-600);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
#training-room[hidden],#live-now[hidden],#live-soon[hidden],#live-youtube[hidden]{display:none}
#live-youtube{margin-top:1rem}
#live-youtube iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:1rem}
.tool-embed{margin:0 0 2.8rem;padding-bottom:2.2rem;border-bottom:1px solid var(--line)}
.tool-embed:last-of-type{border-bottom:0;margin-bottom:0;padding-bottom:0}
.video-slot{margin:1rem 0;padding:1rem 1.1rem;border:1px dashed var(--line-strong);border-radius:var(--r-sm);background:var(--ice-50)}
.embed-frame{margin:1rem 0 0;border:1px solid var(--line);border-radius:1rem;overflow:hidden;background:#fff}
.embed-frame iframe{display:block;width:100%;border:0}

/* Wider teaching split: the video column needs more room than the 50/50 default */
.split-wide{align-items:start}
@media(min-width:900px){
  .split-wide{grid-template-columns:minmax(0,1fr) minmax(0,44%)}
}

/* --- 28. Ad landing shell ------------------------------------------------
   Paid traffic has no patience and no context, so the landing shell strips the nav
   back to the logo and one action. Fewer exits, one decision. */
.nav-min .nav-in{justify-content:space-between}
@media(max-width:640px){
  .nav-min .nav-in{padding-left:.9rem;padding-right:.9rem}
  .nav-min .btn{padding:.55rem .9rem;font-size:.86rem}
}