/* ==========================================================================
   MzansiSpins — Design System
   Signature: "Bonus Board" hero (airport departures board) + "Spin Dial"
   rating gauge, reused across every page. Dark ink base, neon-lime CTA,
   warm amber secondary accent, mono numerals for money/data.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  /* Color tokens */
  --bg: #0A0E13;
  --surface: #131923;
  --surface-raised: #1B2330;
  --line: #262F3D;
  --line-soft: #1D2531;

  --lime: #C8FF4D;
  --lime-ink: #0A0E13;
  --amber: #FFB33E;
  --amber-soft: #4A3A1E;

  --text: #F4F6F8;
  --text-muted: #93A0AD;
  --text-faint: #5C6774;

  --verify: #34D399;
  --verify-soft: #123027;
  --con: #FF6B6B;
  --con-soft: #331A1A;

  /* Type */
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* Layout */
  --max-w: 1140px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --gap: clamp(1rem, 2vw, 1.75rem);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html:focus-within{ scroll-behavior:auto; }

html, body{ max-width:100%; overflow-x:hidden; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
  word-break:break-word;
}

img,svg{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; }
table{ max-width:100%; }

:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:3px;
}

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.1;
  margin:0 0 .5em;
  letter-spacing:-0.01em;
}

.mono{ font-family:var(--font-mono); }

.wrap{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 1.25rem;
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--amber);
  display:flex;
  align-items:center;
  gap:.5em;
}
.eyebrow::before{
  content:"";
  width:6px; height:6px;
  border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 3px var(--amber-soft);
}

/* ---------------------------------------------------------------------- */
/* NAV                                                                     */
/* ---------------------------------------------------------------------- */
.site-nav{
  position:sticky; top:0; z-index:60;
  background:rgba(10,14,19,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site-nav__inner{
  position:relative;
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.25rem;
  max-width:var(--max-w); margin:0 auto;
}
.logo{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.15rem;
  display:flex; align-items:center; gap:.5rem;
}
.logo__mark{
  width:26px; height:26px;
  border-radius:50%;
  background:conic-gradient(var(--lime) 0deg 300deg, var(--line) 300deg 360deg);
  display:grid; place-items:center;
  flex:none;
}
.logo__mark::after{
  content:"";
  width:12px; height:12px;
  border-radius:50%;
  background:var(--bg);
}
.logo span.dim{ color:var(--text-muted); font-weight:500; }

.nav-links{ display:flex; align-items:center; gap:1.6rem; font-size:.92rem; color:var(--text-muted); }
.nav-links a:hover{ color:var(--text); }

/* ---------------------------------------------------------------------- */
/* NAV — PAYMENT METHODS DROPDOWN                                         */
/* ---------------------------------------------------------------------- */
.nav-dropdown{ position:relative; }
.nav-dropdown__row{ display:flex; align-items:center; gap:.3rem; }
.nav-dropdown__row > a{ color:inherit; }
.nav-dropdown__caret{
  display:none;
  background:none; border:none; color:var(--text-muted); cursor:pointer;
  font-size:.7rem; padding:.2rem .3rem; line-height:1;
  transition:transform .15s ease;
}
.nav-dropdown__panel{
  position:absolute; top:100%; left:50%;
  transform:translate(-50%,8px);
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:1.25rem 1.4rem;
  display:grid;
  grid-template-columns:repeat(5, minmax(128px,1fr));
  gap:1.5rem;
  min-width:700px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  box-shadow:0 24px 48px -16px rgba(0,0,0,.55);
  z-index:70;
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:translate(-50%,4px);
}
.nav-dropdown__col{ display:flex; flex-direction:column; gap:.5rem; }
.nav-dropdown__label{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--text-faint); margin:0 0 .1rem; font-weight:600;
}
.nav-dropdown__panel a{ font-size:.87rem; color:var(--text-muted); white-space:nowrap; }
.nav-dropdown__panel a:hover{ color:var(--lime); }
.nav-dropdown__col--all{
  grid-column:1 / -1;
  flex-direction:row; align-items:center; justify-content:flex-end;
  border-top:1px solid var(--line-soft);
  padding-top:.75rem; margin-top:.15rem;
}
.nav-dropdown__all{ color:var(--lime) !important; font-weight:700; }

/* Compact 3-column variant, for dropdowns with fewer link groups (e.g. Bonuses) */
.nav-dropdown__panel--compact{
  grid-template-columns:repeat(3, minmax(150px,1fr));
  min-width:480px;
}

.nav-cta{
  display:inline-flex; align-items:center; gap:.4rem;
  background:var(--lime); color:var(--lime-ink);
  font-weight:700; font-size:.85rem;
  padding:.55rem 1.1rem; border-radius:999px;
  white-space:nowrap;
}

.nav-toggle{ display:none; background:none; border:1px solid var(--line); color:var(--text); border-radius:8px; padding:.4rem .6rem; min-width:44px; min-height:44px; align-items:center; justify-content:center; }

/* Breakpoint set well above the widest mega-dropdown's natural min-width (~780px
   for the 5-column Payment Methods panel) so no viewport between "mobile" and
   "desktop hover nav" can ever clip a dropdown off-screen. This covers phones AND
   tablets (portrait + landscape) with the tap-friendly accordion nav — the safer
   choice on touch devices anyway, since they have no real hover state. */
@media (max-width:1024px){
  .nav-links{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--surface);
    border-bottom:1px solid var(--line);
    flex-direction:column; gap:0;
    padding:.5rem 1.25rem 1rem;
    max-height:calc(100vh - 100%);
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  .nav-links.is-open{ display:flex; }
  .nav-links a{ padding:.85rem 0; border-bottom:1px solid var(--line-soft); }
  .nav-toggle{ display:inline-flex; }

  .nav-dropdown__row{
    justify-content:space-between;
    padding:.15rem 0; border-bottom:1px solid var(--line-soft);
  }
  .nav-dropdown__row a{ padding:.85rem 0; border:none; }
  .nav-dropdown__caret{
    display:inline-flex; align-items:center; justify-content:center;
    min-width:44px; min-height:44px; font-size:.85rem;
  }
  .nav-dropdown.is-open .nav-dropdown__caret{ transform:rotate(180deg); color:var(--lime); }
  .nav-dropdown__panel{
    position:static; transform:none;
    opacity:1; visibility:visible; pointer-events:auto;
    display:none;
    grid-template-columns:1fr;
    min-width:0; max-width:none; width:auto;
    background:none; border:none; box-shadow:none;
    padding:.25rem 0 .75rem 1rem;
    margin:0;
    gap:1.1rem;
  }
  .nav-dropdown.is-open .nav-dropdown__panel{ display:grid; }
  .nav-dropdown__col--all{ justify-content:flex-start; border-top:none; padding-top:0; margin-top:0; }
}

/* Desktop hover dropdowns (≥1025px only): keep each panel from ever spilling
   past the viewport edge regardless of where its trigger sits in the nav bar. */
@media (min-width:1025px){
  .nav-dropdown__panel{ max-width:calc(100vw - 2.5rem); }
  /* Casinos (1st dropdown, sits toward the left) — grow rightward */
  .nav-links > li:nth-child(2) .nav-dropdown__panel{ left:0; transform:translateY(8px); }
  .nav-links > li:nth-child(2):hover .nav-dropdown__panel,
  .nav-links > li:nth-child(2):focus-within .nav-dropdown__panel{ transform:translateY(4px); }
  /* Payment Methods (2nd dropdown, widest panel) and Bonuses (3rd, sits toward
     the right) — grow leftward off their trigger's right edge instead of
     centering, so the wide panel always has room to expand into. */
  .nav-links > li:nth-child(3) .nav-dropdown__panel,
  .nav-links > li:nth-child(4) .nav-dropdown__panel{ left:auto; right:0; transform:translateY(8px); }
  .nav-links > li:nth-child(3):hover .nav-dropdown__panel,
  .nav-links > li:nth-child(3):focus-within .nav-dropdown__panel,
  .nav-links > li:nth-child(4):hover .nav-dropdown__panel,
  .nav-links > li:nth-child(4):focus-within .nav-dropdown__panel{ transform:translateY(4px); }
}

/* Narrower desktop windows (1025-1180px): trim the widest (5-column, non-compact)
   panel's minimum width a little further so it never needs to fight for space.
   Scoped with :not(--compact) so it can't clash with the 3-column variant's own
   grid-template-columns. */
@media (min-width:1025px) and (max-width:1180px){
  .nav-dropdown__panel:not(.nav-dropdown__panel--compact){
    min-width:600px;
    grid-template-columns:repeat(5, minmax(105px,1fr));
  }
  .nav-dropdown__panel--compact{ min-width:420px; }
}

/* ---------------------------------------------------------------------- */
/* BUTTONS                                                                 */
/* ---------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; font-size:.95rem;
  padding:.85rem 1.4rem;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active{ transform:scale(.97); }

.btn--primary{
  background:var(--lime); color:var(--lime-ink);
  box-shadow:0 0 0 0 rgba(200,255,77,.4);
}
.btn--primary:hover{ box-shadow:0 6px 24px -4px rgba(200,255,77,.45); }

.btn--ghost{
  background:transparent; color:var(--text);
  border-color:var(--line);
}
.btn--ghost:hover{ border-color:var(--text-muted); }

.btn--block{ width:100%; }

/* ---------------------------------------------------------------------- */
/* BONUS BOARD (hero — signature)                                         */
/* ---------------------------------------------------------------------- */
.board{
  position:relative;
  padding:3.5rem 0 3rem;
  overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  background:
    radial-gradient(1100px 480px at 85% -10%, rgba(200,255,77,.08), transparent 60%),
    radial-gradient(700px 400px at 0% 0%, rgba(255,179,62,.07), transparent 55%);
}

.board__title{
  font-size:clamp(2rem, 4.4vw, 3.1rem);
  max-width:14ch;
  margin:.5rem 0 .6rem;
}
.board__title em{
  font-style:normal;
  color:var(--lime);
}
.board__sub{ color:var(--text-muted); max-width:52ch; font-size:1.02rem; margin-bottom:2rem; }

.board__panel{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
}
.board__row{
  display:grid;
  grid-template-columns:2.4rem 1fr auto auto;
  align-items:center;
  gap:1rem;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--line-soft);
  opacity:0;
  transform:translateY(8px);
  animation:flip .5s ease forwards;
}
.board__row:last-child{ border-bottom:none; }
.board__row:nth-child(1){ animation-delay:.05s; }
.board__row:nth-child(2){ animation-delay:.18s; }
.board__row:nth-child(3){ animation-delay:.31s; }

@keyframes flip{
  to{ opacity:1; transform:translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .board__row{ animation:none; opacity:1; transform:none; }
}

.board__rank{
  font-family:var(--font-mono);
  color:var(--text-faint);
  font-size:.85rem;
}
.board__name{ font-family:var(--font-display); font-weight:700; font-size:1rem; }
.board__name small{ display:block; font-family:var(--font-body); font-weight:400; color:var(--text-muted); font-size:.78rem; margin-top:.15rem; }

.board__bonus{
  font-family:var(--font-mono);
  color:var(--amber);
  font-weight:600;
  font-size:.95rem;
  text-align:right;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:38vw;
}

.board__go{
  width:2.2rem; height:2.2rem;
  border-radius:50%;
  border:1px solid var(--line);
  display:grid; place-items:center;
  color:var(--text-muted);
  transition:background .15s, color .15s, transform .15s;
}
.board__row:hover .board__go{ background:var(--lime); color:var(--lime-ink); transform:translateX(2px); }

@media (max-width:600px){
  .board__row{ grid-template-columns:1.6rem 1fr auto; }
  .board__bonus{ display:none; }
}

/* ---------------------------------------------------------------------- */
/* TRUST STRIP                                                            */
/* ---------------------------------------------------------------------- */
.trust{
  padding:1.5rem 0;
  border-bottom:1px solid var(--line-soft);
}
.trust__inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:1.25rem 2rem;
  justify-content:space-between;
}
.trust__badges{ display:flex; flex-wrap:wrap; gap:.5rem; }
.tag{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.03em;
  padding:.35rem .65rem;
  border-radius:6px;
  border:1px solid var(--line);
  color:var(--text-muted);
  white-space:nowrap;
}
.tag--verify{ color:var(--verify); border-color:var(--verify-soft); background:var(--verify-soft); }
.age-badge{
  font-family:var(--font-display); font-weight:700; font-size:.85rem;
  border:1px solid var(--con); color:var(--con);
  border-radius:8px; padding:.3rem .6rem;
  white-space:nowrap;
}

/* ---------------------------------------------------------------------- */
/* SPIN DIAL (signature rating gauge)                                     */
/* ---------------------------------------------------------------------- */
.dial{ display:inline-flex; align-items:center; gap:.6rem; }
.dial__svg circle.track{ stroke:var(--line); fill:none; }
.dial__svg circle.fill{ stroke:var(--lime); fill:none; stroke-linecap:round; transform:rotate(-90deg); transform-origin:50% 50%; }
.dial__score{ font-family:var(--font-mono); font-weight:600; font-size:.95rem; }
.dial__score span{ color:var(--text-faint); font-size:.75rem; }

/* ---------------------------------------------------------------------- */
/* SECTION HEADERS                                                        */
/* ---------------------------------------------------------------------- */
.section{ padding:3.5rem 0; }
.section--tight{ padding:2.5rem 0; }
.section-head{ margin-bottom:2rem; max-width:60ch; }
.section-head h2{ font-size:clamp(1.5rem,2.6vw,2.1rem); }
.section-head p{ color:var(--text-muted); }

/* ---------------------------------------------------------------------- */
/* COMPARISON CARDS / TABLE                                               */
/* ---------------------------------------------------------------------- */
.compare{ display:grid; gap:1.25rem; }

.casino-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  display:grid;
  gap:1.1rem;
}
.casino-card__top{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
}
.wordmark{
  font-family:var(--font-display); font-weight:700; font-size:1.15rem;
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.5rem .8rem;
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
}
.wordmark__dot{ width:8px; height:8px; border-radius:50%; background:var(--lime); flex:none; }

.casino-card__bonus{
  font-family:var(--font-mono);
  color:var(--amber);
  font-weight:600;
  font-size:1.05rem;
  line-height:1.4;
}
.casino-card__bonus small{ display:block; color:var(--text-faint); font-weight:500; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.2rem; }

.pay-row{ display:flex; flex-wrap:wrap; gap:.4rem; }

.casino-card__pros{ color:var(--text-muted); font-size:.9rem; }
.casino-card__pros li{ display:flex; gap:.5rem; margin-bottom:.35rem; }
.casino-card__pros li::before{ content:"+"; color:var(--verify); font-weight:700; }

.casino-card__actions{ display:flex; gap:.75rem; flex-wrap:wrap; }
.casino-card__actions .btn{ flex:1; }
.link-review{ font-size:.85rem; color:var(--text-muted); align-self:center; white-space:nowrap; }
.link-review:hover{ color:var(--text); text-decoration:underline; }

@media (min-width:860px){
  .compare{ grid-template-columns:repeat(3,1fr); align-items:stretch; }
}

/* ---------------------------------------------------------------------- */
/* FAQ ACCORDION                                                          */
/* ---------------------------------------------------------------------- */
.faq{ border-top:1px solid var(--line-soft); }
.faq-item{ border-bottom:1px solid var(--line-soft); }
.faq-item__q{
  width:100%; text-align:left;
  background:none; border:none; color:var(--text);
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.15rem 0;
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  cursor:pointer;
}
.faq-item__icon{ flex:none; width:22px; height:22px; position:relative; }
.faq-item__icon::before,.faq-item__icon::after{
  content:""; position:absolute; background:var(--text-muted);
  top:50%; left:50%; transform:translate(-50%,-50%);
}
.faq-item__icon::before{ width:12px; height:2px; }
.faq-item__icon::after{ width:2px; height:12px; transition:transform .2s ease; }
.faq-item[open] .faq-item__icon::after{ transform:translate(-50%,-50%) rotate(90deg) scaleY(0); }
.faq-item__a{ color:var(--text-muted); padding-bottom:1.2rem; max-width:65ch; font-size:.95rem; }

/* ---------------------------------------------------------------------- */
/* FOOTER                                                                  */
/* ---------------------------------------------------------------------- */
.site-footer{
  border-top:1px solid var(--line-soft);
  padding:2.75rem 0 2rem;
  background:var(--surface);
}
.footer-grid{
  display:grid; gap:2rem;
  grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;
  margin-top:2.5rem;
  padding-top:2.25rem;
  border-top:1px solid var(--line-soft);
}
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:640px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .footer-grid{ grid-template-columns:1fr; } }

.footer-col h4{ font-size:.76rem; text-transform:uppercase; letter-spacing:.09em; color:var(--text-faint); margin-bottom:1rem; }
.footer-col a{ display:block; color:var(--text-muted); font-size:.9rem; margin-bottom:.65rem; transition:color .15s ease; }
.footer-col a:hover{ color:var(--lime); }

/* ---------------------------------------------------------------------- */
/* INFO / LEGAL PAGES (About, Privacy, Terms, etc.)                       */
/* ---------------------------------------------------------------------- */
.info-hero{ padding:3rem 0 2.5rem; border-bottom:1px solid var(--line-soft); }
.info-hero h1{ font-size:clamp(1.9rem,3.6vw,2.7rem); max-width:26ch; margin:.5rem 0 .75rem; }
.info-hero__sub{ color:var(--text-muted); max-width:62ch; font-size:1.02rem; }
.prose h2{ font-size:1.35rem; margin-top:0; }
.prose h3{ font-size:1.05rem; }
.prose p{ color:var(--text-muted); margin:0 0 1rem; max-width:72ch; }
.prose p:last-child{ margin-bottom:0; }
.prose ul{ margin:0 0 1rem; max-width:72ch; }
.prose li{ display:flex; gap:.6rem; padding:.3rem 0; color:var(--text-muted); }
.prose li::before{ content:"—"; color:var(--text-faint); flex:none; }
.info-nav{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }

.rg-box{
  border:1px solid var(--con);
  background:var(--con-soft);
  border-radius:var(--radius-md);
  padding:1.1rem 1.25rem;
  font-size:.85rem;
  color:var(--text-muted);
  display:flex; gap:.9rem; align-items:flex-start;
}
.rg-box strong{ color:var(--text); }
.rg-box a{ color:var(--con); font-weight:600; }

.disclosure{
  margin-top:2rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line-soft);
  font-size:.78rem;
  color:var(--text-faint);
  line-height:1.6;
}
.disclosure a{ color:var(--text-muted); text-decoration:underline; }
.disclosure a:hover{ color:var(--text); }

/* ---------------------------------------------------------------------- */
/* REVIEW PAGE — HERO                                                      */
/* ---------------------------------------------------------------------- */
.rhero{
  padding:3rem 0 2.5rem;
  border-bottom:1px solid var(--line-soft);
}
.rhero h1{ font-size:clamp(1.9rem,3.6vw,2.6rem); max-width:34ch; margin:.5rem 0 .9rem; line-height:1.18; }
.rhero__top{ display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between; margin-bottom:1.5rem; }
.rhero__meta{ color:var(--text-muted); font-size:.92rem; margin-bottom:1.5rem; max-width:60ch; }
.rhero__stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; }
.stat{ background:var(--surface); padding:1rem 1.1rem; }
.stat__label{ font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-faint); margin-bottom:.3rem; }
.stat__val{ font-family:var(--font-mono); font-weight:600; font-size:1rem; color:var(--text); }

/* Sticky claim bar (mobile thumb zone) */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:rgba(10,14,19,.95);
  backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
  padding:.75rem 1rem;
  display:flex; align-items:center; gap:.9rem;
  transform:translateY(110%);
  transition:transform .25s ease;
}
.sticky-cta.is-visible{ transform:translateY(0); }
.sticky-cta__info{ flex:1; min-width:0; }
.sticky-cta__bonus{ font-family:var(--font-mono); color:var(--amber); font-size:.82rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sticky-cta__name{ font-family:var(--font-display); font-weight:700; font-size:.9rem; }
@media (min-width:1025px){ .sticky-cta{ display:none; } }
.sticky-cta__actions{ flex:none; }
@media (max-width:380px){
  .sticky-cta__name{ display:none; }
}

/* ---------------------------------------------------------------------- */
/* PROS & CONS                                                             */
/* ---------------------------------------------------------------------- */
.pc-grid{ display:grid; gap:1.25rem; grid-template-columns:1fr; }
@media (min-width:700px){ .pc-grid{ grid-template-columns:1fr 1fr; } }
.pc-box{ border-radius:var(--radius-lg); padding:1.5rem; border:1px solid var(--line); }
.pc-box--pro{ background:var(--verify-soft); border-color:#1F4438; }
.pc-box--con{ background:var(--con-soft); border-color:#4A2626; }
.pc-box h3{ font-size:1rem; display:flex; align-items:center; gap:.5rem; }
.pc-box li{ display:flex; gap:.6rem; padding:.4rem 0; font-size:.92rem; color:var(--text); }
.pc-box--pro li::before{ content:"✓"; color:var(--verify); font-weight:700; }
.pc-box--con li::before{ content:"✕"; color:var(--con); font-weight:700; }

/* ---------------------------------------------------------------------- */
/* BANKING TABLE                                                          */
/* ---------------------------------------------------------------------- */
.bank-table{ width:100%; min-width:480px; border-collapse:collapse; font-size:.92rem; }
.bank-table th{ text-align:left; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-faint); padding:.7rem .5rem; border-bottom:1px solid var(--line); }
.bank-table td{ padding:.85rem .5rem; border-bottom:1px solid var(--line-soft); color:var(--text-muted); }
.bank-table td:first-child{ color:var(--text); font-weight:600; }
.bank-table__wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); padding:.5rem 1rem; }

/* ---------------------------------------------------------------------- */
/* PAYMENT METHOD CARDS (silo hub + comparison blocks)                    */
/* ---------------------------------------------------------------------- */
.pm-grid{ display:grid; gap:1.1rem; grid-template-columns:repeat(auto-fill, minmax(230px,1fr)); margin-top:1.25rem; }
.pm-card{
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface);
  padding:1.4rem; display:flex; flex-direction:column; gap:.7rem;
  transition:border-color .15s ease, transform .15s ease;
}
.pm-card:hover{ border-color:var(--lime); transform:translateY(-2px); }
.pm-card__top{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.pm-card__name{ font-family:var(--font-display); font-weight:700; font-size:1.05rem; color:var(--text); }
.pm-card__blurb{ color:var(--text-muted); font-size:.88rem; margin:0; flex:1; line-height:1.5; }
.pm-card__link{ font-size:.85rem; font-weight:700; color:var(--lime); }

/* Mzansi Pro-Tip callout */
.pro-tip{
  border:1px solid var(--amber-soft);
  background:linear-gradient(180deg, rgba(255,179,62,.09), rgba(255,179,62,.02));
  border-radius:var(--radius-lg);
  padding:1.5rem 1.75rem;
  margin:1.5rem 0;
}
.pro-tip__label{
  display:inline-flex; align-items:center; gap:.45rem;
  font-family:var(--font-display); font-weight:700; color:var(--amber);
  font-size:.8rem; text-transform:uppercase; letter-spacing:.05em;
  margin-bottom:.65rem;
}
.pro-tip__label::before{ content:"🇿🇦"; font-size:1rem; }
.pro-tip p{ margin:0; color:var(--text); font-size:.95rem; line-height:1.65; }
.pro-tip p + p{ margin-top:.75rem; }

/* ---------------------------------------------------------------------- */
/* NUMBERED STEPS (FICA)                                                  */
/* ---------------------------------------------------------------------- */
.steps{ display:grid; gap:1rem; counter-reset:step; }
.step{ display:grid; grid-template-columns:2.75rem 1fr; gap:1rem; padding:1.1rem; border:1px solid var(--line); border-radius:var(--radius-md); background:var(--surface); }
.step__num{ font-family:var(--font-mono); font-weight:600; color:var(--lime-ink); background:var(--lime); width:2.75rem; height:2.75rem; border-radius:50%; display:grid; place-items:center; font-size:1rem; }
.step h4{ font-size:.98rem; margin-bottom:.3rem; }
.step p{ color:var(--text-muted); font-size:.9rem; margin:0; }

/* ---------------------------------------------------------------------- */
/* VERDICT / FINAL CTA                                                    */
/* ---------------------------------------------------------------------- */
.verdict{
  border-radius:var(--radius-lg);
  border:1px solid var(--line);
  background:linear-gradient(160deg, var(--surface), var(--surface-raised));
  padding:2rem;
  display:flex; flex-wrap:wrap; gap:1.5rem; align-items:center; justify-content:space-between;
}
.verdict__left{ display:flex; align-items:center; gap:1.25rem; }

/* util */
.mt-0{ margin-top:0; }
.text-muted{ color:var(--text-muted); }
.small{ font-size:.85rem; }

/* ---------------------------------------------------------------------- */
/* BONUS CALCULATOR WIDGETS                                                */
/* ---------------------------------------------------------------------- */
.bonus-calc{
  background:var(--surface-raised);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  margin-top:1.5rem;
}
.bonus-calc__input{ margin-bottom:1.35rem; }
.bonus-calc__input-group{ display:flex; flex-wrap:wrap; gap:1.25rem 1.75rem; margin-bottom:1.35rem; }
.bonus-calc__input label{
  display:block; font-weight:600; color:var(--text); margin-bottom:.5rem; font-size:.95rem;
}
.bonus-calc__input-row{
  display:flex; align-items:center; gap:.4rem;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:.55rem .8rem; max-width:220px;
}
.bonus-calc__prefix{ color:var(--text-muted); font-family:var(--font-mono); }
.bonus-calc__input-row input[type=number]{
  background:none; border:none; color:var(--text); font-family:var(--font-mono);
  font-size:1.1rem; width:100%; outline:none; -moz-appearance:textfield; min-height:28px;
}
.bonus-calc__input-row input[type=number]::-webkit-outer-spin-button,
.bonus-calc__input-row input[type=number]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.bonus-calc input[type=range]{
  width:100%; margin-top:.85rem; accent-color:var(--lime); height:28px; cursor:pointer;
}
.bonus-calc__ticks{
  display:flex; justify-content:space-between; font-size:.75rem; color:var(--text-faint);
  margin-top:.1rem; font-family:var(--font-mono);
}
.bonus-calc select{
  background:var(--surface); border:1px solid var(--line); color:var(--text);
  border-radius:var(--radius-sm); padding:.65rem .8rem; font-family:var(--font-body);
  font-size:.95rem; width:100%; max-width:360px; min-height:44px;
}
.bonus-calc__results{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1rem; }
.bonus-calc__col{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-md);
  padding:1.1rem;
}
.bonus-calc__col-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  margin-bottom:.75rem; padding-bottom:.6rem; border-bottom:1px solid var(--line-soft); flex-wrap:wrap;
}
.bonus-calc__stats{ display:grid; gap:.55rem; margin:0; }
.bonus-calc__stats div{ display:flex; align-items:baseline; justify-content:space-between; gap:.75rem; }
.bonus-calc__stats dt{ color:var(--text-muted); font-size:.85rem; }
.bonus-calc__stats dd{
  margin:0; color:var(--text); font-family:var(--font-mono); font-weight:600;
  font-size:.95rem; text-align:right; white-space:nowrap;
}
.bonus-calc__note{ margin:.75rem 0 0; font-size:.8rem; color:var(--text-faint); line-height:1.45; }
.bonus-calc__disclaimer{
  margin:1.35rem 0 0; font-size:.78rem; color:var(--text-faint); line-height:1.5;
  border-top:1px solid var(--line-soft); padding-top:.9rem;
}
.bonus-calc__single{ max-width:520px; }

@media (max-width:640px){
  .bonus-calc{ padding:1.15rem; }
  .bonus-calc__results{ grid-template-columns:1fr; }
  .bonus-calc__input-group{ flex-direction:column; gap:1.1rem; }
}