/* schools_v1 · Schools overview + School programs merged (SCHOOLS_SPEC_v1 + SITE_PAGES_COMMON_v1). Layout only: no text here. */
/* --- rhythm (C2; held under the 144 / 96 empty-band caps) --- */
main > section.band{padding-top:44px!important;padding-bottom:44px!important}   /* spec 72/72; held at 44 so no empty band passes 144 (cards' own padding and the head offsets add ~50) */
main > section.hero{padding-top:56px!important;padding-bottom:44px!important}
main .sec-head{margin-bottom:32px}
main .sec-head h2{margin-bottom:0}
/* frosted cards (C3) */
main .sc-g5 > .card,main .sc-g3 > .card,main .sc-g4 > .card,.sc-next > .sc-card,#what-schools-get .vp-list > li{
  background:rgba(255,255,255,.66)!important;border:1px solid #D6DCE8;border-radius:22px;box-shadow:0 8px 24px rgba(20,32,74,.08)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  main .sc-g5 > .card,main .sc-g3 > .card,main .sc-g4 > .card,.sc-next > .sc-card,#what-schools-get .vp-list > li{background:#fff!important}}
main .sc-g5 > .card,main .sc-g3 > .card,main .sc-g4 > .card,.sc-next > .sc-card,#what-schools-get .vp-list > li{backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px)}
/* hero photo in a frosted frame (cards/focus-frame) */
.hero .hero-photo{border:1px solid #D6DCE8;border-radius:22px;padding:10px;background:rgba(255,255,255,.66);box-shadow:0 8px 24px rgba(20,32,74,.08);overflow:hidden}
.hero .hero-photo img{border-radius:14px}
h1,h2,h3,h4{text-wrap:balance} main p,main li{text-wrap:pretty}

@media (min-width:769px){
  /* 2 · five cards: 4/4/4 then 6/6 */
  .sc-g5{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:24px!important}
  .sc-g5 > .card:nth-child(n+4){align-self:start}   /* the joined text-only card does not stretch to the photo card */
  .sc-g5 > .card{grid-column:span 4}
  .sc-g5 > .card:nth-child(n+4){grid-column:span 6}
  .sc-g3{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important}
  /* 4 · essentials: 3/3/3/3, equal heights, 2 rows max */
  .sc-g4{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:24px!important}
  /* 5 · discovery: 7/5 rail + image */
  #from-discovery-to-delivery .intro{display:grid;grid-template-columns:7fr 5fr;gap:24px;align-items:start;max-width:none}
  #from-discovery-to-delivery .intro .photo{margin:0}
  /* 6 · school programs: horizontal 8-step rail, image under it */
  #school-programs .wrap{display:grid;grid-template-columns:7fr 5fr;column-gap:24px;align-items:start}
  #school-programs .sc-open{grid-column:1;grid-row:1;margin-bottom:24px}
  #school-programs .wrap > .sec-head:not(.sc-open){grid-column:1;grid-row:2;margin-bottom:0}
  #school-programs .intro{display:contents}
  #school-programs .intro .photo{grid-column:2;grid-row:1 / span 2;margin:0;align-self:start}
  #school-programs .sc-rail{grid-column:1 / -1;grid-row:3;display:grid!important;grid-template-columns:repeat(8,minmax(0,1fr))!important;gap:12px!important;margin:32px 0 0}
  /* 7 · responsible: 5/7 */
  #responsible-implementation .wrap{display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:start}
  #responsible-implementation .intro{max-width:none;margin:0}
  /* 8 · what schools get: 4/4/4 */
  #what-schools-get .vp-list{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0}
  #what-schools-get .intro{max-width:none}
  /* 9 · FAQ 5/7 */
  #before-you-begin .wrap{display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:start}
  #before-you-begin .faq{max-width:none;margin:0}
  /* 10 · next step: 6/6 cards */
  .sc-next{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
  /* 11 · contact 6/6 */
  #contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  #contact .intro{max-width:none;margin:0}
}
.sc-next > .sc-card{padding:24px}
.sc-next .intro{max-width:none}
.sc-next .sec-head{margin-bottom:16px}
.sc-next .sc-card h3{margin:0 0 16px}
#what-schools-get .vp-list > li{padding:24px;list-style:none;margin:0}
#school-programs .sc-rail > li{background:rgba(255,255,255,.66);border:1px solid #D6DCE8;border-radius:16px;padding:12px;min-height:44px}
@media (max-width:768px){
  main > section.band{padding-top:20px!important;padding-bottom:20px!important}   /* spec 40/40; held at 20 for the 96 cap */
  main > section.hero{padding-top:32px!important;padding-bottom:20px!important}
  main [data-mobswipe]{align-items:flex-start}
  main .sec-head{margin-bottom:24px}
  .hero .hero-photo img{max-height:240px;width:100%;object-fit:cover}
  #what-schools-get .vp-list{display:grid;gap:12px}
  .sc-next{display:grid;gap:16px}
  .sc-next > .sc-card{padding:20px}
  #school-programs .sc-rail{--mobswipe-w:42%}
  #school-programs .sc-rail > li{padding:16px}
}
/* v4 · orphans in the 4-up scope cards: a little more measure so short items stay on one line */
@media (min-width:769px){#agree-the-essentials .sc-g4 > .card{padding-left:22px;padding-right:22px}}
#agree-the-essentials .sc-g4 ul.clean li{font-size:16px}
@media (min-width:769px){#agree-the-essentials .sc-g4 > .card h3{font-size:20px}}
/* v5 · scope cards: 5 cards after the merge -> 3 + 2 on a 6-track grid (no lone card) */
@media (min-width:769px){
  .sc-g4{grid-template-columns:repeat(6,minmax(0,1fr))!important}
  .sc-g4 > .card{grid-column:span 2}
  .sc-g4 > .card:nth-child(n+4){grid-column:span 3;align-self:start}
}
/* v6 (Schools v1b) · phone swipe rows: equal-height cards (layout only; nothing hidden) */
@media (max-width:768px){
  main .sc-g5[data-mobswipe],main .sc-g3[data-mobswipe],main .sc-g4[data-mobswipe]{align-items:stretch}
  main .sc-g5[data-mobswipe] > .card,main .sc-g3[data-mobswipe] > .card,main .sc-g4[data-mobswipe] > .card{display:flex;flex-direction:column;height:auto}
}
/* v7 (Schools v1b, Designer 05:09) */
/* 3 · section padding back to spec 72 desktop / 40 phone; inner edge margins trimmed so combined gaps stay within 144 / 96 (floor 56 / 32) */
main > section.band{padding-top:72px!important;padding-bottom:72px!important}
main > section.band > .wrap > :first-child{margin-top:0!important}
main > section.band > .wrap > :last-child,main > section.band > .wrap > :last-child > :last-child{margin-bottom:0!important}
@media (max-width:768px){
  main > section.band{padding-top:40px!important;padding-bottom:40px!important}
}
/* 1 · any button/link row inside a card sits at the card bottom */
main .card > .btn-row,main .card > a.btn,main .sc-card > .intro > .btn-row{margin-top:auto}
@media (min-width:769px){
  /* 2 · 8 steps as 4 + 4 */
  #school-programs .sc-rail{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  /* 5 · scope cards 3 + 2, row of 2 centred, same card width */
  .sc-g4 > .card,.sc-g4 > .card:nth-child(n+4){grid-column:span 2;align-self:stretch}
  .sc-g4 > .card:nth-child(4){grid-column:2 / span 2}
  .sc-g4 > .card:nth-child(5){grid-column:4 / span 2}
}
@media (max-width:768px){
  /* 5 · what schools get: swipe row, equal heights */
  #what-schools-get .vp-list[data-mobswipe]{align-items:stretch}
}
/* v7 · inner edge trims (Designer 05:09 rule 3): no trailing margin inside cards */
main .card > :last-child,main .sc-card :last-child,#what-schools-get .vp-list > li > :last-child{margin-bottom:0!important}
/* v7 · edges whose combined empty gap passed the cap at 72/40: padding to the floor (56 desktop / 32 phone) on both sides of that edge */
@media (min-width:769px){
  #where-we-can-work-together,#more-ways-to-begin,#agree-the-essentials,#what-schools-get,#before-you-begin,#your-school-your-next-step{padding-bottom:56px!important}
  #more-ways-to-begin,#agree-the-essentials,#from-discovery-to-delivery,#before-you-begin,#your-school-your-next-step,#contact{padding-top:56px!important}
}
@media (max-width:768px){
  #agree-the-essentials,#from-discovery-to-delivery,#school-programs,#what-schools-get,#before-you-begin,#your-school-your-next-step{padding-bottom:32px!important}
  #from-discovery-to-delivery,#school-programs,#responsible-implementation,#before-you-begin,#your-school-your-next-step,#contact{padding-top:32px!important}
}
@media (min-width:769px){
  #from-discovery-to-delivery,#school-programs,#responsible-implementation{padding-bottom:56px!important}
  #school-programs,#responsible-implementation,#what-schools-get{padding-top:56px!important}
}
@media (max-width:768px){
  #where-we-can-work-together,#more-ways-to-begin{padding-bottom:32px!important}
  #more-ways-to-begin,#agree-the-essentials{padding-top:32px!important}
}
/* v7 · phone equal-height rows: the extra height goes into the photo (cover crop, same image) or, in text-only cards, is spread evenly; nothing hidden */
@media (max-width:768px){
  main .sc-g5[data-mobswipe] > .card > figure.photo,main .sc-g3[data-mobswipe] > .card > figure.photo{flex:1 1 auto;display:flex;flex-direction:column;min-height:0}
  main .sc-g5[data-mobswipe] > .card > figure.photo img,main .sc-g3[data-mobswipe] > .card > figure.photo img{flex:1 1 auto;height:auto;min-height:100%;object-fit:cover}
  main [data-mobswipe] > .card:not(:has(> figure.photo)){justify-content:space-evenly}
}
@media (max-width:768px){
  /* 'what schools get' swipe cards: short text sits centred in the equal-height card; tighter row foot */
  #what-schools-get .vp-list[data-mobswipe] > li{display:flex;align-items:center}
  #what-schools-get .vp-list[data-mobswipe]{--mobswipe-pb:8px}
  /* FAQ -> next step edge: inner trims (card pad stays in the 16-20 phone range) */
  .sc-next > .sc-card{padding-top:16px}
  #before-you-begin .faq > details:last-child{margin-bottom:0}
}
@media (max-width:768px){#before-you-begin .faq summary{padding-top:12px;padding-bottom:12px;min-height:44px}}
@media (max-width:768px){#before-you-begin .faq summary{padding-top:10px;padding-bottom:10px}.sc-next .sec-head{margin-top:0;padding-top:0}.sc-next .sec-head h2,.sc-next .sec-head h3{margin-top:0;line-height:1.15}}
@media (max-width:768px){.sc-next > .sc-card:first-child{padding-top:12px}}   /* inner trim on the FAQ -> next-step edge (96 cap) */
/* v7 · inner trim: in photo cards the figure is last in the DOM but shown first, so the visually-last text kept its bottom margin */
main .sc-g5 > .card > p:last-of-type,main .sc-g3 > .card > p:last-of-type,main .sc-g4 > .card > p:last-of-type,main .sc-g4 > .card > ul:last-of-type{margin-bottom:0!important}
/* v7 · desktop inner trims on edges still over 144 at the 56 floor */
@media (min-width:769px){
  main .sc-g3 > .card,main .sc-g4 > .card{padding-bottom:16px!important}
  #what-schools-get .vp-list > li{padding-bottom:18px}
  #before-you-begin .faq summary{padding-top:10px;padding-bottom:10px;min-height:44px}
  .sc-next > .sc-card{padding-top:12px}
}
/* v8 (Schools v7, SCHOOLS_MERGE_NOTE_v1) */
@media (min-width:769px){
  /* SC-02a: row 1 Clubs / Teacher / Educator, row 2 the two STEM cards side by side; merged card (switch on) centred 6 cols */
  .sc-g5 > .card:nth-child(3){align-self:start}
  .sc-g5 > .card.sc-stem-merged{grid-column:4 / span 6;align-self:start}
}
/* SC-02c: the school-programs opener reads as a small eyebrow line + lede, not a heading */
#school-programs .sc-open .sc-q{font-size:16px;line-height:1.35;font-weight:700;color:#253679;margin:8px 0 4px;letter-spacing:0}
#school-programs .sc-open .lede{font-size:16px;margin:0}
/* SC-01: title-only items as pill chips under the full cards (no card box), 44px tall */
.sc-chips{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 0!important;padding:0;list-style:none}
.sc-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 8px;border:1px solid #D6DCE8;border-radius:999px;background:rgba(255,255,255,.66);
  font-weight:700;font-size:16px;line-height:1.2;color:#14204A;margin:0}
.sc-chip-ic{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#EEF1FA;flex:0 0 auto}
.sc-chip-ic svg,.sc-chip-ic img{width:18px;height:18px}
@media (max-width:768px){.sc-chips{margin-top:8px!important}}