/* home: from prototypes/r4/home.html (round 4 polish, approved 2026-10-28) */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:72px;padding:56px 0 24px;align-items:start}
.ask{margin-top:44px}
.ask h2{font-size:20px;font-weight:650;letter-spacing:-.01em;margin-bottom:14px}
.more{display:none}.more.open{display:grid}
.prev{position:sticky;top:24px}
.prev .h3{margin-bottom:4px}
.prev .cals{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0 16px}
.prev .note{font-size:14px;color:var(--muted);margin:14px 0 0}
.get{padding-top:96px}
.get .h2{max-width:20ch}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:32px}
.out{padding:28px;border-radius:24px;background:var(--soft)}
.out .h3{margin:20px 0 6px}
.out p{margin:0;color:var(--muted)}
.out ul{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:10px}
.out li{display:flex;gap:12px;align-items:flex-start}
.out li .ic{margin-top:3px;color:var(--a)}
.thumb{background:#fff;border-radius:16px;padding:16px;box-shadow:0 1px 2px rgba(24,33,29,.05)}
.mini-year{border-collapse:separate;border-spacing:2px;width:100%;table-layout:fixed}
.mini-year th{font-size:10px;font-weight:600;color:var(--muted);text-align:left;width:30px}
.mini-year td{height:11px;border-radius:2px}
.kidweek{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.kidweek div{border-radius:12px;padding:8px 0 10px;text-align:center;font-size:12px;font-weight:600}
.kidweek b{display:block;font-size:20px;font-weight:700;margin-bottom:4px}
.kidweek .ic{margin:0 auto;width:26px;height:26px}
.kidweek .pa .ic{color:var(--ad)}.kidweek .pb .ic{color:var(--bd)}
.kidtitle{font-weight:700;font-size:18px;margin:0 0 12px;letter-spacing:-.01em}
.price{margin-top:96px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.price .tier{padding:28px;border-radius:24px;box-shadow:inset 0 0 0 1px var(--line)}
.price .amt{font-size:44px;font-weight:700;letter-spacing:-.03em;line-height:1;margin:14px 0 8px}
.price .amt small{font-size:17px;font-weight:500;color:var(--muted);letter-spacing:0}
.price p{margin:0;color:var(--muted)}
.price ul{margin:16px 0 0;padding-left:20px;display:grid;gap:6px}
.faq{margin-top:96px;max-width:760px}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-weight:600;font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .ic{transition:transform .2s;color:var(--muted)}
.faq details[open] summary .ic{transform:rotate(180deg)}
.faq details p{margin:0 0 22px;color:var(--muted);max-width:62ch}
@media (max-width:980px){.hero{grid-template-columns:1fr;gap:40px;padding-top:28px}.prev{position:static}.two,.price{grid-template-columns:1fr}.ask{margin-top:32px}.get{padding-top:64px}.price,.faq{margin-top:64px}}
@media (max-width:640px){.out,.price .tier{padding:20px}.prev.panel{padding:18px}.prev .cals{grid-template-columns:1fr}.prev .cals table:nth-child(2){display:none}}
.prev .cals{display:block}
#prevC{min-height:330px}
/* the pricing section has a heading (David, 2026-10-29: "there needs to be a header on the pricing section") */
.pricing{margin-top:96px}
.pricing .price{margin-top:24px}
.more-btn{margin-top:12px}
@media (max-width:980px){.pricing{margin-top:64px}.pricing .price{margin-top:20px}}