/* V45 focused mobile layout corrections based on production screenshots.
   Public presentation only: no footer selectors and no order-runtime rules. */
@media (max-width: 760px) {
  /* 1. Header and complete brand mark — never crop the logo text. */
  .site-header .brand-area {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
  }

  .site-header .logo {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .site-header .logo-cloud-symbol-v56 {
    flex: 0 0 40px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .site-header .logo-cloud-copy-v56 {
    display: block !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
  }

  .site-header .logo-cloud-copy-v56 b {
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
    color: #10213b !important;
    font-size: clamp(14px, 4.25vw, 18px) !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .site-header .logo-cloud-copy-v56 small {
    display: block !important;
    max-width: none !important;
    overflow: visible !important;
    color: #53647d !important;
    font-size: 7.5px !important;
    line-height: 1.2 !important;
    letter-spacing: .055em !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  .site-header .language-menu {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 5px !important;
  }

  .site-header .language-switch {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
  }

  /* 2. Hero proof cards — icon gets its own column instead of covering text. */
  .hero-points-v73 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .hero-points-v73 > span {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 30px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    column-gap: 9px !important;
    row-gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 82px !important;
    padding: 12px !important;
    overflow: visible !important;
  }

  .hero-points-v73 > span > i {
    position: static !important;
    inset: auto !important;
    grid-column: 1 !important;
    grid-row: 1 / 3 !important;
    display: grid !important;
    place-items: center !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 !important;
    transform: none !important;
  }

  .hero-points-v73 > span > b,
  .hero-points-v73 > span > small {
    position: static !important;
    inset: auto !important;
    grid-column: 2 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
  }

  .hero-points-v73 > span > b {
    grid-row: 1 !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .hero-points-v73 > span > small {
    grid-row: 2 !important;
    color: #cbd7e8 !important;
    font-size: 9px !important;
    line-height: 1.3 !important;
  }

  /* The legacy quick CTA must stay in document flow, never over the form. */
  .aip-primary-cta-v130,
  [class*="mobile-sticky-cta"],
  [class*="floating-cta"] {
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 14px 0 !important;
    transform: none !important;
    z-index: auto !important;
  }

  /* 3. Price/metric cards — stable 2×2 grid, no clipped neighbour card. */
  .metrics-strip-v51 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: auto !important;
    gap: 10px !important;
    width: auto !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
    padding: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }

  .metrics-strip-v51 > div {
    position: static !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 112px !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* 4. Service choices — one readable card per viewport. */
  .service-tabs-v51 {
    grid-auto-columns: calc(100% - 2px) !important;
    gap: 10px !important;
    scroll-padding-inline: 15px !important;
    scroll-snap-type: x mandatory !important;
  }

  .service-tabs-v51 label {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 118px !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
  }

  /* 5. Process section — remove decorative overlay on mobile, keep six cards. */
  .process-flow-v551 .process-cloud-engine,
  .process-flow-v551 .process-route-map,
  .process-flow-v551 [class*="cloud-core"],
  .process-flow-v551 [class*="cloud-orbit"],
  .process-flow-v551 [class*="cloud-spark"] {
    display: none !important;
  }

  .process-flow-v551 .process-head-v551 {
    display: block !important;
    min-height: 0 !important;
    margin-bottom: 16px !important;
  }

  .process-flow-v551 .process-diagram-v551 {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .process-flow-v551 .process-diagram-v551 > *:not(svg) {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* 6. Subpage navigation — horizontal scroll, never split words letter by letter. */
  main > nav,
  main > * > nav,
  main [class*="subnav"],
  main [class*="section-nav"],
  main [class*="investor-nav"],
  main [class*="development-nav"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
  }

  main > nav::-webkit-scrollbar,
  main > * > nav::-webkit-scrollbar,
  main [class*="subnav"]::-webkit-scrollbar,
  main [class*="section-nav"]::-webkit-scrollbar,
  main [class*="investor-nav"]::-webkit-scrollbar,
  main [class*="development-nav"]::-webkit-scrollbar {
    display: none !important;
  }

  main > nav a,
  main > * > nav a,
  main [class*="subnav"] a,
  main [class*="section-nav"] a,
  main [class*="investor-nav"] a,
  main [class*="development-nav"] a {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    padding: 11px 13px !important;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
    scroll-snap-align: start !important;
  }

  /* 7. Subpage typography — natural line wrapping, no arbitrary word fragments. */
  main :is(h1, h2, h3, h4) {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    text-wrap: balance !important;
  }

  main > article h1,
  main > section:not(.hero-v73) h1,
  main [class*="development"] h1,
  main [class*="investor"] h1 {
    max-width: 100% !important;
    font-size: clamp(42px, 12.2vw, 66px) !important;
    line-height: .98 !important;
    letter-spacing: -.05em !important;
  }

  main :is(article, section) :is(p, li) {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }

  main :is(article, section) :is([class*="card"], [class*="tile"], [class*="panel"]) {
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  main :is(article, section) :is([class*="card"], [class*="tile"], [class*="panel"]) :is(h2, h3, p, strong, small) {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* 8. Hero status pill — white background requires dark readable copy. */
  .hero-copy-v73 .badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    min-height: 38px !important;
    padding: 9px 14px !important;
    border: 1px solid rgba(79, 102, 157, .22) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .94) !important;
    color: #18335f !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    letter-spacing: .015em !important;
    text-shadow: none !important;
  }

  .hero-copy-v73 .badge,
  .hero-copy-v73 .badge * {
    color: #18335f !important;
    opacity: 1 !important;
  }

  .hero-copy-v73 .badge > span {
    flex: 0 0 10px !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #22b980 !important;
    box-shadow: 0 0 0 5px rgba(34, 185, 128, .14) !important;
  }

  /* 9. Three pricing-card action bars — one visual standard and white text. */
  .pricing-grid-v51 article > a,
  .pricing-grid-v552 article > a {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    min-height: 58px !important;
    margin-top: auto !important;
    padding: 16px 20px !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #071a36, #12386b) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(7, 26, 54, .18) !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    text-decoration: none !important;
    opacity: 1 !important;
  }

  .pricing-grid-v51 article > a *,
  .pricing-grid-v552 article > a *,
  .pricing-grid-v51 article.featured > a *,
  .pricing-grid-v552 article.featured > a * {
    color: #ffffff !important;
    fill: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
  }

  .pricing-grid-v51 article > a b,
  .pricing-grid-v552 article > a b {
    flex: 0 0 auto !important;
    font-size: 22px !important;
    line-height: 1 !important;
  }

  .pricing-grid-v51 article.featured > a,
  .pricing-grid-v552 article.featured > a {
    background: linear-gradient(135deg, #203fbb, #5b3ef1) !important;
    color: #ffffff !important;
  }

  /* 10. Cookie-settings control must not cover the mobile CTA. */
  #s16-settings-button {
    position: fixed !important;
    left: 12px !important;
    right: auto !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
    z-index: 24 !important;
    max-width: 148px !important;
    min-height: 36px !important;
    padding: 9px 12px !important;
    border-radius: 999px !important;
    background: rgba(7, 26, 54, .96) !important;
    color: #ffffff !important;
    font-size: 10px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    box-shadow: 0 8px 20px rgba(7, 26, 54, .22) !important;
  }

  body:has(.aip-primary-cta-v130) #s16-settings-button,
  body:has([class*="mobile-sticky-cta"]) #s16-settings-button,
  body:has([class*="floating-cta"]) #s16-settings-button {
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 76px) !important;
  }
}

@media (max-width: 390px) {
  .site-header .logo-cloud-copy-v56 b {
    font-size: 14px !important;
  }

  .site-header .logo-cloud-copy-v56 small {
    display: none !important;
  }

  .site-header .language-switch {
    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
  }

  .hero-points-v73 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .metrics-strip-v51 {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  main > article h1,
  main > section:not(.hero-v73) h1,
  main [class*="development"] h1,
  main [class*="investor"] h1 {
    font-size: clamp(38px, 11.5vw, 52px) !important;
  }

  .hero-copy-v73 .badge {
    width: 100% !important;
    border-radius: 16px !important;
    white-space: normal !important;
  }

  .pricing-grid-v51 article > a,
  .pricing-grid-v552 article > a {
    min-height: 54px !important;
    padding: 14px 17px !important;
  }
}