/* P2P/DIA reference canvas shared by every live internal-page hero. */
:root { --jetso-internal-hero-height: 420px; }

:is(
  .contact-page-hero,
  .solutions-hero,
  .um-hero-section,
  .bb-hero-section,
  .device-hero,
  .u-addon-hero-wrap,
  .um-roaming-hero,
  .internal-hero,
  .page-hero,
  .visual-page-hero,
  .story-hero,
  .article-hero,
  .article-hero-graphic-wrap,
  .broadband-hero-wrap,
  .p2c-hero-graphic-wrap,
  .redmi-hero-wrap,
  .um-blog-hero,
  .unbeatable-hero-wrap
) {
  box-sizing: border-box !important;
  width: 100% !important;
  height: var(--jetso-internal-hero-height) !important;
  min-height: var(--jetso-internal-hero-height) !important;
  max-height: var(--jetso-internal-hero-height) !important;
  overflow: hidden !important;
}

:is(
  .contact-page-hero-inner,
  .solutions-hero > .shell,
  .um-hero-section > .shell,
  .bb-hero-section > .shell,
  .device-hero-inner,
  .u-addon-hero-inner,
  .um-roaming-inner,
  .internal-hero-content,
  .visual-page-hero > .shell
) {
  box-sizing: border-box !important;
  min-height: 100% !important;
}

:is(
  .contact-page-hero,
  .solutions-hero,
  .um-hero-section,
  .bb-hero-section,
  .device-hero,
  .u-addon-hero-wrap,
  .um-roaming-hero,
  .internal-hero,
  .page-hero,
  .visual-page-hero,
  .story-hero,
  .article-hero,
  .broadband-hero-wrap,
  .redmi-hero-wrap,
  .um-blog-hero,
  .unbeatable-hero-wrap
) h1 {
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 1.12 !important;
}

:is(.solutions-hero-content,.um-hero-content,.bb-hero-content,.device-hero-text,.internal-hero-content) {
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
.contact-page-hero-inner { padding-top: 32px !important; padding-bottom: 32px !important; }
.contact-page-hero .breadcrumbs { margin-bottom: 12px !important; }
.contact-page-hero .hero-partner-tag { margin-bottom: 10px !important; }
.contact-page-hero h1 { margin-bottom: 12px !important; }
.contact-page-hero-inner > p:not(.hero-partner-tag) { font-size: 14px !important; line-height: 1.5 !important; }
.contact-page-actions { margin-top: 18px !important; }
.contact-page-proof { margin-top: 18px !important; }
.page-hero { padding-top: 52px !important; padding-bottom: 52px !important; }

:is(.article-hero-graphic-wrap,.broadband-hero-wrap,.p2c-hero-graphic-wrap,.redmi-hero-wrap,.unbeatable-hero-wrap) img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
}

@media (max-width: 768px) {
  :root { --jetso-internal-hero-height: 340px; }
  :is(
    .contact-page-hero,.solutions-hero,.um-hero-section,.bb-hero-section,.device-hero,
    .u-addon-hero-wrap,.um-roaming-hero,.internal-hero,.page-hero,.visual-page-hero,
    .story-hero,.article-hero,.broadband-hero-wrap,.redmi-hero-wrap,.um-blog-hero,
    .unbeatable-hero-wrap
  ) h1 {
    font-size: clamp(26px, 8vw, 36px) !important;
    line-height: 1.08 !important;
  }
  :is(.solutions-hero-content,.um-hero-content,.bb-hero-content,.device-hero-text,.internal-hero-content) {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }
  .contact-page-hero-inner { padding-top: 22px !important; padding-bottom: 22px !important; }
  .contact-page-hero .breadcrumbs { margin-bottom: 7px !important; }
  .contact-page-hero .hero-partner-tag { margin-bottom: 7px !important; }
  .contact-page-hero h1 { margin-bottom: 8px !important; }
  .contact-page-hero-inner > p:not(.hero-partner-tag) { font-size: 12px !important; line-height: 1.4 !important; }
  .contact-page-actions { margin-top: 12px !important; }
  .contact-page-proof { display: none !important; }
  .page-hero { padding-top: 34px !important; padding-bottom: 34px !important; }
}
/* Postpaid and Borneo hero alignment v5. */
body[data-page="mobile"] .postpaid-hero-animate,
body[data-page="broadband"] .bb-hero-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body[data-page="mobile"] .postpaid-hero-animate > .shell,
body[data-page="broadband"] .bb-hero-section > .shell {
  display: flex !important;
  min-height: 100% !important;
  flex-direction: column;
  justify-content: center;
}

body[data-page="broadband"] .bb-hero-section .bb-hero-content {
  width: 100%;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

@media (max-width: 768px) {
  body[data-page="mobile"] .postpaid-hero-animate {
    align-items: stretch !important;
  }

  body[data-page="mobile"] .postpaid-hero-animate > .shell {
    justify-content: flex-end;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  body[data-page="mobile"] .postpaid-hero-animate .breadcrumbs {
    margin-bottom: 10px !important;
  }

  body[data-page="mobile"] .postpaid-hero-animate .hero-partner-tag {
    margin-bottom: 8px !important;
  }

  body[data-page="mobile"] .postpaid-hero-animate h1 {
    margin-bottom: 10px !important;
  }

  body[data-page="broadband"] .bb-hero-section > .shell {
    justify-content: center;
  }

  body[data-page="broadband"] .bb-hero-section .bb-hero-content {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
}

/* Postpaid is the phone-size master for every internal page. */
@media (max-width: 768px) {
  body:not([data-page="home"]):not(.home-page) :is(
    .contact-page-hero,
    .solutions-hero,
    .um-hero-section,
    .bb-hero-section,
    .device-hero,
    .u-addon-hero-wrap,
    .um-roaming-hero,
    .internal-hero,
    .page-hero,
    .visual-page-hero,
    .story-hero,
    .article-hero,
    .article-hero-graphic-wrap,
    .broadband-hero-wrap,
    .p2c-hero-graphic-wrap,
    .redmi-hero-wrap,
    .um-blog-hero,
    .unbeatable-hero-wrap
  ) {
    width: 100% !important;
    height: 340px !important;
    min-height: 340px !important;
    max-height: 340px !important;
  }
}

/* Mobile Add-ons: measured alignment inside the standard internal hero canvas. */
body[data-page="mobile-add-ons"] .u-addon-hero-wrap {
  height: 420px !important;
  min-height: 420px !important;
  max-height: 420px !important;
}

body[data-page="mobile-add-ons"] .u-addon-hero-wrap .ao-shell {
  width: min(1240px, calc(100% - 48px)) !important;
  height: 100%;
}

body[data-page="mobile-add-ons"] .u-addon-hero-inner {
  box-sizing: border-box;
  height: 420px !important;
  min-height: 100% !important;
  grid-template-columns: minmax(330px, 0.9fr) minmax(0, 1.1fr) !important;
  grid-template-rows: 1fr !important;
  align-items: center !important;
  gap: clamp(24px, 4vw, 64px) !important;
}

body[data-page="mobile-add-ons"] .u-addon-hero-copy {
  box-sizing: border-box;
  align-self: center;
  padding: 28px 0 !important;
  text-align: left;
}

body[data-page="mobile-add-ons"] .u-addon-hero-kicker {
  margin-bottom: 12px !important;
}

body[data-page="mobile-add-ons"] .u-addon-hero-title {
  max-width: 580px;
  font-size: clamp(36px, 3.2vw, 44px) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.035em !important;
}

body[data-page="mobile-add-ons"] .u-addon-hero-title strong {
  margin-bottom: 7px;
  font-size: 1.05em;
  letter-spacing: -0.035em;
}

body[data-page="mobile-add-ons"] .u-addon-hero-copy > p {
  margin-top: 14px;
  line-height: 1.45;
}

body[data-page="mobile-add-ons"] .u-addon-hero-benefits {
  margin-top: 16px;
}

body[data-page="mobile-add-ons"] .u-addon-hero-visual {
  align-self: stretch;
  height: 420px !important;
  justify-content: flex-end;
}

body[data-page="mobile-add-ons"] .u-addon-hero-visual img {
  width: min(680px, 112%);
  height: 390px !important;
  max-height: 92%;
  object-fit: contain !important;
  object-position: center right;
  transform: none !important;
}

@media (max-width: 768px) {
  body[data-page="mobile-add-ons"] .u-addon-hero-wrap {
    height: 340px !important;
    min-height: 340px !important;
    max-height: 340px !important;
  }

  body[data-page="mobile-add-ons"] .u-addon-hero-wrap .ao-shell {
    width: calc(100% - 24px) !important;
    height: 340px;
  }

  body[data-page="mobile-add-ons"] .u-addon-hero-inner {
    height: 340px !important;
    min-height: 340px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 210px 130px !important;
    align-items: stretch !important;
    gap: 0 !important;
  }

  body[data-page="mobile-add-ons"] .u-addon-hero-copy {
    align-self: start;
    padding: 14px 4px 0 !important;
    text-align: center;
  }

  body[data-page="mobile-add-ons"] .u-addon-hero-kicker {
    margin-bottom: 6px !important;
    padding: 5px 9px;
    font-size: 8px;
  }

  body[data-page="mobile-add-ons"] .u-addon-hero-title {
    max-width: 360px;
    margin-inline: auto;
    font-size: clamp(23px, 6.6vw, 27px) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.025em !important;
  }

  body[data-page="mobile-add-ons"] .u-addon-hero-title strong {
    margin-bottom: 3px;
    font-size: 1.02em;
    letter-spacing: -0.02em;
  }

  body[data-page="mobile-add-ons"] .u-addon-hero-copy > p {
    max-width: 338px;
    margin: 7px auto 0 !important;
    font-size: 11px !important;
    line-height: 1.32 !important;
  }

  body[data-page="mobile-add-ons"] .u-addon-hero-benefits {
    justify-content: center;
    gap: 4px;
    margin-top: 8px;
  }

  body[data-page="mobile-add-ons"] .u-addon-hero-benefits span {
    padding: 4px 7px;
    font-size: 7px;
  }

  body[data-page="mobile-add-ons"] .u-addon-hero-visual {
    align-self: end;
    height: 130px !important;
    justify-content: center;
  }

  body[data-page="mobile-add-ons"] .u-addon-hero-visual img {
    width: min(430px, 120%);
    height: 155px !important;
    max-height: none;
    object-position: center bottom;
    transform: none !important;
  }
}

/* Blog phone hero: Image 1 tall reference and aligned controls. */
@media (max-width: 768px) {
  body[data-page="blog"] .um-blog-hero {
    height: 520px !important;
    min-height: 520px !important;
    max-height: 520px !important;
  }
  body[data-page="blog"] .um-blog-hero-content {
    position: absolute !important;
    top: 38px !important;
    left: 0 !important;
    width: 100% !important;
    transform: translateY(-190px) !important;
  }
  body[data-page="blog"] .um-blog-layout {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* Blog hero phone canvas v7: match the main-page hero on every blog route. */
@media (max-width: 768px) {
  body[data-page="blog"] :is(
    .contact-page-hero,
    .solutions-hero,
    .um-hero-section,
    .bb-hero-section,
    .device-hero,
    .u-addon-hero-wrap,
    .um-roaming-hero,
    .internal-hero,
    .page-hero,
    .visual-page-hero,
    .story-hero,
    .article-hero,
    .article-hero-graphic-wrap,
    .broadband-hero-wrap,
    .p2c-hero-graphic-wrap,
    .redmi-hero-wrap,
    .um-blog-hero,
    .blog-hero-clean,
    .unbeatable-hero-wrap
  ) {
    box-sizing: border-box !important;
    width: 100% !important;
    height: 340px !important;
    min-height: 340px !important;
    max-height: 340px !important;
    overflow: hidden !important;
  }
}