/* Shared styling for content pages (learn / legal). Consistent with the tool:
   white, IBM Plex Mono headings + nav, Inter body for readability, pink links, blue accents. */
:root { --ink:#15181d; --muted:#5b6470; --line:#e7e9ee; --btn:#2a4fb0; --pink:#d6006c; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:#fff; color:var(--ink); font-family:'Inter',system-ui,-apple-system,sans-serif; line-height:1.65; font-size:17px; -webkit-font-smoothing:antialiased; }
main { max-width:640px; margin:0 auto; padding:40px 20px 72px; }
::selection { background:#ffd6e9; }

.crumb { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:13px; color:var(--muted); margin-bottom:22px; }
.crumb a { color:var(--pink); }
h1 { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:26px; line-height:1.28; letter-spacing:-0.01em; font-weight:700; margin-bottom:18px; }
h2 { font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:15px; text-transform:uppercase; letter-spacing:.05em; color:var(--btn); margin:30px 0 8px; }
p { margin:0 0 14px; }
ul, ol { margin:0 0 14px 22px; }
li { margin-bottom:6px; }
a { color:var(--pink); text-underline-offset:3px; text-decoration-thickness:1.5px; }
a:hover { color:#a80055; }
a:focus-visible { outline:3px solid #2a4fb055; outline-offset:2px; }

.answer { border-left:4px solid var(--btn); background:#f5f7fb; padding:14px 16px; border-radius:0 10px 10px 0; margin-bottom:26px; }
.cta-tool { display:inline-block; margin-top:6px; background:var(--btn); color:#fff; font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:600; padding:12px 18px; border-radius:8px; text-decoration:none; }
.cta-tool:hover { background:#21408f; color:#fff; }
hr { border:none; border-top:1px dashed #c9cdd6; margin:34px 0; }

.skip { position:absolute; left:-999px; }
.skip:focus { left:12px; top:12px; background:#fff; padding:8px 12px; border:2px solid var(--btn); border-radius:8px; z-index:10; }

.articles { list-style:none; margin-left:0; }
.articles li { margin-bottom:16px; }
.articles a { font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:600; }
.soon { color:var(--muted); font-size:13px; font-family:'IBM Plex Mono',ui-monospace,monospace; margin-top:18px; }
footer { margin-top:42px; font-size:13px; color:var(--muted); font-family:'IBM Plex Mono',ui-monospace,monospace; }
footer a { color:var(--pink); }