/* Public course pages (scripts/build-seo.mjs). Plain, fast, readable on phones. */
:root { --forest: #00583f; --ink: #14231c; --muted: #52665d; --line: #dce8e2; --mint: #edf7f2; }
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.6 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; color: var(--ink); background: #f6f9f7; }
a { color: var(--forest); }
main { max-width: 900px; margin: 0 auto; padding: 24px 18px 48px; }
.seo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 2; }
.seo-top .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--ink); text-decoration: none; }
.seo-top nav { display: flex; align-items: center; gap: 16px; font-size: 15px; }
.seo-top nav a { text-decoration: none; font-weight: 600; }
.seo-cta, .seo-button { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 12px; background: var(--forest); color: #fff !important; font-weight: 700; text-decoration: none; }
.seo-button { min-height: 52px; padding: 14px 24px; font-size: 17px; margin: 8px 0 12px; }
.seo-eyebrow { margin: 0 0 6px; color: var(--forest); font-weight: 700; font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; }
h1 { font-size: clamp(28px, 5vw, 40px); line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.5px; }
h2 { font-size: 22px; margin: 36px 0 12px; }
.seo-lead { font-size: 18px; color: #2f463d; max-width: 70ch; }
.seo-crumbs { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.seo-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; list-style: none; padding: 0; margin: 20px 0; }
.seo-stats li { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.seo-stats strong { display: block; font-size: 24px; color: var(--forest); }
.seo-stats span { font-size: 14px; color: var(--muted); }
.seo-topics, .seo-list, .seo-related, .seo-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.seo-topics li, .seo-list li { display: flex; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.seo-topics span, .seo-list span { color: var(--muted); font-size: 14px; white-space: nowrap; }
.seo-steps { padding-left: 22px; } .seo-steps li { margin: 8px 0; }
.seo-faq details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 8px 0; }
.seo-faq summary { font-weight: 700; cursor: pointer; }
.seo-related a { display: block; padding: 10px 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; font-weight: 600; }
.seo-hero { background: var(--mint); border: 2px solid var(--forest); border-radius: 20px; padding: 24px; margin-bottom: 12px; }
.seo-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.seo-cards a { display: block; height: 100%; padding: 16px; background: #fff; border: 1.5px solid #cfe2d7; border-radius: 14px; text-decoration: none; color: var(--ink); }
.seo-cards a:hover { border-color: var(--forest); box-shadow: 0 6px 16px rgba(0, 88, 63, 0.12); }
.seo-cards strong { display: block; font-size: 17px; margin-bottom: 4px; }
.seo-cards span { font-size: 14px; color: var(--muted); }
.seo-foot { max-width: 900px; margin: 0 auto; padding: 24px 18px 40px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.seo-small { font-size: 13px; }
.skip { position: fixed; left: 12px; top: 12px; transform: translateY(-200%); z-index: 100; background: #fff; color: var(--forest); padding: 12px 16px; border: 2px solid var(--forest); border-radius: 8px; }
.skip:focus { transform: none; }
a:focus-visible, summary:focus-visible { outline: 3px solid #007a55; outline-offset: 4px; }
a, summary { touch-action: manipulation; }
h1, h2 { text-wrap: balance; scroll-margin-top: 100px; }
.seo-list p { margin: 6px 0 0; font-size: 15px; color: #31493e; }
.seo-top nav { flex-wrap: wrap; }
.seo-top .brand { flex-shrink: 0; }
.seo-cards a:hover, .seo-related a:hover { border-color: var(--forest); }
main { scroll-margin-top: 100px; }
@media (max-width: 380px) { .seo-top { align-items: flex-start; flex-wrap: wrap; } }
@media (max-width: 520px) { .seo-top nav a:not(.seo-cta) { display: none; } .seo-topics li, .seo-list li { flex-direction: column; gap: 2px; } }

/* Shared public reading pages: same restrained identity as the homepage. */
body{background:#fff}main{max-width:1020px;padding:36px 28px 64px}.seo-top{padding:18px max(24px,calc((100% - 1140px)/2));min-height:80px}.seo-top .brand{font-size:20px;letter-spacing:-.5px}.seo-top nav{gap:24px}.seo-cta,.seo-button{border-radius:8px}.seo-hero{background:var(--mint);border:0;border-left:4px solid var(--forest);border-radius:0 16px 16px 0;padding:36px;margin-bottom:36px}.seo-eyebrow{text-transform:none;letter-spacing:0;font-weight:650;font-size:14px;margin-bottom:14px}h1{font-size:clamp(32px,4vw,48px);letter-spacing:-.035em;max-width:25ch}h2{letter-spacing:-.025em;line-height:1.3}p,main>section>ul,article>section>ul{max-width:74ch}main>article{max-width:800px;margin-inline:auto}article>section,main>section:not(.seo-hero){margin-block:38px}.seo-lead{line-height:1.8;max-width:65ch}.seo-stats li{background:var(--mint);border:0;border-radius:8px}.seo-cards{gap:16px}.seo-cards a{padding:22px;border-width:1px;border-radius:10px}.seo-cards a:hover{box-shadow:none}.seo-cards strong{line-height:1.5}.seo-cards span{display:block;line-height:1.8}.seo-top nav a:not(.seo-cta){display:inline-flex;align-items:center;min-height:44px}.seo-foot{max-width:1020px;padding-inline:28px}.seo-foot a{display:inline-block;padding-block:8px}.seo-crumbs a{display:inline-flex;align-items:center;min-height:44px}main li{margin-block:4px}main section>ul:not([class]) li{margin-bottom:14px}
@media(max-width:640px){main{padding:20px 22px 42px}.seo-top{padding:12px 18px;min-height:66px}.seo-top .brand{font-size:17px;gap:7px}.seo-top .brand img{width:30px;height:30px}.seo-cta{font-size:12px;padding:10px 12px}.seo-top nav{gap:8px}.seo-top nav a:not(.seo-cta){display:none}.seo-hero{padding:25px 22px;margin-bottom:28px}.seo-lead{font-size:16px}.seo-foot{padding-inline:22px}.seo-cards{grid-template-columns:1fr}}