/* ============================================================
   PEERYX NETWORK — v117  (readability fixes + blog redesign)
   Loads after v116. Fixes: contrast, section-alt, blog CSS.
   ============================================================ */

/* ══ 1. TYPOGRAPHY CONTRAST FIX ══════════════════════════════
   v116 set all <p> to #8AAAC8 (too muted on dark blue bg).
   Use #C5DBF5 for readable body copy. Components keep their
   own explicit color values (they all use !important too).   */

html body p {
  color: #C5DBF5 !important;
  -webkit-text-fill-color: #C5DBF5 !important;
}
/* Preserve intentionally-subdued contexts */
html body .trust-pill,
html body .hero-subpage .hero-text,
html body .hero .hero-text,
html body .v12-price-desc,
html body .faq-answer p,
html body .px83-ribbon-card p,
html body .resource-card p,
html body .blog-home-card p,
html body .v12-bullet-card p,
html body .glass-card.v12-feature-card p,
html body .transit-quick-nav-v81 a {
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
}

/* ══ 2. SECTION-ALT BEFORE FIX ═══════════════════════════════
   -72px margin was breaking layout. Replace with a left-edge
   border accent that does not shift content.                 */

html body .section-alt::before {
  content: none !important;
  display: none !important;
}

/* ══ 3. EYEBROW — scope animation to hero only ═══════════════ */
.eyebrow::before {
  animation: none !important;
}
.hero-subpage .eyebrow::before,
.hero .eyebrow::before,
.pxv93-hero .eyebrow::before {
  animation: p15-blink 2.4s ease-in-out infinite !important;
}
/* Eyebrows in section bodies: no blinking dot, no pill box */
.section .eyebrow:not(.hero .eyebrow):not(.hero-subpage .eyebrow),
.section-alt .eyebrow:not(.hero .eyebrow):not(.hero-subpage .eyebrow) {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-family: var(--px-mono, monospace) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #00E0A8 !important;
  -webkit-text-fill-color: #00E0A8 !important;
  display: inline-block !important;
  margin-bottom: 12px !important;
}
.section .eyebrow::before,
.section-alt .eyebrow::before {
  display: none !important;
}

/* ══ 4. BLOG INDEX PAGE ═══════════════════════════════════════ */

/* Page wrapper */
html body .px83-blog-index {
  background: #070F1A !important;
  min-height: 100vh !important;
}

/* ── Hero shell: two-column layout ── */
html body .blog-index-shell {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 40px !important;
  align-items: start !important;
  padding-top: 100px !important;
  padding-bottom: 72px !important;
  position: relative !important;
  z-index: 2 !important;
}
@media (max-width: 960px) {
  html body .blog-index-shell {
    grid-template-columns: 1fr !important;
    padding-top: 80px !important;
    padding-bottom: 48px !important;
    gap: 32px !important;
  }
}

/* ── Blog hero copy (left) ── */
html body .blog-index-copy h1 {
  font-size: clamp(26px, 3.2vw, 50px) !important;
  font-weight: 800 !important;
  letter-spacing: -.03em !important;
  color: #EDF5FF !important;
  line-height: 1.08 !important;
  margin-bottom: 16px !important;
}
html body .blog-index-copy .hero-text {
  font-size: clamp(14px, 1.25vw, 17px) !important;
  line-height: 1.68 !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  max-width: 460px !important;
  margin-bottom: 28px !important;
}
html body .blog-index-copy .hero-actions {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

/* ── Featured article panel (right) ── */
html body .blog-featured-panel-v80 {
  display: flex !important;
  flex-direction: column !important;
  background: #0D1E30 !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: border-color .22s, transform .22s !important;
  cursor: pointer !important;
  grid-row: 1 / 2 !important;
  grid-column: 2 / 3 !important;
}
@media (max-width: 960px) {
  html body .blog-featured-panel-v80 {
    grid-column: 1 !important;
    grid-row: auto !important;
  }
}
html body .blog-featured-panel-v80:hover {
  border-color: rgba(0,224,168,.28) !important;
  transform: translateY(-2px) !important;
}
html body .blog-featured-panel-v80 .eyebrow {
  display: inline-block !important;
  font-family: var(--px-mono, monospace) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: #00E0A8 !important;
  -webkit-text-fill-color: #00E0A8 !important;
  background: rgba(0,224,168,.08) !important;
  border: 1px solid rgba(0,224,168,.20) !important;
  border-radius: 3px !important;
  padding: 4px 9px !important;
  margin: 16px 16px 0 !important;
  align-self: flex-start !important;
}
html body .blog-featured-panel-v80 img {
  width: 100% !important;
  height: 180px !important;
  object-fit: cover !important;
  display: block !important;
  margin-top: 12px !important;
  opacity: .88 !important;
}
html body .blog-featured-copy-v80 {
  padding: 18px 20px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
html body .blog-featured-copy-v80 .blog-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
html body .blog-featured-copy-v80 h2 {
  font-size: clamp(15px, 1.4vw, 20px) !important;
  font-weight: 700 !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
  line-height: 1.22 !important;
  margin: 0 !important;
}
html body .blog-featured-copy-v80 p {
  font-size: 13.5px !important;
  line-height: 1.60 !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
html body .blog-featured-copy-v80 .text-link {
  font-family: var(--px-mono, monospace) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  color: #00E0A8 !important;
  -webkit-text-fill-color: #00E0A8 !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
}

/* ── Insights grid (spans full width below hero copy + panel) */
html body .blog-insights-grid {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
@media (max-width: 800px) {
  html body .blog-insights-grid {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 500px) {
  html body .blog-insights-grid {
    grid-template-columns: 1fr !important;
  }
}
html body .blog-insight-card {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 10px !important;
  padding: 18px 16px !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  transition: border-color .2s !important;
}
html body .blog-insight-card:hover {
  border-color: rgba(0,224,168,.18) !important;
}
html body .blog-insight-card h2 {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
  margin: 0 0 7px !important;
  line-height: 1.3 !important;
}
html body .blog-insight-card p {
  font-size: 12.5px !important;
  line-height: 1.58 !important;
  color: #4C6480 !important;
  -webkit-text-fill-color: #4C6480 !important;
  margin: 0 !important;
}

/* ══ 5. BLOG ALL-ARTICLES SECTION ════════════════════════════ */

html body .blog-all-section {
  background: #070F1A !important;
  padding: 60px 0 80px !important;
}
html body .blog-all-band {
  display: block !important;
}
html body .blog-all-heading {
  text-align: left !important;
  margin-bottom: 32px !important;
}
html body .blog-all-heading h2 {
  font-size: clamp(20px, 2vw, 30px) !important;
  font-weight: 700 !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
  margin: 0 0 10px !important;
}
html body .blog-all-heading p {
  font-size: 15px !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  margin: 0 !important;
  max-width: 520px !important;
}
html body .blog-count-pill {
  display: inline-block !important;
  font-family: var(--px-mono, monospace) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: #00E0A8 !important;
  -webkit-text-fill-color: #00E0A8 !important;
  background: rgba(0,224,168,.06) !important;
  border: 1px solid rgba(0,224,168,.18) !important;
  border-radius: 20px !important;
  padding: 5px 12px !important;
  margin-top: 12px !important;
}

/* ══ 6. BLOG FILTER BAR ══════════════════════════════════════ */

html body .blog-filter-bar-v80 {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 28px !important;
  padding: 14px 16px !important;
  background: #0C1828 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  border-radius: 10px !important;
}
html body .blog-search-v80 {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 1 !important;
  min-width: 180px !important;
  background: #0A1825 !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 7px !important;
  padding: 8px 12px !important;
  color: #8AAAC8 !important;
  font-family: var(--px-mono, monospace) !important;
  font-size: 12px !important;
}
html body .blog-search-v80 input {
  background: none !important;
  border: none !important;
  outline: none !important;
  color: #C5DBF5 !important;
  -webkit-text-fill-color: #C5DBF5 !important;
  font-family: var(--px-mono, monospace) !important;
  font-size: 12px !important;
  width: 100% !important;
}
html body .blog-search-v80 input::placeholder {
  color: #4C6480 !important;
  -webkit-text-fill-color: #4C6480 !important;
}
html body .blog-topic-chips-v80 {
  display: flex !important;
  gap: 6px !important;
  flex-wrap: wrap !important;
}
html body .blog-topic-chip-v80 {
  display: inline-block !important;
  font-family: var(--px-mono, monospace) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 5px !important;
  padding: 6px 13px !important;
  cursor: pointer !important;
  transition: all .18s !important;
  white-space: nowrap !important;
}
html body .blog-topic-chip-v80:hover {
  border-color: rgba(0,224,168,.25) !important;
  color: #C5DBF5 !important;
  -webkit-text-fill-color: #C5DBF5 !important;
  background: rgba(0,224,168,.06) !important;
}
html body .blog-topic-chip-v80.active {
  background: rgba(0,224,168,.10) !important;
  border-color: rgba(0,224,168,.35) !important;
  color: #00E0A8 !important;
  -webkit-text-fill-color: #00E0A8 !important;
}

/* ══ 7. ARTICLE CARDS GRID ═══════════════════════════════════ */

html body .resource-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}
@media (max-width: 900px) {
  html body .resource-card-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 560px) {
  html body .resource-card-grid { grid-template-columns: 1fr !important; }
}

html body .glass-card.blog-home-card,
html body .resource-card {
  display: flex !important;
  flex-direction: column !important;
  background: #0D1E30 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  text-decoration: none !important;
  transition: border-color .20s, transform .20s !important;
  gap: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
html body .glass-card.blog-home-card:hover,
html body .resource-card:hover {
  border-color: rgba(0,224,168,.22) !important;
  transform: translateY(-2px) !important;
  background: #0D1E30 !important;
}

/* Card image */
html body .blog-home-visual,
html body .blog-home-visual-image-only {
  width: 100% !important;
  overflow: hidden !important;
  height: 160px !important;
  flex-shrink: 0 !important;
  order: 0 !important;
}
html body .blog-home-visual-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  opacity: .85 !important;
  transition: opacity .20s !important;
}
html body .glass-card.blog-home-card:hover .blog-home-visual-image,
html body .resource-card:hover .blog-home-visual-image {
  opacity: 1 !important;
}

/* Card copy */
html body .blog-home-card-copy {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  padding: 16px 18px 18px !important;
  flex: 1 !important;
  order: 1 !important;
}
html body .blog-meta-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
html body .blog-date {
  font-family: var(--px-mono, monospace) !important;
  font-size: 10.5px !important;
  color: #4C6480 !important;
  -webkit-text-fill-color: #4C6480 !important;
  letter-spacing: .04em !important;
}
html body .blog-home-card-copy h3 {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
  line-height: 1.28 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
html body .blog-home-card-copy p {
  font-size: 12.5px !important;
  line-height: 1.58 !important;
  color: #4C6480 !important;
  -webkit-text-fill-color: #4C6480 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
html body .blog-home-card-copy .text-link {
  font-family: var(--px-mono, monospace) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #00E0A8 !important;
  -webkit-text-fill-color: #00E0A8 !important;
  text-decoration: none !important;
  margin-top: auto !important;
}

/* Pill badge */
html body .pill {
  display: inline-block !important;
  font-family: var(--px-mono, monospace) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: rgba(0,224,168,.85) !important;
  -webkit-text-fill-color: rgba(0,224,168,.85) !important;
  background: rgba(0,224,168,.08) !important;
  border: 1px solid rgba(0,224,168,.18) !important;
  border-radius: 3px !important;
  padding: 3px 7px !important;
  white-space: nowrap !important;
}

/* Empty state */
html body .blog-empty-state-v80 {
  padding: 40px 0 !important;
  text-align: center !important;
  font-family: var(--px-mono, monospace) !important;
  font-size: 13px !important;
  color: #4C6480 !important;
  -webkit-text-fill-color: #4C6480 !important;
}

/* ══ 8. ARTICLE PAGE IMPROVEMENTS ════════════════════════════ */

html body .article-back-clean,
html body .article-back {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--px-mono, monospace) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  text-decoration: none !important;
  margin-bottom: 28px !important;
  transition: color .18s !important;
}
html body .article-back-clean:hover,
html body .article-back:hover {
  color: #00E0A8 !important;
  -webkit-text-fill-color: #00E0A8 !important;
}

html body .section-blog-article,
html body .article-page-clean {
  background: #070F1A !important;
}

html body .article-header-lead {
  font-size: clamp(15px, 1.3vw, 18px) !important;
  line-height: 1.66 !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  margin-bottom: 28px !important;
  max-width: 640px !important;
}

html body .article-hero-image {
  width: 100% !important;
  border-radius: 10px !important;
  margin: 24px 0 32px !important;
  opacity: .90 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}

/* ══ 9. BLOG HOME BAND (used on other pages) ═════════════════ */

html body .blog-home-band {
  padding: 0 !important;
}
html body .blog-home-band .section-heading,
html body .blog-home-band .section-head {
  text-align: left !important;
  margin-bottom: 24px !important;
}
html body .blog-home-band .section-heading h2,
html body .blog-home-band .section-head h2 {
  font-size: clamp(18px, 1.8vw, 26px) !important;
}
html body .blog-home-actions {
  margin-top: 20px !important;
}

/* ══ 10. TEXT-LINK GLOBAL ════════════════════════════════════ */

html body .text-link {
  color: #00E0A8 !important;
  -webkit-text-fill-color: #00E0A8 !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: opacity .18s !important;
}
html body .text-link:hover {
  opacity: .75 !important;
}

/* ══ 11. SECTION HEADINGS — fix contrast ════════════════════ */

html body .section-heading p,
html body .section-head p {
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
}
/* Ensure section body paragraphs are readable */
html body .section > .container > p,
html body .section-alt > .container > p {
  color: #C5DBF5 !important;
  -webkit-text-fill-color: #C5DBF5 !important;
}

/* ══ 12. HERO PAGE — hero-text readability ═══════════════════ */

html body .hero-subpage .hero-text,
html body .hero .hero-text {
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
}

/* ══ 13. HEADER FIX — nav legibility ════════════════════════ */

/* Ensure nav links are always legible */
html body header nav a,
html body .nav-list a,
html body .nav-link {
  color: rgba(205, 225, 255, 0.80) !important;
  -webkit-text-fill-color: rgba(205, 225, 255, 0.80) !important;
}
html body header nav a:hover,
html body .nav-list a:hover,
html body .nav-link:hover {
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
}
/* Kill any leftover glow spans in nav */
html body header .glow,
html body header .glow-1,
html body header .glow-2 {
  display: none !important;
}

/* ══ 14. REDUCE TEAL AGGRESSION SITE-WIDE ════════════════════ */

/* Mute the grid-lines opacity a touch */
html body .hero-subpage .hero-backdrop .grid-lines,
html body .transit-hero-backdrop-v81 .grid-lines {
  opacity: .60 !important;
}
/* Tone down glass-card hover teal border */
html body .glass-card:hover {
  border-color: rgba(0,224,168,.16) !important;
}

/* ══ 15. FAQ — answer text ═══════════════════════════════════ */
html body .faq-answer,
html body .faq-answer p,
html body .faq-body,
html body .faq-body p {
  color: #C5DBF5 !important;
  -webkit-text-fill-color: #C5DBF5 !important;
  font-size: 14.5px !important;
  line-height: 1.70 !important;
}

/* ══ 16. TRANSIT INSIGHT BAND ════════════════════════════════ */
html body .transit-insight-band .resource-card h3 {
  font-size: 14px !important;
}

/* ══ 17. SECTION BACKGROUND DE-SATURATION ════════════════════
   v116 used #070F1A and #0C1828 (saturated dark blue).
   Switch to near-neutral charcoal so the site looks less
   like a generic "AI blue" product.                          */

html body .section {
  background: #09090F !important;
}
html body .section-alt {
  background: #0E0F18 !important;
  border-top: 1px solid rgba(255,255,255,.04) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}
/* Keep the transit hero and hero-subpage dark navy as designed */
html body .hero-subpage,
html body .hero-subpage.transit-hero-v81 {
  background: #060B14 !important;
}
/* Proof strip above sections */
html body .transit-proof-strip-v81 {
  background: #0B0C15 !important;
}
/* Architecture ribbon stays slightly distinct */
html body .px83-architecture-ribbon {
  background: #0D0E18 !important;
}
/* Keep glass card backgrounds at contrasting dark navy */
/* (no change needed — #0D1E30 still works on #09090F) */

/* ══ 18. FOOTPRINT MAP — DARK THEME ══════════════════════════
   The SVG sea gradient and land fills use light/white colors
   designed for a white-background site. Override them to dark
   so the map matches the dark design.                         */

html body .footprint-map > rect {
  fill: #06101C !important;
}
/* Land mass paths — all except map-route and map-dot */
html body .footprint-map > g:not(.map-route-group):not(.map-labels) > path {
  fill: #1A2E47 !important;
}
html body .footprint-map .map-route {
  fill: none !important;
}
html body .footprint-map .map-route.live {
  stroke: #00D4A0 !important;
  stroke-width: 3 !important;
}
html body .footprint-map .map-route.soon {
  stroke: rgba(245,165,36,.55) !important;
  stroke-width: 2.5 !important;
}
html body .footprint-map .map-dot.live {
  fill: #00E0A8 !important;
  filter: drop-shadow(0 0 6px rgba(0,224,168,.5)) !important;
}
html body .footprint-map .map-dot.soon {
  fill: rgba(245,165,36,.80) !important;
  filter: drop-shadow(0 0 5px rgba(245,165,36,.35)) !important;
}
/* Label backgrounds to match dark card */
html body .footprint-map .map-labels rect {
  fill: rgba(0,224,168,.10) !important;
}
html body .footprint-map .map-labels text {
  fill: #C5DBF5 !important;
  font-size: 13px !important;
}
/* Footprint map card: dark */
html body .footprint-map-card {
  background: #0D1A2B !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
/* City cards */
html body .footprint-city-card {
  background: #0D1A2B !important;
  border: 1px solid rgba(255,255,255,.07) !important;
}
html body .footprint-city-card strong {
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
}
html body .footprint-status.live {
  background: rgba(0,224,168,.10) !important;
  color: #00E0A8 !important;
  -webkit-text-fill-color: #00E0A8 !important;
}
html body .footprint-status.soon {
  background: rgba(245,165,36,.10) !important;
  color: rgba(245,165,36,.85) !important;
  -webkit-text-fill-color: rgba(245,165,36,.85) !important;
}
html body .legend-dot.live {
  background: #00E0A8 !important;
}
html body .legend-dot.soon {
  background: rgba(245,165,36,.85) !important;
}
html body .legend-item {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  font-size: 12.5px !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
}

/* ══ 19. ENTERPRISE / STRATEGY / PRESERVE BANDS ═════════════
   These glass-cards are already dark from html body .glass-card
   but we add explicit padding and heading treatment here.     */

html body .strategy-copy,
html body .enterprise-copy-card {
  padding: 32px 28px !important;
}
html body .strategy-copy h2,
html body .enterprise-copy-card h2 {
  font-size: clamp(18px, 2vw, 26px) !important;
  font-weight: 700 !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
  margin-bottom: 12px !important;
}
html body .strategy-copy p,
html body .enterprise-copy-card p {
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  font-size: 14.5px !important;
  line-height: 1.68 !important;
  margin-bottom: 0 !important;
}
html body .strategy-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 18px 0 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
}
html body .strategy-list li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 9px !important;
  font-size: 13.5px !important;
  color: #C5DBF5 !important;
  -webkit-text-fill-color: #C5DBF5 !important;
  line-height: 1.5 !important;
}
html body .strategy-list li svg {
  color: #00E0A8 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
  width: 13px !important;
  height: 13px !important;
}
html body .strategy-card,
html body .strategy-note,
html body .enterprise-card,
html body .enterprise-note,
html body .ops-step-card {
  padding: 20px 18px !important;
}
html body .strategy-card h3,
html body .enterprise-card h3,
html body .ops-step-card h3 {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
  margin-bottom: 7px !important;
}
html body .strategy-card p,
html body .enterprise-card p,
html body .ops-step-card p {
  font-size: 13px !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  margin: 0 !important;
  line-height: 1.60 !important;
}
html body .strategy-note strong,
html body .enterprise-note strong {
  display: block !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(0,224,168,.80) !important;
  -webkit-text-fill-color: rgba(0,224,168,.80) !important;
  font-family: var(--px-mono, monospace) !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
}
html body .strategy-note p,
html body .enterprise-note p {
  font-size: 12.5px !important;
  color: #4C6480 !important;
  -webkit-text-fill-color: #4C6480 !important;
  margin: 0 !important;
}

/* ops-flow grid */
html body .ops-flow-grid,
html body .preserve-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-top: 32px !important;
}
@media (max-width: 800px) {
  html body .ops-flow-grid,
  html body .preserve-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 500px) {
  html body .ops-flow-grid,
  html body .preserve-grid { grid-template-columns: 1fr !important; }
}

/* enterprise-cards stack */
html body .enterprise-cards,
html body .strategy-cards {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* ══ 20. TRANSIT HERO KICKER + MISC HERO FIXES ═══════════════ */
html body .transit-hero-kicker-v81 {
  font-size: 14px !important;
  color: rgba(0,224,168,.75) !important;
  -webkit-text-fill-color: rgba(0,224,168,.75) !important;
  font-family: var(--px-mono, monospace) !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  margin-top: 18px !important;
  padding: 10px 0 10px 14px !important;
  border-left: 2px solid rgba(0,224,168,.35) !important;
}

/* ══ 21. STEPS & TIMELINE ════════════════════════════════════ */
html body .steps-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
html body .timeline-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
}
@media (max-width: 800px) {
  html body .steps-grid,
  html body .timeline-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 500px) {
  html body .steps-grid,
  html body .timeline-grid { grid-template-columns: 1fr !important; }
}
html body .step-card,
html body .timeline-card {
  padding: 22px 20px !important;
}
html body .step-card h3,
html body .timeline-card h3 {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
  margin-bottom: 8px !important;
}
html body .step-card p,
html body .timeline-card p {
  font-size: 13px !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  margin: 0 !important;
}

/* ══ 22. TWO-COL / INFO-PANEL / STACKED ══════════════════════ */
html body .two-col {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
  align-items: start !important;
}
@media (max-width: 800px) {
  html body .two-col { grid-template-columns: 1fr !important; }
}
html body .info-panel {
  padding: 28px 24px !important;
}
html body .stacked-panels {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* ══ 23. CTA BAND — further de-blue ══════════════════════════ */
html body .cta-band {
  background: linear-gradient(135deg, #0C111E, #0F172A) !important;
}

/* ══ 24. PRICING FOOTNOTES ═══════════════════════════════════ */
html body .pricing-footnotes,
html body .footnote {
  font-size: 12px !important;
  color: #4C6480 !important;
  -webkit-text-fill-color: #4C6480 !important;
  line-height: 1.6 !important;
  margin-top: 16px !important;
}

/* ══ 25. SECTION-HEADING CENTER ══════════════════════════════ */
html body .section-heading.center,
html body .preserve-heading {
  text-align: center !important;
  max-width: 640px !important;
  margin: 0 auto 40px !important;
}
html body .section-heading h2 {
  font-size: clamp(20px, 2.2vw, 32px) !important;
  font-weight: 700 !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
  margin: 8px 0 12px !important;
}
html body .section-heading p {
  font-size: 15.5px !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ══ 26. PRICING CARDS ═══════════════════════════════════════ */
html body .pricing-card {
  padding: 24px 20px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}
html body .pricing-card > span {
  display: block !important;
  font-family: var(--px-mono, monospace) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  color: #4C6480 !important;
  -webkit-text-fill-color: #4C6480 !important;
  margin-bottom: 4px !important;
}
html body .pricing-card > strong {
  font-family: var(--px-mono, monospace) !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
}
html body .pricing-card.featured > strong {
  color: #00E0A8 !important;
  -webkit-text-fill-color: #00E0A8 !important;
}
html body .pricing-card.featured {
  border-color: rgba(0,224,168,.30) !important;
  background: rgba(0,224,168,.04) !important;
}
html body .pricing-card > p {
  font-size: 12px !important;
  color: #4C6480 !important;
  -webkit-text-fill-color: #4C6480 !important;
  margin: 0 !important;
}
html body .pricing-footnotes {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 16px !important;
}
html body .footnote {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12px !important;
  color: #4C6480 !important;
  -webkit-text-fill-color: #4C6480 !important;
}
html body .footnote svg {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0 !important;
  color: rgba(0,224,168,.5) !important;
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.5 !important;
  stroke-linecap: round !important;
}

/* ══ 27. ICON CARDS — reduce over-teal card-icon ═════════════ */
html body .glass-card.icon-card {
  padding: 22px 20px !important;
}
html body .card-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  display: inline-grid !important;
  place-items: center !important;
  margin-bottom: 14px !important;
  background: rgba(255,255,255,.05) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
}
html body .card-icon svg {
  width: 18px !important;
  height: 18px !important;
  stroke: rgba(0,224,168,.80) !important;
  fill: none !important;
  stroke-width: 1.8 !important;
}
html body .glass-card.icon-card h3 {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #EDF5FF !important;
  -webkit-text-fill-color: #EDF5FF !important;
  margin-bottom: 8px !important;
}
html body .glass-card.icon-card p {
  font-size: 13px !important;
  color: #8AAAC8 !important;
  -webkit-text-fill-color: #8AAAC8 !important;
  line-height: 1.60 !important;
  margin: 0 !important;
}