/* what-is-an-esim.css -- only the explainer page /what-is-an-esim needs these rules. Comments in what-is-an-esim.css.md */
/*= Hero: image with the plan card =*/
.esim-whatis-hero{position:relative}
.esim-whatis-hero__image{width:100%;aspect-ratio:5/4;object-fit:cover}
.esim-whatis-card{position:absolute;left:1.5rem;bottom:1.5rem;width:min(18.75rem,calc(100% - 3rem));background:var(--white);border-radius:var(--esim-radius-box);box-shadow:0 12px 32px 0 var(--esim-shadow-image);padding:1rem;display:flex;flex-direction:column;gap:.5rem;font-size:.875rem;color:var(--gray600)}
.esim-whatis-card__head,.esim-whatis-card__row{display:flex;justify-content:space-between;align-items:center;gap:.75rem}
.esim-whatis-card__row span:last-child{color:var(--gray900);font-weight:500}
.esim-whatis-card__bar{height:.375rem;border-radius:var(--esim-radius-pill);background:var(--gray100);overflow:hidden}
.esim-whatis-card__bar span{display:block;width:64%;height:100%;background:var(--esim-brand)}
@media screen and (max-width:767px){
  .esim-whatis-hero__image{aspect-ratio:4/3}
  .esim-whatis-card{left:.75rem;bottom:.75rem;width:min(13.5rem,calc(100% - 1.5rem));padding:.75rem;gap:.375rem;font-size:.75rem}
}

/*= What: heading beside the text =*/
.esim-whatis-split{align-items:start}
.esim-whatis-prose p+p{margin-top:1rem}

/*= Tabs: setup and advantages =*/
.esim-whatis-tabs{display:flex;flex-direction:column;gap:2rem;margin-top:2rem}
.esim-whatis-tabs .esim-tabs-apps-menu-wrapper{width:min(31.5rem,100%)}
.esim-whatis-tabs__title{text-align:center;margin-bottom:1.5rem}
.esim-whatis-steps{display:grid;gap:1rem;max-width:40rem;margin:0 auto}
.esim-whatis-steps__item{background:var(--white);border-radius:var(--esim-radius-box);padding:1rem 1.25rem}
.esim-whatis-steps__item .esim-step-badge{background:var(--gray75);font-size:1rem}
.esim-whatis-setup__note{max-width:40rem;margin:.75rem auto 0;color:var(--gray600)}
.esim-whatis-manual{max-width:40rem;margin:2rem auto 0}
.esim-whatis-manual__title{text-align:center}
.esim-whatis-manual__list{display:flex;flex-direction:column;gap:.5rem;margin:1rem 0 0;padding:1.25rem 1.5rem 1.25rem 2.75rem;border-radius:var(--esim-radius-box);background:var(--white);color:var(--gray700)}
.esim-whatis-manual__list li{padding-left:.25rem}

/*= Advantages and limitations =*/
.esim-whatis-pros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.25rem 0 0;padding:0;list-style:none}
.esim-whatis-pros__item{display:flex;flex-direction:column;align-items:center;padding:1rem;border-radius:var(--esim-radius-box);background:var(--white);text-align:center}
.esim-whatis-pros__item .esim-icon-sm{margin:1.5rem;stroke-width:1.5}
.esim-whatis-pros__item .esim-text-size-small{max-width:22.5rem;margin:.75rem 0}
.esim-whatis-cons{display:grid;gap:1rem;max-width:40rem;margin:2rem auto 0;padding-left:1.25rem;color:var(--gray600)}
.esim-whatis-cons strong{color:var(--gray900);font-weight:500}
@media screen and (max-width:991px){
  .esim-whatis-pros{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media screen and (max-width:479px){
  .esim-whatis-pros{grid-template-columns:minmax(0,1fr)}
}