/* BarberBoats — editorial dark theme (Studio-inspired) | homepage design system */
:root{
  --bb-black:#0e0f10; --bb-black-2:#161719; --bb-black-3:#1e2023;
  --bb-cream:#ece9e2; --bb-cream-2:#f5f3ee;
  --gold:#f5c451; --gold-dk:#d9a52f;
  --teal:#2ec4b6;
  --line-a:rgba(236,233,226,.14);
  --radius:16px; --radius-sm:10px;
  --wrap:1400px; --gutter:clamp(20px,4vw,64px);
  --sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"Space Mono","SF Mono",ui-monospace,Menlo,monospace;
  --body:"Inter",-apple-system,sans-serif;
  /* theme (dark default) */
  --bg:var(--bb-black); --bg-2:var(--bb-black-2); --bg-3:var(--bb-black-3);
  --tx:var(--bb-cream); --tx-mute:#9a978f; --card:#161719; --line:var(--line-a);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
html.no-transition *{transition:none!important}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transition:background .5s ease,color .5s ease;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tx-mute)}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;line-height:1.02;letter-spacing:-.02em;margin:0}
p{margin:0 0 1.1em}
::selection{background:var(--gold);color:#141210}

/* ---------- top strip ---------- */
.topstrip{background:var(--bg-2);color:var(--tx-mute);font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;
  text-transform:uppercase;text-align:center;padding:7px var(--gutter);border-bottom:1px solid var(--line)}
.topstrip a{color:var(--tx);border-bottom:1px solid var(--gold)}
.topstrip strong{color:var(--gold)}

/* ---------- top nav ---------- */
.snav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.snav_in{display:flex;align-items:center;gap:24px;height:72px}
.snav_logo{display:flex;flex-direction:column;justify-content:center;font-family:var(--sans);font-weight:700;font-size:1.25rem;letter-spacing:-.02em;flex-shrink:0;line-height:1.02}
.snav_logo b{color:var(--gold)}
.snav_logo_tag{font-family:var(--mono);font-weight:400;font-size:.54rem;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-mute);margin-top:4px}
.snav_links{display:flex;gap:4px;list-style:none;margin:0;padding:0;flex:1;justify-content:center}
.snav_links a{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;padding:8px 12px;border-radius:8px;color:var(--tx-mute);transition:color .2s,background .2s}
.snav_links a:hover{color:var(--tx);background:color-mix(in srgb,var(--tx) 8%,transparent)}
.snav_links a[aria-current="page"]{color:var(--gold)}
.snav_links a.active{color:var(--gold)}
/* dropdown clusters */
.has-sub{position:relative}
.has-sub>a:after{content:"▾";font-size:.85em;margin-left:5px;opacity:.55}
.submenu{display:none;position:absolute;top:100%;left:0;min-width:236px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px;padding:8px;flex-direction:column;gap:1px;box-shadow:0 22px 54px rgba(0,0,0,.45);z-index:70}
.has-sub:hover>.submenu,.has-sub:focus-within>.submenu{display:flex}
.submenu a{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.03em;color:var(--tx-mute);
  padding:10px 12px;border-radius:8px;white-space:nowrap}
.submenu a:hover{background:color-mix(in srgb,var(--tx) 8%,transparent);color:var(--tx)}
.submenu a[aria-current="page"]{color:var(--gold)}
@media(max-width:1080px){
  .has-sub>a:after{display:none}
  .submenu{display:flex;position:static;border:0;box-shadow:none;background:transparent;padding:0 0 8px 16px;min-width:0;gap:0}
  .submenu a{font-size:.8rem;padding:9px 8px}
}
.snav_right{display:flex;align-items:center;gap:10px;flex-shrink:0}
.snav_cta{background:var(--gold);color:#141210;font-family:var(--mono);font-weight:700;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.04em;padding:10px 16px;border-radius:22px;transition:.2s}
.snav_cta:hover{background:var(--gold-dk);transform:translateY(-1px)}
.burger{display:none;background:none;border:0;cursor:pointer;padding:8px}
.burger span{display:block;width:24px;height:2px;background:var(--tx);margin:5px 0;transition:.2s}
@media(max-width:1080px){
  .snav_links{position:fixed;inset:72px 0 auto 0;flex-direction:column;background:var(--bg);padding:16px var(--gutter);
    gap:2px;border-bottom:1px solid var(--line);display:none;justify-content:flex-start}
  .snav_links.open{display:flex}
  .snav_links a{font-size:.9rem;padding:12px 8px}
  .burger{display:block}
  .snav_links{max-height:calc(100vh - 72px);overflow:auto}
}

/* ---------- bottom fixed bar ---------- */
.botbar{position:fixed;bottom:0;left:0;right:0;z-index:40;pointer-events:none;
  padding:12px var(--gutter);display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.botbar_tag{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-mute);
  background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(8px);padding:6px 12px;border-radius:20px;border:1px solid var(--line)}
.botbar_clocks{display:flex;gap:14px;flex-wrap:wrap}
.botbar_clock{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tx-mute);
  background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:blur(8px);padding:6px 10px;border-radius:20px;border:1px solid var(--line)}
.botbar_clock b{color:var(--tx);font-weight:400}
@media(max-width:760px){.botbar_tag{display:none}.botbar{justify-content:center}}
@media(max-width:520px){.botbar_clock:nth-child(n+3){display:none}}

/* ---------- hero ---------- */
.shero{padding:clamp(18px,3vw,44px) 0 clamp(36px,6vw,72px);position:relative}
.shero_kicker{margin-bottom:26px}
.shero h1{font-size:clamp(3rem,12vw,10.5rem);font-weight:700;letter-spacing:-.045em;line-height:.92;text-transform:none}
.shero h1 em{font-style:normal;color:var(--gold)}
.shero_lede{max-width:none;margin:34px 0 0;font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--tx-mute)}
.shero_meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.chip{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tx);
  border:1px solid var(--line);border-radius:20px;padding:7px 13px}
.chip.gold{border-color:var(--gold);color:var(--gold)}

/* ---------- inner-page hero ---------- */
.shero.is-inner{padding:clamp(20px,3vw,44px) 0 clamp(24px,4vw,52px)}
.shero.is-inner h1{font-size:clamp(2.4rem,6vw,5rem);line-height:.98}
.breadcrumb{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-mute);margin-bottom:16px}
.breadcrumb a{color:var(--tx-mute)}.breadcrumb a:hover{color:var(--gold)}

/* ---------- pros / cons ---------- */
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0}
@media(max-width:560px){.pros-cons{grid-template-columns:1fr}}
.pros,.cons{border:1px solid var(--line);border-radius:var(--radius);padding:22px;background:var(--card)}
.pros h4,.cons h4{font-size:1.05rem;margin-bottom:10px}
.pros h4{color:#4bd18a}.cons h4{color:#e8735a}
.pros ul,.cons ul{margin:0;padding-left:18px}.pros li,.cons li{margin:7px 0;color:var(--tx-mute)}

/* ---------- toc ---------- */
.toc{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;margin:26px 0}
.toc .k{font-family:var(--mono);font-size:.7rem;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:12px}
.toc ol{margin:0;padding-left:20px;columns:2;column-gap:34px}.toc li{margin:5px 0}
.toc a{color:var(--tx)}.toc a:hover{color:var(--gold)}
@media(max-width:560px){.toc ol{columns:1}}

/* ---------- author box ---------- */
.authorbox{display:flex;gap:18px;align-items:flex-start;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:30px 0}
.authorbox img{width:64px;height:64px;border-radius:50%;flex-shrink:0;object-fit:cover;object-position:top center;border:2px solid var(--line)}
.authorbox h4{font-size:1.1rem;margin-bottom:4px}
.authorbox p{margin:0;color:var(--tx-mute);font-size:.92rem}

/* ---------- tag ---------- */
.tag{display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  background:var(--gold);color:#141210;padding:4px 10px;border-radius:14px}
.tag.na{background:var(--bg-3);color:var(--tx-mute);border:1px solid var(--line)}

/* ---------- section scaffolding ---------- */
.sec{padding:clamp(50px,8vw,120px) 0;border-top:1px solid var(--line)}
.sec_head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:44px;flex-wrap:wrap}
.sec_head h2{font-size:clamp(1.9rem,4.5vw,3.6rem);letter-spacing:-.03em;max-width:16ch}
.sec_num{font-family:var(--mono);font-size:.72rem;color:var(--tx-mute);text-transform:uppercase;letter-spacing:.08em}
.lead-p{font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:none;color:var(--tx)}

/* ---------- reveal animation ---------- */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}.reveal[data-d="4"]{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ---------- top pick spotlight ---------- */
.spotlight{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card)}
.spotlight_l{padding:clamp(28px,4vw,52px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.spotlight_l .tag{align-self:flex-start;background:var(--gold);color:#141210;font-family:var(--mono);font-size:.66rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;padding:6px 12px;border-radius:20px}
.spotlight_l h3{font-size:clamp(2rem,4vw,3.2rem);letter-spacing:-.03em}
.spotlight_l .offer{font-size:1.4rem;color:var(--gold);font-family:var(--sans);font-weight:500}
.spotlight_r{background:var(--bb-black-2);display:flex;align-items:center;justify-content:center;padding:40px;border-left:1px solid var(--line)}
.spotlight_r img{max-height:130px;max-width:80%;object-fit:contain;background:#fff;border-radius:var(--radius-sm);padding:20px 26px}
@media(max-width:820px){.spotlight{grid-template-columns:1fr}.spotlight_r{border-left:0;border-top:1px solid var(--line);padding:32px}}

/* ---------- operator rank list ---------- */
.rank-list{display:flex;flex-direction:column;gap:12px}
.op-card{display:grid;grid-template-columns:40px 140px 1fr auto;align-items:center;gap:22px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--radius);padding:18px 24px;position:relative;transition:border-color .25s,transform .25s}
.op-card:hover{border-color:color-mix(in srgb,var(--gold) 60%,var(--line));transform:translateY(-2px)}
.op-card.top-pick{border-color:var(--gold)}
.op-rank{font-family:var(--mono);font-size:1.1rem;color:var(--tx-mute);text-align:center}
.op-card.top-pick .op-rank{color:var(--gold)}
.op-logo{background:#fff;border-radius:var(--radius-sm);height:66px;display:flex;align-items:center;justify-content:center;padding:10px}
.op-logo img{max-height:42px;max-width:120px;object-fit:contain}
.op-name{font-family:var(--sans);font-weight:700;font-size:1.15rem;margin:0}
.op-offer{margin:3px 0 0;color:var(--tx);font-size:.95rem}
.op-offer strong{color:var(--gold);font-weight:700}
.op-meta{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:7px;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.03em;color:var(--tx-mute)}
.op-meta b{color:var(--tx);font-weight:400}
.op-cta{display:flex;flex-direction:column;gap:6px;min-width:150px;align-items:stretch}
.rating{font-family:var(--mono);font-weight:700;text-align:center;color:var(--gold);font-size:1rem}
.stars{text-align:center;color:var(--gold);font-size:.8rem;letter-spacing:2px}
.badge-pick{position:absolute;top:-11px;left:60px;background:var(--gold);color:#141210;font-family:var(--mono);font-size:.6rem;
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 10px;border-radius:20px}
.btn{display:inline-block;text-align:center;background:var(--gold);color:#141210;font-family:var(--mono);font-weight:700;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.04em;padding:12px 18px;border-radius:24px;transition:.2s;border:0;cursor:pointer}
.btn:hover{background:var(--gold-dk);transform:translateY(-1px)}
.btn-block{display:block;width:100%}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--tx)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:transparent}
.review-link{font-family:var(--mono);font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;text-align:center;color:var(--tx-mute)}
@media(max-width:820px){
  .op-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:46px 20px 22px}
  .op-info,.op-cta{display:contents}
  .op-rank{position:absolute;top:14px;left:14px;width:36px;height:36px;border-radius:50%;background:var(--gold);
    color:#141210;display:flex;align-items:center;justify-content:center;font-size:1.05rem;font-weight:700;order:0}
  .op-card.top-pick .op-rank{background:var(--gold)}
  .badge-pick{top:12px;left:50%;transform:translateX(-50%);right:auto}
  .op-logo{order:1;height:78px;min-width:170px;width:auto;padding:14px 22px}
  .op-logo img{max-height:52px;max-width:150px}
  .stars{order:2;font-size:1.05rem;letter-spacing:3px}
  .rating{display:none}
  .op-name{order:3;font-size:1.35rem}
  .op-offer{order:4;font-size:1.05rem;color:var(--gold);font-weight:700;max-width:30ch}
  .op-offer strong{color:var(--gold)}
  .op-meta{order:5;justify-content:center}
  .btn{order:6;width:100%;padding:16px;font-size:.82rem;margin-top:4px}
  .review-link{order:7}
}

/* ---------- big verticals list ---------- */
.vlist{border-top:1px solid var(--line)}
.vrow{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:clamp(20px,3vw,38px) 0;
  border-bottom:1px solid var(--line);position:relative;transition:padding-left .3s ease}
.vrow:hover{padding-left:18px}
.vrow_name{font-family:var(--sans);font-weight:700;font-size:clamp(1.8rem,5vw,4rem);letter-spacing:-.03em;transition:color .25s}
.vrow:hover .vrow_name{color:var(--gold)}
.vrow_meta{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--tx-mute);text-align:right;flex-shrink:0}
.vrow_arrow{font-size:1.6rem;color:var(--gold);opacity:0;transform:translateX(-10px);transition:.25s}
.vrow:hover .vrow_arrow{opacity:1;transform:none}
@media(max-width:640px){.vrow_meta{display:none}}

/* ---------- logo marquee ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee_track{display:flex;gap:22px;width:max-content;animation:scroll-x 46s linear infinite;align-items:center}
.marquee:hover .marquee_track{animation-play-state:paused}
.marquee img{height:44px;width:auto;object-fit:contain;background:#fff;border-radius:10px;padding:10px 18px;opacity:.85;transition:opacity .2s}
.marquee img:hover{opacity:1}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* ---------- cards / grids ---------- */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:820px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-2,.grid-3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.card h3{font-size:1.2rem;margin-bottom:8px}
.card p{color:var(--tx-mute);font-size:.95rem;margin:0}
.card .k{font-family:var(--mono);font-size:.7rem;color:var(--gold);text-transform:uppercase;letter-spacing:.05em;display:block;margin-bottom:12px}

/* ---------- data table ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
table.data{border-collapse:collapse;width:100%;font-size:.92rem;background:var(--card);min-width:560px}
table.data th{background:var(--bg-2);text-align:left;padding:14px 16px;font-family:var(--mono);font-size:.7rem;
  text-transform:uppercase;letter-spacing:.04em;color:var(--tx-mute);border-bottom:1px solid var(--line)}
table.data td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top}
table.data td strong,table.data td b{color:var(--tx)}

/* ---------- callout / keytake ---------- */
.callout{border-left:2px solid var(--gold);background:var(--bg-2);border-radius:0 var(--radius-sm) var(--radius-sm) 0;padding:20px 24px;margin:26px 0}
.callout.warn{border-left-color:#e06c2b}
.callout h4{font-size:1.05rem;margin-bottom:6px}
.callout p{margin:0;color:var(--tx-mute)}
.keytake{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.keytake .k{font-family:var(--mono);font-size:.72rem;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:14px}
.keytake ul{margin:0;padding-left:20px}.keytake li{margin:9px 0;color:var(--tx)}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:22px 40px 22px 0;font-family:var(--sans);font-weight:500;font-size:1.15rem;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:20px;color:var(--gold);font-size:1.5rem;font-weight:400}
.faq details[open] summary:after{content:"–"}
.faq .fa{padding:0 0 22px;color:var(--tx-mute);max-width:70ch}
.faq .fa a{color:var(--gold)}

/* ---------- responsible gambling ---------- */
.rg-block{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:30px}
.rg-block .k{font-family:var(--mono);font-size:.72rem;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:12px}
.rg-block h3{font-size:1.5rem;margin-bottom:10px}
.rg-block p{color:var(--tx-mute)}
.rg-block .lines{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:14px;font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.03em}
.rg-block .lines b{color:var(--tx);font-weight:400}
.rg-block a{color:var(--gold)}

/* ---------- big CTA ---------- */
.bigcta{text-align:center;padding:clamp(60px,10vw,140px) 0}
.bigcta h2{font-size:clamp(2.4rem,8vw,7rem);letter-spacing:-.04em;line-height:.95}
.bigcta p{color:var(--tx-mute);max-width:46ch;margin:22px auto 34px;font-size:1.1rem}

/* ---------- footer ---------- */
.sfoot{border-top:1px solid var(--line);padding:60px 0 30px}
.sfoot_grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
@media(max-width:860px){.sfoot_grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.sfoot_grid{grid-template-columns:1fr}}
.sfoot h5{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tx-mute);margin:0 0 16px}
.sfoot ul{list-style:none;margin:0;padding:0}.sfoot li{margin:9px 0}
.sfoot a{color:var(--tx);font-size:.92rem}.sfoot a:hover{color:var(--gold)}
.sfoot_blurb{color:var(--tx-mute);font-size:.92rem;max-width:38ch}
.sfoot_word_wrap{container-type:inline-size;width:100%;margin:60px 0 20px}
.sfoot_word{font-family:var(--sans);font-weight:700;font-size:13.5cqi;letter-spacing:-.03em;line-height:.85;
  color:var(--tx);opacity:.92;white-space:nowrap;text-align:center}
.sfoot_word b{color:var(--gold)}
@supports not (width:1cqi){.sfoot_word{font-size:clamp(2.5rem,11vw,9.5rem)}}
.sfoot_bottom{border-top:1px solid var(--line);margin-top:30px;padding-top:22px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tx-mute)}
.agesign{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#d23f3f;color:#fff;font-family:var(--mono);font-weight:700;font-size:.68rem}

/* content prose block reused for lower SEO sections */
.prose{max-width:74ch}
.prose h2{margin:0 0 14px}.prose h3{font-size:1.3rem;margin:1.6em 0 .4em}
.prose p{color:var(--tx-mute)}
.prose a{color:var(--gold)}
.disclosure{font-family:var(--mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tx-mute);
  border:1px solid var(--line);border-radius:20px;padding:9px 16px;display:inline-block}
.byline{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--tx-mute);margin-top:14px;
  display:flex;align-items:center;flex-wrap:wrap;gap:5px 9px;line-height:1.3}
.byline a{color:var(--tx);border-bottom:1px solid var(--gold)}
.byline-av{width:30px;height:30px;border-radius:50%;object-fit:cover;object-position:top center;
  margin:0;border:1px solid var(--line);background:var(--bg-3);flex-shrink:0}

/* ---------- mobile overflow + header fixes ---------- */
html{max-width:100%;overflow-x:hidden}
h1,h2,h3,.shero h1,.shero_lede,.op-offer,.op-name{overflow-wrap:break-word}
@media(max-width:1080px){
  .snav_in{gap:14px}
  .snav_cta{display:none}                       /* redundant on mobile — Casinos lives in the menu */
  .snav_logo{font-size:1.1rem}
}
/* Mobile typography — smaller, calmer headings with open spacing so nothing feels cramped */
@media(max-width:820px){
  .shero h1,.shero.is-inner h1{line-height:1.18;letter-spacing:0}
  h2,.sec_head h2,.bigcta h2{line-height:1.22;letter-spacing:0}
  h3,h4{line-height:1.3}
  .prose p,.lead-p,.shero_lede,.faq .fa,.op-offer,p{line-height:1.7}
  .sec_head{margin-bottom:24px}
  .prose h3{margin-top:1.5em}
}
@media(max-width:560px){
  :root{--gutter:22px}
  .topstrip{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.6rem;padding:7px 12px}
  .topstrip .ts-extra{display:none}
  .snav_in{gap:10px;height:60px}
  .snav_links{top:60px}
  .shero h1{font-size:clamp(1.9rem,8.5vw,2.7rem)}
  .shero.is-inner h1{font-size:clamp(1.5rem,5.8vw,2rem)}
  .shero_lede{font-size:1rem}
  .shero_kicker,.breadcrumb{font-size:.62rem}
  .sec_head h2,.sec_head{gap:6px}
  .sec_head h2{font-size:clamp(1.4rem,5vw,1.8rem)}
  .sec{padding:44px 0}
  .op-card{padding:54px 18px 26px;gap:16px}
  .card,.keytake,.rg-block,.callout,.toc{padding:22px}
  .op-name{font-size:1.25rem}
  .op-offer{font-size:1rem}
  .bigcta h2{font-size:clamp(2rem,10vw,3rem)}
}
/* Mobile: lift the affiliate table above the fold on money pages.
   Hero shows only H1 + author/updated byline; lede, chips & disclosure are hidden on small screens
   (full versions remain on desktop and in the markup). */
@media(max-width:820px){
  .shero.is-money .shero_lede,
  .shero.is-money .shero_meta,
  .shero.is-money .disclosure{display:none}
  .shero.is-money{padding-bottom:12px}
  .shero.is-money .breadcrumb{margin-bottom:10px}
  .shero.is-money h1{margin-bottom:14px}
  .shero.is-money .byline{margin-top:12px}
  /* drop the intro paragraph between the H2 and the table so the table sits directly under its H2 */
  .sec:has(> .rank-list) .lead-p{display:none}
  .sec:has(> .rank-list){padding-top:10px}
}