/* Shared look for the inner pages, matching the homepage (index.html).
   Linked after each page's own <style>, so it wins at equal specificity. */
:root{
  --canvas:#F7F5F0; --card:#FFFFFF; --ink:#0E1B2C; --ink2:#34445A; --mut:#6B7686;
  --line:#E4E0D6; --wheat:#E0A23B; --wheat-d:#A8711A; --paper:#FBF1DE; --paper-line:#EBD9B4;
  --head:'General Sans',system-ui,sans-serif; --body:Satoshi,system-ui,sans-serif; --monof:'JetBrains Mono',ui-monospace,monospace;
}
body{font-family:var(--body);font-size:16.5px;line-height:1.6}
h1,h2,h3,.brand{font-family:var(--head);font-weight:600;letter-spacing:-.025em;text-wrap:balance}
button,input,select,textarea{font-family:var(--body)}
.mono{font-family:var(--monof)}
:focus-visible{outline:2px solid var(--wheat);outline-offset:3px;border-radius:6px}

header.nav{background:rgba(247,245,240,.85);backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid var(--line)}
.navlinks{font-weight:500}
.langpill{border:none;border-radius:8px;background:#EDEAE3;padding:3px;gap:2px;font-family:var(--body);font-size:13px}
.langpill a{border-radius:6px;padding:3px 9px}
.langpill a.on{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(14,27,44,.08)}

.eyebrow{font-family:var(--monof);font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:none;color:var(--wheat-d)}

.btn,.gobtn{font-family:var(--body);font-weight:700;border-radius:10px}
.btn.wheat:hover,.gobtn:hover{background:#D29330;color:var(--ink)}

.gatecard,.successcard,.notice,.lesson,.about-card,.dashcard{border-radius:18px}
.gatecard{border-color:var(--line);box-shadow:0 1px 2px rgba(14,27,44,.04),0 24px 48px -32px rgba(14,27,44,.25)}
.gatecard h1{font-size:30px;line-height:1.1}
.field input,.field select,.field textarea{border-radius:10px;border-color:var(--line);font-size:15.5px;padding:12px 14px}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(224,162,59,.25)}

footer{border-top:1px solid var(--line)}

/* light page heroes, like the homepage (learn .intro, helpers .hh) */
.intro,.hh{background:transparent;color:var(--ink)}
.intro .wrap{padding-top:88px;padding-bottom:56px}
.hh .wrap{padding-top:88px;padding-bottom:8px}
.intro h1,.hh h1{font-size:clamp(38px,5.4vw,60px);line-height:1.04;letter-spacing:-.035em;font-weight:600;max-width:820px}
.intro p,.hh p.sub{color:var(--ink2);font-size:18.5px;max-width:640px}
.toc a{color:var(--ink);border-color:var(--line);background:var(--card);font-weight:500}
.toc a:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.finalcta{border-radius:24px}
.finalcta h2{font-size:clamp(28px,3.6vw,44px);line-height:1.08;letter-spacing:-.03em}