/* The Gastropig — Non-Gamstop guide. Hero + page layout.
   Distinct hero aesthetic: deep teal gradient, radial glow, dot-grid, angled base. */
.hero{
  position:relative;
  color:#eaf6f4;
  background:
    radial-gradient(1100px 420px at 82% -8%, rgba(27,163,154,.55), transparent 60%),
    radial-gradient(700px 340px at 8% 120%, rgba(15,118,110,.45), transparent 60%),
    linear-gradient(135deg,var(--hero1),var(--hero2));
  padding:2.6rem 0 3.4rem;
  overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 34px),0 100%);
}
.hero::before{            /* dot-grid texture */
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1.4px);
  background-size:22px 22px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 78%);
  mask-image:linear-gradient(180deg,#000,transparent 78%);
  opacity:.6;pointer-events:none;
}
.hero::after{            /* soft edge glow ribbon */
  content:"";position:absolute;right:-140px;top:-120px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(249,115,22,.30),transparent 62%);
  filter:blur(6px);pointer-events:none;
}
.hero .container{position:relative;z-index:2}
.hero .breadcrumb{font-size:.82rem;color:#a9d8d1;margin-bottom:.7rem}
.hero .breadcrumb a{color:#d6f0ec;text-decoration:none}
.hero h1{font-size:clamp(1.65rem,3.4vw,2.5rem);margin:.1rem 0 .5rem;max-width:880px;letter-spacing:-.01em;color:#fff}
.hero .hero-meta{font-size:.84rem;color:#a9d8d1;margin:.2rem 0 .9rem}
.hero .hero-meta a{color:#eaf6f4}
.hero .lead{font-size:1.06rem;color:#dff0ed;max-width:820px;margin:.2rem 0 0}
.hero .hero-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.hero .hero-chips span{
  display:inline-flex;align-items:center;gap:.35rem;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.22);
  border-radius:999px;padding:.32rem .8rem;font-size:.8rem;font-weight:600;color:#eaf6f4;backdrop-filter:blur(3px);
}
.hero .hero-chips span::before{content:"✓";color:#8ff0d8;font-weight:800}
.hero .hero-chips span.age::before{content:"18+";color:#fff;font-size:.7rem}

/* page intro paragraphs sit on the light body */
main.container{padding-top:1.6rem;padding-bottom:1rem}
main.container > p{max-width:820px}
main h2:first-of-type{margin-top:.6rem}
.section-note{color:var(--muted);font-size:.92rem}
.tried{display:flex;align-items:flex-start;gap:.5rem;color:var(--ink);font-size:.96rem;margin:.15rem 0 .35rem;max-width:820px}
.tried::before{content:"✓ Tested";flex:0 0 auto;background:#e7f4f2;color:var(--brand-d);font-weight:800;font-size:.66rem;letter-spacing:.03em;text-transform:uppercase;padding:.16rem .48rem;border-radius:6px;margin-top:.18rem}

@media(max-width:760px){
  .hero{clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),0 100%);padding:1.8rem 0 2.4rem}
  .hero .lead{font-size:1rem}
}

/* === affiliate_table_mobile: pull the money table above the fold on phones ===
   Keep ONLY: H1, author + "Updated" byline (.hero-meta), the first H2 (#ranked),
   and the affiliate table. Hide the rest of the hero (breadcrumb, lede, trust chips)
   and the intro note on ≤760px. Hidden nodes stay in the DOM (indexable). */
@media(max-width:760px){
  html,body{overflow-x:hidden}                 /* no stray horizontal page scroll */
  table.data{display:block;overflow-x:auto;white-space:nowrap;font-size:.82rem}  /* wide info tables scroll locally, don't widen the page */
  .toc ol{columns:1}
  .topbar .disclosure{padding:.32rem 20px;font-size:.72rem}
  .hdr-in{padding:.45rem 20px}
  .hero{padding:.85rem 0 1.15rem}
  .hero .breadcrumb,.hero .lead,.hero .hero-chips,.rev-clause{display:none}
  .hero h1{font-size:1.2rem;line-height:1.2;margin:.1rem 0}
  .hero .hero-meta{display:block;margin:.45rem 0 0;font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  main.container{padding-top:.4rem}
  main h2#ranked{margin:.35rem 0 .35rem;font-size:1rem}
  /* keep the first-person "Tested" line visible above the table on mobile */
  .tried{font-size:.86rem}
  /* swap the desktop comparison table for stacked card rows */
  .tbl-scroll{display:none}
  .op-cards{display:block;margin-top:.5rem}
}