/* Technique: Focus Frame by Izzy, Framer Marketplace (Free, Limited licence) https://www.framer.com/marketplace/components/focus-frame/ */
/* Technique: Spotlight Bento Grid by Omer Mirza, Framer Marketplace (Free, Limited licence) https://www.framer.com/marketplace/components/spotlight-bento-grid/ */
/* Technique: Chapters Timeline by Framer, Framer Marketplace (Free, Limited licence) https://www.framer.com/marketplace/components/chapters-timeline/ */
/* Technique: Modern FAQ Accordion by Andrzej Gawłowski, Framer Marketplace (Free, Limited licence) https://www.framer.com/marketplace/components/modern-faq-accordion/ */
/* Technique: Minimal Price Card by VectorFlow Studio, Framer Marketplace (Free, Limited licence) https://www.framer.com/marketplace/components/minimal-price-card/ (card shell only: the live cards carry no price or Enroll button, none added) */
/* Layout refs (structure only, no template code/copy/images): Lessonring template by John Nicholson; Codepunk template by Dream Studio; Website Designer template by SoloFoundry; DevFolios template by Anayatul Islam; all Framer Marketplace (Free, Limited licence). Full lines: CREDITS.md */
/* people_parents_v1 · People > Parents (PEOPLE_SPEC_v1 §B + SITE_PAGES_COMMON_v1 + RESOURCE_BANK_PICKS_v1 §3B + Designer calls 10:04). Template: people_students_v1. Layout only: no text, no ::before/::after words (new labels OFF).
   Rhythm: every section incl. hero 72 desktop / 40 phone, no floors; gaps measured outline to outline (Growth rule). */
main > section.band,main > section.hl-band,main > section.hero{padding-top:72px!important;padding-bottom:72px!important}
main .sec-head{margin-bottom:32px}
main .sec-head h2{margin-bottom:0}
main > section > .wrap > :first-child{margin-top:0!important}
main > section.band > .wrap > :last-child,main > section.band > .wrap > :last-child > :last-child,main > section.band > .wrap > :last-child > :last-child > :last-child{margin-bottom:0!important}
main .intro > :first-child{margin-top:0!important}
main figure.photo figcaption:empty{display:none}
h1,h2,h3,h4{text-wrap:balance} main p,main li,main dd{text-wrap:pretty}
/* frosted cards (C3) */
main .ps-g4 > li,main .ps-g4b > li,main .ps-g3 > .card,main .ps-card,main .ps-cta,main #before-you-begin details.qa{
  background:rgba(255,255,255,.66)!important;border:1px solid #D6DCE8!important;border-radius:22px!important;box-shadow:0 8px 24px rgba(20,32,74,.08)!important;
  backdrop-filter:saturate(160%) blur(18px);-webkit-backdrop-filter:saturate(160%) blur(18px)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  main .ps-g4 > li,main .ps-g4b > li,main .ps-g3 > .card,main .ps-card,main .ps-cta,main #before-you-begin details.qa{background:#fff!important}}
/* focus-frame: 8px mat + 1px line, outer radius 22 / inner 14 */
.ps-frame{position:relative;border:1px solid #D6DCE8;border-radius:22px;padding:8px!important;background:rgba(255,255,255,.66);box-shadow:0 8px 24px rgba(20,32,74,.08);overflow:hidden}
.ps-frame img{border-radius:14px;display:block;width:100%}
.ps-courses figure.cv-fig{border:1px solid #D6DCE8;border-radius:18px;padding:8px;background:#fff;overflow:hidden}
.ps-courses figure.cv-fig img{border-radius:12px}
/* spotlight (hl tiles + what parents get): navy 6%, hover devices only, off under reduced motion */
.ps-g4 > li,.ps-g4b > li{position:relative;overflow:hidden}
.ps-g4 > li::after,.ps-g4b > li::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(37,54,121,.06),transparent 70%)}
@media (hover:hover) and (min-width:769px){.ps-g4:hover > li::after,.ps-g4b:hover > li::after{opacity:1}}
html.rm-user .ps-g4 > li::after,html.rm-user .ps-g4b > li::after{display:none}
@media (prefers-reduced-motion:reduce){.ps-g4 > li::after,.ps-g4b > li::after{display:none}}
.ps-g4{gap:24px!important}
.ps-g4 > li{padding:20px!important}
/* 3 · course cards (minimal-price-card shell): equal heights, covers pinned to the bottom, whole card = the live title link; no hover lift */
.ps-courses > .card{display:flex;flex-direction:column;padding:24px 24px 16px!important;position:relative;transform:none!important}
/* covers keep their live position (top); spare height of shorter cards falls below the last facts row */
.ps-courses > .card > figure.photo{margin-bottom:0!important}
.ps-courses > .card > figure + figure{margin-top:12px!important}
.ps-courses > .card a.stretch::after{z-index:3;border-radius:22px}
.ps-courses > .card a.stretch:focus-visible{outline:none}
.ps-courses > .card:has(a.stretch:focus-visible){outline:3px solid #253679;outline-offset:3px}
/* live empty spacer <div></div> at the end of each first facts list: no box (no text) */
.ps-courses dl.facts > div:empty{display:none}
/* 4 · coming soon: 8-col card, existing status line shown as a grey pill (#5B6478 white, 5.93:1); its existing button keeps its live style */
.ps-badge{display:inline-flex;align-items:center;min-height:28px;padding:4px 12px;border-radius:999px;background:#5B6478;color:#fff!important;font-weight:700;font-size:14px;margin:0 0 12px!important}
/* 5 · how learning works: step cards on a static connector line (chapters-timeline, no numbers: numbers would be new labels) */
.ps-steps{position:relative}
ol.ps-steps{list-style:none;padding:0;margin-left:0;margin-right:0;counter-reset:none}
ol.ps-steps > li{margin:0}
ol.ps-steps > li::marker{content:none}
.ps-steps > .card{padding:24px!important;display:flex;flex-direction:column;position:relative}
/* 6 · see the learning in the work: live <br/> run in the single step hidden (layout only, no text) */
.ps-work ol.steps br{display:none}
.ps-work ol.steps{margin:0 0 24px!important}
.ps-card,.ps-cta{padding:24px}
.ps-card .btn-row,.ps-cta .btn-row{margin-bottom:0}
main .card > :last-child,.ps-card > :last-child,.ps-cta > :last-child{margin-bottom:0!important}
/* 8 · what parents get (4) */
ul.ps-g4b{list-style:none;padding:0!important;margin:0!important;display:grid;gap:24px}
ul.ps-g4b > li{padding:24px!important;margin:0!important}
ul.ps-g4b > li::before{display:none!important}
/* 9 · FAQ rows (modern-faq-accordion skin) + CSS plus */
#before-you-begin .faq{display:grid;gap:12px}
#before-you-begin details.qa{padding:0!important;margin:0!important;overflow:hidden}
#before-you-begin details.qa > summary{list-style:none;position:relative;min-height:56px;padding:16px 56px 16px 20px!important;display:flex;align-items:center;cursor:pointer;font-weight:700}
#before-you-begin details.qa > summary::-webkit-details-marker{display:none}
#before-you-begin details.qa > summary::after{content:"";position:absolute;right:20px;top:50%;width:16px;height:16px;margin-top:-8px;
  background:linear-gradient(#253679,#253679) center/16px 2px no-repeat,linear-gradient(#253679,#253679) center/2px 16px no-repeat;transition:transform .3s}
#before-you-begin details.qa[open] > summary::after{transform:rotate(45deg)}
#before-you-begin details.qa .ans{padding:0 20px 16px}
#before-you-begin details.qa .ans > :last-child{margin-bottom:0}
#before-you-begin .faq > p.pol-q{margin:0}
#before-you-begin .faq > p.pol-q a{display:inline-flex;align-items:center;min-height:44px}
@media (prefers-reduced-motion:reduce){#before-you-begin details.qa > summary::after,.ps-g4 > li::after{transition:none}}
html.rm-user #before-you-begin details.qa > summary::after{transition:none}
@media (min-width:769px){
  .ps-g4,ul.ps-g4b{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
  #what-parents-get .intro{max-width:none}
  .ps-g3{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:24px!important;align-items:stretch;width:100%!important;max-width:none!important}
  main .ps-g3 > .card:last-child{grid-column:auto!important;width:auto!important;justify-self:stretch!important}
  /* static connector line through the three step cards */
  .ps-steps{margin-top:24px!important}
  .ps-steps::before{content:"";position:absolute;left:16.6%;right:16.6%;top:-14px;height:2px;background:rgba(37,54,121,.3)}
  .ps-steps > .card::before{content:"";position:absolute;left:50%;top:-19px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#253679}
  /* 4 · 8-col centred card */
  #ai-mathematics-coming-soon .wrap > .sec-head{text-align:center;max-width:calc(8/12*100%);margin-left:auto;margin-right:auto}
  .ps-cta{max-width:calc(8/12*100%)!important;margin-left:auto!important;margin-right:auto!important;text-align:center}
  .ps-cta .btn-row{justify-content:center}
  /* 6 · 7/5: text + step left, framed photo right */
  #stronger-thinking-visible-creations .intro{max-width:none;display:grid;grid-template-columns:7fr 5fr;grid-template-rows:auto 1fr;gap:16px 24px;align-items:start}
  #stronger-thinking-visible-creations .intro > p{margin:0!important;align-self:end}
  #stronger-thinking-visible-creations .intro > p,#stronger-thinking-visible-creations .intro > ol{grid-column:1}
  #stronger-thinking-visible-creations .intro > .photo{grid-column:2;grid-row:1 / span 2;margin:0;max-width:none;align-self:center}
  /* 7 · 5/7; 9 · FAQ 5/7 (heading + live Ted line left, list right); 10 · two mist cards 6/6 */
  #safety-and-transparency .wrap{display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:start}
  #safety-and-transparency .wrap > .sec-head{margin-bottom:0}
  #safety-and-transparency .intro{max-width:none;margin:0}
  #before-you-begin .wrap{display:grid;grid-template-columns:5fr 7fr;gap:24px;align-items:start}
  #before-you-begin .wrap > .sec-head{grid-column:1;margin-bottom:0}
  #before-you-begin .wrap > .sec-head{max-width:none!important;min-height:0!important}
  #before-you-begin .wrap > .td-inline{grid-column:1;grid-row:2;margin:0!important;align-self:start;position:static!important;top:auto;right:auto}
  #before-you-begin .faq{grid-column:2;grid-row:1 / span 3;max-width:none;margin:0}
  #your-next-step .wrap,#contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
  #your-next-step .wrap > .sec-head,#contact .wrap > .sec-head{margin-bottom:0}
  #your-next-step .intro,#contact .intro{max-width:none;margin:0}
}
@media (max-width:768px){
  main > section.band,main > section.hl-band,main > section.hero{padding-top:40px!important;padding-bottom:40px!important}
  main .sec-head{margin-bottom:24px}
  .hero .ps-frame{padding:6px!important}
  .hero .ps-frame img{max-height:260px;object-fit:cover}
  main [data-mobswipe]{align-items:stretch;--mobswipe-w:82%}
  main .ps-g3[data-mobswipe]{width:100%!important;max-width:100%!important}
  main [data-mobswipe] > *{height:auto}
  main [data-mobswipe]{padding-bottom:12px!important}
  main > section .wrap .mobswipe-dots{margin-bottom:-8px!important}
  .ps-work .photo{margin:16px 0 0!important}
  .ps-card,.ps-cta,ul.ps-g4b > li{padding:20px!important}
  main .ps-g3 > .card{padding:20px 20px 12px!important}
  #before-you-begin .td-inline{margin:0 0 16px!important}
  /* equal-height swipe cards: spread the content of shorter cards instead of one tall empty run (no button in these cards to pin) */
  .ps-courses > .card,.ps-steps > .card{justify-content:space-evenly}
  main .ps-courses > .card{padding:16px 16px 12px!important} /* C2 phone card pad 16 */
  .ps-courses dl.facts{margin-top:0!important;margin-bottom:0!important}
  .ps-courses dl.facts > div{grid-template-columns:1fr!important;gap:2px!important} /* label above value: no broken labels at 390/360 */
  /* the Music card's second live photo is shown at 120px (object-fit, same image + alt) so the three cards' slack stays under the 96 cap */
  .ps-courses > .card > figure.photo:not(.cv-fig) img{max-height:120px;object-fit:cover}
}
/* inner trims (Designer 06:23) */
main > section.band .sec-head h2{text-box:trim-both cap alphabetic}
main > section.band .wrap p:last-child{text-box:trim-end cap alphabetic}
/* live Ted tip (v219 teddy-nudge): taps to 44 (A-tap), page-local override */
.tn-ok,.tn-hide{min-height:44px!important;min-width:44px!important;display:inline-flex!important;align-items:center;justify-content:center}
.tn-x{min-width:44px!important;min-height:44px!important}
/* eyebrow at a section top: trim its leading so the visible edge sits on the 72/40 line */
main > section .sec-head > .eyebrow:first-child{display:flex;width:fit-content;text-box:trim-both cap alphabetic}
.ps-nw{white-space:nowrap}
/* orphan fixes (orphans5, 8 widths): facts stack (term above value) below 1200px so no term or value is left one word per line;
   step titles size down on small desktops (the heading's .ps-nw rule is above) */
@media (max-width:1199px){
  .ps-courses .facts div{grid-template-columns:1fr!important;gap:2px!important}
  .ps-courses .facts dt{white-space:nowrap}
}
@media (min-width:769px) and (max-width:1100px){
  .ps-steps > .card h3{font-size:clamp(15px,1.7vw,20px)}
}
@media (min-width:769px) and (max-width:1100px){
  .ps-g4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
@media (max-width:380px){
  main .ps-steps > .card{padding-left:16px!important;padding-right:16px!important}
  .ps-steps > .card h3{font-size:18px}
}
/* QA M1 (Growth 11:56): the course shelf's 26px bottom pad + 13px shelf made a 170px card-to-heading gap at desktop.
   Shelf now sits right under the cards (pad 13) and the shelf block pulls up 15, so card edge -> next heading = 144. Section padding stays 72. */
@media (min-width:769px){
  main > section.band > .wrap > .ps-courses.grid.shelf,main > section.band > .wrap > :last-child.ps-courses{padding-bottom:13px!important;margin-bottom:-15px!important}
}
/* QA M2 (Growth 11:56): the existing title link's ::after covers the whole card at every width (stated here, not inherited from site.css),
   so the tap target is the full card (>=44). One link per card, nothing else inside to block. Card focus ring as above. */
.ps-courses > .card{position:relative}
.ps-courses > .card a.stretch::after{content:"";position:absolute;inset:0;z-index:3;border-radius:22px}
/* MUSIC_CARD_FIX_v1 (14:3x): course cards show only the illustrated cover; hide legacy photo slots */
.ps-courses > .card > figure.photo:not(.cv-fig){display:none}