/* home.css — the homepage and the Programme page (lot « home »).
   Builds on the tokens and components of site.css (wrap, kicker, btn, card,
   shot, stories, hs-sm…). Breakpoints match site.css: 960 px and 640 px.
   Homepage order: hero → press → video + Point A/B → next live → signals →
   what the audit gives → stories → program → platform (tabs) → who's talking →
   for whom → cohort (the final call to action). On a phone, the program cards
   and the alumni quotes are rows you swipe (.hs-sm) whose next card peeks by
   about 24 px; the platform tabs wrap; most of the Sortlist mosaic folds away. */

/* ── shared bits ─────────────────────────────────────────────────────────── */
.h-head{max-width:760px}
.h-head .lede{margin-top:12px}
.h-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:26px}
.h-more{margin-top:22px}
.hrow{position:relative}
.h-ill{border-radius:var(--fos-radius);width:100%}

/* ── 2 · hero ────────────────────────────────────────────────────────────── */
.hh{padding:56px 0 0;background:linear-gradient(180deg,#F6F8FF 0%,#fff 70%)}
.hh-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:44px;align-items:center}
.hh-tag{font-size:13px;font-weight:600;color:var(--fos-muted);margin-bottom:12px}
.hh .cohortpill{margin-bottom:18px}
.hh h1{font-size:48px;max-width:620px}
.hh .lede{max-width:560px}
.hh-free{font-size:14px;color:var(--fos-muted);margin-top:14px;max-width:560px}
.hh-free a,.h-link{color:var(--fos-blue-ink);font-weight:600}
.h-cta .h-link{font-size:15px}
.hh-art{position:relative;margin:0}
.hh-art .h-ill{box-shadow:0 30px 60px -40px rgba(11,14,20,.45)}
.hh-human{position:absolute;left:-18px;bottom:-22px;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--fos-card-border);border-radius:12px;padding:10px 14px 10px 10px;box-shadow:0 18px 36px -24px rgba(11,14,20,.45);max-width:300px}
.hh-human img{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.hh-human p{font-size:13px;line-height:1.35;color:var(--fos-muted)}
.hh-human b{display:block;color:var(--fos-ink);font-size:14px}
.hh-faces{padding-top:40px;padding-bottom:30px;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.hh-faces .faces-t{color:var(--fos-body)}
.hh-faces .h-link{font-size:14px}

/* ── 3 · networks and press ──────────────────────────────────────────────── */
.hpress{border-top:1px solid var(--fos-line);border-bottom:1px solid var(--fos-line);padding:22px 0}
.hpress-in{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px}
.hpress-l{font-size:13px;color:var(--fos-muted);max-width:220px;line-height:1.4}
.hpress img{height:28px;width:auto;filter:grayscale(1);opacity:.7}
.hpress-a{font-weight:800;font-size:17px;color:var(--fos-body);text-decoration:none;letter-spacing:-.01em}
.hpress-a:hover{color:var(--fos-ink)}
.hpress-net{margin-left:18px}

/* ── 4 · video + Point A / Point B ───────────────────────────────────────── */
.hv-grid{display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;align-items:center}
.hv-grid.novideo{grid-template-columns:minmax(0,1fr)}
.hv-phone{margin:0}
.hv-phone video{width:100%;aspect-ratio:9/16;border-radius:24px;background:var(--fos-ink);object-fit:cover;box-shadow:0 30px 60px -30px rgba(11,14,20,.5)}
.hv-copy p{font-size:17px;margin-top:14px;max-width:560px}
.hv-copy p.hv-lead{font-size:21px;font-weight:600;color:var(--fos-ink);line-height:1.35;margin-top:0}

/* ── 4b · next live: a light band under the video, never a second primary ── */
.hlive .livestrip{background:#fff;color:var(--fos-body);border-bottom:1px solid var(--fos-line)}
.hlive .livestrip-in{padding-top:16px;padding-bottom:16px;font-size:15px}
.hlive .livestrip-k{color:var(--fos-blue)}
.hlive .livestrip-t b{color:var(--fos-ink)}
.hlive .livestrip-a{color:var(--fos-blue-ink)}
.hab{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:14px;margin-top:26px;max-width:680px}
.hab-pt{background:#fff;border:1px solid var(--fos-card-border);border-radius:12px;padding:16px 18px}
.hab-pt.b{border-color:var(--fos-blue)}
.hab-l{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--fos-muted);margin-bottom:6px}
.hab-pt.b .hab-l{color:var(--fos-blue)}
.hab-pt p{font-weight:600;color:var(--fos-ink);margin:0;font-size:16px}
.hab-arr{align-self:center;font-size:24px;font-weight:800;color:var(--fos-blue)}

/* ── 5 · the five signals ───────────────────────────────────────────────── */
.hsig-grid{align-items:start}
.hsig-grid .h-ill{max-width:440px;margin-top:22px}
.hsig{list-style:none;display:grid;gap:10px}
.hsig-i{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--fos-line);border-radius:12px;padding:14px 16px;background:#fff;cursor:pointer;transition:border-color .15s,background .15s}
.hsig-i:hover{border-color:var(--fos-card-border)}
.hsig-i input{width:20px;height:20px;margin-top:2px;accent-color:var(--fos-blue);flex:none;cursor:pointer}
.hsig-i:has(input:checked){border-color:var(--fos-blue);background:var(--fos-card-bg)}
.hsig-t{font-size:15px;color:var(--fos-body)}
.hsig-out{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:center;margin-top:14px;background:var(--fos-ink);color:#C6CDDC;border-radius:12px;padding:16px 18px}
.hsig-n{font-size:30px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;line-height:1}
.hsig-out p{flex:1;min-width:190px;font-size:15px}
.hsig-alt{font-size:14px;color:var(--fos-muted);margin-top:12px}

/* ── 6 · what the audit gives back ──────────────────────────────────────── */
.hnums{list-style:none;display:grid;gap:14px;margin-top:20px}
.hnums li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;font-size:16px}
.hnums .n{width:30px;height:30px;border-radius:50%;background:var(--fos-blue);color:#fff;font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.hnums b{color:var(--fos-ink)}
.h-shot{margin:0}
.h-shot .shot-cap{font-size:13px;color:var(--fos-body)}
.h-report{font-size:15px;color:var(--fos-body);margin-top:18px;max-width:560px}

/* ── 8 · five installations ─────────────────────────────────────────────── */
.hinst{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:32px}
.hic{background:#fff;border:1px solid var(--fos-card-border);border-radius:var(--fos-radius);overflow:hidden;display:flex;flex-direction:column}
.hic img{width:100%;aspect-ratio:7/5;object-fit:cover;border-bottom:1px solid var(--fos-line)}
.hic-b{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.hic-n{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fos-blue)}
.hic h3{font-size:17px}
.hic p{font-size:14px}
.hic-w{margin-top:auto;padding-top:6px;font-size:13px;color:var(--fos-muted)}

/* ── 9 · the platform: three short lines, then the screens ──────────────── */
.hpil{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px;margin-top:26px}
.hpil li{font-size:15px;border-top:2px solid var(--fos-ink);padding-top:12px}
.hpil b{color:var(--fos-ink)}
.hpil-src{font-size:14px;color:var(--fos-body);margin-top:18px}
.hpil-src .textlink{white-space:nowrap}

/* ── 9 · product tabs ───────────────────────────────────────────────────── */
.htabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.htabs button{border:1px solid var(--fos-card-border);background:#fff;border-radius:999px;padding:8px 16px;font:600 14px/1.2 var(--fos-sans);color:var(--fos-ink);cursor:pointer}
.htabs button[aria-selected="true"]{background:var(--fos-ink);border-color:var(--fos-ink);color:#fff}
.hpanel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:36px;align-items:center;margin-top:26px}
.hpanel h3{font-size:24px}
.hpanel p{margin-top:10px}

/* ── 10 · who is talking ────────────────────────────────────────────────── */
.hwho{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px;align-items:start}
.hwho p.bio{margin-top:14px;font-size:16px}
.htl{list-style:none;margin-top:22px}
.htl li{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid var(--fos-line);font-size:14.5px}
.htl li b{color:var(--fos-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.htl li.down b{color:var(--fos-red)}
.htl a{font-size:13px;font-weight:600;color:var(--fos-blue-ink);white-space:nowrap}
.hmosaic{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hmosaic figure{margin:0;position:relative;border-radius:12px;overflow:hidden;background:var(--fos-card-bg)}
.hmosaic img{width:100%;height:100%;object-fit:cover}
.hmosaic .big{grid-column:1/-1;aspect-ratio:16/9}
.hmosaic .wide{grid-column:1/-1;aspect-ratio:900/365}
.hmosaic .sm{aspect-ratio:4/3}
.hmosaic figcaption{position:absolute;left:8px;bottom:8px;background:rgba(11,14,20,.72);color:#fff;font-size:12px;font-weight:600;padding:3px 8px;border-radius:6px}
.hcases{margin-top:22px;font-size:15px;color:var(--fos-body)}
.hcases .textlink{white-space:nowrap}

/* ── 11 · for whom ──────────────────────────────────────────────────────── */
.hfit{margin-top:30px;align-items:stretch}
.hfit .card{padding:26px}
.hfit h3{font-size:15px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}
.hfit .yes h3{color:var(--fos-blue)}
.hfit .no h3{color:var(--fos-muted)}
.hfit ul{list-style:none}
.hfit li{position:relative;padding:8px 0 8px 26px;font-size:15px}
.hfit .yes li::before{content:"";position:absolute;left:0;top:15px;width:11px;height:11px;border-radius:50%;background:var(--fos-blue)}
.hfit .no li::before{content:"";position:absolute;left:2px;top:19px;width:9px;height:2px;background:var(--fos-muted)}

/* ── 12 · cohort 2 (dark), the final call to action ───────────────────────── */
.hcoh{padding:84px 0}
.hcoh-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:start}
.hcoh h2{font-size:34px}
.hcoh .seats{display:block;margin-top:14px;color:#fff;font-weight:600}
.hcoh-facts{color:#C6CDDC;font-weight:500;font-size:15px;margin-top:12px}
.hg-short{color:#AEB8D0;font-size:15px;margin-top:12px}
.hcoh .faces-row img{border-color:var(--fos-ink)}
.hcf{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px;color:#AEB8D0;font-size:14px}
.hcf .faces-row img{width:40px;height:40px;border-radius:50%;object-fit:cover;border:2px solid var(--fos-ink);margin-left:-10px}
.hcf .faces-row img:first-child{margin-left:0}
.hcoh-side{display:flex;flex-direction:column;gap:14px;align-items:flex-start;background:var(--fos-ink-2);border:1px solid #2A3142;border-radius:var(--fos-radius);padding:26px}
.hcoh-side p{font-size:15px}
.hcoh-side .fine{color:#AEB8D0;font-size:14px}
.hcoh-side a:not(.btn){color:#fff}
.hcoh-side .btn{width:100%}

/* ── Programme page ─────────────────────────────────────────────────────── */
.ph{padding:56px 0 64px;background:linear-gradient(180deg,#F6F8FF 0%,#fff 80%);border-bottom:1px solid var(--fos-line)}
.ph-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px;align-items:center}
.ph h1{font-size:46px;max-width:620px}
.ph .cohortpill{margin-bottom:18px}
.pfacts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.pfacts li{font-size:13px;font-weight:600;color:var(--fos-ink);background:#fff;border:1px solid var(--fos-card-border);border-radius:999px;padding:6px 12px}
.pphases{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:18px;margin-top:30px}
.pph{border:1px solid var(--fos-card-border);border-radius:var(--fos-radius);padding:24px;background:#fff}
.pph.p1{border-top:4px solid var(--fos-blue)}
.pph.p2{border-top:4px solid var(--fos-ink)}
.pph-k{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fos-muted)}
.pph h3{font-size:21px;margin:4px 0 14px}
.pwk{list-style:none;display:grid;gap:8px;font-size:15px}
.pwk li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:10px}
.pwk b{white-space:nowrap}
.pwk b{color:var(--fos-ink);font-variant-numeric:tabular-nums}
.pwk.bul li{grid-template-columns:14px minmax(0,1fr)}
.pwk.bul li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fos-ink);margin-top:9px}
.pinst{display:grid;gap:16px;margin-top:30px}
.pic{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:24px;align-items:start;background:#fff;border:1px solid var(--fos-card-border);border-radius:var(--fos-radius);padding:20px}
.pic img{border-radius:10px;width:100%}
.pic .kicker{margin-bottom:6px}
.pic h3{font-size:22px}
.pic p{margin-top:8px}
.pchecks{list-style:none;display:grid;gap:6px;margin-top:12px;font-size:15px}
.pchecks li{position:relative;padding-left:24px;color:var(--fos-ink)}
.pchecks li::before{content:"✓";position:absolute;left:0;color:var(--fos-green);font-weight:800}
.prhythm{margin-top:30px}
.prhythm .card h3{font-size:17px}
.prhythm .card p{font-size:14.5px;margin-top:6px}
.hcohorts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:28px}
.hco{background:#fff;border:1px solid var(--fos-card-border);border-radius:var(--fos-radius);padding:22px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.hco.open{border-color:var(--fos-blue);box-shadow:0 0 0 1px var(--fos-blue) inset}
.hco-k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--fos-blue)}
.hco h3{font-size:19px}
.hco-d,.hco-s{font-size:14.5px}
.hco-s{color:var(--fos-muted)}
.hco .btn{margin-top:6px}
.papply{align-items:start}
.hguar{display:grid;gap:14px;margin-top:22px}
.hg{background:#fff;border:1px solid var(--fos-card-border);border-radius:var(--fos-radius);padding:22px}
.hg h3{font-size:18px}
.hg p{font-size:15px;margin-top:6px}
.papply-b p{margin-top:12px}
.papply-b .fine{margin-top:14px}
.papply-b .seats{display:block;margin-top:16px;font-size:14px;color:var(--fos-muted)}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:960px){
  .hh-grid,.ph-grid,.hwho,.hcoh-grid,.hpanel{grid-template-columns:minmax(0,1fr)}
  .hh h1{font-size:42px}
  .ph h1{font-size:38px}
  .hinst{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hcohorts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hpil{grid-template-columns:minmax(0,1fr);gap:14px}
  .hh-human{left:12px}
}
@media (max-width:640px){
  .hh{padding-top:32px}
  .hh h1{font-size:34px}
  .ph h1{font-size:31px}
  .ph{padding:36px 0 44px}
  .hh-grid{gap:30px}
  .hh-art .h-ill{display:none}
  .hh-human{position:static;max-width:none;box-shadow:none}
  .hh-faces{padding-top:24px;padding-bottom:22px}
  /* The shared cohort pill is a flex row: on a phone its text node wraps and splits « J-18 ». Read it as a line instead. */
  .hh .cohortpill,.ph .cohortpill{display:block;border-radius:12px;line-height:1.45}
  .hh .cohortpill .dot,.ph .cohortpill .dot{display:inline-block;margin-right:6px;vertical-align:1px}
  .cohortpill [data-days-until]{white-space:nowrap}
  .h-cta .btn{width:100%}
  .hpress-in{gap:12px 22px}
  .hpress-l{max-width:none;flex-basis:100%}
  .hpress-net{margin:6px 0 0}
  .hv-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .hv-phone{max-width:180px;margin:0 auto}
  .hab{grid-template-columns:minmax(0,1fr)}
  .hab-arr{display:none}
  .hsig-grid .h-ill{display:none}
  .htabs{gap:6px;margin-top:22px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .htabs button{flex:none}
  .htabs button{padding:8px 12px;font-size:13.5px}
  .hpanel{gap:18px;margin-top:18px}
  .hpanel h3{font-size:21px}
  .hmosaic .sm,.hmosaic .wide{display:none}
  .pphases,.hcohorts{grid-template-columns:minmax(0,1fr)}
  .pic{grid-template-columns:minmax(0,1fr);gap:14px}
  .pic img{max-height:180px;object-fit:cover}
  .hcoh{padding:56px 0}
  .hcoh h2{font-size:26px}
  /* rows you swipe: the next card peeks by about 24 px (its edge, not half its words) */
  .hrow .altquotes.hs-sm{margin-top:20px}
  .hrow .hs-sm>*{flex-basis:calc(100% - 38px)}
}