/* ============================================================
   SKILL PAGES — css/skill-page.css
   ------------------------------------------------------------
   The static page per skill under /digital-skills/<slug>/,
   generated by scripts/generate-skill-pages.js. Sits on top of
   css/di-course.css; every colour resolves to a design-system
   token (docs/COLOR_THEME.md).
   ============================================================ */
.sp-statement { margin: 14px 0 0; color: var(--text-secondary); font-size: var(--text-body); line-height: 1.55; }
.sp-statement em { color: var(--text-primary); font-style: italic; }
.sp-label { font: var(--fw-medium) 11px/1.4 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-accent); margin: 0 0 10px; }
.sp-tldr { margin: 0 0 30px; padding: 20px 24px; border-left: 3px solid var(--accent); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.sp-tldr p { margin: 0; font-size: 18px; line-height: 1.6; color: var(--text-primary); }
.sp-section { margin: 0 0 34px; }
.sp-contrast { width: 100%; border-collapse: collapse; margin: 0 0 14px; }
.sp-contrast th { text-align: left; font: var(--fw-medium) 11px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; padding: 0 12px 8px 0; color: var(--text-tertiary); }
.sp-contrast th:first-child { color: var(--success-bright); }
.sp-contrast th:last-child { color: var(--danger-bright); }
.sp-contrast td { padding: 10px 12px 10px 0; border-top: 1px solid var(--border-subtle); vertical-align: top; line-height: 1.5; color: var(--text-primary); width: 50%; }
.sp-looks { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.sp-looks strong { color: var(--text-primary); font-weight: var(--fw-medium); }
.sp-list { margin: 0; padding-left: 20px; }
.sp-list li { margin: 0 0 10px; line-height: 1.6; color: var(--text-primary); }
.sp-method { margin: 0; padding: 0; list-style: none; }
.sp-method > li { padding: 12px 0; border-top: 1px solid var(--border-subtle); }
.sp-method > li:first-child { border-top: 0; padding-top: 0; }
.sp-move { display: block; font: var(--fw-medium) 11px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-tertiary); margin: 0 0 4px; }
.sp-method p, .sp-method ol { margin: 0; line-height: 1.6; color: var(--text-primary); }
.sp-method ol { padding-left: 20px; }
.sp-quote { margin: 0 0 34px; padding: 0 0 0 18px; border-left: 2px solid var(--border-strong); }
.sp-quote p { margin: 0 0 6px; font-size: 19px; line-height: 1.5; color: var(--text-primary); }
.sp-quote cite { font-style: normal; color: var(--text-tertiary); font-size: var(--text-body-sm); }
.sp-cta { margin: 0 0 8px; }
.sp-cta .btn { display: inline-block; }
#sp-keep { max-width: 560px; margin: 34px auto 0; padding-top: 22px; border-top: 1px solid var(--border-subtle); }
#sp-keep .subscribe-form { margin: 0; }