:root {
  --cream: #fbf2e6;
  --cream-light: #fffaf3;
  --paper: #fffdf9;
  --ink: #16110d;
  --muted: #675d54;
  --orange: #dc4212;
  --orange-dark: #b92f08;
  --orange-pale: #fbe4d5;
  --green: #17472f;
  --line: rgba(55, 38, 24, .15);
  --line-strong: rgba(55, 38, 24, .27);
  --shadow: 0 18px 46px rgba(69, 42, 20, .09);
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "Space Mono", monospace;
  /* Old Standard TT is modelled on early-1900s book and newspaper setting, which is what the
     DopaNews section is imitating. Newsreader was declared here before but never loaded, so this
     variable had been resolving to Georgia all along. */
  --editorial: "Old Standard TT", Georgia, "Times New Roman", serif;
  --editorial-sans: "PT Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 10%, rgba(236, 126, 54, .08), transparent 27rem),
    radial-gradient(circle at 90% 78%, rgba(236, 126, 54, .06), transparent 31rem),
    var(--cream);
  font-family: var(--body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 6px;
  color: white;
  background: var(--ink);
  transform: translateY(-150%);
}

.skip-link:focus { transform: none; }

.shell {
  width: min(1440px, calc(100% - 64px));
  margin-inline: auto;
}

.simulation-bar {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7vw;
  padding: 8px 32px;
  color: #fff4e8;
  background: linear-gradient(90deg, #0d0906, #1b1109 56%, #0d0906);
  font-size: 12px;
  letter-spacing: .01em;
}

.simulation-bar b { color: #ff6f32; font-weight: 500; }
.simulation-tagline { color: rgba(255, 244, 232, .72); font-size: 10px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--line);
  background: rgba(251, 242, 230, .92);
  backdrop-filter: blur(18px);
}

.header-inner {
  min-height: 86px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 34px;
}

.brand {
  font: 800 31px/1 var(--display);
  letter-spacing: -.055em;
  white-space: nowrap;
}

.brand span { color: var(--orange); }

.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.8vw, 29px);
}

.primary-nav a {
  position: relative;
  padding: 30px 0 25px;
  font-size: 13px;
  font-weight: 650;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  inset: auto 0 17px;
  height: 2px;
  border-radius: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transition: transform .2s ease;
}

.primary-nav a:hover::after,
.primary-nav a.active::after { transform: scaleX(1); }
.primary-nav a.active { color: var(--orange); }

.header-actions { display: flex; align-items: center; gap: 13px; }

.language-picker { position: relative; }

.language-picker summary {
  min-width: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  list-style: none;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .45);
  font: 700 12px var(--mono);
}

.language-picker summary::-webkit-details-marker { display: none; }

.language-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 160px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.language-menu button {
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  text-align: left;
  cursor: pointer;
  background: transparent;
  font-size: 12px;
}

.language-menu button:hover { background: var(--orange-pale); }

.button {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 27px;
  border: 1px solid var(--orange);
  border-radius: 999px;
  color: white;
  background: linear-gradient(135deg, var(--orange), #ef531a);
  box-shadow: 0 8px 22px rgba(220, 66, 18, .16);
  font-size: 14px;
  font-weight: 750;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(220, 66, 18, .24);
}

.button-small { min-height: 42px; padding: 0 21px; font-size: 12px; }

.button-outline {
  color: var(--ink);
  background: transparent;
  border-color: rgba(220, 66, 18, .36);
  box-shadow: none;
}

.play-icon { font-size: 20px; line-height: 0; }
.menu-toggle { display: none; }

.hero {
  min-height: 475px;
  display: grid;
  grid-template-columns: minmax(390px, .82fr) minmax(560px, 1.18fr);
  gap: 48px;
  align-items: center;
  padding-block: 25px 24px;
}

.eyebrow {
  margin: 0 0 15px;
  color: var(--orange);
  font: 700 12px/1.2 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0;
  font: 800 clamp(48px, 5vw, 72px)/.98 var(--display);
  letter-spacing: -.055em;
}

.hero-intro {
  max-width: 520px;
  margin: 18px 0 20px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.58;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }

.savings-card {
  max-width: 570px;
  min-height: 80px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  align-items: center;
  gap: 25px;
  margin-top: 22px;
  padding: 12px 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 253, 249, .45);
}

.savings-label {
  display: block;
  margin-bottom: 2px;
  color: var(--muted);
  font: 700 10px var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.savings-card strong { color: var(--orange); font: 800 27px var(--display); }
.savings-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }

.hero-media {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 25px;
  background: #070608;
  box-shadow: 0 25px 65px rgba(37, 14, 3, .16);
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: inherit;
  pointer-events: none;
}

.hero-media img { width: 100%; height: 100%; min-height: 410px; object-fit: cover; transition: transform .5s ease; }
.hero-media:hover img { transform: scale(1.018); }

.section { padding-block: 20px 32px; }

.section-heading {
  min-height: 35px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}

.section-heading h2 {
  margin: 0;
  font: 800 16px/1.2 var(--display);
  letter-spacing: -.02em;
  text-transform: uppercase;
}

.section-heading h2 span { color: var(--orange); text-decoration: underline; text-underline-offset: 3px; }
.section-heading h2 small { font: 600 11px var(--body); letter-spacing: 0; text-transform: none; }
.section-heading > a { font-size: 11px; font-weight: 700; white-space: nowrap; }
.section-heading > a:hover { color: var(--orange); }

.store-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}

.store-card {
  position: relative;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 7px 18px rgba(65, 41, 24, .04);
  isolation: isolate;
  transition: transform .22s ease, box-shadow .22s ease;
}

.store-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }

.store-card::after {
  display: none;
}

.store-card img {
  position: absolute;
  inset: auto 0 0;
  z-index: 0;
  width: 100%;
  height: 58%;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease;
}

.store-card:hover img { transform: scale(1.035); }

.store-card-body { position: relative; z-index: 1; display: flex; min-height: 300px; flex-direction: column; padding: 12px 11px 11px; }

/* One pill per row, shortest first (the order is set in the renderer). */
.store-tags { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.store-tags > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.store-category {
  align-self: flex-start;
  padding: 5px 8px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--orange-dark);
  background: rgba(255, 253, 249, .88);
  font: 700 8px var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.store-status { padding: 4px 6px; border: 1px solid rgba(185, 47, 8, .28); border-radius: 999px; color: var(--orange-dark); background: rgba(255, 253, 249, .84); font: 700 7px var(--mono); letter-spacing: .03em; text-transform: uppercase; }
.store-card.real { border: 1.5px solid var(--green); box-shadow: 0 9px 22px rgba(23, 71, 47, .12); }
.store-card.real .store-category, .store-card.real .store-status { color: white; border-color: var(--green); background: var(--green); }
/* The status pill that used to sit over the image. Same colours, now the last row of the stack. */
.store-status-flag { border-color: var(--line-strong); background: rgba(255, 253, 249, .92); }
.store-card.real img { height: 58%; object-fit: cover; object-position: center 68%; transform: scale(1.01); }
.store-card.real:hover img { transform: scale(1.05); }
.store-card h3 { margin: 10px 0 4px; font: 800 17px/1.1 var(--display); letter-spacing: -.035em; }
.store-card p { max-width: 17ch; margin: 0; font-size: 10px; line-height: 1.42; }
.store-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 9px; font-weight: 700; }
.store-meta span { padding: 4px 6px; border-radius: 999px; background: rgba(255, 253, 249, .92); box-shadow: 0 2px 8px rgba(31, 20, 12, .08); }
.store-meta span:last-child { font-size: 16px; }

.news-layout {
  display: grid;
  grid-template-columns: 1.45fr .78fr .78fr;
  min-height: 470px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(rgba(255, 251, 243, .9), rgba(255, 251, 243, .9)),
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(80, 53, 34, .025) 3px 4px);
  box-shadow: 0 12px 25px rgba(65, 41, 24, .08);
}

.lead-news {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: 18px;
  padding: 18px;
  border-right: 1px solid var(--line-strong);
}

.lead-copy { display: flex; flex-direction: column; }
.news-label { align-self: flex-start; padding: 4px 7px; color: white; background: var(--orange); font: 700 8px var(--mono); text-transform: uppercase; }
.lead-copy h3 { margin: 13px 0 10px; font: 800 clamp(28px, 2.5vw, 42px)/.94 var(--editorial); letter-spacing: -.035em; }
.lead-copy p { margin: 0; font-family: var(--editorial); font-size: 16px; line-height: 1.28; }
.byline { margin-top: auto; padding-top: 18px; font: 700 8px var(--mono); text-transform: uppercase; }

.lead-image { position: relative; min-height: 100%; overflow: hidden; border: 1px solid var(--ink); }
.lead-image img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) sepia(.16) contrast(1.04); transition: transform .4s ease; }
.lead-news:hover .lead-image img { transform: scale(1.025); }

.news-stack { display: grid; grid-template-rows: repeat(3, 1fr); border-right: 1px solid var(--line-strong); }
.news-brief { display: grid; grid-template-columns: 1fr 92px; gap: 10px; min-height: 0; padding: 13px; border-bottom: 1px solid var(--line-strong); }
.news-brief:last-child { border-bottom: 0; }
.news-brief small { color: var(--orange); font: 700 8px var(--mono); text-transform: uppercase; }
.news-brief h3 { margin: 6px 0 0; font: 800 16px/1.06 var(--display); letter-spacing: -.025em; }
.news-brief img { width: 92px; height: 100%; min-height: 106px; object-fit: cover; filter: saturate(.85); }

.news-visual { display: flex; min-width: 0; flex-direction: column; padding: 13px; }
.visual-title { margin-bottom: 10px; color: var(--orange); font: 700 9px var(--mono); text-transform: uppercase; }
.visual-title span { margin-left: 4px; color: var(--ink); font-family: var(--body); text-transform: none; }
.visual-grid { flex: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.visual-tile { position: relative; min-height: 0; overflow: hidden; border: 1px solid var(--line-strong); }
.visual-tile:first-child { grid-column: 1 / -1; }
.visual-tile img { width: 100%; height: 100%; object-fit: cover; }
.visual-tile span { position: absolute; inset: auto 0 0; padding: 18px 8px 7px; color: white; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); font: 700 9px/1.2 var(--body); }
.visual-more { margin-top: 8px; color: var(--orange); text-align: right; font-size: 9px; font-weight: 700; }

/* The strip is square. Cover-cropping it lost 10% off each side and shifted every balloon away
   from its caption, so the square is preserved and the art is contained instead. */
.comic-feature { position: relative; flex: 0 0 auto; aspect-ratio: 1; min-height: 0;
  overflow: hidden; border: 1px solid var(--ink); background: #f5ead4; }
.comic-feature > img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Positions are the MEASURED centroids of the four empty balloons in the art, not estimates.
   translate(-50%,-50%) centres the caption on the balloon rather than hanging it off a corner. */
.comic-line { position: absolute; z-index: 2; width: 34%; color: #17110d; text-align: center;
  font: 800 clamp(7px, .68vw, 11px)/1.1 var(--display); letter-spacing: -.02em;
  text-wrap: balance; }
.comic-line-1 { top: 23%; left: 44%; transform: translate(-50%, -50%) rotate(-1deg); }
.comic-line-2 { top: 20%; left: 77%; transform: translate(-50%, -50%) rotate(1deg); }
.comic-line-3 { top: 72%; left: 45%; transform: translate(-50%, -50%) rotate(-1deg); }
.comic-line-4 { top: 67%; left: 76%; transform: translate(-50%, -50%) rotate(1deg); }

.stories-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }

.story-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 253, 249, .55);
  transition: transform .2s ease, box-shadow .2s ease;
}

.story-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.story-card img { width: 100%; aspect-ratio: 1.6; object-fit: cover; }
.story-copy { padding: 10px 11px 14px; }
.story-meta { color: var(--orange); font: 700 8px var(--mono); text-transform: uppercase; }
.story-meta span { color: var(--muted); }
.story-card h3 { margin: 7px 0 7px; font: 800 17px/1.02 var(--display); letter-spacing: -.025em; }
.story-card p { margin: 0; color: #453c35; font-size: 10px; line-height: 1.42; }

.wheel-feature {
  position: relative;
  min-height: 245px;
  display: grid;
  grid-template-columns: 1fr 270px;
  align-items: stretch;
  overflow: hidden;
  border-radius: 17px;
  color: white;
  background: #0a0b12;
}

.wheel-feature > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 56%; transition: transform .55s ease; }
.wheel-feature:hover > img { transform: scale(1.018); }
.wheel-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 6, 12, .94) 0%, rgba(5, 6, 12, .72) 28%, rgba(5, 6, 12, .11) 64%, rgba(5, 6, 12, .68) 78%, rgba(5, 6, 12, .94) 100%); }
.wheel-copy { position: relative; z-index: 2; max-width: 470px; padding: 30px 25px; }
.wheel-kicker { margin: 0 0 8px; color: #ff7340; font: 700 9px var(--mono); text-transform: uppercase; }
.wheel-copy h3 { margin: 0 0 12px; font: 800 32px/.98 var(--display); letter-spacing: -.035em; }
.wheel-copy > p:not(.wheel-kicker) { max-width: 46ch; margin: 0 0 18px; color: rgba(255, 255, 255, .77); font-size: 11px; }
.wheel-copy .button { min-height: 42px; padding-inline: 18px; font-size: 11px; }

.garage-panel { position: relative; z-index: 2; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 24px; border-left: 1px solid rgba(255, 255, 255, .18); background: rgba(7, 7, 11, .52); backdrop-filter: blur(8px); }
.garage-label { align-self: flex-start; padding: 5px 8px; border-radius: 3px; background: rgba(255, 255, 255, .12); font: 700 9px var(--mono); text-transform: uppercase; }
.garage-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0; }
.garage-stats div { min-width: 0; padding: 12px 8px; border: 1px solid rgba(255, 255, 255, .15); background: rgba(0, 0, 0, .28); }
.garage-stats b, .garage-stats span { display: block; overflow: hidden; text-overflow: ellipsis; }
.garage-stats b { font: 800 16px var(--display); }
.garage-stats span { color: rgba(255, 255, 255, .65); font-size: 8px; }
.garage-link { color: #ff6d34; font-size: 11px; font-weight: 700; }

.real-world-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.real-panel { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; grid-template-rows: 230px auto; overflow: hidden; border: 2px solid var(--panel-brand, var(--green)); border-radius: 16px; background: var(--paper); box-shadow: 0 10px 25px rgba(23, 71, 47, .08); }
.dopasnap-panel { --panel-brand: #123c2b; --panel-soft: #e4efe6; }
.legit-panel { --panel-brand: #08783f; --panel-soft: #dff2e6; }
.real-stamp { position: absolute; top: 12px; right: 12px; z-index: 4; padding: 5px 8px; border-radius: 999px; color: white; background: var(--panel-brand, var(--green)); font: 700 7px var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.panel-copy { position: relative; z-index: 3; grid-column: 1; grid-row: 1; padding: 17px 10px 17px 21px; }
.panel-heading { display: flex; gap: 6px; align-items: baseline; margin-bottom: 20px; }
.panel-heading b { font: 800 13px var(--display); text-transform: uppercase; }
.panel-heading span { font-size: 9px; }
.panel-copy h2 { margin: 0 0 8px; font: 800 25px/.98 var(--display); letter-spacing: -.035em; }
.panel-copy p { max-width: 29ch; margin: 0 0 15px; font-size: 10px; line-height: 1.5; }
.panel-copy .button { min-height: 36px; padding-inline: 14px; font-size: 9px; }

.green-button { color: var(--green); border-color: #318359; }
.green-solid { color: white; border-color: var(--green); background: var(--green); box-shadow: none; }
.green-solid:hover { background: #205d40; box-shadow: none; }
.dopasnap-panel .green-button { color: #123c2b; border-color: #123c2b; background: rgba(243, 241, 235, .8); }
.legit-panel .green-solid { border-color: #08783f; background: #08783f; }
.legit-panel .green-solid:hover { background: #064b2b; }

.feature-art { position: relative; z-index: 1; grid-column: 1 / -1; grid-row: 1; height: 230px; min-height: 0; overflow: hidden; }
.feature-art img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .45s ease; }
.feature-art:hover img { transform: scale(1.012); }

.affiliate-disclosure { position: relative; z-index: 3; grid-column: 1 / -1; margin: 0; padding: 8px 20px 9px; border-top: 1px solid color-mix(in srgb, var(--panel-brand, var(--green)) 18%, transparent); color: #4f6558; background: var(--panel-soft, rgba(232, 242, 234, .72)); font-size: 7.5px; line-height: 1.35; }
.affiliate-disclosure b { color: var(--panel-brand, var(--green)); }

.newsletter {
  min-height: 112px;
  display: grid;
  grid-template-columns: 92px 1fr minmax(410px, .9fr);
  align-items: center;
  gap: 24px;
  margin-top: 6px;
  padding: 16px 28px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(100deg, #f4e0c6, #f8e8d0 62%, #f0d8b9);
}

.newsletter > img { width: 76px; height: 76px; border-radius: 18px; transform: rotate(-5deg); }
.newsletter h2 { margin: 0 0 3px; font: 800 19px var(--display); text-transform: uppercase; }
.newsletter p { margin: 0; font-size: 10px; }
.newsletter-form { position: relative; display: grid; grid-template-columns: 1fr auto; }
.newsletter-form input { min-height: 43px; padding: 0 15px; border: 1px solid var(--line); border-radius: 7px 0 0 7px; outline: 0; background: rgba(255, 255, 255, .67); font-size: 11px; }
.newsletter-form input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(220, 66, 18, .09); }
.newsletter-form button { min-width: 110px; border: 0; border-radius: 0 7px 7px 0; color: white; background: var(--orange); cursor: pointer; font-size: 11px; font-weight: 700; }
.newsletter-form span { grid-column: 1 / -1; padding-top: 5px; text-align: center; font-size: 8px; }

.site-footer {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 30px;
  padding-block: 16px 26px;
}

.site-footer .brand { font-size: 20px; }
.footer-brand p { margin: 4px 0 0; font-size: 8px; }
.footer-brand p b { color: var(--orange); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 22px; font-size: 9px; }
.site-footer nav a:hover { color: var(--orange); }
.footer-disclaimer { grid-column: 1 / -1; margin: 0; padding-top: 11px; border-top: 1px solid var(--line); color: var(--muted); text-align: center; font-size: 8px; }

@media (max-width: 1180px) {
  .shell { width: min(1100px, calc(100% - 40px)); }
  .header-inner { gap: 20px; }
  .primary-nav { gap: 14px; }
  .primary-nav a { font-size: 11px; }
  .brand { font-size: 25px; }
  .hero { grid-template-columns: .85fr 1.15fr; gap: 34px; }
  .hero h1 { font-size: clamp(46px, 5.3vw, 63px); }
  /* Seven across is kept here on purpose - see the single-row block below. */
  .store-card, .store-card-body { min-height: 330px; }
  .news-layout { grid-template-columns: 1.3fr .8fr; }
  .news-visual { grid-column: 1 / -1; min-height: 210px; border-top: 1px solid var(--line-strong); }
  .visual-grid { grid-template-columns: repeat(3, 1fr); }
  .visual-tile:first-child { grid-column: auto; }
}

/* ── Even store cards: name, description, pills, image ──────────────────────────────────────────
   Fixed grid rows are what make the row look even. Descriptions differ in length, so a flowing panel
   would push each card's pills and photo to a different height; giving the description row a fixed
   height and clamping it to fit means every panel is the same height and the pills and image tops all
   land on one line. */
.store-card { display: flex; flex-direction: column; overflow: hidden;
  --desc-h: 56px; --desc-lines: 4; --shot-h: 150px; }
.store-card-body {
  order: 1; position: relative; z-index: 1;
  display: grid; grid-template-rows: var(--name-h, auto) var(--desc-h, 54px) auto; align-content: start;
  min-height: 0; padding: 12px 11px 11px;
}
.store-card h3 { margin: 0 0 6px; align-self: start; font-weight: 600; }
/* Capitals carry the name: DopaSnap reads as DS, NomNomNever as NNN. 1px larger only - any more and
   the baseline starts to look wobbly at 13px. */
/* The name sits at 600 so the capitals at 800 actually read as heavier. Both weights are already in
   the loaded Bricolage set - before this the base was 800 too and the "bold" did nothing. */
.store-card h3 .cap { font-weight: 800; font-size: calc(1em + 1px); }
.store-card p { max-width: none; margin: 0; overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: var(--desc-lines, 4); -webkit-box-orient: vertical; }
.store-tags { align-self: end; }

/* The photo leaves the absolute overlay and sits below the panel, with the flag over it. */
.store-shot { order: 2; position: relative; margin-top: auto; line-height: 0; }
.store-card img, .store-card.real img {
  position: static; width: 100%; height: var(--shot-h, 150px); object-fit: cover; object-position: center;
}
/* ── Seven-across, one row: the narrow end ──────────────────────────────────────────────────────
   Between 1024 and 1180 the cards are ~134-160px wide, so everything inside steps down a size.
   Above 1180 they are ~186px and keep the original sizing. */
@media (max-width: 1180px) and (min-width: 1100px) {
  .store-grid { gap: 8px; }
  .store-card-body { padding: 9px 8px 9px; }
  .store-tags { gap: 4px; }
  .store-category { padding: 4px 6px; font-size: 7px; letter-spacing: .03em; }
  .store-status { padding: 3px 5px; font-size: 6.5px; }
  .store-card h3 { margin: 8px 0 3px; font-size: 13px; letter-spacing: -.03em; }
  .store-card p {
    max-width: none; font-size: 9px; line-height: 1.38;
    /* Clamp rather than let a long description shove the meta row into the photo. */
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  }
  /* Two lines reserved: at ~131px "DopaKart Lux" and "NomNomNever" wrap, and a row that sizes to
     content would drop those cards' pills 20px below everyone else's. */
  .store-card { --desc-h: 50px; --desc-lines: 4; --shot-h: 128px; --name-h: 37px; }
}

/* Below 1024 seven columns stop being readable, so step down rather than shrink further. */
@media (max-width: 1099px) {
  .store-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .store-card { --desc-h: 46px; --desc-lines: 3; --shot-h: 165px; }
}

@media (max-width: 920px) {
  .simulation-tagline { display: none; }
  .header-inner { min-height: 72px; grid-template-columns: auto 1fr auto; }
  .menu-toggle { display: grid; justify-self: end; width: 38px; height: 38px; place-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 50%; background: transparent; cursor: pointer; }
  .menu-toggle span:not(.sr-only) { width: 16px; height: 2px; background: var(--ink); }
  .primary-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; padding: 16px 20px 20px; border-bottom: 1px solid var(--line); background: var(--cream-light); box-shadow: var(--shadow); }
  .primary-nav.open { display: grid; grid-template-columns: repeat(2, 1fr); }
  .primary-nav a { padding: 10px; }
  .primary-nav a::after { display: none; }
  .header-actions { grid-column: 3; grid-row: 1; }
  .menu-toggle { grid-column: 2; grid-row: 1; }
  .hero { min-height: 0; grid-template-columns: 1fr; padding-top: 45px; }
  .hero-copy { max-width: 670px; }
  .hero-media { min-height: 400px; }
  .hero-media img { min-height: 400px; }
  .stories-grid { grid-template-columns: repeat(3, 1fr); }
  .story-card:nth-child(n+4) { display: none; }
  .real-world-grid { grid-template-columns: 1fr; }
  .newsletter { grid-template-columns: 72px 1fr; }
  .newsletter-form { grid-column: 1 / -1; }
}

@media (max-width: 700px) {
  .shell { width: min(100% - 28px, 620px); }
  .simulation-bar { min-height: 50px; padding-inline: 16px; text-align: center; font-size: 10px; }
  .brand { font-size: 22px; }
  .header-actions .button { display: none; }
  .language-picker summary { min-width: 58px; padding: 8px 10px; }
  .hero { gap: 26px; padding-block: 34px 24px; }
  .hero h1 { font-size: clamp(44px, 14vw, 61px); }
  .hero-intro { font-size: 14px; }
  .hero-media, .hero-media img { min-height: 280px; }
  .savings-card { grid-template-columns: 1fr; gap: 7px; }
  .section { padding-bottom: 24px; }
  .section-heading h2 small { display: block; margin-top: 4px; }
  .store-grid { grid-template-columns: repeat(2, 1fr); }
  /* Stacking is now the default layout; only the sizing changes here. */
  .store-card { --desc-h: 44px; --desc-lines: 3; --shot-h: 175px; }
  .store-card-body { padding: 12px 12px 14px; }
  .news-layout { display: block; }
  .lead-news { grid-template-columns: 1fr; border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .lead-image { min-height: 300px; order: -1; }
  .lead-copy h3 { font-size: 34px; }
  .byline { margin-top: 8px; }
  .news-stack { border-right: 0; }
  .news-brief { grid-template-columns: 1fr 120px; }
  .news-visual { min-height: 280px; }
  .stories-grid { grid-template-columns: 1fr 1fr; }
  .story-card:nth-child(3) { display: none; }
  .wheel-feature { min-height: 520px; grid-template-columns: 1fr; align-content: space-between; }
  .wheel-shade { background: linear-gradient(180deg, rgba(5, 6, 12, .88) 0, rgba(5, 6, 12, .1) 50%, rgba(5, 6, 12, .94) 78%); }
  .wheel-copy { align-self: start; }
  .garage-panel { align-self: end; border-top: 1px solid rgba(255, 255, 255, .18); border-left: 0; }
  .real-panel { grid-template-columns: 1fr; grid-template-rows: auto 230px auto; }
  .panel-copy { grid-row: 1; max-width: none; background: var(--paper); }
  .feature-art { grid-row: 2; min-height: 230px; }
  .affiliate-disclosure { grid-row: 3; }
  .newsletter { grid-template-columns: 58px 1fr; padding: 16px; }
  .newsletter > img { width: 54px; height: 54px; }
  .newsletter-form { grid-template-columns: 1fr; gap: 7px; }
  .newsletter-form input, .newsletter-form button { border-radius: 7px; }
  .newsletter-form button { min-height: 42px; }
  .site-footer { grid-template-columns: 1fr; }
  .site-footer nav { justify-content: flex-start; gap: 14px; }
}

@media (max-width: 430px) {
  .store-grid { grid-template-columns: 1fr; }
  .store-card { --desc-h: auto; --desc-lines: 5; --shot-h: 195px; }
  .stories-grid { grid-template-columns: 1fr; }
  .story-card:nth-child(2) { display: none; }
  .hero-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ── Store-card header tint ─────────────────────────────────────────────────────────────────────
   The panel above each store image was --paper on every card. Each one now FADES from a colour taken
   from that card's OWN artwork down to FULLY TRANSPARENT, dissolving exactly where the panel meets the image.

   How the hues were chosen: each image was quantised, near-white/near-black/grey clusters dropped as
   background rather than character, and the remaining clusters ranked by area weighted by saturation.
   The winning hue is re-emitted at a fixed lightness (~0.84) as the TOP stop, so every card sits in the
   same tonal band and only the hue and a capped saturation carry over from the picture. The bottom stop is the same colour at alpha 0 - written rgba(r,g,b,0) rather than the
   `transparent` keyword, which is rgba(0,0,0,0) and can drag the midpoint grey. It is layered over the
   card's paper base so the transparent end reveals the card surface rather than the section cream. The
   fade completes at 44% because the image covers the bottom 58%; running it to 100% would hide the
   middle of the transition behind the photo. Note the card background sits BELOW the image (z-index 0),
   so this dissolves into the card, it does not tint the photograph.

     WanderNever   hue   8  its coral neon (#F28574 cluster, 13% of frame)
     NomNomNever   hue  33  burnt orange through to cream
     KeysNever     hue  30  warm gold, deliberately low saturation because the image itself is muted
     DopaKart      hue 276  the violet mass, 14% of frame
     WheelDream    hue 236  the blue neon on the right of the frame - the amber on the left is the
                            larger mass but reads as reflection on black, not as the card's colour

   DopaSnap and Legit are GREEN regardless of their artwork, matching the green REAL badge and border
   they already carry.

   Contrast checked against both text colours on every card: vs --ink 14.2-15.8:1, vs --muted
   4.88-5.40:1. AA needs 4.5:1, so body copy passes on all seven and headings pass AAA.

   Selected with :has() on the image filename rather than nth-child, so re-ordering the store list
   cannot mis-assign a colour. Any browser without :has() simply keeps the original --paper panel. */
.store-card:has(img[src*="wandernever-store"]) { border: 1.5px solid #D37769; }
.store-card:has(img[src*="wandernever-store"]) .store-card-body { background: linear-gradient(180deg, rgba(242, 196, 189, 1) 0%, rgba(242, 196, 189, 0) 50%), var(--paper); }
.store-card:has(img[src*="nomnomnever-store"]) { border: 1.5px solid #CC995C; }
.store-card:has(img[src*="nomnomnever-store"]) .store-card-body { background: linear-gradient(180deg, rgba(240, 217, 188, 1) 0%, rgba(240, 217, 188, 0) 50%), var(--paper); }
.store-card:has(img[src*="keysnever-store"]) { border: 1.5px solid #B49474; }
.store-card:has(img[src*="keysnever-store"]) .store-card-body { background: linear-gradient(180deg, rgba(226, 215, 205, 1) 0%, rgba(226, 215, 205, 0) 50%), var(--paper); }
.store-card:has(img[src*="dopakart-store"]) { border: 1.5px solid #A57DBF; }
.store-card:has(img[src*="dopakart-store"]) .store-card-body { background: linear-gradient(180deg, rgba(221, 202, 234, 1) 0%, rgba(221, 202, 234, 0) 50%), var(--paper); }
.store-card:has(img[src*="wheeldream-store"]) { border: 1.5px solid #767BBC; }
.store-card:has(img[src*="dopakartlux-store"]) { border: 1.5px solid #C87D2D; }
.store-card:has(img[src*="wheeldream-store"]) .store-card-body { background: linear-gradient(180deg, rgba(201, 203, 233, 1) 0%, rgba(201, 203, 233, 0) 50%), var(--paper); }
.store-card:has(img[src*="dopakartlux-store"]) .store-card-body { background: linear-gradient(180deg, rgba(250, 206, 158, 1) 0%, rgba(250, 206, 158, 0) 50%), var(--paper); }
/* The two real lanes: green by instruction, not derived from their art. */
.store-card:has(img[src*="dopasnap-store"]) .store-card-body,
.store-card:has(img[src*="legit-store"]) .store-card-body { background: linear-gradient(180deg, rgba(203, 229, 217, 1) 0%, rgba(203, 229, 217, 0) 50%), var(--paper); }


/* ── DopaNews: each item cut out of the paper ───────────────────────────────────────────────────
   The section used to be one bordered grid with divider rules - a newspaper PAGE. Each piece is now its
   own clipping: a ragged torn edge, newsprint tint, and a shadow that follows the tear.

   The tear is an SVG feTurbulence + feDisplacementMap filter (#paper-tear, inlined in index.html), not a
   clip-path. A clip-path polygon in percentages scales with its box, so the same tooth is ~3px on a brief
   card and ~15px on the lead, and at the lead's width it stops reading as torn at all. A displacement
   filter ragged-ises at a constant scale whatever the box size.

   The filter runs on a ::before BACKDROP, never on the element itself - feDisplacementMap would displace
   the text along with the paper and the copy would go wobbly. Content sits above it and stays crisp.
   Browsers without SVG filter support simply get a clean rectangular newsprint card. */
.news-layout {
  border: 0;
  background: none;
  box-shadow: none;
  gap: 18px;
}
.lead-news, .news-brief, .news-visual {
  position: relative;
  isolation: isolate;
  border: 0;
  background: none;
}
.lead-news::before, .news-brief::before, .news-visual::before {
  content: "";
  position: absolute;
  inset: -4px;                     /* room for the tear to eat into without cropping the card */
  z-index: -1;
  background:
    /* paper tooth - a fine speckle so the stock reads as uncoated newsprint rather than flat colour */
    radial-gradient(rgba(60, 55, 45, .05) .5px, transparent .6px) 0 0 / 3px 3px,
    radial-gradient(rgba(60, 55, 45, .04) .5px, transparent .6px) 1.5px 1.5px / 3px 3px,
    /* the faint horizontal rule of a printed column */
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(45, 42, 36, .045) 3px 4px),
    /* newsprint grey, very slightly warm - true grey looks like cheap photocopy */
    linear-gradient(#e9e6de, #e4e0d7);
  filter: url(#paper-tear) drop-shadow(0 4px 7px rgba(65, 41, 24, .22));
}
/* Padding so the copy never sits on the torn edge. */
.lead-news { padding: 22px 24px; }
.news-brief { padding: 16px 17px; }
.news-visual { padding: 16px 17px; }

/* The dividing rules belonged to the single-page look and would now cut across a clipping. */
.news-stack { border-right: 0; display: grid; grid-template-rows: repeat(3, 1fr); gap: 16px; }
.news-brief, .news-brief:last-child { border-bottom: 0; }

@media (max-width: 700px) {
  .news-layout { gap: 0; }
  .lead-news, .news-brief, .news-visual { margin-bottom: 16px; }
}


/* ── DopaNews typography: editorial serif ───────────────────────────────────────────────────────
   Headlines and body copy in the clippings use the editorial serif; the small furniture - kickers,
   bylines, read-times - uses the paired sans, which is how a newspaper actually sets those. */
.lead-copy h3, .news-brief h3 { font-family: var(--editorial); font-weight: 700; letter-spacing: -.012em; }
.lead-copy p { font-family: var(--editorial); }
.news-brief h3 { font-size: 17px; line-height: 1.14; }
.news-label, .byline, .news-brief small, .visual-title, .visual-more {
  font-family: var(--editorial-sans);
}
.section-heading h2 small { font-family: var(--editorial); font-style: italic; }