/* =========================================================
   Side-by-side layouts for the top home sections
   (problems, outcomes, growth system, platforms).
   ========================================================= */

/* ---------- problems: text + photo | sliding cards ---------- */
.split-hs{padding-top:clamp(70px,8vw,110px);padding-bottom:clamp(70px,8vw,110px)}
.sh-grid{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(28px,4vw,56px);align-items:center}
.sh-side{display:grid;gap:22px}
.sh-side h2{margin:16px 0 12px;font-size:clamp(28px,3.2vw,44px)}
.sh-photo{aspect-ratio:16/10;max-height:280px}
.sh-main{min-width:0}
.sh-main .hs{--pad:0px;padding:6px 0 14px;margin-right:calc(-1 * max(16px,(100vw - 1200px) / 2))}
.sh-main .wrap{width:auto;margin:0}
.sh-main .hs-track.problems > .prob{width:330px}

/* ---------- outcomes: text | 2x2 photo grid ---------- */
.oc-split{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,60px);align-items:center}
.oc-side h2{margin:16px 0 12px;font-size:clamp(28px,3.2vw,44px)}
.oc-side .checks{margin-top:22px}
.oc-split .outcomes{grid-template-columns:1fr 1fr;grid-template-rows:repeat(2,clamp(210px,19vw,320px));gap:14px}
.oc-split .oc0,.oc-split .oc3{grid-row:auto;grid-column:auto}
.oc-split .oc-p{display:none}
.oc-split .oc b{font-size:clamp(17px,1.5vw,22px)}
.oc-split .oc figcaption{left:16px;right:16px;bottom:14px}
.oc-split .win{top:12px;right:12px;padding:7px 10px 7px 7px;gap:7px;border-radius:12px}
.oc-split .win i{width:22px;height:22px;border-radius:7px;font-size:10px}
.oc-split .win small{font-size:10px}
.oc-split .win b{font-size:14px}

/* ---------- growth system: text + photo | vertical steps ---------- */
.sys-split{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(32px,5vw,72px);align-items:center}
.sys-side{display:grid;gap:22px}
.sys-side h2{margin:16px 0 12px;font-size:clamp(28px,3.2vw,44px)}
.sys-photo{aspect-ratio:16/10;max-height:300px;box-shadow:0 30px 60px -24px rgba(0,0,0,.6)}
.sys-side .system-foot{justify-content:flex-start;margin-top:0}
.pipeline.vertical{grid-template-columns:1fr;gap:14px;margin-top:0;padding-left:4px}
.pipeline.vertical .pipe-track{left:34px;right:auto;top:26px;bottom:26px;width:3px;height:auto}
.pipeline.vertical .pipe-fill{transform-origin:top;transform:scaleY(0)}
.pipeline.vertical .pnode{display:grid;grid-template-columns:62px 1fr;gap:18px;align-items:center;text-align:left}
.pipeline.vertical .dot{width:62px;height:62px;border-radius:18px;margin:0}
.pipeline.vertical .dot svg{width:24px;height:24px}
.pipeline.vertical .pnode h3{margin-top:0;font-size:16px}
.pipeline.vertical .pnode p{margin-top:2px}

/* ---------- tablet: stack, keep text and photo side by side ---------- */
@media (max-width:1100px){
  .sh-grid,.oc-split,.sys-split{grid-template-columns:1fr}
  .sh-side,.sys-side{grid-template-columns:1.1fr .9fr;align-items:center}
  .sh-side .reveal,.sys-side .reveal{grid-column:1}
  .sys-side .system-foot{grid-column:1 / -1}
  .sh-main .hs{margin-right:-16px}
  .oc-split .outcomes{grid-template-rows:repeat(2,clamp(200px,34vw,320px))}
}

/* ---------- phones ---------- */
@media (max-width:680px){
  .sh-side,.sys-side{grid-template-columns:1fr}
  .sh-photo,.sys-photo{max-height:none;aspect-ratio:16/10}
  .sh-main .hs-track.problems > .prob{width:80vw}
  .oc-split .outcomes{grid-template-columns:1fr;grid-template-rows:none;grid-auto-rows:auto}
  .oc-split .oc{aspect-ratio:16/10}
  .pipeline.vertical .pipe-track{left:30px}
  .pipeline.vertical .pnode{grid-template-columns:54px 1fr;gap:14px}
  .pipeline.vertical .dot{width:54px;height:54px;border-radius:16px}
}