/* AUTZU — design tokens */
:root {
  --ink: #0B1220;
  --ink-2: #1B2230;
  --text: #2A3140;
  --text-2: #5A6473;
  --text-3: #8A93A1;
  --bg: #FFFFFF;
  --bg-2: #F6F6F4;
  --bg-3: #EFEFEB;
  --hair: #E8E8E4;
  --hair-2: #D9D9D3;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(11,18,32,0.04);
  --shadow: 0 4px 24px -8px rgba(11,18,32,0.08), 0 1px 2px rgba(11,18,32,0.04);
  --shadow-lg: 0 24px 64px -24px rgba(11,18,32,0.18), 0 2px 8px rgba(11,18,32,0.04);

  --serif: 'Inter Display', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

  --max: 1280px;
  --pad-x: 56px;
  --nav-h: 72px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (max-width: 800px) {
  :root { --pad-x: 24px; }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--text);
  background: var(--bg);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.page { opacity: 1; }

.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}
h1 { font-size: clamp(40px, 5.6vw, 76px); letter-spacing: -0.035em; }
h2 { font-size: clamp(32px, 3.8vw, 52px); letter-spacing: -0.03em; }
h3 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.02em; }
h4 { font-size: 17px; letter-spacing: -0.01em; }
p { margin: 0; color: var(--text-2); }

.container {
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: var(--radius);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 200ms var(--ease), border-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
  white-space: nowrap;
  user-select: none;
}
.btn:active { transform: scale(0.98); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover { background: #000; }
.btn-secondary { background: var(--bg); color: var(--ink); border-color: var(--hair-2); }
.btn-secondary:hover { border-color: var(--ink); }
.btn-ghost { background: transparent; color: var(--ink); padding: 10px 0; }
.btn-ghost:hover { color: var(--text-2); }
.btn .arrow { display: inline-block; transition: transform 200ms var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
}

.hr { height: 1px; background: var(--hair); border: 0; margin: 0; }

.card {
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: border-color 200ms var(--ease), transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.card:hover { border-color: var(--hair-2); }

.stat-num {
  font-family: var(--serif);
  font-size: clamp(32px, 3vw, 44px);
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.03em;
  line-height: 1;
}
.stat-label { font-size: 13.5px; color: var(--text-2); margin-top: 8px; letter-spacing: -0.005em; }

.field {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 14.5px;
  background: var(--bg);
  color: var(--ink);
  transition: border-color 200ms var(--ease), background 200ms var(--ease);
  outline: none;
}
.field:focus { border-color: var(--ink); }
.field::placeholder { color: var(--text-3); }
textarea.field { resize: vertical; min-height: 110px; line-height: 1.5; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }
@media (max-width: 640px) { .row { flex-direction: column; } }

.footer {
  background: var(--ink);
  color: #B5BCC8;
  padding: 88px var(--pad-x) 32px;
}
.footer a { color: #E6EAF0; text-decoration: none; transition: color 180ms var(--ease); font-size: 14px; }
.footer a:hover { color: #fff; }
.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr repeat(5, minmax(120px, 1fr));
  gap: 32px;
  align-items: start;
}
.footer-col-title {
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 18px;
  font-weight: 600;
}
.footer-link { display: block; padding: 5px 0; color: #E6EAF0; font-size: 14px; width: 100%; }
.footer-link:hover { color: #fff; }
.footer-bottom {
  max-width: var(--max);
  margin: 64px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 13px; color: #8E97AA; gap: 16px; flex-wrap: wrap;
}
.footer-bottom a { color: #B5BCC8; font-size: 13px; }
@media (max-width: 1180px) { .footer-grid { grid-template-columns: 1fr repeat(5, 1fr); gap: 32px; } }
@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1fr; gap: 40px 32px; }
  .footer-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) { .footer-grid { grid-template-columns: 1fr; } }

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Always-pinned header: opaque from the start so it's legible over any
     hero/image and doesn't disappear when there's no page scroll. */
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom: 1px solid var(--hair);
  transition: box-shadow 280ms var(--ease), border-color 280ms var(--ease);
}
.nav.scrolled {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(160%) blur(18px);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  border-bottom-color: var(--hair);
}
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 18px var(--pad-x);
  display: flex; align-items: center; justify-content: space-between; gap: 32px;
}
.nav-logo { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
.nav-logo img { height: 22px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link {
  font-size: 14px; color: var(--text); cursor: pointer; position: relative;
  padding: 6px 0; transition: color 200ms var(--ease);
  background: none; border: none; font-family: inherit; letter-spacing: -0.005em;
}
.nav-link:hover, .nav-link.active { color: var(--ink); }
.nav-link.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--ink);
}
.nav-cta { display: flex; align-items: center; gap: 12px; }

/* Grouped nav dropdowns — each top-level item carries a panel that mirrors
   the footer column structure. Hover/focus opens; 150ms close-delay covers
   the small gap between trigger and panel. */
.nav-group { position: relative; }
.nav-group .nav-link {
  display: inline-flex; align-items: center; gap: 6px;
}
.nav-caret {
  opacity: 0.45;
  transition: transform 200ms var(--ease), opacity 200ms var(--ease);
}
.nav-group .nav-link[aria-expanded="true"] .nav-caret {
  transform: rotate(180deg);
  opacity: 0.85;
}
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: -14px;
  margin-top: 10px;
  min-width: 200px;
  background: var(--bg);
  border: 1px solid var(--hair);
  border-radius: 12px;
  box-shadow: 0 24px 64px -24px rgba(11,18,32,0.18), 0 2px 8px rgba(11,18,32,0.04);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  z-index: 60;
  display: flex; flex-direction: column;
}
/* Invisible bridge so the cursor can cross the gap from trigger → panel */
.nav-dropdown::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: -14px;
  height: 14px;
}
.nav-dropdown.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.nav-dropdown-link {
  display: block;
  background: none; border: none;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 13.5px;
  letter-spacing: -0.005em;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  border-radius: 7px;
  transition: background 140ms var(--ease), color 140ms var(--ease);
  white-space: nowrap;
}
.nav-dropdown-link:hover,
.nav-dropdown-link:focus-visible {
  background: var(--bg-2);
  color: var(--ink);
  outline: none;
}

.nav-burger {
  display: none; background: none;
  border: 1px solid var(--hair-2); border-radius: 8px;
  width: 40px; height: 36px;
  align-items: center; justify-content: center; cursor: pointer; padding: 0;
}
/* Hamburger kicks in below 1080px — the desktop nav (logo + 7 links + CTA pair)
   needs ~1060px content + padding to fit without horizontal scroll. Audit 2026-05-14
   caught a 31px overflow at 921–~1080px when the breakpoint was 920. */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-cta .btn { display: none; }
  .nav-burger { display: inline-flex; }
  .nav-inner {
    padding: 20px var(--pad-x) 14px !important;
  }
  .nav-logo img { height: 20px !important; }
  .nav-cta { margin-right: 8px !important; }
  .nav-burger {
    width: 40px !important;
    height: 36px !important;
    border-radius: 8px !important;
  }
  .nav-burger svg { width: 20px !important; height: 20px !important; }
}

.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(11,18,32,0.4);
  opacity: 0; pointer-events: none;
  transition: opacity 280ms var(--ease);
  z-index: 100;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0;
  /* Use dvh on iOS so the collapsing URL bar doesn't push the CTA below the
     visible viewport. Fallback to vh for older browsers. */
  height: 100vh;
  height: 100dvh;
  width: min(380px, 86vw);
  background: var(--bg); box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform 320ms var(--ease);
  z-index: 101;
  /* No bottom padding here — the sticky `.drawer-cta` owns its own padding so
     it can glue itself to the visible bottom of the drawer regardless of how
     far the user has scrolled. */
  padding: 56px 22px 0 22px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.drawer.open { transform: translateX(0); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.drawer-head .nav-logo img { height: 20px !important; width: auto; display: block; }
.drawer-section-label {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 14px 0 6px;
  border-top: 1px solid var(--hair);
  margin-top: 4px;
}
.drawer-section-label:first-of-type { border-top: 0; padding-top: 4px; margin-top: 0; }
.drawer-links { display: flex; flex-direction: column; }
.drawer-link {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  padding: 9px 0;
  border: 0;
  cursor: pointer;
  letter-spacing: -0.005em;
  font-weight: 500;
  background: none;
  text-align: left;
  width: 100%;
}
.drawer-link:hover { color: var(--text-2); }
.drawer-cta {
  /* Sticky-bottom: always visible at the bottom of the drawer, regardless of
     scroll position. Content above scrolls behind a fade band so links don't
     get sharp-cut mid-letter. */
  position: sticky;
  bottom: 0;
  margin-top: auto; /* fill remaining flex space when content is short */
  padding: 18px 0 max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--hair);
  background: var(--bg);
  flex-shrink: 0;
}
.drawer-cta::before {
  /* Fade band sits ABOVE the sticky CTA, dissolving the last bit of scrolling
     content into the bg so links don't appear sliced. */
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: 28px;
  background: linear-gradient(to top, var(--bg) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(11,18,32,0.46);
  z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; pointer-events: none;
  transition: opacity 240ms var(--ease);
}
.modal-overlay.open { opacity: 1; pointer-events: auto; }
.modal {
  background: var(--bg); border-radius: var(--radius-lg);
  width: min(560px, 100%); max-height: 90vh;
  overflow: auto; padding: 32px;
  transform: translateY(12px) scale(0.98);
  transition: transform 320ms var(--ease);
  box-shadow: var(--shadow-lg);
}
.modal-overlay.open .modal { transform: translateY(0) scale(1); }
.close-x {
  width: 32px; height: 32px;
  border: 1px solid var(--hair); border-radius: 6px;
  background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color 200ms;
}
.close-x:hover { border-color: var(--ink); }

.logos-strip {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 32px; align-items: center;
}
.logos-strip .logo-item {
  display: flex; align-items: center; justify-content: center;
  height: 32px; color: #1B2230;
  opacity: 0.78; filter: grayscale(1);
  font-weight: 600; letter-spacing: -0.01em;
  transition: opacity 200ms;
}
.logos-strip .logo-item:hover { opacity: 1; }
@media (max-width: 800px) { .logos-strip { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; } }

.banner-dark {
  background: var(--ink); color: #fff;
  border-radius: var(--radius-lg);
  padding: 22px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.banner-dark a { color: #fff; text-decoration: none; font-size: 14px; }
.banner-dark p { color: #C9CFDB; font-size: 15px; }

.muted { color: var(--text-2); }
.text-ink { color: var(--ink); }

.pretty { text-wrap: pretty; }
.balance { text-wrap: balance; }

[data-tweaks-panel] { z-index: 90; }

::selection { background: var(--ink); color: #fff; }
html { scroll-behavior: smooth; }

/* ============================================================
   POLISH LAYER — standardized interactive states
   ============================================================ */

/* Generic card hover (used by .card across many sections) */
.card { cursor: default; }
.card:hover {
  border-color: var(--hair-2);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

/* Buttons get a hairline lift on hover */
.btn-primary:hover { background: #000; transform: translateY(-1px); }
.btn-secondary:hover { border-color: var(--ink); transform: translateY(-1px); }

/* Focus-visible rings for keyboard users */
.btn:focus-visible,
.field:focus-visible,
.nav-link:focus-visible,
.footer-link:focus-visible,
.drawer-link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Tap highlight off for mobile (we have our own hover styles) */
button, a { -webkit-tap-highlight-color: transparent; }

/* ============================================================
   MOBILE RESPONSIVE LAYER
   Overrides inline `gridTemplateColumns` and other fixed
   layouts so every page reads cleanly at iPhone widths.
   ============================================================ */

/* Stop horizontal scroll caused by oversized inline grids.
   Use `overflow-x: clip` (not `hidden`). `hidden` coerces `overflow-y` to `auto`
   per spec, which turns the element into its own scroll container — and because
   the html element has `height: auto`, it then sizes to its content and the
   page becomes unscrollable. `clip` clips overflow without changing the
   scroll-container status. (Supported in all modern browsers since 2022.) */
html { max-width: 100vw; overflow-x: clip; }
body { max-width: 100vw; overflow-x: clip; }

/* `html { scroll-behavior: smooth }` is set further down for anchor jumps.
   On initial mount, useLayoutEffect calls `window.scrollTo(0, 0)`; with smooth
   behavior the page enters a brief scroll-animation state that swallows the
   first wheel/touch input. JS callers now pass `behavior: 'instant'` to bypass
   this; smooth remains the default for in-page anchor links. */

/* Grid tracks must be allowed to shrink below content min-width on mobile,
   otherwise large inline children (dashboards, SVG charts, images) blow out
   the column past the container. */
@media (max-width: 920px) {
  .page-hero,
  .cap-grid,
  .threeup-grid,
  .sec-grid,
  .cert-grid,
  .hero-mini-stats,
  .partner-layer,
  .partner-cards,
  .inv-thesis,
  .inv-backers,
  .uber-bens,
  .uber-flow,
  .uber-econ,
  .uber-cities,
  .uber-phone,
  .uber-phone-feats,
  .uber-guides,
  .uber-faq,
  .press-facts,
  .press-dl,
  .timeline-row,
  .role-row,
  .careers-cta,
  .loc-grid,
  .videos-grid,
  .feature-grid,
  .hero-stats-bar > div,
  .dash,
  .dash-map-row,
  .legal-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .cap-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .cert-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .hero-mini-stats { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .inv-backers { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .uber-bens { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .videos-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
  .hero-stats-bar > div { grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important; }

  /* Constrain content within grid cells */
  .page-hero > *,
  .page-hero-img,
  .dash,
  .dash > *,
  .threeup-grid > *,
  .cap-grid > *,
  .sec-grid > *,
  .partner-cards > *,
  .inv-thesis > *,
  .uber-bens > *,
  .uber-flow > *,
  .uber-guides > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Charts, maps, SVGs that have intrinsic large widths */
  .dash svg, .dash canvas, .dash img, .dash table { max-width: 100% !important; height: auto; }
  .dash [style*="height:264px"], .dash [style*="height: 264px"] { height: 200px !important; }
  .page-hero-img img, .page-hero-img svg { max-width: 100% !important; height: auto; }

  /* Dashboard content panel: allow inner overflow scrolling rather than clipping */
  .dash > div:nth-child(2) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Stat-block grids inside the dash: collapse 4/5-col → 2-col */
  .dash [style*="repeat(4,1fr)"],
  .dash [style*="repeat(4, 1fr)"],
  .dash [style*="repeat(5,1fr)"],
  .dash [style*="repeat(5, 1fr)"] {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  }
  .dash [style*="repeat(3,1fr)"],
  .dash [style*="repeat(3, 1fr)"] {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) !important;
  }
  /* Inner cards in dash should never push wider than parent */
  .dash * { max-width: 100%; }
  .dash [style*="height: 220px"], .dash [style*="height:220px"] { height: 180px !important; }
}

@media (max-width: 600px) {
  .cap-grid,
  .cert-grid,
  .inv-backers,
  .uber-bens,
  .videos-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .hero-stats-bar > div { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
}

@media (max-width: 920px) {
  h1 { font-size: clamp(34px, 8vw, 52px); }
  h2 { font-size: clamp(28px, 6.5vw, 40px); }
  h3 { font-size: clamp(20px, 5vw, 26px); }

  /* Generic two-column page heroes (Platform, Partnerships, Hubs,
     About, Careers, Contact, Investors, Uber EV) */
  .page-hero,
  .contact-hero {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    min-height: 0 !important;
  }

  /* Capability/feature grids — 4 or 5 columns → 2 */
  .cap-grid { grid-template-columns: 1fr 1fr !important; gap: 28px 20px !important; }

  /* Three-up cards → 1 column for readability */
  .threeup-grid { grid-template-columns: 1fr !important; gap: 16px !important; }

  /* Security pillars + cert grid */
  .sec-grid { grid-template-columns: 1fr !important; gap: 14px !important; }
  .cert-grid { grid-template-columns: 1fr 1fr !important; }

  /* Hero mini-stats (Platform) — 4-up → 2 */
  .hero-mini-stats { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }

  /* Partnerships — layer rows + cards */
  .partner-layer { grid-template-columns: 1fr !important; gap: 20px !important; }
  .partner-cards { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Investors — thesis points + backers */
  .inv-thesis { grid-template-columns: 1fr !important; gap: 20px !important; }
  .inv-backers { grid-template-columns: 1fr 1fr !important; }

  /* Uber EV */
  .uber-bens { grid-template-columns: 1fr 1fr !important; }
  .uber-flow { grid-template-columns: 1fr !important; gap: 16px !important; }
  .uber-econ { grid-template-columns: 1fr !important; }

  /* About — timeline rows */
  .timeline-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 20px 0 !important;
  }
  .timeline-row > div:first-child { font-size: 12px !important; }

  /* Careers — role table & CTA */
  .role-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
    padding: 16px 0 !important;
  }
  .role-row > * { font-size: 14px !important; }
  .careers-cta {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 32px 24px !important;
  }

  /* World map hub cards */
  .world-map-locations,
  .global-hub-grid { grid-template-columns: 1fr !important; }

  /* Home stats bar (4 stats) — already gridded; stack at mobile */
  .hero-stats-bar { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* Logos strip */
  .logos-strip { grid-template-columns: repeat(3, 1fr) !important; gap: 20px 12px !important; }

  /* Banner CTA — stack */
  .banner-dark {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 22px !important;
  }

  /* Platform dashboard — collapse 180px sidebar to top tab bar */
  .dash {
    grid-template-columns: 1fr !important;
  }
  .dash > div:first-child {
    display: flex !important;
    overflow-x: auto !important;
    padding: 8px !important;
    gap: 4px !important;
    border-bottom: 1px solid var(--hair) !important;
  }
  .dash > div:first-child > button,
  .dash > div:first-child > div[role="button"] {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
  }

  /* Dashboard inner rows — let them stack or scroll */
  .dash-map-row { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* Any inline grid with >2 columns of stat cards — force 2 */
  .dash [style*="repeat(4,1fr)"],
  .dash [style*="repeat(4, 1fr)"] { grid-template-columns: 1fr 1fr !important; }
  .dash [style*="repeat(5,1fr)"],
  .dash [style*="repeat(5, 1fr)"] { grid-template-columns: 1fr 1fr !important; }

  /* Dashboard tables — allow horizontal scroll inside their wrappers */
  .dash table { min-width: 560px; }
  .dash-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 600px) {
  .cap-grid { grid-template-columns: 1fr !important; }
  .cert-grid { grid-template-columns: 1fr !important; }
  .inv-backers { grid-template-columns: 1fr 1fr !important; }
  .uber-bens { grid-template-columns: 1fr !important; }
  .hero-stats-bar { grid-template-columns: 1fr 1fr !important; }
  .logos-strip { grid-template-columns: 1fr 1fr !important; }
}

/* Ensure card and section padding scales down */
@media (max-width: 600px) {
  .card { padding: 22px !important; }
  .container { padding-left: var(--pad-x); padding-right: var(--pad-x); }
}

/* Hero image - never overflow, always responsive */
.home-hero img { max-width: 100%; height: auto; }

/* Buttons on mobile: don't let them push out of the row */
@media (max-width: 600px) {
  .btn { padding: 12px 16px; font-size: 14px; }
}

/* Legal / Terms / Privacy / FAQ — sidebar collapses */
@media (max-width: 920px) {
  .legal-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .legal-grid > nav {
    position: static !important;
    border-bottom: 1px solid var(--hair);
    padding-bottom: 12px;
  }
  .videos-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 600px) {
  .videos-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   AGGRESSIVE INLINE-GRID OVERRIDES
   Many components set gridTemplateColumns inline without a
   className. These attribute selectors catch them all.
   ============================================================ */

/* Tablet → 2 cols for any 3/4/5/6-col inline grid */
@media (max-width: 920px) {
  [style*="repeat(6,1fr)"],
  [style*="repeat(6, 1fr)"],
  [style*="repeat(5,1fr)"],
  [style*="repeat(5, 1fr)"],
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Phone → 1 col for everything 3+ */
@media (max-width: 600px) {
  [style*="repeat(6,1fr)"],
  [style*="repeat(6, 1fr)"],
  [style*="repeat(5,1fr)"],
  [style*="repeat(5, 1fr)"],
  [style*="repeat(4,1fr)"],
  [style*="repeat(4, 1fr)"],
  [style*="repeat(3,1fr)"],
  [style*="repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }
  /* Keep backers/logos compact at 2 cols even on phone — they're tiny */
  .inv-backers { grid-template-columns: repeat(2,1fr) !important; }
  .logos-strip { grid-template-columns: repeat(2,1fr) !important; }
}

/* ============================================================
   SECTION PADDING REDUCTION
   Sites set padding: '72px 0', '80px 0', '88px 0' inline.
   On mobile, those are way too much vertical air.
   ============================================================ */
@media (max-width: 920px) {
  section[style*="padding:'88px"],
  section[style*='padding:"88px'],
  section[style*="padding: '88px"],
  section[style*="padding:'80px"],
  section[style*='padding:"80px'],
  section[style*="padding: '80px"],
  section[style*="padding:'72px"],
  section[style*='padding:"72px'],
  section[style*="padding: '72px"],
  section[style*="padding:'64px"],
  section[style*='padding:"64px'],
  section[style*="padding: '64px"] {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
}
@media (max-width: 600px) {
  section[style*="padding:'88px"],
  section[style*='padding:"88px'],
  section[style*="padding: '88px"],
  section[style*="padding:'80px"],
  section[style*='padding:"80px'],
  section[style*="padding: '80px"],
  section[style*="padding:'72px"],
  section[style*='padding:"72px'],
  section[style*="padding: '72px"],
  section[style*="padding:'64px"],
  section[style*='padding:"64px'],
  section[style*="padding: '64px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
}

/* ============================================================
   TIGHTER LINE-HEIGHT / TEXT-WRAP for inline display-size text
   ============================================================ */
@media (max-width: 600px) {
  /* Any inline fontSize ≥ 48 — clamp it */
  [style*="fontSize: 54"],
  [style*="fontSize:54"],
  [style*="fontSize: 48"],
  [style*="fontSize:48"] {
    font-size: 36px !important;
  }
  /* Long stat numbers shouldn't wrap awkwardly */
  .stat-num { font-size: clamp(28px, 9vw, 40px) !important; }
}

/* ============================================================
   IMAGES — never overflow, always responsive
   ============================================================ */
img { max-width: 100%; }

/* ============================================================
   Tables / long content — allow horizontal scroll
   ============================================================ */
@media (max-width: 920px) {
  table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   ROW UTILITY — make sure flex rows wrap on mobile
   ============================================================ */
@media (max-width: 600px) {
  /* Any inline flex with flexWrap:'wrap' is fine; force others */
  div[style*="display:'flex'"][style*="gap:"] { flex-wrap: wrap !important; }
}

/* ============================================================
   MOBILE — INNER PAGE HEROES (Hubs, About, Careers, Press,
   Uber EV, Investors, Partnerships, Contact)
   Inline heights of 380–480px are too tall; crop with object
   positioning to keep the subject in frame.
   ============================================================ */
@media (max-width: 920px) {
  .page-hero-img {
    height: 280px !important;
    min-height: 0 !important;
  }
  .page-hero-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 40% !important;
  }
  /* When .page-hero-img wraps the Platform dashboard preview (not an <img>),
     let it size to its content so it doesn't overlap the section below. */
  .page-hero-img:has(.dash),
  .page-hero-img:has(svg[aria-label*="Partnership"]),
  .page-hero-img:has(svg[role="img"]) {
    height: auto !important;
  }
}
@media (max-width: 560px) {
  .page-hero-img { height: 240px !important; }
}

/* ============================================================
   MOBILE — HOME HERO TUNING (final)
   Bring the image down to a sensible height and keep the
   headline anchored at the top so it reads against the sky.
   ============================================================ */
/* Hero mobile overrides are in the inline <style> block inside the hero JSX,
   to keep all hero-related rules together. */

/* ============================================================
   MOBILE — UBER EV PHONE MOCKUPS
   `<PhoneMock>` is fixed-aspect; let it shrink gracefully
   ============================================================ */
@media (max-width: 600px) {
  .uber-flow > div { max-width: 280px; margin: 0 auto; }
}

/* ============================================================
   MOBILE — REDUCE GIANT BANNER NUMBERS
   ============================================================ */
@media (max-width: 600px) {
  /* Uber EV "you keep $225/wk" callout (fontSize: 54) */
  [style*="fontSize:54"],
  [style*="fontSize: 54"] { font-size: 36px !important; }
}

/* ============================================================
   MOBILE — STATS / KEY METRIC TILES
   Anywhere we have `font-family: serif; font-size: 22`
   inline within a 2-col grid, allow them to shrink.
   ============================================================ */
@media (max-width: 560px) {
  .container { padding-left: 20px !important; padding-right: 20px !important; }
}

/* ============================================================
   GLOBAL — kill the world map's hidden-overflow trick on phones
   so it doesn't get squished
   ============================================================ */
@media (max-width: 560px) {
  /* Tighten any 320px+ minHeight on inner page heroes */
  div[style*="minHeight: 480"],
  div[style*="minHeight:480"],
  div[style*="minHeight: 420"],
  div[style*="minHeight:420"] {
    min-height: 0 !important;
  }
}

/* ============================================================
   MOBILE — HUB LOCATIONS GRID, partner cards, etc
   ============================================================ */
@media (max-width: 600px) {
  .loc-grid { grid-template-columns: 1fr !important; }
  .partner-cards { grid-template-columns: 1fr !important; }
}

/* ============================================================
   MOBILE — Investors growth chart
   ============================================================ */
@media (max-width: 920px) {
  .page-hero-img > svg { max-width: 100%; height: auto; }
}

/* ============================================================
   AUDIT FIXES (added 2026-05-13)
   ============================================================ */

/* iOS Safari hardening — prevent blue tap-highlight flash + system
   link color leaking onto <button> elements when CSS races to load. */
html { -webkit-tap-highlight-color: transparent; }
button,
button:link,
button:visited,
button:active { color: inherit; -webkit-text-fill-color: currentColor; }
a[href^="tel"],
a[href^="mailto"] { color: inherit; text-decoration: none; }

/* iOS-specific: <button> defaults to system blue. Force the hamburger
   menu button (.nav-burger) and close-X (.close-x) to use ink so SVG
   stroke="currentColor" doesn't render as iOS link blue. */
.nav-burger,
.close-x,
.nav-burger svg,
.close-x svg {
  color: var(--ink) !important;
  -webkit-text-fill-color: var(--ink) !important;
}
.nav-burger svg,
.close-x svg {
  stroke: currentColor;
  fill: none;
}
.nav-burger,
.close-x {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  align-items: center;
  justify-content: center;
}
/* .nav-burger visibility is controlled by the base rule (display:none) and the
   @media (max-width: 920px) breakpoint that sets it to inline-flex. .close-x
   lives inside the drawer overlay and is always inline-flex when shown. */
.close-x { display: inline-flex; }


/* Skip-to-content link (a11y) — hidden until keyboard-focused */
.skip-link {
  position: absolute;
  left: 12px;
  top: -48px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  text-decoration: none;
  transition: top 0.18s var(--ease);
}
.skip-link:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }

/* iOS: prevent input-focus auto-zoom by ensuring 16px+ */
.field, input.field, textarea.field, select.field {
  font-size: 16px;
}

/* Mobile: letter-spacing relax for headings under 480px (audit) */
@media (max-width: 480px) {
  h1, h2 { letter-spacing: -0.015em !important; }
  .hero-overlay h1 { letter-spacing: -0.015em !important; }
}

/* Mobile: more breathing room in the home hero stats bar (audit) */
@media (max-width: 560px) {
  .hero-stats-bar > div > div { padding: 22px 0 !important; }
}