:root { --ink:#07090c; --paper:#f7f8f4; --blue:#e4edf7; --lime:#c4f69a; --violet:#c9c6ff; --purple:#4139c3; --coral:#f1c1b6; --muted:#666d78; --line:#d9dee4; --white:#fff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'DM Sans',sans-serif; }
a { color:inherit; }
:where(a,button,input,select):focus-visible { outline:3px solid var(--purple); outline-offset:3px; }
[hidden] { display:none!important; }
.site-header { position:sticky; z-index:20; top:0; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:72px; padding:0 clamp(20px,4vw,58px); color:white; background:var(--ink); }
.wordmark { font:800 17px 'Manrope',sans-serif; letter-spacing:-.04em; text-decoration:none; }
.site-header nav { display:flex; gap:4px; }
.site-header nav a { padding:9px 14px; color:#91969f; border-radius:999px; font-size:12px; font-weight:700; text-decoration:none; }
.site-header nav a:hover,.site-header nav a.active { color:var(--ink); background:white; }
.header-account { justify-self:end; display:flex; align-items:center; gap:10px; color:white; text-decoration:none; }
.header-account span { display:grid; }
.header-account strong { font-size:11px; }
.header-account small { color:#92979f; font-size:9px; }
.avatar { width:34px; height:34px; display:grid!important; place-items:center; color:var(--ink); border-radius:50%; background:var(--lime); font:800 11px 'Manrope'; }
.preview-banner { padding:9px 20px; color:#2e2c19; background:#fff29a; text-align:center; font-size:11px; font-weight:800; letter-spacing:.02em; }
.pricing-notice { padding:13px 20px; color:#31521f; border-bottom:1px solid #b9dda0; background:#e7fbd5; text-align:center; font-size:12px; font-weight:800; }
.receipt-list{margin-top:16px;display:grid;gap:8px}.receipt-row{display:grid;grid-template-columns:1fr auto auto auto;gap:14px;align-items:center;padding:10px 12px;border:1px solid #d8dee9;border-radius:10px;background:#f7f9fc;font-size:12px}.receipt-row>span{display:grid;gap:2px}.receipt-row strong{color:#111827}.receipt-row small{color:#687386}.receipt-row a{color:var(--purple);font-size:10px;font-weight:900}.receipt-row[data-status="failed"]{border-color:#e4aaa3;background:#fff3f1}.receipt-row[data-status="failed"]>span small{color:#9e3128}
.consent-check{display:flex!important;flex-direction:row!important;gap:10px;align-items:flex-start!important;color:#5e6878!important;font-size:11px!important;line-height:1.55}.consent-check input{width:17px!important;height:17px!important;margin-top:1px;accent-color:#6f5de7}.consent-check a{color:#5b4ad4}.account-legal{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 20px;padding:26px;border-top:1px solid #dce2eb;background:#eef5ff}.account-legal a{color:#5e6878;text-decoration:none;font-size:11px;font-weight:800}.account-legal a:hover{color:#5b4ad4}
.family-list{display:grid;gap:9px;margin:16px 0}.family-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px solid #dbe2ec;border-radius:10px;background:#f7f9fc}.family-row span{display:grid}.family-row small{color:#788393}.family-row button{border:0;background:transparent;color:#b14f45;font-weight:800;cursor:pointer}.learner-form{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:14px;border-top:1px solid #e0e5ed}.learner-form .consent-check,.learner-form button{grid-column:1/-1}.beta-form label{display:block;margin-bottom:7px;font-size:11px;font-weight:800}.beta-form>div{display:flex;gap:9px}.beta-form input{flex:1;padding:12px;border:1px solid #ccd5e2;border-radius:9px}.beta-active{padding:12px;border-radius:9px;background:#e6f8d7;color:#355b21;font-size:12px;font-weight:800}@media(max-width:620px){.learner-form{grid-template-columns:1fr}.receipt-row{grid-template-columns:1fr auto}.receipt-row>small,.receipt-row>a{grid-column:1/-1}}
.shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.eyebrow { margin:0 0 13px; color:#5f6671; font-size:10px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; }
.eyebrow::before { display:inline-block; width:18px; height:5px; margin-right:8px; border-radius:5px; background:var(--purple); content:''; vertical-align:2px; }
h1,h2,h3 { font-family:'Manrope',sans-serif; }
.pricing-hero { position:relative; overflow:hidden; padding:90px 20px 75px; background-color:var(--blue); background-image:linear-gradient(rgba(93,119,153,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(93,119,153,.11) 1px,transparent 1px); background-size:22px 22px; text-align:center; }
.pricing-hero::after { position:absolute; width:300px; height:300px; top:-135px; right:8%; border-radius:50%; background:rgba(196,246,154,.62); content:''; }
.pricing-hero > * { position:relative; z-index:1; }
.pricing-hero h1 { max-width:850px; margin:0 auto; font-size:clamp(44px,7vw,78px); line-height:.98; letter-spacing:-.065em; }
.pricing-hero h1 em { display:inline-block; padding:0 .1em .06em; border-radius:7px; background:var(--lime); font-style:normal; transform:rotate(-1deg); }
.pricing-hero > p:not(.eyebrow) { max-width:650px; margin:24px auto 0; color:#505761; font-size:16px; line-height:1.65; }
.billing-toggle { width:max-content; display:flex; gap:4px; margin:30px auto 0; padding:4px; border:1px solid #c6d1dc; border-radius:999px; background:rgba(255,255,255,.65); }
.billing-toggle button { min-height:40px; padding:0 17px; border:0; border-radius:999px; color:#656b75; background:transparent; font:800 11px 'DM Sans'; cursor:pointer; }
.billing-toggle button.active { color:white; background:var(--ink); }
.billing-toggle small { padding-left:5px; color:#b5f487; }
.plans { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:920px; margin:-32px auto 0; padding:0 20px 90px; position:relative; z-index:3; }
.plan-card { display:flex; flex-direction:column; min-height:590px; padding:32px; border:1px solid var(--line); border-radius:22px; background:var(--white); box-shadow:0 18px 48px rgba(29,42,56,.09); }
.plan-card.pro { color:white; border-color:#2a2e35; background:var(--ink); box-shadow:13px 13px 0 var(--violet); }
.plan-top { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.plan-name { margin:0; font-size:13px; font-weight:900; letter-spacing:.11em; text-transform:uppercase; }
.plan-badge { padding:6px 9px; color:#282157; border-radius:999px; background:var(--violet); font-size:9px; font-weight:900; }
.price { display:flex; align-items:flex-end; gap:7px; margin:30px 0 11px; }
.price strong { font:800 clamp(44px,6vw,64px)/.9 'Manrope'; letter-spacing:-.06em; }
.price span { color:#7a8088; font-size:11px; }
.pro .price span { color:#999fa8; }
.plan-intro { min-height:48px; margin:0; color:#666d76; font-size:12px; line-height:1.55; }
.pro .plan-intro { color:#a7acb4; }
.plan-action { display:flex; justify-content:space-between; align-items:center; min-height:50px; margin:28px 0; padding:0 17px; border-radius:10px; color:white; background:var(--ink); font-size:12px; font-weight:900; text-decoration:none; }
.pro .plan-action { color:var(--ink); background:var(--lime); }
.plan-action[aria-disabled="true"] { cursor:not-allowed; opacity:.58; }
.billing-toggle button:disabled { cursor:not-allowed; opacity:.5; }
.features { display:grid; gap:14px; margin:0; padding:24px 0 0; border-top:1px solid #e6e8ec; list-style:none; }
.pro .features { border-color:#2a2e34; }
.features li { display:grid; grid-template-columns:23px 1fr; gap:8px; color:#4f5660; font-size:12px; }
.pro .features li { color:#d7d9de; }
.features li::before { display:grid; place-items:center; width:20px; height:20px; color:#354b25; border-radius:6px; background:#e7fbd5; content:'✓'; font-size:10px; font-weight:900; }
.pro .features li::before { color:var(--lime); background:#263522; }
.plan-foot { margin-top:auto; padding-top:26px; color:#8b9098; font-size:10px; }
.comparison { padding:90px 0; background:white; }
.section-heading { display:flex; justify-content:space-between; gap:30px; align-items:end; margin-bottom:35px; }
.section-heading h2 { max-width:700px; margin:0; font-size:clamp(34px,5vw,58px); line-height:1; letter-spacing:-.055em; }
.section-heading > p { max-width:420px; margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.compare-table { overflow:hidden; border:1px solid var(--line); border-radius:18px; }
.compare-row { display:grid; grid-template-columns:1.5fr .7fr .7fr; min-height:58px; align-items:center; border-top:1px solid var(--line); }
.compare-row:first-child { border-top:0; background:#f1f4f7; font-weight:900; }
.compare-row > * { padding:15px 22px; font-size:12px; }
.compare-row > :not(:first-child) { text-align:center; }
.yes { color:#397322; font-weight:900; }
.parent-strip { display:grid; grid-template-columns:1fr auto; gap:30px; align-items:center; margin-top:30px; padding:30px; border-radius:18px; background:var(--coral); }
.parent-strip h3 { margin:0 0 6px; font-size:22px; letter-spacing:-.035em; }
.parent-strip p { max-width:720px; margin:0; color:#5a4d4a; font-size:12px; line-height:1.6; }
.parent-strip a,.parent-strip .parent-action { padding:13px 17px; border-radius:9px; color:white; background:var(--ink); font-size:11px; font-weight:900; text-decoration:none; white-space:nowrap; }
.parent-strip .parent-action { cursor:not-allowed; opacity:.72; }
.faq { padding:85px 0; }
.faq-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.faq article { padding:25px; border:1px solid var(--line); border-radius:15px; background:white; }
.faq h3 { margin:0 0 8px; font-size:16px; }
.faq p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }
footer { display:flex; justify-content:space-between; gap:30px; padding:38px clamp(20px,5vw,70px); color:#858a93; background:var(--ink); font-size:10px; }

/* Account */
#auth-step[hidden], #account-form[hidden], #auth-code-form[hidden], #auth-reset-form[hidden], #auth-secondary[hidden] { display:none !important; }
#auth-step { display:grid; gap:16px; }
#auth-step button, #account-form button, #auth-secondary button { font-family:inherit; }
#auth-step h3 { margin:0; font-size:24px; }
#auth-code { font-size:24px; letter-spacing:.3em; max-width:260px; }
#auth-secondary { margin-top:16px; }
.account-main { min-height:calc(100vh - 72px); padding:58px 0 90px; background-color:var(--blue); background-image:linear-gradient(rgba(93,119,153,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(93,119,153,.11) 1px,transparent 1px); background-size:22px 22px; }
.account-layout { display:grid; grid-template-columns:.82fr 1.18fr; gap:22px; align-items:start; }
.account-intro { position:sticky; top:115px; padding:20px 35px 20px 0; }
.account-intro h1 { margin:0; font-size:clamp(42px,6vw,68px); line-height:.98; letter-spacing:-.065em; }
.account-intro h1 em { display:inline-block; padding:0 .08em .07em; border-radius:6px; background:var(--lime); font-style:normal; transform:rotate(-1deg); }
.account-intro > p:not(.eyebrow) { max-width:470px; color:#505761; font-size:14px; line-height:1.7; }
.account-promises { display:grid; gap:10px; margin-top:28px; }
.account-promises span { display:flex; align-items:center; gap:9px; color:#4d535d; font-size:11px; font-weight:700; }
.account-promises span::before { display:grid; place-items:center; width:22px; height:22px; border-radius:7px; background:rgba(255,255,255,.72); content:'✓'; font-size:10px; }
.account-panel { padding:30px; border:1px solid #ccd5df; border-radius:20px; background:rgba(255,255,255,.96); box-shadow:0 24px 55px rgba(46,62,82,.15); }
.account-panel h2 { margin:0 0 7px; font-size:26px; letter-spacing:-.04em; }
.panel-intro { margin:0 0 24px; color:var(--muted); font-size:12px; }
.auth-paths { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:20px; padding:5px; border:1px solid #d6dbe2; border-radius:12px; background:#f3f5f7; }
.auth-paths button { min-height:42px; border:0; border-radius:8px; color:#707680; background:transparent; font:900 11px 'DM Sans'; cursor:pointer; }
.auth-paths button[aria-selected="true"] { color:white; background:var(--ink); box-shadow:0 5px 12px rgba(46,54,67,.16); }
.field-grid { display:grid; gap:14px; }
.registration-fields { display:grid; gap:14px; }
.registration-fields[hidden] { display:none; }
.field-grid label { display:grid; gap:7px; color:#4f555e; font-size:10px; font-weight:900; }
.field-grid input,.field-grid select { width:100%; height:48px; padding:0 13px; border:1px solid #ccd2da; border-radius:9px; background:white; font:500 13px 'DM Sans'; }
.role-picker { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.role-picker label { display:flex; align-items:center; gap:9px; min-height:52px; padding:10px; border:1px solid #d4d9e0; border-radius:10px; cursor:pointer; }
.role-picker input { width:auto; height:auto; }
.submit-button,.review-button { width:100%; min-height:49px; border:0; border-radius:10px; color:white; background:var(--ink); font:900 12px 'DM Sans'; cursor:pointer; }
.form-note { margin:13px 0 0; color:#858a92; font-size:9px; line-height:1.5; text-align:center; }
.account-dashboard { display:grid; gap:14px; }
.account-summary { position:relative; overflow:hidden; padding:27px; color:white; border-radius:16px; background:var(--ink); }
.account-summary::after { position:absolute; width:160px; height:160px; top:-70px; right:-25px; border-radius:50%; background:var(--lime); content:''; opacity:.9; }
.account-summary > * { position:relative; z-index:1; }
.summary-top { display:flex; justify-content:space-between; gap:15px; }
.summary-top p { margin:0 0 4px; color:#8f949d; font-size:9px; font-weight:900; letter-spacing:.1em; }
.summary-top h2 { margin:0; font-size:25px; }
.plan-pill { height:max-content; padding:7px 10px; color:#2e2965; border-radius:999px; background:var(--violet); font-size:10px; font-weight:900; }
.account-email { margin:6px 0 22px; color:#8f949d; font-size:11px; }
.summary-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.summary-metrics div { display:grid; gap:4px; padding:12px; border:1px solid #2b2f35; border-radius:10px; background:#14171b; }
.summary-metrics strong { color:var(--lime); font:800 18px 'Manrope'; }
.summary-metrics span { color:#8f949d; font-size:8px; }
.settings-card { padding:22px; border:1px solid #d8dde3; border-radius:15px; background:white; }
.settings-card h3 { margin:0 0 6px; font-size:16px; }
.settings-card > p { margin:0; color:var(--muted); font-size:11px; line-height:1.55; }
.course-option { display:flex; justify-content:space-between; gap:15px; align-items:center; margin-top:15px; padding:15px; border:1px solid #dadfe5; border-radius:11px; }
.course-option strong,.course-option span { display:block; }
.course-option span { margin-top:3px; color:#7e838b; font-size:9px; }
.course-option button,.course-option b { padding:7px 9px; border:0; border-radius:7px; color:#384527; background:#e7fbd5; font:900 9px 'DM Sans'; }
.course-option.coming { opacity:.64; }
.course-option.coming b { color:#625b34; background:#fff3b4; }
.billing-row { display:flex; justify-content:space-between; gap:18px; align-items:center; margin-top:15px; }
.billing-row a { padding:11px 14px; border:1px solid #cbd1d9; border-radius:9px; font-size:10px; font-weight:900; text-decoration:none; white-space:nowrap; }
.review-controls { border:1px dashed #9a91dc; background:#f0efff; }
.review-controls .review-label { width:max-content; margin:0 0 12px; padding:5px 7px; color:white; border-radius:5px; background:var(--purple); font-size:8px; font-weight:900; letter-spacing:.08em; }
.review-buttons { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin-top:14px; }
.review-button { min-height:42px; color:var(--ink); border:1px solid #c5c1e5; background:white; }
.review-button.admin { display:flex; align-items:center; justify-content:center; border-color:#b8d99e; background:#e7fbd5; font-size:12px; font-weight:900; text-decoration:none; }
.review-button.pro { color:white; border-color:var(--ink); background:var(--ink); }
.review-button.signout { color:#a42d24; }
.review-button.danger { color:#8c241d; border-color:#e4aaa3; background:#fff3f1; }
.account-message { min-height:18px; margin:12px 0 0; color:#3e6928; font-size:10px; font-weight:800; }

@media (max-width:860px) {
  .site-header { grid-template-columns:1fr auto; }
  .site-header nav { display:none; }
  .plans,.account-layout { grid-template-columns:1fr; }
  .plans { max-width:620px; }
  .account-intro { position:static; padding-right:0; }
  .section-heading { display:grid; }
}
@media (max-width:620px) {
  .site-header { min-height:62px; padding:0 16px; }
  .header-account small { display:none; }
  .pricing-hero { padding-top:65px; }
  .plans { margin-top:-20px; padding-inline:12px; }
  .plan-card { min-height:0; padding:24px; }
  .compare-row { grid-template-columns:1.25fr .65fr .65fr; }
  .compare-row > * { padding:12px 9px; font-size:10px; }
  .parent-strip { grid-template-columns:1fr; }
  .faq-grid { grid-template-columns:1fr; }
  .shell { width:min(100% - 24px,560px); }
  .account-main { padding-top:35px; }
  .account-panel { padding:20px; }
  .summary-metrics { grid-template-columns:1fr; }
  .review-buttons { grid-template-columns:1fr; }
  .billing-row { display:grid; }
  footer { display:grid; }
}