/* ks-home-layout.css — homepage structure fixes (2026-07-29)
 * Kept in its own file: ks-mobile-tablet-fixes.css had grown seven appended
 * blocks and rules were accidentally landing inside an open @media block.
 *
 * #content.page-home is display:flex;flex-direction:column;align-items:center.
 * align-items:center makes every flex child shrink-wrap to its content instead
 * of filling the column, which is why sections rendered at 709 / 746 / 420 /
 * 900 / 802 / 400px inside a 1110px container.
 * The hero also sat BELOW the pricing tiers (y=1883 vs y=266).
 */

#content.page-home{align-items:stretch !important;}

#content.page-home > section,
#content.page-home > aside,
#content.page-home > div{
  width:100% !important;
  max-width:100% !important;
}

/* hero first, then the three buying paths */
#content.page-home > section.ks-hero{order:-2 !important;}
#content.page-home > section.ks-tier-block{order:-1 !important;}

/* inner content stays centred and readable rather than edge-to-edge */
#content.page-home > section > .container,
#content.page-home > section > div,
#content.page-home > section > h2,
#content.page-home > section > p{
  margin-left:auto !important;
  margin-right:auto !important;
}

/* three buying-path cards across on desktop, not 2 + 1 */
@media (min-width:992px){
  #content.page-home .ks-tier-grid{
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:20px !important;
    align-items:stretch !important;
    max-width:1110px !important;
    margin:0 auto !important;
  }
  #content.page-home .ks-tier-card{height:100% !important;}
}

/* KS-INTRINSIC-20260729
 * section.featured-products uses content-visibility:auto with
 * contain-intrinsic-size: auto 2400px, but its real rendered height is ~754px.
 * Over-reserving ~1650px makes the scrollbar shrink noticeably as you scroll
 * past it. Reserve close to the real height instead — still prevents CLS.
 */
#content.page-home section.featured-products{
  contain-intrinsic-size:auto 780px !important;
}