.asem-product-mobile { display: none; }
.asem-product-desktop-only { display: block; }

@media (max-width: 767px) {
  body:has(.asem-product-mobile) { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .asem-product-desktop-only { display: none; }
  .asem-product-mobile {
    --mobile-navy: #062760;
    --mobile-blue: #0758c7;
    --mobile-teal: #00aa9f;
    --mobile-ink: #173f6c;
    --mobile-muted: #58718d;
    --mobile-line: #d5e2ed;
    --mobile-ice: #f4f9fd;
    display: block;
    overflow: clip;
    background: #fff;
    color: var(--mobile-navy);
  }
  .asem-product-mobile *,
  .asem-product-mobile *::before,
  .asem-product-mobile *::after { box-sizing: border-box; }
  .asem-product-mobile section { padding: 0; }
  .asem-product-mobile__container { width: 100%; max-width: 520px; margin: 0 auto; padding: 14px 14px 34px; }
  .asem-product-mobile__back {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    margin: 0 2px 8px;
    color: #375a7d;
    font-size: 14px;
    font-weight: 800;
  }
  .asem-product-mobile__back i { color: var(--mobile-teal); }

  .asem-product-mobile-hero {
    padding: 18px 18px 16px;
    border: 1px solid var(--mobile-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(6, 39, 96, .06);
  }
  .asem-product-mobile-hero__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(118px, .9fr); gap: 4px; align-items: center; }
  .asem-product-mobile-hero__copy { position: relative; z-index: 1; min-width: 0; }
  .asem-product-mobile__brand {
    display: inline-flex;
    min-height: 29px;
    align-items: center;
    margin-bottom: 10px;
    padding: 5px 10px;
    border-radius: 6px;
    background: #0861cb;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .035em;
    text-transform: uppercase;
  }
  .asem-product-mobile-hero h1 {
    margin: 0;
    overflow-wrap: break-word;
    word-break: normal;
    color: var(--mobile-navy);
    font-size: clamp(30px, 7.9vw, 35px);
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: .99;
  }
  .asem-product-mobile-hero__copy > p { margin: 12px 0 0; color: #4c6684; font-size: 15px; font-weight: 600; line-height: 1.43; }
  .asem-product-mobile-hero__media { position: relative; display: grid; min-width: 0; min-height: 192px; place-items: center; }
  .asem-product-mobile-hero__media picture { display: block; width: 126%; margin-left: -18%; }
  .asem-product-mobile-hero__media img { display: block; width: 100%; height: 200px; object-fit: contain; filter: drop-shadow(0 13px 16px rgba(5, 35, 80, .13)); }
  .asem-product-mobile-hero__counter { position: absolute; z-index: 2; top: -2px; right: -2px; padding: 4px 7px; border-radius: 5px; background: #536b89; color: #fff; font-size: 11px; font-weight: 900; }

  .asem-product-mobile-hero__benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 13px; }
  .asem-product-mobile-hero__benefits article { min-width: 0; }
  .asem-product-mobile-hero__benefits article > span { display: grid; width: 34px; height: 34px; place-items: center; margin-bottom: 8px; border-radius: 50%; background: #e9faf8; color: var(--mobile-teal); font-size: 15px; }
  .asem-product-mobile-hero__benefits h2 { margin: 0 0 5px; color: var(--mobile-navy); font-size: 13px; font-weight: 900; line-height: 1.16; }
  .asem-product-mobile-hero__benefits p { margin: 0; color: var(--mobile-muted); font-size: 11.5px; line-height: 1.38; }
  .asem-product-mobile-hero__actions { display: grid; gap: 9px; margin-top: 17px; }
  .asem-product-mobile-button {
    display: inline-flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 11px 15px;
    border: 1px solid var(--mobile-teal);
    border-radius: 7px;
    font-size: 14px;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
  }
  .asem-product-mobile-button--primary { background: var(--mobile-teal); color: #fff; }
  .asem-product-mobile-button--secondary { background: #fff; color: #0757b9; }
  .asem-product-mobile-button:focus-visible,
  .asem-product-mobile-sticky a:focus-visible,
  .asem-product-mobile-app a:focus-visible,
  .asem-product-mobile__back:focus-visible { outline: 3px solid rgba(0, 170, 159, .35); outline-offset: 3px; }

  .asem-product-mobile-trust { margin: 12px 0 30px; overflow: hidden; border: 1px solid var(--mobile-line); border-radius: 12px; background: #f8fbfe; box-shadow: 0 8px 22px rgba(6, 39, 96, .04); }
  .asem-product-mobile-trust article { display: grid; grid-template-columns: 32px minmax(0, 1fr) 14px; gap: 10px; min-height: 61px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--mobile-line); }
  .asem-product-mobile-trust article:last-child { border-bottom: 0; }
  .asem-product-mobile-trust article > i:first-child { color: var(--mobile-teal); font-size: 21px; text-align: center; }
  .asem-product-mobile-trust article > i:last-child { color: #5c718a; font-size: 12px; }
  .asem-product-mobile-trust div { display: grid; gap: 2px; }
  .asem-product-mobile-trust strong { color: var(--mobile-navy); font-size: 13px; line-height: 1.3; }
  .asem-product-mobile-trust span { color: var(--mobile-muted); font-size: 12px; line-height: 1.35; }

  .asem-product-mobile-section { margin-bottom: 34px; }
  .asem-product-mobile-section > h2 { max-width: 430px; margin: 0 auto; color: var(--mobile-navy); font-size: clamp(25px, 6.4vw, 29px); font-weight: 900; letter-spacing: -.03em; line-height: 1.16; text-align: center; }
  .asem-product-mobile-section__rule { width: 48px; height: 3px; margin: 12px auto 18px; border-radius: 99px; background: var(--mobile-teal); }

  .asem-product-mobile-why__list { display: grid; gap: 12px; }
  .asem-product-mobile-why__list article { display: grid; grid-template-columns: minmax(112px, 35%) minmax(0, 1fr); min-height: 142px; overflow: hidden; border: 1px solid var(--mobile-line); border-radius: 13px; background: #fff; box-shadow: 0 8px 22px rgba(6, 39, 96, .045); }
  .asem-product-mobile-why__media { display: grid; min-width: 0; place-items: center; overflow: hidden; background: #f4f8fb; }
  .asem-product-mobile-why__media img { display: block; width: 100%; height: 100%; max-height: 160px; padding: 7px; object-fit: contain; object-position: var(--mobile-media-position, center); transform: scale(var(--mobile-media-scale, 1)); transform-origin: var(--mobile-media-position, center); }
  .asem-product-mobile-why__media--cover img { padding: 0; object-fit: cover; }
  .asem-product-mobile-why__content { align-self: center; padding: 15px 14px; }
  .asem-product-mobile-why__content h3 { margin: 0 0 8px; color: var(--mobile-navy); font-size: 18px; font-weight: 900; letter-spacing: -.02em; line-height: 1.22; }
  .asem-product-mobile-why__content p { margin: 0; color: #4f6b88; font-size: 14px; line-height: 1.48; }

  .asem-product-mobile-value__panel { padding: 16px 14px 14px; border: 1px solid var(--mobile-line); border-radius: 14px; background: #fff; box-shadow: 0 8px 25px rgba(6, 39, 96, .045); }
  .asem-product-mobile-value__group > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 11px; color: var(--mobile-navy); font-size: 19px; font-weight: 900; }
  .asem-product-mobile-value__group > h3 span { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border-radius: 50%; background: #eafaf8; color: var(--mobile-teal); font-size: 17px; }
  .asem-product-mobile-value__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .asem-product-mobile-value__grid article { display: grid; grid-template-columns: 27px minmax(0, 1fr); gap: 8px; min-width: 0; min-height: 116px; align-content: center; padding: 12px 10px; border: 1px solid #dbe6ef; border-radius: 11px; background: #fff; }
  .asem-product-mobile-value__grid article > i { margin-top: 2px; color: var(--mobile-teal); font-size: 22px; text-align: center; }
  .asem-product-mobile-value__grid h4 { margin: 0 0 6px; color: var(--mobile-navy); font-size: 14px; font-weight: 900; line-height: 1.25; }
  .asem-product-mobile-value__grid p { margin: 0; color: #4f6b88; font-size: 12.5px; line-height: 1.43; }
  .asem-product-mobile-value__group--support { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--mobile-line); }

  .asem-product-mobile-essentials dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin: 0; }
  .asem-product-mobile-essentials dl > div { min-width: 0; min-height: 112px; padding: 12px 8px; border: 1px solid var(--mobile-line); border-radius: 11px; background: #fff; text-align: center; }
  .asem-product-mobile-essentials dl i { display: block; margin-bottom: 8px; color: var(--mobile-teal); font-size: 22px; }
  .asem-product-mobile-essentials dt { margin-bottom: 6px; color: var(--mobile-navy); font-size: 12px; font-weight: 900; line-height: 1.25; }
  .asem-product-mobile-essentials dd { margin: 0; overflow-wrap: anywhere; color: #4f6b88; font-size: 12px; line-height: 1.4; }
  .asem-product-mobile-essentials__source { display: inline-flex; min-height: 44px; align-items: center; gap: 8px; margin-top: 9px; color: #0757b9; font-size: 13px; font-weight: 900; }

  .asem-product-mobile-app { display: grid; min-height: 730px; grid-template-rows: auto 250px; margin: 2px 0 0; overflow: hidden; border: 1px solid var(--mobile-line); border-radius: 15px; background: linear-gradient(145deg, #f2f8fd, #eef7fb); box-shadow: 0 12px 30px rgba(6, 39, 96, .07); }
  .asem-product-mobile-app__content { position: relative; z-index: 2; padding: 28px 20px 0; }
  .asem-product-mobile-app__eyebrow { margin: 0 0 12px; color: #068f89; font-size: 12px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; }
  .asem-product-mobile-app h2 { margin: 0; color: var(--mobile-navy); font-size: clamp(27px, 7vw, 31px); font-weight: 900; letter-spacing: -.04em; line-height: 1.12; }
  .asem-product-mobile-app__intro { margin: 15px 0 17px; color: #536d89; font-size: 16px; line-height: 1.5; }
  .asem-product-mobile-app ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
  .asem-product-mobile-app li { display: flex; min-height: 62px; align-items: center; gap: 9px; padding: 10px 11px; border: 1px solid #e0e9f1; border-radius: 11px; background: rgba(255,255,255,.88); color: var(--mobile-navy); font-size: 14px; font-weight: 800; line-height: 1.3; }
  .asem-product-mobile-app li i { flex: 0 0 auto; color: var(--mobile-teal); font-size: 20px; }
  .asem-product-mobile-app__badge { display: inline-flex; min-height: 46px; align-items: center; gap: 9px; margin: 13px 0 14px; padding: 10px 13px; border: 1px solid #c9ebe8; border-radius: 9px; background: #eefaf8; color: #078e87; font-size: 14px; font-weight: 900; }
  .asem-product-mobile-app__stores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
  .asem-product-mobile-app__stores a,
  .asem-product-mobile-app__stores img { display: block; width: 100%; }
  .asem-product-mobile-app__stores img { height: 40px; object-fit: contain; }
  .asem-product-mobile-app__primary,
  .asem-product-mobile-app__secondary { display: inline-flex; width: 100%; min-height: 50px; align-items: center; justify-content: center; gap: 10px; padding: 11px 14px; border-radius: 8px; font-size: 14px; font-weight: 900; line-height: 1.25; text-align: center; }
  .asem-product-mobile-app__primary { background: var(--mobile-teal); color: #fff; }
  .asem-product-mobile-app__secondary { margin-top: 8px; color: #078e87; }
  .asem-product-mobile-app__phone { align-self: end; justify-self: center; width: min(245px, 68vw); height: 250px; overflow: hidden; }
  .asem-product-mobile-app__phone img { display: block; width: 100%; height: auto; border: 1px solid #93b2c9; border-bottom: 0; border-radius: 30px 30px 0 0; box-shadow: 0 18px 35px rgba(5, 35, 80, .19); }

  .asem-product-mobile-sticky { position: fixed; z-index: 1045; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: .82fr 1.18fr; gap: 5px; min-height: calc(62px + env(safe-area-inset-bottom)); padding: 7px max(12px, calc((100vw - 520px) / 2 + 14px)) calc(7px + env(safe-area-inset-bottom)); background: #052760; box-shadow: 0 -8px 24px rgba(3, 26, 70, .18); }
  .asem-product-mobile-sticky a { display: inline-flex; min-width: 0; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 8px 10px; border-radius: 6px; color: #fff; font-size: 13px; font-weight: 900; line-height: 1.2; text-align: center; }
  .asem-product-mobile-sticky a:last-child { background: var(--mobile-teal); }
}

@media (max-width: 359px) {
  .asem-product-mobile__container { padding-inline: 10px; }
  .asem-product-mobile-hero { padding-inline: 14px; }
  .asem-product-mobile-hero__top { grid-template-columns: minmax(0, 1.14fr) minmax(100px, .86fr); }
  .asem-product-mobile-hero h1 { font-size: 29px; }
  .asem-product-mobile-hero__media { min-height: 170px; }
  .asem-product-mobile-hero__media img { height: 176px; }
  .asem-product-mobile-hero__benefits { gap: 7px; }
  .asem-product-mobile-hero__benefits h2 { font-size: 12px; }
  .asem-product-mobile-hero__benefits p { font-size: 11px; }
  .asem-product-mobile-why__list article { grid-template-columns: 106px minmax(0, 1fr); }
  .asem-product-mobile-why__content { padding-inline: 12px; }
  .asem-product-mobile-why__content h3 { font-size: 17px; }
  .asem-product-mobile-value__grid { grid-template-columns: minmax(0, 1fr); }
  .asem-product-mobile-value__grid article { min-height: 92px; }
  .asem-product-mobile-essentials dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asem-product-mobile-app { min-height: 760px; }
  .asem-product-mobile-app__content { padding-inline: 16px; }
  .asem-product-mobile-sticky { padding-inline: 8px; }
  .asem-product-mobile-sticky a { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .asem-product-mobile * { scroll-behavior: auto !important; }
}