/* iBlogger v118 — mobile homepage reference restoration.
   Source of truth: the supplied v44 project. This is intentionally scoped to
   the homepage on mobile/tablet only; desktop layout and other pages are untouched.
   The fixed site theme remains light (no theme toggle is added back). */

@media (max-width: 900px) {
  /* Restore the v44 mobile header geometry and dark glass surface used over the hero. */
  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header,
  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header.is-scrolled {
    position: absolute !important;
    inset-block-start: max(8px, env(safe-area-inset-top)) !important;
    inset-block-end: auto !important;
    top: max(8px, env(safe-area-inset-top)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding-inline: 6px !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 3200 !important;
  }

  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header .header-inner,
  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header.is-scrolled .header-inner {
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 56px !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 6px 8px !important;
    gap: 7px !important;
    direction: rtl !important;
    border-radius: 18px !important;
    background: rgba(7, 9, 26, .88) !important;
    background-color: rgba(7, 9, 26, .88) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    box-shadow: 0 18px 44px rgba(4, 7, 25, .24) !important;
    backdrop-filter: blur(18px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
    overflow: visible !important;
  }

  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .brand,
  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .site-logo {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 116px !important;
    flex: 0 1 auto !important;
    margin-inline-end: auto !important;
    padding: 0 !important;
  }

  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .site-logo-image.logo-light {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 116px !important;
    height: 31px !important;
    max-height: 34px !important;
    object-fit: contain !important;
    filter: none !important;
  }

  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .desktop-nav,
  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .service-account {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    flex: 0 0 0 !important;
    pointer-events: none !important;
  }

  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .icon-button.favorites-trigger,
  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .icon-button.menu-toggle {
    display: inline-grid !important;
    place-items: center !important;
    position: relative !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    flex: 0 0 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    color: rgba(255, 255, 255, .94) !important;
    background: rgba(255, 255, 255, .035) !important;
    border: 1px solid rgba(255, 255, 255, .16) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }

  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .menu-toggle {
    display: inline-grid !important;
  }
}

@media (max-width: 430px) {
  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header {
    padding-inline: 4px !important;
  }
  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .header-inner {
    min-height: 56px !important;
    padding: 5px 6px !important;
    gap: 5px !important;
    border-radius: 16px !important;
  }
  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .site-logo-image.logo-light {
    height: 29px !important;
    max-width: 108px !important;
  }
  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .icon-button.favorites-trigger,
  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .icon-button.menu-toggle {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex-basis: 40px !important;
  }
}

/* The approved v44 mobile hero reference is used only at phone widths. */
@media (max-width: 620px) {
  html body.home-page.v4-page #top#top.v4-home-hero.lm-hero {
    box-sizing: border-box !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1080 / 1206 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, #08091f 0%, #090a22 100%) center top / 100% 10.9% no-repeat,
      #090a1f url("../assets/images/mobile-hero-reference-exact.webp") center top / 100% 100% no-repeat !important;
    color: #fff !important;
  }

  html body.home-page.v4-page #top#top.v4-home-hero::before,
  html body.home-page.v4-page #top#top.v4-home-hero::after,
  html body.home-page.v4-page #top#top .v4-hero-aurora,
  html body.home-page.v4-page #top#top .v4-mobile-trust-stage {
    display: none !important;
  }

  html body.home-page.v4-page #top#top > .v4-hero-shell.container {
    position: absolute !important;
    inset: 0 !important;
    z-index: 9 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  html body.home-page.v4-page #top#top .v4-hero-copy {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  html body.home-page.v4-page #top#top .v4-eyebrow,
  html body.home-page.v4-page #top#top .v4-hero-copy h1,
  html body.home-page.v4-page #top#top .v4-hero-copy > p {
    visibility: visible !important;
    opacity: 0 !important;
  }

  /* Keep the CTA genuinely clickable over the matching image button. */
  html body.home-page.v4-page #top#top .v4-hero-actions {
    position: absolute !important;
    top: 52.49% !important;
    left: 32.59% !important;
    z-index: 12 !important;
    display: block !important;
    visibility: visible !important;
    width: 34.91% !important;
    height: 8.04% !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }

  html body.home-page.v4-page #top#top .v4-hero-actions .v4-btn {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: auto !important;
  }

  html body.home-page.v4-page #top#top .v4-mobile-trust-metrics {
    position: absolute !important;
    right: 7.52% !important;
    bottom: 1.9% !important;
    z-index: 10 !important;
    direction: rtl !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 84.81% !important;
    max-width: none !important;
    height: 18.41% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: clamp(8px, 2.55vw, 10px) 5px clamp(6px, 1.8vw, 7px) !important;
    background: linear-gradient(105deg, rgb(38, 28, 91), rgb(49, 31, 104)) !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: clamp(18px, 5.64vw, 22px) !important;
    box-shadow: 0 13px 30px rgba(7, 6, 31, .2), inset 0 1px 0 rgba(255, 255, 255, .035) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* This is a fixed light-theme site; the dark color here is part of the approved hero design. */
  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header,
  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header.is-scrolled {
    background: rgb(7, 9, 31) !important;
    background-color: rgb(7, 9, 31) !important;
    background-image: none !important;
  }

  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header .header-inner,
  html body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header.is-scrolled .header-inner {
    background: rgb(7, 9, 31) !important;
    background-color: rgb(7, 9, 31) !important;
    background-image: none !important;
  }
}

/* Header composition lock: match the reference's live controls, without restoring the theme toggle. */
@media (max-width: 620px) {
  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header,
  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header.is-scrolled {
    position: absolute !important;
    inset: 0 0 auto !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    background: rgb(7, 9, 31) !important;
    background-color: rgb(7, 9, 31) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    translate: none !important;
    opacity: 1 !important;
    z-index: 3200 !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header .header-inner,
  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header.is-scrolled .header-inner {
    box-sizing: border-box !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: calc(100% - 0px) !important;
    max-width: none !important;
    height: 44px !important;
    min-height: 44px !important;
    margin: 0 auto !important;
    padding: 4px 11px !important;
    gap: 5px !important;
    direction: rtl !important;
    border: 0 !important;
    border-radius: 0 0 24px 24px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    overflow: visible !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .brand {
    order: 1 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .site-logo {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    line-height: 0 !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .site-logo-image.logo-light {
    display: block !important;
    width: 92px !important;
    min-width: 0 !important;
    max-width: 92px !important;
    height: 25px !important;
    max-height: 25px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .service-account {
    order: 2 !important;
    display: flex !important;
    visibility: visible !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 36px !important;
    margin: 0 !important;
    gap: 5px !important;
    pointer-events: auto !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .service-account .unified-auth-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: transparent !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    box-shadow: 0 7px 15px rgba(133, 67, 241, .18) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .unified-auth-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 36px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #7351ef 0%, #9e5cf3 100%) !important;
    border: 1px solid rgba(255, 255, 255, .13) !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 18px rgba(116, 63, 231, .28), inset 0 1px 0 rgba(255, 255, 255, .2) !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .favorites-trigger,
  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .theme-toggle {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    flex: 0 0 0 !important;
    pointer-events: none !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .menu-toggle {
    order: 4 !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 35px !important;
    min-width: 35px !important;
    height: 35px !important;
    min-height: 35px !important;
    flex: 0 0 35px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .04) !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, .067) !important;
    color: rgba(255, 255, 255, .9) !important;
    box-shadow: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .menu-toggle svg {
    width: 17px !important;
    height: 17px !important;
  }
}

/* Tablet/mobile-landscape widths follow the reference's live V4 hero (the
   supplied static composition is used only on narrow phones, <=620px). */
@media (min-width: 621px) and (max-width: 900px) {
  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header,
  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header.is-scrolled {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transform: none !important;
    z-index: 3200 !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header .header-inner,
  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header.service-header.is-scrolled .header-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: calc(100% - 40px) !important;
    max-width: none !important;
    height: 64px !important;
    min-height: 64px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    gap: 18px !important;
    direction: rtl !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .brand {
    order: 1 !important;
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .site-logo-image.logo-light {
    display: block !important;
    width: 108px !important;
    max-width: 108px !important;
    height: 30px !important;
    object-fit: contain !important;
    filter: brightness(0) invert(1) !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .service-account {
    order: 2 !important;
    display: flex !important;
    visibility: visible !important;
    flex: 0 0 auto !important;
    width: auto !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 5px !important;
    pointer-events: auto !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .service-account .unified-auth-button {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 68px !important;
    min-width: 68px !important;
    height: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #f0eee9 !important;
    background-image: none !important;
    color: #090b12 !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .unified-auth-label {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #090b12 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .favorites-trigger {
    order: 3 !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    flex: 0 0 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #fff !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .theme-toggle {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    flex: 0 0 0 !important;
    pointer-events: none !important;
  }

  html[data-theme="light"] body.home-page.v4-page #siteHeader#siteHeader#siteHeader.site-header .menu-toggle {
    order: 4 !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
    min-height: 40px !important;
    flex: 0 0 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: rgba(255, 255, 255, .82) !important;
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 50% !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] body.home-page.v4-page #top#top.v4-home-hero.lm-hero {
    background:
      radial-gradient(circle at 8% 60%, rgba(99, 84, 255, .74), transparent 24%),
      radial-gradient(circle at 93% 56%, rgba(100, 81, 255, .72), transparent 25%),
      radial-gradient(at 50% 91%, rgba(238, 160, 231, .66), transparent 35%),
      linear-gradient(180deg, #080b24 0%, #0c1031 38%, #262372 64%, #9c66c2 82%, #e8c8df 100%) !important;
    color: #fff !important;
  }

  html[data-theme="light"] body.home-page.v4-page #top#top .v4-hero-copy h1,
  html[data-theme="light"] body.home-page.v4-page #top#top .v4-hero-copy h1 :is(span, em, strong) {
    color: #fff !important;
  }

  html[data-theme="light"] body.home-page.v4-page #top#top .v4-hero-copy > p {
    color: rgba(255, 255, 255, .78) !important;
  }

  html[data-theme="light"] body.home-page.v4-page #top#top .v4-eyebrow {
    color: #5941c8 !important;
    background: #f8f7ff !important;
    border: 1px solid rgba(255, 255, 255, .72) !important;
  }

  html[data-theme="light"] body.home-page.v4-page #top#top .v4-hero-actions .v4-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 136px !important;
    min-width: 136px !important;
    height: 48px !important;
    min-height: 48px !important;
    padding: 0 !important;
    border: 1px solid #f0eee9 !important;
    border-radius: 12px !important;
    background: #f0eee9 !important;
    color: #090b12 !important;
    box-shadow: none !important;
    opacity: 1 !important;
  }
}