/* ==========================================================================
   Explore Arizona Casinos - shared stylesheet
   Derived from the logo: copper bighorn ram forming the A, navy wordmark, peak motif.
   ONE stylesheet, linked by every page including the root mirror.
   ========================================================================== */

/* --- 1. Tokens ---------------------------------------------------------- */
:root {
  --ink:         #14202E;
  --ink-2:       #233448;
  --ink-3:       #4A5C70;
  --copper:      #C4652F;
  --copper-deep: #A6412A;
  --sand:        #F5EFE6;
  --sand-2:      #EAE0D1;
  --sand-3:      #DCCFBB;
  --white:       #FFFFFF;

  /* RESERVED: money actions only. Appears on .cta* and nothing else. */
  --cta:         #17948C;

  --wrap:        1180px;
  --radius:      3px;
  --serif-none:  0;
}

/* --- 2. Base ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: Inter, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--copper-deep); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--copper); }

h1, h2, h3, h4 {
  font-family: "Barlow Condensed", "Arial Narrow", Inter, sans-serif;
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 .55em;
}

h1 { font-size: 2.45rem; letter-spacing: -0.015em; }
h2 { font-size: 1.95rem; margin-top: 2.3em; }
h3 { font-size: 1.42rem; margin-top: 1.8em; font-weight: 600; }
h4 { font-size: 1.14rem; margin-top: 1.4em; font-weight: 600; }

p { margin: 0 0 1.15em; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 24px; }

.num { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-weight: 700; font-variant-numeric: tabular-nums; }

/* --- 3. The peak motif -------------------------------------------------- */
/* Derived from the logo: the ram-headed A's apex, echoed by the red-rock range set
   into its counter. The earlier X-lattice was derived from a previous logo whose X
   no longer exists; its .xrule / .xtex rules rendered on no page and are gone.
   Three glyphs ship: the .peaklist marker below, .pills li::before, and .tcard__rule > i. */

/* MICRO: the peak as a list marker / inline glyph. Same apex as the logo's A. */
.peaklist { list-style: none; padding: 0; margin: 0 0 1.15em; }
.peaklist li {
  position: relative;
  padding-left: 22px;
  margin-bottom: .5em;
}
.peaklist li::before {
  content: "";
  position: absolute; left: 1px; top: .66em;
  width: 8px; height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7'%3E%3Cpath d='M4 0.6L7.6 6.4H0.4Z' fill='%23C4652F'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- 4. Masthead. NOT sticky. ------------------------------------------ */
.masthead {
  position: static;
  background: var(--white);
  border-bottom: 1px solid var(--sand-3);
}
.masthead__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 84px;
  padding-block: 12px;
}
.masthead__logo { display: inline-flex; align-items: center; text-decoration: none; }
.masthead__logo img { height: 64px; width: auto; }

.nav { display: flex; align-items: center; gap: 26px; }
.nav a {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.nav a:hover { color: var(--copper-deep); }

.burger {
  display: none;
  width: 44px; height: 40px;
  border: 1px solid var(--sand-3);
  background: var(--white);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0;
}
.burger span, .burger span::before, .burger span::after {
  display: block; height: 2px; width: 20px;
  background: var(--ink);
  margin-inline: auto;
  content: "";
}
.burger span { position: relative; }
.burger span::before { position: absolute; top: -6px; }
.burger span::after  { position: absolute; top: 6px; }

/* --- 5. Hero. Compact at BOTH breakpoints so the toplist clears the fold. */
.hero {
  position: relative;
  background: var(--white);
  padding: 22px 0 24px;
  overflow: hidden;
}
/* Red-rock strata. The hero's lower edge ONLY, nowhere else on the site. */
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 16px;
  background:
    linear-gradient(to bottom,
      rgba(166,65,42,.14)  0 5px,
      rgba(196,101,47,.12) 5px 11px,
      rgba(220,207,187,.5) 11px 16px);
}
.hero h1 { max-width: 26ch; margin-bottom: .38em; font-size: 2.2rem; }
.hero__lede {
  font-size: 1.06rem;
  color: var(--ink-2);
  max-width: 72ch;
  margin-bottom: .85em;
}

/* Structured byline. Not a compressed dot-run. */
.byline { display: flex; align-items: center; gap: 14px; }
.byline__shot {
  width: 54px; height: 54px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  border: 2px solid var(--sand-2);
}
.byline__txt { min-width: 0; }
.byline__name {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: .01em;
}
.byline__name a { color: var(--ink); text-decoration: none; }
.byline__name a:hover { color: var(--copper-deep); text-decoration: underline; }
.byline__role { font-size: .86rem; color: var(--ink-3); }
.byline__meta {
  display: flex; flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 4px;
  font-size: .8rem;
  color: var(--ink-3);
}
.byline__meta > span { display: inline-flex; align-items: center; }
.byline__meta > span + span { padding-left: 12px; border-left: 1px solid var(--sand-3); }

/* --- 6. Sections -------------------------------------------------------- */
main { padding-bottom: 10px; }
.sec { padding-block: 4px; }
/* the first heading after the hero drops its top margin, so the toplist rises
   into the fold instead of sitting under a band of empty ground */
.wrap > .sec:first-of-type > h2:first-child { margin-top: .6em; }
.sec > p, .sec > ul, .sec > ol, .sec > h3, .sec > h4, .sec > .note { max-width: 74ch; }

.note {
  background: var(--white);
  border-left: 3px solid var(--copper);
  padding: 14px 18px;
  margin: 0 0 1.3em;
  font-size: .97rem;
  color: var(--ink-2);
}

/* --- 7. Toplist. Two cards per row desktop, one per row mobile. --------- */
.toplist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--sand-3);
  border-top: 3px solid var(--ink);
  padding: 18px 20px 20px;
}
.tcard--pick { border-top-color: var(--copper); }

/* rank numeral in a copper plinth, top-left, the eye's entry point */
.tcard__head { display: flex; align-items: center; gap: 14px; }
.tcard__rank {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: var(--copper);
  color: var(--white);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.32rem;
  line-height: 1;
}
.tcard__chip {
  flex: 1 1 auto;
  min-width: 0;
  height: 54px;
  background: var(--white);
  border: 1px solid var(--sand-2);
  display: grid; place-items: center;
  padding: 6px 10px;
}
.tcard__chip--ink { background: var(--ink); border-color: var(--ink); }
.tcard__chip img { max-height: 40px; width: auto; object-fit: contain; }
.tcard__rate {
  flex: 0 0 auto;
  text-align: right;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.tcard__rate b { display: block; font-size: 1.22rem; color: var(--ink); }
.tcard__stars { color: var(--copper); font-size: .82rem; letter-spacing: .06em; }

.tcard__name {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 1.36rem;
  margin: 12px 0 0;
}
.tcard__ribbon {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: var(--sand-2);
  color: var(--copper-deep);
  font-family: Inter, sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  vertical-align: 3px;
}

/* the micro-motif divider separating identity from offer */
.tcard__rule {
  display: flex; align-items: center; gap: 10px;
  margin: 12px 0 14px;
}
.tcard__rule::before { content: ""; flex: 0 0 26px; height: 1px; background: var(--sand-3); }
.tcard__rule::after  { content: ""; flex: 1 1 auto; height: 1px; background: var(--sand-3); }
/* The divider glyph: a peak, matching the logo's A. It was an X-cross, derived from a
   previous logo; the X no longer exists anywhere in the mark. A divider is the one place
   an X was still defensible, but keeping it would leave the site's only repeated glyph
   pointing at a logo that is gone. */
.tcard__rule > i {
  flex: 0 0 auto; width: 9px; height: 9px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath d='M1.5 6.3L4.5 2.4L7.5 6.3' fill='none' stroke='%23C4652F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* --- 7b. Card click targets --------------------------------------------- */
/* The brand logo and the bonus block are affiliate links as well as the CTA, so all
   three high-intent things in a card reach the operator.
   Only the CTA is in the tab order: three tab stops x 14 cards = 42 stops to walk
   past, all going to the same URL. The logo link is aria-hidden too, because the brand
   name is announced right below it from .tcard__name. The bonus link is NOT
   aria-hidden -- the figure and terms are content a screen reader must still read. */
/* stretch overrides the chip's place-items:center, which would otherwise size this
   anchor to the logo image and leave the rest of the chip unclickable */
.tcard__golo {
  display: grid;
  place-items: center;
  align-self: stretch;
  justify-self: stretch;
  text-decoration: none;
}
.tcard__chip:hover { border-color: var(--copper); }

/* text-decoration inherits into descendants and a child cannot cancel it, so the
   underline has to be killed on the anchor or the bonus figure ships underlined. */
.tcard__gobonus {
  display: block;
  text-decoration: none;
  color: inherit;
}
.tcard__gobonus:hover .tcard__bonus {
  color: var(--copper-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* the bonus is the eye-catcher: largest type in the card, copper, never black */
.tcard__bonuslabel {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.tcard__bonus {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.92rem;
  line-height: 1.08;
  color: var(--copper);
  margin-bottom: 4px;
}
.tcard__terms {
  font-size: .87rem;
  color: var(--ink-2);
  margin-bottom: 12px;
}
.tcard__code { font-size: .84rem; color: var(--ink-3); margin-bottom: 12px; }
.tcard__code b { color: var(--ink); font-weight: 600; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; padding: 0; list-style: none; }
.pills li {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px 3px 7px;
  background: var(--sand);
  border: 1px solid var(--sand-2);
  font-size: .76rem;
  color: var(--ink-2);
}
/* A peak: the apex of the ram-headed A in the logo, echoed by the red-rock range in
   its counter. Never a full X or a cross next to a feature name — that reads as
   "not available", which is the opposite of what these pills mean. */
.pills li::before {
  content: "";
  width: 7px; height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 7'%3E%3Cpath d='M4 0.6L7.6 6.4H0.4Z' fill='%23A6412A'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tcard__foot { margin-top: auto; }
.tcard__disc { font-size: .72rem; color: var(--ink-3); margin: 8px 0 0; }

/* --- 8. CTAs. Three variants, all --cta, used on nothing else. ---------- */
.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-size: 1.06rem;
  letter-spacing: .035em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}

/* 8a. the pressed physical key: toplist + review cards */
.cta--claim {
  width: 100%;
  padding: 13px 18px;
  background: var(--cta);
  color: var(--white);
  border: 0;
  box-shadow: 2px 2px 0 0 var(--copper-deep);
}
.cta--claim:hover { color: var(--white); box-shadow: 3px 3px 0 0 var(--copper-deep); }
.cta--claim:active { transform: translate(2px, 2px); box-shadow: 0 0 0 0 var(--copper-deep); }

/* 8b. the ONE hero action. Drives DOWN into the ranking, nowhere else. */
.cta--descend {
  padding: 10px 18px;
  background: transparent;
  color: var(--cta);
  border: 1.5px solid var(--cta);
}
.cta--descend:hover { color: var(--cta); background: rgba(23, 148, 140, .07); }
/* This button descends into the ranking, so it carries a down arrow. The X-cross
   belongs on dividers and markers, not on a call to action, where it reads as a
   dismiss control. */
.cta--descend > i {
  width: 11px; height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M5.5 1.2V9.4M2 6L5.5 9.6L9 6' fill='none' stroke='%2317948C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .18s ease;
}
.cta--descend:hover > i { transform: translateY(2px); }

/* 8b2. .cta--go — same ghost treatment, but it NAVIGATES to another page rather than
   descending the current one, so it carries a forward arrow. .cta--descend is reserved
   for the one in-page hero action; a down arrow on a cross-page link tells the reader
   to scroll when the click actually leaves the page. */
.cta--go {
  padding: 10px 18px;
  background: transparent;
  color: var(--cta);
  border: 1.5px solid var(--cta);
}
.cta--go:hover { color: var(--cta); background: rgba(23, 148, 140, .07); }
.cta--go > i {
  width: 11px; height: 11px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'%3E%3Cpath d='M1.2 5.5H9.4M6 2L9.6 5.5L6 9' fill='none' stroke='%2317948C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  transition: transform .18s ease;
}
.cta--go:hover > i { transform: translateX(2px); }

/* 8c. the masthead / hamburger pill */
.cta--nav {
  padding: 8px 15px;
  font-size: .95rem;
  background: var(--cta);
  color: var(--white);
  border: 0;
}
.cta--nav:hover { color: var(--white); filter: brightness(1.07); }

/* --- 9. Snapshot strip. The flag-ray fan lives HERE and nowhere else. --- */
.snapshot {
  position: relative;
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--sand-3);
  padding: 22px 24px;
  margin: 0 0 1.6rem;
}
.snapshot::before {
  content: "";
  position: absolute;
  top: -70%; left: 50%;
  width: 150%; height: 240%;
  transform: translateX(-50%);
  background: repeating-conic-gradient(from 192deg at 50% 100%,
    rgba(196,101,47,.085) 0deg 2.1deg, transparent 2.1deg 12.3deg);
  pointer-events: none;
}
.snapshot__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 26px;
}
.snapshot__n {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 2.1rem;
  line-height: 1.05;
  color: var(--copper);
}
.snapshot__k { font-size: .87rem; color: var(--ink-2); }

/* --- 10. Tables --------------------------------------------------------- */
.tblwrap { overflow-x: auto; margin: 0 0 1.8rem; border: 1px solid var(--sand-3); }
table { border-collapse: collapse; width: 100%; min-width: 660px; background: var(--white); font-size: .94rem; }
thead th {
  background-color: var(--sand-2);
  background-image:
    repeating-linear-gradient( 45deg, rgba(196,101,47,.06) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(135deg, rgba(196,101,47,.06) 0 1px, transparent 1px 9px);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink);
  padding: 11px 14px;
  border-bottom: 1px solid var(--sand-3);
  white-space: nowrap;
}
tbody td { padding: 11px 14px; border-bottom: 1px solid var(--sand-2); vertical-align: top; }
tbody tr:nth-child(even) td { background: rgba(234,224,209,.34); }
tbody tr:last-child td { border-bottom: 0; }
td .num, th .num { font-variant-numeric: tabular-nums; }
.t-bonus { color: var(--copper-deep); font-weight: 600; }

/* --- 11. Deep reviews --------------------------------------------------- */
.review {
  background: var(--white);
  border: 1px solid var(--sand-3);
  border-left: 3px solid var(--copper);
  padding: 22px 24px;
  margin: 0 0 1.7rem;
}
.review > h3 { margin-top: 0; }
.review__top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.review__chip {
  width: 128px; height: 58px;
  flex: 0 0 auto;
  background: var(--white);
  border: 1px solid var(--sand-2);
  display: grid; place-items: center;
  padding: 6px 10px;
}
.review__chip img { max-height: 42px; width: auto; object-fit: contain; }
.review__hl { font-size: .95rem; color: var(--ink-2); }

.subscores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
.subscore__k { font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.subscore__v {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 1.3rem; color: var(--ink);
}
.subscore__bar { height: 4px; background: var(--sand-2); margin-top: 3px; }
.subscore__bar > i { display: block; height: 4px; background: var(--copper); }

.procon { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 0 0 18px; }
.procon h4 { margin: 0 0 .5em; font-size: 1rem; letter-spacing: .04em; text-transform: uppercase; }
.procon ul { list-style: none; padding: 0; margin: 0; font-size: .93rem; }
.procon li { position: relative; padding-left: 22px; margin-bottom: .45em; }
.procon li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 10px; height: 10px; background-repeat: no-repeat; background-position: center; background-size: contain;
}
.pros li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.2 5.4L3.9 8L8.8 2.2' fill='none' stroke='%23C4652F' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cons li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1.6 5H8.4' fill='none' stroke='%23233448' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- 12. Numbered steps ------------------------------------------------- */
.steps { counter-reset: st; list-style: none; padding: 0; margin: 0 0 1.6em; }
.steps > li { counter-increment: st; position: relative; padding-left: 44px; margin-bottom: 1em; }
.steps > li::before {
  content: counter(st);
  position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: var(--sand-2);
  color: var(--copper-deep);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700; font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
}

/* --- 13. FAQ ------------------------------------------------------------ */
.faq { margin: 0 0 1.6rem; }
.faq__q {
  border-top: 1px solid var(--sand-3);
  padding: 16px 0 4px;
}
.faq__q:last-of-type { border-bottom: 1px solid var(--sand-3); }
.faq__q h3 { margin: 0 0 .4em; font-size: 1.2rem; }
.faq__q p:last-child { margin-bottom: 14px; }

/* --- 14. Author box ----------------------------------------------------- */
.authorbox {
  display: flex; gap: 20px; align-items: flex-start;
  background: var(--white);
  border: 1px solid var(--sand-3);
  padding: 22px 24px;
  margin: 2.4rem 0 0;
}
.authorbox img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.authorbox h2, .authorbox h3 { margin-top: 0; font-size: 1.25rem; }
.authorbox p { font-size: .94rem; margin-bottom: .7em; }
.authorbox p:last-child { margin-bottom: 0; }

/* --- 15. Footer. Carries the ad disclosure and the RG signpost. -------- */
.footer {
  background: var(--ink);
  color: var(--sand-2);
  margin-top: 2.8rem;
  padding: 34px 0 26px;
  font-size: .9rem;
}
.footer a { color: var(--sand); }
.footer a:hover { color: var(--white); }
.footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 26px 34px; }
.footer h2 {
  font-size: 1rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--white); margin: 0 0 .8em;
}
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: .45em; }
.footer__rg { color: var(--sand-3); }
.footer__rule { height: 1px; background: rgba(245,239,230,.16); margin: 24px 0 16px; border: 0; }
.footer__disc { color: var(--sand-3); font-size: .82rem; margin: 0; }
.footer__age {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px;
  border: 1.5px solid var(--sand-3);
  border-radius: 50%;
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700; font-size: .86rem;
  color: var(--sand);
  margin-right: 10px;
  vertical-align: middle;
}

/* --- 16. Interior page furniture -------------------------------------- */
.pagehead { background: var(--white); border-bottom: 1px solid var(--sand-3); padding: 30px 0 26px; }
.pagehead h1 { font-size: 2.1rem; margin-bottom: .3em; }
.pagehead p { color: var(--ink-2); max-width: 66ch; margin: 0; }
.prose { max-width: 74ch; padding-top: 8px; }
.prose h2:first-child { margin-top: 1.2em; }

.crit { border: 1px solid var(--sand-3); background: var(--white); padding: 18px 20px; margin: 0 0 1.2em; }
.crit h3 { margin-top: 0; }
.crit__w {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700; color: var(--copper); font-size: 1.05rem;
}

.err { text-align: center; padding: 70px 0 60px; }
.err__code {
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 700; font-size: 5rem; line-height: 1; color: var(--copper);
}

/* --- 17. Responsive. Reflow only. Never hide real content. ------------- */
@media (max-width: 979px) {
  .toplist { grid-template-columns: minmax(0, 1fr); }
  .subscores { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
  body { font-size: 16px; line-height: 1.7; }
  .wrap { padding-inline: 18px; }

  h1 { font-size: 1.86rem; }
  h2 { font-size: 1.54rem; margin-top: 2em; }
  h3 { font-size: 1.24rem; }

  /* hero compacts for mobile too, so the first card clears the fold.
     Same content as desktop, only the scale changes (rule 2). */
  .hero { padding: 12px 0 14px; }
  .hero h1 { max-width: none; font-size: 1.56rem; line-height: 1.16; margin-bottom: .3em; }
  .hero::after { height: 10px; }
  .hero__lede { font-size: .97rem; line-height: 1.5; margin-bottom: .6em; }
  .byline { gap: 10px; }
  .byline__shot { width: 40px; height: 40px; border-width: 1px; }
  .byline__name { font-size: 1rem; }
  .byline__role { font-size: .78rem; line-height: 1.3; }
  /* the meta row wraps on narrow screens, and a border-left divider would leave
     an orphan bar at the start of the second line. Space it instead. */
  .byline__meta { font-size: .72rem; gap: 1px 15px; margin-top: 2px; }
  .byline__meta > span + span { padding-left: 0; border-left: 0; }

  /* tighten the card's internal rhythm so the bonus figure sits as close to the
     fold as possible without dropping any detail */
  .tcard { padding-top: 12px; }
  .tcard__name { margin-top: 8px; }
  .tcard__rule { margin: 8px 0 10px; }
  .hero .cta--descend { padding: 8px 14px; font-size: .98rem; }
  .hero p:last-child { margin-top: 10px !important; }

  /* first article heading sits tight under the hero */
  .sec > h2:first-child, main .wrap > .sec:first-of-type > h2 { margin-top: .5em; }
  #best { font-size: 1.4rem; margin-top: .55em; margin-bottom: .5em; }

  .nav { display: none; }
  .nav.is-open {
    display: flex;
    position: absolute;
    left: 0; right: 0; top: 100%;
    z-index: 40;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--sand-3);
    box-shadow: 0 12px 20px -12px rgba(20,32,46,.3);
    padding: 6px 18px 16px;
  }
  .nav.is-open a { padding: 12px 0; border-bottom: 1px solid var(--sand-2); }
  .nav.is-open .cta--nav { margin-top: 12px; padding: 12px 15px; border-bottom: 0; }
  .burger { display: block; }
  .masthead__in { position: relative; min-height: 70px; }
  .masthead__logo img { height: 52px; }

  /* mobile card: centred identity, pills BELOW the bonus, CTA last */
  .tcard { align-items: center; text-align: center; padding: 16px 16px 18px; }
  .tcard__head { width: 100%; }
  .tcard__name { text-align: center; }
  .tcard__rule { width: 100%; }
  .tcard__bonus { font-size: 1.82rem; }
  .pills { justify-content: center; order: 2; }
  .tcard__offer { display: contents; }
  .tcard__foot { width: 100%; order: 3; }

  .snapshot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; }
  .snapshot { padding: 18px 18px; }
  .subscores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .procon { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .review { padding: 18px 18px; }
  .review__top { flex-direction: column; align-items: flex-start; }
  .authorbox { flex-direction: column; }
  .footer__cols { grid-template-columns: minmax(0, 1fr); }
  .err__code { font-size: 3.6rem; }
}

@media (max-width: 400px) {
  .wrap { padding-inline: 14px; }
  .tcard__bonus { font-size: 1.62rem; }
  .tcard__rank { width: 34px; height: 34px; font-size: 1.18rem; }
  .snapshot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .snapshot__n { font-size: 1.8rem; }

  /* narrowest breakpoint: the H1 wraps to more lines, so trim the chrome
     around it to keep the first toplist card clear of a 640px fold */
  .masthead__in { min-height: 60px; padding-block: 8px; }
  .masthead__logo img { height: 44px; }
  .hero { padding: 8px 0 10px; }
  .hero h1 { font-size: 1.42rem; line-height: 1.14; }
  .hero__lede { font-size: .93rem; line-height: 1.45; margin-bottom: .5em; }
  .byline__shot { width: 36px; height: 36px; }
  .byline__role { font-size: .74rem; }
  .byline__meta { font-size: .69rem; gap: 1px 8px; }
  .hero p:last-child { margin-top: 8px !important; }
  #best { font-size: 1.26rem; margin-top: .45em; margin-bottom: .45em; }
}