/* Jibboo — playful-premium German casino guide.
   Zoned system: light cream masthead -> dark green-black "tree stage" (hero + toplist)
   -> warm cream magazine body. Brand world built from the Jibboo logo: green oval,
   red playful wordmark, cheeky smiley, and the original abstract tree.
   Type: Baloo 2 (rounded display, echoes the JiBBOO wordmark) + Inter (body). */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --green:#7cb342;        /* primary brand green (richer than logo lime for contrast) */
  --green-d:#5a8a2c;
  --lime:#99cc67;         /* logo lime */
  --leaf:#0f5a2e;         /* deep green for stage */
  --red:#cf2e2e;          /* logo red */
  --red-d:#a81f1f;
  --gold:#e8b53a;
  --gold-d:#c08f1d;
  --ink:#26302a;          /* near-black green-tinted text */
  --muted:#62716a;
  --cream:#faf6ec;        /* warm page body */
  --cream-2:#f3ecdb;      /* warm panel */
  --card:#ffffff;
  --line:#e7decb;         /* warm hairline */
  --line-cool:#e3e8e0;
  --maxw:1140px;
  --radius:14px;
  --shadow:0 2px 4px rgba(20,40,26,.05),0 14px 34px rgba(20,40,26,.09);
  --shadow-pop:0 18px 50px rgba(20,40,26,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);
  background:var(--cream);line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--green-d);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
section{scroll-margin-top:78px}

h1,h2,h3,h4{font-family:'Baloo 2',system-ui,sans-serif;color:var(--leaf);line-height:1.12;margin:0 0 .45em;font-weight:700}
h1{font-size:2.6rem;font-weight:800;letter-spacing:-.01em;line-height:1.05}
h2{font-size:1.72rem;margin-top:1.9em;display:flex;align-items:center;gap:.55em}
/* section marker = a small lime OVAL — the logo's signature shape, used as a clean geometric accent (not a fake logo) */
.smile-h2:before{content:"";flex:0 0 auto;width:.85em;height:.6em;border-radius:50%;
  background:linear-gradient(150deg,var(--lime),var(--green));box-shadow:0 1px 2px rgba(0,0,0,.18)}
h3{font-size:1.34rem;color:var(--green-d);margin-top:1.5em}
h4{font-family:'Inter',sans-serif;font-size:1.05rem;font-weight:700;color:var(--leaf)}
p{margin:0 0 1.05em}
.prose ul,.prose ol{margin:0 0 1.15em;padding-left:1.3em}
.prose li{margin:.4em 0}
.muted{color:var(--muted)}

/* ---------------- Masthead (light cream) ---------------- */
.masthead{background:#fffdf7;border-bottom:3px solid var(--lime);position:relative;z-index:30}
.mast-in{max-width:var(--maxw);margin:0 auto;padding:8px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height:112px;width:auto;display:block}
.brand .tag{font-family:'Baloo 2',sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.16em;color:var(--muted);text-transform:uppercase}
.nav{display:flex;align-items:center;gap:24px}
.nav a{color:var(--leaf);font-family:'Baloo 2',sans-serif;font-weight:600;font-size:.93rem}
.nav a:hover{color:var(--red);text-decoration:none}
.nav .cta{background:var(--red);color:#fff;padding:9px 17px;border-radius:30px;font-weight:700}
.nav .cta:hover{background:var(--red-d);text-decoration:none}
.burger{display:none;background:none;border:0;cursor:pointer;padding:6px}
.burger span{display:block;width:26px;height:3px;background:var(--leaf);margin:5px 0;border-radius:2px;transition:.25s}

/* ---------------- Dark green-black TREE STAGE (hero + toplist) ---------------- */
.stage{position:relative;color:#eaf3ea;overflow:hidden;
  background:radial-gradient(900px 360px at 82% -8%,rgba(153,204,103,.20),transparent 60%),
    linear-gradient(165deg,#0c1a10 0%,#10271a 48%,#0a160d 120%)}
/* original abstract tree, right-anchored, screen-blended so the black drops away */
.stage .tree{position:absolute;right:-30px;top:-10px;height:118%;width:auto;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:.9}
/* faint dashed oval rings (geometric, echo the logo oval) */
.stage:before{content:"";position:absolute;left:-110px;top:-90px;width:300px;height:220px;z-index:0;pointer-events:none;
  border:2px dashed rgba(153,204,103,.16);border-radius:50%;transform:rotate(14deg)}
.stage:after{content:"";position:absolute;right:34px;bottom:-70px;width:230px;height:170px;z-index:0;pointer-events:none;
  border:2px dashed rgba(153,204,103,.28);border-radius:50%;transform:rotate(-12deg);opacity:.7}
.stage .wrap{position:relative;z-index:3}

.hero-split{display:grid;grid-template-columns:1.5fr .8fr;gap:30px;align-items:center;padding:30px 22px 10px}
.hero-copy{min-width:0}
.stage h1{color:#fff;margin-bottom:.28em;max-width:18ch}
.stage .lede{font-size:1.12rem;color:#cfe3cf;max-width:54ch;margin:0 0 16px}
.hero-visual{position:relative;min-height:210px;display:flex;align-items:center;justify-content:center}
/* the REAL Jibboo logo as the hero brand visual, on a soft lime halo */
.hero-visual:before{content:"";position:absolute;width:280px;height:200px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(153,204,103,.22),transparent 70%)}
.hero-visual .biglogo{position:relative;width:clamp(200px,24vw,300px);height:auto;filter:drop-shadow(0 14px 34px rgba(0,0,0,.5))}

.byline{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  border-top:1px solid rgba(255,255,255,.15);border-bottom:1px solid rgba(255,255,255,.15);padding:13px 0;margin-bottom:14px;max-width:640px}
.byline img{height:50px;width:50px;border-radius:50%;object-fit:cover;border:2px solid var(--lime);box-shadow:0 0 0 3px rgba(153,204,103,.18)}
.by-id{line-height:1.4}
.by-id .nm{font-family:'Baloo 2',sans-serif;font-weight:700;color:#fff;font-size:1.05rem}
.by-id .nm a{color:#fff}.by-id .nm a:hover{color:var(--lime)}
.by-id .role{font-size:.82rem;color:#a9c2a9}
/* editorial inline meta (no pill chips) */
.by-meta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 18px;flex-basis:100%;margin-top:5px;font-size:.84rem;color:#a9c2a9}
.by-meta .m{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.by-meta b{color:#fff;font-weight:600}
.by-meta svg{width:15px;height:15px;color:var(--lime);flex:0 0 auto}
.hero-jump{display:inline-flex;align-items:center;gap:9px;background:var(--lime);color:#163a0a !important;
  font-family:'Baloo 2',sans-serif;font-weight:700;padding:12px 24px;border-radius:30px;font-size:1rem}
.hero-jump:hover{background:#a9d779;text-decoration:none}

/* ---- toplist on the stage ---- */
.toplist-zone .wrap{padding:14px 22px 44px}
.toplist-zone h2{color:#fff;margin-top:.4em}
.toplist-zone .zone-note{color:#bcd6bc;font-size:.92rem;margin:-4px 0 16px}

/* green-oval rank "pocket" — the logo's signature shape; gold for the podium */
.pocket{display:inline-flex;align-items:center;justify-content:center;width:42px;height:33px;border-radius:50%;flex:0 0 auto;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.15rem;color:#163a0a;
  background:linear-gradient(150deg,#a9d779,var(--green));box-shadow:0 2px 6px rgba(0,0,0,.3)}
.pocket.gold{background:linear-gradient(150deg,#f3d779,var(--gold));color:#4a3500}

/* #1 spotlight split card */
.spotlight{position:relative;display:grid;grid-template-columns:300px 1fr;background:var(--card);
  border:2px solid var(--lime);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-pop);margin-bottom:22px}
.spot-top{grid-column:1/-1;display:flex;align-items:center;gap:11px;padding:12px 20px;background:var(--cream-2);border-bottom:1px solid var(--line)}
.spot-ribbon{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.05em;
  color:#4a3500;background:linear-gradient(150deg,#f3d779,var(--gold));padding:4px 13px;border-radius:30px}
.spot-logo{background:linear-gradient(160deg,#10271a,#0a160d);padding:28px 22px;display:flex;flex-direction:column;align-items:center;gap:11px;text-align:center}
.spot-logo .logo-chip{width:184px;height:84px}
.spot-name{font-family:'Baloo 2',sans-serif;font-size:1.6rem;font-weight:800;color:#fff}
.spot-body{padding:24px 26px;display:flex;flex-direction:column}
.spot-offer{display:flex;flex-direction:column;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:14px}
.spot-offer .lbl{display:block;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--green-d)}
.spot-offer .amt{display:block;font-family:'Baloo 2',sans-serif;font-size:2.2rem;font-weight:800;color:var(--red);line-height:1.06;margin:2px 0}
.spot-offer .code{display:block;font-size:.85rem;color:var(--muted);margin-top:2px}
.spot-offer .code b{color:var(--leaf);background:#fff;border:1px dashed var(--green);padding:1px 8px;border-radius:5px;font-family:'Baloo 2',sans-serif}
.spot-reasons{list-style:none;padding:0;margin:0 0 16px}
.spot-reasons li{position:relative;padding-left:28px;margin-bottom:8px;font-size:.97rem;color:var(--ink);font-weight:500}
.spot-reasons li:before{content:"";position:absolute;left:0;top:5px;width:15px;height:15px;border-radius:50%;
  background:var(--green);box-shadow:inset 0 0 0 3px #fff,0 0 0 1px var(--green)}

/* grid of #2-15 */
.grid-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gcard{background:var(--card);border-radius:15px;border-top:4px solid var(--lime);padding:16px 16px 18px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:var(--shadow)}
.g-top{display:flex;align-items:center;gap:9px;width:100%}
.g-ribbon{font-family:'Baloo 2',sans-serif;font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--green-d);background:#eef6e3;border:1px solid #d6e8bf;padding:3px 10px;border-radius:20px;margin-left:auto}
.logo-chip{background:#fff;border:1px solid var(--line-cool);border-radius:10px;display:flex;align-items:center;justify-content:center;padding:8px}
.logo-chip img{max-height:54px;max-width:130px;object-fit:contain}
.gcard .logo-chip{width:150px;height:66px;margin-top:4px}
.g-name{font-family:'Baloo 2',sans-serif;font-size:1.28rem;font-weight:700;color:var(--leaf)}
.stars{color:var(--gold);font-size:1rem;letter-spacing:1px}
.stars b{color:var(--muted);font-weight:600;font-size:.84rem;margin-left:7px;letter-spacing:0;font-family:'Inter',sans-serif}
.tags{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.tag{font-size:.73rem;font-weight:600;background:#eef6e3;color:var(--green-d);padding:3px 10px;border-radius:20px}
.tag.sport{background:#fdeaea;color:var(--red-d)}
.g-offer{margin-top:auto;padding-top:6px}
.g-offer .lbl{font-size:.64rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--green-d)}
.g-offer .amt{font-family:'Baloo 2',sans-serif;font-size:1.26rem;font-weight:700;color:var(--red);line-height:1.1;margin-top:2px}
.g-offer .terms{font-size:.72rem;color:var(--muted);margin-top:4px}
.btn-claim{display:block;background:var(--red);color:#fff !important;font-family:'Baloo 2',sans-serif;font-weight:700;
  text-align:center;padding:11px 14px;border-radius:30px;margin-top:9px;width:100%;transition:.2s}
.btn-claim:hover{background:var(--red-d);text-decoration:none}

/* ---------------- Magazine body (cream) ---------------- */
.content{background:var(--cream)}
.content .layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start;padding:18px 22px 48px}
.article{min-width:0}
.article section:first-child h2{margin-top:.4em}
.lead-note{background:#fff;border:1px solid var(--line);border-left:4px solid var(--lime);padding:14px 18px;border-radius:0 10px 10px 0;font-size:.97rem;color:var(--leaf)}
.note{background:#fff;border:1px solid var(--line);border-left:4px solid var(--lime);border-radius:0 10px 10px 0;padding:14px 18px;margin:1.2em 0}
.note.warn{border-left-color:var(--red)}

/* sticky rail */
.rail{position:sticky;top:18px;display:flex;flex-direction:column;gap:16px}
.toppick{background:#fff;border:1px solid var(--line);border-top:4px solid var(--gold);border-radius:14px;padding:18px;text-align:center;box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;gap:8px}
.tp-head{font-family:'Baloo 2',sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--leaf);font-size:.9rem;display:flex;align-items:center;gap:7px}
.tp-head:before{content:"";width:.85em;height:.6em;border-radius:50%;background:linear-gradient(150deg,var(--lime),var(--green))}
.toppick .logo-chip{width:150px;height:62px}
.tp-name{font-family:'Baloo 2',sans-serif;font-size:1.3rem;font-weight:700;color:var(--leaf)}
.tp-amt{font-family:'Baloo 2',sans-serif;font-size:1.4rem;font-weight:700;color:var(--red)}
.jumpnav{background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 0;box-shadow:var(--shadow)}
.jn-title{display:block;font-family:'Baloo 2',sans-serif;text-transform:uppercase;letter-spacing:.05em;color:var(--green-d);font-weight:700;font-size:.8rem;padding:4px 18px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
.jumpnav a{display:block;padding:8px 18px;color:var(--leaf);font-size:.91rem;border-left:3px solid transparent}
.jumpnav a:hover{border-left-color:var(--lime);background:#f6fbef;text-decoration:none;color:var(--red)}

/* reviews */
.review{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin:18px 0;box-shadow:var(--shadow)}
.review-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.review-head .logo-chip{width:130px;height:60px;flex:0 0 auto}
.review-head h3{margin:0;color:var(--leaf);font-size:1.45rem}
.score-badge{margin-left:auto;background:linear-gradient(160deg,#10271a,#0a160d);color:#fff;border-radius:12px;text-align:center;padding:8px 16px;border:1px solid var(--lime)}
.score-badge b{display:block;font-family:'Baloo 2',sans-serif;font-size:1.7rem;line-height:1;color:var(--lime)}
.score-badge span{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
.subscores{display:grid;grid-template-columns:repeat(5,1fr);gap:11px;margin:16px 0}
.subscores div{background:var(--cream);border:1px solid var(--line);border-radius:10px;padding:10px 6px;text-align:center}
.subscores .v{font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--green-d);font-size:1.28rem}
.subscores .k{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:1.2em 0}
.proscons .col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow)}
.proscons .pros{border-top:3px solid var(--green)}
.proscons .cons{border-top:3px solid var(--red)}
.proscons h4{margin:0 0 10px;text-transform:uppercase;font-family:'Baloo 2',sans-serif}
.proscons ul{list-style:none;padding:0;margin:0}
.proscons li{padding-left:25px;position:relative;font-size:.95rem;margin:.45em 0}
.pros li:before{content:"";position:absolute;left:0;top:7px;width:13px;height:13px;border-radius:50%;background:var(--green);box-shadow:inset 0 0 0 2px #fff,0 0 0 1px var(--green)}
.cons li:before{content:"";position:absolute;left:0;top:7px;width:13px;height:13px;border-radius:50%;background:var(--red);box-shadow:inset 0 0 0 2px #fff,0 0 0 1px var(--red)}

/* tables */
.tbl-wrap{overflow-x:auto;margin:18px 0;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:.93rem;background:#fff;min-width:560px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:linear-gradient(160deg,#10271a,#0a160d);color:var(--lime);font-family:'Baloo 2',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:.84rem}
tbody tr:nth-child(even){background:#fbf8f0}
td .y{color:var(--green-d);font-weight:700}
td .n{color:var(--red);font-weight:700}
table a{color:var(--red);font-weight:600}

/* steps */
ol.steps{counter-reset:s;list-style:none;padding:0}
ol.steps li{counter-increment:s;position:relative;padding:5px 0 16px 52px;margin:0}
ol.steps li:before{content:counter(s);position:absolute;left:0;top:0;width:36px;height:36px;border-radius:50%;
  background:linear-gradient(150deg,#a9d779,var(--green));color:#163a0a;display:flex;align-items:center;justify-content:center;
  font-family:'Baloo 2',sans-serif;font-weight:800;font-size:1.15rem}

/* weights + helplines */
.weights{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin:18px 0}
.weights .w{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow)}
.weights .pct{font-family:'Baloo 2',sans-serif;font-size:2rem;font-weight:800;color:var(--green-d);line-height:1}
.weights .nm{font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--leaf);margin-top:3px}
.weights .d{font-size:.85rem;color:var(--muted);margin-top:5px}

/* FAQ */
.faq details{background:#fff;border:1px solid var(--line);border-radius:12px;margin:.6em 0;box-shadow:var(--shadow);overflow:hidden}
.faq summary{cursor:pointer;font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--leaf);padding:15px 18px;list-style:none;display:flex;justify-content:space-between;gap:12px;font-size:1.1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";color:var(--green-d);font-size:1.5rem;line-height:1}
.faq details[open] summary{border-bottom:1px solid var(--line)}
.faq details[open] summary:after{content:"\2013"}
.faq details>div{padding:14px 18px}

/* author box */
.authorbox{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-left:4px solid var(--lime);border-radius:var(--radius);padding:22px;margin:24px 0;box-shadow:var(--shadow)}
.authorbox img{width:84px;height:84px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:3px solid var(--lime)}
.authorbox h3,.authorbox h4{margin:0 0 5px}

/* ---------------- Footer ---------------- */
.ad-disclosure-bar{background:var(--cream-2);border-top:1px solid var(--line);font-size:.83rem;color:var(--muted);padding:16px 0}
.ad-disclosure-bar b{color:var(--leaf)}
.site-footer{background:linear-gradient(160deg,#10271a,#0a160d);color:#aec5ae;padding:34px 0 24px;font-size:.92rem}
.site-footer .cols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:28px}
.site-footer h4{font-family:'Baloo 2',sans-serif;color:var(--lime);font-size:.9rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 11px}
.site-footer a{color:#aec5ae;display:block;padding:4px 0}
.site-footer a:hover{color:#fff}
.site-footer img.flogo{height:58px;width:auto}
.foot-rg{display:flex;gap:12px;align-items:center;margin-top:10px;font-size:.82rem;color:#9bb59b}
.rg18{border:2px solid var(--lime);border-radius:50%;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--lime);font-size:.8rem;flex:0 0 auto;font-family:'Baloo 2',sans-serif}
.foot-legal{border-top:1px solid rgba(255,255,255,.12);margin-top:22px;padding-top:16px;font-size:.82rem;color:#88a088;display:flex;align-items:center;gap:8px}
.foot-legal .facemark{width:16px;height:16px;flex:0 0 auto}

/* EEAT page hero strip */
.page-hero{position:relative;overflow:hidden;color:#fff;border-bottom:3px solid var(--lime);
  background:radial-gradient(700px 280px at 85% -20%,rgba(153,204,103,.18),transparent 60%),linear-gradient(160deg,#0c1a10,#10271a 75%)}
.page-hero .wrap{padding:26px 22px 22px;position:relative;z-index:2}
.page-hero h1{color:#fff;margin:0}
.page-hero .lede{color:#cfe3cf;font-size:1.06rem;max-width:60ch;margin:.5em 0 0}

/* ---------------- Responsive ---------------- */
@media(max-width:980px){
  .grid-cards{grid-template-columns:repeat(2,1fr)}
  .content .layout{grid-template-columns:1fr}
  .rail{display:none}
}
@media(max-width:820px){
  body{font-size:16px}
  h1{font-size:1.6rem}h2{font-size:1.2rem}
  .brand img{height:54px}
  .mast-in{padding:7px 18px}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fffdf7;flex-direction:column;align-items:stretch;gap:0;padding:8px 0;border-bottom:4px solid var(--lime);box-shadow:0 12px 30px rgba(0,0,0,.15);z-index:50}
  .nav.open{display:flex}
  .nav a{padding:13px 22px;border-top:1px solid var(--line)}
  .nav .cta{margin:8px 20px;text-align:center}
  .burger{display:block}
  .hero-split{grid-template-columns:1fr;gap:3px;padding:9px 22px 2px}
  .hero-visual{display:none}            /* decorative; keep toplist above the fold */
  .stage .tree{height:auto;width:100px;opacity:.4;top:0;right:-12px}
  .stage:before{display:none}
  .stage h1{max-width:none;margin-bottom:.12em;font-size:1.24rem;line-height:1.1}
  .stage .lede{font-size:.8rem;line-height:1.38;margin:0 0 5px}
  .byline{padding:5px 0;margin-bottom:5px;gap:4px 11px}
  .byline img{height:32px;width:32px}
  .by-id .nm{font-size:.95rem}
  .by-id .role{font-size:.76rem}
  .by-meta{font-size:.74rem;gap:3px 12px;margin-top:2px}
  .by-meta svg{width:13px;height:13px}
  .hero-jump{padding:8px 16px;font-size:.9rem;margin:0}
  /* move the fine-print note below the cards so a full card reaches the fold */
  .toplist-zone .wrap{display:flex;flex-direction:column;padding:3px 22px 32px}
  .toplist-zone h2{margin-top:.05em;margin-bottom:.3em}
  .toplist-zone .zone-note{order:9;font-size:.82rem;margin:14px 0 0;color:#9bb59b}
  /* compact #1 spotlight so the whole card sits above the fold */
  .spotlight{grid-template-columns:1fr;margin-bottom:14px}
  .spot-top{padding:7px 13px}
  .spot-top .stars{font-size:.85rem}
  .spot-logo{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:7px 12px;padding:11px 14px;text-align:left}
  .spot-logo .logo-chip{width:108px;height:46px;margin:0}
  .spot-name{font-size:1.2rem}
  .spot-logo .tags{flex-basis:100%;justify-content:flex-start;margin-top:1px}
  .spot-logo .tag{font-size:.68rem;padding:2px 8px}
  .spot-body{padding:13px 15px}
  .spot-offer{padding-bottom:10px;margin-bottom:10px}
  .spot-offer .lbl{font-size:.64rem}
  .spot-offer .amt{font-size:1.62rem;margin:1px 0}
  .spot-offer .code{font-size:.8rem}
  /* the same 3 pros appear in the MadCasino review box below; drop them here so the whole #1 card sits above the fold */
  .spot-reasons{display:none}
  .spot-body .btn-claim{padding:10px;margin-top:0}
  .subscores{grid-template-columns:repeat(3,1fr)}
  .proscons{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  table{font-size:.86rem}
}
@media(max-width:560px){
  .grid-cards{grid-template-columns:1fr}
  .subscores{grid-template-columns:repeat(2,1fr)}
  .site-footer .cols{grid-template-columns:1fr}
}