/* Responsive fixes (2026-10): mobile overflow, banner crop, stretched/cropped images, type scale */

/* 1. No sideways page scroll: lp-story's decorative circle (right:-35px) widened the layout viewport on phones */
html,body{overflow-x:clip}
.lp-story,.lp-process,.lp-aids,.lp-proof,.lp-reviews{overflow-x:clip}
img{max-width:100%}
/* width/height attributes + width:100% were stretching images vertically; let height follow the aspect ratio unless a class sets it */
:where(main,footer,.site-header) img{height:auto}

@media(max-width:820px){
  /* 2. Hero banner: art-directed crop. The 1600x640 banners keep the subjects on the right ~55% (left is empty gradient
        reserved for desktop text), so on phones show a 4:3 window anchored right, with the copy stacked underneath. */
  .lp-hero-slider{height:auto;min-height:0;background:var(--purple-950)}
  .lp-hero-slides{position:relative;inset:auto;display:grid}
  .lp-hero-slide{position:relative;inset:auto;grid-area:1/1;display:flex;flex-direction:column;min-width:0}
  .lp-hero-slide>img{position:static;inset:auto;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:95% center;-webkit-mask-image:linear-gradient(#000 82%,transparent);mask-image:linear-gradient(#000 82%,transparent)}
  .lp-hero-slide:nth-child(2)>img{object-position:90% center}
  .lp-hero-slide:nth-child(3)>img{object-position:78% center}
  .lp-slide-shade{display:none}
  .lp-slide-content{height:auto;padding-top:6px;padding-bottom:40px;justify-content:flex-start;align-items:stretch;text-align:left}
  .lp-slide-content .lp-kicker{justify-content:flex-start;margin:0 0 12px}
  .lp-slide-content .lp-actions{width:100%;margin:0;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:12px}
  .lp-slide-content .lp-actions .button,.lp-slide-content .lp-slide-call{width:100%;justify-content:center;text-align:center}
  /* slider dots/arrows sit on the photo, clear of the copy and the floating WhatsApp button */
  .lp-slider-ui{top:calc(100vw*3/4 - 60px);bottom:auto}

  /* container gutter: 14px was too tight against the screen edge */
  .container:not(.process-strip-grid){width:min(calc(100% - 40px),var(--container))}
  /* the 5-step strip is a horizontal scroller (width:max-content); the gutter rule must not squash it */
  .process-strip-grid{width:max-content;min-width:100%}

  /* 3. Images that were cropped/stretched by fixed heights */
  .lp-image-card{height:auto;aspect-ratio:1/1}
  .lp-process-photo{min-height:0;aspect-ratio:3/2}
  .trial-page .trial-hero-card>.trial-hero-main{height:auto;aspect-ratio:1/1}
  .trial-hero-timeline>img,.trial-period-card img,.product-hero-card img{object-fit:contain;height:auto}
}

/* 4. Mobile type scale */
@media(max-width:560px){
  body{font-size:16px}
  main h1,.lp-slide-content h1,.lp-slide-content h2,.landing-page h1{font-size:clamp(1.95rem,8.6vw,2.4rem)!important;line-height:1.1!important;letter-spacing:-.035em}
  main h2,.lp-section-heading h2,.lp-final h2{font-size:clamp(1.65rem,7.2vw,2.05rem)!important;line-height:1.15!important;letter-spacing:-.03em}
  main h3{font-size:1.08rem}
  .lp-slide-content>p:not(.lp-kicker),.lp-hero-copy>p:not(.lp-kicker){font-size:.98rem;line-height:1.6;margin:16px 0 22px}
  .eyebrow,.lp-kicker{font-size:.7rem;letter-spacing:.1em}
  .lp-review-card>p{font-size:.95rem}
}

/* Testimonial slider ("Support that feels personal") */
.lp-proof .container{display:block}
.lp-proof-heading{max-width:760px;margin:0 auto 34px;text-align:center}
.lp-proof-shell{position:relative}
.lp-proof-track{gap:20px}
.lp-proof-track .lp-proof-card{flex:0 0 calc((100% - 20px)/2);scroll-snap-align:start;display:flex;flex-direction:column;justify-content:space-between}
.lp-proof-track .lp-proof-card blockquote{font-size:1.02rem;line-height:1.7}
.lp-proof .lp-review-arrow{background:#fff;color:var(--purple-950)}
@media(max-width:820px){.lp-proof-track .lp-proof-card{flex-basis:100%}.lp-proof-heading{margin-bottom:24px}}

/* Testimonial pagination dots (replaces the overlapping arrows) */
.lp-dots{display:flex;justify-content:center;gap:9px;margin-top:22px}
.lp-dots button{width:9px;height:9px;padding:0;border:1px solid #fff;border-radius:99px;background:transparent;transition:.25s;cursor:pointer}
.lp-dots button.is-active{width:34px;background:#fff}
.lp-reviews .lp-dots button{border-color:var(--purple-800)}
.lp-reviews .lp-dots button.is-active{background:var(--purple-800)}

/* Location card home icon: clearer tile + glyph */
.location-icon{background:rgba(255,255,255,.18);color:#fff}
.location-icon svg{width:26px;height:26px;stroke-width:1.8}