/* MyEPB App Promo - C8002 */

/* The shared .eyebrow (component/css/shared/eyebrow.css) centers itself and its
   green underline. This desktop-only instance sits inside the left copy column,
   where both should hug the left edge; the mobile instance stays centered. */
.c8002-eyebrow {
  text-align: left;
}

/* Scoped to this component's container: a bare .eyebrow::after override would
   also restyle the eyebrows of every other component on the page (c8000,
   c8001, c8011 all share the class). */
.c8002-container .eyebrow::after {
  width: 110px;
  height: 3px;
}

.c8002-container .c8002-eyebrow::after {
  margin-left: 0;
  width: 82px;
}

/* The richtext filter wraps the headline in its own <p>, and the global
   `p { font-weight: 300 }` base style sets that directly on the child,
   overriding the font-medium weight inherited from .c8002-headline. */
.c8002-headline p {
  font-weight: inherit;
  line-height: 1.25;
  padding-bottom: 0;
}

.c8002-cta .btn-cta {
    border-radius: 4px;
}

@media (min-width: 1026px) {
  /* btn-cta is width:100% by default (mobile full-width button per the comp);
     desktop shows it at its natural width. */
  .c8002-cta .btn-cta {
    width: auto;
  }

  /* The stage is the phone + review card container. The review can
     never leave the screen — it just shrinks and moves left with the
     stage as the window narrows. */
  .c8002-stage {
    width: 100%;
    max-width: 52rem;
    margin-right: auto;
  }

  .c8002-phone {
    width: 83%;
  }

  .c8002-review {
    top: 34%;
    right: 0;
    width: 49%;
  }
}

/* Mobile/tablet: the phone fades out toward its bottom edge and the copy pulls
   up over the faded region. The copy must stay in normal flow — absolutely
   positioning it resolves against the page (no positioned ancestor), collapses
   the section height, and the text free-floats over the phone at narrow
   widths. Instead the visual gives back its faded lower part with a negative
   bottom margin; the percentage scales with the phone because the image's
   height tracks the column width. */
@media (max-width: 1025px) {
  .c8002-stage {
    margin-bottom: -45%;
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 25%, black 35%, rgba(0, 0, 0, 0.5) 52%, rgba(0, 0, 0, 0.12) 58%, transparent 70%);
    mask-image: linear-gradient(to bottom, black 0%, black 25%, black 35%, rgba(0, 0, 0, 0.5) 52%, rgba(0, 0, 0, 0.12) 58%, transparent 70%);
  }

  .c8002-copy {
    position: relative;
    z-index: 10;
  }
}