/* ============================================================
   liveride.space — marketing site
   Built on the LiveRide Design System (design-system/ in this repo).
   The DS ships its components as React; this file ports the ones the
   marketing page needs (Panel, Button, Metric, Wordmark, LiveDot,
   MapMarker, SectionHead) to plain CSS so the page stays a static
   document with no React or Babel runtime.
   Token names and values are the DS's own — see ds/tokens/.
   ============================================================ */

/* ── layout ────────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--w-content); margin: 0 auto; padding: 0 40px; }
.sec { padding: var(--s-13) 0 0; }
.sec-tight { padding: var(--s-12) 0 0; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
svg.lucide { stroke-width: 1.75; }
.i14 { width: 14px; height: 14px; }
.i18 { width: 18px; height: 18px; }
.i22 { width: 22px; height: 22px; }

/* ── Wordmark ──────────────────────────────────────────────── */
.wm { display: inline-flex; align-items: baseline; gap: .22em; text-decoration: none; border: 0; }
.wm b { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em;
  line-height: 1; white-space: nowrap; color: var(--text-hi); font-weight: var(--fw-regular); }
.wm b .lv { font-weight: var(--fw-light); letter-spacing: .14em; opacity: .8; }
.wm b .rd { font-weight: var(--fw-black);
  text-shadow: 0 0 1px var(--accent), 0 0 12px rgba(255,45,143,.55), 0 0 38px rgba(255,45,143,.28); }
.wm .dom { font-family: var(--font-mono); font-weight: var(--fw-light); letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-faint); font-size: 10px; }

/* ── Button ────────────────────────────────────────────────── */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; height: var(--h-control); padding: 0 22px; border: 1px solid transparent;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 13.5px;
  letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; text-decoration: none;
  cursor: pointer; overflow: hidden;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: var(--t-control), transform var(--dur-instant) var(--ease-out), filter var(--dur-fast) var(--ease-out); }
.btn:active { transform: translateY(1px); filter: brightness(.9); box-shadow: none; }
.btn-lg { height: var(--h-control-lg); padding: 0 32px; font-size: 15px; letter-spacing: .16em;
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.btn-sm { height: var(--h-control-sm); padding: 0 14px; font-size: 11.5px; gap: 6px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }

.btn-primary { background: var(--grad-magenta-fill); color: var(--accent-contrast);
  box-shadow: var(--glow-magenta-sm); }
.btn-primary:hover { box-shadow: var(--glow-magenta); }

.btn-secondary { background: rgba(246,244,250,.03); color: var(--ink-100);
  border-color: var(--line-strong); }
.btn-secondary:hover { background: var(--surface-brand-wash); color: var(--text-hi);
  border-color: var(--line-brand-strong); box-shadow: var(--glow-magenta-sm); }

.btn-cyan { background: var(--grad-cyan-fill); color: var(--accent-2-contrast);
  box-shadow: var(--glow-cyan-sm); }
.btn-cyan:hover { box-shadow: var(--glow-cyan); }

.btn-mint { background: linear-gradient(168deg, var(--acid-mint-300) 0%, var(--acid-mint-500) 100%);
  color: var(--ink-1000); box-shadow: var(--glow-mint); }
.btn-mint:hover { filter: brightness(1.06); }

/* Brushed metal — the "expensive car" cue. Exactly one per page (header). */
.btn-chrome { background: var(--grad-chrome); color: var(--ink-1000);
  border-color: rgba(253,251,255,.5); box-shadow: 0 1px 0 rgba(253,251,255,.55) inset; }
.btn-chrome:hover { box-shadow: 0 0 26px rgba(253,251,255,.30); }

.btn-ghost { background: transparent; color: var(--text-mid); }
.btn-ghost:hover { background: rgba(246,244,250,.055); color: var(--text-hi); }

/* ── Panel ─────────────────────────────────────────────────── */
.panel { --cut: 14px; position: relative; padding: 1px; background: var(--grad-panel);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); }
.panel > .pin { position: relative; height: 100%; background: var(--surface-1); overflow: hidden;
  clip-path: polygon(calc(var(--cut) - 1px) 0, 100% 0, 100% calc(100% - var(--cut) + 1px), calc(100% - var(--cut) + 1px) 100%, 0 100%, 0 calc(var(--cut) - 1px)); }
.panel.mirror { clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); }
.panel.mirror > .pin { clip-path: polygon(0 0, calc(100% - var(--cut) + 1px) 0, 100% calc(var(--cut) - 1px), 100% 100%, calc(var(--cut) - 1px) 100%, 0 calc(100% - var(--cut) + 1px)); }
.cut-sm { --cut: 10px; } .cut-lg { --cut: 22px; } .cut-xl { --cut: 34px; }

.panel.t-brand  { background: linear-gradient(158deg, rgba(255,45,143,.55), rgba(255,45,143,.10) 55%, rgba(255,45,143,.34)); }
.panel.t-cyan   { background: linear-gradient(158deg, rgba(35,229,224,.5), rgba(35,229,224,.08) 55%, rgba(35,229,224,.30)); }
.panel.t-live   { background: linear-gradient(158deg, rgba(43,229,139,.5), rgba(43,229,139,.08) 55%, rgba(43,229,139,.28)); }
.panel.t-warn   { background: linear-gradient(158deg, rgba(255,180,61,.5), rgba(255,180,61,.08) 55%, rgba(255,180,61,.28)); }
.panel.t-neutral{ background: linear-gradient(158deg, rgba(246,244,250,.14), rgba(246,244,250,.04)); }

.fill-2 > .pin { background-color: var(--surface-2); }
.fill-3 > .pin { background-color: var(--surface-3); }
.fill-void > .pin { background-color: var(--bg-void); }
/* soft-light is how the DS lays scanlines down; as a plain overlay the 3.5%
   white reads as hard stripes instead of screen texture. */
.tex > .pin { background-image: var(--tex-scanline); background-blend-mode: soft-light; }
.glow-magenta { box-shadow: var(--glow-magenta-sm); }
.glow-cyan { box-shadow: var(--glow-cyan-sm); }

/* corner brackets, in the two corners the chamfer did not cut */
.bk > .pin::before, .bk > .pin::after { content: ""; position: absolute; width: 11px; height: 11px;
  pointer-events: none; border: 0 solid var(--line-strong); }
.bk > .pin::before { top: 7px; right: 7px; border-top-width: 1px; border-right-width: 1px; }
.bk > .pin::after { bottom: 7px; left: 7px; border-bottom-width: 1px; border-left-width: 1px; }
.bk.t-brand > .pin::before, .bk.t-brand > .pin::after { border-color: var(--line-brand-strong); }
.bk.t-cyan  > .pin::before, .bk.t-cyan  > .pin::after { border-color: var(--accent-2); }
.bk.t-live  > .pin::before, .bk.t-live  > .pin::after { border-color: var(--live); }
.bk.t-warn  > .pin::before, .bk.t-warn  > .pin::after { border-color: var(--warn); }

.pad { padding: var(--pad-panel); }
.pad-lg { padding: 26px 24px 28px; }
.pad-xl { padding: 40px 36px 44px; }

/* panel header strip */
.phead { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 16px; border-bottom: 1px solid var(--line-hairline); background: rgba(246,244,250,.02); }
.phead .l { font: var(--type-label); font-size: var(--fs-label-sm);
  letter-spacing: var(--ls-label-wide); text-transform: uppercase; color: var(--text-low); }
.phead .m { font: var(--type-mono); font-size: 11px; color: var(--text-faint); }

/* ── micro type ────────────────────────────────────────────── */
.label { font: var(--type-label); letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--text-low); }
.label-wide { font: var(--type-label); font-size: var(--fs-label-sm);
  letter-spacing: var(--ls-label-wide); text-transform: uppercase; color: var(--text-faint); }

/* eyebrow: a short rule then a wide-tracked micro label */
.eyebrow { display: flex; align-items: center; gap: 12px; }
.eyebrow i { display: block; width: 34px; height: 1px; background: var(--accent-2); font-style: normal; }
.eyebrow span { font: var(--type-label); font-size: 10px; letter-spacing: var(--ls-label-wide);
  text-transform: uppercase; color: var(--text-cyan); }
.eyebrow.brand i { background: var(--accent); box-shadow: var(--glow-magenta-sm); width: 46px; }
.eyebrow.brand span { color: var(--text-brand); }

.sechead { display: flex; flex-direction: column; gap: 16px; max-width: 620px; }
.sechead h2 { font: var(--type-display-3); color: var(--text-hi); }
.sechead p { font: var(--type-body-lg); font-size: 17px; color: var(--text-mid); }

/* ── Metric ────────────────────────────────────────────────── */
.metric { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.metric .ml { display: inline-flex; align-items: center; gap: 5px; font: var(--type-label);
  font-size: 10px; letter-spacing: var(--ls-label-wide); text-transform: uppercase; color: var(--text-faint); }
.metric .mv { display: inline-flex; align-items: baseline; gap: 6px; }
.metric .mv b { font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: var(--fw-medium); font-size: var(--fs-metric); line-height: 1;
  letter-spacing: -.01em; color: var(--text-hi); }
.metric .mv u { font-family: var(--font-ui); font-size: 11.5px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-low);
  text-decoration: none; }
.metric.brand .mv b { color: var(--neon-magenta-400); }
.metric.cyan  .mv b { color: var(--neon-cyan-400); }
.metric.live  .mv b { color: var(--acid-mint-300); }
.metric.warn  .mv b { color: var(--sun-amber-500); }
.metric.lg .mv b { font-size: var(--fs-metric-lg); }

/* ── LiveDot ───────────────────────────────────────────────── */
.livedot { display: inline-flex; align-items: center; gap: 8px; font: var(--type-label);
  font-size: 10.5px; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-mid); }
.livedot i { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--live);
  box-shadow: var(--glow-mint); }

/* ── Tag ───────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px;
  background: rgba(246,244,250,.04); border: 1px solid var(--line-hairline); color: var(--text-mid);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
.tag b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 12.5px;
  font-weight: var(--fw-medium); color: var(--text-hi); }
.tag u { font: var(--type-label); font-size: 9.5px; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-faint); text-decoration: none; }
.tag.live { border-color: var(--line-mint); color: var(--text-live); }
.tag.warn { border-color: rgba(255,180,61,.42); color: var(--text-warn); }

/* ── Badge ─────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 10px;
  font: var(--type-label); font-size: 9.5px; letter-spacing: var(--ls-label-wide);
  text-transform: uppercase;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px); }
.badge.brand { background: var(--surface-brand-wash); border: 1px solid var(--line-brand); color: var(--text-brand); }
.badge.cyan  { background: var(--surface-cyan-wash);  border: 1px solid var(--line-cyan);  color: var(--text-cyan); }
.badge.warn  { background: rgba(255,180,61,.09); border: 1px solid rgba(255,180,61,.42); color: var(--text-warn); }

/* chamfered glyph tile — feature icons, install headers */
.gtile { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px;
  border: 1px solid var(--line-strong); background: rgba(246,244,250,.04); color: var(--text-mid);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); }
.gtile.brand { border-color: var(--line-brand); background: var(--surface-brand-wash); color: var(--text-brand); }
.gtile.cyan  { border-color: var(--line-cyan);  background: var(--surface-cyan-wash);  color: var(--text-cyan); }
.gtile.live  { border-color: var(--line-mint);  background: rgba(43,229,139,.09);      color: var(--text-live); }
.gtile.warn  { border-color: rgba(255,180,61,.42); background: rgba(255,180,61,.09);   color: var(--text-warn); }

/* ── beta strip ────────────────────────────────────────────── */
.betastrip { position: relative; display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 9px 20px; text-align: center;
  background: rgba(255,180,61,.07); border-bottom: 1px solid rgba(255,180,61,.30); }
.betastrip .t { font: var(--type-body-sm); font-size: 12.5px; color: var(--text-mid); }
.betastrip .t b { font-family: var(--font-display); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--text-warn); }

/* ── header ────────────────────────────────────────────────── */
header.site { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: 40px;
  height: 74px; padding: 0 40px; background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out); }
header.site.solid { background: var(--surface-glass); backdrop-filter: var(--glass);
  -webkit-backdrop-filter: var(--glass); border-bottom-color: var(--line-hairline); }
header.site nav { display: flex; gap: 28px; flex: 1; }
header.site nav a { position: relative; padding-bottom: 4px; border: 0; text-decoration: none;
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 13px;
  letter-spacing: .15em; text-transform: uppercase; color: var(--text-low);
  transition: color var(--dur-fast) var(--ease-out); }
header.site nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--accent); box-shadow: var(--glow-magenta-sm); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out); }
header.site nav a:hover { color: var(--text-hi); }
header.site nav a:hover::after { opacity: .5; }

/* ── hero ──────────────────────────────────────────────────── */
/* isolation:isolate is load-bearing — Leaflet gives its own panes z-index 400.
   Without a stacking context here they escape into the root layer and paint
   over the hero copy and the sticky header. */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end;
  min-height: 720px; margin-top: -74px; padding-top: 74px; overflow: hidden; }
.hero .mapbox { position: absolute; top: 0; bottom: 0; right: 0; left: 42%; z-index: 0; }
.hero .scrim-l { position: absolute; top: 0; bottom: 0; left: 42%; width: 220px; z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bg-page) 0%, rgba(8,6,13,.82) 45%, rgba(8,6,13,0) 100%); }
.hero .scrim-a { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(105deg, var(--bg-page) 0%, rgba(5,4,9,.94) 34%, rgba(5,4,9,.30) 62%, rgba(5,4,9,.55) 100%); }
.hero .scrim-b { position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: 1;
  pointer-events: none; background: var(--grad-fade-up); }
.hero .inner { position: relative; z-index: 2; width: 100%; max-width: var(--w-content);
  margin: 0 auto; padding: 0 40px 88px; }
.hero h1 { font: var(--type-display-1); font-size: clamp(52px, 7.2vw, 112px); color: var(--text-hi);
  max-width: 900px; letter-spacing: -.02em; margin-top: 26px; }
.hero h1 .hl { color: var(--neon-magenta-400); text-shadow: var(--text-glow-magenta); }
.hero .lede { font: var(--type-body-lg); color: var(--text-mid); max-width: 540px; margin-top: 26px; }
.hero .ctas { display: flex; gap: 12px; margin-top: 34px; align-items: center; flex-wrap: wrap; }
.hero .stats { display: flex; margin-top: 56px; max-width: 780px; }
.hero .stats > div { flex: 1; padding-right: 26px; }
.hero .stats > div + div { padding-left: 26px; border-left: 1px solid var(--line-hairline); }

/* map surface — the DS MapCanvas grade, ported */
.lrmap { position: absolute; inset: 0; isolation: isolate; background: var(--bg-void); }
.lrmap .leaflet-tile-pane { filter: saturate(.35) brightness(.82) contrast(1.22); }
.leaflet-container { background: #08060d; font-family: var(--font-ui); }
.leaflet-control-attribution { background: rgba(5,4,9,.6) !important; color: var(--text-faint) !important;
  font-size: 9px !important; font-family: var(--font-mono); padding: 1px 6px !important; border: 0 !important; }
.leaflet-control-attribution a { color: var(--text-low) !important; border: 0; }
.leaflet-control-zoom a { background: var(--surface-overlay) !important; color: var(--text-mid) !important;
  border: 1px solid var(--line-hairline) !important; border-radius: 0 !important; }
.leaflet-control-zoom a:hover { color: var(--text-hi) !important; background: var(--surface-hover) !important; }
.lr-route { filter: drop-shadow(0 0 6px currentColor); }
.mapvig { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 100% at 50% 120%, rgba(255,45,143,.16), transparent 55%),
              radial-gradient(90% 70% at 50% -10%, rgba(125,77,255,.14), transparent 60%); }
.mapvig2 { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 120px 30px rgba(5,4,9,.85); }
.mapframe { isolation: isolate; }
.nomark { background: none; border: 0; }

/* ── features ──────────────────────────────────────────────── */
.fgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 48px; }
.fcard { display: flex; flex-direction: column; gap: 14px; height: 100%; }
.fcard h3 { font: var(--type-title-3); font-size: 21px; color: var(--text-hi); }
.fcard p { font: var(--type-body); font-size: 14.5px; color: var(--text-low); }

/* ── live section ──────────────────────────────────────────── */
.mapframe { position: relative; height: 520px; }
.legend { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; }
.legend span { display: inline-flex; align-items: center; gap: 8px; font: var(--type-body-sm);
  color: var(--text-low); }
.legend i.sw { display: block; width: 10px; height: 10px; font-style: normal;
  clip-path: polygon(3px 0, 100% 0, 100% calc(100% - 3px), calc(100% - 3px) 100%, 0 100%, 0 3px); }
.note { display: flex; gap: 12px; margin-top: 20px; padding: 14px 18px;
  background: var(--surface-cyan-wash); border-left: 2px solid var(--accent-2); }
.note p { font: var(--type-body-sm); color: var(--text-mid); }
.note b { color: var(--text-hi); font-weight: var(--fw-semibold); }

/* ── install ───────────────────────────────────────────────── */
.igrid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; align-items: start; }
.icard { display: flex; flex-direction: column; gap: 18px; }
.icard h3 { font: var(--type-title-3); font-size: 22px; color: var(--text-hi); }
.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: s; }
.steps li { display: flex; gap: 12px; font: var(--type-body-sm); color: var(--text-low); counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); flex: none;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 11px;
  color: var(--text-faint); padding-top: 1px; }
.qr { align-self: flex-start; display: inline-block; padding: 10px; background: var(--ink-50);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); }
.qr img { width: 168px; height: 168px; }
.meta { font: var(--type-mono); font-size: 10.5px; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-faint); }

/* ── coming soon ───────────────────────────────────────────── */
.soongrid { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }

/* ── footer ────────────────────────────────────────────────── */
footer.site { margin-top: var(--s-14); border-top: 1px solid var(--line-hairline); }
footer.site .cols { max-width: var(--w-content); margin: 0 auto;
  padding: 56px 40px 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
footer.site .col { display: flex; flex-direction: column; gap: 12px; }
footer.site .col a { font: var(--type-body-sm); color: var(--text-low); border: 0; text-decoration: none; }
footer.site .col a:hover { color: var(--text-hi); }
footer.site .base { max-width: var(--w-content); margin: 0 auto; padding: 20px 40px 40px;
  border-top: 1px solid var(--line-hairline); display: flex; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; }
footer.site .base span { font: var(--type-mono); font-size: 10px; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--text-faint); }

/* ── responsive ────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .fgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .wrap, .hero .inner, footer.site .cols, footer.site .base { padding-left: 22px; padding-right: 22px; }
  header.site { gap: 16px; padding: 0 22px; }
  header.site nav { display: none; }
  .hero { min-height: 0; padding-bottom: 8px; }
  .hero .mapbox { left: 0; opacity: .34; }
  .hero .scrim-l { display: none; }
  .hero .scrim-a { background: linear-gradient(180deg, rgba(5,4,9,.90) 0%, rgba(5,4,9,.84) 45%, rgba(5,4,9,.96) 100%); }
  .hero .inner { padding-bottom: 56px; }
  .hero h1 { font-size: 40px; margin-top: 20px; }
  .hero .lede { font-size: 15.5px; margin-top: 20px; }
  .hero .ctas { margin-top: 26px; }
  .hero .stats { margin-top: 40px; }
  .hero .stats { flex-wrap: wrap; gap: 22px 0; }
  .hero .stats > div { flex: 0 0 50%; }
  .hero .stats > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .igrid { grid-template-columns: 1fr; }
  .mapframe { height: 420px; }
  footer.site .cols { grid-template-columns: 1fr 1fr; }
  .sec { padding-top: var(--s-12); }
}
@media (max-width: 620px) {
  .fgrid { grid-template-columns: 1fr; }
  /* must match the `+ div` selector's specificity to override the divider */
  .hero .stats > div, .hero .stats > div + div { flex: 0 0 100%; padding-left: 0; border-left: 0; }
  footer.site .cols { grid-template-columns: 1fr; }
  .hero .ctas .btn { flex: 1 1 100%; }
}