/* IQ Books Advisor: shared look for the assessment, verify and certificate pages (matches the course hub). */
:root {
    --ink: #1a1a1a; --ink-2: #3d3d3d; --ink-3: #6b6b6b; --ink-4: #6e6961;
    --cream: #faf8f5; --ivory: #f5f2ed; --paper: #edeae4; --rule: #e4dfd6;
    --plum: #80508c; --plum-deep: #6a3f75; --plum-wash: #f4eef6;
    --navy: #2c4566; --indigo: #4f4c8e; --rose: #a9475d; --amber: #995a1d;
    --display: 'Fraunces', Georgia, serif; --body: 'DM Sans', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--body); -webkit-font-smoothing: antialiased; }
html { overflow-x: clip; }
a { color: inherit; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.top { display: flex; align-items: center; gap: 12px; padding: 22px 0; }
.top-mark { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 650; font-size: 14px; letter-spacing: .01em; }
.top-mark img { width: 30px; height: 30px; }
.top-mark em { font-family: var(--display); font-style: italic; font-weight: 500; color: var(--plum); font-size: 16px; }
.top-sp { flex: 1; }
.top a.link { font: 600 13px var(--body); text-decoration: none; color: var(--ink-2); padding: 8px 13px; border-radius: 999px; }
.top a.link:hover { background: var(--ivory); }
.top a.link:focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; }

.eyebrow { font: 600 11.5px var(--body); letter-spacing: .15em; text-transform: uppercase; color: var(--plum); }
h1 { font: 500 clamp(32px, 4.4vw, 50px)/1.06 var(--display); letter-spacing: -.02em; margin: 12px 0 0; }
h1 em { font-style: italic; background: linear-gradient(100deg, var(--indigo), var(--plum) 55%, #c4576a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lede { font-size: 17px; line-height: 1.62; color: var(--ink-2); max-width: 58ch; margin: 16px 0 0; }

.btn { appearance: none; border: 1px solid transparent; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px var(--body); padding: 11px 19px; border-radius: 999px; cursor: pointer; text-decoration: none; transition: transform .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s; }
.btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; }
.btn--primary { background: var(--plum); color: #fff; box-shadow: 0 10px 24px -12px rgba(128,80,140,.9); }
.btn--primary:hover:not(:disabled) { background: var(--plum-deep); transform: translateY(-1px); }
.btn--quiet { background: #fff; color: var(--ink-2); border-color: var(--rule); }
.btn--quiet:hover:not(:disabled) { background: var(--ivory); }
.btn--text { background: transparent; color: var(--ink-2); padding-left: 12px; padding-right: 12px; }
.btn--text:hover:not(:disabled) { background: var(--ivory); }
.btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.btn svg { width: 16px; height: 16px; flex: none; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.sp { flex: 1; }

.panel { background: #fff; border: 1px solid var(--rule); border-radius: 22px; padding: 24px; box-shadow: 0 18px 40px -30px rgba(40,24,52,.35); }
.panel h2 { font: 500 24px/1.2 var(--display); margin: 0; letter-spacing: -.01em; }
.panel p { color: var(--ink-3); font-size: 14.5px; line-height: 1.6; margin: 8px 0 0; }
.note { padding: 12px 16px; border-radius: 14px; background: #f8eedf; color: var(--amber); font-size: 14px; line-height: 1.5; }
.note--plum { background: var(--plum-wash); color: var(--plum-deep); }
.mono { font-family: var(--mono); font-weight: 600; letter-spacing: .02em; }
footer { padding: 46px 0 56px; color: var(--ink-4); font-size: 13px; }

@media (max-width: 820px) { .wrap { padding: 0 16px; } .lede { font-size: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }