@font-face{font-family:"Onest";src:url(../fonts/onest-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Onest";src:url(../fonts/onest-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Onest";src:url(../fonts/onest-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Onest";src:url(../fonts/onest-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Onest";src:url(../fonts/onest-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}

/* Your Money Stretcher: violet, sunshine yellow, mint; playful but tidy */
:root{
  --bg:#fbf9ff; --surface:#ffffff; --tint:#f2eefb;
  --ink:#1e1b2e; --ink-soft:#575270;
  --accent:#5b3fa0; --accent-deep:#432c7c; --accent-soft:#ece6fa; --on-accent:#fff;
  --sun:#ffc94a; --sun-soft:#fff4d6; --mint:#3fb68b; --mint-soft:#dcf3ea; --rose:#ef7b8f; --rose-soft:#fde6ea;
  --link:#5b3fa0; --ok:#24845f; --ok-soft:#dcf3ea; --bad:#b4344a; --bad-soft:#fce1e6;
  --line:#e4def3; --field:#aaa3c2;
  --head:"Onest",system-ui,sans-serif; --head-w:800; --head-track:-.035em;
  --sans:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --wrap:1180px; --r-sm:12px; --r-md:22px; --r-btn:14px;
}
.eyebrow{font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent);margin-bottom:.8em}
.tag{display:inline-block;font-weight:800;font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);background:var(--sun);padding:.35em .85em;border-radius:8px;margin-bottom:14px}
.section-h{margin-bottom:26px}
.btn-sun{background:var(--sun);color:var(--ink);border-color:var(--sun)}
.btn-sun:hover{background:#f5b820;border-color:#f5b820;color:var(--ink)}

.masthead{background:var(--surface);border-bottom:1px solid var(--line)}
.brand-text{font:500 1.32rem var(--head);letter-spacing:-.03em}
.brand-text b{font-weight:800;color:var(--accent)}
.nav a{color:var(--ink);border-radius:10px}
.nav a:hover{background:var(--tint)}
.nav a[aria-current]{background:var(--accent-soft);color:var(--accent-deep)}
.nav .nav-login{border:2px solid var(--accent);color:var(--accent);padding:.38em 1em}
.nav .nav-btn{background:var(--accent);color:#fff;padding:.45em 1.05em;border:2px solid var(--accent)}
.nav .nav-btn:hover,.nav .nav-btn[aria-current]{background:var(--accent-deep);color:#fff;border-color:var(--accent-deep)}
.menu summary{color:var(--ink)}

.hero{padding:64px 0 76px;background:radial-gradient(circle at 85% 20%,var(--sun-soft) 0,transparent 40%),radial-gradient(circle at 10% 90%,var(--accent-soft) 0,transparent 45%),var(--bg)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.hero h1{font-size:clamp(2.4rem,5vw,3.9rem);line-height:1.02;max-width:15ch}
.hero .lede{max-width:52ch}
.jars{margin:0;background:var(--surface);border-radius:var(--r-md);padding:26px;border:1px solid var(--line);box-shadow:0 28px 56px -30px rgba(67,44,124,.45)}
.jars-k{font-weight:700;color:var(--ink-soft);margin:0 0 16px}
.jar-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.jar{position:relative;height:190px;border:3px solid var(--ink);border-top-width:10px;border-radius:14px 14px 26px 26px;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:12px;background:#fff}
.jar-fill{position:absolute;left:0;right:0;bottom:0}
.jar-fill.f50{height:50%}.jar-fill.f40{height:40%}.jar-fill.f10{height:10%}
.j-spend .jar-fill{background:var(--sun)}.j-save .jar-fill{background:var(--mint)}.j-give .jar-fill{background:var(--rose)}
.jar b,.jar i{position:relative;z-index:1}
.jar b{font:800 1.35rem var(--head)}
.jar i{font-style:normal;font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em}
.jars-goal{display:flex;justify-content:space-between;align-items:center;background:var(--mint-soft);border-radius:var(--r-sm);padding:12px 16px;margin:18px 0 10px}
.jars-goal strong{font:800 1.3rem var(--head);color:var(--ok)}
.jars figcaption{font-size:.88rem;color:var(--ink-soft)}

.halves{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.half{border-radius:var(--r-md);padding:30px}
.h-a{background:var(--sun-soft)}.h-b{background:var(--mint-soft)}
.arrow-list{list-style:none;margin:0 0 20px;padding:0}
.arrow-list li{padding:.6em 0;border-bottom:1px solid rgba(30,27,46,.1)}
.arrow-list a{font-weight:700;color:var(--ink);text-decoration:none}
.arrow-list a::after{content:" \2192";color:var(--accent)}
.arrow-list a:hover{color:var(--accent)}
.section-tint{background:var(--tint)}
.topic-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.topic h3{font-size:1.1rem;padding-bottom:.45em;border-bottom:3px solid var(--accent)}
.topic ul{list-style:none;margin:0;padding:0}
.topic li{padding:.55em 0;border-bottom:1px solid #ddd5ef}
.topic a{display:block;color:var(--ink);text-decoration:none;font-weight:600;line-height:1.3}
.topic a:hover{color:var(--accent);text-decoration:underline}
.topic li span{font-size:.8rem;color:var(--ink-soft)}
.free-row{display:grid;grid-template-columns:300px 1fr;gap:64px;align-items:center}
.pdf-page.p1{border-top-color:var(--sun)}
.pdf-page.p2{background:var(--mint-soft)}.pdf-page.p3{background:var(--sun-soft)}
.product-band{background:var(--accent);color:#ddd3f5;padding:76px 0}
.product-band h2{color:#fff}
.product-band .lede{color:#d6cbf1}
.product-band .price-line strong{color:var(--sun);font-size:1.6rem}
.product-teaser{display:grid;grid-template-columns:1.25fr 1fr;gap:56px;align-items:center}
.band-signup{background:var(--sun-soft)}

.page-head{background:var(--surface);border-bottom:1px solid var(--line)}
.hub-group{display:grid;grid-template-columns:260px 1fr;gap:40px;padding:34px 0;border-top:1px solid var(--line)}
.hub-group:first-child{border-top:0;padding-top:0}
.hub-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 32px}
.hub-list li{padding:.8em 0;border-bottom:1px solid var(--line)}
.hub-list a{font:700 1.12rem var(--head);letter-spacing:-.02em}
.hub-list p{margin:.25em 0 0;color:var(--ink-soft);font-size:.96rem}
.hub-list .meta,.meta-line{font-size:.86rem;color:var(--ink-soft)}
.age{display:inline-block;font-weight:700;font-size:.78rem;background:var(--mint-soft);color:var(--ok);padding:.12em .55em;border-radius:6px;margin-left:6px}
.guide-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:56px;padding-top:44px;padding-bottom:64px}
.guide-body{max-width:70ch}
.guide-body h2{margin-top:1.3em;font-size:1.5rem}
.guide-body li{margin-bottom:.4em}
.intro{font-size:1.18rem;line-height:1.6}
.note-box{background:var(--sun-soft);border-radius:var(--r-md);padding:20px 24px;margin:2em 0}
.note-box h2{font-size:1.2rem;margin:0 0 .5em}
.note-box ul{margin:0;padding-left:1.2em}
.guide-side{display:flex;flex-direction:column;gap:20px}
.side-kit{background:var(--accent-soft);border-color:#d9cff3}

.age-list{display:flex;flex-direction:column;gap:18px}
.age-band{display:grid;grid-template-columns:180px 1fr;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--surface)}
.age-head{padding:24px;color:var(--ink)}
.a1 .age-head{background:var(--sun-soft)}.a2 .age-head{background:var(--rose-soft)}.a3 .age-head{background:var(--mint-soft)}.a4 .age-head{background:var(--accent-soft)}.a5 .age-head{background:#e3e9fb}
.age-n{display:block;font:800 1.9rem/1.05 var(--head);letter-spacing:-.03em}
.age-stage{margin:.3em 0 0;font-weight:600;color:var(--ink-soft)}
.age-body{padding:24px}
.age-body h2{font-size:1.3rem}
.age-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.age-cols h3{font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}

.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:28px;max-width:none}
.calc-row.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.split{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 16px 16px;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.split legend{font-weight:700;padding:0 6px}
.calc-out{background:var(--accent);color:#ddd3f5;border-radius:var(--r-md);padding:30px;position:sticky;top:20px}
.calc-k{font-weight:700;font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;color:var(--sun);margin:0 0 6px}
.calc-big{font:800 clamp(2.4rem,4.4vw,3.2rem)/1.05 var(--head);color:#fff;margin-bottom:18px}
.jar-out{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.jo{border-radius:var(--r-sm);padding:12px;text-align:center;color:var(--ink)}
.jo.s{background:var(--sun)}.jo.v{background:var(--mint)}.jo.g{background:var(--rose)}
.jo b{display:block;font:800 1.25rem var(--head)}
.jo span{font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.calc-nums{margin:0 0 14px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.calc-nums div{background:rgba(255,255,255,.1);border-radius:var(--r-sm);padding:12px}
.calc-nums dt{font-size:.88rem;color:#c9bdeb}
.calc-nums dd{margin:0;font-weight:800;font-size:1.4rem;color:#fff}
.calc-fine{margin:14px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.2);color:#c9bdeb}

.budget-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:40px;align-items:start}
.table-wrap{overflow-x:auto}
.budget-table{background:var(--surface);margin:0}
.budget-table th{background:var(--accent);color:#fff}
.budget-table .num{text-align:right;white-space:nowrap}
.budget-table .blank{min-width:110px;border-left:1px dashed var(--line)}
.b-group td{background:var(--tint);font-weight:800;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.b-in td{background:var(--mint-soft)}
.b-total td{border-top:2px solid var(--ink)}
.b-left td{background:var(--sun-soft)}
.budget-side{display:flex;flex-direction:column;gap:20px}

.club-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:center}
.club-hero .actions+.small{margin-top:14px}
.course-mock{position:relative;min-height:340px}
.cm-card{position:absolute;width:76%;background:#fff;border-radius:var(--r-md);padding:20px 22px;border:1px solid var(--line);box-shadow:0 20px 40px -24px rgba(67,44,124,.5);display:flex;flex-direction:column;gap:4px}
.cm-card span{font-weight:800;font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.cm-card b{font:800 1.3rem var(--head);letter-spacing:-.02em}
.cm-card i{font-style:normal;color:var(--ink-soft);font-size:.9rem}
.cm-card.c1{top:0;left:0;border-left:8px solid var(--sun)}.cm-card.c1 span{color:#a87800}
.cm-card.c2{top:115px;right:0;border-left:8px solid var(--mint)}.cm-card.c2 span{color:var(--ok)}
.cm-card.c3{top:230px;left:6%;border-left:8px solid var(--accent)}.cm-card.c3 span{color:var(--accent)}
.lesson-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.lesson-list li{display:flex;gap:16px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line)}
.lesson-list .ln{flex:none;width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font:800 1.1rem var(--head)}
.lesson-list strong{display:block}
.lesson-list div span{color:var(--ink-soft);font-size:.95rem}
.steps-row li{border-top-color:var(--accent)}
.club-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px}

.footer{background:#241b40;color:#c4bbdc}
.footer a{color:#fff}
.footer-brand{font:800 1.4rem var(--head);color:#fff;letter-spacing:-.03em}
.footer-h{color:var(--sun)}
.footer-base{border-top:1px solid rgba(255,255,255,.14);color:#9a90b8}

@media (max-width:1100px){.topic-cols{grid-template-columns:1fr 1fr}}
@media (max-width:960px){
  .hero-grid,.product-teaser,.club-hero,.guide-grid,.hub-group,.free-row,.tool-grid,.club-grid,.halves,.budget-grid{grid-template-columns:1fr}
  .hub-list,.lesson-list{grid-template-columns:1fr}
  .calc-out{position:static}
  .age-band{grid-template-columns:1fr}
}
@media (max-width:600px){
  .hero{padding:36px 0 50px}
  .topic-cols,.age-cols{grid-template-columns:1fr}
  .jar{height:150px}
  .jar b{font-size:1.1rem}
  .split{grid-template-columns:1fr 1fr 1fr;padding:10px}
  .course-mock{min-height:0;display:flex;flex-direction:column;gap:12px}
  .cm-card{position:static;width:auto}
  .brand-text{font-size:1.12rem}
  .brand-mark{width:34px;height:34px}
}