/* Landing-only layout polish. Loaded after styles.css via landing-layout-fixes.js. */

/* Scope must wrap inside its section, including after long localized copy.
   Do not hide document overflow: every word and control must remain reachable. */
#landing .directions-section .section-heading{flex-wrap:wrap}
#landing .directions-section .section-heading>div{min-width:0;max-width:100%;flex:1 1 320px}
#landing .current-scope{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere;flex-shrink:1}

/* Keep the new four-step flow visually balanced after the old five-step layout was retired. */
.how-section{padding-top:48px}
.how-section .section-heading{margin-bottom:24px}
.how-section .section-heading h2{font-size:clamp(32px,2.6vw,40px)}
.steps-grid{width:100%;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.steps-grid article{min-height:0;padding:20px 18px 20px 58px;align-content:start}
.steps-grid article>span{left:16px;top:18px;width:30px;height:30px}
.steps-grid strong{font-size:14.5px;line-height:1.35}
.steps-grid p{margin:9px 0 0;font-size:12.5px;line-height:1.55}

/* Give the paid/free product cards breathing room without making them look like a second oversized step row. */
.value-strip.section-wrap{margin-top:30px}
.value-strip article{align-items:flex-start;padding:19px 18px}
.value-strip strong{font-size:14.5px;line-height:1.35}
.value-strip p{font-size:12px;line-height:1.52}
.value-icon{flex:0 0 42px}

/* Reduce excessive vertical drift between the main landing sections. */
.directions-section{padding-top:50px}
.facts-section{margin-top:36px}
.facts-section article{padding:20px 10px}
.facts-section span{font-size:12px;line-height:1.35}
.bottom-cta{margin-top:34px;margin-bottom:32px;padding-top:24px;padding-bottom:24px}
.bottom-cta h2{font-size:clamp(22px,2vw,26px);line-height:1.2}

/* Long 250+ positioning copy needs more usable width before switching to a single-column hero. */
@media (min-width:981px){
  .hero-section{grid-template-columns:minmax(0,50%) minmax(0,50%)}
  .hero-copy{padding-right:30px}
  .hero-copy h1{font-size:clamp(44px,4.7vw,70px);line-height:1}
  .hero-lead{font-size:clamp(16px,1.25vw,19px);line-height:1.62}
}

/* Tablet: avoid a cramped two-column hero and the stale last-card span from the former five-step grid. */
@media (max-width:1100px){
  .steps-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .steps-grid article:last-child{grid-column:auto}
  .value-strip.section-wrap{margin-top:24px}
}

@media (max-width:980px){
  .hero-section{grid-template-columns:1fr;min-height:0}
  .hero-copy{padding:46px clamp(22px,6vw,58px) 30px}
  .hero-copy h1{max-width:760px}
  .hero-lead{max-width:820px}
  .hero-art{height:360px;min-height:360px}
  .hero-art img{height:360px;min-height:360px}
  .hero-art:before{left:0;right:0;top:-1px;bottom:auto;width:100%;height:80px;background:linear-gradient(180deg,#fff,rgba(255,255,255,0))}
}

@media (max-width:760px){
  .how-section{padding-top:42px}
  .directions-section{padding-top:42px}
  .section-heading h2,.how-section .section-heading h2{font-size:32px;line-height:1.08}
  .steps-grid{grid-template-columns:1fr;gap:12px}
  .steps-grid article{padding:18px 16px 18px 56px}
  .steps-grid strong{font-size:14px}
  .steps-grid p{font-size:12.5px}
  .value-strip.section-wrap{margin-top:22px}
  .value-strip article{padding:17px}
  .facts-section{margin-top:30px}
  .bottom-cta{margin-top:30px;margin-bottom:28px}
  .hero-copy{padding:36px 20px 24px}
  .hero-copy h1{font-size:clamp(38px,11vw,48px);line-height:1.02;margin-bottom:18px}
  .hero-lead{font-size:15px;line-height:1.58;margin:12px 0}
  .hero-art{height:280px;min-height:280px}
  .hero-art img{height:280px;min-height:280px}
}