/* Home page, one page (plan/home.html, option A: paper hero with the chalkboard beside it). Loaded before theme.css. */
html{scroll-padding-top:88px}
.pt-0{padding-top:0!important}
.sched thead th.l{text-align:left}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
/* header */
.hbar{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.hbar-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:72px}
.hnav{display:flex;gap:4px}
.hnav a,.hnav2 a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:var(--r-control);color:var(--ink);font-weight:600;text-decoration:none;white-space:nowrap}
.hnav a:hover,.hnav2 a:hover{background:var(--accent-soft)}
.hact{display:flex;align-items:center;gap:8px}
.hnav2{display:none}
/* sections */
.sec2{padding:96px 0}
.sec2 .kick{margin-bottom:16px}
.sec2 .lead2{font-size:17px;color:var(--muted);max-width:62ch;margin-top:16px}
.on-board .lead2{color:var(--chalk-2)}
/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding:96px 0}
.hero .pill{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:4px 12px 4px 4px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line);font-size:13.5px;font-weight:600}
.hero .pill .coin{width:24px;height:24px;font-size:12px}
.hero .d1{margin-top:24px}
.hero .lead2{margin-top:24px}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px;margin-top:32px}
.tlink{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.tlink svg{transform:rotate(90deg)}
.small2{font-size:13.5px;color:var(--muted);margin-top:16px}
/* chalkboard panel */
.cb{position:relative;border-radius:24px;padding:32px 32px 48px;display:grid;gap:16px;background:var(--board) radial-gradient(120% 80% at 15% 0%,rgba(242,239,230,.07),transparent 60%)}
.cb-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cb-sub{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--chalk)}
.cb-sub .mono{width:28px;height:28px;border-radius:8px;font-size:12px}
.cb-step{font-size:13.5px;font-weight:600;color:var(--chalk-2)}
.note{justify-self:end;max-width:300px;background:var(--pencil-soft);color:var(--ink);padding:12px 16px;border-radius:4px 4px 4px 16px;transform:rotate(1.5deg);font-weight:600;box-shadow:0 2px 0 rgba(0,0,0,.18)}
.note.n2{transform:rotate(-1deg)}
.chalk{color:var(--chalk)}
.chalk .who2{font-size:13.5px;font-weight:700;color:var(--pencil);margin-bottom:4px}
.chalk .mk-check{width:20px;height:20px;color:var(--pencil);vertical-align:-3px}
.chalk .eq{font:700 24px/1.3 var(--font);letter-spacing:.01em;margin:8px 0}
.turn{display:flex;align-items:center;gap:8px;margin-top:8px}
.turn .mk-arrow{width:48px;height:30px;color:var(--pencil)}
.ledge{position:absolute;left:24px;right:24px;bottom:16px;height:8px;border-radius:999px;background:#2A5446}
.cb .mk-pencil{position:absolute;right:48px;bottom:16px;width:180px;height:24px}
/* 01 how it helps */
.ways{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:48px}
.way{background:var(--board-2);border-radius:16px;padding:24px;display:grid;gap:8px;align-content:start}
.way svg{width:72px;height:44px;color:var(--chalk);margin-bottom:8px}
.way h3{font:700 20px/1.3 var(--font);color:var(--chalk)}
.way p{color:var(--chalk-2)}
.yesno{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px;margin-top:64px;padding-top:48px;border-top:1px solid var(--board-line)}
.yesno h3{font:700 24px/1.25 var(--font);margin-bottom:16px}
.yesno ul{display:grid;gap:12px}
.yesno li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start}
.yesno .mk-check{width:24px;height:24px;color:var(--pencil)}
.yesno .no svg{color:#FFA59A;margin-top:2px}
.src{font-size:13.5px;color:var(--chalk-2);margin-top:24px}
.under{display:inline-grid}
.under .mk-under{width:100%;height:14px;color:var(--pencil);margin-top:-4px}
/* 02 subjects */
.sched{width:100%;border-collapse:separate;border-spacing:0;margin-top:48px;background:var(--surface);border-radius:16px;box-shadow:0 0 0 1px rgba(0,0,0,.09);overflow:hidden}
.sched th,.sched td{padding:0 16px;height:56px;border-bottom:1px solid var(--rule);text-align:center}
.sched thead th{font:700 16px/1 var(--font);color:var(--ink);background:var(--bg);padding:0 16px;height:56px}
.sched tbody th{text-align:left;font-weight:600}
.sched tr:last-child>*{border-bottom:0}
.sched .sj{display:inline-flex;align-items:center;gap:12px}
.sched .sj .mono{width:32px;height:32px;border-radius:8px}
.sched td .mk-check{width:24px;height:24px;color:var(--ok-ink);vertical-align:middle}
.sched td.no{color:var(--muted)}
.sched th:first-child,.sched td:first-child{border-right:2px solid var(--margin)}
.sched-note{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:16px;font-size:13.5px;color:var(--muted)}
/* 03 plans */
.plans2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:48px;max-width:960px}
.plan2{background:var(--surface);border-radius:16px;box-shadow:0 0 0 1px rgba(0,0,0,.09),0 1px 2px rgba(0,0,0,.05);padding:32px;display:flex;flex-direction:column;gap:24px}
.plan2.rec{box-shadow:0 0 0 2px var(--accent),0 1px 2px rgba(0,0,0,.05)}
.plan2 .tag{justify-self:start}
.plan2 h3{font:700 24px/1.2 var(--font)}
.plan2 .who{color:var(--muted);margin-top:4px}
.price2{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.price2 b{font:700 39px/1.1 var(--font);white-space:nowrap;font-variant-numeric:tabular-nums}
.price2.q b{font-size:24px;line-height:1.3;white-space:normal}
.price2 span{color:var(--muted)}
.feat2{display:grid;gap:12px}
.feat2 li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px}
.feat2 svg{color:var(--ok-ink);margin-top:3px}
.plan2 .btn{width:100%;margin-top:auto}
.plan2 .after{font-size:13.5px;color:var(--muted);margin-top:-12px}
@media (min-width:901px){.plan2 .after{min-height:2lh}}
.plans2.p3{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}
.plan2 .lim{display:flex;align-items:baseline;gap:8px;font-weight:700;padding:12px 16px;border-radius:var(--r-control);background:var(--bg)}
.plan2 .lim span{font-weight:400;color:var(--muted)}
@media (min-width:901px){.plans2.p3 .plan2>div:first-child{min-height:128px}}
.more{margin-top:24px}
/* 04 payment */
.pay2{display:grid;grid-template-columns:minmax(0,1fr) 440px;gap:64px;align-items:start;margin-top:48px}
.st3{display:grid;gap:24px}
.st3 li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px}
.st3 b{display:block;font-size:17px}
.st3 p{color:var(--muted)}
.need{border-radius:16px;box-shadow:0 0 0 1px rgba(0,0,0,.09);padding:24px 24px 24px 72px;line-height:32px}
.need h3{font:700 17px/32px var(--font)}
.need li,.need p{line-height:32px}
.need .hint{line-height:32px;margin:0}
/* 05 schools */
.inst{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px 64px;align-items:center;background:var(--pencil-soft);border-radius:24px;padding:48px}
.inst ul{display:grid;gap:8px;margin-top:16px}
.inst li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px}
.inst li svg{color:var(--ok-ink);margin-top:3px}
.inst-a{display:grid;gap:12px;justify-items:start}
.inst-a p{font-size:13.5px;color:var(--pencil-ink)}
/* 06 faq */
.faq{max-width:800px;margin-top:48px;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;padding:12px 0;font:700 17px/1.4 var(--font);cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:999px;display:grid;place-items:center;background:var(--bg);box-shadow:0 0 0 1px var(--ctl);font-size:20px;font-weight:600}
.faq details[open] summary::after{content:"−";background:var(--pencil);box-shadow:none}
.faq summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faq .ans{padding:0 48px 24px 0;max-width:68ch}
.faq .ans p+p{margin-top:8px}
/* closing */
.close2{padding-top:96px;padding-bottom:64px}
.close2 .cta{margin-top:32px}
@media (max-width:1100px){.ways{grid-template-columns:repeat(2,minmax(0,1fr))}.pay2{grid-template-columns:1fr}}
@media (max-width:900px){.hnav{display:none}.hero{grid-template-columns:1fr;gap:48px}}
@media (max-width:600px){
  .wrap{padding:0 16px}
  .hbar-in{min-height:64px}
  .hact .btn-primary{display:none}
  .hnav2{display:flex;gap:0;margin:0 -12px;padding-bottom:4px}
  .hero{padding:40px 0 64px;gap:40px}
  .hero .d1{margin-top:16px}
  .cta .btn{width:100%}
  .cb{padding:24px 16px 40px;border-radius:16px}
  .cb .mk-pencil{right:24px;width:140px}
  .chalk .mk-check{width:20px;height:20px;color:var(--pencil);vertical-align:-3px}
  .chalk .eq{font-size:20px}
  .sec2{padding:64px 0}
  .ways{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .yesno{grid-template-columns:1fr;gap:40px;margin-top:48px}
  .sched{margin-top:32px}
  .sched th,.sched td{padding:0 4px;height:52px}
  .sched thead th{padding:0 4px;font-size:13.5px}
  .sched tbody th{padding-left:12px}
  .sched .sj{gap:8px;font-size:16px}
  .sched .sj .mono{display:none}
  .plans2{grid-template-columns:1fr;gap:16px;margin-top:32px}
  .plan2{padding:24px}
  .pay2{gap:40px;margin-top:32px}
  .need{padding:16px 16px 16px 64px}
  .inst{grid-template-columns:1fr;padding:32px 16px;border-radius:16px}
  .inst-a,.inst-a .btn{width:100%}
  .faq .ans{padding-right:0}
  .close2{padding-top:64px;padding-bottom:48px}
}
/* a 44 px target without moving the line (the text stays where the mockup put it) */
.more a{display:inline-flex;align-items:center;min-height:44px;margin:-11px 0}

@media (max-width:900px){.plans2.p3{grid-template-columns:minmax(0,1fr);max-width:560px}}