/* ==========================================================================
   Online Casino Pakistan Review

   Language : results board. Flat surfaces, hard hairlines, oversized mono
              rank numerals, one signal accent. No gradients as decoration,
              no pattern fills, no ornament.
   Type     : Archivo (display) / Instrument Sans (body) / JetBrains Mono
              (every number on the site)
   Theme    : dark-first, light via prefers-color-scheme. One theme per
              viewer; sections never invert.
   Radius   : 0 everywhere, buttons included. One shape system, no exceptions.

   Measure  : headings and body copy are NEVER given their own width cap. No
              `max-width: NNch` on an h1, h2, p, .lede or .prose. Text fills
              whatever its parent gives it.
              The ONLY width cap on the page is `.container` (and the matching
              `.header-inner`), which holds the layout to --container. Do not
              remove that one, and do not add any others.
   ========================================================================== */

/* ------------------------------------------------------------- 1. tokens */

:root {
  color-scheme: dark light;

  --bg:          #0c0e11;
  --surface:     #14171c;
  --surface-2:   #1b1f26;
  --surface-3:   #232830;

  --line:        rgba(255, 255, 255, .10);
  --line-2:      rgba(255, 255, 255, .18);
  --line-3:      rgba(255, 255, 255, .30);

  --text:        #eef1f5;
  --text-2:      #a3acb9;
  --text-3:      #6c7683;

  /* single brand accent, used for: rank 1, primary CTAs, active states,
     and the section rules. Nothing else. */
  --accent:      #ff5a1f;
  --accent-2:    #ff7a4a;
  --accent-ink:  #180701;

  /* semantic state only, deliberately muted so they never read as a second
     brand colour */
  --pos:         #74c69d;
  --neg:         #e08b76;

  --shadow:      0 1px 0 rgba(255, 255, 255, .04);

  --display: "Archivo", "Helvetica Neue", system-ui, sans-serif;
  --body:    "Instrument Sans", "Helvetica Neue", system-ui, sans-serif;
  --mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --container: 1280px;
  --gutter: 1.5rem;
  --nav-h: 64px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:          #f3f4f6;
    --surface:     #ffffff;
    --surface-2:   #f8f9fa;
    --surface-3:   #eceef1;

    --line:        rgba(12, 14, 17, .12);
    --line-2:      rgba(12, 14, 17, .20);
    --line-3:      rgba(12, 14, 17, .34);

    --text:        #0f1216;
    --text-2:      #4e5560;
    --text-3:      #79818d;

    /* #ff5a1f on white is only ~3.3:1, fine for large type but not body.
       Text-weight uses of the accent switch to this darker cut in light mode;
       fills keep the full-strength accent with near-black ink on top. */
    --accent-2:    #d1440c;

    --pos:         #1f7a52;
    --neg:         #b1462a;

    --shadow:      0 1px 2px rgba(12, 14, 17, .06);
  }
}

/* ------------------------------------------------------------- 2. resets */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  padding-top: var(--nav-h);
  /* Flat. No gradient mesh, no pattern tile. */
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

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

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.02;
  margin: 0 0 .55em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 6.2vw, 4.5rem); }
h2 { font-size: clamp(1.9rem, 4vw, 3rem); }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); letter-spacing: -.02em; line-height: 1.15; }
h4 {
  font-family: var(--mono);
  font-size: .7rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-2);
  margin: 2rem 0 .7rem;
}
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--text); }

::selection { background: var(--accent); color: var(--accent-ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--accent); color: var(--accent-ink);
  padding: .7rem 1.1rem; font-weight: 700; font-size: .85rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* --------------------------------------------------------- 3. primitives */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }

/* The signature: a short hard accent rule opening a section. Replaces the
   uppercase eyebrow label entirely. */
.rule {
  width: 3.5rem; height: 3px;
  background: var(--accent);
  margin-bottom: 1.6rem;
}
.rule--full { width: 100%; height: 1px; background: var(--line); margin: 0; }

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
  line-height: 1.55;
  color: var(--text-2);
}

.num { font-family: var(--mono); font-variant-numeric: tabular-nums lining-nums; }

/* ----------------------------------------------------------- 4. buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .5rem;
  font-family: var(--body);
  font-size: .875rem; font-weight: 600;
  letter-spacing: .01em;
  padding: .85rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s var(--ease), color .2s var(--ease),
              border-color .2s var(--ease), transform .1s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-2); color: var(--accent-ink); }
@media (prefers-color-scheme: light) {
  .btn--primary:hover { background: #e8500f; color: #fff; }
}

.btn--solid { background: var(--text); color: var(--bg); }
.btn--solid:hover { background: var(--text-2); }

.btn--line { background: transparent; color: var(--text); border-color: var(--line-2); }
.btn--line:hover { border-color: var(--text); background: var(--surface-2); }

.btn--sm { padding: .6rem 1rem; font-size: .8rem; }
.btn--lg { padding: 1.05rem 1.9rem; font-size: .95rem; }
.btn--block { width: 100%; }

/* ------------------------------------------------------------ 5. header */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--nav-h);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: border-color .2s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line-2); }

.header-inner {
  display: flex; align-items: center; gap: 2rem;
  height: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.brand-mark { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.brand-mark svg { height: 26px; width: auto; display: block; object-fit: contain; }

.header-nav { margin-left: auto; }
.header-cta { flex: none; }

.nav-list {
  display: flex; align-items: center; gap: .15rem;
  list-style: none; margin: 0; padding: 0;
  /* The glide indicator is absolutely positioned against this box. Without it
     the indicator anchors to .site-header and parks at the viewport edge. */
  position: relative;
}
.nav-list > li { position: relative; }

.nav-list a {
  display: block;
  padding: .5rem .7rem;
  font-size: .875rem; font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  white-space: nowrap;
  transition: color .18s var(--ease);
}
.nav-list a:hover, .nav-list a.active { color: var(--text); }

.nav-indicator {
  position: absolute; bottom: -1px; left: 0;
  height: 2px; width: 0;
  background: var(--accent);
  opacity: 0;
  transition: transform .3s var(--ease), width .3s var(--ease), opacity .18s var(--ease);
  pointer-events: none;
}

/* -- reviews dropdown -------------------------------------------------- */

.nav-parent { display: inline-flex !important; align-items: center; gap: .35rem; }
.nav-parent .caret {
  width: .42rem; height: .42rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .22s var(--ease);
}
.nav-item--has-submenu:hover .nav-parent .caret,
.nav-item--has-submenu.is-open .nav-parent .caret { transform: translateY(0) rotate(225deg); }

/* Transparent bridge across the gap so :hover survives the trip from the
   trigger down into the panel. Belongs to the parent, not the panel. */
.nav-item--has-submenu::after {
  content: '';
  position: absolute;
  top: 100%; left: -.75rem; right: -.75rem;
  height: 1rem;
  pointer-events: auto;
}

.nav-submenu {
  position: absolute;
  top: calc(100% + 1rem);
  right: -.5rem;
  width: 27rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  padding: 1px;
  margin: 0;
  list-style: none;
  background: var(--line);
  border: 1px solid var(--line-2);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-.4rem);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
  z-index: 40;
}
.nav-item--has-submenu:hover > .nav-submenu,
.nav-item--has-submenu:focus-within > .nav-submenu,
.nav-item--has-submenu.is-open > .nav-submenu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
}

.nav-submenu li { margin: 0; }
.nav-submenu a {
  display: flex !important;
  align-items: center; gap: .7rem;
  padding: .7rem .8rem;
  background: var(--surface);
  font-size: .84rem; font-weight: 500;
  color: var(--text);
  transition: background-color .16s var(--ease);
}
.nav-submenu a:hover { background: var(--surface-3); }
.nav-submenu .submenu-score {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .78rem; font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  color: var(--accent-2);
}

.menu-toggle {
  display: none;
  width: 2.4rem; height: 2.4rem;
  background: transparent;
  border: 1px solid var(--line-2);
  cursor: pointer;
  position: relative;
  flex: none;
}
.menu-toggle span {
  position: absolute; left: 50%; top: 50%;
  width: 1rem; height: 1.5px;
  background: var(--text);
  transform: translate(-50%, -50%);
  transition: transform .25s var(--ease), opacity .18s var(--ease);
}
.menu-toggle span:nth-child(1) { transform: translate(-50%, calc(-50% - 4px)); }
.menu-toggle span:nth-child(3) { transform: translate(-50%, calc(-50% + 4px)); }
.menu-toggle.is-active span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active span:nth-child(3) { transform: translate(-50%, -50%) rotate(-45deg); }

/* ------------------------------------------------------- 6. brand badge */

/* Operator marks ship as opaque square badges carrying their own background,
   so they are framed at a fixed size rather than plated. */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem;
  flex: none;
  overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--line);
}
.badge img { width: 100%; height: 100%; object-fit: cover; }
.badge--sm { width: 2rem;   height: 2rem; }
.badge--lg { width: 4.5rem; height: 4.5rem; }
.badge--letter {
  font-family: var(--display);
  font-size: 1.2rem; font-weight: 700;
  color: var(--accent-2);
}

/* -------------------------------------------------------------- 7. hero */

/* Asymmetric split: message left, the #1 pick right. Never centred. */
.hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.hero__media {
  position: absolute; inset: 0;
  z-index: 0;
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 18%, rgba(12, 14, 17, .55) 62%, rgba(12, 14, 17, .2));
}
@media (prefers-color-scheme: light) {
  .hero__media img { opacity: .18; }
  .hero__media::after {
    background: linear-gradient(90deg, var(--bg) 18%, rgba(243, 244, 246, .6) 62%, rgba(243, 244, 246, .25));
  }
}

.hero__grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6rem);
  min-height: min(78dvh, 720px);
}

/* The H1 is verbatim source copy and runs to 63 characters, so the scale is
   set by the line count rather than by ambition. It fills its grid column;
   headings are never given their own width cap. */
.hero h1 {
  font-size: clamp(1.95rem, 3.6vw, 3.05rem);
  margin-bottom: 1rem;
}
.hero h1 em {
  font-style: italic;
  color: var(--accent-2);
  /* italic descenders clip against a tight leading */
  line-height: 1.1;
}
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }

/* -- the #1 pick, sitting in the hero's right column ------------------- */

.pick {
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-top: 3px solid var(--accent);
}
.pick__top {
  display: flex; align-items: center; gap: .9rem;
  padding: 1.3rem 1.4rem;
  border-bottom: 1px solid var(--line);
}
.pick__rank {
  font-family: var(--mono);
  font-size: .68rem; font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent-ink);
  background: var(--accent);
  padding: .28rem .5rem;
  flex: none;
}
.pick__name { font-family: var(--display); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; }
.pick__score {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 1.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
}
.pick__score span { font-size: .8rem; color: var(--text-3); }

.pick__bonus { padding: 1.3rem 1.4rem; border-bottom: 1px solid var(--line); }
.pick__bonus dt {
  font-family: var(--mono);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .45rem;
}
.pick__bonus dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.28rem; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.15;
}
.pick__foot { display: grid; grid-template-columns: 1fr auto; gap: 1px; background: var(--line); }
/* Only the secondary link takes the surface fill. Blanketing `> *` here
   repainted the primary button and left near-black text on a dark panel. */
.pick__foot .btn { border: 0; }
.pick__read {
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  padding: .85rem 1.2rem;
  font-size: .82rem; font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
}
.pick__read:hover { color: var(--text); background: var(--surface-3); }

/* -------------------------------------------------- 8. the results board */

/* Full-width numbered rows. Not a podium, not three equal cards. */
.board { border-top: 1px solid var(--line); }

.board-row {
  display: grid;
  grid-template-columns: 4.5rem 2.75rem minmax(0, 1fr) minmax(0, 1.15fr) auto auto;
  align-items: center;
  gap: 1.25rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  transition: background-color .18s var(--ease);
}
.board-row:hover { background: var(--surface); }

.board-row__rank {
  font-family: var(--mono);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  line-height: 1;
  color: var(--text-3);
  text-align: right;
  padding-right: .35rem;
}
.board-row--lead .board-row__rank { color: var(--accent); }
.board-row--lead { background: var(--surface); }
.board-row--lead:hover { background: var(--surface-2); }

.board-row__name {
  font-family: var(--display);
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: -.02em;
  min-width: 0;
}
.board-row__name a { text-decoration: none; }
.board-row__name a:hover { color: var(--accent-2); }
.board-row__sub {
  display: block;
  font-family: var(--body);
  font-size: .78rem; font-weight: 400;
  letter-spacing: 0;
  color: var(--text-3);
  margin-top: .2rem;
}

.board-row__bonus { font-size: .9rem; color: var(--text-2); min-width: 0; }

.board-row__score {
  font-family: var(--mono);
  font-size: 1.15rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  text-align: right;
  white-space: nowrap;
}
.board-row__score small { font-size: .72rem; font-weight: 500; color: var(--text-3); }
.board-row--lead .board-row__score { color: var(--accent-2); }

.board-row__actions { display: flex; gap: .5rem; }

/* --------------------------------------------------- 9. comparison table */

.table-wrap {
  border: 1px solid var(--line);
  background: var(--surface);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table {
  width: 100%;
  min-width: 52rem;
  border-collapse: collapse;
  font-size: .875rem;
}
.data-table th, .data-table td {
  padding: .9rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}
.data-table thead th {
  position: sticky; top: 0;
  background: var(--surface-3);
  font-family: var(--mono);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.data-table tbody tr:last-child td,
.data-table tbody tr:last-child th { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table td:first-child,
.data-table tbody th { font-weight: 600; color: var(--text); white-space: nowrap; }

/* --------------------------------------------------------- 10. criteria */

/* Asymmetric two-column: sticky heading left, numbered criteria right. */
.criteria {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.criteria__head { position: sticky; top: calc(var(--nav-h) + 2rem); }

.criteria__list { list-style: none; margin: 0; padding: 0; counter-reset: crit; border-top: 1px solid var(--line); }
.criteria__list li {
  counter-increment: crit;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1.2rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: .95rem;
}
.criteria__list li::before {
  content: counter(crit, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .85rem; font-weight: 700;
  color: var(--accent-2);
  padding-top: .1rem;
}
.criteria__list li strong { display: block; color: var(--text); margin-bottom: .2rem; }

/* -------------------------------------------------- 11. full-bleed panel */

/* Image left, copy right, edge to edge. Used once. */
.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-block: 1px solid var(--line);
}
.panel__media { position: relative; min-height: 26rem; overflow: hidden; }
.panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel__body { padding: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 4rem); align-self: center; }
.panel__body .checks { margin-top: 1.8rem; }

/* -------------------------------------------------------- 12. check list */

.checks { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }

/* display:block, never grid. A compound item <li><strong>Title:</strong>
   body</li> splits into two grid items under display:grid and the trailing
   text drops into a narrow second-row column. */
.checks li {
  display: block;
  position: relative;
  padding: 1rem 0 1rem 2rem;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: .93rem;
  line-height: 1.6;
}
.checks li strong { color: var(--text); }
.checks li::before {
  content: '';
  position: absolute;
  left: 0; top: 1.5rem;
  width: .7rem; height: 1px;
  background: var(--accent);
}

/* Card variant, used where a list needs to read as a grid of blocks. */
.checks--cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-top: 1px solid var(--line);
}
.checks--cards li {
  background: var(--surface);
  padding: 1.5rem 1.4rem 1.5rem 2.6rem;
  border-bottom: 0;
}
.checks--cards li::before { left: 1.4rem; top: 2rem; }

/* Ordered steps. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: s; border-top: 1px solid var(--line); }
.steps li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  font-size: .93rem;
}
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono);
  font-size: .8rem; font-weight: 700;
  color: var(--accent-2);
  padding-top: .15rem;
}
.steps li strong { color: var(--text); }

/* ---------------------------------------------------------- 13. tiles */

/* Mixed-size grid. Cell count always matches item count. */
.tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.tile {
  position: relative;
  grid-column: span 2;
  background: var(--surface);
  padding: 1.9rem 1.6rem;
  min-height: 12rem;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.tile--wide  { grid-column: span 3; }
.tile--large { grid-column: span 4; }
.tile--full  { grid-column: 1 / -1; }

.tile h3 { margin-bottom: .6rem; }
.tile p  { color: var(--text-2); font-size: .92rem; margin-bottom: 0; }

/* Image cells: real photography, not another text card. The surface fill is
   the fallback for a generated image that has not landed yet. */
.tile--media { padding: 0; min-height: 15rem; background: var(--surface-3); }
.tile--media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile--media .tile__cap {
  position: relative; z-index: 1;
  margin-top: auto;
  padding: 1.5rem 1.6rem;
  background: linear-gradient(0deg, rgba(12, 14, 17, .92), rgba(12, 14, 17, 0));
  color: #fff;
}
.tile--media .tile__cap h3 { color: #fff; margin-bottom: .3rem; }
.tile--media .tile__cap p  { color: rgba(255, 255, 255, .82); }

/* Accent cell: the one filled tile per grid. */
.tile--accent { background: var(--accent); }
.tile--accent h3, .tile--accent p { color: var(--accent-ink); }
.tile--accent p { opacity: .8; }

/* Inverted cell, still inside the page's own theme family. */
.tile--fill { background: var(--surface-3); }

/* --------------------------------------------------------- 14. band CTA */

.band {
  background: var(--accent);
  color: var(--accent-ink);
  padding-block: clamp(3rem, 6vw, 4.5rem);
}
.band__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.band h2 { color: var(--accent-ink); }
.band p  { color: var(--accent-ink); opacity: .9; }
.band .btn { background: var(--accent-ink); color: var(--accent); border-color: var(--accent-ink); }
.band .btn:hover { background: #2b1005; color: #fff; }
.band .btn--line { background: transparent; color: var(--accent-ink); border-color: rgba(24, 7, 1, .35); }
.band .btn--line:hover { background: rgba(24, 7, 1, .1); color: var(--accent-ink); border-color: var(--accent-ink); }

/* -------------------------------------------------------- 15. review page */

.rev-hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.rev-hero__media { position: absolute; inset: 0; z-index: 0; }
.rev-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .26; }
.rev-hero__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 22%, rgba(12, 14, 17, .6) 70%, rgba(12, 14, 17, .3));
}
@media (prefers-color-scheme: light) {
  .rev-hero__media img { opacity: .16; }
  .rev-hero__media::after {
    background: linear-gradient(90deg, var(--bg) 22%, rgba(243, 244, 246, .68) 70%, rgba(243, 244, 246, .3));
  }
}
.rev-hero__inner { position: relative; z-index: 1; padding-block: clamp(2.5rem, 5vw, 4rem); }

.crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem;
  margin-bottom: 1.6rem;
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--text-3);
}
.crumbs a { color: var(--text-2); text-decoration: none; }
.crumbs a:hover { color: var(--accent-2); }
.crumbs [aria-current] { color: var(--text); }

/* Review headlines are verbatim source copy and often run long, so the scale
   is set to keep the offer bar above the fold. The headline itself spans the
   full container width. */
.rev-hero h1 {
  font-size: clamp(1.8rem, 3.2vw, 2.7rem);
  margin-bottom: .5em;
}

.rev-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.6rem;
  padding: 1.1rem 0;
  border-block: 1px solid var(--line);
  margin-bottom: 1.8rem;
}
.rev-meta__score {
  display: flex; align-items: baseline; gap: .3rem;
  font-family: var(--mono);
  font-size: 1.9rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  color: var(--accent-2);
}
.rev-meta__score span { font-size: .8rem; color: var(--text-3); }

.byline { display: flex; align-items: center; gap: .7rem; }
.byline__av {
  width: 2.3rem; height: 2.3rem; flex: none;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--surface-3);
  border: 1px solid var(--line-2);
  font-family: var(--mono);
  font-size: .72rem; font-weight: 700;
  color: var(--accent-2);
}
.byline__av img { width: 100%; height: 100%; object-fit: cover; }
.byline__name { display: block; font-size: .85rem; font-weight: 600; }
.byline__role { display: block; font-size: .75rem; color: var(--text-3); }

/* -- the offer bar ----------------------------------------------------- */

.offer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.4rem;
  margin-top: 2rem;
  padding: 1.2rem 1.4rem;
  background: var(--surface);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
}
.offer__label {
  display: block;
  font-family: var(--mono);
  font-size: .64rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: .3rem;
}
.offer__value {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.2;
}
.offer__note {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: .95rem;
  border-top: 1px solid var(--line);
  font-size: .78rem;
  color: var(--text-3);
}
.offer__note strong { font-family: var(--mono); font-variant-numeric: tabular-nums; color: var(--text-2); }

/* -- scorecard --------------------------------------------------------- */

.scorecard {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.score-total {
  display: flex; align-items: baseline; gap: .6rem;
  padding-bottom: 1.3rem;
  margin-bottom: .5rem;
  border-bottom: 1px solid var(--line-2);
}
.score-total__n {
  font-family: var(--mono);
  font-size: clamp(3rem, 7vw, 4.5rem);
  font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  color: var(--accent-2);
}
.score-total__of { font-family: var(--mono); font-size: 1rem; color: var(--text-3); }
.score-total__label {
  margin-left: auto;
  font-family: var(--mono);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
}

.score-list { list-style: none; margin: 0; padding: 0; }
.score-row {
  display: grid;
  /* Wide enough that the gap between a 4.3 and a 4.9 is actually visible. */
  grid-template-columns: minmax(0, 1fr) 9rem 2.6rem;
  align-items: center;
  gap: 1rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.score-row__label { font-size: .9rem; color: var(--text-2); }
.score-row__n {
  font-family: var(--mono);
  font-size: .95rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  text-align: right;
}
/* Thin proportional rule, no background track. */
.score-row__bar { height: 2px; background: var(--accent); opacity: .85; }

.verdict-note {
  padding: clamp(1.5rem, 3vw, 2.2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-3);
}
.verdict-note p { font-size: 1rem; line-height: 1.65; color: var(--text-2); }
.verdict-note p:first-of-type { color: var(--text); }
.verdict-note__fine {
  margin-top: 1.2rem; padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: .78rem; line-height: 1.55;
  color: var(--text-3);
}

/* ------------------------------------------------------ 16. page content */

.page-content > section { padding-block: clamp(2.5rem, 5vw, 4rem); }

.section-intro { color: var(--text-2); margin-bottom: 1.8rem; }

.intro-block {
  padding: clamp(1.5rem, 3vw, 2.2rem) 0;
  border-block: 1px solid var(--line);
}
.intro-block p { font-size: 1.08rem; color: var(--text-2); }

/* Sub-sections inside a section become a bordered grid. */
.subgrid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.subgrid[data-cols="1"] { grid-template-columns: minmax(0, 1fr); }
.subgrid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.subgrid[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.subgrid[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* A grid must never end on a blank cell. When the item count does not divide
   into the column count, the final item absorbs the remainder. */
@media (min-width: 901px) {
  .subgrid[data-cols="3"] > :nth-child(5):last-child { grid-column: span 2; }
  .subgrid[data-cols="4"] > :nth-child(7):last-child { grid-column: span 2; }
  .subgrid[data-cols="4"] > :nth-child(9):last-child { grid-column: 1 / -1; }
}
@media (min-width: 561px) and (max-width: 900px) {
  /* collapsed to two columns, so any odd-numbered final item takes the row */
  .subgrid[data-cols="3"] > :nth-child(odd):last-child,
  .subgrid[data-cols="4"] > :nth-child(odd):last-child { grid-column: span 2; }
}

.subgrid > article { background: var(--surface); padding: 1.7rem 1.5rem; }
.subgrid > article > h3 { margin-bottom: .7rem; }
.subgrid > article p { color: var(--text-2); font-size: .92rem; }
.subgrid .checks { border-top: 0; margin-top: 1rem; }
.subgrid .checks li:last-child { border-bottom: 0; padding-bottom: 0; }

.prose { color: var(--text-2); }
.prose p { font-size: 1rem; }

/* -- pros and cons ----------------------------------------------------- */

.pc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.pc__col { background: var(--surface); padding: 1.6rem 1.5rem; }
.pc__head {
  margin: 0 0 1.2rem;
  padding-bottom: .8rem;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.pc__col--pro .pc__head { color: var(--pos); }
.pc__col--con .pc__head { color: var(--neg); }
.pc ul { list-style: none; margin: 0; padding: 0; }
.pc li {
  display: block;
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: 1rem;
  font-size: .9rem; line-height: 1.55;
  color: var(--text-2);
}
.pc li:last-child { margin-bottom: 0; }
.pc li strong { color: var(--text); }
.pc li::before {
  content: '';
  position: absolute; left: 0; top: .62rem;
  width: .6rem; height: 1px;
}
.pc__col--pro li::before { background: var(--pos); }
.pc__col--con li::before { background: var(--neg); }

/* -- ascii flow diagram ------------------------------------------------ */

.flow {
  margin: 0;
  padding: 1.3rem 1.4rem;
  background: var(--surface-3);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: .78rem;
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
  -webkit-overflow-scrolling: touch;
}

/* -- inline figure ----------------------------------------------------- */

.figure { margin: 0; border: 1px solid var(--line); overflow: hidden; }
.figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.figure--tall img { aspect-ratio: 4 / 5; }

/* In-page image beside a list. Distinct from the full-bleed .panel, which is
   used once on the homepage only. */
.split {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
}
@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split .figure--tall img { aspect-ratio: 16 / 10; }
}

/* ------------------------------------------------------------ 17. footer */

.site-footer {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.8rem, 4vw, 3.5rem);
  padding-block: clamp(2.8rem, 5vw, 4rem);
}
.footer-brand p { font-size: .88rem; color: var(--text-2); margin-top: 1.1rem; }
.footer-brand .btn { margin-top: 1.4rem; }

.footer-col h3 {
  font-family: var(--mono);
  font-size: .66rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 1.1rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .5rem; }
.footer-col a {
  font-size: .875rem;
  color: var(--text-2);
  text-decoration: none;
  transition: color .16s var(--ease);
}
.footer-col a:hover { color: var(--accent-2); }

.footer-legal {
  padding-block: 1.8rem;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
}
.footer-legal__age {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.5rem;
  border: 1px solid var(--neg);
  color: var(--neg);
  font-family: var(--mono);
  font-size: .78rem; font-weight: 700;
  flex: none;
}
.footer-legal p { font-size: .78rem; line-height: 1.6; color: var(--text-3); }
.footer-legal p + p { margin-top: .5rem; }

/* -------------------------------------------------------------- 18. 404 */

.nf { padding-block: clamp(4rem, 10vw, 7rem); }
.nf__code {
  font-family: var(--mono);
  font-size: clamp(4rem, 14vw, 9rem);
  font-weight: 700; line-height: 1;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.nf__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.8rem; }

/* ----------------------------------------------------------- 19. motion */

/* Scoped to .js so a failed script can never leave the page at opacity 0. */
.js .reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }

/* -------------------------------------------------------- 20. responsive */

@media (max-width: 1080px) {
  .hero__grid   { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
  .scorecard    { grid-template-columns: minmax(0, 1fr); }
  .criteria     { grid-template-columns: minmax(0, 1fr); }
  .criteria__head { position: static; }
  .footer-top   { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  /* The nav leaves the flow, so the CTA takes over pushing the toggle right.
     Brand, CTA and toggle have to share 390px, so all three tighten up. */
  .menu-toggle { display: block; margin-left: .55rem; }
  .header-cta  { margin-left: auto; }
  .header-inner { gap: .75rem; }
  .brand-mark svg { height: 23px; }
  .nav-indicator { display: none; }

  .header-nav {
    position: fixed;
    inset: var(--nav-h) 0 0;
    margin: 0;
    padding: 1.5rem var(--gutter) 3rem;
    background: var(--bg);
    overflow-y: auto;
    opacity: 0; visibility: hidden;
    transform: translateY(-.5rem);
    transition: opacity .24s var(--ease), transform .24s var(--ease), visibility .24s;
    z-index: 90;
  }
  .header-nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--line); }
  .nav-list a { padding: 1rem .1rem; font-size: 1.05rem; }
  .nav-parent { justify-content: space-between; width: 100%; }

  .nav-item--has-submenu::after { display: none; }
  .nav-submenu {
    position: static;
    width: auto;
    grid-template-columns: minmax(0, 1fr);
    border: 0; box-shadow: none; background: transparent;
    padding: 0 0 .8rem;
    display: none;
    opacity: 1; visibility: visible; transform: none;
  }
  .nav-item--has-submenu:hover > .nav-submenu,
  .nav-item--has-submenu:focus-within > .nav-submenu { display: none; }
  .nav-item--has-submenu.is-open > .nav-submenu { display: grid; }
  .nav-submenu a { background: var(--surface); margin-bottom: 1px; }

  .panel { grid-template-columns: minmax(0, 1fr); }
  .panel__media { min-height: 18rem; }

  .board-row {
    grid-template-columns: 3rem 2.5rem minmax(0, 1fr) auto;
    row-gap: .8rem;
  }
  .board-row__bonus { grid-column: 3 / -1; }
  .board-row__actions { grid-column: 1 / -1; justify-content: flex-end; }

  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile, .tile--wide, .tile--large { grid-column: span 1; }
  .tile--full { grid-column: 1 / -1; }

  .subgrid[data-cols="3"],
  .subgrid[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .band__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .pc { grid-template-columns: minmax(0, 1fr); }
  .offer { grid-template-columns: auto minmax(0, 1fr); }
  .offer .btn { grid-column: 1 / -1; }
  .footer-top { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  :root { --gutter: 1.15rem; }

  .brand-mark svg { height: 20px; }
  .header-cta { padding: .55rem .8rem; font-size: .74rem; }

  .subgrid[data-cols="2"],
  .subgrid[data-cols="3"],
  .subgrid[data-cols="4"] { grid-template-columns: minmax(0, 1fr); }
  .tiles { grid-template-columns: minmax(0, 1fr); }

  /* Keep the operator logo: this is the viewport where brand recognition does
     the most work, so the bonus line moves to its own row instead. */
  .board-row { grid-template-columns: 2rem 2.2rem minmax(0, 1fr) auto; row-gap: .7rem; column-gap: .8rem; }
  .board-row .badge { width: 2.2rem; height: 2.2rem; }
  .board-row__rank { font-size: 1.4rem; }
  /* Placed explicitly: auto-placement pushes the score onto its own row once
     the bonus line spans the full width. */
  .board-row__rank    { grid-area: 1 / 1 / 2 / 2; }
  .board-row .badge   { grid-area: 1 / 2 / 2 / 3; }
  .board-row__name    { grid-area: 1 / 3 / 2 / 4; }
  .board-row__score   { grid-area: 1 / 4 / 2 / 5; }
  .board-row__bonus   { grid-area: 2 / 1 / 3 / 5; }
  .board-row__actions { grid-area: 3 / 1 / 4 / 5; }
  .board-row__actions .btn { flex: 1; }

  .rev-meta { gap: 1rem 1.4rem; }
  .score-row { grid-template-columns: minmax(0, 1fr) 3.5rem 2.4rem; gap: .7rem; }
}

/* ------------------------------------------------------- 21. preferences */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .site-footer, .btn, .offer, .band { display: none !important; }
  body { padding-top: 0; background: #fff; color: #000; }
}