:root {
  --void: #0a0a0a;
  --pitch: #141414;
  --gunmetal: #1f1f1f;
  --steel-dark: #2a2a2a;
  --steel: #3a3a3a;
  --steel-light: #5a5a5a;
  --chrome: #c8c8c8;
  --paper: #f5f2ec;
  --paper-warm: #ebe6dc;
  --paper-bright: #ffffff;
  --ink: #0a0a0a;
  --ink-soft: #2a2a2a;
  --rust: #d94e1f;
  --rust-bright: #ff6a3d;
  --rust-deep: #a83815;
  --warning: #f5b800;
  --line: rgba(255,255,255,0.08);
  --line-strong: rgba(255,255,255,0.15);
  --line-dark: rgba(0,0,0,0.1);
  --line-dark-strong: rgba(0,0,0,0.2);

  /* Era-coded accents for the timeline */
  --era-1996: #8a6d3b;
  --era-2006: #c14d2a;
  --era-2016: #5a8a8a;
  --era-2026: #d94e1f;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
  z-index: 1000;
  mix-blend-mode: multiply;
}

/* HEADER */
.masthead {
  background: var(--void);
  border-bottom: 4px solid var(--rust);
  position: sticky;
  top: 0;
  z-index: 100;
}

.masthead-inner {
  max-width: 1480px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand-logo { display: flex; align-items: center; text-decoration: none; }
.brand-logo img { height: 56px; width: auto; display: block; }

.nav { display: flex; gap: 32px; align-items: center; }
.nav a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--paper);
  font-weight: 500;
  transition: color 0.2s;
}
.nav a:hover { color: var(--rust-bright); }
.nav a.cta {
  background: var(--rust);
  color: var(--paper-bright);
  padding: 10px 18px;
  font-weight: 700;
}
.nav a.cta:hover { background: var(--rust-bright); color: var(--void); }

/* HERO */
.hero {
  padding: 80px 32px 56px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 75% 30%, rgba(217,78,31,0.22) 0%, transparent 55%),
    linear-gradient(180deg, var(--pitch) 0%, var(--void) 100%);
  color: var(--paper-bright);
}

.hero::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0, transparent 18px, rgba(200,200,200,0.06) 18px, rgba(200,200,200,0.06) 19px);
  pointer-events: none;
}

.hero-inner { max-width: 1480px; margin: 0 auto; position: relative; z-index: 2; }

.crumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--chrome);
  margin-bottom: 20px;
}
.crumb span { color: var(--rust-bright); font-weight: 700; }

.hero h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(48px, 8vw, 112px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
  text-transform: uppercase;
  color: var(--paper-bright);
}

.hero h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--rust-bright);
  text-shadow: 0 0 32px rgba(255,106,61,0.4);
}

.subtitle {
  font-family: 'Inter', sans-serif;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 400;
  color: var(--paper);
  max-width: 760px;
  margin-bottom: 32px;
  line-height: 1.55;
}
.subtitle strong { color: var(--paper-bright); font-weight: 700; }
.subtitle em { color: var(--rust-bright); font-style: italic; }

/* TIMELINE BAR — distinctive feature of this template */
.timeline-bar {
  background: var(--void);
  padding: 0;
  position: relative;
  border-top: 1px solid var(--line);
  border-bottom: 4px solid var(--rust);
}

.timeline-track {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  position: relative;
}

.timeline-track::before {
  content: '';
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 50%;
  height: 1px;
  background: var(--steel);
  z-index: 0;
}

.timeline-step {
  padding: 22px 16px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.timeline-step::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--steel-light);
  border: 2px solid var(--void);
  z-index: -1;
}

.timeline-step.era-1996::before { background: var(--era-1996); box-shadow: 0 0 12px var(--era-1996); }
.timeline-step.era-2006::before { background: var(--era-2006); box-shadow: 0 0 12px var(--era-2006); }
.timeline-step.era-2016::before { background: var(--era-2016); box-shadow: 0 0 12px var(--era-2016); }
.timeline-step.era-2026::before { background: var(--era-2026); box-shadow: 0 0 12px var(--era-2026); }

.timeline-year {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--paper-bright);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.timeline-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--steel-light);
}

/* COMPARE — 4 columns */
.compare-wrap {
  background: var(--paper);
  padding: 64px 32px 40px;
}

.compare-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 200px;
  background: linear-gradient(180deg, var(--paper-warm) 0%, transparent 100%);
  pointer-events: none;
}

.compare {
  max-width: 1480px;
  margin: 0 auto;
  position: relative;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  position: relative;
}

.bike {
  background: var(--paper-bright);
  border: 1px solid var(--line-dark-strong);
  padding: 28px 24px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.bike + .bike { border-left: none; }

/* Era-tinted top accent */
.bike::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  height: 4px;
}
.bike.era-1996::before { background: var(--era-1996); }
.bike.era-2006::before { background: var(--era-2006); }
.bike.era-2016::before { background: var(--era-2016); }
.bike.era-2026::before { background: var(--era-2026); }

/* Corner brackets only on the outer two cards */
.bike.first::after, .bike.last::after {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
  bottom: -1px;
}
.bike.first::after { left: -1px; border-right: none; border-top: none; }
.bike.last::after { right: -1px; border-left: none; border-top: none; }

.bike-era-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  padding: 5px 10px;
  margin-bottom: 14px;
  font-weight: 700;
  width: fit-content;
}
.bike.era-1996 .bike-era-tag { background: var(--era-1996); color: var(--paper-bright); }
.bike.era-2006 .bike-era-tag { background: var(--era-2006); color: var(--paper-bright); }
.bike.era-2016 .bike-era-tag { background: var(--era-2016); color: var(--paper-bright); }
.bike.era-2026 .bike-era-tag { background: var(--era-2026); color: var(--paper-bright); }

.bike-name {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  text-transform: uppercase;
  color: var(--ink);
}

.bike-year {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--steel-light);
  margin-bottom: 22px;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.3;
}

/* Bike art slot — narrower for 4-column layout */
.bike-art {
  width: 100%;
  height: 140px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(217,78,31,0.06) 0%, transparent 70%),
    linear-gradient(180deg, var(--gunmetal) 0%, var(--void) 100%);
  border: 1px solid var(--ink);
  margin-bottom: 22px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.bike-art::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 24px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

.bike-art svg { width: 92%; max-width: 280px; z-index: 2; }

/* Specs — slightly more compact for 4-column */
.specs { display: flex; flex-direction: column; }

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--line-dark);
  gap: 8px;
}
.spec-row:last-child { border-bottom: none; }

.spec-row.highlight {
  background: rgba(217,78,31,0.06);
  margin: 0 -10px;
  padding-left: 10px;
  padding-right: 10px;
}

.spec-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--steel-light);
  flex-shrink: 0;
  font-weight: 500;
}

.spec-value {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 19px;
  text-align: right;
  letter-spacing: 0;
  color: var(--ink);
}

.spec-value .unit {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--steel-light);
  font-weight: 400;
  margin-left: 3px;
  text-transform: lowercase;
}

/* Rider aids — compact */
.aids-section {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}

.aids-heading {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink);
  margin-bottom: 12px;
  font-weight: 700;
}

.aids-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }

.aids-list li {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.35;
}

.aids-list .check {
  color: var(--rust);
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  flex-shrink: 0;
}

.aids-list .cross {
  color: var(--steel-light);
  opacity: 0.6;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  flex-shrink: 0;
}

.aids-list li.absent {
  color: var(--steel-light);
  opacity: 0.6;
}

/* DELTA SECTION — replaces verdict on this template */
.delta-section {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(217,78,31,0.15) 0%, transparent 55%),
    linear-gradient(180deg, var(--pitch) 0%, var(--void) 100%);
  padding: 80px 32px;
  position: relative;
  overflow: hidden;
}

.delta-section::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0, transparent 14px, rgba(200,200,200,0.05) 14px, rgba(200,200,200,0.05) 15px);
  pointer-events: none;
}

.delta-inner { max-width: 1480px; margin: 0 auto; position: relative; z-index: 2; }

.delta-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 20px;
}

.delta-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rust-bright);
  margin-bottom: 8px;
  font-weight: 700;
}

.delta-title {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--paper-bright);
  letter-spacing: -0.01em;
  line-height: 1;
}
.delta-title em { font-style: italic; font-weight: 500; color: var(--rust-bright); }

.delta-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--chrome);
}

.delta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1px;
  background: var(--line-strong);
  border: 1px solid var(--line-strong);
}

.delta-cell {
  background: var(--pitch);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.delta-cell-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--chrome);
}

.delta-cell-value {
  font-family: 'Oswald', sans-serif;
  font-size: 44px;
  font-weight: 700;
  color: var(--paper-bright);
  line-height: 1;
  letter-spacing: -0.01em;
}
.delta-cell-value .unit-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--chrome);
  margin-left: 6px;
  text-transform: lowercase;
}
.delta-cell-value.up { color: var(--rust-bright); }
.delta-cell-value.flat { color: var(--chrome); }

.delta-cell-note {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--paper);
  line-height: 1.55;
}

/* SOURCES STRIP */
.sources {
  background: var(--paper-warm);
  border-top: 1px solid var(--line-dark-strong);
  border-bottom: 1px solid var(--line-dark-strong);
  padding: 48px 32px;
}

.sources-inner { max-width: 1480px; margin: 0 auto; }

.sources-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--rust);
  font-weight: 700;
  margin-bottom: 8px;
}

.sources-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.sources-sub {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--steel-light);
  margin-bottom: 24px;
  max-width: 720px;
  line-height: 1.55;
}

.sources-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

.source-item {
  background: var(--paper-bright);
  border: 1px solid var(--line-dark-strong);
  padding: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--ink);
}

.source-item strong {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--ink);
  margin-bottom: 4px;
  font-weight: 600;
  text-transform: uppercase;
}

.source-item span {
  color: var(--steel-light);
  font-size: 11px;
  letter-spacing: 0.05em;
}

/* FOOTER */
.foot {
  background: var(--void);
  color: var(--chrome);
  padding: 64px 32px 28px;
  border-top: 4px solid var(--rust);
}
.foot-inner { max-width: 1480px; margin: 0 auto; }
.foot-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 40px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--line);
}
.foot-brand img { height: 72px; margin-bottom: 16px; }
.foot-blurb { max-width: 380px; font-size: 14px; line-height: 1.65; color: var(--chrome); }
.foot-links { display: flex; gap: 56px; flex-wrap: wrap; }
.foot-col h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rust-bright);
  margin-bottom: 14px;
  font-weight: 700;
}
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot-col a { color: var(--paper); text-decoration: none; font-size: 14px; transition: color 0.2s; }
.foot-col a:hover { color: var(--rust-bright); }
.foot-bot {
  padding-top: 28px;
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--steel);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  flex-wrap: wrap;
  gap: 12px;
}

/* Responsive: 4 cols → 2 cols → 1 col */
@media (max-width: 1100px) {
  .compare-grid { grid-template-columns: repeat(2, 1fr); }
  .bike { border-left: 1px solid var(--line-dark-strong); }
  .bike + .bike { border-left: 1px solid var(--line-dark-strong); }
  .bike:nth-child(2) { border-left: none; }
  .bike:nth-child(3) { border-top: none; }
  .bike:nth-child(4) { border-top: none; border-left: none; }
}

@media (max-width: 820px) {
  /* Nav text links and hamburger swap point — earlier than layout reflow because
     the desktop nav (5 links + 4 social icons + logo) is wide */
  .nav a:not(.cta) { display: none; }
  .nav-toggle { display: inline-flex !important; }
}

@media (max-width: 700px) {
  .masthead-inner { padding: 14px 20px; }
  .nav { gap: 16px; }
  .brand-logo img { height: 44px; }
  .hero { padding: 56px 20px 40px; }
  .compare-wrap { padding: 48px 20px 24px; }
  .compare-grid { grid-template-columns: 1fr; }
  .bike { border-left: 1px solid var(--line-dark-strong); border-top: none; }
  .bike:first-child { border-top: 1px solid var(--line-dark-strong); }
  .timeline-track { grid-template-columns: repeat(2, 1fr); }
  .timeline-track::before { display: none; }
  .delta-section, .sources { padding: 48px 20px; }
  .foot { padding: 48px 20px 24px; }
}

/* Animations */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.bike, .delta-cell, .timeline-step {
  animation: fadeUp 0.6s ease-out backwards;
}
.bike:nth-child(1), .timeline-step:nth-child(1) { animation-delay: 0.1s; }
.bike:nth-child(2), .timeline-step:nth-child(2) { animation-delay: 0.2s; }
.bike:nth-child(3), .timeline-step:nth-child(3) { animation-delay: 0.3s; }
.bike:nth-child(4), .timeline-step:nth-child(4) { animation-delay: 0.4s; }

/* === RR v30 header refactor === */
/* Override original .masthead-inner / .nav layout for the v30 3-zone header.
   Mirrors RossDrives: logo left, primary nav centered, locale + Install app right. */
.masthead-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 16px 32px;
}
.masthead-left { flex: 0 0 auto; display: flex; align-items: center; }
.masthead-center {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.masthead-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The text-link nav inside .masthead-center */
.masthead-center .nav {
  display: flex;
  gap: 28px;
  align-items: center;
}
.masthead-center .nav a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--paper, #f5f5f5);
  font-weight: 500;
  transition: color 0.2s;
}
.masthead-center .nav a:hover { color: var(--rust-bright, #ff6b3d); }

/* Right-side socials cluster */
.masthead-right .social-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Install app button */
.install-app-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: transparent;
  border: 1px solid #2a2a2a;
  border-radius: 4px;
  color: var(--paper, #f5f5f5);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.install-app-btn:hover { border-color: #d94e1f; color: #fff; background: #1a1a1a; }
.install-app-btn svg { width: 14px; height: 14px; display: block; }

/* Tighten locale toggle margin in new layout (override earlier margin-left:12px) */
.masthead-right .locale-toggle { margin-left: 0; }

/* YouTube Subscribe button — styled like the YouTube play badge */
.youtube-subscribe-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 8px;
  background: #ff0000;
  border: 1px solid #ff0000;
  border-radius: 4px;
  color: #fff;
  font-family: 'Roboto', 'Oswald', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: none;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  white-space: nowrap;
  line-height: 1;
}
.youtube-subscribe-btn:hover { background: #cc0000; border-color: #cc0000; color: #fff; transform: translateY(-1px); }
.youtube-subscribe-btn:active { transform: translateY(0); }
/* The YouTube play badge: white rounded rectangle with red play triangle */
.youtube-subscribe-btn .yt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 20px;
  background: #fff;
  border-radius: 4px;
  flex-shrink: 0;
}
.youtube-subscribe-btn .yt-badge svg {
  width: 10px;
  height: 10px;
  fill: #ff0000;
  display: block;
}

/* Mobile: collapse the desktop center + right zones, hamburger handles it */
@media (max-width: 900px) {
  .masthead-center { display: none; }
  .masthead-right .social-cluster { display: none; }
  .masthead-right .install-app-btn { display: none; }
  .masthead-right .youtube-subscribe-btn { display: none; }
  .masthead-right .locale-toggle:not(.locale-toggle-mobile) { display: none; }
}

/* Mobile panel: Install app button row */
.nav-mobile-panel .install-app-btn {
  margin-top: 12px;
  justify-content: center;
}
.nav-mobile-panel .youtube-subscribe-btn {
  margin-top: 16px;
  justify-content: center;
  font-size: 13px;
  padding: 12px 16px;
}

/* MY2026 filter pill (shared across cat pages + categories index) */
.my2026-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.my2026-pill {
  background: transparent;
  border: 1px solid #2a2a2a;
  color: #888;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
  appearance: none;
  -webkit-appearance: none;
}
.my2026-pill:hover { color: #fff; border-color: #555; }
.my2026-pill.is-active {
  background: var(--cat-colour, #d94e1f);
  border-color: var(--cat-colour, #d94e1f);
  color: #fff;
}
.my2026-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 1px;
  color: #666;
  margin-left: 6px;
}
/* When filter active, hide non-MY2026 cards on cat pages */
body.my2026-only .cat-bike-card[data-my2026="false"] { display: none; }
body.my2026-only .home-cat-card[data-my2026-empty="true"] { display: none; }

/* Related bikes section on bike pages */
.related-section {
  background: #0d0d0d;
  padding: 48px 24px 56px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.related-inner { max-width: 1080px; margin: 0 auto; }
.related-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #d94e1f;
  margin-bottom: 8px;
}
.related-title {
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--paper, #f5f5f5);
  margin: 0 0 24px;
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.related-card {
  display: block;
  text-decoration: none;
  background: #161616;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.related-card:hover { border-color: #d94e1f; transform: translateY(-2px); }
.related-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16/10;
  object-fit: cover;
  background: #050505;
}
.related-meta { padding: 12px 14px 14px; }
.related-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 4px;
}
.related-name {
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--paper, #f5f5f5);
  line-height: 1.2;
}

/* YouTube review section on bike pages */
.yt-review-section {
  background: #0d0d0d;
  padding: 48px 24px 56px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.yt-review-inner { max-width: 1080px; margin: 0 auto; }
.yt-review-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ff0000;
  margin-bottom: 8px;
}
.yt-review-title {
  font-family: 'Oswald', sans-serif;
  font-size: 28px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--paper, #f5f5f5);
  margin: 0 0 24px;
}
.yt-review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.yt-review-card {
  display: block;
  text-decoration: none;
  background: #161616;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.2s, transform 0.2s;
}
.yt-review-card:hover { border-color: #ff0000; transform: translateY(-2px); }
.yt-review-thumb {
  position: relative;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
}
.yt-review-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.yt-review-thumb .yt-play-overlay {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 44px;
  background: #ff0000;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.92;
  transition: transform 0.2s, opacity 0.2s;
}
.yt-review-card:hover .yt-play-overlay {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1.05);
}
.yt-play-overlay svg {
  width: 22px; height: 22px;
  fill: #fff;
  margin-left: 2px;
}
.yt-review-meta {
  padding: 14px 16px 16px;
}
.yt-review-vidtitle {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--paper, #f5f5f5);
  margin: 0 0 6px;
}
.yt-review-byline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #888;
}

/* Hero bike photo (auto-injected; falls back to Coming Soon SVG on error) */
.hero-bike-photo {
  display: block;
  max-width: 720px;
  width: 100%;
  height: auto;
  aspect-ratio: 16/10;
  object-fit: cover;
  margin: 24px auto 8px;
  background: #050505;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  cursor: zoom-in;
}
/* Era card photo — small thumbnail at top of each <article class="bike">.
   Auto-hides via onerror if file missing. */
.era-bike-photo {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16/10;
  object-fit: contain;
  background: #050505;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.06);
  margin: 12px 0 14px;
  cursor: zoom-in;
}
/* Lightbox overlay (used by both hero + era photos) */
.rr-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  cursor: zoom-out;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.18s ease-out;
}
.rr-lightbox.open { opacity: 1; }
.rr-lightbox img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 20px 80px rgba(0,0,0,0.6);
}
.rr-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  cursor: pointer;
  font: 20px/1 system-ui;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rr-lightbox-close:hover { background: rgba(255,255,255,0.1); }
.hero-photo-credit {
  display: block;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 1px;
  color: #666;
  margin: 4px 0 0;
  text-transform: uppercase;
}
@media (max-width: 700px) {
  .hero-bike-photo {
    max-width: 100%;
    margin: 16px 0 6px;
    aspect-ratio: 16/10;
    border-radius: 4px;
  }
  .hero-photo-credit { font-size: 9px; }
}

/* Mobile slide-out panel — hidden by default everywhere; .open class shows it */
.nav-mobile-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 280px;
  max-width: 80vw;
  background: #0a0a0a;
  border-left: 1px solid #1f1f1f;
  z-index: 999;
  transform: translateX(100%);
  transition: transform 0.25s ease-out;
  display: flex;
  flex-direction: column;
  padding: 72px 24px 24px;
  overflow-y: auto;
}
.nav-mobile-panel.open { transform: translateX(0); }
.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.nav-backdrop.open { opacity: 1; visibility: visible; }
/* === /RR v30 header refactor === */


/* === Masthead opacity / stacking fix v45 ===
   iOS Safari standalone PWAs: status bar overlays the page. Add safe-area
   padding so masthead extends behind the status bar with its dark background. */
.masthead {
  isolation: isolate !important;
  background: #0a0a0a !important;
  z-index: 200 !important;
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
}
/* Belt-and-braces: the masthead-inner also respects safe-area when in
   standalone mode (some iOS versions don't always apply parent padding) */
@media (display-mode: standalone) {
  .masthead-inner {
    padding-top: 8px !important;
  }
}
body::before { z-index: 50 !important; }
/* Also fill the iOS status-bar / overscroll area at the very top with the
   masthead colour to cover any gap when scrolling fast. */
html {
  background: #0a0a0a !important;
}


/* === RR v46 masthead: stacked three-row layout (RossDrives-style) === */
/* On desktop (>900px), restructure the masthead into three centered rows:
   1. Logo (centred)
   2. Nav links (centred)
   3. Actions: install + social + locale (centred together)
   
   On mobile (≤900px), the v30/v45 hamburger behaviour stays — left/right collapse,
   nav-toggle becomes the entry to the slide-out panel. */
@media (min-width: 901px) {
  .masthead-inner {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    padding: 18px 32px 16px !important;
  }
  .masthead-left {
    flex: 0 0 auto !important;
    justify-content: center;
  }
  .masthead-center {
    flex: 0 0 auto !important;
    width: 100%;
    justify-content: center !important;
  }
  .masthead-center .nav {
    gap: 36px !important;
  }
  .masthead-center .nav a {
    font-size: 13px !important;
    letter-spacing: 0.18em !important;
    font-weight: 600 !important;
  }
  .masthead-right {
    flex: 0 0 auto !important;
    width: auto;
    gap: 14px !important;
    justify-content: center !important;
  }
  /* Visually balance the brand logo to act as the centerpiece */
  .brand-logo img {
    height: 64px !important;
  }
  /* Hamburger button is desktop-hidden anyway */
  .nav-toggle { display: none !important; }
}

/* On larger screens give the rows a bit more breathing room */
@media (min-width: 1200px) {
  .masthead-inner {
    gap: 16px !important;
    padding: 22px 32px 18px !important;
  }
  .masthead-center .nav { gap: 44px !important; }
  .brand-logo img { height: 72px !important; }
}
/* === /RR v46 masthead === */

/* === RR v47 — Change region link, injected next to .locale-toggle === */
.locale-change-region {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 4px 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
  background: transparent;
  border: 1px solid #333;
  border-radius: 999px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  white-space: nowrap;
}
.locale-change-region:hover, .locale-change-region:focus {
  color: #f5f2ec;
  border-color: #d94e1f;
  background: rgba(217, 78, 31, 0.08);
}
@media (max-width: 480px) {
  .locale-change-region {
    font-size: 9px;
    padding: 3px 6px;
    margin-left: 4px;
  }
}
/* === /RR v47 Change region === */

/* ============================================================
   Locale picker (dropdown)
   Replaces the old pill-row .locale-toggle. Scales to many locales.
   ============================================================ */

.locale-picker {
  position: relative;
  display: inline-flex;
  margin-left: 12px;
}
.locale-picker-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-family: 'Oswald', sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #f4f4f4;
  background: rgba(20, 20, 20, 0.7);
  border: 1px solid #2a2a2a;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
.locale-picker-btn:hover,
.locale-picker-btn:focus-visible {
  border-color: #d94e1f;
  background: rgba(30, 30, 30, 0.85);
  outline: none;
}
.locale-picker-btn[aria-expanded="true"] {
  border-color: #d94e1f;
  background: rgba(30, 30, 30, 0.85);
}
.locale-picker-btn .locale-flag-svg {
  width: 22px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
}
.locale-picker-btn .locale-chev {
  width: 10px;
  height: 6px;
  margin-left: 2px;
  transition: transform 0.2s ease;
  opacity: 0.7;
}
.locale-picker-btn[aria-expanded="true"] .locale-chev {
  transform: rotate(180deg);
}

.locale-picker-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 220px;
  padding: 6px;
  background: #141414;
  border: 1px solid #2a2a2a;
  border-radius: 10px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.65);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.locale-picker-menu[hidden] {
  display: none;
}
.locale-picker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #ccc;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
  white-space: nowrap;
}
.locale-picker-item:hover,
.locale-picker-item:focus-visible {
  background: rgba(217, 78, 31, 0.12);
  color: #fff;
  outline: none;
}
.locale-picker-item .locale-flag-svg {
  width: 26px;
  height: 17px;
  border-radius: 2px;
  flex-shrink: 0;
}
.locale-picker-item.active {
  background: rgba(217, 78, 31, 0.18);
  color: #fff;
}
.locale-picker-item.active::after {
  content: "✓";
  margin-left: auto;
  color: #d94e1f;
  font-weight: 700;
}

/* Mobile: locale picker stays in the right side of the masthead.
   We don't need a separate mobile variant — the dropdown handles
   any locale count without needing a stretched pill row. */
@media (max-width: 700px) {
  .locale-picker { margin-left: 8px; }
  .locale-picker-btn .locale-text {
    /* Keep the label visible on mobile but tighter */
    font-size: 12px;
    letter-spacing: 0.1em;
  }
  .locale-picker-menu {
    right: -4px;
  }
}

/* Hide the OLD pill-row .locale-toggle and the mobile variant —
   pages still containing this markup get cleanly hidden. The sweep
   replaces them with .locale-picker, but this is a defence-in-depth. */
.locale-toggle:not(.locale-picker),
.locale-toggle-mobile {
  display: none !important;
}

/* ============================================================
   German flag as faint background watermark on all DE pages.
   Applied via body.de-locale class on every page under /de/.
   The dark overlay keeps text readable; the flag is a presence,
   not a pattern — visible at the edges, fades behind content.
   ============================================================ */
body.de-locale {
  background-image:
    linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.90)),
    url('/assets/hero-flag-de.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Same pattern for UK and US locales — for visual consistency
   between locales, the home country's flag should always be
   present at low opacity. */
body.uk-locale {
  background-image:
    linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.90)),
    url('/assets/hero-flag-uk.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.us-locale {
  background-image:
    linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.90)),
    url('/assets/hero-flag-us.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================================
   Additional locale flag backgrounds (FR, PT, ES, NO, DK).
   Each /xx/ page gets a body.xx-locale class so its national
   flag becomes a faint background watermark behind content.
   ============================================================ */
body.fr-locale {
  background-image:
    linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.90)),
    url('/assets/hero-flag-fr.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.pt-locale {
  background-image:
    linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.90)),
    url('/assets/hero-flag-pt.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.es-locale {
  background-image:
    linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.90)),
    url('/assets/hero-flag-es.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.no-locale {
  background-image:
    linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.90)),
    url('/assets/hero-flag-no.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
body.dk-locale {
  background-image:
    linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.90)),
    url('/assets/hero-flag-dk.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ============================================================
   Mobile tap-target sizing — meet WCAG 2.5.5 (44x44 minimum).
   Target locale-picker-btn and social icons specifically since
   their default sizing is ~30px on mobile.
   ============================================================ */
@media (max-width: 700px) {
  .locale-picker-btn {
    min-height: 44px;
    padding: 9px 14px;
  }
  .social-icon,
  .nav .social-icon,
  .nav-mobile-panel .social-icon {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* AI banner copy: 12px → 13px so it's readable on phones */
  .ai-banner {
    font-size: 13px !important;
    line-height: 1.5;
  }
}

/* Body locale backgrounds for the 7 new locales (May 2026) */
body.it-locale {
  background-image: linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.90)), url('/assets/hero-flag-it.jpg');
  background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat;
}
body.ja-locale {
  background-image: linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.90)), url('/assets/hero-flag-ja.jpg');
  background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat;
}
body.th-locale {
  background-image: linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.90)), url('/assets/hero-flag-th.jpg');
  background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat;
}
body.id-locale {
  background-image: linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.90)), url('/assets/hero-flag-id.jpg');
  background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat;
}
body.vi-locale {
  background-image: linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.90)), url('/assets/hero-flag-vi.jpg');
  background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat;
}
body.br-locale {
  background-image: linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.90)), url('/assets/hero-flag-br.jpg');
  background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat;
}
body.au-locale {
  background-image: linear-gradient(rgba(10,10,10,0.84), rgba(10,10,10,0.90)), url('/assets/hero-flag-au.jpg');
  background-attachment: fixed; background-size: cover; background-position: center; background-repeat: no-repeat;
}


/* === RR v107 — Hide the locale picker on every page (per-page country
   toggle is removed; users go via the home picker instead). The
   .brand-logo (RR mark) already links to /?picker=1, so that's the
   single way to switch country. */
.locale-picker { display: none !important; }


/* === RR v103 — Single faded flag inside the hero block per locale. ===
   One flag per page, faded, behind the text, scoped to the hero block
   (.hero / .home-hero / .gp-hero / etc.). Body background stays plain
   dark. The locale-flag-strip element is removed.

   We override the hero block's background to a dark linear-gradient
   over the locale flag image. Per-locale class on <body> picks the
   correct flag. */
.locale-flag-strip { display: none !important; }

/* Hero block renders the faded country flag, scoped to itself.
   Also enforce a minimum vertical size so the flag has room to read on
   pages whose hero element was previously bare (e.g. /xx/categories
   with .flag-banner that had no padding). */
body[class*="-locale"] .hero,
body[class*="-locale"] .home-hero,
body[class*="-locale"] .gp-hero,
body[class*="-locale"] .sh-hero,
body[class*="-locale"] .cmp-hero,
body[class*="-locale"] .tt-hero,
body[class*="-locale"] .flag-banner,
body[class*="-locale"] .category-hero,
body[class*="-locale"] .cat-hero,
body[class*="-locale"] .locale-hero,
body[class*="-locale"] .featured-hero,
body[class*="-locale"] .about-hero {
  position: relative;
  background-color: #0a0a0a !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  min-height: 240px;
  padding: 56px 24px;
}
@media (max-width: 720px) {
  body[class*="-locale"] .hero,
  body[class*="-locale"] .home-hero,
  body[class*="-locale"] .gp-hero,
  body[class*="-locale"] .sh-hero,
  body[class*="-locale"] .cmp-hero,
  body[class*="-locale"] .tt-hero,
  body[class*="-locale"] .flag-banner,
  body[class*="-locale"] .category-hero,
  body[class*="-locale"] .cat-hero,
  body[class*="-locale"] .locale-hero,
  body[class*="-locale"] .featured-hero,
  body[class*="-locale"] .about-hero {
    min-height: 200px;
    padding: 40px 18px;
  }
}

/* Per-locale faded flag. Gradient sits over the flag image so text reads. */
body.uk-locale .hero, body.uk-locale .home-hero, body.uk-locale .gp-hero,
body.uk-locale .sh-hero, body.uk-locale .cmp-hero, body.uk-locale .tt-hero,
body.uk-locale .flag-banner, body.uk-locale .category-hero, body.uk-locale .cat-hero,
body.uk-locale .locale-hero, body.uk-locale .featured-hero, body.uk-locale .about-hero {
  background-image: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.92)), url('/assets/hero-flag-uk.jpg') !important;
}
body.us-locale .hero, body.us-locale .home-hero, body.us-locale .gp-hero,
body.us-locale .sh-hero, body.us-locale .cmp-hero, body.us-locale .tt-hero,
body.us-locale .flag-banner, body.us-locale .category-hero, body.us-locale .cat-hero,
body.us-locale .locale-hero, body.us-locale .featured-hero, body.us-locale .about-hero {
  background-image: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.92)), url('/assets/hero-flag-us.jpg') !important;
}
body.au-locale .hero, body.au-locale .home-hero, body.au-locale .gp-hero,
body.au-locale .sh-hero, body.au-locale .cmp-hero, body.au-locale .tt-hero,
body.au-locale .flag-banner, body.au-locale .category-hero, body.au-locale .cat-hero,
body.au-locale .locale-hero, body.au-locale .featured-hero, body.au-locale .about-hero {
  background-image: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.92)), url('/assets/hero-flag-au.jpg') !important;
}
body.de-locale .hero, body.de-locale .home-hero, body.de-locale .gp-hero,
body.de-locale .sh-hero, body.de-locale .cmp-hero, body.de-locale .tt-hero,
body.de-locale .flag-banner, body.de-locale .category-hero, body.de-locale .cat-hero,
body.de-locale .locale-hero, body.de-locale .featured-hero, body.de-locale .about-hero {
  background-image: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.92)), url('/assets/hero-flag-de.jpg') !important;
}
body.fr-locale .hero, body.fr-locale .home-hero, body.fr-locale .gp-hero,
body.fr-locale .sh-hero, body.fr-locale .cmp-hero, body.fr-locale .tt-hero,
body.fr-locale .flag-banner, body.fr-locale .category-hero, body.fr-locale .cat-hero,
body.fr-locale .locale-hero, body.fr-locale .featured-hero, body.fr-locale .about-hero {
  background-image: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.92)), url('/assets/hero-flag-fr.jpg') !important;
}
body.it-locale .hero, body.it-locale .home-hero, body.it-locale .gp-hero,
body.it-locale .sh-hero, body.it-locale .cmp-hero, body.it-locale .tt-hero,
body.it-locale .flag-banner, body.it-locale .category-hero, body.it-locale .cat-hero,
body.it-locale .locale-hero, body.it-locale .featured-hero, body.it-locale .about-hero {
  background-image: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.92)), url('/assets/hero-flag-it.jpg') !important;
}
body.es-locale .hero, body.es-locale .home-hero, body.es-locale .gp-hero,
body.es-locale .sh-hero, body.es-locale .cmp-hero, body.es-locale .tt-hero,
body.es-locale .flag-banner, body.es-locale .category-hero, body.es-locale .cat-hero,
body.es-locale .locale-hero, body.es-locale .featured-hero, body.es-locale .about-hero {
  background-image: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.92)), url('/assets/hero-flag-es.jpg') !important;
}
body.pt-locale .hero, body.pt-locale .home-hero, body.pt-locale .gp-hero,
body.pt-locale .sh-hero, body.pt-locale .cmp-hero, body.pt-locale .tt-hero,
body.pt-locale .flag-banner, body.pt-locale .category-hero, body.pt-locale .cat-hero,
body.pt-locale .locale-hero, body.pt-locale .featured-hero, body.pt-locale .about-hero {
  background-image: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.92)), url('/assets/hero-flag-pt.jpg') !important;
}
body.br-locale .hero, body.br-locale .home-hero, body.br-locale .gp-hero,
body.br-locale .sh-hero, body.br-locale .cmp-hero, body.br-locale .tt-hero,
body.br-locale .flag-banner, body.br-locale .category-hero, body.br-locale .cat-hero,
body.br-locale .locale-hero, body.br-locale .featured-hero, body.br-locale .about-hero {
  background-image: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.92)), url('/assets/hero-flag-br.jpg') !important;
}
body.no-locale .hero, body.no-locale .home-hero, body.no-locale .gp-hero,
body.no-locale .sh-hero, body.no-locale .cmp-hero, body.no-locale .tt-hero,
body.no-locale .flag-banner, body.no-locale .category-hero, body.no-locale .cat-hero,
body.no-locale .locale-hero, body.no-locale .featured-hero, body.no-locale .about-hero {
  background-image: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.92)), url('/assets/hero-flag-no.jpg') !important;
}
body.dk-locale .hero, body.dk-locale .home-hero, body.dk-locale .gp-hero,
body.dk-locale .sh-hero, body.dk-locale .cmp-hero, body.dk-locale .tt-hero,
body.dk-locale .flag-banner, body.dk-locale .category-hero, body.dk-locale .cat-hero,
body.dk-locale .locale-hero, body.dk-locale .featured-hero, body.dk-locale .about-hero {
  background-image: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.92)), url('/assets/hero-flag-dk.jpg') !important;
}
body.ja-locale .hero, body.ja-locale .home-hero, body.ja-locale .gp-hero,
body.ja-locale .sh-hero, body.ja-locale .cmp-hero, body.ja-locale .tt-hero,
body.ja-locale .flag-banner, body.ja-locale .category-hero, body.ja-locale .cat-hero,
body.ja-locale .locale-hero, body.ja-locale .featured-hero, body.ja-locale .about-hero {
  background-image: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.92)), url('/assets/hero-flag-ja.jpg') !important;
}
body.th-locale .hero, body.th-locale .home-hero, body.th-locale .gp-hero,
body.th-locale .sh-hero, body.th-locale .cmp-hero, body.th-locale .tt-hero,
body.th-locale .flag-banner, body.th-locale .category-hero, body.th-locale .cat-hero,
body.th-locale .locale-hero, body.th-locale .featured-hero, body.th-locale .about-hero {
  background-image: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.92)), url('/assets/hero-flag-th.jpg') !important;
}
body.id-locale .hero, body.id-locale .home-hero, body.id-locale .gp-hero,
body.id-locale .sh-hero, body.id-locale .cmp-hero, body.id-locale .tt-hero,
body.id-locale .flag-banner, body.id-locale .category-hero, body.id-locale .cat-hero,
body.id-locale .locale-hero, body.id-locale .featured-hero, body.id-locale .about-hero {
  background-image: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.92)), url('/assets/hero-flag-id.jpg') !important;
}
body.vi-locale .hero, body.vi-locale .home-hero, body.vi-locale .gp-hero,
body.vi-locale .sh-hero, body.vi-locale .cmp-hero, body.vi-locale .tt-hero,
body.vi-locale .flag-banner, body.vi-locale .category-hero, body.vi-locale .cat-hero,
body.vi-locale .locale-hero, body.vi-locale .featured-hero, body.vi-locale .about-hero {
  background-image: linear-gradient(rgba(10,10,10,0.78), rgba(10,10,10,0.92)), url('/assets/hero-flag-vi.jpg') !important;
}

/* Body bg stays plain dark — the flag is in the hero only. */
body.uk-locale, body.us-locale, body.au-locale,
body.de-locale, body.fr-locale, body.it-locale,
body.es-locale, body.pt-locale, body.br-locale,
body.no-locale, body.dk-locale,
body.ja-locale, body.th-locale, body.id-locale, body.vi-locale {
  background-image: none !important;
  background-color: #0a0a0a !important;
}


/* === RR v112 — Site-wide footer note (translated per locale).
   Replaces the old picker error-box. Sits at the bottom of every
   locale page; dark band so it visually closes off the page. */
.rr-footer {
  background: var(--void);
  color: var(--paper);
  border-top: 4px solid var(--rust);
  padding: 28px 24px 36px;
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}
.rr-footer-inner {
  max-width: 720px;
  margin: 0 auto;
}
.rr-footer p { margin: 0; }
.rr-footer p + p { margin-top: 8px; }
.rr-footer-aside {
  color: #8a857d;
  font-style: italic;
  font-size: 13px;
}
.rr-footer a.rr-footer-email {
  color: var(--rust-bright);
  text-decoration: none;
  border-bottom: 1px solid rgba(217,78,31,0.4);
  padding-bottom: 1px;
}
.rr-footer a.rr-footer-email:hover { border-bottom-color: var(--rust-bright); }

/* Mobile hero: prevent over-zoom on flag backgrounds at narrow viewports */
@media (max-width: 720px) {
  .hero, .home-hero, .cmp-hero, .about-hero, .cat-hero {
    background-size: cover !important;
    background-position: center center !important;
    min-height: 240px !important;
  }
}