/* Inner-page (article) layer — extends home.css with the same palette/fonts.
   Used on every non-homepage so the whole site shares one design system. */
.phero{position:relative;overflow:hidden;padding:52px 0 18px;background:linear-gradient(90deg,#eef5ff 0%,#e2eeff 55%,#dbeaff 100%);border-bottom:1px solid var(--line)}
.phero .eyebrow{margin-bottom:12px}
.phero h1{margin:0 0 14px;max-width:900px;font-size:clamp(2.1rem,4.6vw,3.7rem);line-height:.98;letter-spacing:-.055em;color:var(--ink)}
.phero h1 em,.phero h1 .serif{color:var(--blue);font:italic 1em var(--serif);letter-spacing:-.04em}
.phero .lede{max-width:720px;color:#3e5b7c;font-size:1.05rem;margin:0}
.phero .trustrow{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.phero .badge{text-transform:none;letter-spacing:.02em}
.phero .updated{margin:10px 0 0;color:var(--muted);font-size:.78rem}
.phero .updated b{color:var(--ink)}
.breadcrumb{background:#fff;border-bottom:1px solid var(--line)}
.breadcrumb .wrap{padding:9px 0;font:.72rem var(--mono);color:var(--muted);display:flex;gap:7px;flex-wrap:wrap}
.breadcrumb a{color:#4a6280}.breadcrumb a:hover{color:var(--blue)}
.page-body{padding:16px 0 56px}
.page-body .col{width:100%}
/* first heading sits tight under the hero (no empty band) */
.page-body>.col>h2:first-of-type,.page-body>.col>h1:first-of-type{margin-top:.1em}
/* prose stays readable; money elements (toplist, tables, top pick) span full width */
.page-body h2,.page-body h3,.page-body>.col>p,.page-body .note,.page-body .warn,.page-body .authorcard,.page-body .faq,.page-body .col>ul,.page-body .col>ol:not(.casino-list){max-width:820px}
.page-body .casino-list,.page-body table.cmp,.page-body .toppick,.page-body .proscons,.page-body .toc{max-width:100%}
.page-body h2{font-size:clamp(1.6rem,2.8vw,2.35rem);line-height:1.05;letter-spacing:-.04em;margin:2em 0 .5em}
.page-body h3{font-size:1.2rem;letter-spacing:-.02em;margin:1.5em 0 .4em}
.page-body p,.page-body li{color:#33465e;font-size:1rem}
.page-body ul,.page-body ol{padding-left:20px;margin:0 0 1.1em}
.page-body li{margin:.35em 0}
.page-body a{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
.page-body strong,.page-body b{color:var(--ink)}
/* TOC */
.toc{margin:6px 0 22px;padding:16px 20px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow)}
.toc b{display:block;color:var(--blue);font:500 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px}
.toc ol{margin:0;padding-left:20px;columns:2;color:#4a6280;font-size:.86rem}
.toc a{color:#4a6280;text-decoration:none}.toc a:hover{color:var(--blue)}
@media(max-width:620px){.toc ol{columns:1}}
/* featured top pick */
.toppick{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;margin:18px 0;padding:20px 22px;border:1px solid #cfe0f4;border-left:5px solid var(--orange);border-radius:16px;background:linear-gradient(120deg,#fff,#f4f9ff);box-shadow:var(--shadow)}
.toppick .tag{color:var(--orange);font:500 .64rem var(--mono);letter-spacing:.07em;text-transform:uppercase}
.toppick h3{margin:.25em 0;font-size:1.35rem;letter-spacing:-.03em;color:var(--ink)}
.toppick .stars{color:var(--orange);font-weight:700}
.toppick p{margin:.35em 0 0;color:#4d6987;font-size:.9rem;max-width:560px}
.toppick .rgnote{margin:.6em 0 0;font-size:.66rem;color:var(--muted)}
.toppick .btn{white-space:nowrap}
@media(max-width:900px){
  .toppick{grid-template-columns:1fr;text-align:center;justify-items:center}
  .toppick .logo{margin:0 auto 10px}
  .toppick p,.toppick .rgnote{margin-left:auto;margin-right:auto}
  .toppick .btn{width:100%}
}
/* comparison tables */
table.cmp{border-collapse:collapse;width:100%;margin:14px 0 20px;font-size:.9rem;border:1px solid var(--line);border-radius:12px;overflow:hidden}
table.cmp th,table.cmp td{padding:11px 13px;text-align:left;border-bottom:1px solid var(--line)}
table.cmp th{background:#eaf2fd;color:var(--deep);font-weight:700;font-size:.82rem}
table.cmp td{color:#3e5b7c}
table.cmp tr:last-child td{border-bottom:0}
table.cmp tr:nth-child(even) td{background:#f7faff}
/* callouts */
.note,.warn{margin:16px 0;padding:14px 16px;border-radius:0 12px 12px 0;font-size:.92rem}
.note{border-left:4px solid var(--green);background:#effaf4;color:#245c47}
.warn{border-left:4px solid var(--orange);background:#fff3ee;color:#8a4326}
.note b,.warn b{color:inherit}
.note a,.warn a{color:var(--blue)}
/* pros & cons */
.proscons{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}
.proscons .box{border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.proscons .pro{background:#effaf4;border-color:#bfe6d3}
.proscons .con{background:#fff3ee;border-color:#f3ccbb}
.proscons h4{margin:.1em 0 .5em;font-size:.95rem}
.proscons .pro h4{color:var(--green)}.proscons .con h4{color:#b4522a}
.proscons ul{margin:0;padding-left:18px}.proscons li{margin:.3em 0;font-size:.9rem;color:#3e5b7c}
@media(max-width:620px){.proscons{grid-template-columns:1fr}}
/* faq single column on inner pages */
.page-body .faq{padding:8px 0 0}
.page-body .faq h2{margin-bottom:.3em}
.page-body .faq details{padding:14px 0;border-bottom:1px solid var(--line)}
.page-body .faq summary{display:flex;justify-content:space-between;gap:12px;cursor:pointer;list-style:none;font-size:.95rem;font-weight:700;color:var(--ink)}
.page-body .faq summary::-webkit-details-marker{display:none}
.page-body .faq summary:after{content:"+";color:var(--blue);font-size:1.15rem}
.page-body .faq details[open] summary:after{content:"–"}
.page-body .faq .a{margin:9px 0 0;color:#4a6280;font-size:.9rem;line-height:1.6}
.page-body .faq .a a{color:var(--blue)}
/* legal/plain pages: style a leading h1 + lede that live in the body-column */
.page-body h1{font-size:clamp(2rem,4vw,3rem);line-height:1;letter-spacing:-.05em;margin:.1em 0 .5em;max-width:820px}
.page-body .lede{max-width:820px;color:#3e5b7c;font-size:1.05rem;margin:0 0 1.2em}
/* author card */
.authorcard{display:grid;grid-template-columns:64px 1fr;gap:16px;align-items:start;margin:30px 0 0;padding:18px 20px;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--shadow)}
.authorcard .av{width:64px;height:64px;border-radius:14px;background:var(--ice);color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:1.2rem}
.authorcard b{color:var(--ink)}.authorcard span{color:var(--muted);font-size:.85rem}
.authorcard .role{color:var(--blue);font-size:.8rem;font-weight:700}
/* affiliate note under casino-list */
.rgnote{font-size:.72rem;color:var(--muted);margin:8px 0 0}
.rgnote b{color:#8a4326}

.toppick .logo{margin-bottom:8px}
/* CTA buttons in the article body must keep their white label — the generic
   `.page-body a{color:var(--blue)}` rule was tinting them blue-on-blue (invisible). */
.page-body a.btn,.page-body a.btn:hover,.page-body a.btn:visited{color:#fff;text-decoration:none}
/* ── author + updated byline under the H1 (EEAT; kept above the fold on mobile) ── */
.hero-byline{display:flex;gap:11px;align-items:center;margin:14px 0 2px}
.hero-byline .av{width:40px;height:40px;flex:0 0 40px;border-radius:11px;background:var(--ice);color:var(--blue);display:grid;place-items:center;font-weight:800;font-size:.88rem}
.hero-byline .who{font-size:.84rem;color:#3e5b7c;line-height:1.32}
.hero-byline .who b{color:var(--ink)}
.hero-byline .upd{display:block;color:var(--muted);font-size:.75rem}
/* Mobile above-the-fold: lead with H1 → byline → the toplist H2 → the table.
   Hide the lede, trust badges and the top-pick card on phones so the table rises. */
@media(max-width:620px){
  .phero{padding:20px 0 12px}
  .phero .eyebrow{margin-bottom:8px}
  .phero .lede,.phero .trustrow{display:none}
  .page-body{padding:16px 0 48px}
  .page-body>.col>h2:first-of-type{margin-top:.2em}
}
/* author headshots fill the avatar boxes (byline + author card + authors page) */
.av img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.hero-byline .av,.authorcard .av{overflow:hidden;padding:0}