/* Final homepage (owner approval 30 Oct 2026, 18:10). Same look as home-tiles.css: soft color tiles, 18 to 22px corners, site tokens.
   Section rhythm: one gap token, even between every section (phone 52px, tablet 64px, computer 72px). */
main{--hm2-gap:52px}
@media (min-width:760px){main{--hm2-gap:64px}}
@media (min-width:1100px){main{--hm2-gap:72px}}
main section.hm2-s{padding-top:var(--hm2-gap);padding-bottom:0;margin:0 auto;background:none}
.hm2-h2{margin:0 0 18px;font:800 clamp(26px,3.4vw,34px)/1.15 var(--display);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.hm2-h2::after{display:none!important}
.hm2-d{display:block;font-size:15px;line-height:1.45;color:var(--muted);margin-top:4px}
.hm2-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.8);flex:none}
.hm2-ic svg{width:40px;height:40px}
.hm2-chev{width:22px;height:22px;flex:none;transition:transform .2s;color:var(--ink)}
details[open]>summary .hm2-chev{transform:rotate(180deg)}
.hm2-s summary{list-style:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hm2-s summary::-webkit-details-marker{display:none}
.hm2-s summary:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:12px}

/* placement test band */
.hm2-band{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;background:var(--mark-soft);border-radius:22px;padding:18px}
.hm2-band-ic{width:52px;height:52px;border-radius:14px}
.hm2-band-t{margin:0;font:700 17px/1.4 var(--display);color:var(--ink)}
.hm2-band-b{grid-column:1/-1}
@media (min-width:760px){.hm2-band{grid-template-columns:auto 1fr auto;padding:22px 26px;gap:18px}.hm2-band-t{font-size:20px}.hm2-band-b{grid-column:auto;flex:none}}

/* how it works */
.hm2-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.hm2-step{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;padding:16px 44px 16px 16px;border-radius:18px;background:var(--sheet)}
.hm2-step .hm2-ic{grid-row:1/3}
.hm2-step b{font:800 18px/1.2 var(--display);color:var(--ink);align-self:end}
.hm2-step .hm2-d{align-self:start}
.hm2-n{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--mark);font:800 13px var(--display)}
.hm2-c0{background:#e3f4ea}.hm2-c1{background:#e7ecfc}.hm2-c2{background:#efe7fb}
@media (min-width:760px){.hm2-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.hm2-step{grid-template-columns:1fr;grid-template-rows:auto;align-content:start;padding:20px;border-radius:22px;row-gap:6px}.hm2-step .hm2-ic{grid-row:auto;width:68px;height:68px;margin-bottom:6px}.hm2-step .hm2-ic svg{width:48px;height:48px}.hm2-step b{font-size:21px}}

/* why families choose */
.hm2-whys{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hm2-why{display:flex;flex-direction:column;gap:2px;padding:16px 14px;border-radius:18px}
.hm2-why .hm2-ic{margin-bottom:10px;width:50px;height:50px;border-radius:14px}
.hm2-why .hm2-ic svg{width:36px;height:36px}
.hm2-why b{font:800 17px/1.2 var(--display);color:var(--ink)}
.hm2-why .hm2-d{font-size:14.5px}
.hm2-w0{background:#fde8e4}.hm2-w1{background:#e2f2f7}.hm2-w2{background:#e6f1fb}.hm2-w3{background:#fff0d9}
@media (max-width:359px){.hm2-whys{grid-template-columns:1fr}}
@media (min-width:960px){.hm2-whys{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.hm2-why{padding:20px;border-radius:22px}.hm2-why b{font-size:19px}.hm2-why .hm2-d{font-size:15px}}

/* plans: compact cards, every plan keeps its button. DOM order is by price (One Step, Monthly, Yearly, Lifetime, Books only);
   below 1100px Yearly (Best value) moves first with CSS order; on a computer the five sit in one row with Yearly in the middle.
   The cards keep their old .plan classes (scripts and perks-page.css look for them), so the overrides below are scoped to .hm2-plans. */
#pricing .hm2-lead{margin:-6px 0 18px;font-size:16px;line-height:1.5;color:var(--muted);max-width:72ch}
#pricing .hm2-plans{display:grid;gap:14px}
#pricing .hm2-plans div.hm2-plan.plan.plan{position:relative;display:flex;flex-direction:column;gap:4px;padding:18px 16px 8px;border-radius:18px;background:var(--sheet);border:2px solid transparent;box-shadow:none;color:var(--text)}
#pricing .hm2-plans div.hm2-plan.plan.plan::before{display:none}
#pricing .hm2-plans div.hm2-plan.plan.plan.hm2-best{background:var(--mark-soft);border-color:var(--ink);box-shadow:0 4px 0 var(--ink)}
#pricing .hm2-plans div.hm2-plan.plan.plan.hm2-os{background:#e7ecfc}
#pricing [data-fp] .fpb{margin:0 0 22px}
.hm2-ptop{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
#pricing .hm2-plans p.hm2-fam{margin:0;font:700 12px var(--display);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
#pricing .hm2-plans div.hm2-plan.plan.plan .hm2-badge{position:static;display:inline-block;margin:0;padding:3px 10px;border-radius:999px;background:var(--ink);color:var(--mark);font:800 12px/1.3 var(--display);letter-spacing:0;transform:none}
#pricing .hm2-plans div.hm2-plan.plan.plan h3{margin:0;font:800 21px/1.2 var(--display);color:var(--ink)}
#pricing .hm2-plans div.hm2-plan.plan.plan h3::after{display:none!important}
#pricing .hm2-plans .hm2-price .price{font:800 30px/1.05 var(--display);color:var(--ink);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
#pricing .hm2-plans .hm2-price .per{display:inline;margin:0;font-size:14.5px;line-height:1.35;color:var(--muted)}
#pricing .hm2-plans p.hm2-pdesc{margin:0;font-size:14.5px;line-height:1.4;color:var(--muted)}
#pricing .hm2-plans div.hm2-plan.plan.plan a.hm2-pbtn,#pricing .hm2-plans div.hm2-plan.plan.plan>span.btn{display:flex;align-items:center;justify-content:center;min-height:48px;margin:10px 0 0;padding:6px 18px;border-radius:999px;background:var(--paper);color:var(--ink);border:2px solid var(--ink);box-shadow:none;font:700 16px/1.2 var(--display);text-decoration:none;text-align:center;white-space:normal}
#pricing .hm2-plans div.hm2-plan.plan.plan.hm2-best a.hm2-pbtn,#pricing .hm2-plans div.hm2-plan.plan.plan.hm2-os a.hm2-pbtn{background:var(--mark);box-shadow:0 3px 0 var(--ink)}
#pricing .hm2-plans div.hm2-plan.plan.plan a.hm2-pbtn:hover{background:var(--wash)}
#pricing .hm2-plans div.hm2-plan.plan.plan.hm2-best a.hm2-pbtn:hover,#pricing .hm2-plans div.hm2-plan.plan.plan.hm2-os a.hm2-pbtn:hover{background:#ffdc66}
#pricing .hm2-inc>summary{display:flex;align-items:center;justify-content:center;gap:6px;min-height:48px;font:700 15px var(--display);color:var(--ink)}
#pricing .hm2-inc .pk-box{margin:2px 0 10px;padding:12px 14px;background:rgba(255,255,255,.75);border-radius:14px;border:0}

#pricing .hm2-plans .hm2-inc a.pk-more{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700}
#pricing .hm2-plinks{margin-top:16px;display:grid;gap:2px}
#pricing .hm2-plinks p{margin:0;font-size:15px;color:var(--muted);display:flex;flex-wrap:wrap;align-items:center;column-gap:8px}
#pricing .hm2-plinks a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--accent)}
@media (max-width:1099px){#pricing .hm2-plans div.hm2-plan.plan.plan.hm2-best{order:-1}}
@media (min-width:640px) and (max-width:1099px){
  #pricing .hm2-plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  #pricing .hm2-plans div.hm2-plan.plan.plan.hm2-best{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px;align-content:start;padding:20px 22px 10px}
  #pricing .hm2-plans div.hm2-plan.plan.plan.hm2-best>*{grid-column:1}
  #pricing .hm2-plans div.hm2-plan.plan.plan.hm2-best>.hm2-pbtn{grid-column:2;grid-row:1/4;align-self:end;margin:0}
  #pricing .hm2-plans div.hm2-plan.plan.plan.hm2-best>.hm2-inc{grid-column:1/-1}
  #pricing .hm2-plans div.hm2-plan.plan.plan a.hm2-pbtn{margin-top:auto}
  #pricing .hm2-plans div.hm2-plan.plan.plan p.hm2-pdesc{margin-bottom:6px}
}
@media (min-width:1100px){
  #pricing .hm2-plans{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;align-items:stretch}
  #pricing .hm2-plans div.hm2-plan.plan.plan.hm2-best{transform:translateY(-6px)}
  #pricing .hm2-plans div.hm2-plan.plan.plan a.hm2-pbtn{margin-top:auto}
  #pricing .hm2-plans div.hm2-plan.plan.plan p.hm2-pdesc{margin-bottom:8px}
  #pricing .hm2-plans .hm2-price .per{display:block;margin-top:4px}
}

/* questions */
.hm2-faqs{display:grid;gap:10px}
.hm2-q{background:var(--sheet);border-radius:16px}
.hm2-q>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 16px;font:800 17px/1.3 var(--display);color:var(--ink)}
.hm2-a{padding:0 16px 16px;font-size:16px;line-height:1.55;color:var(--text)}
.hm2-a>:first-child{margin-top:0}.hm2-a>:last-child{margin-bottom:0}
.hm2-a a{font-weight:700}
.hm2-all{margin:18px 0 0}
@media (max-width:639px){.hm2-all .hx-btn{width:100%}}
@media (min-width:960px){.hm2-faqs{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:12px 16px}}

/* more about UpOnly Learning: the earlier homepage, collapsed, every word kept */
.hm2-more .hx-more{margin:0 0 12px}
.hm2-xs-list{display:grid;gap:10px}
.hm2-x{border:1.5px solid #d5deec;border-radius:16px;background:var(--paper)}
.hm2-x>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 16px}
.hm2-x>summary h2,.hm2-xs{margin:0;padding:0!important;font:800 18px/1.3 var(--display)!important;color:var(--ink)}
.hm2-x>summary h2::after{display:none!important}
.hm2-xb{padding:0 12px 16px}
.hm2-xb section{padding:0!important;margin:0!important}
.hm2-xb .hero{padding:0;display:grid;gap:16px}
main section.hm2-founder{padding-top:var(--hm2-gap);padding-bottom:var(--hm2-gap)}
.hm2-founder .hm-fq{border-radius:22px}
@media (prefers-reduced-motion:reduce){.hm2-chev{transition:none}}
.hm2-founder .hm-story a,.hm2-xb .hm-txt,.hm2-xb .prek-home a,.hm2-xb .rf-how{display:inline-flex;align-items:center;min-height:44px}