/* ==========================================================================
   FuelWatch design system — "new operating standard"
   BMW discipline + IBM clarity + Vercel precision, wrapped around the two
   brand anchors: the BitcountSingle display font and the FuelWatch logo.

   Rules of the system:
   - Flat-square geometry: 0px radius on buttons/inputs/chips/nav, 2px on
     cards. No pills, no glassmorphism, no blur, no decorative shadows —
     1px hairlines and surface change carry all depth.
   - One accent: refined orange #E04F00 on light surfaces; the original
     brand orange #FF5B04 is reserved for dark navy bands (where it has
     the better contrast). Body-size accent TEXT on light uses #BF4300
     (AA). No other hue enters the system.
   - BitcountSingle is concentrated: hero H1s and big stat numerals only,
     always weight 400 (bolding bleeds the dots). Inter carries all UI and
     body text (400–700, no 800). JetBrains Mono carries eyebrows,
     timestamps and data labels — the spec-sheet voice.
   - Band rotation: light canvas alternating with dark navy bands
     (`.band-dark`). Never two consecutive dark bands.

   `.band-dark` re-points the semantic custom properties, so shared
   components restyle themselves when placed inside a dark band — do not
   write per-component dark variants unless contrast genuinely demands it.
   ========================================================================== */

@font-face {
  font-family: 'BitcountSingle';
  src: url('/fonts/BitcountSingle-subset.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Accent (contrast-checked) ----
     #E04F00 on #FFF = 3.66:1 -> UI-component / large-text AA
     #BF4300 on #FFF = 5.2:1  -> normal-text AA (accent text + press)
     #FF5B04 on #1A2129 = 5.2:1 -> normal-text AA on dark bands       */
  --accent: #E04F00;
  --accent-press: #BF4300;
  --accent-text: #BF4300;
  --accent-on-dark: #FF5B04;
  --accent-on-dark-press: #FF7A33;

  /* ---- Light band ---- */
  --canvas: #F9FAFB;
  --surface-light: #FFFFFF;
  --ink: #16232A;
  --ink-secondary: #5A6A72;
  --hairline: rgba(22, 35, 42, 0.14);
  --hairline-strong: rgba(22, 35, 42, 0.30);

  /* ---- Dark band (BMW surface-dark family) ---- */
  --dark-canvas: #1A2129;
  --dark-surface: #242D36;
  --dark-surface-2: #2B3540;
  --dark-text: #FFFFFF;
  --dark-text-secondary: rgba(255, 255, 255, 0.64);
  --dark-hairline: rgba(255, 255, 255, 0.14);
  --dark-hairline-strong: rgba(255, 255, 255, 0.30);

  /* ---- Data colours (unchanged brand facts) ---- */
  --petrol: #2D8659;
  --diesel: #16232A;
  --diesel-on-dark: #94A3B8;
  --fresh: #2D8659;
  --recent: #f39c12;
  --stale: #e74c3c;

  /* ---- Geometry ---- */
  --radius-0: 0;
  --radius-card: 2px;

  /* ---- Type roles ---- */
  --font-display: 'BitcountSingle', 'Inter', sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-reading: 'IBM Plex Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ---- Semantic properties (re-pointed by .band-dark) ---- */
  --bg: var(--canvas);
  --surface: var(--surface-light);
  --text: var(--ink);
  --text-secondary: var(--ink-secondary);
  --border: var(--hairline);
  --border-strong: var(--hairline-strong);
  --primary: var(--accent);
  --primary-dark: var(--accent-press);
  --primary-text: var(--accent-text);
  --primary-muted: rgba(224, 79, 0, 0.08);
  --primary-light: rgba(224, 79, 0, 0.04);

  /* ---- Legacy aliases: unconverted inline rules degrade flat ---- */
  --radius: 2px;
  --btn-radius: 0px;
  --pill-radius: 0px;
  --pill-bg: var(--dark-canvas);
  --pill-shadow: none;
}

/* ==========================================================================
   Base
   ========================================================================== */

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
}

p,
.lead,
.prose,
.content,
.content-card,
.section-subtitle,
.faq-answer,
.quote-block {
  font-family: var(--font-reading);
}

h1, h2, h3 { line-height: 1.2; }

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

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

.container { max-width: 860px; margin: 0 auto; padding: 0 24px; }
.container-wide { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

.hidden { display: none !important; }

/* ==========================================================================
   Bands — the page rhythm. Dark bands re-point the semantic properties so
   every shared component below restyles itself with no extra rules.
   ========================================================================== */

.band-dark {
  background: var(--dark-canvas);
  color: var(--dark-text);
  --bg: var(--dark-canvas);
  --surface: var(--dark-surface);
  --text: var(--dark-text);
  --text-secondary: var(--dark-text-secondary);
  --border: var(--dark-hairline);
  --border-strong: var(--dark-hairline-strong);
  --primary: var(--accent-on-dark);
  --primary-dark: var(--accent-on-dark-press);
  --primary-text: var(--accent-on-dark);
  --primary-muted: rgba(255, 91, 4, 0.12);
  --primary-light: rgba(255, 91, 4, 0.06);
  --diesel: var(--diesel-on-dark);
}

/* ==========================================================================
   Typography roles
   ========================================================================== */

.bc { font-family: var(--font-display); font-weight: 400; }
.mono { font-family: var(--font-mono); }

/* Mono spec-sheet eyebrow — labels every section like an instrument panel */
.section-label,
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--primary-text);
  margin-bottom: 16px;
}

/* Section headings move from display font to disciplined Inter 600 —
   BitcountSingle is reserved for hero H1s and stat numerals. */
.section-title {
  font-family: var(--font-sans);
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  color: var(--text);
}

.section-subtitle {
  font-size: 18px;
  color: var(--text-secondary);
  max-width: 640px;
  line-height: 1.7;
}

.section { padding: 80px 0; }

/* Subpage hero (county / brand / SEO pages) — H1 keeps the brand font */
.page-hero { padding: 48px 0 32px; }
.page-hero h1,
.page-header h1 {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 40px);
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 12px;
  color: var(--text);
}
.page-hero .subtitle {
  font-size: 17px;
  color: var(--text-secondary);
  max-width: 640px;
  line-height: 1.6;
}

.breadcrumb {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
}
.breadcrumb a { color: var(--primary-text); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 6px; }

/* ==========================================================================
   Buttons — rectangular, engineered. Uppercase tracked labels.
   ========================================================================== */

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--primary);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  height: 48px;
  padding: 0 28px;
  border-radius: 0;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-primary:hover { background: var(--primary-dark); }
/* On dark bands the CTA fills with brand orange and carries ink type —
   white-on-#FF5B04 fails contrast; ink-on-orange is the BMW move. */
.band-dark .btn-primary { color: #16232A; }
.band-dark .btn-primary:hover { background: var(--accent-on-dark-press); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  height: 48px;
  padding: 0 28px;
  border-radius: 0;
  text-decoration: none;
  border: 1px solid var(--border-strong);
  cursor: pointer;
  transition: border-color 0.2s;
}
.btn-secondary:hover { border-color: var(--primary); }

/* White + outline-white pairs used on accent CTA panels */
.btn-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--accent-text);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  height: 48px;
  padding: 0 26px;
  border-radius: 0;
  transition: opacity 0.2s;
}
.btn-white:hover { opacity: 0.92; text-decoration: none; }

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  height: 48px;
  padding: 0 26px;
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: border-color 0.2s;
}
.btn-outline-white:hover { border-color: #fff; text-decoration: none; }

.btn-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid var(--hairline-strong);
  border-radius: 0;
  color: #3c4043;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.2s;
}
.btn-google:hover { border-color: var(--ink); }

/* Uppercase tracked text-link — the "LEARN MORE ›" idiom */
.bridge-link,
.text-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-text);
  text-decoration: none;
}
.bridge-link:hover,
.text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ==========================================================================
   Cards — white plates, 1px hairline, 2px corners, no shadow.
   ========================================================================== */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 32px;
}

.content-card,
.content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 36px 40px;
  margin-bottom: 24px;
}
.content-card h2, .content h2 { font-size: 22px; font-weight: 600; margin-bottom: 14px; color: var(--text); }
.content-card h3, .content h3 { font-size: 17px; font-weight: 600; margin-top: 24px; margin-bottom: 10px; color: var(--text); }
.content-card p, .content p { font-size: 15px; color: var(--text-secondary); margin-bottom: 14px; line-height: 1.7; }
.content-card a, .content a { color: var(--primary-text); text-decoration: none; }
.content-card a:hover, .content a:hover { text-decoration: underline; }

/* Accent CTA panel (county / brand / SEO pages) */
.cta-card {
  background: var(--accent);
  border-radius: var(--radius-card);
  padding: 36px 40px;
  text-align: center;
  margin-bottom: 24px;
}
.cta-card h2 { font-size: 22px; font-weight: 600; color: #fff; margin-bottom: 10px; }
.cta-card p { font-size: 15px; color: rgba(255, 255, 255, 0.88); margin-bottom: 24px; line-height: 1.6; }
.cta-buttons { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Stat cards — the numeral keeps BitcountSingle (weight 400, never bold) */
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stats-bar .stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  text-align: center;
}
.stats-bar .stat-num,
.crisis-stat .stat-num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  color: var(--primary-text);
  margin-bottom: 4px;
}
.stats-bar .stat-label { font-size: 14px; font-weight: 600; color: var(--text); margin-bottom: 2px; }
.stats-bar .stat-sub { font-size: 12px; color: var(--text-secondary); }

.crisis-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 32px; }
.crisis-stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
}
.crisis-stat .stat-desc { font-size: 14px; color: var(--text-secondary); }

.insight-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.insight-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
}
.insight-card h4 { font-size: 17px; font-weight: 600; margin-bottom: 8px; color: var(--text); }
.insight-card p { font-size: 15px; color: var(--text-secondary); line-height: 1.6; }

.feature-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 40px;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.feature-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.feature-item h2,
.feature-item h4 { font-size: 16px; font-weight: 600; margin-bottom: 6px; }
.feature-item-icon { width: 44px; height: 44px; margin-bottom: 16px; display: block; }
.feature-item-icon svg { width: 44px; height: 44px; }
.feature-item p { font-size: 15px; color: var(--text-secondary); line-height: 1.6; }

.methodology-note {
  background: var(--primary-light);
  border: 1px solid var(--border);
  border-left: 2px solid var(--accent);
  border-radius: var(--radius-card);
  padding: 24px 28px;
  margin-top: 32px;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
}
.methodology-note strong { color: var(--text); }
.methodology-note a { color: var(--primary-text); text-decoration: none; font-weight: 600; }
.methodology-note a:hover { text-decoration: underline; }

/* ==========================================================================
   Chips — squared, mono-labelled
   ========================================================================== */

.county-links, .nav-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.county-link, .nav-pill {
  display: inline-block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}
.county-link:hover, .nav-pill:hover {
  border-color: var(--accent);
  color: var(--primary-text);
  text-decoration: none;
}

.stat-pill {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  padding: 10px 18px;
  border-radius: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.stat-pill .arrow-up { font-size: 16px; font-weight: 700; }
.stat-pill.danger .arrow-up { color: var(--stale); }
.stat-pill.warning .arrow-up { color: var(--recent); }

.fuel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.fuel-pill {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.fuel-pill span { color: var(--text-secondary); font-weight: 400; display: block; font-size: 13px; margin-top: 2px; }

/* ==========================================================================
   Tables — hairline-ruled, mono numerals
   ========================================================================== */

.data-table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
  margin-top: 32px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 500px; }
.data-table thead { background: transparent; color: var(--text-secondary); }
.data-table th {
  padding: 12px 16px;
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
}
.data-table td {
  padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 13px;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table .date-col { font-family: var(--font-sans); font-weight: 500; color: var(--text); }

.tax-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.tax-table th {
  text-align: left;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--text-secondary);
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.tax-table td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text); }
.tax-table tr:last-child td { border-bottom: none; }
.tax-table .row-label { font-weight: 500; }
.tax-table .row-bold td { font-weight: 700; }
.tax-table .row-total td { font-weight: 700; color: var(--primary-text); border-top: 2px solid var(--border-strong); }
.tax-table .row-section td { font-family: var(--font-mono); font-weight: 600; color: var(--text-secondary); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding-top: 16px; }
.tax-table td:nth-child(2), .tax-table td:nth-child(3),
.tax-table th:nth-child(2), .tax-table th:nth-child(3) {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 14px;
}

/* ==========================================================================
   FAQ — hairline rows, no card chrome
   ========================================================================== */

.faq-section { padding: 80px 0; }
.faq-list { max-width: 720px; margin: 0 auto; border-top: 1px solid var(--border); }
.faq-list .faq-item {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  margin-bottom: 0;
  overflow: hidden;
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 4px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
}
.faq-question:hover { color: var(--primary-text); }
.faq-arrow {
  font-size: 13px;
  color: var(--text-secondary);
  transition: transform 0.2s;
  flex-shrink: 0;
  margin-left: 16px;
}
.faq-item.open .faq-arrow { transform: rotate(180deg); }
.faq-answer { display: none; padding: 0 4px 20px; font-size: 15px; color: var(--text-secondary); line-height: 1.7; }
.faq-item.open .faq-answer { display: block; }

/* Static FAQ list variant (county / brand pages — plain h3 + p rows) */
.content-card .faq-item, .content .faq-item {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border: none;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: transparent;
}
.content-card .faq-item:last-child, .content .faq-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.content-card .faq-item h3, .content .faq-item h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; color: var(--text); }
.content-card .faq-item p, .content .faq-item p { font-size: 15px; color: var(--text-secondary); margin-bottom: 0; line-height: 1.6; }

/* ==========================================================================
   Editorial fragments
   ========================================================================== */

.quote-block {
  border-left: 2px solid var(--accent);
  padding-left: 20px;
  margin: 24px 0;
  font-size: 16px;
  color: var(--text-secondary);
  font-style: italic;
}
.quote-block cite {
  display: block;
  margin-top: 8px;
  font-style: normal;
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text);
}

.prose { max-width: 680px; }
.prose p { font-size: 17px; color: var(--text-secondary); line-height: 1.8; margin-bottom: 20px; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); }

.sep { width: 60px; height: 2px; background: var(--accent); border-radius: 0; margin: 16px auto; }

.attribution { font-size: 12px; color: var(--text-secondary); margin-top: 8px; opacity: 0.7; }

.auth-error { color: var(--stale); font-size: 14px; text-align: center; margin-top: 12px; }

/* Fade-in on scroll (IntersectionObserver adds .visible) */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   Press strip
   ========================================================================== */

.featured-on { text-align: center; padding: 16px 0 0; }
.featured-on-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 28px;
}
.featured-on-logos { display: flex; align-items: center; justify-content: center; gap: 36px; flex-wrap: wrap; }
.featured-on-logos a { display: flex; align-items: center; }
.featured-on-logos img {
  height: 27px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.5;
  transition: opacity 0.3s ease;
}
.featured-on-logos img:hover { opacity: 0.75; }
/* On dark bands: invert + screen-blend turns white-boxed logos into a
   uniform light greyscale strip on the navy. */
.band-dark .featured-on-logos img {
  filter: grayscale(100%) invert(1);
  mix-blend-mode: screen;
  opacity: 0.55;
}
.band-dark .featured-on-logos img:hover { opacity: 0.8; }

/* ==========================================================================
   App screenshots row (index + manifesto). The 8px radius is a documented
   exception to the flat rule — these are device-frame screenshots.
   ========================================================================== */

.hero-shots {
  display: flex;
  gap: 20px;
  justify-content: safe center;
  align-items: flex-start;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: visible;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  width: 100%;
  margin: 0;
  padding: 0 24px 40px;
}
.hero-shots::-webkit-scrollbar { display: none; }
.hero-shot {
  position: relative;
  display: block;
  text-decoration: none;
  color: inherit;
  flex: 0 0 auto;
  text-align: center;
  scroll-snap-align: center;
}
.hero-shot:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 8px; }
.hero-shot img { display: block; width: 260px; max-width: 100%; height: auto; border-radius: 8px; }
.hero-shot-label { margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.freshness-chip {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--dark-canvas);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
  pointer-events: none;
}

@media (max-width: 768px) {
  .hero-shot img { width: 220px; }
  .hero-shots { gap: 12px; padding: 0 12px 32px; }
  .freshness-chip { font-size: 9px; padding: 5px 8px; top: 10px; right: 10px; }
}

/* ==========================================================================
   Shared responsive
   ========================================================================== */

@media (max-width: 768px) {
  .section { padding: 60px 0; }
  .card { padding: 24px; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .insight-grid { grid-template-columns: 1fr; }
  .crisis-grid { grid-template-columns: 1fr; }
  .fuel-grid { grid-template-columns: 1fr; }
  .page-hero h1, .page-header h1 { font-size: 30px; }
}

@media (max-width: 480px) {
  .stats-bar { grid-template-columns: 1fr; }
  .feature-list { gap: 12px; }
  .content-card, .content { padding: 24px 20px; }
  .cta-card { padding: 28px 20px; }
}

/* ==========================================================================
   Mobile-first editorial family

   These structures are shared by Explore, its destination pages, the
   manifesto and the article preview. The default rules target a narrow
   viewport; larger layouts are layered on with min-width queries.
   ========================================================================== */

.editorial-page {
  padding-top: 56px;
  overflow: clip;
}

.editorial-shell {
  width: min(100%, 1180px);
  margin-inline: auto;
  padding-inline: 20px;
}

.editorial-hero {
  position: relative;
  min-height: 520px;
  display: grid;
  align-items: end;
  padding: 72px 0 36px;
  background: var(--dark-canvas);
  color: #fff;
  overflow: hidden;
}

.editorial-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

.editorial-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 34px;
}

.editorial-hero .eyebrow,
.editorial-hero .breadcrumb {
  color: var(--accent-on-dark);
}

.editorial-hero h1 {
  max-width: 920px;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(42px, 14vw, 72px);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: #fff;
  text-wrap: balance;
}

.editorial-hero .lead {
  max-width: 720px;
  margin-top: 22px;
  font-size: clamp(19px, 5vw, 24px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.74);
}

.editorial-visual {
  position: relative;
  min-height: 210px;
  display: grid;
  place-items: center;
  border: 1px solid var(--dark-hairline);
  background: rgba(255, 255, 255, 0.025);
  overflow: hidden;
}

.editorial-visual::before,
.editorial-visual::after {
  content: '';
  position: absolute;
  background: var(--accent-on-dark);
}

.editorial-visual::before {
  width: min(72%, 260px);
  height: 1px;
  transform: rotate(-24deg);
}

.editorial-visual::after {
  width: 12px;
  height: 12px;
  right: 18%;
  top: 28%;
}

.editorial-visual .editorial-icon {
  position: relative;
  z-index: 2;
  width: 92px;
  height: 92px;
  filter: brightness(0) invert(1);
}

.editorial-kicker {
  position: absolute;
  right: 16px;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .54);
}

.editorial-content {
  padding-block: 42px 18px;
}

.editorial-content > h2,
.editorial-content > h3,
.editorial-content > p,
.editorial-content > ul,
.editorial-content > ol,
.editorial-content > .tip-box,
.editorial-content > .note-box,
.editorial-content > .methodology-note,
.editorial-content > .faq-item {
  max-width: 760px;
  margin-inline: auto;
}

.editorial-content > h2 {
  margin-top: 54px;
  margin-bottom: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-family: var(--font-sans);
  font-size: clamp(26px, 8vw, 38px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.editorial-content > h2:first-child {
  margin-top: 0;
}

.editorial-content > h3 {
  margin-top: 34px;
  margin-bottom: 10px;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.2;
}

.editorial-content > p,
.editorial-content > ul,
.editorial-content > ol {
  margin-bottom: 20px;
  font-family: var(--font-reading);
  font-size: 17px;
  line-height: 1.72;
  color: var(--text-secondary);
}

.editorial-content > ul,
.editorial-content > ol {
  padding-left: 22px;
}

.editorial-content li + li {
  margin-top: 10px;
}

.editorial-content strong {
  color: var(--text);
}

.editorial-module-grid,
.editorial-preview-grid,
.explore-grid,
.manifesto-tile-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-block: 26px 38px;
}

.editorial-module,
.editorial-preview,
.manifesto-tile {
  min-width: 0;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--border);
}

.editorial-module .editorial-icon,
.editorial-preview .editorial-icon,
.explore-card .editorial-icon,
.manifesto-tile .editorial-icon {
  width: 42px;
  height: 42px;
  display: block;
  margin-bottom: 22px;
}

.editorial-module .module-index,
.editorial-preview .module-index,
.manifesto-tile .module-index {
  display: block;
  margin-bottom: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
}

.editorial-module h3,
.editorial-preview h3,
.manifesto-tile h3 {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 20px;
  line-height: 1.2;
}

.editorial-module p,
.editorial-preview p,
.manifesto-tile p {
  margin: 0;
  font-family: var(--font-reading);
  font-size: 16px;
  line-height: 1.62;
  color: var(--text-secondary);
}

.editorial-stat {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-display);
  font-size: clamp(36px, 11vw, 58px);
  line-height: 1;
  color: var(--accent-text);
}

.editorial-rail {
  display: flex;
  gap: 10px;
  width: 100vw;
  margin: 24px 0 36px calc(50% - 50vw);
  padding: 0 20px 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.editorial-rail > * {
  flex: 0 0 min(82vw, 340px);
  scroll-snap-align: start;
}

.explore-section {
  padding-block: 52px;
}

.explore-section + .explore-section {
  border-top: 1px solid var(--border);
}

.explore-section-head {
  display: grid;
  gap: 12px;
  margin-bottom: 26px;
}

.explore-section-head h2 {
  margin: 0;
  font-size: clamp(28px, 8vw, 44px);
  letter-spacing: -.035em;
}

.explore-section-head p {
  max-width: 650px;
  color: var(--text-secondary);
  font-size: 17px;
}

.explore-card {
  position: relative;
  min-height: 272px;
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}

.explore-card:hover {
  border-color: var(--accent);
  background: #fffaf7;
}

.explore-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.explore-card-index {
  position: absolute;
  top: 24px;
  right: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-secondary);
}

.explore-card h3 {
  margin: auto 0 10px;
  font-size: 21px;
  line-height: 1.15;
}

.explore-card p {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.explore-card-arrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-text);
}

/* The one conversion pattern. Existing `.cta-block` and `.cta-card`
   inherit it while pages are migrated to the semantic `.site-cta` name. */
.site-cta,
.cta-block.site-cta,
.cta-card.site-cta {
  width: min(calc(100% - 40px), 1180px);
  margin: 54px auto 0;
  padding: 42px 20px;
  background: var(--dark-canvas);
  border: 0;
  color: #fff;
  text-align: left;
}

.site-cta.site-cta > h2,
.site-cta .cta-drivers-intro h2 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-size: clamp(34px, 10vw, 58px);
  font-weight: 400;
  line-height: 1;
  color: #fff;
}

.site-cta.site-cta > p,
.site-cta .cta-drivers-intro p {
  max-width: 640px;
  margin: 0;
  font-family: var(--font-reading);
  font-size: 18px;
  line-height: 1.5;
  color: var(--dark-text-secondary);
}

.site-cta .cta-drivers-top {
  display: grid;
  gap: 30px;
}

.site-cta .cta-drivers-ticks {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--dark-hairline);
  list-style: none;
}

.site-cta .cta-drivers-ticks li {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  padding: 13px 0;
  border-bottom: 1px solid var(--dark-hairline);
  font-family: var(--font-reading);
  font-size: 16px;
  color: rgba(255,255,255,.82);
}

.site-cta .cta-drivers-ticks span {
  color: var(--accent-on-dark);
}

/* Actions — the two app-store badges only. Equal height, borderless. The web
   "Price Map" button was removed: the map already lives in the site nav, so
   the CTA drives app installs instead. */
.site-cta .cta-drivers-actions,
.site-cta .driver-actions {
  margin-top: 26px;
}

/* Stacked (mobile): match WIDTH. Side-by-side (desktop, in the media query
   below): match HEIGHT. Apple/Google proportions differ slightly; matching the
   shared dimension keeps the pair visually even. */
.site-cta.site-cta .store-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
}

.site-cta.site-cta .store-badges a {
  display: block;
  width: 100%;
  max-width: 190px;
  height: auto;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.site-cta.site-cta .store-badges img {
  display: block;
  width: 100%;
  height: auto;
}

/* Safety net: style any Price Map button on a page not yet migrated so it
   never renders unstyled. Migrated pages carry no .btn-primary in the CTA. */
.site-cta .btn-primary {
  height: 54px;
  background: var(--accent-on-dark);
  color: #16232A;
}

/* Single panel — the "infrastructure is ready" panel is removed everywhere,
   so the drivers panel spans the full width. */
.site-cta .site-cta-panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  max-width: none;
  /* The shared CTA has no heading/intro above the panel, so it sits flush
     within the section padding — no top margin needed. */
  margin: 0;
  background: transparent;
  border: 0;
}

.site-cta .site-cta-panel {
  display: flex;
  flex-direction: column;
  padding: 28px 22px;
  background: var(--dark-surface);
  border: 1px solid var(--dark-hairline);
}

/* Belt-and-suspenders: hide any leftover "infrastructure" panel on a page not
   yet migrated — it is the one panel that carries no store badges. */
.site-cta .cta-card-infra,
.site-cta .site-cta-panel:not(:has(.store-badges)) {
  display: none;
}

.site-cta .cta-drivers-top {
  display: grid;
  gap: 22px;
}

.site-cta.site-cta .cta-drivers-intro h3,
.site-cta.site-cta .site-cta-panel h3 {
  margin: 0 0 8px;
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.01em;
  color: #fff;
}

.site-cta.site-cta .cta-drivers-intro p,
.site-cta.site-cta .site-cta-panel > p {
  margin: 0;
  max-width: 560px;
  font-family: var(--font-reading);
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark-text-secondary);
}

.site-cta .btn-secondary {
  color: #fff;
  border-color: var(--dark-hairline-strong);
}

.cta-section > .container.site-cta {
  width: min(calc(100% - 40px), 1180px);
  margin: 0 auto;
  padding: 0;
  background: transparent;
}

@media (min-width: 700px) {
  .editorial-shell { padding-inline: 28px; }
  .editorial-hero { min-height: 580px; padding-block: 96px 56px; }
  .editorial-hero h1 { font-size: clamp(64px, 9vw, 104px); }
  .editorial-content { padding-block: 68px 24px; }
  .editorial-module-grid,
  .editorial-preview-grid,
  .manifesto-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .explore-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .site-cta { padding: 52px 40px; }
  .site-cta .cta-drivers-top { grid-template-columns: 1.15fr 1fr; gap: 44px; align-items: start; }
  /* Side-by-side badges: match HEIGHT, natural widths. */
  .site-cta.site-cta .store-badges { flex-direction: row; align-items: center; gap: 14px; }
  .site-cta.site-cta .store-badges a { width: auto; max-width: none; height: 54px; }
  .site-cta.site-cta .store-badges img { width: auto; height: 54px; }
}

@media (min-width: 960px) {
  .editorial-page { padding-top: 64px; }
  .editorial-hero-grid { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); align-items: end; }
  .editorial-visual { min-height: 360px; }
  .editorial-module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .explore-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .explore-section { padding-block: 76px; }
  .explore-section-head { grid-template-columns: minmax(280px, .8fr) 1.2fr; align-items: end; }
  .editorial-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: auto;
    margin: 28px 0 42px;
    padding: 0;
    overflow: visible;
  }
  .editorial-rail > * { min-width: 0; }
  .site-cta { margin-top: 76px; padding: 58px 56px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-in { opacity: 1; transform: none; transition: none; }
  .layer-pill .dot { animation: none; }
}