/* Public, parent-friendly feature explainer; scoped to /how-it-works. */
.how-wrap{width:100%;max-width:1020px;margin:0 auto;padding:0 28px 64px;box-sizing:border-box;color:#352746}
.how-hero{text-align:center;padding:60px 12px 42px;max-width:740px;margin:0 auto}
.how-kicker,.how-step,.how-example-kicker{display:block;color:#7956bf;letter-spacing:1.7px;font-size:11px;font-weight:850}
.how-hero h1{font-size:clamp(34px,5vw,52px);line-height:1.12;letter-spacing:-1.8px;margin:16px 0;color:#302446}
.how-hero p{font-size:17px;line-height:1.65;color:#746a88;max-width:650px;margin:0 auto}
.how-hero p.how-standards{font-size:12px;line-height:1.6;color:#8a7c97;margin:15px auto 0;max-width:680px}
.how-jump{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:25px}
.how-jump a{padding:9px 16px;border:1px solid #dfcff4;border-radius:999px;text-decoration:none;color:#6a45b2;font-size:13px;font-weight:750;background:#fff}
.how-jump a:hover{background:#f3edff;border-color:#b89be8}
.how-jump a:focus-visible,.how-primary:focus-visible,.how-back:focus-visible{outline:3px solid #a68bfa;outline-offset:3px}
.how-feature{scroll-margin-top:24px;display:grid;grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);align-items:center;gap:clamp(26px,5vw,65px);border-bottom:1px solid #e9def6;padding:60px 0}
.how-feature-reverse .how-feature-copy{order:2}
.how-feature-reverse .how-feature-example{order:1}
.how-feature h2{font-size:clamp(27px,3.2vw,37px);letter-spacing:-1px;line-height:1.2;color:#302446;margin:12px 0 17px}
.how-feature-copy p{font-size:16px;line-height:1.7;color:#625673;margin:0 0 16px}
.how-feature-copy .how-clarification{font-size:13px;color:#857991;margin-bottom:0}
.how-feature-example{position:relative;border-radius:24px;background:#f3ebff;min-width:0;padding:90px 22px 22px;margin-top:35px}
.how-feature-example > img{position:absolute;top:-54px;left:50%;transform:translateX(-50%);display:block;object-fit:contain;width:142px;height:142px}
.how-example{background:#fff;border:1px solid #e8ddfa;border-radius:17px;padding:19px 20px 20px;box-shadow:0 9px 22px #7956cf0a}
.how-example-kicker{font-size:10px;letter-spacing:1.3px;margin-bottom:8px}
.how-example strong{display:block;color:#302446;font-size:16px;line-height:1.4}
.how-example p{margin:8px 0 0;color:#665c77;font-size:14px;line-height:1.65}
.how-next{margin-top:50px;text-align:center;background:#f4edff;border:1px solid #e4d5fb;border-radius:24px;padding:40px 22px 36px}
.how-next h2{margin:0 0 9px;color:#302446;font-size:clamp(24px,3.5vw,32px);letter-spacing:-.8px}
.how-next p{font-size:15px;line-height:1.55;color:#716582;margin:0 auto 22px;max-width:490px}
.how-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 24px;border-radius:14px;background:#7956bf;color:#fff!important;font-size:15px;font-weight:800;text-decoration:none;box-shadow:0 9px 22px #7956cf24}
.how-primary:hover{background:#6741b3}
.how-back{display:block;width:max-content;max-width:100%;margin:20px auto 0;color:#7956bf;font-weight:750;font-size:13px;text-decoration:none}
.how-back:hover{text-decoration:underline}
@media(max-width:760px){
  .how-wrap{padding:0 19px 45px}
  .how-hero{padding:38px 0 20px}
  .how-hero h1{font-size:clamp(31px,8vw,42px)}
  .how-hero p{font-size:15px}
  .how-jump{gap:8px}
  .how-jump a{padding:8px 12px;font-size:12px}
  .how-feature{grid-template-columns:1fr;gap:12px;padding:48px 0 38px}
  .how-feature-reverse .how-feature-copy,.how-feature-reverse .how-feature-example{order:initial}
  .how-feature-copy p{font-size:15px}
  .how-feature-example{margin-top:55px;padding:85px 15px 16px}
  .how-feature-example > img{width:132px;height:132px;top:-48px}
  .how-example{padding:16px}
  .how-next{margin-top:38px;padding:30px 16px}
}
@media(prefers-reduced-motion:reduce){.how-primary,.how-jump a{scroll-behavior:auto}}

/* Extra detail lives here, never on the compact homepage. */
.how-section-head{max-width:720px;margin:0 auto 22px;text-align:center}
.how-section-head h2{font-size:clamp(24px,3vw,31px);font-weight:700;line-height:1.2;letter-spacing:-.8px;color:#302446;margin:10px 0 8px}
.how-section-head p{font-size:15px;line-height:1.6;color:#746a88;margin:0}
.how-start{padding:25px 0 38px;border-top:1px solid #e9def6;border-bottom:1px solid #e9def6}
.how-start-steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.how-start-steps li{min-width:0;display:flex;align-items:flex-start;gap:13px;border:1px solid #eadff7;background:#fff;border-radius:17px;padding:18px}
.how-start-number{display:grid;place-items:center;flex:0 0 29px;width:29px;height:29px;border-radius:10px;background:#efe6fc;color:#754dc1;font-size:14px;font-weight:800}
.how-start-steps strong{font-size:14px;color:#362748;line-height:1.3}
.how-start-steps p{font-size:13px;line-height:1.55;color:#736681;margin:6px 0 0}
.how-detail{margin:23px 0 14px;border-top:1px solid #e8def5;padding-top:17px}
.how-detail h3{color:#3c2a54;font-size:15px;font-weight:750;line-height:1.4;margin:0 0 12px}
.how-mode-list,.how-level-list,.how-check-list{padding:0;margin:0;list-style:none}
.how-mode-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.how-mode-list li{min-width:0;padding:11px 12px;border:1px solid #eadff7;border-radius:12px;background:#fff}
.how-mode-list strong{display:block;font-size:13px;line-height:1.35;color:#5a378f;margin-bottom:4px}
.how-mode-list span{display:block;font-size:12px;line-height:1.5;color:#6c607b}
.how-level-list{display:grid;gap:8px}
.how-level-list li{display:flex;align-items:flex-start;gap:11px}
.how-level-list li > span{display:grid;place-items:center;flex:0 0 27px;height:27px;border-radius:9px;background:#efe6fc;color:#754dc1;font-size:11px;font-weight:800}
.how-level-list strong{font-size:13px;color:#4b326e}
.how-level-list li p{font-size:12.5px;line-height:1.5;margin:3px 0 0}
.how-check-list{display:grid;gap:10px}
.how-check-list li{padding-left:23px;position:relative;color:#605473;font-size:13px;line-height:1.55}
.how-check-list li:before{content:"✓";position:absolute;left:1px;top:0;color:#7956bf;font-weight:900}
.how-audience{padding:58px 0 42px}
.how-audience-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.how-audience-card{min-width:0;padding:24px 25px;border:1px solid #e9def6;border-radius:19px;background:#fff}
.how-audience-label{font-size:10px;font-weight:850;letter-spacing:1.5px;color:#7956bf}
.how-audience-card h3{font-size:20px;line-height:1.3;letter-spacing:-.5px;color:#302446;margin:9px 0}
.how-audience-card p{font-size:14px;line-height:1.65;color:#685d77;margin:0}
.how-audience-card a{color:#7047b9;font-weight:700;text-underline-offset:3px}
.how-faq{scroll-margin-top:24px;padding:23px 0 26px;border-top:1px solid #e9def6}
.how-faq-items{max-width:780px;margin:0 auto;display:grid;gap:9px}
.how-faq-items details{background:#fff;border:1px solid #e7ddf5;border-radius:13px;padding:0 17px}
.how-faq-items summary{display:flex;align-items:center;justify-content:space-between;gap:15px;cursor:pointer;padding:16px 0;color:#39294e;font-size:14px;font-weight:750;line-height:1.4;list-style:none}
.how-faq-items summary::-webkit-details-marker{display:none}
.how-faq-items summary:after{content:"+";flex:0 0 auto;font-size:21px;font-weight:400;color:#7956bf;line-height:1}
.how-faq-items details[open] summary:after{content:"−"}
.how-faq-items summary:focus-visible{outline:3px solid #a68bfa;outline-offset:4px;border-radius:5px}
.how-faq-items details p{font-size:13.5px;line-height:1.65;color:#665b74;margin:0 0 17px;padding-right:10px}
@media(max-width:760px){
  .how-start{padding:24px 0 28px}
  .how-start-steps{grid-template-columns:1fr;gap:9px}
  .how-start-steps li{padding:14px 15px}
  .how-mode-list{grid-template-columns:1fr}
  .how-detail{margin-top:18px}
  .how-audience{padding:39px 0 33px}
  .how-audience-grid{grid-template-columns:1fr;gap:10px}
  .how-audience-card{padding:19px}
  .how-faq{padding:21px 0}
  .how-faq-items summary{padding:14px 0}
}

/* Clearly labeled illustrative learner snapshots, not real student records. */
.how-sample-results{display:grid;gap:0;margin:15px 0 0;border-top:1px solid #ede4f8}
.how-sample-results > div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #f1eafa}
.how-sample-results dt{color:#806f90;font-size:11px;line-height:1.35}
.how-sample-results dd{margin:0;text-align:right;color:#53367c;font-size:12px;font-weight:750;line-height:1.4}
.how-sample-milestones{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.how-sample-milestones span{display:inline-flex;align-items:center;padding:7px 9px;border-radius:9px;background:#f1eaff;color:#5e3b91;font-size:11px;font-weight:700}

/* Zumi Events shares the existing four-step feature language without adding new page chrome. */
.how-events-cta{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:10px 14px;border:1px solid #d9c8f1;border-radius:12px;background:#fff;color:#7047b9;font-size:13px;font-weight:750;text-decoration:none}
.how-events-cta:hover{background:#f3edff;text-decoration:none}
.how-events-cta:focus-visible{outline:3px solid #a68bfa;outline-offset:4px}
.how-level-list a{color:#7047b9;font-weight:750;text-underline-offset:3px}