/* STM32 Programming, Live: additions to site.css (theory text, figures, formulas). Uses the same tokens. */
.read { margin: 8px 0 18px; }
.read h2 { font: 700 21px/1.25 'Sora', system-ui, sans-serif; letter-spacing: -.01em; margin: 30px 0 8px; }
.read p, .read li { font-size: 17px; line-height: 1.65; }
.read p { margin: 0 0 12px; }
.read ul, .read ol { margin: 0 0 14px; padding-left: 24px; }
.read li { margin: 4px 0; }
.read .code { margin: 10px 0 16px; }
.read .why { margin: 14px 0; }
figure.rfig { margin: 14px 0 20px; }
figure.rfig .thumb.fig { margin: 0; width: 100%; max-width: 640px; background: #fff; }
figure.rfig figcaption { font-size: 14px; color: var(--muted); margin-top: 6px; max-width: 640px; }
.eq { font: 500 16px 'Fira Code', monospace; background: var(--code-bg); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: inline-block; margin: 4px 0 14px; }
.eq sub { font-size: 12px; }
h3.cov { font: 700 12px 'Sora', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 22px 0 6px; }
ul.cov { margin: 0 0 8px; padding-left: 22px; }
ul.cov li { margin: 3px 0; }
.video .soon { position: absolute; inset: 0; display: grid; place-items: center; color: #a8a2b6; font-size: 15px; }
.lmeta .ptag.Setup { color: var(--green); }
.tag.Setup { color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
.outline ol li .badge { margin-left: 8px; }
.ctxhint { display: block; font-size: 13px; color: var(--muted); margin-top: 4px; }

.members h3 { line-height: 1.35; }
.tag.Hands-on { color: var(--blue); background: color-mix(in srgb, var(--blue) 13%, transparent); }
.teacher { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 28px; align-items: stretch; }
.teacher-photo { width: 100%; height: 100%; min-height: 240px; object-fit: cover; object-position: 25% 50%; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); }
.teacher > div { display: flex; flex-direction: column; justify-content: center; }
.teacher p:last-child { margin-bottom: 0; }
.teacher p { margin: 0 0 12px; }
@media (max-width: 700px) { .teacher { grid-template-columns: 1fr; } .teacher-photo { height: auto; aspect-ratio: 4 / 3; max-width: 360px; } }
.home .fit ul { margin: 6px 0 0; padding-left: 20px; }
.home .fit li { margin: 4px 0; }
ul.outs { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
ul.outs li { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
ul.outs h3 { font: 700 16px 'Sora', sans-serif; margin: 0 0 4px; }
ul.outs p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.bonus { margin: 14px 0; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--amber) 9%, var(--panel)); border: 1px dashed var(--amber); font-size: 15px; line-height: 1.5; }
.home .hero .fine a { color: inherit; }
.teacher p { text-align: justify; hyphens: auto; }
.upsell { margin: 30px 0 8px; padding: 20px 22px; border-radius: 16px; background: color-mix(in srgb, var(--amber) 7%, var(--panel)); border: 1px solid color-mix(in srgb, var(--amber) 45%, var(--line)); }
.upsell h3 { font: 700 20px/1.3 'Sora', sans-serif; margin: 6px 0 6px; }
.upsell p { margin: 0 0 8px; }
.upsell .up-small { font-size: 15px; color: var(--muted); }
.upsell .ctas { margin-top: 12px; }
.video.demo { max-width: 720px; margin: 22px 0 6px; }
#reviews .senja-embed { margin-top: 10px; }
.hero-art .video.demo { max-width: none; margin: 0; }
.pager a.nx { background: var(--accent-soft); border-color: color-mix(in srgb, var(--amber) 55%, var(--line)); }
.pager a.nx small { color: var(--amber); }
.pager a.nx { font-weight: 600; }
.pager a.nx:hover { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 18%, var(--panel)); }