/* SSAL final mobile cleanup pass — 2026-09-14 */

html,body{max-width:100%;overflow-x:hidden}

/* Keep the hero centered and give the product mockup priority */
.hero-centered{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-copy,.hero-after{width:min(100%,980px);margin-inline:auto}
.hero-visual{width:min(940px,94vw);margin:18px auto 28px}
.hero-visual img{width:100%;height:auto;display:block}
.hero-benefits{grid-template-columns:repeat(4,minmax(0,1fr))}
.hero-price{justify-content:center}
.hero-cta{min-width:260px}
.hero-line{display:inline}

/* Stronger percentage emphasis in Meet the app */
.pct{font-weight:900}
.brand-accent{color:var(--green2);font-weight:900}

/* Keep key calls to action centered */
#how .container>div:last-child{text-align:center!important}
#how .container>div:last-child .btn{margin-inline:auto}
.reassure .btn{display:flex;margin:20px auto 0}

/* Dark transformation section readability */
.transform .section-head p,.transform .smalllead{color:#fff!important;opacity:1}
.transitions,.transition-row{justify-content:center}

/* Desktop hierarchy and spacing pass */
@media(min-width:901px){
  .hero-copy{width:min(100%,1160px);max-width:1160px}
  .hero-copy h1{font-size:clamp(48px,4.2vw,60px)!important;line-height:1.06!important;max-width:1160px;margin:.08em auto .3em}
  .hero-line{display:block}
  .hero-line-1,.hero-line-2{white-space:nowrap}
  .hero-line-2{margin-top:8px}

  .section-head .eyebrow{margin-bottom:20px}
  .proof-grid>div:first-child>.eyebrow{display:table;margin:0 auto 22px}
  .dark .section-head .eyebrow{margin-bottom:20px}
  .support-box>div:first-child>.eyebrow{margin-bottom:20px}
  .final .eyebrow{margin-bottom:20px}

  .leak-card .copy>.eyebrow{margin-bottom:18px}
  .leak-card .copy>h3{margin-top:0}

  #how .section-head h2{max-width:900px;margin-left:auto;margin-right:auto}
  #how .brand-accent{display:inline-block;color:var(--green2)}
}

@media(max-width:900px){
  .hero-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}
  .demo-wrap>div:first-child{text-align:center}
  .demo-wrap .eyebrow{margin-inline:auto}

  /* Sticky CTA only appears contextually after the hero and before pricing */
  .mobile-buy{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease}
  .mobile-buy.is-visible{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
}

@media(max-width:620px){
  body{padding-bottom:74px}
  .container{width:min(100% - 22px,1160px);max-width:100%}
  section{padding:60px 0;max-width:100%;overflow:hidden}

  /* Mobile header */
  .navin{height:64px;gap:8px}
  .brand{gap:7px;min-width:0}
  .brand img{width:30px;height:30px}
  .brand span{font-size:13px;line-height:1.1;max-width:118px}
  .navlinks{margin-left:auto;gap:0}
  .nav-buy{font-size:12px!important;padding:10px 11px!important;border-radius:12px!important;white-space:nowrap}

  /* Hero: deliberate two-line headline on mobile */
  .hero{padding:32px 0 46px}
  .hero-centered{gap:14px}
  .hero-copy .eyebrow{font-size:10px;letter-spacing:.09em;padding:8px 10px;margin-bottom:14px}
  .hero-copy h1{font-size:clamp(31px,8.6vw,39px)!important;line-height:1.02!important;letter-spacing:-.045em;margin:2px auto 4px;max-width:390px}
  .hero-line{display:block}
  .hero-line-1{white-space:nowrap}
  .hero-line-2{white-space:nowrap;font-size:clamp(17px,4.55vw,20px);line-height:1.2;letter-spacing:-.025em;margin-top:8px}
  .hero-visual{order:2;width:100%;margin:4px auto 10px;padding:8px;border-radius:20px}
  .hero-visual img{border-radius:14px;width:100%;max-width:100%}
  .hero-after{order:3}
  .hero-after .lead{font-size:16px;line-height:1.55;margin:0 auto 12px}
  .hero-value{font-size:17px;line-height:1.5}
  .hero-benefits{order:4;grid-template-columns:1fr;gap:8px;margin:14px 0}
  .hero-benefits .benefit{padding:11px 12px;font-size:14px}
  .hero-price{order:5;margin:12px 0 8px;justify-content:center}
  .hero-cta{order:6;width:min(100%,360px);font-size:16px}
  .hero-support{order:7;margin-top:8px}

  /* Consistent label-to-heading spacing across sections */
  h2{font-size:clamp(30px,8vw,39px)!important;line-height:1.07!important}
  .section-head{margin-bottom:28px}
  .section-head .eyebrow{margin-bottom:15px}
  .hope-head .eyebrow{margin-bottom:15px}
  #how .section-head .eyebrow,.offer .section-head .eyebrow,.leaks .section-head .eyebrow,.reviews .section-head .eyebrow,.faq .section-head .eyebrow{margin-bottom:15px}
  .support-box>div:first-child>.eyebrow{margin-bottom:15px}
  .support-box>div:first-child>h2{margin-top:0}
  .final .eyebrow{margin-bottom:15px}

  /* Big mistake: centered label, breathing room, centered proof image */
  .proof-grid{gap:32px}
  .proof-grid>div:first-child>.eyebrow{display:table;margin:0 auto 16px}
  .proof-img{width:min(100%,390px);margin:4px auto 0;padding:8px;border-radius:22px}
  .proof-img img{width:100%;height:auto;object-fit:contain}

  .hope-item,.solution-card,.offer-card,.audience-card{padding:18px}
  .solution-card .pct{font-weight:950;font-size:1.12em}

  /* Demo */
  .demo-wrap{gap:30px}
  .demo-wrap>div:first-child{text-align:center}
  .demo-wrap>div:first-child .eyebrow{margin-bottom:15px}
  .phone-frame{width:min(330px,92vw);max-width:100%;padding:10px;border-radius:32px;margin-inline:auto;overflow:hidden}
  .phone-frame video{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:810/1540;object-fit:contain;border-radius:24px}

  /* Transformation pills should read as complete statements */
  .transitions,.transition-row{display:grid!important;grid-template-columns:1fr!important;width:100%;gap:10px}
  .transitions span,.transition-row span{text-align:center;border-radius:16px!important}

  /* Support section: tighten list but preserve breathing room above */
  .support-box{gap:22px}
  .support-list{gap:7px}

  /* Pricing image must never force desktop width on mobile */
  .pricing .container,.price-card{width:100%;max-width:100%}
  .price-card{padding:28px 18px}
  .price-card img{display:block;width:100%;max-width:100%;height:auto;margin:22px auto 0;border-radius:16px}

  /* Bottom CTA fixed to the mobile viewport, never wider than it */
  .mobile-buy{left:10px!important;right:10px!important;width:auto!important;max-width:calc(100vw - 20px)!important;bottom:max(10px,env(safe-area-inset-bottom));padding:13px 16px;font-size:14px;box-sizing:border-box}
  footer{padding-bottom:96px}
}