/* =====================================================================
   Home page: the "Pharmacy is the most frequent touchpoint…" slideshow on
   the same scale as the opening screen ("Your pharmacy is already a clinic.").
   Desktop: the headline is sized from the hero headline itself (a fixed share
   of it, set by home-scale.js as --bs-h), body copy matches the hero lede, and
   each drawing fills a full half of the width. If a slide would not fit the
   pinned screen, the script steps the headline down until it does.
   ===================================================================== */
@media (min-width:981px){
  .beats-show .bs-slide{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(48px,6vw,120px);
  }
  .beats-show .bs-txt h3{
    font-size:var(--bs-h, clamp(2.8rem,4.9vw,5.1rem));
    line-height:1.02;letter-spacing:-.045em;margin-bottom:.42em;
  }
  .beats-show .bs-txt p{font-size:clamp(1.1rem,1.3vw,1.4rem);line-height:1.6;max-width:46ch}
  .beats-show .bs-viz{width:100%;max-width:none;justify-self:stretch;margin:0}
  .beats-show .bs-viz svg{width:100%;max-height:none;margin:0}
  .beats-show .bs-viz .cap{font-size:clamp(1rem,1.15vw,1.3rem);margin-top:clamp(18px,1.8vw,30px)}
  .beats-show .bs-viz .cap i{width:9px;height:9px}
}

/* =====================================================================
   "Telemedicine as a service, delivered through the pharmacy." — same
   scale as the opening screen. --hero-h is the hero headline's size (set by
   home-scale.js); --sv-k is a fit factor the script lowers only if the
   pinned screen would otherwise overflow.
   ===================================================================== */
@media (min-width:981px){
  .service-bundle .sv-scroll .sv-pin{
    top:var(--hdr);height:calc(100svh - var(--hdr));
    align-content:center;gap:clamp(24px,3.2vh,48px);
  }
  .service-bundle .sv-head{max-width:none}
  .service-bundle .sv-head h2{
    font-size:calc(var(--hero-h, 81px) * .6 * var(--sv-k, 1));
    line-height:1.04;letter-spacing:-.045em;max-width:18em;
  }
  .service-bundle .sv-head p{font-size:clamp(1.1rem,1.3vw,1.4rem);line-height:1.6;margin-top:.7em}
  .service-bundle .sv-body{
    grid-template-columns:minmax(0,1.22fr) minmax(0,1fr);   /* drawings a little larger */
    gap:clamp(40px,5vw,100px);
  }
  .service-bundle .sv-stage{max-width:none;width:calc(100% * var(--sv-k, 1))}
  .service-bundle .sv-slides{min-height:var(--sv-panel-h, 260px)}
  .service-bundle .sv-panel h3{
    font-size:calc(var(--hero-h, 81px) * .5 * var(--sv-k, 1));
    line-height:1.04;letter-spacing:-.04em;margin-bottom:.4em;
  }
  .service-bundle .sv-panel p{font-size:clamp(1.1rem,1.3vw,1.4rem);line-height:1.6;max-width:44ch}
  .service-bundle .sv-panel p.sv-note{font-size:clamp(.85rem,.95vw,1rem)!important}
  .service-bundle .sv-cta{font-size:clamp(1rem,1.1vw,1.2rem);margin-top:clamp(20px,2vw,30px)}
}

/* closing call to action: one centred button */
.cta-end{display:flex;justify-content:center}
.cta-end .btn{
  font-size:clamp(1.05rem,1.2vw,1.3rem);
  padding:clamp(15px,1.3vw,20px) clamp(28px,2.6vw,40px);
  border-radius:999px;gap:10px;
}

/* The drawings are re-rendered every frame instead of being cached as a
   bitmap: with will-change the browser kept the bitmap from before the
   drawing was resized, so the Platform insights screen looked blurry until
   a click forced a redraw. */
.sv-frame.on{will-change:auto}
.sv-frame svg{shape-rendering:geometricPrecision;text-rendering:geometricPrecision}