/* ============================================================================
   reflectedimagemotorsports.com — shared design system
   ONE stylesheet for every page (money page, root mirror, EEAT, utility, 404)
   so the chrome cannot drift.

   Identity is inherited from the domain's own legacy brand: the original logo
   was a circular azure ring holding "RR" mirrored back on itself, above a black
   masthead and a full-width azure nav band. The whole motif system below is
   built from that one idea — a mirror and its reflection.

   MOTIF SYSTEM (repeating, all derived from the logo)
     .seam        vertical azure hairline, light half / ink half  -> the mirror edge
     .roundel     azure oval ring                                 -> rank badges, the logo's O
     .ghost       flipped, mask-faded duplicate                    -> the reflection
     .pill        azure OUTLINED chip     -> from the legacy "SAVE $ X" badges
     .band        full-width azure rule   -> from the legacy nav band
     .sheen       diagonal glass highlight -> from the logo's mirror glass

   ⛔ RULE 19 — the CTA amber (--cta) is RESERVED. It appears on .cta and
   NOWHERE else. Not on headings, ranks, bonuses, ribbons, links, borders or
   icons. Verified by a computed-style sweep before deploy.
   ⛔ Rule 6 — the bonus eye-catcher therefore uses the site AZURE, large and
   bold, so "bonus is prominent" and "CTA colour is reserved" cannot collide.
   ============================================================================ */

/* ---------- self-hosted variable webfonts (no third-party request) ---------- */
@font-face{font-family:'Roboto';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/assets-site/fonts/roboto-var.woff2') format('woff2')}
@font-face{font-family:'Oswald';font-style:normal;font-weight:200 700;font-display:swap;
  src:url('/assets-site/fonts/oswald-var.woff2') format('woff2')}

:root{
  /* palette — sampled from the legacy logo PNG + the rendered legacy homepage */
  --azure:#007CD0;        /* legacy ring, nav band, links, pill outlines, BONUS */
  --azure-d:#0063A6;
  --azure-l:#4FA6E2;
  --glass:#E8EDF2;        /* mirror glass */
  --glass-2:#F4F7FA;
  --ink:#0B1016;          /* masthead + footer bands */
  --ink-2:#1B242E;
  --grey:#5C6672;
  --grey-l:#969595;       /* legacy monogram grey */
  --ground:#FCFCFC;
  --line:#DFE5EB;
  --cta:#F5A317;          /* ⛔ RESERVED — action buttons ONLY */
  --cta-d:#D98A05;

  --f-body:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-disp:'Oswald','Roboto Condensed',system-ui,sans-serif;
  --wrap:1180px;
  --r:10px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:400 17px/1.68 var(--f-body);overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--azure-d)}
/* ⛔⛔ padding-INLINE only. `padding:0 20px` is a SHORTHAND, so it also sets
   padding-block:0 — and because sections carry class="wrap" themselves, that
   shorthand (specificity 0,1,0) BEAT `section{padding-block:...}` (0,0,1) and
   silently zeroed every section gap on the whole page. This is the mirror image
   of the usual trap: there the shorthand on a section clobbers .wrap's inline
   padding; here .wrap's shorthand clobbers the section's block padding. */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:20px}

/* ⛔ padding-BLOCK only on layout blocks. A `padding` SHORTHAND here silently
   clobbers .wrap's inline padding (equal specificity, later rule wins) and
   collapses the mobile gutter. */
/* Two vertical-rhythm tokens, both redefined per breakpoint so nothing drifts and
   nothing wins on specificity:
     --s-sec    gap above every normal section
     --s-first  gap above the FIRST section only, which must clear the banner's azure
                rule without pushing the toplist off the fold (rule 1) */
:root{--s-sec:44px;--s-first:30px}
section{padding-block:var(--s-sec) 0}
.hero{padding-block:22px 16px}
.herobanner+section{padding-top:var(--s-first)}

/* ============================== MOTIFS ============================== */

/* the mirror seam — a vertical azure hairline with a light/shadow split */
.seam{position:relative}
.seam::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--azure),var(--azure-l));transform:translateX(-50%)}

/* section rule: the legacy azure band, reduced to a motif */
.band{border:0;height:4px;margin:34px 0 0;
  background:linear-gradient(90deg,var(--azure) 0 34%,var(--line) 34% 36%,var(--ink) 36% 40%,var(--line) 40%)}

/* azure oval ring — the logo's O, the legacy roundel, and every rank badge */
.roundel{position:relative;display:grid;place-items:center;
  width:60px;height:72px;flex:0 0 60px;
  border:3px solid var(--azure);border-radius:50%;
  background:radial-gradient(120% 90% at 50% 18%,#fff 0 55%,var(--glass) 100%);
  box-shadow:0 0 0 4px var(--ground), 0 2px 10px rgba(11,16,22,.14)}
/* the numeral, with its own mirrored reflection inside the badge */
.roundel b{display:block;font:700 30px/0.92 var(--f-disp);color:var(--ink);
  letter-spacing:-.02em}
.roundel i{display:none}   /* reflection needs room; at badge size it reads as noise */
/* ranks 4+: solid ink plaque with an azure ring, so the family reads at small size */
.roundel.sm{width:38px;height:46px;flex-basis:38px;border-width:2px;
  background:var(--ink);box-shadow:0 0 0 3px var(--ground)}
.roundel.sm b{font-size:18px;color:#fff}
.roundel.sm i{display:none}

/* the reflection: a flipped, mask-faded duplicate. THE signature motif.
   Decorative + aria-hidden, so it is clipped to a shallow band: at full height
   it collided with the star row and read as a rendering artifact. A reflection
   is a DIMMER COPY of the same thing, so it inherits the ink colour rather than
   introducing a second colour. */
.ghost{display:block;height:.54em;overflow:hidden;margin-top:1px;
  transform:scaleY(-1);opacity:.16;color:var(--ink);
  -webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,.9),transparent 96%);
          mask-image:linear-gradient(0deg,rgba(0,0,0,.9),transparent 96%);
  pointer-events:none;user-select:none}

/* azure OUTLINED chip — lifted from the legacy "SAVE $ X" badges */
.pill{display:inline-flex;align-items:center;gap:5px;
  border:1.5px solid var(--azure);border-radius:3px;
  padding:3px 8px;background:#fff;
  font:600 12px/1.25 var(--f-disp);letter-spacing:.05em;text-transform:uppercase;
  color:var(--azure-d);white-space:nowrap}
.pill.ink{border-color:var(--ink-2);color:var(--ink-2)}
.pill.solid{background:var(--ink);border-color:var(--ink);color:#fff}

/* glass sheen — the diagonal highlight across the logo's mirror */
.sheen{position:relative;overflow:hidden}
.sheen::after{content:"";position:absolute;inset:-30% -10%;pointer-events:none;
  background:linear-gradient(114deg,transparent 34%,rgba(255,255,255,.62) 42% 47%,transparent 55%)}

/* ============================== CHROME ============================== */
.masthead{background:var(--ink)}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding-block:10px}
.brand{display:inline-flex;align-items:center}
.brand img{height:124px;width:auto;display:block}   /* 2.2x the original 56px */
.mast-note{font:600 12px/1.3 var(--f-disp);letter-spacing:.1em;text-transform:uppercase;
  color:var(--glass);opacity:.72;text-align:right}

/* full-width azure nav band — the single most recognisable legacy element */
.navbar{background:var(--azure);position:static} /* ⛔ non-sticky (rule 7) */
.nav{display:flex;align-items:center;gap:26px;padding-block:0}
/* ⛔ the gap on .nav applies to .links and .burger, NOT to the anchors inside
   .links — without its own flex+gap the labels render butted together
   ("NO VERIFICATION BETTINGHOW WE RATEABOUT..."). */
.nav .links{display:flex;align-items:center;gap:26px}
.nav a{color:#fff;text-decoration:none;
  font:600 14px/1 var(--f-disp);letter-spacing:.085em;text-transform:uppercase;
  padding:15px 0;white-space:nowrap}   /* ⛔ nowrap: condensed caps wrap mid-label otherwise */
.nav a:hover{color:var(--ink)}
.nav .spacer{margin-left:auto}
.burger{display:none;background:transparent;border:2px solid rgba(255,255,255,.72);
  border-radius:4px;padding:6px 9px;cursor:pointer}
.burger span{display:block;width:20px;height:2px;background:#fff;margin:4px 0}

/* ========================= INTEGRATED HERO BANNER =========================
   Not a standalone image block: the artwork is the BANNER BACKGROUND and the H1,
   lede and byline sit on it, left aligned. The artwork's left 60% is uniformly
   dark (measured mean luminance 22.7 / max 27), so the text has real contrast
   and the scrim below is belt-and-braces for narrow viewports where `cover`
   crops differently. */
.herobanner{position:relative;background:var(--ink);
  background-image:url('/assets-site/hero.jpg');
  background-repeat:no-repeat;background-position:right center;background-size:cover;
  border-bottom:4px solid var(--azure);overflow:hidden}
.herobanner::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,var(--ink) 0 40%,rgba(11,16,22,.86) 58%,
             rgba(11,16,22,.35) 74%,transparent 88%)}
.herobanner .wrap{position:relative;z-index:1;padding-block:34px 26px}
.herobanner .hero-copy{max-width:56%}
.herobanner h1{color:#fff}
.herobanner .lede{color:#C9D6E2}
.herobanner .byline{border-top-color:rgba(255,255,255,.20)}
.herobanner .by-name a{color:#fff}
.herobanner .by-role{color:#A9B7C5}
.herobanner .by-meta{margin-left:0;width:100%;margin-top:8px}
.herobanner .by-meta span{color:#93A3B2;border-left-color:rgba(255,255,255,.22)}

/* ============================== HERO ============================== */
/* Compact for BOTH views so the toplist clears the fold on desktop AND mobile
   (rule 1) — never by hiding anything on mobile (rule 2). */
h1{margin:0 0 10px;font:700 clamp(27px,4.1vw,42px)/1.12 var(--f-disp);
  letter-spacing:-.005em;text-transform:none}
.lede{margin:0 0 14px;font-size:17.5px;color:var(--grey);max-width:70ch}
.byline{display:flex;align-items:center;gap:13px;flex-wrap:wrap;
  padding:11px 0 0;border-top:1px solid var(--line)}
.byline img{width:44px;height:44px;border-radius:50%;border:2px solid var(--azure);flex:0 0 44px}
.by-name{font:600 15px/1.3 var(--f-body)}
.by-name a{color:var(--ink)}
.by-role{font-size:13px;color:var(--grey)}
/* structured meta row, NOT a compressed dot-run (rule 17) */
.by-meta{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}
.by-meta span{font:600 11.5px/1.3 var(--f-disp);letter-spacing:.06em;text-transform:uppercase;
  color:var(--grey);padding-left:10px;border-left:2px solid var(--line)}
.by-meta span:first-child{padding-left:0;border-left:0}

h2{margin:0 0 9px;font:700 clamp(22px,2.7vw,31px)/1.2 var(--f-disp)}
h3{margin:30px 0 8px;font:600 clamp(18px,2vw,22px)/1.28 var(--f-disp)}
h2+.sub,h3+.sub{margin:0 0 20px;color:var(--grey);font-size:16px}
p{margin:0 0 15px}

/* ==================================================================== */
/*  TOPLIST — top 3 = side-by-side STYLIZED MIRROR cards                */
/*            rows 4+ = NARROW rows, all details retained               */
/* ==================================================================== */
.mirrors{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:20px 0 26px}

.mirror{position:relative;display:flex;flex-direction:column;
  background:linear-gradient(178deg,var(--glass-2),#fff 62%);
  border:3px solid var(--azure);
  /* the standing-mirror silhouette: arched crown, squared foot */
  border-radius:52% 52% var(--r) var(--r) / 26% 26% 3% 3%;
  padding:64px 18px 18px;text-align:center}
/* the glass sheen. ⛔ Kept to the CROWN only and well below full opacity: at
   height:47%/.72 it washed across the logo, the brand name AND the bonus amount,
   costing legibility on the three most important elements in the card. */
.mirror::before{content:"";position:absolute;left:3px;right:3px;top:3px;height:23%;
  border-radius:52% 52% 46% 46% / 62% 62% 14% 14%;pointer-events:none;z-index:0;
  background:linear-gradient(116deg,transparent 34%,rgba(255,255,255,.5) 44% 49%,transparent 60%)}
/* everything real sits ABOVE the sheen */
.mirror>*{position:relative;z-index:1}

.mirror .cta{margin-top:auto}
.mirror .roundel{position:absolute;top:-14px;left:50%;transform:translateX(-50%);z-index:3}
/* ⛔ ribbon is IN FLOW, not absolutely positioned at top:52px, where it landed
   on top of the logo chip. */
.mirror .ribbon{display:block;margin:0 0 2px;
  font:600 10.5px/1.25 var(--f-disp);letter-spacing:.11em;text-transform:uppercase;
  color:var(--azure-d)}

/* ⛔ fixed BOX for the logo chip, constrained on BOTH axes. Sizing a
   mixed-aspect logo set by height alone renders 512x512 square marks as a dot
   next to 344x87 wordmarks. */
.chip{width:132px;height:54px;margin:8px auto 10px;display:grid;place-items:center;
  background:#fff;border:1px solid var(--line);border-radius:6px;padding:5px}
.chip img{max-height:42px;max-width:118px;width:auto;object-fit:contain}
.chip.dark{background:var(--ink);border-color:var(--ink)}

.bk-name{margin:0;font:700 20px/1.2 var(--f-disp)}
.bk-name-ghost{font:700 20px/1.2 var(--f-disp);color:var(--azure)}
/* Rating is shown ONE way only (operator directive): the NUMBER, never a number and
   stars together. Numbers rather than stars because the lineup spans 3.8 to 4.9, a
   range five stars physically cannot differentiate (4.90 and 4.75 both render as five
   filled stars). */
.score{display:inline-flex;align-items:baseline;gap:3px;
  border:2px solid var(--azure);border-radius:5px;padding:2px 8px 3px;background:#fff;
  line-height:1}
.score b{font:700 19px/1 var(--f-disp);color:var(--ink);letter-spacing:-.01em}
/* ⛔ <s> defaults to line-through; it MUST be reset or the denominator looks struck out */
.score s{text-decoration:none;font:600 11px/1 var(--f-disp);color:var(--grey)}
.row .score{padding:1px 6px 2px}
.row .score b{font-size:16px}

/* BONUS eye-catcher — the single loudest thing in a card after the CTA.
   Large + bold in the site AZURE (rule 6); never in --cta, which is reserved. */
.bonus{position:relative;margin:14px 0 4px;padding:13px 12px 12px;border-radius:9px;
  background:linear-gradient(180deg,#EAF3FB,#DDEBF7);
  border:2px solid var(--azure);border-left:6px solid var(--azure)}
.bonus .lab{display:block;font:600 11px/1 var(--f-disp);letter-spacing:.14em;
  text-transform:uppercase;color:var(--azure-d);margin-bottom:6px}
.bonus .amt{display:block;font:700 clamp(23px,2.9vw,34px)/1.08 var(--f-disp);
  color:var(--azure-d);letter-spacing:-.01em}
.bonus .code{display:inline-block;margin-top:7px;padding:2px 7px;border-radius:3px;
  background:var(--ink);color:#fff;font:600 11.5px/1.45 var(--f-disp);letter-spacing:.05em}

/* detail grid — every card keeps rollover / min / payout / identity tier */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:10px 0 12px;
  background:var(--line);border:1px solid var(--line);border-radius:6px}
.facts div{background:#fff;padding:7px 8px;text-align:left}
.facts dt{margin:0;font:600 10px/1.2 var(--f-disp);letter-spacing:.09em;
  text-transform:uppercase;color:var(--grey)}
.facts dd{margin:2px 0 0;font:600 13.5px/1.25 var(--f-body);color:var(--ink)}
.ratewrap{margin-top:2px}

/* ---------- the reserved CTA (⛔ --cta appears ONLY inside this block) ---------- */
.cta{display:block;width:100%;padding:13px 16px;border:0;border-radius:7px;
  background:var(--cta);color:#20160A;text-decoration:none;text-align:center;
  font:700 15px/1 var(--f-disp);letter-spacing:.07em;text-transform:uppercase;
  box-shadow:0 2px 0 var(--cta-d);cursor:pointer}
.cta:hover{background:var(--cta-d);color:#150E05}
.cta.sm{padding:10px 12px;font-size:13.5px}
.cta.inline{display:inline-block;width:auto;padding:12px 22px}

/* ---------------- NARROW rows (ranks 4+) ---------------- */
.rows{display:flex;flex-direction:column;gap:9px}
.row{display:grid;align-items:center;gap:16px;
  grid-template-columns:38px 122px minmax(136px,0.9fr) 232px minmax(180px,1fr) 146px;
  min-height:112px;padding:12px 15px 12px 13px;background:#fff;
  border:1px solid var(--line);border-left:4px solid var(--azure);border-radius:8px}
/* fluid inside its own track so it can never spill into the name column */
.row .chip{width:100%;height:48px}
.row .chip img{max-width:86%;max-height:38px}
.row .nm{margin:0;font:700 17px/1.2 var(--f-disp)}
/* ⛔ block, not inline — inline it butted straight onto the rating text
   ("4.70 / 5TRADING SINCE 1996"). */
.row .rb{display:block;font:600 10px/1.3 var(--f-disp);letter-spacing:.09em;
  text-transform:uppercase;color:var(--azure-d);margin-top:5px}
.row .nm{margin:0 0 5px;overflow-wrap:anywhere}
.row>*{min-width:0}          /* ⛔ without this a long brand name spills out of the card */
.row-bonus{position:relative;text-align:left;padding:9px 11px 9px 13px;border-radius:8px;
  background:linear-gradient(180deg,#EAF3FB,#DDEBF7);border:1.5px solid var(--azure);
  border-left:5px solid var(--azure)}
.row-bonus .lab{display:block;font:600 9.5px/1 var(--f-disp);letter-spacing:.12em;
  text-transform:uppercase;color:var(--azure-d);margin-bottom:4px}
.row-bonus .amt{display:block;font:700 clamp(18px,1.7vw,22px)/1.1 var(--f-disp);
  color:var(--azure-d);letter-spacing:-.012em}
.row-bonus .code{display:inline-block;margin-top:5px;padding:1px 6px;border-radius:3px;
  background:var(--ink);color:#fff;font:600 10.5px/1.5 var(--f-disp)}
.row-facts{display:flex;flex-wrap:wrap;gap:5px}
.row .chip{margin:0}

/* =========================== CONTENT =========================== */
.prose{max-width:78ch}
.prose ul,.prose ol{margin:0 0 18px;padding-left:22px}
.prose li{margin-bottom:7px}
.note{border-left:4px solid var(--azure);background:var(--glass-2);
  padding:15px 18px;border-radius:0 8px 8px 0;margin:26px 0 0}
.note strong{font-weight:700}

/* quick-answer spec sheet (the at-a-glance section) */
.glance{margin:20px 0 6px;border-radius:12px;overflow:hidden;
  background:var(--ink);border:3px solid var(--azure);
  box-shadow:0 6px 22px rgba(11,16,22,.13)}
.glance dl{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0;
  background:rgba(255,255,255,.13)}
.glance dl>div{background:var(--ink);padding:16px 17px 17px;position:relative}
/* the mirror seam, reused as the panel's internal rule */
.glance dl>div::before{content:"";position:absolute;left:17px;top:0;width:26px;height:3px;
  background:var(--azure)}
.glance dt{margin:11px 0 0;font:600 10.5px/1.35 var(--f-disp);letter-spacing:.12em;
  text-transform:uppercase;color:var(--azure-l)}
.glance dd{margin:6px 0 0;font:500 15.5px/1.45 var(--f-body);color:#F2F6FA}
.glance dd strong{color:#fff}

.tablewrap{overflow-x:auto;margin:18px 0 4px;border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;min-width:660px;background:#fff}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
th{background:var(--ink);color:#fff;
  font:600 12px/1.3 var(--f-disp);letter-spacing:.07em;text-transform:uppercase;
  position:sticky;top:0}
tbody tr:nth-child(even) td{background:var(--glass-2)}

/* review card */
.review{border:1px solid var(--line);border-radius:12px;background:#fff;
  padding:22px;margin:0 0 26px;border-top:4px solid var(--azure)}
.review .head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;min-height:56px}
.review .head .chip{margin:0;flex:0 0 132px}
.review .head h3{margin:0;flex:1 1 auto}
.review h3{margin:0}
.scores{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
  gap:10px;margin:14px 0}
.scores div{background:var(--glass-2);border:1px solid var(--line);border-radius:6px;padding:8px 10px}
.scores dt{font:600 10px/1.2 var(--f-disp);letter-spacing:.09em;text-transform:uppercase;color:var(--grey)}
.scores dd{margin:3px 0 0;font-weight:600;font-size:14px}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:14px 0 4px}
.pc h4{margin:0 0 7px;font:600 12px/1.2 var(--f-disp);letter-spacing:.09em;text-transform:uppercase}
.pc ul{margin:0;padding-left:18px;font-size:15.5px}
.pc .good h4{color:var(--azure-d)}
.pc .bad h4{color:var(--grey)}

/* FAQ — ⛔ the audit's FAQ detector matches a CLASS on the heading. Without
   faq-q / faq-a it reports faq=0/N, a false negative. */
.faq{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line);padding:17px 0}
.faq-q{margin:0 0 6px;font:600 18px/1.3 var(--f-disp)}
.faq-a{margin:0;color:#28313B}

/* author box */
.authorbox{display:flex;gap:20px;align-items:flex-start;background:var(--glass-2);
  border:1px solid var(--line);border-radius:12px;padding:22px;margin:22px 0 8px}
.authorbox img{width:82px;height:82px;border-radius:50%;border:3px solid var(--azure);flex:0 0 82px}

/* =========================== FOOTER =========================== */
/* legacy footer: black band, three columns, azure headings */
.foot{background:var(--ink);color:#B9C4CF;margin-top:40px;padding-block:34px 22px}
.foot a{color:#D8E2EC;text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot-cols{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px}
.foot h2,.foot h3{color:#fff;font:600 13px/1.3 var(--f-disp);letter-spacing:.11em;
  text-transform:uppercase;margin:0 0 11px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:7px;font-size:15px}
.foot img{height:44px;width:auto;margin-bottom:12px}
/* the #ad / affiliate disclosure lives at the very BOTTOM (rule 5) */
.disclose{border-top:1px solid #26313C;margin-top:24px;padding-top:16px;
  font-size:13px;line-height:1.62;color:#8E9AA6}
.disclose strong{color:#C6D1DC}

/* =========================== RESPONSIVE =========================== */
@media (max-width:1040px){
  .row{grid-template-columns:38px 108px minmax(108px,1fr) minmax(168px,1.15fr) minmax(120px,132px);
       row-gap:12px;gap:13px}
  .row .row-facts{grid-column:1 / -1}
  .row .cta{padding:11px 10px;font-size:14px}
}
@media (max-width:1040px){ .herobanner .hero-copy{max-width:64%} }
@media (max-width:860px){
  /* stacked narrow rows start here, not at 640: between 641 and 860 the 5-column
     grid's minimums exceeded the container and the pill row spilled out of the card. */
  .row{grid-template-columns:38px 108px minmax(0,1fr);row-gap:11px;text-align:left;gap:13px}
  .row .row-bonus{grid-column:2 / -1}
  .row .row-facts{grid-column:1 / -1}
  .row .cta{grid-column:1 / -1;padding:12px 14px;font-size:15px}
  .herobanner{background-image:url('/assets-site/hero-narrow.jpg');
    background-position:78% center}
  .herobanner::before{background:linear-gradient(90deg,var(--ink) 0 46%,
    rgba(11,16,22,.9) 66%,rgba(11,16,22,.55) 84%,rgba(11,16,22,.25) 100%)}
  .herobanner .hero-copy{max-width:100%}
  .herobanner .wrap{padding-block:24px 18px}
  .mirrors{grid-template-columns:1fr;gap:16px}
  .mirror{border-radius:34% 34% var(--r) var(--r) / 15% 15% 3% 3%;padding-top:40px}
  .mirror::before{height:38%}
  .foot-cols{grid-template-columns:1fr 1fr}
  .pc{grid-template-columns:1fr}
  .glance dl{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:760px){
  .nav{flex-wrap:wrap;padding-block:8px}
  .burger{display:block;margin-left:auto}
  .nav .links{display:none;width:100%;flex-direction:column;gap:0}
  .nav.open .links{display:flex}
  .nav .links a{width:100%;padding:11px 0;border-top:1px solid rgba(255,255,255,.26)}
  .nav .spacer{display:none}
  .brand img{height:82px}
  .mast-note{display:none}   /* utility strapline only, carries no content */
}
@media (max-width:640px){
  body{font-size:16.5px}
  /* --- rule 1: compact the hero for MOBILE TOO so the first card clears the
     fold at 390x700 AND 360x640. Achieved by tightening type and rhythm only,
     never by hiding content (rule 2). --- */
  .hero{padding-block:14px 10px}
  .herobanner .wrap{padding-block:18px 14px}
  :root{--s-sec:30px;--s-first:24px}
  h1{font-size:25px;line-height:1.09;margin-bottom:8px}
  .lede{font-size:16px;margin-bottom:10px;line-height:1.5}
  .byline{padding-top:9px}
  h2{font-size:21px}
  h2+.sub,h3+.sub{margin-bottom:10px;font-size:15px}
  .mirrors{margin-top:10px}
  .mirror{padding-top:66px}
  .nav{padding-block:5px}
  /* mobile cards centered, CTA full width (rule 7) */
  .mirror{text-align:center}
  /* ⛔ attribute pills BELOW the bonus amount, CTA last (hausstl lesson) */
  .mirror{display:flex;flex-direction:column}
  .mirror .idblock{order:1}
  .mirror .bonus{order:2}
  .mirror .facts{order:3}
  .mirror .cta{order:4}
  /* narrow rows reflow to two lines — every detail RETAINED, nothing hidden */
  .row{grid-template-columns:38px 108px 1fr;row-gap:11px;text-align:left;gap:13px}
  .row .row-bonus{grid-column:2 / -1}
  .row .row-facts{grid-column:1 / -1}
  .row .cta{grid-column:1 / -1;padding:12px 14px;font-size:15px}
  .byline{gap:10px}
  .by-meta{margin-left:0;width:100%}
  .glance dl{grid-template-columns:1fr}
  .authorbox{flex-direction:column}
  .foot-cols{grid-template-columns:1fr}
}
@media (max-width:400px){
  /* 360x640 is the tightest real viewport we support; the first toplist card
     must still clear the fold there (rule 1). Type + rhythm only. */
  h1{font-size:21.5px;line-height:1.05;letter-spacing:-.012em}
  .lede{font-size:15px;line-height:1.42;margin-bottom:8px}
  h2{font-size:19px}
  h2+.sub,h3+.sub{font-size:14.5px;margin-bottom:9px}
  :root{--s-sec:24px;--s-first:20px}
  .hero{padding-block:10px 8px}
  /* 360x640 is the tightest viewport we support and the H1 wraps to four lines there,
     so the banner needs its own trim to keep the first card above the fold (rule 1). */
  .herobanner .wrap{padding-block:9px 8px}
  .herobanner .byline{padding-top:7px}
  .herobanner .by-meta{margin-top:5px}
  .byline img{width:38px;height:38px;flex:0 0 38px}
  .mirrors{margin-top:8px}
  .mirror{padding-top:64px}
  .by-meta span{font-size:11px}
  .row{grid-template-columns:34px 92px minmax(0,1fr);gap:10px;padding:11px 12px 11px 11px}
  .row .chip{height:44px}
  .row .nm{font-size:16px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}