/* Site-wide hero, section-heading, and bubble centering.
   Linked on every page so Roadmap / How / Trust / FAQ / Support
   match the already-centered Home, Features, and Pricing headers. */

.hero-copy,
.home-hero-copy,
.features-hero-copy,
.legal-hero .hero-copy,
.notfound-hero .hero-copy,
.account-intro-copy,
.faq-heading-copy {
  display: grid !important;
  justify-items: center !important;
  justify-self: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

.faq-heading-copy {
  align-content: start !important;
  gap: 28px !important;
}

.faq-heading-row,
.faq-main > .eyebrow {
  margin-inline: auto !important;
  justify-self: center !important;
}

/* Every roadmap row carries its feature mark. Only the trailing chevron rotates. */
body[data-page="roadmap"] .roadmap-row-title {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body[data-page="roadmap"] .roadmap-row-title > .rg-icon {
  flex: 0 0 16px !important;
  width: 16px !important;
  height: 16px !important;
  transform: none !important;
}

body[data-page="roadmap"] .roadmap-row-chevron {
  display: inline-flex !important;
  align-items: center !important;
}

body[data-page="roadmap"] .roadmap-row-chevron .rg-icon {
  width: 17px !important;
  height: 17px !important;
}

body[data-page="roadmap"] .roadmap-row button[aria-expanded="true"] .roadmap-row-title > .rg-icon {
  transform: none !important;
}

body[data-page="roadmap"] .roadmap-row button[aria-expanded="true"] .roadmap-row-chevron .rg-icon {
  transform: rotate(90deg) !important;
}

body[data-page="roadmap"] .roadmap-tier-badge {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  background: #6544d9 !important;
  color: #fff !important;
  font-family: var(--font-sans) !important;
  font-size: 9.5px !important;
  font-style: normal !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

.hero-copy > .eyebrow,
.hero-copy > h1,
.hero-copy > p,
.home-hero-copy .eyebrow,
.home-hero-copy h1,
.home-hero-copy p,
.features-hero-copy .eyebrow,
.features-hero-copy h1,
.features-hero-copy p,
.faq-heading-row h1,
.faq-heading-row p,
.faq-heading-copy h1,
.faq-heading-copy p,
.account-intro-copy .eyebrow,
.account-intro-copy h1,
.account-intro-copy p {
  text-align: center !important;
  margin-inline: auto !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.hero-copy > .hero-actions,
.hero-copy > .hero-proofbar,
.home-hero-copy .hero-actions,
.home-hero-copy .home-hero-proofbar {
  justify-content: center !important;
  justify-items: center !important;
  margin-inline: auto !important;
}

.section-heading,
.section-heading-center,
.trust-permission-heading,
body[data-page="roadmap"] .roadmap-system > .section-heading,
body[data-page="roadmap"] .roadmap-system .section-heading,
body[data-page="how"] .section-heading,
body[data-page="trust"] .section-heading,
body[data-page="faq"] .section-heading {
  display: grid !important;
  justify-items: center !important;
  text-align: center !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: auto !important;
}

.section-heading > .eyebrow,
.section-heading > h2,
.section-heading > p,
.section-heading-center > h2,
.section-heading-center > p {
  text-align: center !important;
  margin-inline: auto !important;
}

/* Stacked / portrait: the whole hero column sits on the page center. */
@media (max-width: 1180px), (orientation: portrait) {
  .hero,
  .home-hero,
  .legal-hero,
  .notfound-hero {
    justify-items: center !important;
    text-align: center !important;
  }

  .hero .product-hero,
  .hero .product-hero.has-state-stack,
  .home-hero-proof,
  .home-hero-proof .product-hero {
    margin-inline: auto !important;
    justify-self: center !important;
  }

  .hero .ride-bubble,
  .home-hero .ride-bubble,
  .product-hero .floating-bubble,
  .showcase-collapsed .ride-bubble,
  .showcase-states .ride-bubble,
  .rg-glance-unit .ride-bubble,
  .feature-proof-simple .ride-bubble,
  .feature-proof-unit > .ride-bubble {
    margin-inline: auto !important;
    justify-self: center !important;
  }
}

.ride-bubble.is-glance-bubble .bubble-rg {
  width: 26px !important;
  height: 26px !important;
  font-size: 11px !important;
}

.ride-bubble.is-glance-bubble .bubble-map {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
}

.ride-bubble.is-glance-bubble .bubble-map .rg-icon {
  width: 14px !important;
  height: 14px !important;
}

/* WP-8 (owner answer, 2026-10-02): the live site's disabled "Coming soon /
   Google Play" badge (render.mjs playStoreBadge) and the Pricing cards'
   "Google Play · Coming soon" placeholder, ported from the live
   headers-polish.css. The look is the live rule set. Where the badge shows is
   this site's own header, not the live header grid, which was never ported:
   the header badge from 1181px up, where the header call to action always
   stood, and the menu badge in the open menu at 1180px and below (m4,
   2026-10-02: it used to stop at 760px, which left no badge at all in the
   761-1180px burger band, unlike the live site). Nothing here places the
   header or the nav. */
.play-cta {
  display: inline-flex;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 42px !important;
  padding: 6px 12px 6px 8px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: #111 !important;
  color: #fff !important;
  box-shadow: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.play-cta.is-placeholder {
  cursor: default !important;
  pointer-events: none;
  user-select: none;
}

.play-cta-inline {
  min-width: 154px;
  justify-content: center;
}

.play-cta-mark {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.play-cta-copy {
  display: grid;
  gap: 1px;
  line-height: 1;
}

/* m5 (2026-10-02): at least 10px, so "COMING SOON" stays legible. */
.play-cta-copy small {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.play-cta-copy strong {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.site-header .header-inner > .header-cta.play-cta {
  display: none;
}

@media (min-width: 1181px) {
  .site-header .header-inner > .header-cta.play-cta {
    display: inline-flex;
  }
}

/* The burger menu runs to 1180px: global.css hides .header-utility up to there
   and the menu panel carries its links, so the menu carries the badge too, at
   its own size beside the links, as on the live site. */
@media (max-width: 1180px) {
  .site-nav .mobile-nav-cta.play-cta {
    display: inline-flex;
  }
}

@media (max-width: 760px) {
  .site-nav .mobile-nav-cta.play-cta {
    min-height: 52px !important;
    justify-content: center;
    border-radius: 9px !important;
    padding: 7px 14px !important;
  }

  .play-cta-copy strong {
    font-size: 11px;
  }
}

.plan-store-placeholder {
  border-color: #d6deea !important;
  background: #f2f5f9 !important;
  color: #526078 !important;
  box-shadow: none !important;
  cursor: default !important;
  pointer-events: none;
}

/* Keep the store badge within the shared header gutter. */
@layer fx-authoritative {
  body[data-page] .site-header .header-inner > .header-cta { transform:none !important; }
}

@layer fx-authoritative {
 body[data-page] .site-footer .brand-lockup > span,
 body[data-page] .site-footer .brand-lockup strong {
  overflow:visible !important;
  line-height:1.35 !important;
  height:auto !important;
  max-height:none !important;
 }
}

/* Shared geometry prevents route-specific legacy styles changing the header. */
@layer fx-authoritative {
  body[data-page] .site-header .header-inner{min-height:63px!important;height:63px!important;padding-block:4px!important}
  body[data-page] .site-header .brand-lockup{gap:10px!important}
  body[data-page] .site-header .brand-lockup strong{font-size:26px!important;line-height:1!important;font-weight:900!important}
  body[data-page] .site-header .brand-mark{width:50px!important;height:39px!important}
}

/* Shared soft-blue page canvas matches Features. Product maps and semantic cards retain their surfaces. */
@layer fx-authoritative {
  html, body[data-page], body[data-page] #main,
  body[data-page] .tr-page, body[data-page] .fs-rail-wrap { background:#f7faff!important; }
  body[data-page] .site-header, body[data-page] .site-footer { background:#fff!important; }
  body[data-page]::before, body[data-page]::after,
  body[data-page] .home-hero::before, body[data-page] .tr-trust-hero::before { display:none!important; }
}

/* The collapsed menu owns a panel, independent of the fixed header row. */
@layer fx-authoritative {
 @media (max-width:1180px) {
  body[data-page] .site-header .site-nav {
   position:absolute!important;top:100%!important;left:12px!important;right:12px!important;
   width:auto!important;max-width:none!important;max-height:calc(100dvh - 80px)!important;
   overflow-y:auto!important;overscroll-behavior:contain!important;z-index:45!important;
   padding:12px!important;margin:0!important;border:1px solid #d6e3f5!important;
   border-radius:0 0 16px 16px!important;background:#fff!important;
   box-shadow:0 16px 32px #152d5526!important;display:none!important;
  }
  body[data-page] .site-header .site-nav.is-open {display:grid!important;grid-template-columns:1fr!important;gap:4px!important;}
  body[data-page] .site-header .site-nav a {display:flex!important;align-items:center!important;min-height:44px!important;padding:10px 14px!important;border:0!important;border-radius:8px!important;}
  body[data-page] .site-header .site-nav a.is-active {background:#edf4ff!important;}
  body[data-page] .site-header .site-nav .mobile-nav-cta {justify-self:start!important;margin:8px 14px 4px!important;}
 }
}