@import url('/assets/css/sf-pro-fonts.css');
/* ==========================================================================
   ADI COMMUNICATIONS - APPLE & NIKE UNIFIED DESIGN SYSTEM
   Standardizes hero layout, typography, line-heights, pill buttons,
   centered mobile narrative layouts, and fast mobile rendering across all pages.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. UNIVERSAL HERO TYPOGRAPHY & LAYOUT STANDARD (All Viewports)
   Enforces identical font sizing, line heights, and visual weight across all pages.
   -------------------------------------------------------------------------- */
#hero h1,
#hero h2,
.hero-slide h1,
.hero-slide h2,
#overview h1,
#overview h2,
.tv-hero h1,
.tv-hero h2,
.hero-content-layer h1,
.hero-content-layer h2,
.chapter-section:first-of-type h1,
main > section:first-of-type h1 {
  font-family: "SF Pro Display", "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: clamp(2rem, 3.5vw, 2.75rem) !important; /* 32px on tablet, 44px on desktop */
  line-height: 1.12 !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
  text-transform: none !important;
  text-wrap: balance !important;
  color: #ffffff !important;
}

#hero h1 span,
#hero h2 span,
.hero-slide h1 span,
.hero-slide h2 span,
#overview h1 span,
#overview h2 span,
.tv-hero h1 span,
.tv-hero h2 span,
.hero-content-layer h1 span,
.hero-content-layer h2 span,
.chapter-section:first-of-type h1 span,
main > section:first-of-type h1 span {
  font-family: "SF Pro Display", "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 700 !important;
  text-transform: none !important;
  line-height: 1.12 !important;
}

/* 2 Colours Standard: Line 1 White, Line 2 Warm Peach Accent (#FFA07A) */
#hero h1 span:first-child,
#hero h2 span:first-child,
.hero-slide h1 span:first-child,
.hero-slide h2 span:first-child,
#overview h1 span:first-child,
#overview h2 span:first-child,
.tv-hero h1 span:first-child,
.hero-content-layer h1 span:first-child,
.chapter-section:first-of-type h1 span:first-child,
main > section:first-of-type h1 span:first-child {
  color: #ffffff !important;
}

#hero h1 span:last-child,
#hero h2 span:last-child,
.hero-slide h1 span:last-child,
.hero-slide h2 span:last-child,
#overview h1 span:last-child,
#overview h2 span:last-child,
.tv-hero h1 span:last-child,
.hero-content-layer h1 span:last-child,
.chapter-section:first-of-type h1 span:last-child,
main > section:first-of-type h1 span:last-child,
#hero h1 span:nth-child(2),
#hero h2 span:nth-child(2),
.hero-slide h1 span:nth-child(2),
.hero-slide h2 span:nth-child(2),
#overview h1 span:nth-child(2),
#overview h2 span:nth-child(2),
.tv-hero h1 span:nth-child(2),
.hero-content-layer h1 span:nth-child(2),
.chapter-section:first-of-type h1 span:nth-child(2),
main > section:first-of-type h1 span:nth-child(2) {
  color: #FFA07A !important;
}

#hero #hero-lead-text,
#overview #hero-lead-text,
#hero p.lead,
#overview p.lead,
.chapter-section:first-of-type p:first-of-type,
main > section:first-of-type p:first-of-type {
  font-size: clamp(0.9375rem, 1.25vw, 1.0625rem) !important; /* 15px to 17px */
  line-height: 1.65 !important;
  color: #e2e8f0 !important;
  max-width: 44rem !important;
}

/* Universal Hero Section Viewport Fit (Desktop) - Perfect Height */
@media (min-width: 1024px) {
  #hero,
  #overview,
  .chapter-section:first-of-type,
  main > section:first-of-type {
    min-height: 560px !important;
    max-height: 820px !important;
    height: calc(100vh - 108px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  #hero .hero-content-layer,
  #overview .hero-content-layer,
  #overview > div.relative.z-10,
  #overview > div.relative.z-20,
  .chapter-section:first-of-type > div.relative.z-10,
  .chapter-section:first-of-type > div.relative.z-20,
  main > section:first-of-type > div.relative.z-10,
  main > section:first-of-type > div.relative.z-20 {
    padding-top: 1rem !important;
    padding-bottom: 1.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
  }
}

#hero h1,
#overview h1,
.chapter-section:first-of-type h1,
main > section:first-of-type h1 {
  margin-bottom: 0.65rem !important;
}

#hero #hero-lead-text,
#overview #hero-lead-text,
#hero p.lead,
#overview p.lead,
.chapter-section:first-of-type p#hero-lead-text,
main > section:first-of-type p#hero-lead-text {
  margin-bottom: 0.85rem !important;
}

/* Apple & Nike Luxury Pill Buttons (Desktop & Mobile) */
#hero a[href^="tel"],
#hero a[onclick*="Sophie"],
#hero button[onclick*="Sophie"],
#overview a[href^="tel"],
#overview a[href^="#"],
#overview a[onclick*="Sophie"],
#overview button[onclick*="Sophie"],
#hero-cta-buttons a,
#hero-cta-buttons button,
#cta a[href^="tel"],
#cta a[href^="#"],
.chapter-section a[href^="tel"],
.chapter-section a[href^="#"] {
  border-radius: 9999px !important;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  gap: 8px !important;
  box-sizing: border-box !important;
}

#hero-cta-buttons a span,
#hero-cta-buttons button span,
#hero a[href^="tel"] span,
#hero button[onclick*="Sophie"] span,
#overview a[href^="tel"] span,
#overview button[onclick*="Sophie"] span,
.chapter-section a[href^="tel"] span,
.chapter-section button[onclick*="Sophie"] span {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

#hero a:active,
#hero button:active,
#overview a:active,
#overview button:active,
#hero-cta-buttons a:active,
#hero-cta-buttons button:active,
#cta a:active,
.chapter-section a:active {
  transform: scale(0.98) !important;
}

/* --------------------------------------------------------------------------
   GLOBAL PILL & BADGE INTEGRITY (Mobile & Desktop)
   Guarantees zero 2-line breaking: every pill stays strictly on 1 single line.
   -------------------------------------------------------------------------- */
[class*="rounded-full"]:not(button):not(a):not(nav):not(#scrollspy-dots),
.rounded-full:not(button):not(a):not(nav):not(#scrollspy-dots),
#hero-badge-text,
.hero-badge,
.section-badge {
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Section Navigation Dots: STRICTLY VERTICAL COLUMN ON THE RIGHT */
#scrollspy-dots,
nav#scrollspy-dots {
  display: none !important;
}

@media (min-width: 768px) {
  #scrollspy-dots,
  nav#scrollspy-dots {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    width: auto !important;
    min-width: 32px !important;
    max-width: 48px !important;
    white-space: normal !important;
    position: fixed !important;
    right: 1.25rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 40 !important;
  }
}

[class*="rounded-full"]:not(button):not(a) *:not(.hidden):not(.sm\:hidden),
.rounded-full:not(button):not(a) *:not(.hidden):not(.sm\:hidden) {
  white-space: nowrap !important;
}

[class*="rounded-full"] span[class*="animate-pulse"],
[class*="rounded-full"] span[class*="animate-ping"],
.rounded-full span[class*="animate-pulse"],
.rounded-full span[class*="animate-ping"] {
  display: inline-block !important;
  flex-shrink: 0 !important;
}

/* Hero Badge / Live Status Ticker Pill */
#hero #hero-badge-text,
#overview #hero-badge-text,
#hero .font-mono,
#overview .font-mono {
  letter-spacing: 0.04em !important;
}

/* --------------------------------------------------------------------------
   HERO TELEMETRY HUD - DESKTOP ONLY (>= 640px)
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
  #hero-telemetry,
  .hero-telemetry-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.375rem !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.25rem !important;
  }
}

@media (max-width: 639px) {
  #hero-telemetry,
  .hero-telemetry,
  .hero-telemetry-row,
  [id^="hero-telemetry"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-content: safe center !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
}

#hero-telemetry::-webkit-scrollbar,
.hero-telemetry::-webkit-scrollbar,
.hero-telemetry-row::-webkit-scrollbar,
[id^="hero-telemetry"]::-webkit-scrollbar {
  display: none !important;
}

#hero-telemetry > div,
#hero-telemetry > span,
.hero-telemetry-row > div,
.hero-telemetry-row > span {
  flex-shrink: 0 !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.3rem 0.65rem !important;
  font-size: 0.6875rem !important; /* 11px */
  line-height: 1 !important;
  border-radius: 9999px !important;
  background: rgba(0, 0, 0, 0.65) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #e2e8f0 !important;
}

/* Hide any raw text separators or bullets between telemetry pills */
#hero-telemetry > span:not([class*="pill"]):not([class*="flex"]):not([class*="inline"]):not([class*="rounded"]) {
  display: none !important;
}

/* --------------------------------------------------------------------------
   2. MOBILE VIEWPORT POLISH (max-width: 639px)
   Apple & Nike Clean Centered Narrative, Scannable Cards, Zero Clutter.
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  /* Apple Frosted Luxury Card Mobile Hero: Scaled Viewport Fit so 9.98 Peeks at Bottom */
  #hero,
  #overview,
  .starlink-hero,
  section[class*="starlink-hero"] {
    position: relative !important;
    height: auto !important;
    min-height: calc(100svh - 170px) !important;
    max-height: calc(100svh - 155px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    overflow: hidden !important;
    padding: 8px 10px 10px 10px !important;
    box-sizing: border-box !important;
  }

  @supports not (height: 100svh) {
    #hero,
    #overview,
    .starlink-hero,
    section[class*="starlink-hero"] {
      min-height: 500px !important;
      max-height: 555px !important;
    }
  }

  /* Mobile Text Centering & Centered Margin for Hero and Overview */
  #hero .hero-content-layer,
  #overview .hero-content-layer {
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-width: min(92vw, 420px) !important;
    box-sizing: border-box !important;
  }

  /* Center section main headings on mobile */
  .chapter-section h1,
  .chapter-section h2,
  #hero h1,
  #hero h2,
  #overview h1,
  #overview h2,
  #cta h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  /* Center hero lead and section top intro paragraphs ONLY (never cards, lists, or steps) */
  #hero p,
  #overview p.lead,
  .section-intro,
  .section-lead,
  #cta p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    max-width: 34rem;
  }

  /* ==========================================================================
     STRICT LEFT-ALIGNMENT FOR ALL LISTS, BULLET POINTS & PROCESS STEPS
     Lists must NEVER be centered on mobile - icons & text must align flush left.
     ========================================================================== */
  ul,
  ol,
  li,
  ul li,
  ol li,
  .chapter-section ul,
  .chapter-section ol,
  .chapter-section li,
  section ul,
  section ol,
  section li,
  .parallax-text-column ul,
  .parallax-text-column ol,
  .parallax-text-column li,
  [class*="space-y"] > li,
  .feature-list,
  .feature-list li,
  .pricing-features,
  .pricing-features li,
  .step-card,
  .process-card,
  [class*="step-"],
  [class*="space-y-"] > .flex.items-start {
    text-align: left !important;
    justify-content: flex-start !important;
  }

  ul,
  ol {
    padding-left: 0;
  }

  ul li,
  ol li,
  li {
    text-align: left !important;
  }

  ul li *,
  ol li *,
  li *,
  li p,
  li span,
  li div,
  li strong {
    text-align: left !important;
  }

  /* Flex list items: checkmark / bullet on the left, text flowing flush left */
  li.flex,
  ul li.flex,
  ol li.flex,
  div.flex.items-start {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  li.flex > *,
  ul li.flex > *,
  ol li.flex > *,
  div.flex.items-start > * {
    text-align: left !important;
  }

  /* Keep accordion summary questions & answers natural and left-aligned */
  details,
  details summary,
  details p,
  details div,
  details ul,
  details li {
    text-align: left !important;
  }

  /* Card content, feature grids, and step procedures: strictly left-aligned */
  .grid .space-y-1,
  .grid .space-y-2,
  .grid .space-y-3,
  .grid .p-6,
  .grid .p-8,
  .glass-card-luxury,
  .step-card,
  .bento-card,
  .tilt-card {
    text-align: left !important;
  }

  .grid .space-y-1 *,
  .grid .space-y-2 *,
  .grid .space-y-3 *,
  .glass-card-luxury *,
  .bento-card p,
  .bento-card span,
  .bento-card ul,
  .bento-card li {
    text-align: left !important;
  }

  /* Center section badges & live pills on mobile, ensuring strict single-line horizontal fit */
  .chapter-section .inline-flex,
  #hero .inline-flex,
  #overview .inline-flex,
  #coverage .inline-flex,
  #cta .inline-flex,
  div[class*="rounded-full"]:not(button):not(a),
  span[class*="rounded-full"]:not(button):not(a) {
    margin-left: auto;
    margin-right: auto;
    white-space: nowrap !important;
    max-width: calc(100vw - 32px) !important;
    font-size: 0.6875rem !important; /* 11px */
    line-height: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
  }

  /* --------------------------------------------------------------------------
     MOBILE UNIFIED TYPOGRAPHIC SYSTEM (< 640px)
     Guarantees 100% identical header sizes, line-heights, and prose sizing
     across every single section, hero slide, and content card.
     -------------------------------------------------------------------------- */

  /* 1. HERO HEADINGS (H1 and all Hero Slide Headlines - Apple 32px / 21px Scale) */
  h1,
  #hero h1,
  #overview h1,
  .hero-slide h1,
  .hero-slide h2,
  .tv-hero h1,
  .tv-hero h2,
  .hero-content-layer h1,
  .hero-content-layer h2,
  #hero-slider-viewport h1,
  #hero-slider-viewport h2,
  .chapter-section:first-of-type h1,
  main > section:first-of-type h1 {
    font-family: "SF Pro Display", "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 2rem !important; /* 32px - Apple exact mobile product title */
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
  }

  /* All lines inside hero slide headline - 100% SAME FONT, SAME SIZE, SAME WEIGHT */
  .hero-slide h1 span,
  .hero-slide h2 span,
  #hero h1 span,
  #hero h2 span,
  #overview h1 span,
  #overview h2 span,
  .tv-hero h1 span,
  .tv-hero h2 span,
  .hero-content-layer h1 span,
  .hero-content-layer h2 span,
  .chapter-section:first-of-type h1 span,
  main > section:first-of-type h1 span {
    font-family: "SF Pro Display", "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 2rem !important; /* 32px - exact same size on all lines */
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    font-weight: 700 !important;
    text-transform: none !important;
    display: block !important;
  }

  /* 2 Colours Standard: Line 1 White, Line 2 Warm Peach Accent (#FFA07A) */
  .hero-slide h1 span:first-child,
  .hero-slide h2 span:first-child,
  #hero h1 span:first-child,
  #hero h2 span:first-child,
  #overview h1 span:first-child,
  #overview h2 span:first-child,
  .tv-hero h1 span:first-child,
  .hero-content-layer h1 span:first-child,
  .chapter-section:first-of-type h1 span:first-child,
  main > section:first-of-type h1 span:first-child {
    color: #ffffff !important;
  }

  .hero-slide h1 span:last-child,
  .hero-slide h2 span:last-child,
  #hero h1 span:last-child,
  #hero h2 span:last-child,
  #overview h1 span:last-child,
  #overview h2 span:last-child,
  .tv-hero h1 span:last-child,
  .hero-content-layer h1 span:last-child,
  .chapter-section:first-of-type h1 span:last-child,
  main > section:first-of-type h1 span:last-child,
  .hero-slide h1 span:nth-child(2),
  .hero-slide h2 span:nth-child(2),
  #hero h1 span:nth-child(2),
  #hero h2 span:nth-child(2),
  #overview h1 span:nth-child(2),
  #overview h2 span:nth-child(2),
  .tv-hero h1 span:nth-child(2),
  .hero-content-layer h1 span:nth-child(2),
  .chapter-section:first-of-type h1 span:nth-child(2),
  main > section:first-of-type h1 span:nth-child(2) {
    color: #FFA07A !important;
  }

  /* 2. SECTION HEADINGS (All H2s across all content chapters & sections - Apple 28px) */
  h2,
  .chapter-section h2,
  section h2,
  #coverage h2,
  #pricing h2,
  #process h2,
  #faq h2,
  #faqs h2,
  section[id*="faq"] h2,
  #reviews h2,
  #cta h2,
  .parallax-section h2,
  #ajax-stage-text-intro h2 {
    font-family: "SF Pro Display", "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 1.75rem !important; /* 28px - Apple exact mobile section title */
    line-height: 1.15 !important;
    letter-spacing: -0.025em !important;
    font-weight: 700 !important;
    text-transform: none !important;
    text-align: center !important;
    margin-bottom: 0.75rem !important;
  }

  /* Hero slide H2s must stay at hero title size (32px) */
  .hero-slide h2,
  #hero-slider-viewport h2,
  #hero h2 {
    font-size: 2rem !important; /* 32px */
    line-height: 1.1 !important;
    letter-spacing: -0.025em !important;
    font-weight: 700 !important;
    text-transform: none !important;
  }

  /* 3. SUBHEADINGS & CARD TITLES (All H3s across cards, bento blocks, steps - Apple 20px) */
  h3,
  .chapter-section h3,
  section h3,
  .tilt-card h3,
  .bento-card h3,
  #ajax-full-hero-specs h3,
  details summary h3,
  .faq-accordion-item h3 {
    font-family: "SF Pro Display", "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 1.25rem !important; /* 20px - Apple exact card title */
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
    font-weight: 600 !important;
    text-transform: none !important;
    margin-bottom: 0.5rem !important;
  }

  /* 4. MICRO HEADINGS & FEATURE TITLES (All H4s across grids and specs - Apple 15px) */
  h4,
  .chapter-section h4,
  section h4 {
    font-family: "SF Pro Display", "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    font-weight: 600 !important;
    text-transform: none !important;
    margin-bottom: 0.35rem !important;
  }

  /* 5. HERO LEAD & SECTION INTRO PARAGRAPHS - Apple 15px */
  #hero .hero-slide p,
  .hero-slide p,
  #hero p,
  #hero #hero-lead-text,
  #overview #hero-lead-text,
  #hero p.lead,
  #overview p.lead,
  .section-lead,
  .chapter-section:first-of-type p:first-of-type,
  main > section:first-of-type p:first-of-type,
  #ajax-stage-text-intro p {
    font-family: "SF Pro Display", "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 0.9375rem !important; /* 15px - Apple exact mobile body */
    line-height: 1.55 !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1.25rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* 6. GENERAL BODY PROSE & LISTS - Apple 15px */
  p,
  li {
    font-family: "SF Pro Display", "SF Pro Text", "SF Pro", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.55 !important;
  }

  /* 7. ACCORDION SUMMARY & QUESTIONS */
  details summary {
    font-size: 0.9375rem !important; /* 15px */
    line-height: 1.35 !important;
    font-weight: 700 !important;
  }

  /* Mobile Luxury Pill Buttons (Full Width, Centered, Stacked) */
  #overview a[href^="#"],
  #overview a[href^="tel"],
  #overview a[onclick*="Sophie"],
  #overview button[onclick*="Sophie"],
  #cta a[href^="tel"],
  #cta a[href^="#"],
  .chapter-section a[href^="tel"],
  .chapter-section a[href^="#"] {
    border-radius: 9999px !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    font-size: 0.8125rem !important; /* 13px */
    width: 100% !important;
    max-width: 22rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    white-space: nowrap !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  #hero-cta-buttons a > span,
  #hero-cta-buttons button > span,
  #hero a > span,
  #hero button > span,
  #overview a > span,
  #overview button > span,
  .chapter-section a > span,
  .chapter-section button > span {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* Button groups center and stack vertically */
  #hero .flex-col,
  #hero .sm\\:flex-row,
  #hero-cta-buttons,
  #overview .flex-col,
  #overview .sm\\:flex-row,
  #cta .flex-col,
  #cta .sm\\:flex-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
  }

  /* Clean Grid Rhythm on Mobile */
  .chapter-section .grid {
    gap: 1.5rem !important;
  }

  /* Card inner padding on mobile */
  .chapter-section .p-6,
  .chapter-section .p-8 {
    padding: 1.25rem !important;
  }

  /* Spec lists & feature bullets inside cards stay left-aligned for scannability */
  .chapter-section .space-y-3,
  .chapter-section ul {
    text-align: left !important;
  }

  /* Postal district cards grid on mobile */
  #coverage .grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  #coverage .grid > div {
    padding: 1rem !important;
    text-align: left !important;
  }

  /* Pricing bento cards on mobile */
  #pricing .grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }
}

/* ==========================================================================
   APPLE DESIGN SYSTEM: BULLETPROOF HERO BUTTONS (MOBILE 2-COLUMN GRID)
   ========================================================================== */
@media (max-width: 640px) {
  #hero-cta-buttons,
  .hero-cta-buttons-container,
  .hero-content-layer #hero-cta-buttons,
  .hero-content-layer .hero-cta-buttons-container {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-top: 8px !important;
    box-sizing: border-box !important;
  }

  #hero-cta-buttons a,
  #hero-cta-buttons button,
  .hero-cta-buttons-container a,
  .hero-cta-buttons-container button,
  .hero-content-layer #hero-cta-buttons a,
  .hero-content-layer #hero-cta-buttons button,
  .hero-content-layer .hero-cta-buttons-container a,
  .hero-content-layer .hero-cta-buttons-container button,
  #hero .hero-content-layer a[href^="tel:"],
  #hero .hero-content-layer button[onclick*="openSophieChat"],
  #hero .hero-content-layer button[onclick*="Sophie"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    max-height: 48px !important;
    padding: 0 12px !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif !important;
    font-size: 15px !important;
    line-height: normal !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    gap: 6px !important;
    box-sizing: border-box !important;
    text-transform: none !important;
    text-decoration: none !important;
    transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.16s ease, background 0.16s ease !important;
  }

  #hero-cta-buttons a span,
  #hero-cta-buttons button span,
  .hero-cta-buttons-container a span,
  .hero-cta-buttons-container button span,
  .hero-content-layer #hero-cta-buttons a span,
  .hero-content-layer #hero-cta-buttons button span,
  .hero-content-layer .hero-cta-buttons-container a span,
  .hero-content-layer .hero-cta-buttons-container button span {
    font-size: 15px !important;
    font-weight: 700 !important;
  }

  #hero-cta-buttons a:active,
  #hero-cta-buttons button:active,
  .hero-cta-buttons-container a:active,
  .hero-cta-buttons-container button:active {
    transform: scale(0.97) !important;
  }

  #hero-cta-buttons a span.desktop-only,
  #hero-cta-buttons button span.desktop-only,
  .hero-cta-buttons-container a span.desktop-only,
  .hero-cta-buttons-container button span.desktop-only {
    display: none !important;
  }
}

/* Hero Pills: Explicit immunity from Action Button sizing */
.hero-pill,
.hero-reviews-pill,
.hero-category-pill,
.hero-unified-pill,
#hero .hero-pill,
#hero .hero-reviews-pill,
#hero .hero-category-pill,
#hero .hero-unified-pill {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: normal !important;
    flex: 0 0 auto !important;
    padding: 4px 10px !important;
    font-size: 11px !important;
    border-radius: 9999px !important;
}

/* Header Brand Logo: Signature Brand Orange, changes to Black on touch / hover */
header a.group .w-10.h-10,
header a.group div[class*="rounded-xl"],
.header-logo-badge {
    background-color: #FF5500 !important;
    color: #ffffff !important;
    transition: background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.16s ease !important;
}

header a.group:hover .w-10.h-10,
header a.group:active .w-10.h-10,
header a.group:hover div[class*="rounded-xl"],
header a.group:active div[class*="rounded-xl"],
header a.group .w-10.h-10:active,
header a.group div[class*="rounded-xl"]:active {
    background-color: #1D1D1F !important;
    color: #ffffff !important;
    transform: scale(0.96);
}


/* ==========================================================================
   HOMEPAGE MOBILE POLISH (CENTRALIZED PILLS, HEADINGS & PARAGRAPHS, STRICT LEFT LISTS)
   ========================================================================== */
@media (max-width: 639px) {
  /* Center Trust Plate Quote ("Friendly, knowledgeable...") on mobile */
  .trust-plate .lg\:col-span-6,
  .trust-plate div[class*="border-x"],
  .trust-plate p,
  .trust-plate cite {
    text-align: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  /* Center category / section pills above headings */
  .parallax-text-column > div:first-child,
  .reveal-item:has(> span[class*="font-mono"]),
  .section-badge-wrapper {
    justify-content: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center headings and lead paragraphs in parallax text columns */
  .parallax-text-column > h2,
  .parallax-text-column > p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* STRICT LEFT-ALIGNMENT FOR ALL LISTS WITH ORANGE TICKS */
  .parallax-text-column ul,
  .parallax-text-column ol,
  .parallax-text-column li,
  ul.reveal-item,
  ul.reveal-item li,
  ul.reveal-item li span,
  ul.reveal-item li strong {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  ul.reveal-item,
  .parallax-text-column ul {
    width: 100% !important;
    display: block !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }

  ul.reveal-item li,
  .parallax-text-column ul li {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
  }

  ul.reveal-item li > span:first-child,
  .parallax-text-column ul li > span:first-child {
    flex-shrink: 0 !important;
    margin-top: 1px !important;
    line-height: 1.25 !important;
    text-align: left !important;
  }

  ul.reveal-item li > span:last-child,
  .parallax-text-column ul li > span:last-child {
    flex: 1 1 auto !important;
    text-align: left !important;
    display: block !important;
  }

  /* Center FAQ question title and tag without touching the + icon */
  .faq-accordion-item button > div:first-child {
    text-align: center !important;
  }
  .faq-accordion-item button > div:first-child > div:first-child {
    justify-content: center !important;
  }
  .faq-accordion-item button > div:first-child > h3 {
    text-align: center !important;
  }

  /* Ensure Hero CTA buttons are same font size */
  #hero-cta-buttons a,
  #hero-cta-buttons a span {
    font-size: 14px !important;
    font-weight: 700 !important;
  }
}

/* ==========================================================================
   HERO UNIFIED REVIEW PILL - STRICT ZERO BOX / CONTAINER ISOLATION
   ========================================================================== */
.hero-unified-pill a,
#hero .hero-unified-pill a,
.hero-top-pill-wrapper a,
#hero .hero-top-pill-wrapper a,
.hero-reviews-pill a,
#hero .hero-reviews-pill a {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-width: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
    max-height: none !important;
    height: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.375rem !important;
    text-decoration: none !important;
    box-sizing: content-box !important;
    transform: none !important;
}

.hero-unified-pill a:hover,
#hero .hero-unified-pill a:hover,
.hero-unified-pill a:active,
#hero .hero-unified-pill a:active,
.hero-unified-pill a:focus,
#hero .hero-unified-pill a:focus {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ==========================================================================
   HERO ALIGNMENT INVARIANT: STRICT LEFT ON DESKTOP (>=640px), CENTER ON MOBILE (<640px)
   ========================================================================== */
@media (min-width: 640px) {
  .hero-content-layer,
  #hero .hero-content-layer,
  #overview .hero-content-layer,
  .hero-slide .hero-content-layer {
    width: 100% !important;
    align-items: flex-start !important;
    text-align: left !important;
  }

  .hero-content-layer > div,
  #hero .hero-content-layer > div,
  #overview .hero-content-layer > div,
  .hero-slide .hero-content-layer > div {
    align-items: flex-start !important;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .hero-top-pill-wrapper {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  #hero h1, #hero h2,
  #overview h1, #overview h2,
  .hero-slide h1, .hero-slide h2 {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  #hero p,
  #overview p,
  .hero-slide p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .hero-telemetry,
  #hero-telemetry {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  #hero-cta-buttons,
  .hero-cta-buttons-container {
    justify-content: flex-start !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

@media (max-width: 639px) {
  .hero-content-layer,
  #hero .hero-content-layer,
  #overview .hero-content-layer,
  .hero-slide .hero-content-layer {
    width: 100% !important;
    align-items: center !important;
    text-align: center !important;
  }

  .hero-content-layer > div,
  #hero .hero-content-layer > div,
  #overview .hero-content-layer > div,
  .hero-slide .hero-content-layer > div {
    align-items: center !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-top-pill-wrapper {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
  }

  #hero h1, #hero h2,
  #overview h1, #overview h2,
  .hero-slide h1, .hero-slide h2 {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #hero p,
  #overview p,
  .hero-slide p {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-telemetry,
  #hero-telemetry {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #hero-cta-buttons,
  .hero-cta-buttons-container {
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}