/* Layout idea: the page is a worksheet. Column letters run along the top, row numbers down the side,
   the hero is a formula bar, and the course list is a real sheet with a status column. */
:root{
  --paper:#fbfcfa; --ink:#14201a; --muted:#56635b; --grid:#dfe5e0;
  --xl:#107c41; --xl-deep:#0b4f2b; --brand:#ff3b6b; --brand-2:#ff8a2a; --cell:#eef5f0;
  --display:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"JetBrains Mono", ui-monospace, Consolas, monospace;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0f1612; --ink:#e8efe9; --muted:#9fb0a5; --grid:#233029;
    --xl:#3fbf78; --xl-deep:#7fd9a6; --brand:#ff5c84; --brand-2:#ffa35a; --cell:#16241c; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0f1612; --ink:#e8efe9; --muted:#9fb0a5; --grid:#233029;
  --xl:#3fbf78; --xl-deep:#7fd9a6; --brand:#ff5c84; --brand-2:#ffa35a; --cell:#16241c; color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper); color:var(--ink); font:16px/1.6 var(--body);
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:120px 32px; background-attachment:fixed;}
a{color:inherit}
:focus-visible{outline:3px solid var(--brand); outline-offset:3px; border-radius:4px}
.wrap{max-width:1120px; margin:0 auto; padding:0 20px}
section{padding:72px 0}
h1,h2,h3{font-family:var(--display); text-wrap:balance; margin:0; letter-spacing:-0.02em}
h2{font-size:clamp(30px,4.4vw,48px); line-height:1.05}
p{margin:0}
.lead{color:var(--muted); max-width:60ch; font-size:18px}
.panel{background:var(--paper); border:1px solid var(--grid); border-radius:14px}

/* top bar */
.top{position:sticky; top:0; z-index:5; background:var(--xl-deep); color:#fff}
:root[data-theme="dark"] .top{background:#0b2b1a}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .top{background:#0b2b1a}}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:16px; height:60px}
.logo{font-family:var(--display); font-weight:800; font-size:20px; text-decoration:none; display:flex; gap:10px; align-items:center}
.logo .x{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:7px; background:#fff; color:#0b4f2b; font-size:17px}
.top nav{display:flex; gap:22px; font-weight:500; font-size:15px}
.top nav a{text-decoration:none; opacity:.85}
.top nav a:hover{opacity:1}
@media (max-width:640px){.top nav a:not(.cta-s){display:none}}
.cta-s{background:#fff; color:#0b4f2b; padding:7px 14px; border-radius:999px; font-weight:600; opacity:1!important}

/* hero */
.hero{padding:56px 0 40px}
.fbar{display:flex; align-items:stretch; border:1px solid var(--grid); border-radius:10px; overflow:hidden; background:var(--paper); max-width:760px; box-shadow:0 10px 30px -18px rgba(11,79,43,.45)}
.fbar .nm{padding:12px 16px; border-right:1px solid var(--grid); font:500 14px var(--mono); color:var(--muted); min-width:72px}
.fbar .fx{padding:12px 12px; border-right:1px solid var(--grid); font:italic 600 15px var(--body); color:var(--muted)}
.fbar .f{padding:12px 16px; font:500 15px var(--mono); white-space:nowrap; overflow-x:auto}
.f .fn{color:var(--xl)} .f .s{color:var(--brand)} .caret{display:inline-block; width:2px; height:1.1em; background:var(--ink); vertical-align:-3px; margin-left:2px; animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero h1{font-size:clamp(44px,8.2vw,104px); line-height:.94; font-weight:800; margin:34px 0 22px; max-width:14ch}
.hero h1 em{font-style:normal; background:linear-gradient(100deg,var(--brand-2),var(--brand)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero .row{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 22px; border-radius:12px; font-weight:600; text-decoration:none; border:2px solid var(--xl); font-size:16px}
.btn.p{background:var(--xl); color:#fff}
:root[data-theme="dark"] .btn.p{color:#08140d}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.p{color:#08140d}}
.btn.g{color:var(--xl)}
.stamp{margin-top:26px; font:500 13px var(--mono); color:var(--muted)}

/* sheet table */
.sheet{margin-top:34px; overflow-x:auto; border:1px solid var(--grid); border-radius:14px; background:var(--paper)}
table{border-collapse:collapse; width:100%; min-width:820px; font-size:15px}
th,td{border-right:1px solid var(--grid); border-bottom:1px solid var(--grid); padding:14px 16px; text-align:left; vertical-align:top}
thead th{background:var(--cell); font:500 12px var(--mono); color:var(--muted); text-align:center; padding:6px}
tbody tr:first-child td{font-weight:600; background:var(--cell); font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
td.rn, th.rn{width:44px; text-align:center; background:var(--cell); font:500 12px var(--mono); color:var(--muted); font-weight:500!important; text-transform:none!important}
td b{font-family:var(--display); font-size:18px; letter-spacing:-.01em}
td small{display:block; color:var(--muted); margin-top:4px; font-size:14px; line-height:1.45}
.pill{display:inline-block; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:600; white-space:nowrap}
.rec{background:color-mix(in srgb, var(--brand) 16%, transparent); color:var(--brand)}
.plan{background:color-mix(in srgb, var(--muted) 16%, transparent); color:var(--muted)}
.lvl{font:500 13px var(--mono); color:var(--xl)}
.bar{height:6px; border-radius:6px; background:var(--grid); margin-top:8px; width:120px; overflow:hidden}
.bar i{display:block; height:100%; background:linear-gradient(90deg,var(--xl),var(--brand-2))}

/* path */
.path{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:34px; border:1px solid var(--grid); border-radius:14px; overflow:hidden; background:var(--paper)}
.step{padding:24px 22px; border-right:1px solid var(--grid); display:flex; flex-direction:column; gap:10px}
.step:last-child{border-right:0}
.step .ref{font:500 13px var(--mono); color:var(--muted)}
.step h3{font-size:24px}
.step ul{margin:0; padding-left:18px; color:var(--muted); font-size:15px}
.step:nth-child(4){background:var(--xl-deep); color:#fff}
.step:nth-child(4) ul,.step:nth-child(4) .ref{color:#cfe8da}
:root[data-theme="dark"] .step:nth-child(4){background:#123a25}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .step:nth-child(4){background:#123a25}}
@media (max-width:820px){.path{grid-template-columns:1fr 1fr}.step:nth-child(2){border-right:0}.step:nth-child(-n+2){border-bottom:1px solid var(--grid)}}
@media (max-width:480px){.path{grid-template-columns:1fr}.step{border-right:0;border-bottom:1px solid var(--grid)}}

/* how */
.how{display:grid; grid-template-columns:1.1fr .9fr; gap:28px; align-items:center; margin-top:34px}
@media (max-width:820px){.how{grid-template-columns:1fr}}
.screen{border-radius:14px; overflow:hidden; border:1px solid var(--grid); background:var(--paper); box-shadow:0 20px 50px -30px rgba(11,79,43,.6)}
.screen .tb{background:#217346; color:#fff; font-size:12px; padding:7px 12px; display:flex; justify-content:space-between}
.screen .rb{display:flex; gap:16px; padding:7px 12px; font-size:12px; border-bottom:1px solid var(--grid); color:var(--muted)}
.screen .rb .on{color:var(--xl); font-weight:600; border-bottom:2px solid var(--xl)}
.mini{display:grid; grid-template-columns:34px repeat(4,1fr); font:500 12.5px var(--mono); position:relative}
.mini div{border-right:1px solid var(--grid); border-bottom:1px solid var(--grid); padding:6px 8px; white-space:nowrap; overflow:hidden}
.mini .h{background:var(--cell); color:var(--muted); text-align:center}
.mini .act{outline:2px solid var(--xl); outline-offset:-2px; background:color-mix(in srgb,var(--xl) 10%, transparent)}
.cursor{position:absolute; width:22px; height:22px; left:62%; top:58%; animation:move 6s ease-in-out infinite}
@keyframes move{0%,100%{transform:translate(0,0)}40%{transform:translate(-120px,-40px)}70%{transform:translate(-40px,30px)}}
@media (prefers-reduced-motion: reduce){.cursor,.caret{animation:none}}
.points{display:grid; gap:16px}
.pt{display:grid; grid-template-columns:56px 1fr; gap:14px; align-items:start}
.pt .k{font:500 13px var(--mono); color:var(--xl); border:1px solid var(--grid); border-radius:8px; padding:6px 0; text-align:center; background:var(--paper)}
.pt h3{font-size:20px; margin-bottom:2px}
.pt p{color:var(--muted); font-size:15.5px}

/* follow */
.follow{display:grid; grid-template-columns:auto 1fr; gap:36px; align-items:center; padding:36px; border-radius:20px; background:linear-gradient(135deg,#ffc21a 0%,#ff7a32 45%,#ff2d5a 100%); color:#1b0b10}
.follow img{width:220px; height:auto; border-radius:18px; display:block; background:#fff}
.follow h2{color:#1b0b10}
.follow p{max-width:52ch; margin-top:12px; font-size:17px}
.follow .btn{border-color:#1b0b10; color:#1b0b10; margin-top:20px; background:rgba(255,255,255,.35)}
@media (max-width:700px){.follow{grid-template-columns:1fr; text-align:left; padding:26px}.follow img{width:180px}}

/* faq */
.faq{margin-top:28px; display:grid; gap:10px; max-width:820px}
details{border:1px solid var(--grid); border-radius:12px; background:var(--paper); padding:4px 18px}
summary{cursor:pointer; font-weight:600; padding:14px 0; font-size:17px}
details p{color:var(--muted); padding:0 0 16px; max-width:65ch}
footer{padding:40px 0 60px; color:var(--muted); font-size:14px}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; border-top:1px solid var(--grid); padding-top:24px}

/* shared additions */
.buy{display:inline-flex;margin-top:10px;padding:8px 14px;border-radius:9px;background:var(--xl);color:#fff;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.buy.soon{background:transparent;color:var(--xl);border:1.5px solid var(--xl)}
.price{font-family:var(--display);font-weight:700;font-size:22px;white-space:nowrap}
.price small{display:block;font-family:var(--body);font-weight:500;font-size:13px;color:var(--muted)}
.fill{background:#fff3b0;color:#5b4500;padding:0 4px;border-radius:4px;font-weight:600}
.doc{max-width:760px;padding:56px 0 40px}
.doc h1{font-size:clamp(36px,6vw,60px);line-height:1;margin-bottom:10px}
.doc h2{font-size:24px;margin:34px 0 8px}
.doc p,.doc li{color:var(--ink);max-width:68ch}
.doc p+p{margin-top:12px}
.doc ul{padding-left:20px}
.doc .upd{font:500 13px var(--mono);color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:26px}
.card{border:1px solid var(--grid);border-radius:14px;padding:22px;background:var(--paper)}
.card h3{font-size:19px;margin-bottom:6px}
.card p{color:var(--muted)}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 18px}
.foot-links a{text-decoration:none}
.foot-links a:hover{text-decoration:underline}