/* Cardinal Review site.
   Light dithered hero, a soft gradient into plain black pages with a few faint dither specks,
   mono tags and italic serif accents. Blue, black and white; red only for severity. */
@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/inter-600.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/inter-700.woff2') format('woff2'); }
@font-face { font-family: 'Instrument Serif'; font-weight: 400; font-style: italic; font-display: swap; src: url('../fonts/serif-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('../fonts/jbmono-400.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 700; font-style: normal; font-display: swap; src: url('../fonts/jbmono-700.woff2') format('woff2'); }

:root {
    --bg: #050608; --panel: #0b0d11; --panel2: #10141a; --line: #1a1f27; --line2: #262d37;
    --text: #eef1f5; --muted: #9ba4b0; --dim: #5f6875;
    --blue: #4d8dff; --blue-soft: #8fb6ff; --blue-deep: #1d4fd7; --ice: #dbe8f7;
    --red: #e5483f; --amber: #f2b45a; --gold: #f2c766; --green: #5fd08a; --cyan: #7cc8f0;
    --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
    --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
    --wrap: 1120px; --gutter: 20px;
    color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
img, canvas { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--blue-soft); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--blue); color: #fff; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -0.025em; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(36px, 5.6vw, 64px); }
h2 { font-size: clamp(28px, 3.6vw, 42px); }
h3 { font-size: 19px; letter-spacing: -0.01em; }
em, .serif { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
h1 em, h2 em { font-size: 1.08em; }
p { margin: 0 0 1em; }
code, .mono { font-family: var(--mono); font-size: .9em; }
code { background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; overflow-wrap: anywhere; }
pre { font-family: var(--mono); font-size: 13px; line-height: 1.55; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; overflow-x: auto; margin: 0 0 1em; }
pre code { background: none; border: 0; padding: 0; }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.gold { color: var(--gold); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; color: #000; padding: 8px 12px; border-radius: 6px; z-index: 50; }
.skip:focus { left: 8px; }
[hidden] { display: none !important; }

/* ---- Header: one floating dark bar on every page, so it reads the same over light and dark -- */
.top { position: sticky; top: 0; z-index: 30; height: 68px; padding: 12px var(--gutter) 0; pointer-events: none; }
.top .wrap { pointer-events: auto; position: relative; display: flex; align-items: center; gap: 24px; height: 56px; max-width: 1100px; padding: 0 8px 0 16px;
    background: rgba(13, 16, 21, .88); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
    -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 14px 34px -16px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .05); }
.brand { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 26px; height: 26px; }
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav a { color: #c9d0da; padding: 8px 12px; border-radius: 8px; font-size: 15px; font-weight: 400; transition: color .15s, background-color .15s; }
.nav a:hover { color: #fff; background: rgba(255, 255, 255, .06); text-decoration: none; }
.nav a[aria-current]:not(.btn) { color: #fff; background: rgba(255, 255, 255, .09); font-weight: 600; }
.nav .btn { margin-left: 8px; }
.nav a.btn-primary, .nav a.btn-primary:hover, .nav a.btn-primary[aria-current] { color: #050608; font-weight: 600; }
.nav-toggle { display: none; margin-left: auto; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); color: #fff; border-radius: 8px; padding: 7px 14px; font: 600 14px var(--sans); cursor: pointer; }
@media (max-width: 860px) {
    .nav-toggle { display: block; }
    .nav { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 8px;
        background: #0d1015; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .7); }
    .nav a { padding: 11px 12px; }
    .nav.open { display: flex; }
    .nav .btn { margin: 6px 0 0; }
}
@media (max-width: 480px) { .top { padding: 10px 12px 0; height: 66px; } }

/* ---- Buttons, tags, chips ------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 18px; border-radius: 6px; border: 1px solid var(--line2); background: transparent; color: var(--text); font: 500 15px var(--sans); cursor: pointer; text-align: center; transition: background-color .15s, border-color .15s, color .15s; }
.btn:hover { text-decoration: none; border-color: #4a5462; background: rgba(255, 255, 255, .03); }
.btn .arrow { font-family: var(--mono); transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn-primary { background: #fff; border-color: #fff; color: #050608; }
.btn-primary:hover { background: var(--ice); border-color: var(--ice); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: #191206; }
.btn-gold:hover { background: #f6d68f; border-color: #f6d68f; }
.btn-small { padding: 7px 13px; font-size: 14px; }
.btn.is-disabled { opacity: .5; cursor: not-allowed; }
.tag { display: inline-flex; align-items: center; gap: 8px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ice); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14); padding: 7px 10px; border-radius: 4px; }
.tag::before { content: ""; width: 6px; height: 6px; background: var(--blue); }
.tag.light { color: #1d2733; background: rgba(255, 255, 255, .7); border-color: rgba(20, 35, 55, .14); }
.chip { display: inline-block; font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; border: 1px solid var(--line2); color: var(--muted); white-space: nowrap; }
.chip-core { color: var(--blue-soft); border-color: rgba(143, 182, 255, .35); }
.chip-pro { color: var(--gold); border-color: rgba(242, 199, 102, .35); }
.chip-lite { color: var(--green); border-color: rgba(95, 208, 138, .3); }
.chip-reporter { color: var(--cyan); border-color: rgba(124, 200, 240, .35); }
.eyebrow { font: 500 11.5px var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--blue-soft); margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: currentColor; opacity: .7; }
.eyebrow.gold { color: var(--gold); }
.center .eyebrow { justify-content: center; }

/* ---- Light hero ------------------------------------------------------------------------- */
.hero-light { position: relative; overflow: hidden; background: #fff; color: #0b0f14; min-height: min(92vh, 900px); display: grid; place-items: center; margin-top: -68px; padding: 120px 0 90px; isolation: isolate; }
.hero-blob { position: absolute; z-index: -2; left: 50%; top: 52%; width: min(1180px, 96vw); height: min(640px, 78vh); transform: translate(-50%, -50%); border-radius: 50%;
    background:
        radial-gradient(closest-side, #1a2026 0%, #232c35 34%, #3e5366 56%, #6fa3d6 74%, #b8dcf2 88%, rgba(255, 255, 255, 0) 100%);
    filter: blur(38px); animation: breathe 14s ease-in-out infinite; }
.hero-blob::before, .hero-blob::after { content: ""; position: absolute; border-radius: 50%; filter: blur(30px); }
.hero-blob::before { left: -6%; top: 22%; width: 34%; height: 58%; background: radial-gradient(closest-side, rgba(92, 160, 230, .75), rgba(92, 160, 230, 0)); }
.hero-blob::after { right: -5%; top: 18%; width: 30%; height: 62%; background: radial-gradient(closest-side, rgba(120, 190, 240, .7), rgba(120, 190, 240, 0)); }
@keyframes breathe { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.035, .98); } }
.hero-light canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-copy { position: relative; text-align: center; max-width: 820px; padding: 0 var(--gutter); color: #fff; }
.hero-copy h1 { margin: 22px 0 18px; font-weight: 500; letter-spacing: -0.035em; }
.hero-copy h1 em { color: #d6e7fb; }
.hero-copy p { color: rgba(236, 242, 249, .82); font-size: 18px; max-width: 600px; margin: 0 auto; }
.hero-copy .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.hero-copy .btn:not(.btn-primary) { color: #fff; border-color: rgba(255, 255, 255, .28); }
.hero-copy .btn:not(.btn-primary):hover { background: rgba(255, 255, 255, .08); }
.bits { position: absolute; inset: 0; z-index: -1; pointer-events: none; font: 400 11px var(--mono); color: #6f8aa6; }
.bits span { position: absolute; animation: blink 6s steps(2, jump-none) infinite; }
.bits span:nth-child(2n) { animation-delay: -2s; color: #a9c6e6; }
.bits span:nth-child(3n) { animation-delay: -4s; }
@keyframes blink { 0%, 70% { opacity: .9; } 85% { opacity: .2; } }
.hero-foot { position: absolute; left: 0; right: 0; bottom: 22px; display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; font: 500 11.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #6b7684; padding: 0 var(--gutter); }
.hero-foot span::before { content: "■ "; color: var(--blue); font-size: 9px; }
@media (max-width: 640px) {
    .hero-blob { height: 80vh; width: 170vw; background: radial-gradient(closest-side, #1a2026 0%, #222a33 48%, #33414f 64%, #5f93c8 80%, #b8dcf2 92%, rgba(255, 255, 255, 0) 100%); }
    .hero-foot { display: none; }
}

/* White to dark: a plain eased gradient with a cool middle, no dots. */
.fade { height: 340px; background: linear-gradient(180deg, #ffffff 0%, #feffff 5%, #fcfdfe 10%, #fafbfd 15%, #f6f8fb 20%, #f1f5f9 25%, #ecf1f7 30%, #e5ecf5 35%, #ced8e4 40%, #b6c3d3 45%, #9eaec2 50%, #7f8ea1 55%, #5e6b7b 60%, #3f4957 65%, #28303b 70%, #1e252d 75%, #161a21 80%, #0f1216 85%, #0a0b0f 90%, #06070a 95%, #050608 100%); }
@media (max-width: 640px) { .fade { height: 220px; } }

/* ---- Dark pages: plain black with a few thin, far-apart dither specks (dither.js "ambient") ---- */
.ambient { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }
.section > .wrap { padding-top: 120px; padding-bottom: 120px; }
.section + .section > .wrap { padding-top: 40px; }
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: 16px; }
.lead { font-size: 18px; line-height: 1.6; color: var(--muted); }
.page-head > .wrap { padding-top: 96px; padding-bottom: 24px; }
.page-head .lead { max-width: 620px; }
.page-head h1 { font-size: clamp(34px, 4.6vw, 54px); font-weight: 500; letter-spacing: -0.035em; }
.page-head + .section > .wrap { padding-top: 48px; }
.guide-wrap { display: block; }
/* The promo images are 1400px wide with their own rounded border (radius 30px at full size), so the
   image is clipped to that same radius at whatever width it is shown, and no frame is drawn around it. */
figure.promo { margin: 22px 0; container-type: inline-size; }
figure.promo img, .tour-shot img { border-radius: calc(100cqw * 30 / 1400); }
figure.promo .shot-link { display: block; cursor: zoom-in; }
@media (max-width: 720px) { .section > .wrap { padding-top: 80px; padding-bottom: 80px; } .section + .section > .wrap { padding-top: 24px; } .page-head > .wrap { padding-top: 64px; } }

.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } }
.card { padding: 28px; position: relative; background: rgba(13, 16, 21, .72); border: 1px solid var(--line); border-radius: 14px; }
.card h3 { margin-top: 14px; }
.card p:last-child, .card ul:last-child { margin-bottom: 0; }
.product { display: flex; flex-direction: column; overflow: hidden; }
.product .cover { margin: -28px -28px 22px; border-bottom: 1px solid var(--line); overflow: hidden; }
.product .price { font: italic 400 38px/1 var(--serif); margin: 6px 0 14px; color: #fff; }
.product .price small { font: 400 13px var(--sans); color: var(--muted); font-style: normal; }
.product ul { padding-left: 18px; color: var(--muted); margin: 0 0 20px; font-size: 15px; }
.product li { margin-bottom: 5px; }
.product .actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; }
.product.featured { border-color: rgba(77, 141, 255, .45); }
.product.pro { border-color: rgba(242, 199, 102, .3); }
.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
.ticks li { position: relative; padding-left: 22px; margin-bottom: 8px; }
.ticks li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 6px; height: 6px; border-radius: 1px; background: var(--blue); }
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0 0 1em; }
.steps > li { counter-increment: step; position: relative; padding-left: 44px; margin-bottom: 18px; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border: 1px solid var(--line2); color: var(--blue-soft); font: 500 12px/24px var(--mono); text-align: center; border-radius: 50%; }
.note { border: 1px solid var(--line2); background: rgba(13, 16, 21, .72); padding: 16px 20px; color: var(--muted); border-radius: 12px; }
.note strong { color: var(--text); }
.cta { text-align: center; }
.cta .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.spaced { margin-top: 16px; }

/* ---- Home: text beside a small live illustration ------------------------------------------ */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 72px; align-items: center; }
.split.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.flip > :first-child { order: 2; }
@media (max-width: 920px) { .split, .split.flip { grid-template-columns: minmax(0, 1fr); gap: 40px; } .split.flip > :first-child { order: 0; } }
.split h2 { margin-bottom: 16px; }
.points { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 18px; }
.points li { display: grid; grid-template-columns: 26px 1fr; gap: 12px; color: var(--muted); }
.points li strong { display: block; color: var(--text); font-weight: 600; }
.points li::before { content: ""; width: 8px; height: 8px; margin: 8px 0 0 4px; border-radius: 2px; background: var(--blue); box-shadow: 0 0 0 4px rgba(77, 141, 255, .14); }
.stepper { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 6px; counter-reset: st; }
.stepper li { counter-increment: st; display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 12px 14px; border-radius: 10px; color: var(--muted); transition: background-color .3s, color .3s; }
.stepper li::before { content: counter(st); width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line2); font: 500 12px/24px var(--mono); text-align: center; color: var(--dim); transition: border-color .3s, color .3s, background-color .3s; }
.stepper li strong { display: block; color: var(--text); font-weight: 600; }
.stepper li code { display: inline-block; margin-top: 6px; white-space: nowrap; color: var(--text); }
.stepper li.on { background: rgba(255, 255, 255, .035); color: var(--text); }
.stepper li.on::before { border-color: var(--blue); color: #fff; background: var(--blue); }

/* Windows drawn after the real interface (colours taken from the promo screens) */
.win { background: #16191e; border: 1px solid #2c333d; border-radius: 12px; overflow: hidden; box-shadow: 0 40px 90px -45px rgba(0, 0, 0, .95); }
.win-bar { position: relative; display: flex; align-items: center; gap: 7px; height: 40px; padding: 0 14px; background: #1a1e24; border-bottom: 1px solid #262d36; }
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.win-bar i:nth-child(2) { background: #febc2e; }
.win-bar i:nth-child(3) { background: #28c840; }
.win-bar .addr, .win-bar .label { font: 400 11.5px var(--mono); color: #8b95a1; background: #232931; border-radius: 6px; padding: 4px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-bar .addr { margin-left: 10px; min-width: 0; }
.win-bar .label { position: absolute; left: 50%; transform: translateX(-50%); }
.exnote { margin: 10px 2px 0; text-align: right; font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.log { margin: 0; padding: 16px 18px; border: 0; border-radius: 0; background: none; font: 12.5px/1.8 var(--mono); color: #d3d8de; white-space: pre-wrap; word-break: break-word; }
.log .ln { display: block; }
.log .d { color: #7d8792; }
.log .r { color: #ff6b6b; }
.log .k { color: #ff7a66; }
.log .g { color: #4ade80; }
.log .y { color: #fbbf24; }
.log .cmd { color: #fff; }
.term .log { min-height: 280px; }

/* The Cardinal Review tab, as it looks in the panel */
.ui { background: #2b333d; font-size: 14px; color: #e8ecf1; }
.ui-tabs { display: flex; gap: 2px; padding: 0 14px; background: #262d36; border-bottom: 1px solid #36404b; overflow: hidden; }
.ui-tabs span { padding: 12px 10px 11px; color: #9aa4b0; white-space: nowrap; box-shadow: inset 0 -2px 0 transparent; transition: color .3s, box-shadow .3s; }
.ui-tabs span.on { color: #fff; box-shadow: inset 0 -2px 0 #3b82f6; }
.ui-tabs.flat { background: none; border: 0; padding: 0; margin-bottom: 14px; gap: 6px; }
.ui-tabs.flat span { padding: 7px 12px; border-radius: 8px; box-shadow: none; }
.ui-tabs.flat span:first-child { background: #36404b; color: #fff; }
.ui-btn { display: inline-block; flex: none; font: 600 12.5px var(--sans); padding: 7px 12px; border-radius: 7px; background: #205ce0; color: #fff; transition: transform .15s, background-color .15s; }
.ui-btn.press { transform: scale(.94); background: #3b74f0; }
.ui-stage { display: grid; padding: 16px; min-height: 340px; }
.ui-view { grid-area: 1 / 1; transition: opacity .45s, transform .45s; }
.v-console { display: flex; flex-direction: column; gap: 12px; }
.ui-alert { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #36404b; border: 1px solid #434d59; border-left: 3px solid #ef4444; border-radius: 10px; transition: opacity .4s, transform .4s; }
.ui-alert > div { flex: 1; min-width: 0; }
.ui-alert b { display: block; font-weight: 600; color: #fff; }
.ui-alert small { color: #9aa4b0; font-size: 12.5px; }
.ui-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: #ef4444; }
.ui-log { flex: 1; margin: 0; padding: 14px 16px; background: #16191e; border: 0; border-radius: 10px; font: 12.5px/1.8 var(--mono); color: #d3d8de; white-space: pre-wrap; word-break: break-word; }
.ui-log .ln { display: block; transition: opacity .35s; }
.ui-log .d { color: #7d8792; }
.ui-log .r { color: #ff6b6b; }
.ui-log mark { background: rgba(239, 68, 68, .22); color: #fecaca; border-radius: 3px; padding: 0 3px; }
.ui-card { background: #36404b; border: 1px solid #434d59; border-left: 3px solid #ef4444; border-radius: 12px; overflow: hidden; }
.ui-card-head { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; }
.ui-card h4 { margin: 0 0 8px; font-size: 17px; font-weight: 600; color: #fff; letter-spacing: -0.01em; }
.ui-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(239, 68, 68, .16); }
.ui-icon i { position: relative; width: 18px; height: 18px; border: 2px solid #ef4444; border-radius: 50%; }
.ui-icon i::before, .ui-icon i::after { content: ""; position: absolute; left: 50%; width: 2px; margin-left: -1px; background: #ef4444; border-radius: 1px; }
.ui-icon i::before { top: 3px; height: 6px; }
.ui-icon i::after { bottom: 3px; height: 2px; }
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-chips span, .ui-kicker .c-ok { font-size: 12.5px; padding: 2px 9px; border-radius: 6px; }
.c-main { background: #485260; color: #dfe4ea; }
.c-main::before { content: "\25CE  "; }
.c-crit { background: #ef4444; color: #fff; font-weight: 600; }
.c-ok { border: 1px solid rgba(34, 197, 94, .7); color: #4ade80; }
.c-ok::before { content: "\2713  "; }
.ui-fix { border-top: 1px solid #4a5462; padding: 14px 18px 18px; }
.ui-fix-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ui-fix-head b { font-weight: 600; color: #fff; margin-right: auto; }
.ui-count { color: #9aa4b0; font-size: 13px; }
.ui-prog { width: 90px; height: 6px; border-radius: 3px; background: #4a5461; overflow: hidden; }
.ui-prog i { display: block; height: 100%; width: 0; background: #22c55e; border-radius: 3px; transition: width .5s ease; }
.ui-list { list-style: none; margin: 0; padding: 0; border: 1px solid #46505c; border-radius: 10px; overflow: hidden; counter-reset: fix; }
.ui-list li { counter-increment: fix; display: flex; gap: 12px; align-items: center; padding: 11px 14px; background: #313a45; color: #e8ecf1; transition: background-color .4s, color .4s; }
.ui-list li + li { border-top: 1px solid #46505c; }
.ui-list li::after { content: none; }
.ui-list li i { flex: none; position: relative; width: 18px; height: 18px; border: 1.5px solid #8893a0; border-radius: 4px; transition: background-color .3s, border-color .3s; }
.ui-list li.tick { background: #2f4140; color: #7f8a95; text-decoration: line-through; }
.ui-list li.tick i { background: #22c55e; border-color: #22c55e; }
.ui-list li.tick i::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
/* Demo states: data-view on [data-crdemo] */
[data-crdemo] .v-finding { opacity: 0; transform: translateY(10px); pointer-events: none; }
[data-crdemo][data-view="finding"] .v-console { opacity: 0; transform: translateY(-8px); }
[data-crdemo][data-view="finding"] .v-finding { opacity: 1; transform: none; }
.js [data-crdemo] .ui-alert { opacity: 0; transform: translateY(-6px); }
.js [data-crdemo] .ui-alert.in { opacity: 1; transform: none; }
.js [data-crdemo] .ui-log .ln { opacity: 0; }
.js [data-crdemo] .ui-log .ln.in { opacity: 1; }
.no-anim [data-crdemo] .ui-alert, .no-anim [data-crdemo] .ui-log .ln { opacity: 1; transform: none; }
@media (max-width: 560px) { .ui-tabs .opt { display: none; } .ui-stage { padding: 12px; } .ui-fix-head { flex-wrap: wrap; } }

/* Tour of the real screens */
.tour-tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.tour-tabs button { position: relative; overflow: hidden; font: 500 14px var(--sans); color: #c9d0da; background: rgba(255, 255, 255, .03); border: 1px solid var(--line2); border-radius: 999px; padding: 9px 16px; cursor: pointer; transition: color .2s, background-color .2s, border-color .2s; }
.tour-tabs button:hover { color: #fff; border-color: #3a4452; }
.tour-tabs button[aria-selected="true"] { color: #050608; background: #fff; border-color: #fff; font-weight: 600; }
.tour-tabs button i { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--blue); }
.tour-tabs button[aria-selected="true"] i { animation: tour-progress var(--tour-ms, 7s) linear both; }
.tour.paused .tour-tabs button i { animation-play-state: paused; }
@keyframes tour-progress { to { width: 100%; } }
.tour-frame { display: grid; align-items: start; max-width: 1000px; margin: 0 auto; container-type: inline-size; }
.tour-shot img { box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .9); }
.tour-shot { grid-area: 1 / 1; margin: 0; transition: opacity .5s ease; }
.js .tour-shot { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.js .tour-shot.on { opacity: 1; visibility: visible; transition: opacity .5s ease; }
html:not(.js) .tour-tabs { display: none; }
.tour-shot .shot-link { display: block; cursor: zoom-in; }
.phone-only { display: none; }
@media (max-width: 640px) { .phone-only { display: inline; color: var(--muted); } .tour-tabs button { padding: 7px 12px; font-size: 13.5px; } }
html:not(.js) .tour-frame { display: block; }
.center { text-align: center; }

/* Panel mock for the install steps */
.panel-mock { padding: 18px; min-height: 300px; position: relative; }
.pm-title { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; color: #fff; font-weight: 600; font-size: 15px; }
.pm-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #313a45; border: 1px solid #3f4955; border-radius: 9px; margin-bottom: 8px; color: #9aa4b0; }
.pm-row b { color: #fff; font-weight: 500; }
.pm-row .pill { margin-left: auto; font: 400 11px var(--mono); color: #8b95a1; }
.pm-dialog { position: absolute; left: 50%; top: 50%; width: min(340px, 88%); transform: translate(-50%, -46%); background: #36404b; border: 1px solid #4a5462; border-radius: 12px; padding: 18px; box-shadow: 0 30px 80px -20px #000; opacity: 0; transition: opacity .35s, transform .35s; }
.pm-dialog h5 { margin: 0 0 12px; font-size: 15px; color: #fff; }
.pm-file { font: 12px var(--mono); padding: 10px 12px; border: 1px dashed #5a6573; border-radius: 8px; color: #dbe3ec; background: #2b333d; margin-bottom: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-check { display: flex; align-items: center; gap: 10px; color: #c8d0d9; margin-bottom: 14px; }
.pm-check i { width: 16px; height: 16px; border: 1.5px solid #8893a0; border-radius: 4px; transition: background-color .3s, border-color .3s; }
.panel-mock .pm-page { transition: opacity .35s; }
.panel-mock[data-state="1"] .pm-dialog, .panel-mock[data-state="2"] .pm-dialog { opacity: 1; transform: translate(-50%, -50%); }
.panel-mock[data-state="1"] .pm-page, .panel-mock[data-state="2"] .pm-page { opacity: .3; }
.panel-mock[data-state="2"] .pm-check i { background: #3b82f6; border-color: #3b82f6; }
.panel-mock .pm-server { display: none; }
.panel-mock[data-state="3"] .pm-page { display: none; }
.panel-mock[data-state="3"] .pm-server { display: block; animation: pm-in .45s ease both; }
.panel-mock[data-state="3"] .pm-dialog { transition: none; }
@keyframes pm-in { from { opacity: 0; transform: translateY(6px); } }
.ui-card.small .ui-card-head { padding: 14px 16px; }
.ui-card.small h4 { font-size: 15.5px; margin-bottom: 4px; }
.ui-kicker { margin: 0 0 4px; font: 700 11.5px var(--sans); letter-spacing: .06em; text-transform: uppercase; color: #ef4444; display: flex; align-items: center; gap: 8px; }
.ui-kicker .c-ok { font: 500 11.5px var(--sans); letter-spacing: 0; text-transform: none; padding: 1px 8px; }
.ui-sub { margin: 0; color: #9aa4b0; font-size: 13px; }
.pm-health { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px 16px; background: #36404b; border: 1px solid #434d59; border-left: 3px solid #22c55e; border-radius: 12px; }
.pm-health > b { font-size: 26px; font-weight: 700; color: #fff; }
.pm-health > div { flex: 1; min-width: 0; }
.pm-health strong { display: block; color: #fff; font-weight: 600; font-size: 14px; }
.pm-health small { color: #9aa4b0; font-size: 12.5px; }
.pm-tag { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: rgba(34, 197, 94, .15); color: #4ade80; }
@media (max-width: 480px) { .ui-tabs.flat .opt { display: none; } }

/* The report pipeline */
.pipe { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; list-style: none; padding: 0; margin: 0; }
.pipe::before { content: ""; position: absolute; left: 10%; right: 10%; top: 23px; height: 1px; background: linear-gradient(90deg, var(--line2), #33404f, var(--line2)); }
.pipe::after { content: ""; position: absolute; top: 20px; left: 10%; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(77, 141, 255, .25); animation: travel 6s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes travel { 0% { left: 10%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { left: calc(90% - 7px); opacity: 0; } }
.pipe li { position: relative; text-align: center; color: var(--muted); font-size: 14.5px; }
.pipe li b { display: block; color: var(--text); font-weight: 600; margin: 14px 0 4px; font-size: 15px; }
.pipe .dot { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto; border-radius: 50%; background: #0c0f14; border: 1px solid var(--line2); font: 500 13px var(--mono); color: var(--blue-soft); }
@media (max-width: 860px) {
    .pipe { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .pipe::before { left: 23px; right: auto; top: 10px; bottom: 10px; width: 1px; height: auto; background: var(--line2); }
    .pipe::after { display: none; }
    .pipe li { display: grid; grid-template-columns: 46px 1fr; gap: 16px; text-align: left; align-items: center; }
    .pipe li b { margin: 0 0 2px; }
}
/* Report cleaning: values swap from the original to what Cardinal Cloud receives */
.split.clean { margin-top: 64px; align-items: start; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.split.clean h3 { font-size: 24px; margin: 6px 0 12px; }
@media (max-width: 920px) { .split.clean { grid-template-columns: minmax(0, 1fr); margin-top: 48px; } }
.term .log.redact { min-height: 0; }
.redact .sv { border-radius: 3px; padding: 0 3px; background: rgba(239, 68, 68, .2); color: #fecaca; transition: background-color .35s, color .35s; }
.redact .sv.clean { background: rgba(34, 197, 94, .16); color: #86efac; }
.modes { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 8px; }
.modes li { display: grid; grid-template-columns: 74px 1fr; gap: 12px; align-items: baseline; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(13, 16, 21, .8); color: var(--muted); font-size: 14.5px; }
.modes li > code { justify-self: start; color: var(--text); }
.modes li:nth-child(1) > code { color: #4ade80; }
.modes li:nth-child(2) > code { color: var(--blue-soft); }
.modes li:nth-child(3) > code { color: var(--gold); }
.modes li:nth-child(4) > code { color: #ff8a80; }
.reward { margin-top: 16px; display: flex; align-items: center; gap: 18px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 12px; background: rgba(11, 13, 17, .8); color: var(--muted); }
.reward p { margin: 0; flex: 1; }
.reward a { white-space: nowrap; }
.reward .chip { flex: none; color: var(--gold); border-color: rgba(242, 199, 102, .35); }
@media (max-width: 720px) { .reward { flex-direction: column; align-items: flex-start; gap: 10px; } }

/* Pricing table */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; min-width: 560px; }
th, td { text-align: left; padding: 13px 18px; border-bottom: 1px solid var(--line); vertical-align: top; }
thead th { font: 500 11px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); background: var(--panel); }
tbody tr:hover td { background: rgba(255, 255, 255, .015); }
tbody tr:last-child td { border-bottom: 0; }
td.y { color: var(--ice); }
td.y::before { content: "■ "; color: var(--blue); font-size: 10px; }
td.n { color: var(--dim); }

/* Gallery */
.filters { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: 28px; border: 1px solid var(--line2); width: fit-content; max-width: 100%; border-radius: 6px; overflow: hidden; }
.filters button { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: transparent; border: 0; border-left: 1px solid var(--line2); padding: 9px 14px; cursor: pointer; }
.filters button:first-child { border-left: 0; }
.filters button[aria-pressed="true"] { color: #050608; background: #fff; }
.gallery { columns: 3 320px; column-gap: 18px; }
.shot { break-inside: avoid; margin: 0 0 18px; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; transition: border-color .2s, transform .2s; }
.shot:hover { border-color: #3a4554; }
.shot-link { display: block; cursor: zoom-in; }
.shot figcaption { padding: 12px 14px 14px; font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; border-top: 1px solid var(--line); }
.shot figcaption .muted { flex-basis: 100%; }
.gallery.compact { columns: 3 280px; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(3, 4, 6, .95); display: none; flex-direction: column; }
.lightbox.open { display: flex; }
.lightbox .lb-bar { background: var(--bg); display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.lightbox .lb-caption { flex: 1; color: var(--muted); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lightbox .lb-body { flex: 1; overflow: auto; padding: 20px; container-type: inline-size; }
.lightbox img { margin: 0 auto; max-width: min(1400px, 100%); border-radius: calc(min(1400px, 100cqw) * 30 / 1400); }
.lightbox button { font: 500 13px var(--mono); background: var(--panel2); color: var(--text); border: 1px solid var(--line2); border-radius: 5px; padding: 6px 12px; cursor: pointer; }
body.lb-open { overflow: hidden; }

/* Demo */
.demo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
@media (max-width: 960px) { .demo { grid-template-columns: minmax(0, 1fr); } }
.demo textarea { width: 100%; min-height: 380px; resize: vertical; background: #07090c; color: var(--text); border: 1px solid var(--line2); border-radius: 8px; padding: 14px; font: 12.5px/1.6 var(--mono); }
.demo textarea:focus { outline: none; border-color: var(--blue); }
.demo .examples { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.demo .row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.results { min-height: 200px; }
.summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.finding { background: var(--panel); border: 1px solid var(--line); border-left: 2px solid var(--dim); border-radius: 0 8px 8px 0; padding: 16px 18px; margin-bottom: 12px; }
.finding.sev-critical { border-left-color: var(--red); }
.finding.sev-error { border-left-color: #ff7a6e; }
.finding.sev-warning { border-left-color: var(--amber); }
.finding.sev-info { border-left-color: var(--blue); }
.finding h3 { font-size: 17px; margin: 6px 0 8px; }
.finding .meta { display: flex; flex-wrap: wrap; gap: 6px; }
.finding ol { margin: 8px 0 0; padding-left: 20px; color: var(--muted); }
.finding pre { margin: 12px 0 0; font-size: 12px; padding: 10px 12px; }
.finding .main { font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-soft); }
.sev { font: 700 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 3px; border: 1px solid var(--line2); }
.sev-critical .sev, .sev.sev-critical { color: #ff8f86; border-color: rgba(229, 72, 63, .5); }
.sev-error .sev, .sev.sev-error { color: #ff9a8f; border-color: rgba(255, 122, 110, .35); }
.sev-warning .sev, .sev.sev-warning { color: var(--amber); border-color: rgba(242, 180, 90, .4); }
.sev-info .sev, .sev.sev-info { color: var(--blue-soft); border-color: rgba(143, 182, 255, .4); }
.empty { border: 1px dashed var(--line2); border-radius: 8px; padding: 28px; color: var(--muted); text-align: center; }
.library input[type="search"], .library select { background: var(--panel); color: var(--text); border: 1px solid var(--line2); border-radius: 6px; padding: 10px 14px; font: 15px var(--sans); }
.library input[type="search"] { width: 100%; max-width: 420px; }
.library input:focus, .library select:focus { outline: none; border-color: var(--blue); }
.library .lib-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.library .more { margin-top: 12px; }
.rule-list { border: 1px solid var(--line); }
.rule-list details { border-top: 1px solid var(--line); padding: 0 16px; }
.rule-list details:first-child { border-top: 0; }
.rule-list summary { cursor: pointer; padding: 12px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.rule-list summary:hover strong { color: #fff; }
.rule-list details[open] { background: var(--panel); }
.rule-list details > div { padding-bottom: 14px; color: var(--muted); font-size: 15px; }
.rule-list ol { padding-left: 20px; }

/* Downloads */
.dl-card { padding: 0 0 8px; }
.dl-card h3 { font-size: 24px; font-weight: 500; }
.dl-card .ver { font: italic 400 22px var(--serif); color: var(--blue-soft); margin-left: 6px; letter-spacing: 0; }
.dl-card .btn { margin: 10px 0 18px; max-width: 100%; overflow-wrap: anywhere; }
.dl-meta { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 13px; border-top: 1px solid var(--line); padding-top: 14px; }
.dl-meta dt { color: var(--dim); font: 500 11px/1.8 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.dl-meta dd { margin: 0; color: var(--muted); }
.dl-meta .sha { overflow-wrap: anywhere; font-size: 12px; }

/* Guides */
.guide { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 48px; padding-top: 56px; padding-bottom: 80px; }
.toc { position: sticky; top: 92px; align-self: start; font-size: 14px; }
.toc ol { list-style: none; padding: 0; margin: 0; border-left: 1px solid var(--line); counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: block; padding: 6px 12px; color: var(--muted); }
.toc a::before { content: "0" counter(toc) "  "; font: 500 11px var(--mono); color: var(--dim); white-space: pre; }
.toc a:hover { color: var(--text); text-decoration: none; }
.guide article > section { padding-bottom: 36px; margin-bottom: 36px; border-bottom: 1px solid var(--line); }
.guide article > section:last-child { border-bottom: 0; }
.guide article h2 { font-size: 30px; font-weight: 500; }
.guide article h3 { margin-top: 1.4em; }
.guide article ul { color: var(--muted); padding-left: 20px; }
@media (max-width: 860px) { .guide { grid-template-columns: minmax(0, 1fr); } .toc { position: static; } }

/* FAQ */
.faq { max-width: 820px; }
.faq h2 { font-size: 13px; font: 500 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--blue-soft); margin: 48px 0 8px; }
.faq h2:first-child { margin-top: 0; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 18px 32px 18px 0; font-weight: 500; font-size: 17px; position: relative; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 15px; font: 400 22px var(--mono); color: var(--dim); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--blue-soft); }
.faq details > div { padding: 0 0 20px; color: var(--muted); }

/* Error pages */
.error-page { min-height: 72vh; display: grid; place-items: center; text-align: center; padding: 80px 20px; }
.error-page .code { font: italic 400 clamp(110px, 20vw, 220px)/.9 var(--serif); color: #fff; margin-bottom: 14px; }
.error-page h1 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 500; }
.error-page .panel { padding: 0; }
.error-page .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px; }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 56px 0 40px; background: rgba(5, 6, 8, .6); color: var(--dim); font-size: 14px; }
.foot .wrap { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; }
.foot h4 { margin: 0 0 12px; color: var(--muted); font: 500 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin-bottom: 7px; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }
.foot-about { margin-top: 14px; }
.foot-word { font: italic 400 clamp(64px, 14vw, 180px)/.8 var(--serif); color: transparent; -webkit-text-stroke: 1px #20262f; text-align: center; margin: 40px 0 -8px; letter-spacing: -0.02em; user-select: none; }
@media (max-width: 760px) { .foot .wrap { grid-template-columns: 1fr 1fr; } }

/* Reveal on scroll (site.js adds .in); without JS everything is visible. */
.js .reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .hero-blob, .bits span, .pm-server { animation: none !important; }
    .tour-tabs button i { display: none; }
    .pipe::after { display: none; }
    html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
.bits span:nth-child(1) { left: 14%; top: 30%; }
.bits span:nth-child(2) { left: 24%; top: 66%; }
.bits span:nth-child(3) { left: 71%; top: 22%; }
.bits span:nth-child(4) { left: 83%; top: 46%; }
.bits span:nth-child(5) { left: 63%; top: 78%; }
.bits span:nth-child(6) { left: 8%; top: 52%; }
.bits span:nth-child(7) { left: 41%; top: 82%; }
.bits span:nth-child(8) { left: 90%; top: 70%; }
@media (max-width: 640px) { .bits { display: none; } }

/* ---- Error library (/errors) --------------------------------------------------------------- */
var { font-family: var(--mono); font-style: normal; font-size: .9em; color: var(--blue-soft); }
var::before { content: '\2039'; opacity: .6; }
var::after { content: '\203A'; opacity: .6; }
.more-link { margin-top: 24px; font-weight: 500; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 500 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.crumbs [aria-current] { color: var(--muted); }
.err-index { display: grid; gap: 16px; }
.err-pack { padding: 28px; background: rgba(13, 16, 21, .72); border: 1px solid var(--line); border-radius: 14px; }
.err-pack h2 { font-size: 24px; display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.err-pack h2 a { color: var(--text); }
.err-pack h2 .mono { font-size: 14px; font-weight: 400; }
.err-pack > p { max-width: 720px; }
.err-pack ul { list-style: none; margin: 0; padding: 0; columns: 3 250px; column-gap: 32px; font-size: 14.5px; }
.err-pack li { break-inside: avoid; padding: 4px 0; }
.err-pack li a { color: var(--muted); }
.err-pack li a:hover { color: var(--text); }
.err-toc { margin-top: 28px; max-width: 820px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(13, 16, 21, .72); }
.err-toc summary { cursor: pointer; padding: 12px 18px; font-weight: 500; }
.err-toc ol { columns: 2 280px; column-gap: 32px; margin: 0; padding: 4px 18px 16px 40px; font-size: 14.5px; }
.err-toc li { break-inside: avoid; margin-bottom: 4px; color: var(--dim); }
.err-toc li a { color: var(--muted); }
.err-toc li a:hover { color: var(--text); }
.err { max-width: 820px; padding: 36px 0; border-top: 1px solid var(--line); scroll-margin-top: 84px; }
.err:first-child { border-top: 0; padding-top: 0; }
.err h2 { font-size: clamp(22px, 2.6vw, 27px); letter-spacing: -0.02em; margin-bottom: 10px; }
.err h2 a { color: var(--text); }
.err h2 a:hover { color: #fff; text-decoration: none; }
.err h3 { font: 500 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--blue-soft); margin: 20px 0 10px; }
.err-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.err-label { font: 500 11.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin: 0 0 8px; }
.err-line { background: #16191e; border-color: var(--line2); color: #d5dbe3; white-space: pre-wrap; overflow-wrap: anywhere; }
.err-line var { color: var(--amber); }
.err > p, .err li { color: var(--muted); }
.err ol { padding-left: 22px; margin: 0 0 1em; }
.err li { margin-bottom: 6px; }
.err li::marker { color: var(--dim); }
.err-links { font-size: 14.5px; }
.err-more { margin-top: 56px; }
.err-more .eyebrow { justify-content: center; }
.err-more ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
@media (max-width: 640px) {
    .err-pack { padding: 22px 18px; }
    .err { padding: 28px 0; }
}