/* Shared styles for /blog. Same tokens as index.html and educators.html —
   kept in one file rather than inlined three times, since every post needs
   the identical prose treatment. CSP allows same-origin stylesheets. */
:root {
  --paper:#faf7f1; --paper-2:#f3eee4; --ink:#221c3a; --ink-soft:#4c4763;
  --ink-faint:#676178; --line:#e2dccd; --violet:#5b4bd4; --violet-deep:#43389f;
  --teal:#1e9e8a; --teal-ink:#157565; --card:#ffffff; --radius:14px;
  --shadow:0 1px 2px rgba(34,28,58,.06), 0 8px 28px rgba(34,28,58,.09);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',system-ui,sans-serif; background:var(--paper); color:var(--ink); line-height:1.65; font-size:16px; }
h1,h2,h3 { font-family:'Fraunces',Georgia,serif; line-height:1.15; letter-spacing:-0.01em; }
a { color:var(--violet); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:860px; margin:0 auto; padding:0 24px; }
/* text-heavy pages: hold paragraphs and lists to a readable measure */
p, li { max-width:68ch; color:var(--ink-soft); }
p + p { margin-top:14px; }

.btn { display:inline-block; padding:12px 26px; border-radius:999px; font-weight:600; font-size:1rem; }
.btn-primary { background:var(--violet); color:#fff; box-shadow:0 4px 14px rgba(91,75,212,.35); }
.btn-primary:hover { background:var(--violet-deep); color:#fff; text-decoration:none; }

.kicker { display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--teal-ink); margin-bottom:14px; }
.hero { padding:56px 0 28px; }
h1 { font-size:clamp(1.9rem,4.4vw,2.9rem); font-weight:600; margin-bottom:16px; }
.lede { font-size:1.1rem; color:var(--ink-soft); }
.meta { font-size:.85rem; color:var(--ink-faint); margin-top:16px; }

/* ---- Article body ---- */
article.post { padding:8px 0 36px; }
article.post h2 { font-size:1.55rem; margin:34px 0 12px; }
article.post h2:first-child { margin-top:8px; }
article.post ul, article.post ol { margin:14px 0 14px 22px; }
article.post li { padding:4px 0; }
article.post li strong { color:var(--ink); }
article.post p strong { color:var(--ink); }
article.post code {
  background:var(--paper-2); border:1px solid var(--line); border-radius:5px;
  padding:1px 5px; font-size:.9em; color:var(--violet-deep);
}

/* The one line worth pulling out of the prose. */
blockquote.pull {
  font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:1.3rem; line-height:1.4;
  color:var(--ink); border-left:3px solid var(--teal); padding:6px 0 6px 22px; margin:26px 0; max-width:38ch;
}

/* ---- Closing call to action ---- */
.cta {
  background:var(--card); border:2px solid var(--violet); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:28px; margin:34px 0 8px;
}
.cta h2 { margin:0 0 10px; font-size:1.4rem; }
.cta p { margin-bottom:18px; }
.cta .note { font-size:.85rem; color:var(--ink-faint); margin:12px 0 0; }

/* Competitor pricing and trademark disclaimer. */
.disclaimer { font-size:.8rem; color:var(--ink-faint); border-top:1px solid var(--line); margin-top:36px; padding-top:16px; }

/* ---- Index listing ---- */
.posts { list-style:none; margin:8px 0 0; padding:0; }
.posts li { max-width:none; padding:0; border-top:1px solid var(--line); }
.posts li:last-child { border-bottom:1px solid var(--line); }
.posts a.post-link { display:block; padding:26px 0; color:inherit; }
.posts a.post-link:hover { text-decoration:none; }
.posts a.post-link:hover h2 { color:var(--violet); }
.posts h2 { font-size:1.4rem; margin-bottom:8px; max-width:46ch; }
.posts p { margin:0; max-width:64ch; }
.posts .meta { margin-top:10px; }
.more { margin-top:12px; font-weight:600; color:var(--violet); font-size:.92rem; }

footer.site { border-top:1px solid var(--line); padding:32px 0 48px; font-size:.85rem; color:var(--ink-faint); }
footer nav { display:flex; gap:22px; flex-wrap:wrap; margin-top:8px; }
footer a { color:var(--ink-soft); }
footer .legal { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; }
footer .rol-badge { display:inline-flex; line-height:0; }