@font-face{font-family:'Bricolage Grotesque';src:url('fonts/BricolageGrotesque-Variable.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/InstrumentSans-Variable.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('fonts/InstrumentSans-Italic-Variable.woff2') format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
@font-face{font-family:'Silkscreen';src:url('fonts/Silkscreen-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Silkscreen';src:url('fonts/Silkscreen-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('fonts/JetBrainsMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
:root,[data-theme="light"]{--paper:var(--cream-50);--paper-sunk:#f3ecdc;--card:#ffffff;--card-sunk:#f7f2e6;--line:#e4dac6;--line-strong:#7b8a80;--ink:var(--forest-900);--ink-muted:#4a5d55;--brand:var(--forest-700);--brand-soft:var(--mint-100);--action:var(--forest-900);--on-action:var(--cream-50);--accent:var(--saffron-400);--on-accent:var(--forest-900);--accent-soft:var(--saffron-100);--accent-ink:#7a4a00;--signal:#b3361b;--signal-soft:var(--coral-100);--emphasis:var(--forest-700);--focus:var(--forest-700);--forest-950:#051f17;--forest-900:#0a2e23;--forest-800:#0f3b2e;--forest-700:#16543f;--leaf-500:#2f8f63;--mint-300:#8ee8b9;--mint-100:#dcf5e7;--saffron-400:#ffb21e;--saffron-100:#ffefc7;--coral-500:#ff6b4f;--coral-100:#ffe3da;--cream-50:#fbf7ee;--cream-200:#f1e8d5;--shadow-pixel:4px 4px 0 0 #ffb21e;--shadow-pixel-ink:4px 4px 0 0 #0a2e23;--shadow-card:0 1px 0 0 #e4dac6, 0 24px 48px -24px rgba(10, 46, 35, 0.35);--shadow-float:0 2px 0 0 #e4dac6, 0 40px 80px -30px rgba(10, 46, 35, 0.5);}
[data-theme="dark"]{--paper:var(--forest-900);--paper-sunk:#072519;--card:var(--forest-800);--card-sunk:#0c3428;--line:#1f4f40;--line-strong:#6f9a89;--ink:var(--cream-50);--ink-muted:#b3c7bd;--brand:var(--mint-300);--brand-soft:#134a39;--action:var(--saffron-400);--on-action:var(--forest-900);--accent:var(--saffron-400);--on-accent:var(--forest-900);--accent-soft:#3d3313;--accent-ink:#ffc95a;--signal:#ff8f78;--signal-soft:#4a2219;--emphasis:var(--saffron-400);--focus:var(--saffron-400);--shadow-pixel:4px 4px 0 0 #03140e;--shadow-pixel-ink:4px 4px 0 0 #03140e;--shadow-card:0 24px 48px -24px rgba(0, 0, 0, 0.6);--shadow-float:0 40px 80px -30px rgba(0, 0, 0, 0.7);}
:root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;--space-12:48px;--space-16:64px;--space-24:96px;--space-32:128px;--radius-none:0px;--radius-sm:6px;--radius-md:12px;--radius-lg:24px;--radius-pill:999px;--container:1200px;--container-wide:1320px;--gutter:24px;--nav-height:72px;--pixel-sm:2px;--pixel-md:3px;--pixel-lg:4px;--pixel-xl:8px;--font-display:"Bricolage Grotesque", "Instrument Sans", system-ui, sans-serif;--font-text:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;--font-pixel:Silkscreen, "JetBrains Mono", ui-monospace, monospace;--font-mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;}
.display-xl{font-family:var(--font-display);font-size:88px;line-height:0.94;font-weight:800;letter-spacing:-0.04em;}
.display-lg{font-family:var(--font-display);font-size:64px;line-height:1;font-weight:800;letter-spacing:-0.035em;}
.heading-1{font-family:var(--font-display);font-size:48px;line-height:52px;font-weight:750;letter-spacing:-0.03em;}
.heading-2{font-family:var(--font-display);font-size:36px;line-height:40px;font-weight:720;letter-spacing:-0.025em;}
.heading-3{font-family:var(--font-display);font-size:24px;line-height:30px;font-weight:680;letter-spacing:-0.015em;}
.heading-4{font-family:var(--font-display);font-size:19px;line-height:26px;font-weight:650;letter-spacing:-0.01em;}
.lead{font-family:var(--font-text);font-size:20px;line-height:30px;font-weight:400;}
.body{font-family:var(--font-text);font-size:16px;line-height:26px;font-weight:400;}
.body-sm{font-family:var(--font-text);font-size:14px;line-height:22px;font-weight:400;}
.label{font-family:var(--font-text);font-size:15px;line-height:20px;font-weight:600;}
.micro{font-family:var(--font-text);font-size:12px;line-height:16px;font-weight:500;letter-spacing:0.01em;}
.eyebrow{font-family:var(--font-pixel);font-size:16px;line-height:16px;font-weight:400;}
.ticker{font-family:var(--font-pixel);font-size:24px;line-height:24px;font-weight:400;}
.pixel-stat{font-family:var(--font-pixel);font-size:64px;line-height:64px;font-weight:400;}
.code{font-family:var(--font-mono);font-size:14px;line-height:22px;font-weight:400;}
/* qbrin components — loaded after tokens.css. Every colour is a token; hex appears only in fixed pixel art. */

/* ---------- page ground ---------- */
/* --page is the root ground colour. It is set on the root only (never inside a themed section), so a pixel edge drawn
   inside a Forest band can still paint the colour of the page below it. */
:root { --page: var(--cream-50); --page-sunk: #f3ecdc; }
:root[data-theme="dark"] { --page: #0a2e23; --page-sunk: #072519; color-scheme: dark; }

/* ---------- base ---------- */
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--font-text); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
.qb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qb-container { box-sizing: border-box; width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.qb-container--wide { max-width: calc(var(--container-wide) + 2 * var(--gutter)); }
.qb-px { display: block; flex: none; }
.qb-icon { display: inline-block; vertical-align: middle; }
.qb-dotgrid { background-image: conic-gradient(at 2px 2px, transparent 270deg, var(--line) 0); background-size: 24px 24px; }
.qb-pad { padding: 24px; }
.qb-nowrap { white-space: nowrap; }
.qb-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.qb-stack { display: grid; gap: 16px; }

/* the pixel full stop */
.qb-dot { display: inline-block; width: 0.16em; height: 0.16em; margin-left: 0.05em; background: var(--accent); vertical-align: baseline; }

/* ---------- eyebrow ---------- */
.qb-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--brand); }
.qb-eyebrow__pip { width: 8px; height: 8px; flex: none; background: var(--accent); }

/* ---------- button ---------- */
.qb-btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 18px; border: 2px solid transparent; border-radius: var(--radius-none); font-family: var(--font-text); font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end); }
.qb-btn--sm { height: 38px; padding: 0 14px; font-size: 14px; }
.qb-btn--lg { height: 52px; padding: 0 24px; font-size: 16px; }
.qb-btn--primary { background-color: var(--action); border-color: var(--action); color: var(--on-action); box-shadow: var(--shadow-pixel); }
.qb-btn--accent { background-color: var(--accent); border-color: var(--forest-900); color: var(--on-accent); box-shadow: var(--shadow-pixel-ink); }
.qb-btn--secondary { background-color: transparent; border-color: var(--ink); color: var(--ink); }
.qb-btn--link { height: auto; padding: 2px 0; border: 0; background: none; color: var(--brand); gap: 8px; }
.qb-btn--primary:hover, .qb-btn--accent:hover { background-image: linear-gradient(rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.14)); }
.qb-btn--secondary:hover { background-color: var(--brand-soft); }
.qb-btn--link:hover span { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.qb-btn--link:hover .qb-btn__arrow { transform: translateX(3px); }
.qb-btn__arrow { transition: transform 90ms steps(2, end); }
.qb-btn--primary:active, .qb-btn--accent:active { transform: translate(4px, 4px); box-shadow: none; }
.qb-btn--secondary:active { transform: translate(2px, 2px); }
.qb-btn:focus-visible, .qb-scard:focus-visible, .qb-nav__link:focus-visible, a:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---------- tag & citation ---------- */
.qb-tag { box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; white-space: nowrap; }
.qb-tag--brand { background: var(--brand-soft); color: var(--brand); }
.qb-tag--accent { background: var(--accent-soft); color: var(--accent-ink); }
.qb-tag--signal { background: var(--signal-soft); color: var(--signal); }
.qb-tag--neutral { background: var(--card-sunk); color: var(--ink-muted); box-shadow: inset 0 0 0 1px var(--line); }
.qb-tag--solid { background: var(--accent); color: var(--on-accent); }
.qb-cite { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 2px 4px 0; margin: 0 2px; background: var(--accent); color: var(--on-accent); font-family: var(--font-pixel); font-size: 16px; line-height: 16px; vertical-align: 1px; }

/* ---------- announcement bar ---------- */
.qb-announce { background: var(--accent); color: var(--on-accent); font-size: 14px; line-height: 20px; font-weight: 600; }
.qb-announce__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; min-height: 44px; padding-top: 8px; padding-bottom: 8px; text-align: center; }
.qb-announce__tag { padding: 4px 6px 3px; background: var(--forest-900); color: var(--cream-50); font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; }
.qb-announce__link { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* ---------- nav ---------- */
.qb-nav { position: relative; z-index: 5; background: var(--paper); color: var(--ink); }
.qb-hero .qb-nav { background: transparent; }
.qb-nav__inner { display: flex; align-items: center; gap: 36px; height: var(--nav-height); }
.qb-nav__brand { display: inline-flex; color: var(--ink); text-decoration: none; }
.qb-nav__links { display: flex; flex: 1; gap: 2px; }
.qb-nav__item { position: relative; }
.qb-nav__link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; color: var(--ink); font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; }
.qb-nav__link:hover, .qb-nav__item.is-open > .qb-nav__link { background: var(--brand-soft); color: var(--brand); }
.qb-nav__menu { position: absolute; top: 100%; left: 0; display: none; grid-template-columns: 1fr 1fr; gap: 4px; width: 660px; margin-top: 12px; padding: 10px; background: var(--card); color: var(--ink); border: 2px solid var(--forest-900); box-shadow: var(--shadow-pixel); }
.qb-nav__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.qb-nav__item.has-menu:hover > .qb-nav__menu, .qb-nav__item.has-menu:focus-within > .qb-nav__menu, .qb-nav__item.is-open > .qb-nav__menu { display: grid; }
.qb-nav__item:hover > .qb-nav__link .qb-icon, .qb-nav__item:focus-within > .qb-nav__link .qb-icon { transform: rotate(180deg); }
.qb-nav__item.is-current > .qb-nav__link { box-shadow: inset 0 -3px 0 var(--accent); }
.qb-nav__mobile { display: none; }
.qb-nav.is-nav-open .qb-nav__mobile { display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 20; max-height: calc(100vh - 72px); overflow: auto; padding: 16px var(--gutter) 24px; background: var(--card); color: var(--ink); border-top: 2px solid var(--forest-900); border-bottom: 2px solid var(--forest-900); box-shadow: 0 16px 0 0 rgba(5, 31, 23, 0.25); }
.qb-nav__mgroup { padding: 12px 0; border-bottom: 1px solid var(--line); }
.qb-nav__mhead { display: block; margin-bottom: 6px; font-family: var(--font-pixel); font-size: 16px; line-height: 24px; text-transform: uppercase; color: var(--brand); text-decoration: none; }
.qb-nav__mlink { display: block; padding: 6px 0; color: var(--ink); font-weight: 600; text-decoration: none; }
.qb-nav__mactions { display: flex; align-items: center; gap: 20px; padding-top: 16px; }
.qb-nav__menuitem { display: flex; gap: 14px; align-items: center; padding: 12px; color: var(--ink); text-decoration: none; }
.qb-nav__menuitem:hover { background: var(--card-sunk); }
.qb-nav__menuitem b { display: block; font-size: 15px; line-height: 20px; }
.qb-nav__menuitem small { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.qb-nav__actions { display: flex; align-items: center; gap: 22px; }
.qb-nav__signin { color: var(--ink); font-size: 15px; line-height: 20px; font-weight: 600; text-decoration: none; }
.qb-nav__burger { display: none; padding: 4px; border: 0; background: none; color: var(--ink); cursor: pointer; }
.qb-tile { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; background: var(--brand-soft); color: var(--brand); }
@media (max-width: 1000px) { .qb-nav__links, .qb-nav__signin { display: none; } .qb-nav__actions { margin-left: auto; } .qb-nav__burger { display: inline-flex; } }
@media (max-width: 560px) { .qb-nav__actions { display: none; } .qb-nav__burger { margin-left: auto; } }

/* ---------- logo ---------- */
.qb-logo { display: inline-flex; align-items: center; color: inherit; line-height: 0; vertical-align: middle; }
.qb-logo svg { display: block; width: auto; height: 1.2em; overflow: visible; }
.qb-logo--wordmark svg { height: 0.61em; }
.qb-logo__node { fill: var(--saffron-400); }
.qb-logo--mono .qb-logo__node { fill: currentColor; }

/* ---------- section scaffolding ---------- */
.qb-section { position: relative; padding: 128px 0; background: var(--paper); color: var(--ink); }
.qb-section--sunk { background: var(--paper-sunk); }
.qb-section--deep { background: var(--forest-950); }
.qb-section--flush-top { padding-top: 0; }
.qb-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.qb-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 960px) { .qb-grid-3, .qb-grid-2 { grid-template-columns: 1fr; } .qb-section { padding: 96px 0; } }
.qb-edge { position: relative; width: 100%; overflow: hidden; line-height: 0; }
.qb-edge svg { display: block; width: 100%; height: 100%; }
.qb-edge--flip { transform: scaleY(-1); }
.qb-section > .qb-edge { position: absolute; left: 0; right: 0; }
.qb-section > .qb-edge--bottom { bottom: -1px; }
.qb-section--edge { padding-bottom: 188px; }
.qb-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; }
.qb-price { display: flex; align-items: baseline; gap: 12px; margin: 0 0 32px; }
.qb-price b { font-family: var(--font-display); font-size: 48px; line-height: 52px; font-weight: 800; letter-spacing: -0.03em; color: var(--emphasis); }
.qb-price span { font-size: 16px; line-height: 24px; color: var(--ink-muted); }
.qb-methods { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 56px 0 0; padding: 28px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 15px; line-height: 22px; font-weight: 600; }
.qb-methods li { display: inline-flex; align-items: center; gap: 10px; }
.qb-methods .qb-icon { color: var(--brand); }
@media (max-width: 960px) { .qb-split { grid-template-columns: 1fr; gap: 48px; } .qb-section--edge { padding-bottom: 150px; } }
.qb-sechead { max-width: 780px; margin-bottom: 64px; }
.qb-sechead--center { margin-left: auto; margin-right: auto; text-align: center; }
.qb-sechead--center .qb-eyebrow, .qb-sechead--center .qb-sechead__actions { justify-content: center; }
.qb-sechead__title { text-wrap: balance; margin: 0; font-family: var(--font-display); font-size: 48px; line-height: 52px; font-weight: 750; letter-spacing: -0.03em; }
.qb-sechead__intro { margin: 20px 0 0; font-size: 20px; line-height: 30px; color: var(--ink-muted); }
.qb-sechead.qb-flush { margin-bottom: 0; }
.qb-sechead__actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }
@media (max-width: 720px) { .qb-sechead__title { font-size: 34px; line-height: 38px; } .qb-sechead__intro { font-size: 18px; line-height: 28px; } }

/* ---------- ticker ---------- */
.qb-ticker { overflow: hidden; background: var(--paper-sunk); color: var(--ink); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.qb-ticker__track { display: flex; width: max-content; animation: qb-marquee 48s linear infinite; }
.qb-ticker.is-still .qb-ticker__track { animation: none; }
.qb-ticker__row { display: flex; }
.qb-ticker__item { display: inline-flex; align-items: center; gap: 32px; padding: 20px 0 20px 32px; font-family: var(--font-pixel); font-size: 24px; line-height: 24px; text-transform: uppercase; white-space: nowrap; }
.qb-ticker__pip { display: inline-block; width: 12px; height: 12px; background: var(--accent); }
@keyframes qb-marquee { to { transform: translateX(-50%); } }

/* ---------- logo cloud ---------- */
.qb-logos__title { margin: 0 0 20px; text-align: center; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.qb-logos__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; align-items: center; }
.qb-logos__slot { display: grid; place-items: center; height: 56px; white-space: nowrap; border: 2px dashed var(--line-strong); color: var(--ink-muted); font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; }
.qb-logos img { justify-self: center; height: 32px; filter: grayscale(1); opacity: 0.8; }

/* ---------- hero ---------- */
.qb-hero { position: relative; overflow: hidden; background-color: var(--paper); color: var(--ink); background-image: conic-gradient(at 2px 2px, transparent 270deg, var(--line) 0); background-size: 24px 24px; }
.qb-hero__sky { position: absolute; inset: 0; pointer-events: none; }
.qb-cloud { position: absolute; }
.qb-cloud--a { top: 96px; right: -90px; }
.qb-cloud--b { bottom: 92px; left: 38%; }
.qb-spark { position: absolute; animation: qb-twinkle 2.4s steps(2, end) infinite; }
.qb-spark--a { top: 150px; left: 47%; }
.qb-spark--b { top: 68%; right: 7%; animation-delay: 1.2s; }
.qb-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 112px; }
.qb-hero__title { margin: 0 0 28px; font-family: var(--font-display); font-size: 88px; line-height: 0.94; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.qb-hero__line { display: block; }
.qb-hero__lead { max-width: 33em; margin: 0 0 36px; font-size: 20px; line-height: 30px; color: var(--ink-muted); }
.qb-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.qb-hero__proof { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 40px 0 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.qb-hero__proof li { display: inline-flex; align-items: center; gap: 8px; }
.qb-hero__proof .qb-icon { color: var(--brand); }
@media (max-width: 1080px) { .qb-hero__grid { grid-template-columns: 1fr; gap: 64px; } }
@media (max-width: 720px) { .qb-spark { display: none; } .qb-hero__title { font-size: 56px; } .qb-hero__lead { font-size: 18px; line-height: 28px; } .qb-hero__grid { padding-top: 40px; } }
@keyframes qb-twinkle { 50% { opacity: 0.25; } }

/* hero scene */
.qb-scene { position: relative; height: 640px; }
.qb-scene__sources { position: absolute; left: 0; top: 28px; width: 132px; height: 232px; }
.qb-float { position: absolute; animation: qb-bob 3.6s steps(3, end) infinite; }
.qb-float--1 { left: 20px; top: 0; }
.qb-float--2 { left: 0; top: 84px; animation-delay: 0.6s; }
.qb-float--3 { left: 28px; top: 158px; animation-delay: 1.2s; }
.qb-scene__flow { position: absolute; top: 8px; bottom: 0; right: 0; width: 4px; background-image: linear-gradient(var(--accent) 50%, transparent 0); background-size: 4px 16px; animation: qb-flow 1s steps(4, end) infinite; }
.qb-scene__map { position: absolute; top: 0; right: 0; width: calc(100% - 156px); }
.qb-scene__answer { position: absolute; left: 24px; top: 272px; width: 470px; max-width: calc(100% - 24px); }
@keyframes qb-bob { 50% { transform: translateY(-8px); } }
@keyframes qb-flow { to { background-position: 0 16px; } }
@media (max-width: 720px) { .qb-scene { height: auto; display: grid; gap: 16px; } .qb-scene__sources { display: none; } .qb-scene__map, .qb-scene__answer { position: relative; inset: auto; top: auto; width: 100%; max-width: none; left: 0; } }
@media (prefers-reduced-motion: reduce) { .qb-float, .qb-spark, .qb-scene__flow, .qb-ticker__track, .qb-map__live { animation: none !important; } }

/* ---------- knowledge map ---------- */
.qb-map { box-sizing: border-box; padding: 18px; background: var(--card); color: var(--ink); border: 2px solid var(--line); }
.qb-map__label { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--brand); }
.qb-map__live { display: inline-block; width: 8px; height: 8px; flex: none; background: var(--mint-300); animation: qb-twinkle 1.6s steps(2, end) infinite; }
.qb-map__grid { display: grid; gap: 3px; }
.qb-map__cell { display: block; aspect-ratio: 1; background: var(--forest-900); }
.qb-map__cell.t1 { background: var(--forest-700); }
.qb-map__cell.t2 { background: var(--leaf-500); }
.qb-map__cell.t3 { background: var(--mint-300); }
.qb-map__cell.t4 { background: var(--cream-50); }
.qb-map__cell.is-hub { background: var(--saffron-400); box-shadow: 0 0 0 2px var(--forest-950); }

/* ---------- answer card ---------- */
.qb-answer { overflow: hidden; background: var(--card); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-float); font-size: 15px; line-height: 24px; text-align: left; }
.qb-answer__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.qb-answer__title { font-size: 14px; line-height: 20px; font-weight: 700; }
.qb-answer__scope { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--card-sunk); color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 600; }
.qb-answer__q { display: flex; align-items: flex-start; gap: 12px; padding: 16px 16px 4px; }
.qb-answer__q p { margin: 2px 0 0; font-weight: 600; }
.qb-answer__avatar { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-ink); font-size: 13px; line-height: 1; font-weight: 700; }
.qb-answer__a { padding: 10px 16px 16px 56px; }
.qb-answer__who { margin: 0 0 6px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--brand); }
.qb-answer__text { margin: 0 0 14px; }
.qb-answer__sources { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.qb-answer__sources li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--card-sunk); color: var(--ink-muted); }
.qb-answer__sources b, .qb-answer__missing b { display: block; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); }
.qb-answer__sources small, .qb-answer__missing small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.qb-answer__missing { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--radius-sm); background: var(--signal-soft); color: var(--signal); }
.qb-answer__missing--need { background: var(--accent-soft); color: var(--accent-ink); }
.qb-answer__missing small { color: var(--ink); }
.qb-answer__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-top: 1px solid var(--line); }
.qb-answer__perm { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }
.qb-answer__perm .qb-icon { color: var(--brand); }

/* ---------- entity graph ---------- */
.qb-graph { position: relative; width: 100%; height: 340px; }
.qb-graph__edges { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.qb-graph__edges line { stroke: var(--brand); stroke-width: 2px; stroke-dasharray: 4 4; }
.qb-node { position: absolute; transform: translate(-50%, -50%); padding: 7px 10px 8px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.qb-node small { display: block; margin-bottom: 4px; font-family: var(--font-pixel); font-size: 16px; line-height: 12px; font-weight: 400; text-transform: uppercase; color: var(--brand); }
.qb-node.is-hub { background: var(--accent); color: var(--on-accent); border-color: var(--forest-900); box-shadow: 4px 4px 0 0 var(--ink); }
.qb-node.is-hub small { color: var(--on-accent); }

/* ---------- compare bars ---------- */
.qb-compare { padding: 20px 22px; background: var(--card); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
.qb-compare__title { margin: 0 0 18px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--ink-muted); }
.qb-compare__row { display: grid; grid-template-columns: 148px minmax(0, 1fr) 52px; align-items: center; gap: 12px; margin-bottom: 12px; font-size: 14px; line-height: 20px; font-weight: 600; }
.qb-compare__bar { height: 20px; background: var(--card-sunk); }
.qb-compare__bar i { display: block; height: 100%; background: var(--line-strong); }
.qb-compare__row.is-hl .qb-compare__bar i { background: var(--accent); }
.qb-compare__val { font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-align: right; }
.qb-compare__note { margin: 14px 0 0; font-size: 12px; line-height: 17px; color: var(--ink-muted); }

/* ---------- chat thread (phone) ---------- */
.qb-phone { box-sizing: border-box; width: 100%; max-width: 320px; overflow: hidden; background: var(--card); color: var(--ink); border: 3px solid var(--forest-900); border-radius: var(--radius-lg); box-shadow: 8px 8px 0 0 var(--forest-900); }
.qb-phone__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; background: var(--forest-900); color: var(--cream-50); }
.qb-phone__head b { display: block; font-size: 15px; line-height: 20px; }
.qb-phone__head small { display: flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; color: var(--mint-300); }
.qb-phone__avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-pill); background: var(--cream-50); color: var(--forest-900); }
.qb-phone__body { display: flex; flex-direction: column; gap: 10px; min-height: 340px; padding: 16px 12px; background-color: var(--card-sunk); background-image: conic-gradient(at 2px 2px, transparent 270deg, var(--line) 0); background-size: 20px 20px; }
.qb-bubble { max-width: 84%; padding: 10px 12px; border-radius: var(--radius-md); font-size: 14px; line-height: 21px; }
.qb-bubble p { margin: 0; }
.qb-bubble--user { align-self: flex-end; background: var(--forest-900); color: var(--cream-50); border-bottom-right-radius: 2px; }
.qb-bubble--qbrin { align-self: flex-start; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-bottom-left-radius: 2px; }
.qb-bubble__src { display: flex; align-items: center; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12px; line-height: 16px; font-weight: 600; color: var(--brand); }
.qb-bubble.is-abstain .qb-bubble__src { color: var(--accent-ink); }
.qb-phone__input { display: flex; align-items: center; justify-content: space-between; margin: 12px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); color: var(--ink-muted); font-size: 14px; line-height: 20px; }

/* ---------- engine diagram ---------- */
.qb-engine { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.qb-engine__stage { position: relative; padding: 26px 22px 28px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.qb-engine__stage b { display: block; margin: 22px 0 8px; font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 650; letter-spacing: -0.01em; }
.qb-engine__stage p { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.qb-engine__n { position: absolute; top: 22px; right: 20px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; color: var(--ink-muted); }
.qb-engine__stage.is-hl { background: var(--accent); color: var(--on-accent); border-color: var(--forest-900); box-shadow: var(--shadow-pixel-ink); }
.qb-engine__stage.is-hl p, .qb-engine__stage.is-hl .qb-engine__n { color: var(--on-accent); }
.qb-engine__stage.is-hl .qb-tile { background: var(--forest-900); color: var(--saffron-400); }
.qb-engine__arrow { position: absolute; top: 50%; left: calc(100% + 2px); width: 32px; height: 32px; margin-top: -16px; color: var(--ink); }
@media (max-width: 1080px) { .qb-engine { grid-template-columns: 1fr; max-width: 520px; } .qb-engine__arrow { top: calc(100% + 2px); left: 50%; margin: 0 0 0 -16px; transform: rotate(90deg); } }

/* ---------- feature row ---------- */
.qb-feature { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 72px; }
.qb-feature + .qb-feature { margin-top: 128px; }
.qb-feature--reverse .qb-feature__copy { order: 2; }
.qb-feature__title { margin: 0 0 16px; font-family: var(--font-display); font-size: 36px; line-height: 40px; font-weight: 720; letter-spacing: -0.025em; }
.qb-feature__body { margin: 0 0 24px; font-size: 18px; line-height: 28px; color: var(--ink-muted); }
.qb-checks { display: grid; gap: 12px; margin: 0 0 28px; padding: 0; list-style: none; }
.qb-checks li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 24px; }
.qb-checks .qb-icon { margin-top: 4px; color: var(--brand); }
.qb-feature__media { position: relative; display: grid; place-items: center; min-height: 420px; padding: 44px; background-color: var(--brand-soft); color: var(--ink); background-image: conic-gradient(at 2px 2px, transparent 270deg, var(--line) 0); background-size: 24px 24px; }
.qb-feature__media--brand { background-color: var(--brand-soft); background-image: conic-gradient(at 2px 2px, transparent 270deg, var(--mint-300) 0); }
.qb-feature__media--accent { background-color: var(--accent-soft); background-image: conic-gradient(at 2px 2px, transparent 270deg, var(--saffron-400) 0); }
.qb-feature__media--sunk { background-color: var(--paper-sunk); }
.qb-feature__media--dark { background-color: var(--paper); }
@media (max-width: 960px) { .qb-feature { grid-template-columns: 1fr; gap: 40px; } .qb-feature--reverse .qb-feature__copy { order: 0; } .qb-feature__media { padding: 24px; min-height: 0; } .qb-feature__title { font-size: 30px; line-height: 34px; } }

/* ---------- question card ---------- */
.qb-qcard { padding: 32px 28px; background: var(--card); color: var(--ink); border: 2px solid var(--line); }
.qb-qcard__icon { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 28px; background: var(--accent); color: var(--on-accent); box-shadow: 4px 4px 0 0 var(--forest-950); }
.qb-qcard h3 { margin: 0 0 12px; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 680; letter-spacing: -0.015em; }
.qb-qcard p { margin: 0; font-size: 16px; line-height: 26px; color: var(--ink-muted); }

/* ---------- solution card ---------- */
.qb-scard { display: flex; flex-direction: column; padding: 28px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); text-decoration: none; transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end); }
.qb-scard:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-pixel); }
.qb-scard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.qb-scard h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 680; letter-spacing: -0.015em; }
.qb-scard p { flex: 1; margin: 0 0 24px; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.qb-scard__link { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-size: 15px; line-height: 20px; font-weight: 600; }

/* ---------- stat ---------- */
.qb-stat { padding-top: 24px; border-top: 2px solid var(--line); }
.qb-stat__value { margin: 0 0 18px; font-family: var(--font-pixel); font-size: 64px; line-height: 64px; font-weight: 400; color: var(--emphasis); }
.qb-stat__label { margin: 0 0 6px; font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 650; color: var(--ink); }
.qb-stat__note { margin: 0; font-size: 14px; line-height: 22px; color: var(--ink-muted); }

/* ---------- testimonial ---------- */
.qb-quote { display: flex; flex-direction: column; gap: 24px; margin: 0; padding: 32px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.qb-quote.is-placeholder { border-style: dashed; border-color: var(--line-strong); }
.qb-quote__mark { color: var(--emphasis); }
.qb-quote blockquote { flex: 1; margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 600; letter-spacing: -0.01em; }
.qb-quote.is-placeholder blockquote { color: var(--ink-muted); font-weight: 500; }
.qb-quote figcaption { display: flex; align-items: center; gap: 12px; }
.qb-quote figcaption b { display: block; font-size: 15px; line-height: 20px; }
.qb-quote figcaption small { display: block; font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.qb-quote__avatar { display: grid; place-items: end center; width: 48px; height: 48px; overflow: hidden; background: var(--brand-soft); }

/* ---------- CTA band ---------- */
.qb-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; overflow: hidden; padding: 0 64px; background: var(--accent); color: var(--on-accent); border: 3px solid var(--forest-900); box-shadow: 10px 10px 0 0 var(--forest-900); }
.qb-cta__copy { padding: 80px 0; }
.qb-cta__title { margin: 0 0 20px; font-family: var(--font-display); font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -0.035em; color: var(--on-accent); }
.qb-cta .qb-dot { background: var(--forest-900); }
.qb-cta__lead { max-width: 30em; margin: 0 0 32px; font-size: 20px; line-height: 30px; color: var(--on-accent); }
.qb-cta__actions { display: flex; flex-wrap: wrap; gap: 16px 20px; }
.qb-cta .qb-btn--primary { background-color: var(--forest-900); border-color: var(--forest-900); color: var(--cream-50); box-shadow: 4px 4px 0 0 var(--cream-50); }
.qb-cta .qb-btn--secondary { border-color: var(--forest-900); color: var(--forest-900); }
.qb-cta .qb-btn--secondary:hover { background-color: var(--saffron-100); }
.qb-cta .qb-btn:focus-visible { outline-color: var(--forest-900); }
.qb-cta__art { position: relative; min-height: 360px; }
.qb-cta__cloud { position: absolute; }
.qb-cta__cloud--a { top: 56px; right: -40px; }
.qb-cta__cloud--b { top: 150px; left: 0; }
.qb-cta__perch { position: absolute; bottom: 0; left: 50%; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); }
.qb-cta__books { display: flex; flex-direction: column; align-items: center; }
.qb-cta__books i { display: block; box-sizing: border-box; height: 28px; border: 4px solid var(--forest-950); }
.qb-cta__books i + i { margin-top: -4px; }
.qb-cta__books i:nth-child(1) { width: 200px; background: var(--forest-700); margin-left: 20px; }
.qb-cta__books i:nth-child(2) { width: 176px; background: var(--cream-50); margin-left: -12px; }
.qb-cta__books i:nth-child(3) { width: 224px; background: var(--mint-300); }
@media (max-width: 960px) { .qb-cta { grid-template-columns: 1fr; padding: 0 28px; } .qb-cta__copy { padding: 56px 0 0; } .qb-cta__art { min-height: 300px; } .qb-cta__title { font-size: 44px; } }

/* ---------- footer ---------- */
.qb-footer { position: relative; overflow: hidden; background: var(--forest-950); color: var(--ink); }
.qb-bricks { height: 48px; background-color: var(--forest-900); background-image: linear-gradient(var(--forest-950) 4px, transparent 0), linear-gradient(90deg, var(--forest-950) 4px, transparent 0), linear-gradient(var(--forest-950) 4px, transparent 0), linear-gradient(90deg, var(--forest-950) 4px, transparent 0); background-size: 100% 24px, 48px 24px, 100% 24px, 48px 24px; background-position: 0 0, 0 0, 0 24px, 24px 24px; background-repeat: repeat-x; }
.qb-footer__top { display: grid; grid-template-columns: minmax(0, 1.7fr) repeat(4, minmax(0, 1fr)); gap: 40px; padding: 72px 0 56px; }
.qb-footer__brand p { max-width: 22em; margin: 18px 0 26px; color: var(--ink-muted); }
.qb-footer__title { margin: 0 0 18px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--brand); }
.qb-footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qb-footer__col a, .qb-footer__legal a { color: var(--ink-muted); font-size: 15px; line-height: 22px; text-decoration: none; }
.qb-footer__col a:hover, .qb-footer__legal a:hover { color: var(--ink); }
.qb-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding: 24px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.qb-footer__legal-links { display: flex; flex-wrap: wrap; gap: 20px; }
.qb-footer__giant { display: flex; justify-content: center; margin-bottom: max(-2.6vw, -34px); padding: 0 var(--gutter); line-height: 0; color: var(--forest-900); user-select: none; }
.qb-footer__giant svg { display: block; width: min(100%, 980px); height: auto; overflow: visible; }
@media (max-width: 960px) { .qb-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qb-footer__brand { grid-column: 1 / -1; } }


/* ================================================================== site components */

/* ---------- ticker chips ---------- */
.qb-ticker--chips { border-width: 1px; background: var(--paper); }
.qb-ticker--chips .qb-ticker__item { gap: 20px; padding: 14px 0 14px 20px; font-family: var(--font-text); font-size: 15px; line-height: 20px; font-weight: 600; text-transform: none; color: var(--ink-muted); }
.qb-ticker--chips .qb-ticker__pip { width: 6px; height: 6px; }

/* ---------- CTA additions ---------- */
.qb-cta__eyebrow { display: inline-flex; margin: 0 0 18px; padding: 6px 8px; background: var(--forest-900); color: var(--cream-50); font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; }
.qb-cta__points { display: grid; gap: 10px; margin: 0 0 32px; padding: 0; list-style: none; font-size: 16px; line-height: 24px; font-weight: 600; color: var(--on-accent); }
.qb-cta__points li { display: flex; align-items: center; gap: 10px; }
.qb-cta__email { margin: 20px 0 0; font-size: 15px; line-height: 22px; color: var(--on-accent); }
.qb-cta__email a { color: var(--on-accent); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- question card extras ---------- */
.qb-qcard { position: relative; }
.qb-qcard__n { position: absolute; top: 28px; right: 24px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; color: var(--ink-muted); }
.qb-qcard__media { margin-top: 24px; }

/* ---------- verdict ---------- */
.qb-verdict { flex: none; }

/* ---------- checkpoint gate ---------- */
.qb-gate { overflow: hidden; background: var(--card); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-float); text-align: left; }
.qb-gate__head, .qb-panel__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.qb-gate__title { font-weight: 700; }
.qb-gate__tag { margin-left: auto; padding: 2px 8px; border-radius: var(--radius-sm); background: var(--card-sunk); color: var(--ink-muted); font-size: 12px; line-height: 16px; font-weight: 600; }
.qb-gate__opts { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 16px 0; }
.qb-gate__opt { padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.qb-gate__opt.is-on { background: var(--forest-900); border-color: var(--forest-900); color: var(--cream-50); }
.qb-gate__body { padding: 16px; }
.qb-gate__k { margin: 0 0 4px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--ink-muted); }
.qb-gate__wants { margin: 0 0 14px; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.qb-gate__checks { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; line-height: 20px; }
.qb-gate__checks li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); background: var(--card-sunk); }
.qb-gate__checks li.is-ok .qb-icon { color: var(--brand); }
.qb-gate__checks li.is-missing { background: var(--accent-soft); } .qb-gate__checks li.is-missing .qb-icon { color: var(--accent-ink); }
.qb-gate__checks li.is-risk { background: var(--signal-soft); } .qb-gate__checks li.is-risk .qb-icon { color: var(--signal); }
.qb-gate__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; border-top: 1px solid var(--line); }
.qb-gate__note { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* ---------- code ---------- */
.qb-code { overflow: hidden; background: var(--forest-950); color: var(--cream-50); border: 2px solid var(--forest-900); border-radius: var(--radius-md); text-align: left; }
.qb-code__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.qb-code__method { padding: 3px 7px 2px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; background: var(--saffron-400); color: var(--forest-900); }
.qb-code__method--get { background: var(--mint-300); }
.qb-code__path { font-family: var(--font-mono); font-size: 14px; line-height: 20px; color: var(--cream-50); }
.qb-code__title { font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.qb-code__badge { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--mint-300); }
.qb-code__tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.qb-code__tab { padding: 6px 10px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); border-radius: var(--radius-sm); }
button.qb-code__tab { border: 0; background: none; font: inherit; font-size: 13px; line-height: 18px; font-weight: 600; cursor: pointer; }
button.qb-code__tab:hover { color: var(--cream-50); }
.qb-code__pre[hidden] { display: none; }
.qb-code__tab.is-on { background: var(--forest-800); color: var(--cream-50); box-shadow: inset 0 -2px 0 var(--saffron-400); }
.qb-code__copy { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: none; color: var(--cream-50); font: inherit; font-size: 13px; line-height: 18px; font-weight: 600; cursor: pointer; }
.qb-code__pre { margin: 0; padding: 18px 20px; overflow-x: auto; font-family: var(--font-mono); font-size: 13.5px; line-height: 22px; white-space: pre; tab-size: 2; }
.qb-code__pre code { font-family: inherit; }
.qb-tok-str { color: var(--mint-300); } .qb-tok-num { color: var(--saffron-400); } .qb-tok-com { color: #8fa89d; } .qb-tok-flag { color: #ffb4a4; } .qb-tok-kw { color: #ffd98a; }
.qb-result { padding: 18px 20px; background: var(--forest-900); color: var(--cream-50); border: 2px solid var(--forest-900); border-radius: var(--radius-md); }
.qb-result__title { margin: 0 0 12px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--mint-300); }
.qb-result dl { display: grid; gap: 8px; margin: 0; }
.qb-result__row { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 12px; font-size: 14px; line-height: 20px; }
.qb-result dt { color: var(--ink-muted); } .qb-result dd { margin: 0; font-family: var(--font-mono); }
.qb-result__foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; line-height: 20px; color: var(--ink-muted); }

/* ---------- FAQ ---------- */
.qb-faq { border-top: 2px solid var(--ink); }
.qb-faq__item { border-bottom: 2px solid var(--ink); }
.qb-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--font-display); font-size: 20px; line-height: 28px; font-weight: 680; letter-spacing: -0.01em; }
.qb-faq__item summary::-webkit-details-marker { display: none; }
.qb-faq__pm { position: relative; width: 16px; height: 16px; flex: none; }
.qb-faq__pm::before, .qb-faq__pm::after { content: ""; position: absolute; background: var(--accent); }
.qb-faq__pm::before { left: 0; right: 0; top: 6px; height: 4px; } .qb-faq__pm::after { top: 0; bottom: 0; left: 6px; width: 4px; }
.qb-faq__item[open] .qb-faq__pm::after { display: none; }
.qb-faq__a { max-width: 68ch; padding: 0 0 24px; font-size: 16px; line-height: 26px; color: var(--ink-muted); }
.qb-faq__a p { margin: 0 0 12px; }

/* ---------- reviews ---------- */
.qb-review { display: flex; flex-direction: column; gap: 14px; padding: 24px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); text-decoration: none; transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end); }
.qb-review:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-pixel); }
.qb-review__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; line-height: 20px; }
.qb-stars { display: inline-flex; gap: 2px; color: var(--saffron-400); }
.qb-review__badge { align-self: flex-start; padding: 2px 8px; background: var(--brand-soft); color: var(--brand); font-family: var(--font-pixel); font-size: 16px; line-height: 20px; text-transform: uppercase; }
.qb-review blockquote { flex: 1; margin: 0; font-size: 16px; line-height: 25px; }
.qb-review__who b { display: block; font-size: 14px; line-height: 20px; } .qb-review__who small { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.qb-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 960px) { .qb-reviews { grid-template-columns: 1fr; } }

/* ---------- pricing ---------- */
.qb-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.qb-plan { position: relative; display: flex; flex-direction: column; padding: 32px 28px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.qb-plan.is-featured { box-shadow: 8px 8px 0 0 var(--accent); }
.qb-plan__badge { position: absolute; top: -16px; left: 24px; }
.qb-plan__name { margin: 0 0 8px; font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 750; letter-spacing: -0.02em; }
.qb-plan__blurb { min-height: 48px; margin: 0 0 24px; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.qb-plan__price { display: flex; align-items: flex-start; gap: 4px; margin: 0; font-family: var(--font-display); color: var(--ink); }
.qb-plan__price small { margin-top: 10px; font-size: 24px; line-height: 24px; font-weight: 700; }
.qb-plan__price b { font-size: 64px; line-height: 64px; font-weight: 800; letter-spacing: -0.04em; }
.qb-plan__period { min-height: 44px; margin: 8px 0 18px; font-size: 14px; line-height: 22px; color: var(--ink-muted); }
.qb-plan__included { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 8px 10px; background: var(--brand-soft); color: var(--brand); font-size: 14px; line-height: 20px; font-weight: 600; }
.qb-plan__cta { width: 100%; }
.qb-plan__secondary { margin-top: 12px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--brand); text-align: center; }
.qb-plan__features { display: grid; gap: 10px; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 15px; line-height: 22px; }
.qb-plan__features li { display: flex; align-items: flex-start; gap: 10px; } .qb-plan__features .qb-icon { margin-top: 3px; color: var(--brand); }
.qb-billing { display: inline-flex; gap: 0; margin-top: 28px; border: 2px solid var(--ink); }
.qb-billing span { padding: 10px 16px; font-size: 14px; line-height: 20px; font-weight: 700; }
.qb-billing .is-on { background: var(--action); color: var(--on-action); }
.qb-billing .qb-tag { margin-left: 8px; height: 22px; font-size: 16px; }
@media (max-width: 1000px) { .qb-plans { grid-template-columns: 1fr; max-width: 520px; } }

/* ---------- tables ---------- */
.qb-table { overflow-x: auto; border: 2px solid var(--ink); background: var(--card); }
.qb-table table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 21px; }
.qb-table caption { padding: 12px 16px; text-align: left; font-size: 13px; color: var(--ink-muted); caption-side: bottom; border-top: 1px solid var(--line); }
.qb-table th, .qb-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.qb-table thead th { position: sticky; top: 0; background: var(--forest-900); color: var(--cream-50); font-family: var(--font-pixel); font-size: 16px; line-height: 18px; font-weight: 400; text-transform: uppercase; white-space: nowrap; }
.qb-table tbody th { font-weight: 700; color: var(--ink); }
.qb-table tbody tr:nth-child(even) { background: var(--card-sunk); }
.qb-table tbody tr.is-hl { background: var(--brand-soft); box-shadow: inset 4px 0 0 var(--accent); }
.qb-table--compact th, .qb-table--compact td { padding: 8px 12px; }
.qb-table--wide1 tbody th { min-width: 220px; }
.qb-table td:empty::after { content: "—"; color: var(--line-strong); }
.qb-level { height: 24px; font-size: 16px; white-space: nowrap; }
.qb-level--none { color: var(--ink-muted); }

/* ---------- page hero ---------- */
.qb-phero { position: relative; overflow: hidden; background-color: var(--paper); color: var(--ink); background-image: conic-gradient(at 2px 2px, transparent 270deg, var(--line) 0); background-size: 24px 24px; }
.qb-phero .qb-nav { background: transparent; }
.qb-phero__sky { position: absolute; inset: 0; pointer-events: none; }
.qb-phero__spark { top: 140px; right: 12%; }
.qb-phero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 56px; padding-bottom: 96px; }
.qb-phero--aside .qb-phero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.qb-phero__copy { max-width: 820px; }
.qb-phero--center .qb-phero__copy { margin: 0 auto; text-align: center; }
.qb-phero--center .qb-eyebrow, .qb-phero--center .qb-phero__actions, .qb-phero--center .qb-phero__meta { justify-content: center; }
.qb-phero__title { text-wrap: balance; margin: 0 0 24px; font-family: var(--font-display); font-size: 72px; line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; }
.qb-phero__lead { max-width: 40em; font-size: 20px; line-height: 30px; color: var(--ink-muted); }
.qb-phero--center .qb-phero__lead { margin: 0 auto; }
.qb-phero__lead p { margin: 0 0 14px; }
.qb-phero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 32px; }
.qb-phero__meta { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 32px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink-muted); }
.qb-phero__meta span { display: inline-flex; align-items: center; gap: 8px; } .qb-phero__meta .qb-icon { color: var(--brand); }
@media (max-width: 1080px) { .qb-phero--aside .qb-phero__grid { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .qb-phero__title { font-size: 46px; } .qb-phero__lead { font-size: 18px; line-height: 28px; } }

/* ---------- sections ---------- */
.qb-section--deepband { background: var(--forest-950); }
.qb-section--tight { padding: 88px 0; }
.qb-section--edge { padding-bottom: 176px; }
.qb-section > .qb-edge--bottom { position: absolute; left: 0; right: 0; bottom: -1px; }
.qb-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.qb-grid-5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1080px) { .qb-grid-4, .qb-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .qb-grid-4, .qb-grid-5 { grid-template-columns: 1fr; } }
.qb-center { text-align: center; }
.qb-mt-8 { margin-top: 32px; } .qb-mt-12 { margin-top: 48px; } .qb-mt-16 { margin-top: 64px; }
.qb-lead { max-width: 44em; font-size: 20px; line-height: 30px; color: var(--ink-muted); }
.qb-note { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.qb-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }
.qb-actions--center { justify-content: center; }

/* ---------- toc layout & prose ---------- */
.qb-toc-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: start; }
.qb-toc { position: sticky; top: 24px; padding: 20px; background: var(--card); border: 2px solid var(--ink); }
.qb-toc__label { margin: 0 0 12px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--brand); }
.qb-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.qb-toc a { display: block; padding: 6px 8px; color: var(--ink-muted); font-size: 14px; line-height: 20px; font-weight: 600; text-decoration: none; }
.qb-toc a:hover { background: var(--brand-soft); color: var(--brand); }
.qb-prose { max-width: 760px; font-size: 17px; line-height: 28px; color: var(--ink); }
.qb-prose > section { scroll-margin-top: 24px; padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); }
.qb-prose > section:last-child { border-bottom: 0; }
.qb-prose h2 { margin: 0 0 16px; font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 750; letter-spacing: -0.025em; }
.qb-prose h3 { margin: 28px 0 10px; font-family: var(--font-display); font-size: 21px; line-height: 28px; font-weight: 700; letter-spacing: -0.01em; }
.qb-prose h4 { margin: 20px 0 8px; font-size: 16px; line-height: 24px; font-weight: 700; }
.qb-prose p { margin: 0 0 16px; }
.qb-prose ul, .qb-prose ol { margin: 0 0 18px; padding-left: 22px; }
.qb-prose li { margin: 0 0 8px; }
.qb-prose ul li::marker { color: var(--accent); content: "■  "; font-size: 12px; }
.qb-prose a { color: var(--brand); font-weight: 600; text-underline-offset: 3px; }
.qb-prose strong { font-weight: 700; }
.qb-prose code { padding: 1px 5px; border-radius: 4px; background: var(--card-sunk); font-family: var(--font-mono); font-size: 0.86em; }
.qb-prose pre code { padding: 0; background: none; }
.qb-prose .qb-table, .qb-prose .qb-code, .qb-prose .qb-callout { margin: 20px 0 24px; }
.qb-prose blockquote { margin: 20px 0; padding: 4px 0 4px 20px; border-left: 4px solid var(--accent); color: var(--ink-muted); }
.qb-prose img { max-width: 100%; height: auto; border: 2px solid var(--ink); }
.qb-prose figure { margin: 24px 0; } .qb-prose figcaption { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--ink-muted); }
@media (max-width: 960px) { .qb-toc-layout { grid-template-columns: minmax(0, 1fr); gap: 32px; } .qb-toc { position: static; } }

/* ---------- callout ---------- */
.qb-callout { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border: 2px solid var(--ink); background: var(--brand-soft); font-size: 15px; line-height: 24px; }
.qb-callout .qb-icon { margin-top: 4px; color: var(--brand); }
.qb-callout b { display: block; margin-bottom: 2px; }
.qb-callout p { margin: 0; }
.qb-callout--accent { background: var(--accent-soft); } .qb-callout--accent .qb-icon { color: var(--accent-ink); }
.qb-callout--signal { background: var(--signal-soft); } .qb-callout--signal .qb-icon { color: var(--signal); }

/* ---------- steps & pillars ---------- */
.qb-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.qb-steps li { padding: 24px 22px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.qb-steps__n { display: block; margin-bottom: 18px; font-family: var(--font-pixel); font-size: 32px; line-height: 32px; color: var(--emphasis); }
.qb-steps b { display: block; margin-bottom: 8px; font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 680; }
.qb-steps p { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
@media (max-width: 1080px) { .qb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .qb-steps { grid-template-columns: 1fr; } }
.qb-pillar { display: flex; flex-direction: column; padding: 28px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.qb-pillar__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.qb-pillar__n { font-family: var(--font-pixel); font-size: 32px; line-height: 32px; color: var(--emphasis); }
.qb-pillar__kicker { margin: 0 0 6px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--brand); }
.qb-pillar h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.015em; }
.qb-pillar__text { margin: 0 0 18px; font-size: 15px; line-height: 24px; color: var(--ink-muted); }
.qb-checks--sm li { font-size: 15px; line-height: 22px; }
.qb-pillar .qb-btn--link { margin-top: auto; align-self: flex-start; }

/* ---------- panels ---------- */
.qb-panel { overflow: hidden; background: var(--card); color: var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow-card); text-align: left; }
.qb-panel__foot { margin: 0; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.qb-audit__status { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: var(--brand-soft); color: var(--brand); font-size: 13px; line-height: 18px; }
.qb-audit__status small { margin-left: auto; color: var(--ink-muted); font-size: 12px; }
.qb-audit { margin: 0; padding: 6px 0; list-style: none; }
.qb-audit li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 18px; }
.qb-audit li:last-child { border-bottom: 0; }
.qb-audit__time, .qb-audit__hash { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.qb-audit__action { font-weight: 600; }
@media (max-width: 560px) { .qb-audit li { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 10px; } .qb-audit__hash { display: none; } }
.qb-trace { overflow: hidden; background: var(--forest-950); color: var(--cream-50); border: 2px solid var(--forest-900); border-radius: var(--radius-md); text-align: left; }
.qb-trace__head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 13px; }
.qb-trace ol { margin: 0; padding: 10px 0; list-style: none; }
.qb-trace li { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 12px; padding: 8px 16px; font-size: 14px; line-height: 21px; }
.qb-trace__kind { font-family: var(--font-pixel); font-size: 16px; line-height: 21px; text-transform: uppercase; color: var(--mint-300); }
.qb-trace li.is-policy .qb-trace__kind { color: var(--saffron-400); }
.qb-trace li.is-final .qb-trace__kind { color: var(--cream-50); }
.qb-trace__text { font-family: var(--font-mono); font-size: 13px; }
.qb-policy { margin: 0; padding: 0; list-style: none; }
.qb-policy li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.qb-policy__op { font-family: var(--font-pixel); font-size: 16px; color: var(--brand); text-transform: uppercase; }
.qb-checkbars { margin: 0; padding: 8px 0; list-style: none; }
.qb-checkbars li { display: grid; grid-template-columns: minmax(0, 1fr) 150px; align-items: center; gap: 6px 16px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.qb-checkbars__label b { display: block; font-size: 14px; line-height: 20px; } .qb-checkbars__label small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.qb-checkbars__bar { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.qb-checkbars__bar i { display: block; height: 14px; background: var(--card-sunk); box-shadow: inset 0 0 0 1px var(--line); }
.qb-checkbars__bar i.is-on { background: var(--leaf-500); box-shadow: none; }
.qb-checkbars__detail { grid-column: 1 / -1; font-size: 12px; line-height: 16px; color: var(--ink-muted); }
.qb-checkbars__action { font-family: var(--font-mono); font-size: 13px; color: var(--ink-muted); }
.qb-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 14px; background: var(--card-sunk); }
.qb-board__title { margin: 0 0 8px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--ink-muted); }
.qb-board__card { display: grid; gap: 6px; margin-bottom: 8px; padding: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 13px; line-height: 18px; }
.qb-board__card small { display: flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 600; }
.qb-board__card.is-ask { border: 2px solid var(--accent); }
.qb-board__who { justify-self: start; padding: 1px 6px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; line-height: 16px; font-weight: 700; }
.qb-board__actions { display: flex; gap: 6px; }
.qb-board__actions .qb-btn { height: 28px; padding: 0 8px; font-size: 12px; box-shadow: none; }
@media (max-width: 720px) { .qb-board { grid-template-columns: 1fr; } }
.qb-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.qb-langs__chip { padding: 8px 14px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font-size: 16px; line-height: 22px; font-weight: 600; }
.qb-langs__chip.is-on { background: var(--action); border-color: var(--action); color: var(--on-action); }
.qb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qb-chips li { padding: 6px 12px; border: 1px solid var(--line-strong); background: var(--card); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 600; }
.qb-chips li.is-more { border-style: dashed; color: var(--ink-muted); }

/* ---------- forms ---------- */
.qb-form { display: grid; gap: 18px; padding: 32px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); box-shadow: 8px 8px 0 0 var(--accent); }
.qb-field { display: grid; gap: 6px; }
.qb-field__label { font-size: 14px; line-height: 20px; font-weight: 700; }
.qb-field__label i { color: var(--signal); font-style: normal; }
.qb-field input, .qb-field textarea, .qb-field select { box-sizing: border-box; width: 100%; padding: 12px 14px; border: 2px solid var(--line-strong); border-radius: var(--radius-none); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; line-height: 22px; }
.qb-field input:focus, .qb-field textarea:focus { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--ink); }
.qb-field__hint { font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* ---------- status ---------- */
.qb-status { max-width: 640px; margin: 0 auto; text-align: center; }
.qb-status__art { display: flex; justify-content: center; margin-bottom: 28px; }
.qb-status .qb-eyebrow { justify-content: center; }
.qb-status__title { margin: 0 0 18px; font-family: var(--font-display); font-size: 64px; line-height: 1; font-weight: 800; letter-spacing: -0.035em; }
.qb-status__text { margin: 0 auto 32px; max-width: 34em; font-size: 19px; line-height: 29px; color: var(--ink-muted); }
.qb-status__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 24px; }

/* ---------- blog ---------- */
.qb-posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 1000px) { .qb-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .qb-posts { grid-template-columns: 1fr; } }
.qb-post { display: flex; flex-direction: column; background: var(--card); color: var(--ink); border: 2px solid var(--ink); text-decoration: none; transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end); }
.qb-post:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-pixel); }
.qb-post.is-featured { grid-column: span 2; flex-direction: row; }
.qb-post.is-featured .qb-cover { flex: 1.1; aspect-ratio: auto; min-height: 280px; border-bottom: 0; border-right: 2px solid var(--ink); }
.qb-post.is-featured .qb-post__body { flex: 1; }
@media (max-width: 640px) { .qb-post.is-featured { grid-column: auto; flex-direction: column; } .qb-post.is-featured .qb-cover { border-right: 0; border-bottom: 2px solid var(--ink); } }
.qb-post__body { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px 22px; flex: 1; }
.qb-post__cat { font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--brand); }
.qb-post__title { font-family: var(--font-display); font-size: 21px; line-height: 27px; font-weight: 700; letter-spacing: -0.01em; }
.qb-post__excerpt { font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.qb-post__more { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; color: var(--brand); font-size: 14px; line-height: 20px; font-weight: 700; }
.qb-cover { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-bottom: 2px solid var(--ink); background: var(--forest-900); }
.qb-cover__map { position: absolute; inset: -2px; padding: 12px; border: 0; }
.qb-cover__map .qb-map__grid { gap: 4px; }
.qb-cover__icon { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--saffron-400); color: var(--forest-900); box-shadow: 6px 6px 0 0 var(--forest-950); }
.qb-article { max-width: 760px; margin: 0 auto; }
.qb-article__meta { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 24px; font-size: 14px; line-height: 20px; color: var(--ink-muted); }

/* ================================================================== the qbrin ring (ConceptRing, SprawlDiagram) */
.qr-stage {
  --qr-band: #16543f; --qr-band-ink: #dcf5e7; --qr-band-lit: #8ee8b9; --qr-band-lit-ink: #051f17;
  --qr-quad: #0f3b2e; --qr-quad-hi: #1d6a50; --qr-quad-ink: #8ee8b9;
  --qr-disc: #fbf7ee; --qr-dot: #e7dec9; --qr-node: #ffffff; --qr-node-line: #e4dac6; --qr-icon: #16543f; --qr-label: #0a2e23;
  --qr-wire: #c4b99f; --qr-core: #051f17; --qr-mark: #8ee8b9; --qr-pip: #1f4f40;
  position: relative; width: 100%; max-width: 640px; margin: 0 auto;
}
.qr { position: relative; aspect-ratio: 1 / 1; }
.qr-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.qr-arc { fill: var(--qr-band); transform-origin: 500px 500px; }
.qr-arc-text { fill: var(--qr-band-ink); font-family: var(--font-pixel); font-size: 32px; letter-spacing: 4px; }
.qr-token__head { fill: var(--saffron-400); }
.qr-token__tail { fill: var(--saffron-400); }
.qr-token { transform-origin: 500px 500px; opacity: 0; }
.qr-quads { transform-origin: 500px 500px; animation: qr-zoom .8s cubic-bezier(.2, .7, .2, 1) .2s backwards; }
.qr-quad { fill: var(--qr-quad); }
.qr-quad-hi { fill: var(--qr-quad-hi); opacity: 0; }
.qr-quad-text { fill: var(--qr-quad-ink); font-family: var(--font-pixel); font-size: 24px; letter-spacing: 3px; }
.qr-inner { transform-origin: 500px 500px; animation: qr-zoom .7s cubic-bezier(.2, .7, .2, 1) .1s backwards; }
.qr-disc { fill: var(--qr-disc); }
.qr-dot { fill: var(--qr-dot); }
.qr-wedge { fill: var(--saffron-400); fill-opacity: .13; opacity: 0; }
.qr-orbit { fill: none; stroke: var(--qr-wire); stroke-width: 2; stroke-dasharray: 3 11; animation: qr-dash 9s linear infinite; }
.qr-wire { stroke: var(--qr-wire); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.1 10; animation: qr-flow 1.1s linear infinite, qr-fade .6s ease 1.1s backwards; }
.qr-pkt { fill: none; stroke-width: 18; stroke-linecap: round; stroke-dasharray: 0.1 200; opacity: 0; }
.qr-pkt--saffron { stroke: var(--saffron-400); }
.qr-pkt--leaf { stroke: #2f8f63; }
.qr-pkt--coral { stroke: var(--coral-500); }
.qr-core { transform-box: fill-box; transform-origin: center; animation: qr-pop .7s cubic-bezier(.2, .8, .2, 1.25) .05s backwards; }
.qr-core__disc { fill: var(--qr-core); }
.qr-core__ring { fill: none; stroke: var(--qr-mark); stroke-width: 3; stroke-dasharray: 2 9; transform-origin: 500px 500px; animation: qr-spin 24s linear infinite; }
.qr-ripple { fill: none; stroke: var(--saffron-400); stroke-width: 4; opacity: 0; transform-box: fill-box; transform-origin: center; }
.qr-node { transform-box: fill-box; transform-origin: center; animation: qr-pop .55s cubic-bezier(.2, .8, .2, 1.3) var(--in) backwards; }
.qr-node__disc { fill: var(--qr-node); stroke: var(--qr-node-line); stroke-width: 2; }
.qr-node__icon { color: var(--qr-icon); }
.qr-node__label { fill: var(--qr-label); font-family: var(--font-text); font-size: 20px; font-weight: 600; }
.qr-halo { fill: rgba(255, 178, 30, .16); stroke: var(--saffron-400); stroke-width: 4; opacity: 0; }
.qr-chips { position: absolute; inset: 0; pointer-events: none; }
.qr-chip { position: absolute; z-index: 1; padding: 5px 8px 4px; border-radius: 4px; background: var(--mint-300); color: #051f17; box-shadow: 2px 2px 0 0 #051f17; font-family: var(--font-pixel); font-size: 12px; line-height: 12px; text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translate(-50%, -50%) scale(.5); }
.qr-chip--hold { background: var(--saffron-400); }
.qr-chip--escalate { background: #ff8f78; }
.qr-chip--read { background: #ffffff; box-shadow: 2px 2px 0 0 #16543f; outline: 2px solid #16543f; outline-offset: -2px; }
.qr-feed { max-width: 560px; margin: 4px auto 0; }
.qr-feed__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.qr-feed__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-pixel); font-size: 12px; line-height: 12px; text-transform: uppercase; color: var(--mint-300); }
.qr-feed__tag i { width: 8px; height: 8px; background: var(--saffron-400); animation: qb-twinkle 1.2s steps(2, end) infinite; }
.qr-pips { display: flex; gap: 6px; }
.qr-pip { display: block; width: 18px; height: 4px; background: var(--qr-pip); }
.qr-caps { display: grid; margin: 0; padding: 0; list-style: none; }
.qr-cap { grid-area: 1 / 1; display: flex; align-items: flex-start; gap: 12px; opacity: 0; }
.qr-cap p { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.qr-cap b { color: var(--ink); font-weight: 650; }
.qr-tag { flex: none; margin-top: 2px; padding: 4px 6px 3px; border-radius: 3px; background: var(--mint-300); color: #051f17; font-family: var(--font-pixel); font-size: 11px; line-height: 11px; text-transform: uppercase; white-space: nowrap; }
.qr-tag--hold { background: var(--saffron-400); }
.qr-tag--escalate { background: #ff8f78; }
.qr-tag--read { background: var(--cream-50); }
/* hovering pauses the story, never the build-up */
.qr-stage:hover :is(.qr-ev-quad, .qr-ev-glow, .qr-ev-req, .qr-ev-res, .qr-ev-lab, .qr-chip, .qr-cap, .qr-pip, .qr-token, .qr-ripple) { animation-play-state: paused; }
.qr-stage:hover :is(.qr-arc, .qr-arc-text) { animation-play-state: running, paused; }
@keyframes qr-pop { from { opacity: 0; transform: scale(.55); } to { opacity: 1; transform: none; } }
@keyframes qr-zoom { from { opacity: 0; transform: scale(.9) rotate(-8deg); } to { opacity: 1; transform: none; } }
@keyframes qr-swing { from { opacity: 0; transform: rotate(-28deg) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes qr-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qr-spin { to { transform: rotate(360deg); } }
@keyframes qr-dash { to { stroke-dashoffset: -140; } }
@keyframes qr-flow { to { stroke-dashoffset: -10.1; } }
@media (max-width: 640px) {
  .qr-node__label { display: none; }
  .qr-arc-text { font-size: 40px; letter-spacing: 5px; }
  .qr-quad-text { font-size: 30px; letter-spacing: 4px; }
  .qr-chip { padding: 4px 6px 3px; font-size: 10px; line-height: 10px; }
  .qr-cap p { font-size: 14px; line-height: 21px; }
}
@media (prefers-reduced-motion: reduce) {
  .qr-stage *, .qs * { animation: none !important; }
  .qr-caps { gap: 10px; }
  .qr-cap { grid-area: auto; opacity: 1; }
  .qr-pips { display: none; }
}

.qs { display: block; width: 100%; height: auto; }
.qs-tile { fill: var(--card); stroke: var(--line-strong); stroke-width: 1.5; }
.qs-icon { color: var(--brand); }
.qs-label { fill: var(--ink-muted); font-family: var(--font-text); font-size: 14px; font-weight: 600; }
.qs-wire { stroke-width: 1.5; }
.qs-wire--mesh { stroke: var(--signal); stroke-opacity: .32; }
.qs-wire--hub { stroke: var(--brand); stroke-opacity: .45; stroke-dasharray: 2 5; }
.qs-pkt { fill: none; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 0.1 200; animation: qs-run var(--dur) linear var(--d) infinite; }
.qs-pkt--small { stroke-width: 6; }
.qs-pkt--coral { stroke: var(--coral-500); }
.qs-pkt--leaf { stroke: #2f8f63; }
.qs-pkt--saffron { stroke: var(--saffron-400); }
.qs-hub__disc { fill: #051f17; }
.qs-hub__ripple { fill: none; stroke: var(--saffron-400); stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: qs-ripple 2.4s ease-out infinite; }
@keyframes qs-run { 0% { stroke-dashoffset: 0; opacity: 0; } 8%, 90% { opacity: 1; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes qs-ripple { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.6); } }
.qr-core__mark { color: var(--qr-mark); }
.qs-hub__mark { color: #8ee8b9; }
@media (max-width: 640px) { .qs-label { font-size: 19px; } }
.qr-node__disc { transition: stroke .2s, stroke-width .2s; }
.qr-node:hover .qr-node__disc { stroke: var(--saffron-400); stroke-width: 4; }

/* ================================================================== console (app.qbrin.com) */
/* A clean, white working surface. One light theme on purpose: the console stays white even when the
   visitor's system is dark. Cards are white with a green accent bar at the title; the sidebar is a light
   mint with pixel clouds at its foot; charts are simple donuts and bars. Pixel art stays in icons and the owl. */

/* .qb-console--embed puts a console screen inside another page (the home page shows one) without turning that page white. */
.qb-app[data-theme], .qb-auth2[data-theme], .qb-console[data-theme] {
  --qc-bg: #f5f7f6; --qc-surface: #ffffff; --qc-sunk: #f7f9f8;
  --qc-line: #e3e8e5; --qc-line-2: #eef1ef; --qc-line-strong: #cbd3cf;
  --qc-ink: #14201b; --qc-ink-2: #33423c; --qc-muted: #5a6862; --qc-faint: #66726c;
  --qc-brand: #0f5c43; --qc-brand-hover: #0b4a36; --qc-brand-soft: #e5f3eb; --qc-brand-softer: #f2f9f5;
  --qc-side: #d4f0e1; --qc-side-2: #e9f8f0; --qc-side-line: #bfe3cf;
  --qc-accent: #ffb21e; --qc-accent-soft: #fff3d4;
  --qc-ok: #137a50; --qc-ok-fill: #1e9e6a; --qc-ok-soft: #e5f6ee;
  --qc-warn: #8f5500; --qc-warn-fill: #f5a524; --qc-warn-soft: #fff4dc;
  --qc-danger: #c9302c; --qc-danger-fill: #e5484d; --qc-danger-soft: #fdecec;
  --qc-info: #2c5fb8; --qc-info-fill: #4a7fd6; --qc-info-soft: #eaf1fd;
  --qc-radius: 8px; --qc-shadow: 0 1px 2px rgba(16, 32, 25, 0.04);
  /* shared design-system tokens, retuned so any DS part used inside the console matches */
  --paper: #f5f7f6; --paper-sunk: #eef2f0; --card: #ffffff; --card-sunk: #f7f9f8; --line: #e3e8e5; --line-strong: #cbd3cf;
  --ink: #14201b; --ink-muted: #5a6862; --brand: #0f5c43; --brand-soft: #e5f3eb; --focus: #0f5c43; --action: #0f5c43; --on-action: #ffffff;
  --signal: #c9302c; --signal-soft: #fdecec; --accent-soft: #fff3d4; --accent-ink: #7a4a00; --emphasis: #0f5c43;
  color-scheme: light; background-color: var(--qc-bg); color: var(--qc-ink); font-family: var(--font-text); font-size: 14px; line-height: 20px;
}
html:root:has(.qb-app, .qb-auth2, .qb-console:not(.qb-console--embed)) { --page: #f5f7f6; --page-sunk: #eef2f0; color-scheme: light; }

.qb-app { display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: 100vh; background-image: linear-gradient(to right, var(--qc-side) 0 243px, var(--qc-side-line) 243px 244px, transparent 244px); }
.qb-app__main { box-sizing: border-box; width: 100%; max-width: 1480px; min-width: 0; padding: 20px 32px 64px; }
:where(.qb-app, .qb-auth2, .qb-console) a:not([class]) { color: var(--qc-brand); font-weight: 600; text-decoration: none; }
:where(.qb-app, .qb-auth2, .qb-console) a:not([class]):hover { text-decoration: underline; text-underline-offset: 3px; }
:where(.qb-app, .qb-auth2, .qb-console) :focus-visible { outline: 2px solid var(--qc-brand); outline-offset: 2px; }
:where(.qb-app, .qb-console) code { font-family: var(--font-mono); font-size: 0.9em; }
.qb-mono { font-family: var(--font-mono); font-size: 12.5px; }
.qb-num { font-variant-numeric: tabular-nums; }
.qb-kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--qc-line-strong); border-radius: 5px; background: #fff; font-family: var(--font-text); font-size: 11px; line-height: 18px; font-weight: 600; color: var(--qc-muted); }
.qb-link { display: inline-flex; align-items: center; gap: 4px; color: var(--qc-brand, #0f5c43); font-size: 13px; line-height: 18px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.qb-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.qb-sample { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; font-size: 12.5px; line-height: 18px; color: var(--qc-faint); }

/* ---------- sidebar ---------- */
.qb-side { position: sticky; top: 0; box-sizing: border-box; display: flex; flex-direction: column; gap: 14px; height: 100vh; padding: 18px 14px 0; overflow: hidden; background: var(--qc-side); border-right: 1px solid var(--qc-side-line); }
.qb-side a { text-decoration: none; }
.qb-side__brand { display: inline-flex; align-self: flex-start; padding: 4px 8px 4px; color: var(--qc-ink); }
.qb-side__search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px; background: #fff; border: 1px solid #cfe3d7; border-radius: 8px; color: var(--qc-muted); font-size: 13.5px; }
.qb-side__search .qb-kbd { margin-left: auto; }
.qb-side__search:hover { border-color: #a9cfba; color: var(--qc-ink); }
.qb-side__nav { flex: 1 1 auto; display: grid; align-content: start; gap: 2px; margin: 0 -6px; padding: 2px 6px 8px; overflow-y: auto; scrollbar-width: thin; }
.qb-side__item { display: flex; align-items: center; gap: 10px; height: 35px; padding: 0 10px; border-radius: 8px; color: #28392f; font-size: 14px; line-height: 20px; font-weight: 600; }
.qb-side__item .qb-icon { flex: none; color: #3d6b56; }
.qb-side__item:hover { background: rgba(255, 255, 255, 0.65); }
.qb-side__item.is-on { background: #fff; color: var(--qc-ink); box-shadow: 0 1px 2px rgba(16, 32, 25, 0.07), 0 0 0 1px rgba(16, 32, 25, 0.03); }
.qb-side__item.is-on .qb-icon { color: var(--qc-brand); }
.qb-side__group.is-open > .qb-side__item { color: var(--qc-ink); }
.qb-side__chev { margin-left: auto; opacity: 0.55; }
.qb-side__group.is-open .qb-side__chev { transform: rotate(180deg); }
.qb-side__badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px; background: var(--qc-accent); color: #3b2900; font-size: 11px; line-height: 1; font-style: normal; font-weight: 700; }
.qb-side__item > span + .qb-side__badge, .qb-side__child > span + .qb-side__badge { margin-left: auto; }
.qb-side__chev + .qb-side__badge { margin-left: 6px; }
.qb-side__group.is-open { margin: 2px 0 4px; padding: 2px; border-radius: 10px; background: var(--qc-side-2); }
.qb-side__children { display: grid; gap: 1px; margin: 2px 0 4px 16px; padding-left: 10px; border-left: 1px solid var(--qc-side-line); }
.qb-side__child { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 7px; color: #3a4c44; font-size: 13.5px; font-weight: 500; }
.qb-side__child:hover { background: rgba(255, 255, 255, 0.6); color: var(--qc-ink); }
.qb-side__child.is-on { background: #fff; color: var(--qc-ink); font-weight: 700; box-shadow: 0 1px 2px rgba(16, 32, 25, 0.07); }
.qb-side__foot { position: relative; flex: none; min-height: 112px; margin: 0 -14px; padding: 12px 14px 0; border-top: 1px solid var(--qc-side-line); }
.qb-side__user { position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; }
.qb-side__user > span:last-child { min-width: 0; }
.qb-side__user b { display: block; font-size: 13px; line-height: 17px; }
.qb-side__user small { display: block; overflow: hidden; font-size: 12px; line-height: 16px; color: var(--qc-muted); text-overflow: ellipsis; white-space: nowrap; }
.qb-side__clouds { position: absolute; left: 0; right: 0; bottom: 0; height: 64px; overflow: hidden; pointer-events: none; }
.qb-side__cloud { position: absolute; }
.qb-side__cloud--a { left: -18px; bottom: 6px; }
.qb-side__cloud--b { right: 10px; bottom: 30px; }
.qb-side__cloud--c { left: 96px; bottom: -16px; }

/* ---------- avatar ---------- */
.qb-av { display: inline-grid; place-items: center; flex: none; box-sizing: border-box; border-radius: 50%; font-family: var(--font-text); font-weight: 700; line-height: 1; letter-spacing: 0.02em; }
.qb-av--brand { background: var(--qc-brand, #0f5c43); color: #fff; }
.qb-av--accent { background: #ffc85a; color: #3b2900; }
.qb-av--soft { background: var(--qc-brand-soft, #e5f3eb); color: var(--qc-brand, #0f5c43); }
.qb-av--dark { background: #14201b; color: #ffc85a; }

/* ---------- page heading ---------- */
.qb-head, .qb-ehead { margin: 0 0 22px; }
.qb-head__back { display: inline-flex; margin: 0 0 10px; color: var(--qc-muted); font-size: 13px; line-height: 18px; font-weight: 600; text-decoration: none; }
.qb-head__back:hover { color: var(--qc-brand); }
.qb-head__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 20px; }
.qb-head__copy { min-width: 0; max-width: 780px; }
.qb-head__title { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; color: var(--qc-ink); }
.qb-head__intro { margin: 6px 0 0; font-size: 14.5px; line-height: 22px; color: var(--qc-muted); }
.qb-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 10px; font-size: 13px; line-height: 18px; color: var(--qc-muted); }
.qb-head__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.qb-head__actions, .qb-ehead__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qb-head > .qb-tabs, .qb-ehead > .qb-tabs { margin-top: 20px; }
.qb-ehead__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; }
.qb-ehead__icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; box-sizing: border-box; border: 1px solid var(--qc-line); border-radius: 6px; background: #fff; color: var(--qc-ink-2); box-shadow: var(--qc-shadow); }
.qb-ehead__copy { flex: 1 1 280px; min-width: 0; }
.qb-ehead__copy h1 { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; color: var(--qc-ink); overflow-wrap: anywhere; }
.qb-ehead__copy p { margin: 3px 0 0; font-size: 13.5px; line-height: 20px; color: var(--qc-muted); }
.qb-ehead__pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.qb-daterange { display: inline-flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 220px; height: 36px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--qc-line-strong); border-radius: 8px; background: #fff; color: var(--qc-ink-2); font-size: 13.5px; font-weight: 500; white-space: nowrap; }
.qb-daterange .qb-icon { color: var(--qc-muted); }

/* ---------- tabs ---------- */
.qb-tabs { display: flex; overflow-x: auto; background: #fff; border: 1px solid var(--qc-line-strong); border-radius: 6px; scrollbar-width: none; }
.qb-tabs::-webkit-scrollbar { display: none; }
.qb-tabs a { position: relative; flex: none; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; box-sizing: border-box; border-right: 1px solid var(--qc-line); color: var(--qc-muted); font-size: 12.5px; line-height: 1; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; }
.qb-tabs a:hover { color: var(--qc-ink); background: var(--qc-sunk); }
.qb-tabs a.is-on { color: var(--qc-brand); font-weight: 700; box-shadow: inset 0 -3px 0 var(--qc-brand); }
.qb-tabs a:first-child.is-on { border-bottom-left-radius: 5px; }
.qb-tabs i { padding: 2px 7px; border-radius: 999px; background: var(--qc-line-2); color: var(--qc-muted); font-size: 11px; line-height: 14px; font-style: normal; letter-spacing: 0; }
.qb-tabs a.is-on i { background: var(--qc-brand-soft); color: var(--qc-brand); }

/* ---------- buttons, pills, statuses ---------- */
.qb-cbtn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: 8px; font-family: var(--font-text); font-size: 13.5px; line-height: 18px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.qb-cbtn--primary { background: var(--qc-brand, #0f5c43); color: #fff; }
.qb-cbtn--primary:hover { background: var(--qc-brand-hover, #0b4a36); }
.qb-cbtn--outline { background: #fff; border-color: var(--qc-line-strong, #cbd3cf); color: var(--qc-ink, #14201b); }
.qb-cbtn--outline:hover { border-color: var(--qc-ink-2, #33423c); }
.qb-cbtn--ghost { padding: 0 8px; background: transparent; color: var(--qc-brand, #0f5c43); }
.qb-cbtn--ghost:hover { background: var(--qc-brand-soft, #e5f3eb); }
.qb-cbtn--danger { background: #fff; border-color: #efc2c0; color: var(--qc-danger, #c9302c); }
.qb-cbtn--danger:hover { border-color: var(--qc-danger, #c9302c); }
.qb-cbtn--sm { height: 30px; padding: 0 10px; font-size: 12.5px; }
.qb-cbtn--caps { color: var(--qc-muted, #5a6862); font-size: 12.5px; letter-spacing: 0.07em; text-transform: uppercase; }
.qb-cbtn--full { width: 100%; height: 42px; font-size: 14.5px; }
.qb-pill { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 30px; padding: 0 16px; box-sizing: border-box; border: 1.5px solid; border-radius: 999px; font-size: 13px; line-height: 1; font-weight: 600; white-space: nowrap; }
.qb-pill .qb-icon { margin-left: -3px; }
.qb-pill--accent { background: #ffb21e; border-color: #ffb21e; color: #2e1f00; }
.qb-pill--ok { background: #8ee8b9; border-color: #14322a; color: #0b261c; }
.qb-pill--danger { background: #fdecec; border-color: #f2b8b5; color: #a8231e; }
.qb-pill--plain { background: #fff; border-color: #d3dad6; color: #33423c; }
.qb-pill--brand { background: #0f5c43; border-color: #0f5c43; color: #fff; }
.qb-pill--alert { height: 34px; padding: 0 16px; border-radius: 6px; background: #d0342f; border-color: #d0342f; color: #fff; }
.qb-table2 .qb-pill, .qb-board2 .qb-pill, .qb-card__actions .qb-pill:not(.qb-pill--alert) { height: 24px; padding: 0 10px; border-width: 1px; font-size: 12px; }
.qb-table2 .qb-pill--accent, .qb-board2 .qb-pill--accent { background: #fff3d1; border-color: #ffd67a; color: #6b4600; }
.qb-table2 .qb-pill--ok, .qb-board2 .qb-pill--ok { background: #e5f6ee; border-color: #b6e0c8; color: #0f5f3d; }
.qb-st { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--qc-ink-2); white-space: nowrap; }
.qb-st > i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #aab5b0; }
.qb-st--ok > i { background: var(--qc-ok-fill); }
.qb-st--warn > i { background: var(--qc-warn-fill); }
.qb-st--danger > i { background: var(--qc-danger-fill); }
.qb-st--info > i { background: var(--qc-info-fill); }
.qb-verdict2 { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px 0 6px; box-sizing: border-box; border-radius: 6px; font-size: 11px; line-height: 1; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.qb-verdict2--ok { background: var(--qc-ok-soft); color: var(--qc-ok); }
.qb-verdict2--warn { background: var(--qc-warn-soft); color: var(--qc-warn); }
.qb-verdict2--danger { background: var(--qc-danger-soft); color: var(--qc-danger); }

/* ---------- card ---------- */
.qb-card { box-sizing: border-box; min-width: 0; background: #fff; border: 1px solid var(--qc-line); border-radius: var(--qc-radius); box-shadow: var(--qc-shadow); }
.qb-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 12px; padding: 18px 22px 0; }
.qb-card__title { display: grid; gap: 2px; min-width: 0; }
.qb-card__title h2 { position: relative; margin: 0; font-family: var(--font-text); font-size: 16.5px; line-height: 24px; font-weight: 700; color: var(--qc-ink); }
.qb-card__title h2::before { content: ""; position: absolute; left: -23px; top: 0; bottom: 0; width: 5px; border-radius: 0 3px 3px 0; background: var(--qc-brand); }
.qb-card__title p { margin: 0; font-size: 13px; line-height: 18px; color: var(--qc-muted); }
.qb-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qb-card__body { padding: 18px 22px 22px; }
.qb-card__body.is-flush { padding: 16px 0 0; }
.qb-card > .qb-card__body.is-flush:first-child { padding-top: 0; }
.qb-card--accent { background: #fffcf3; border-color: #fbe2a7; }
.qb-card--accent .qb-card__title h2::before { background: var(--qc-accent); }
.qb-card--brand { background: var(--qc-brand-softer); border-color: #cfe6d9; }
.qb-card--dark { background: var(--qc-sunk); }

/* ---------- numbers ---------- */
.qb-kpis { display: grid; gap: 16px; margin: 0 0 20px; }
.qb-kpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qb-kpis--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qb-kpis--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qb-kpis--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.qb-kpi { box-sizing: border-box; min-width: 0; padding: 16px 18px; background: #fff; border: 1px solid var(--qc-line); border-radius: var(--qc-radius); box-shadow: var(--qc-shadow); }
.qb-kpi__label { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--qc-muted); }
.qb-kpi__label .qb-icon { color: var(--qc-brand); }
.qb-kpi__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 8px; }
.qb-kpi__value { margin: 0; font-family: var(--font-display); font-size: 30px; line-height: 34px; font-weight: 700; letter-spacing: -0.01em; color: var(--qc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qb-kpi__value small { margin-left: 3px; font-family: var(--font-text); font-size: 15px; font-weight: 600; color: var(--qc-muted); }
.qb-kpi__foot { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 8px 0 0; font-size: 12.5px; line-height: 18px; color: var(--qc-muted); }
.qb-kpi__delta { font-weight: 700; }
.qb-kpi__delta.is-ok { color: var(--qc-ok); }
.qb-kpi__delta.is-warn { color: var(--qc-warn); }
.qb-kpi__delta.is-danger { color: var(--qc-danger); }
.qb-kpi__delta.is-neutral { color: var(--qc-muted); }
.qb-kpi__delta.is-info { color: var(--qc-info); }
.qb-sparkline { display: inline-flex; flex: none; align-items: flex-end; gap: 3px; height: 26px; }
.qb-sparkline i { width: 5px; border-radius: 2px 2px 0 0; background: #cde6d8; }
.qb-sparkline i.is-last { background: var(--qc-brand); }
.qb-counts { display: grid; gap: 18px 16px; }
.qb-counts--1 { grid-template-columns: minmax(0, 1fr); }
.qb-counts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qb-counts--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qb-counts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qb-counts__item { display: flex; align-items: center; gap: 12px; min-width: 0; color: inherit; text-decoration: none; }
.qb-counts__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--qc-brand-soft); color: var(--qc-brand); }
.qb-counts__txt { min-width: 0; }
.qb-counts__txt b { display: block; font-family: var(--font-display); font-size: 22px; line-height: 26px; font-weight: 700; color: var(--qc-ink); font-variant-numeric: tabular-nums; }
.qb-counts__txt small { display: block; font-size: 13px; line-height: 18px; color: var(--qc-muted); }
a.qb-counts__item:hover b { color: var(--qc-brand); }
.qb-srcgrid { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px 22px; align-items: stretch; }
.qb-srcgrid__total { display: grid; align-content: center; padding-right: 22px; border-right: 1px solid var(--qc-line); }
.qb-srcgrid__total b { font-family: var(--font-display); font-size: 34px; line-height: 38px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qb-srcgrid__total small { font-size: 13px; line-height: 18px; color: var(--qc-muted); }
.qb-srcgrid__items { display: grid; grid-template-columns: repeat(auto-fill, minmax(138px, 1fr)); gap: 14px 16px; }
.qb-srcgrid__item { display: flex; align-items: center; gap: 10px; min-width: 0; }
.qb-srcgrid__item > span:last-child { min-width: 0; }
.qb-srcgrid__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; box-sizing: border-box; border: 1px solid var(--qc-line); border-radius: 8px; background: #fff; color: var(--qc-brand); }
.qb-srcgrid__item b { display: block; font-size: 15px; line-height: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qb-srcgrid__item small { display: block; overflow: hidden; font-size: 12px; line-height: 16px; color: var(--qc-muted); text-overflow: ellipsis; white-space: nowrap; }
.qb-mini2 { display: grid; gap: 2px; }
.qb-mini2 b { font-family: var(--font-display); font-size: 20px; line-height: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qb-mini2 small { font-size: 12px; line-height: 16px; color: var(--qc-muted); }
.qb-mini2.is-signal b, .qb-mini2.is-danger b { color: var(--qc-danger); }

/* ---------- charts ---------- */
.qb-donut svg { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; overflow: visible; }
.qb-donut__total { font-family: var(--font-display); font-size: 30px; font-weight: 700; fill: var(--qc-ink); }
.qb-donut__label { font-size: 12px; font-weight: 600; fill: var(--qc-muted); }
.qb-donut__call { font-size: 13px; font-weight: 600; fill: var(--qc-ink-2); }
.qb-clegend { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; margin: 14px 0 0; padding: 0; list-style: none; }
.qb-clegend li { display: flex; align-items: flex-start; justify-content: center; gap: 8px; padding: 0 10px; border-left: 1px solid var(--qc-line); }
.qb-clegend li:first-child { border-left: 0; }
.qb-clegend i { flex: none; width: 12px; height: 12px; margin-top: 3px; border-radius: 50%; }
.qb-clegend span { display: grid; }
.qb-clegend b { font-size: 15px; line-height: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qb-clegend small { font-size: 12.5px; line-height: 16px; color: var(--qc-muted); }
.qb-clegend--inline { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 20px; margin-top: 6px; }
.qb-clegend--inline li { align-items: center; padding: 0; border: 0; }
.qb-clegend--inline i { margin-top: 0; width: 10px; height: 10px; border-radius: 3px; }
.qb-bars2 { display: grid; gap: 0; }
.qb-bars2__row, .qb-bars2__axis { display: grid; grid-template-columns: minmax(110px, 200px) minmax(0, 1fr); gap: 0 16px; align-items: center; }
.qb-bars2__row { min-height: 50px; }
.qb-bars2__row > .qb-bars2__label { align-self: stretch; border-bottom: 1px solid var(--qc-line-2); }
.qb-bars2__row:last-of-type > .qb-bars2__label { border-bottom: 0; }
.qb-bars2__axis { margin-top: 2px; }
.qb-bars2__label { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 0; box-sizing: border-box; }
.qb-bars2__label > span:last-child { min-width: 0; }
.qb-bars2__label b { display: block; overflow: hidden; font-size: 13.5px; line-height: 18px; font-weight: 600; color: var(--qc-ink); text-overflow: ellipsis; white-space: nowrap; }
.qb-bars2__label small { display: block; font-size: 12px; line-height: 16px; color: var(--qc-muted); }
.qb-bars2__icon { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 7px; background: #f0f4f2; color: var(--qc-brand); }
.qb-bars2__track { position: relative; align-self: stretch; min-height: 50px; }
.qb-bars2__track::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 1.5px solid var(--qc-brand); }
.qb-bars2__grid { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px dashed #b9c4bf; }
.qb-bars2__bar { position: absolute; left: 0; right: 0; top: 50%; display: flex; height: 18px; margin-top: -9px; }
.qb-bars2__bar i { height: 100%; }
.qb-bars2__bar i:first-child { border-radius: 3px 0 0 3px; }
.qb-bars2__bar i:last-child { border-radius: 0 3px 3px 0; }
.qb-bars2__bar i:only-child { border-radius: 3px; }
.qb-bars2__ticks { position: relative; height: 18px; }
.qb-bars2__ticks i { position: absolute; top: 0; transform: translateX(-50%); font-size: 11.5px; line-height: 18px; font-style: normal; color: var(--qc-faint); font-variant-numeric: tabular-nums; }
.qb-bars2__ticks i:first-child { transform: none; }
.qb-bars2__ticks i:last-child { transform: translateX(-100%); }
.qb-bars2__title { margin: 2px 0 0; padding-left: min(216px, 40%); text-align: center; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--qc-muted); }
.qb-score { display: grid; justify-items: center; gap: 12px; }
.qb-score__ring { box-sizing: border-box; display: grid; justify-items: center; align-content: center; width: 164px; height: 164px; border: 3px solid var(--qc-ok-fill); border-radius: 50%; background: #dcf3e6; text-align: center; }
.qb-score__ring.is-warn { border-color: var(--qc-warn-fill); background: #fff0cc; }
.qb-score__ring.is-danger { border-color: var(--qc-danger-fill); background: #fde2e2; }
.qb-score__owl { margin-bottom: 4px; }
.qb-score__ring b { font-family: var(--font-display); font-size: 32px; line-height: 34px; font-weight: 700; color: var(--qc-ink); font-variant-numeric: tabular-nums; }
.qb-score__ring small { max-width: 120px; font-size: 12.5px; line-height: 16px; font-weight: 600; color: var(--qc-muted); }
.qb-statlist { margin: 0; padding: 0; list-style: none; }
.qb-statlist li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; font-size: 14px; line-height: 20px; }
.qb-statlist li:first-child { padding-top: 2px; }
.qb-statlist li:last-child { padding-bottom: 2px; }
.qb-statlist .qb-icon { color: var(--qc-faint); }
.qb-statlist span { color: var(--qc-muted); }
.qb-statlist b { font-weight: 700; color: var(--qc-ink); text-align: right; }
.qb-recs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qb-recs__col { display: grid; align-content: start; justify-items: start; gap: 4px; padding: 2px 20px; border-left: 1px solid var(--qc-line); }
.qb-recs__col:first-child { padding-left: 0; border-left: 0; }
.qb-recs__col .qb-icon { margin-bottom: 6px; color: var(--qc-brand); }
.qb-recs__col b { font-size: 14px; line-height: 20px; font-weight: 700; }
.qb-recs__col strong { font-family: var(--font-display); font-size: 28px; line-height: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qb-recs__col p { margin: 0; font-size: 13px; line-height: 19px; color: var(--qc-muted); }
.qb-recs__col .qb-link { margin-top: 6px; }
.qb-meter2__top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: var(--qc-muted); }
.qb-meter2__top b { font-family: var(--font-display); font-size: 26px; line-height: 30px; font-weight: 700; color: var(--qc-ink); }
.qb-meter2__top small { font-family: var(--font-text); font-size: 14px; color: var(--qc-muted); }
.qb-meter2__bar { height: 8px; margin: 8px 0 4px; border-radius: 999px; background: var(--qc-line-2); overflow: hidden; }
.qb-meter2__bar i { display: block; height: 100%; border-radius: 999px; background: var(--qc-ok-fill); }
.qb-meter2__bar.is-warn i { background: var(--qc-warn-fill); }
.qb-meter2__bar.is-danger i { background: var(--qc-danger-fill); }
.qb-meter2__parts { margin: 10px 0 0; padding: 0; list-style: none; }
.qb-meter2__parts li { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--qc-line-2); font-size: 13px; line-height: 18px; }
.qb-meter2__parts li .qb-icon { margin-top: 1px; color: var(--qc-ok-fill); }
.qb-meter2__parts li.is-missing .qb-icon { color: var(--qc-warn-fill); }
.qb-meter2__parts li.is-risk .qb-icon { color: var(--qc-danger-fill); }
.qb-meter2__parts li.is-unknown .qb-icon { color: var(--qc-faint); }
.qb-meter2__parts span { font-weight: 600; }
.qb-meter2__parts small { display: block; font-weight: 400; color: var(--qc-muted); }
.qb-meter2__parts em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--qc-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qb-meter2__note { margin: 10px 0 0; font-size: 12.5px; line-height: 18px; color: var(--qc-muted); }

/* ---------- tables & rows ---------- */
.qb-table2 { overflow-x: auto; background: #fff; border: 1px solid var(--qc-line); border-radius: var(--qc-radius); box-shadow: var(--qc-shadow); }
.qb-card__body .qb-table2 { border: 0; border-radius: 0; box-shadow: none; }
.qb-card__body.is-flush .qb-table2 { border-radius: 0 0 var(--qc-radius) var(--qc-radius); }
.qb-card__body.is-flush .qb-table2 th:first-child, .qb-card__body.is-flush .qb-table2 td:first-child { padding-left: 22px; }
.qb-card__body.is-flush .qb-table2 th:last-child, .qb-card__body.is-flush .qb-table2 td:last-child { padding-right: 22px; }
.qb-table2 table { width: 100%; border-collapse: collapse; font-size: 13.5px; line-height: 19px; }
.qb-table2 th { padding: 12px 16px 10px; background: #fff; border-bottom: 1px solid #c9d1cd; color: var(--qc-ink); font-size: 11.5px; line-height: 16px; font-weight: 700; letter-spacing: 0.05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.qb-table2 td { padding: 12px 16px; border-bottom: 1px solid var(--qc-line-2); color: var(--qc-ink-2); vertical-align: middle; }
.qb-table2 tbody tr:last-child td { border-bottom: 0; }
.qb-table2 tbody tr:hover td { background: #fbfcfb; }
.qb-table2 tr.is-selected td { background: var(--qc-brand-softer); }
.qb-table2 tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--qc-brand); }
.qb-table2 .is-right { text-align: right; }
.qb-table2 .is-center { text-align: center; }
.qb-table2 td.is-right { font-variant-numeric: tabular-nums; white-space: nowrap; }
.qb-cell2 .qb-av + .qb-cell2__text b { white-space: nowrap; }
.qb-table2__caption { margin: 0; padding: 10px 16px; border-top: 1px solid var(--qc-line-2); font-size: 12.5px; line-height: 18px; color: var(--qc-muted); }
.qb-cell2 { display: inline-flex; align-items: center; gap: 10px; min-width: 0; vertical-align: middle; }
.qb-cell2__icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; background: #f0f4f2; color: var(--qc-brand); }
.qb-cell2__icon.is-danger { background: var(--qc-danger-soft); color: var(--qc-danger-fill); }
.qb-cell2__icon.is-warn { background: var(--qc-warn-soft); color: #c27c00; }
.qb-cell2__icon.is-ok { background: var(--qc-ok-soft); color: var(--qc-ok-fill); }
.qb-cell2__text { display: grid; min-width: 0; }
.qb-cell2__text a { display: grid; color: inherit; font-weight: 400; text-decoration: none; }
.qb-cell2__text a:hover b { color: var(--qc-brand); text-decoration: underline; text-underline-offset: 3px; }
.qb-cell2 b { font-weight: 600; color: var(--qc-ink); }
.qb-cell2 b.is-mono { font-family: var(--font-mono); font-size: 12.5px; }
.qb-cell2 small { font-size: 12px; line-height: 16px; color: var(--qc-muted); }
.qb-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0 0 14px; }
.qb-filters__right { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-left: auto; }
.qb-input { box-sizing: border-box; display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border: 1px solid var(--qc-line-strong); border-radius: 8px; background: #fff; color: var(--qc-muted); }
.qb-input input { flex: 1 1 auto; width: 100%; min-width: 0; height: 100%; border: 0; background: none; color: var(--qc-ink); font: inherit; font-size: 13.5px; outline: none; }
.qb-input:focus-within { border-color: var(--qc-brand); box-shadow: 0 0 0 3px var(--qc-brand-soft); }
.qb-input--search { flex: 1 1 280px; max-width: 420px; }
.qb-seg2 { display: inline-flex; flex-wrap: wrap; padding: 3px; gap: 2px; border: 1px solid var(--qc-line); border-radius: 9px; background: #fff; }
.qb-seg2 button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 0; border-radius: 6px; background: none; color: var(--qc-muted); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; }
.qb-seg2 button:hover { color: var(--qc-ink); }
.qb-seg2 button.is-on { background: var(--qc-brand-soft); color: var(--qc-brand); }
.qb-seg2 i { font-size: 11.5px; font-style: normal; font-weight: 600; color: var(--qc-faint); }
.qb-seg2 button.is-on i { color: var(--qc-brand); }
.qb-seg2--sm button { height: 26px; padding: 0 9px; font-size: 12.5px; }
.qb-src2 { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; height: 24px; padding: 0 8px 0 6px; box-sizing: border-box; border: 1px solid var(--qc-line); border-radius: 6px; background: #f7f9f8; color: var(--qc-ink-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qb-src2 .qb-icon { flex: none; color: var(--qc-brand); }
.qb-kv2 { display: grid; margin: 0; }
.qb-kv2 > div { display: grid; grid-template-columns: minmax(96px, 38%) minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--qc-line-2); }
.qb-kv2 > div:first-child { padding-top: 0; }
.qb-kv2 > div:last-child { border-bottom: 0; padding-bottom: 0; }
.qb-kv2 dt { font-size: 13px; line-height: 20px; color: var(--qc-muted); }
.qb-kv2 dd { margin: 0; min-width: 0; font-size: 13.5px; line-height: 20px; font-weight: 600; color: var(--qc-ink); overflow-wrap: anywhere; }

/* ---------- timeline, notices, empty ---------- */
.qb-tl2 { position: relative; margin: 0; padding: 0; list-style: none; }
.qb-tl2 > li { position: relative; padding: 0 0 18px 26px; }
.qb-tl2 > li:last-child { padding-bottom: 0; }
.qb-tl2 > li::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: -2px; border-left: 2px solid var(--qc-line); }
.qb-tl2 > li:last-child::before { display: none; }
.qb-tl2__dot { position: absolute; left: 0; top: 3px; width: 12px; height: 12px; box-sizing: border-box; border-radius: 50%; background: var(--qc-ok-fill); box-shadow: 0 0 0 3px #fff; }
.qb-tl2 > li.is-accent .qb-tl2__dot { background: var(--qc-warn-fill); }
.qb-tl2 > li.is-signal .qb-tl2__dot { background: var(--qc-danger-fill); }
.qb-tl2 > li.is-neutral .qb-tl2__dot { background: #fff; border: 2px solid var(--qc-line-strong); }
.qb-tl2__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.qb-tl2__kind { font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--qc-faint); }
.qb-tl2 > li.is-accent .qb-tl2__kind { color: var(--qc-warn); }
.qb-tl2__time { font-size: 12px; line-height: 16px; color: var(--qc-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qb-tl2__title { margin-top: 2px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--qc-ink); }
.qb-tl2__text { margin-top: 2px; font-size: 13px; line-height: 19px; color: var(--qc-muted); }
.qb-note2 { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid; border-radius: 8px; font-size: 13.5px; line-height: 20px; }
.qb-note2 > .qb-icon { flex: none; margin-top: 2px; }
.qb-note2 b { display: block; font-weight: 700; color: var(--qc-ink); }
.qb-note2 p { margin: 0; color: var(--qc-ink-2); }
.qb-note2 > div { flex: 1 1 auto; min-width: 0; }
.qb-note2__action { flex: none; align-self: center; }
.qb-note2--brand { background: var(--qc-brand-softer); border-color: #cfe6d9; }
.qb-note2--brand > .qb-icon { color: var(--qc-ok-fill); }
.qb-note2--accent { background: #fff9e8; border-color: #fbe0a0; }
.qb-note2--accent > .qb-icon { color: #c27c00; }
.qb-note2--signal { background: var(--qc-danger-soft); border-color: #f4c7c5; }
.qb-note2--signal > .qb-icon { color: var(--qc-danger-fill); }
.qb-note2--neutral { background: #f6f8f7; border-color: var(--qc-line); }
.qb-note2--neutral > .qb-icon { color: var(--qc-muted); }
.qb-empty2 { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; text-align: center; }
.qb-empty2 > .qb-icon { color: #b5c3bc; }
.qb-empty2 b { font-size: 15px; line-height: 22px; }
.qb-empty2 p { max-width: 420px; margin: 0; font-size: 13px; line-height: 19px; color: var(--qc-muted); }
.qb-empty2 > div { margin-top: 8px; }

/* ---------- board & gantt ---------- */
.qb-board2 { display: grid; gap: 14px; overflow-x: auto; padding-bottom: 4px; }
.qb-board2__col { display: grid; align-content: start; gap: 10px; padding: 12px; border-radius: var(--qc-radius); background: #eef2f0; }
.qb-board2__col > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 4px 2px; }
.qb-board2__col > header b { font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--qc-ink-2); }
.qb-board2__col > header i { min-width: 22px; padding: 1px 7px; box-sizing: border-box; border-radius: 999px; background: #fff; color: var(--qc-muted); font-size: 12px; font-style: normal; font-weight: 700; text-align: center; }
.qb-board2__card { display: grid; gap: 6px; padding: 12px; background: #fff; border: 1px solid var(--qc-line); border-radius: 8px; color: inherit; text-decoration: none; box-shadow: var(--qc-shadow); }
a.qb-board2__card:hover { border-color: #a9cfba; }
.qb-board2__card.is-signal { box-shadow: inset 3px 0 0 var(--qc-danger-fill), var(--qc-shadow); }
.qb-board2__card > b { font-size: 13.5px; line-height: 19px; font-weight: 600; color: var(--qc-ink); }
.qb-board2__card > small { font-size: 12px; line-height: 16px; color: var(--qc-muted); }
.qb-board2__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.qb-board2__foot { display: flex; align-items: center; gap: 6px; margin-top: 2px; font-size: 12px; color: var(--qc-muted); }
.qb-board2__foot em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--qc-ink-2); }
.qb-gantt2 { overflow-x: auto; padding: 14px 16px 16px; background: #fff; border: 1px solid var(--qc-line); border-radius: var(--qc-radius); }
.qb-gantt2__head, .qb-gantt2__row { display: grid; grid-template-columns: 230px minmax(420px, 1fr); align-items: center; }
.qb-gantt2__head { grid-template-columns: 230px repeat(var(--n), minmax(20px, 1fr)); padding-bottom: 8px; border-bottom: 1px solid var(--qc-line); font-size: 11.5px; color: var(--qc-faint); text-align: center; }
.qb-gantt2__head .is-today { color: var(--qc-brand); font-weight: 700; }
.qb-gantt2__row { min-height: 40px; border-bottom: 1px solid var(--qc-line-2); }
.qb-gantt2__row:last-child { border-bottom: 0; }
.qb-gantt2__label { padding-right: 12px; overflow: hidden; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.qb-gantt2__track { position: relative; height: 40px; }
.qb-gantt2__today { position: absolute; top: 0; bottom: 0; border-left: 2px solid var(--qc-accent); }
.qb-gantt2__bar { position: absolute; top: 13px; height: 14px; border-radius: 4px; background: var(--qc-ok-fill); }
.qb-gantt2__bar.is-signal { background: var(--qc-danger-fill); }
.qb-gantt2__bar.is-accent { background: var(--qc-warn-fill); }
.qb-gantt2__bar.is-neutral { background: #b8c4be; }

/* ---------- conversation & composer ---------- */
.qb-composer2__box { background: #fff; border: 1px solid var(--qc-line-strong); border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 32, 25, 0.05), 0 8px 24px -16px rgba(16, 32, 25, 0.25); }
.qb-composer2__box:focus-within { border-color: var(--qc-brand); box-shadow: 0 0 0 3px var(--qc-brand-soft); }
.qb-composer2 textarea { display: block; box-sizing: border-box; width: 100%; min-height: 64px; padding: 14px 16px 6px; border: 0; background: none; color: var(--qc-ink); font: inherit; font-size: 15px; line-height: 22px; resize: vertical; outline: none; }
.qb-composer2__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 10px 10px; }
.qb-composer2__hint { flex: 1 1 200px; font-size: 12.5px; line-height: 18px; color: var(--qc-muted); }
.qb-composer2__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.qb-chip2 { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; box-sizing: border-box; border: 1px solid var(--qc-line); border-radius: 999px; background: #fff; color: var(--qc-ink-2); font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; text-decoration: none; }
.qb-chip2:hover { border-color: #a9cfba; color: var(--qc-ink); }
.qb-chip2.is-on { border-color: var(--qc-brand); background: var(--qc-brand-soft); color: var(--qc-brand); font-weight: 600; }
.qb-turn2 { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 16px 0; }
.qb-turn2 + .qb-turn2 { border-top: 1px solid var(--qc-line-2); }
.qb-turn2__av { display: grid; place-items: center; width: 32px; height: 32px; }
.qb-turn2--qbrin .qb-turn2__av { box-sizing: border-box; border: 1px solid #cfe6d9; border-radius: 50%; background: var(--qc-brand-soft); color: var(--qc-brand); }
.qb-turn2__who { display: flex; align-items: baseline; gap: 8px; margin: 0 0 4px; font-size: 13px; line-height: 18px; font-weight: 700; }
.qb-turn2__who small { font-weight: 500; color: var(--qc-faint); }
.qb-turn2__text { font-size: 14.5px; line-height: 23px; color: var(--qc-ink); }
.qb-turn2__text p { margin: 0 0 8px; }
.qb-turn2__text p:last-child { margin-bottom: 0; }
.qb-turn2__sources { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.qb-turn2__sources li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.5px; color: var(--qc-muted); }
.qb-turn2__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--qc-line); font-size: 12.5px; color: var(--qc-muted); }
.qb-num-cite, .qb-app .qb-cite, .qb-auth2 .qb-cite, .qb-console .qb-cite { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: var(--qc-brand-soft); color: var(--qc-brand); font-family: var(--font-text); font-size: 11px; line-height: 1; font-style: normal; font-weight: 700; vertical-align: 1px; }

/* ---------- approvals, split, drawer ---------- */
.qb-approval2 { display: grid; gap: 10px; padding: 18px 20px; background: #fff; border: 1px solid var(--qc-line); border-radius: var(--qc-radius); box-shadow: var(--qc-shadow); }
.qb-approval2.is-selected { border-color: #8fc6a8; box-shadow: 0 0 0 3px var(--qc-brand-soft); }
.qb-approval2 > header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.qb-approval2 > header b { flex: 1 1 260px; font-size: 15.5px; line-height: 22px; font-weight: 700; }
.qb-approval2 > header small { font-size: 12.5px; color: var(--qc-faint); }
.qb-approval2__who { margin: 0; font-size: 13px; color: var(--qc-muted); }
.qb-approval2__who b { color: var(--qc-ink); }
.qb-approval2__why { margin: 0; font-size: 14px; line-height: 21px; color: var(--qc-ink-2); }
.qb-approval2__verbatim { margin: 0; padding: 12px 14px; overflow-x: auto; border: 1px solid var(--qc-line); border-radius: 8px; background: #f7f9f8; color: var(--qc-ink); font-family: var(--font-mono); font-size: 12.5px; line-height: 20px; white-space: pre; }
.qb-approval2__ev { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.qb-approval2__ev li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 19px; color: var(--qc-ink-2); }
.qb-approval2__ev .qb-icon { flex: none; margin-top: 1px; color: var(--qc-ok-fill); }
.qb-approval2 > footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.qb-split2 { display: grid; gap: 20px; align-items: start; }
.qb-split2--wide { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
.qb-split2--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qb-split2--drawer { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); }
.qb-split2__main, .qb-split2__side { display: grid; align-content: start; gap: 20px; min-width: 0; }
.qb-drawer2 { display: grid; background: #fff; border: 1px solid var(--qc-line); border-radius: var(--qc-radius); box-shadow: 0 1px 2px rgba(16, 32, 25, 0.05), 0 16px 40px -24px rgba(16, 32, 25, 0.35); }
.qb-drawer2 > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; border-bottom: 1px solid var(--qc-line-2); }
.qb-drawer2 > header p { margin: 0 0 4px; font-size: 11.5px; line-height: 16px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--qc-faint); }
.qb-drawer2 > header h2 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; }
.qb-drawer2 > header > a { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 8px; color: var(--qc-muted); }
.qb-drawer2 > header > a:hover { background: var(--qc-line-2); color: var(--qc-ink); }
.qb-drawer2__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.qb-drawer2__body { display: grid; gap: 18px; padding: 16px 20px 18px; }
.qb-drawer2__body h3 { margin: 0 0 8px; font-size: 11.5px; line-height: 16px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--qc-faint); }
.qb-drawer2 > footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 20px 18px; border-top: 1px solid var(--qc-line-2); }

/* ---------- sign-in & onboarding ---------- */
.qb-auth2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100vh; background: #fff; }
.qb-auth2__form { display: flex; flex-direction: column; padding: 28px 48px 24px; }
.qb-auth2__brand { align-self: flex-start; color: var(--qc-ink); text-decoration: none; }
.qb-auth2__inner { box-sizing: border-box; width: 100%; max-width: 440px; margin: auto; padding: 36px 0; }
.qb-auth2__inner > h1 { margin: 0 0 8px; font-family: var(--font-display); font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -0.01em; }
.qb-auth2__inner > p { margin: 0 0 22px; font-size: 15px; line-height: 23px; color: var(--qc-muted); }
.qb-auth2__foot { display: flex; gap: 18px; margin: 0; font-size: 12.5px; }
.qb-auth2__foot a { color: var(--qc-muted); text-decoration: none; }
.qb-auth2__foot a:hover { color: var(--qc-ink); }
.qb-auth2__side { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 56px 56px 200px; overflow: hidden; background: var(--qc-side); border-left: 1px solid var(--qc-side-line); }
.qb-auth2__copy { position: relative; z-index: 1; max-width: 460px; }
.qb-auth2__copy h2 { margin: 0 0 12px; font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.01em; }
.qb-auth2__copy p { margin: 0; font-size: 16px; line-height: 25px; color: var(--qc-ink-2); }
.qb-auth2__art { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: center; gap: 24px; padding: 0 24px 36px; pointer-events: none; }
.qb-auth2__cloud { margin-bottom: 40px; }
.qb-auth2__cloud--sm { margin-bottom: 96px; }
.qb-stepper2 { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0 0 26px; padding: 0; list-style: none; }
.qb-stepper2 li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--qc-faint); }
.qb-stepper2 i { display: grid; place-items: center; width: 24px; height: 24px; box-sizing: border-box; border: 1.5px solid var(--qc-line-strong); border-radius: 50%; font-size: 12px; font-style: normal; font-weight: 700; }
.qb-stepper2 li.is-done { color: var(--qc-ink-2); }
.qb-stepper2 li.is-done i { border-color: var(--qc-brand); background: var(--qc-brand); color: #fff; }
.qb-stepper2 li.is-on { color: var(--qc-ink); }
.qb-stepper2 li.is-on i { border-color: var(--qc-brand); color: var(--qc-brand); box-shadow: 0 0 0 3px var(--qc-brand-soft); }

/* ---------- phone tab bar ---------- */
.qb-tabbar { display: none; }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .qb-kpis--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qb-split2--wide, .qb-split2--drawer { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .qb-kpis--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qb-split2--even { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .qb-app { display: block; padding-bottom: 76px; background-image: none; }
  .qb-side { position: sticky; top: 0; z-index: 20; flex-direction: row; align-items: center; gap: 12px; height: auto; padding: 10px 16px; border-right: 0; border-bottom: 1px solid var(--qc-side-line); }
  .qb-side__nav, .qb-side__foot { display: none; }
  .qb-side__brand { align-self: center; padding: 2px 0; }
  .qb-side__search { flex: 1 1 auto; max-width: 360px; margin-left: auto; }
  .qb-app__main { padding: 16px 16px 40px; }
  .qb-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--qc-line); box-shadow: 0 -6px 20px -16px rgba(16, 32, 25, 0.4); }
  .qb-tabbar a { display: grid; justify-items: center; gap: 3px; padding: 4px 2px; color: var(--qc-muted); font-size: 11px; line-height: 14px; font-weight: 600; text-align: center; text-decoration: none; }
  .qb-tabbar a.is-on { color: var(--qc-brand); }
  .qb-auth2 { grid-template-columns: minmax(0, 1fr); }
  .qb-auth2__side { display: none; }
  .qb-auth2__form { padding: 20px 16px; }
  .qb-head__title { font-size: 24px; line-height: 30px; }
  .qb-recs { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .qb-recs__col { padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--qc-line); }
  .qb-recs__col:first-child { padding-top: 0; border-top: 0; }
  .qb-srcgrid { grid-template-columns: minmax(0, 1fr); }
  .qb-srcgrid__total { padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--qc-line); }
}
@media (max-width: 640px) {
  .qb-kpis--3, .qb-kpis--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qb-kpis { gap: 12px; }
  .qb-kpi { padding: 14px; }
  .qb-kpi__value { font-size: 26px; line-height: 30px; }
  .qb-kpi__row .qb-sparkline { display: none; }
  .qb-counts--3, .qb-counts--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qb-card__head { padding: 14px 16px 0; }
  .qb-card__title h2::before { left: -17px; }
  .qb-tabs a { padding: 0 14px; height: 40px; }
  .qb-clegend { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0; }
  .qb-clegend li { justify-content: flex-start; border-left: 0; }
  .qb-clegend--inline { gap: 8px 16px; }
  .qb-bars2__title { padding-left: 0; }
  .qb-daterange { min-width: 0; }
  .qb-card__body.is-flush .qb-table2 th:first-child, .qb-card__body.is-flush .qb-table2 td:first-child { padding-left: 16px; }
  .qb-card__body { padding: 14px 16px 16px; }
  .qb-card__body.is-flush { padding: 12px 0 0; }
  .qb-table2 th.is-hide-sm, .qb-table2 td.is-hide-sm { display: none; }
  .qb-table2 th, .qb-table2 td { padding-left: 12px; padding-right: 12px; }
  .qb-bars2__row, .qb-bars2__axis { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .qb-bars2__row { min-height: 0; padding: 6px 0; border-bottom: 1px solid var(--qc-line-2); }
  .qb-bars2__row > .qb-bars2__label { padding: 0; border-bottom: 0; }
  .qb-bars2__track { min-height: 22px; }
  .qb-bars2__bar { height: 14px; margin-top: -7px; }
  .qb-bars2__axis > span:first-child { display: none; }
  .qb-side__search span { display: none; }
  .qb-side__search .qb-kbd { display: none; }
  .qb-side__search { flex: 0 0 auto; }
  .qb-ehead__actions { width: 100%; }
  .qb-input--search { max-width: none; }
  .qb-filters__right { margin-left: 0; }
}

@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--paper:var(--forest-900);--paper-sunk:#072519;--card:var(--forest-800);--card-sunk:#0c3428;--line:#1f4f40;--line-strong:#6f9a89;--ink:var(--cream-50);--ink-muted:#b3c7bd;--brand:var(--mint-300);--brand-soft:#134a39;--action:var(--saffron-400);--on-action:var(--forest-900);--accent:var(--saffron-400);--on-accent:var(--forest-900);--accent-soft:#3d3313;--accent-ink:#ffc95a;--signal:#ff8f78;--signal-soft:#4a2219;--emphasis:var(--saffron-400);--focus:var(--saffron-400);--shadow-pixel:4px 4px 0 0 #03140e;--shadow-pixel-ink:4px 4px 0 0 #03140e;--shadow-card:0 24px 48px -24px rgba(0, 0, 0, 0.6);--shadow-float:0 40px 80px -30px rgba(0, 0, 0, 0.7);--page:#0a2e23;--page-sunk:#072519;color-scheme:dark;}}

/* qbrin.com redesign — page-level styles on top of the design system (tokens.css + bundle.css). */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.qb-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--saffron-400); color: var(--forest-900); font-weight: 700; }
.qb-skip:focus { top: 12px; }
main { display: block; }
img { max-width: 100%; }
a { color: inherit; }
.qb-w100 { width: 100%; }
.qb-row--tight { gap: 8px; }
.qb-mb-8 { margin-bottom: 32px; }
.qb-caption { margin: 0 0 12px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--ink-muted); }
.qb-feature__media .qb-caption { color: var(--brand); }
.qb-split--top { align-items: start; }
.qb-split--faq { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
@media (max-width: 960px) { .qb-split--faq { grid-template-columns: 1fr; } }
.qb-section--cta { padding-bottom: 128px; }

/* tools band under the hero */
.qb-toolsband { background: var(--page); }
.qb-toolsband__label { margin: 0; padding: 22px var(--gutter) 14px; text-align: center; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.qb-toolsband__label b { color: var(--ink); }

/* home scene variant */
.qb-scene--brain .qb-scene__answer { width: 440px; top: 250px; }

/* bento */
.qb-bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.qb-bento__card { display: flex; flex-direction: column; gap: 12px; padding: 26px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.qb-bento__card--wide { grid-column: span 2; }
.qb-bento__card--full { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px 24px; }
.qb-bento__card--full h3 { margin: 0; }
.qb-bento__card--full p { grid-column: 2; grid-row: 2; }
.qb-bento__card--full .qb-tile { grid-row: 1 / span 2; }
.qb-bento__card--full .qb-checks { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
@media (max-width: 720px) { .qb-bento__card--full { grid-template-columns: 1fr; } .qb-bento__card--full > * { grid-column: auto !important; grid-row: auto !important; } }
.qb-bento__card h3 { margin: 6px 0 0; font-family: var(--font-display); font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.015em; }
.qb-bento__card p { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.qb-bento__card .qb-tile { align-self: flex-start; }
.qb-bento__card .qb-btn--link { margin-top: auto; align-self: flex-start; }
@media (max-width: 1080px) { .qb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .qb-bento { grid-template-columns: 1fr; } .qb-bento__card--wide { grid-column: auto; } }
.qb-mini-qa { margin-top: 6px; padding: 14px; border-radius: var(--radius-md); background: var(--card-sunk); font-size: 14px; line-height: 21px; }
.qb-mini-qa__q { margin: 0 0 6px !important; font-weight: 700; color: var(--ink) !important; }
.qb-mini-qa__a { margin: 0 0 8px !important; color: var(--ink) !important; }
.qb-mini-qa__src { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--brand); }
.qb-hashes { display: grid; gap: 6px; margin: 4px 0 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.qb-hashes li { padding: 6px 10px; background: var(--card-sunk); border-left: 4px solid var(--leaf-500); }

/* review badges */
.qb-badge-link { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font-size: 14px; line-height: 20px; text-decoration: none; }
.qb-badge-link span { color: var(--ink-muted); font-weight: 600; }

/* metric tiles (product pages) */
.qb-metric { position: relative; padding: 24px 22px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.qb-metric__value { margin: 0 0 12px; font-family: var(--font-pixel); font-size: 48px; line-height: 48px; color: var(--emphasis); }
.qb-metric__label { margin: 0 0 6px; font-family: var(--font-display); font-size: 18px; line-height: 24px; font-weight: 700; }
.qb-metric__note { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.qb-prov { position: absolute; top: 14px; right: 14px; padding: 2px 6px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; }
.qb-prov--measured { background: var(--brand-soft); color: var(--brand); }
.qb-prov--modeled { background: var(--accent-soft); color: var(--accent-ink); }
.qb-prov--published { background: var(--card-sunk); color: var(--ink-muted); }

/* ================================================================== product pages */

/* platform hero graph */
.qb-hero-graph { padding: 20px 20px 8px; background: var(--card); color: var(--ink); border: 2px solid var(--forest-900); box-shadow: 8px 8px 0 0 var(--accent); }
.qb-hero-graph .qb-caption { color: var(--brand); }
.qb-hero-graph .qb-graph { height: 360px; }
@media (max-width: 720px) { .qb-hero-graph .qb-graph { height: 300px; } .qb-hero-graph .qb-node { font-size: 12px; padding: 5px 7px 6px; } }

/* film */
.qb-film { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; padding: 40px; background: var(--card); border: 2px solid var(--ink); }
.qb-film__copy .qb-lead { margin: 16px 0 12px; font-size: 18px; line-height: 28px; }
.qb-film__screen { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--forest-950); border: 3px solid var(--forest-900); box-shadow: 8px 8px 0 0 var(--forest-900); color: var(--cream-50); text-decoration: none; }
.qb-film__map { position: absolute; inset: -2px; padding: 16px; border: 0; background: var(--forest-950); opacity: 0.9; }
.qb-film__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--saffron-400); color: var(--forest-900); box-shadow: 6px 6px 0 0 var(--forest-950); transition: transform 90ms steps(2, end); }
.qb-film__screen:hover .qb-film__play { transform: translate(-3px, -3px); }
.qb-film__label { position: absolute; left: 16px; bottom: 14px; padding: 4px 8px; background: var(--forest-900); font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; }
@media (max-width: 960px) { .qb-film { grid-template-columns: 1fr; gap: 32px; padding: 24px; } }

/* question-card media: chain + claim */
.qb-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; font-weight: 700; }
.qb-chain span { padding: 5px 8px; background: var(--card-sunk); border: 1px solid var(--line); }
.qb-chain i { width: 12px; height: 2px; background: var(--brand); }
.qb-chain .qb-tag { height: 24px; }
.qb-claim { display: grid; gap: 6px; margin: 0; font-size: 13px; line-height: 18px; }
.qb-claim div { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 10px; padding: 6px 10px; background: var(--card-sunk); }
.qb-claim dt { font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--ink-muted); }
.qb-claim dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-family: var(--font-mono); font-size: 12px; }
.qb-claim .qb-tag { height: 22px; }

/* key/value list */
.qb-kv { display: grid; margin: 0; }
.qb-kv > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.qb-kv > div:last-child { border-bottom: 0; }
.qb-kv dt { font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--ink-muted); }
.qb-kv dd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.qb-kv code { padding: 1px 6px; background: var(--card-sunk); font-family: var(--font-mono); font-size: 12.5px; }
.qb-tour-copy { display: grid; gap: 24px; justify-items: start; }
.qb-tour-copy .qb-lead { margin: 0; }

/* chip buttons (illustrative scenario chips) */
.qb-chip-btn { display: inline-flex; align-items: center; padding: 8px 14px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 700; }
.qb-chip-btn.is-on { background: var(--action); border-color: var(--action); color: var(--on-action); }

/* verify band */
.qb-verifyband { background: var(--accent); color: var(--on-accent); }
.qb-verifyband .qb-ticker { background: var(--accent); color: var(--on-accent); border-color: var(--forest-900); }
.qb-verifyband .qb-ticker__pip { background: var(--forest-900); }
.qb-verifyband p { margin: 0; padding: 18px var(--gutter) 22px; text-align: center; font-size: 16px; line-height: 24px; font-weight: 600; }

/* engineering notes list */
.qb-notes { display: grid; border-top: 2px solid var(--ink); }
.qb-notes .qb-caption { margin: 16px 0 4px; color: var(--brand); }
.qb-notes a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 8px 32px; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.qb-notes a b { font-family: var(--font-display); font-size: 19px; line-height: 26px; font-weight: 680; }
.qb-notes a span { font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.qb-notes a:hover b { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 720px) { .qb-notes a { grid-template-columns: 1fr; } }

/* agents: control plane aside */
.qb-cp { overflow: hidden; background: var(--card); color: var(--ink); border: 2px solid var(--forest-900); box-shadow: 8px 8px 0 0 var(--accent); font-size: 14px; line-height: 20px; }
.qb-cp__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.qb-cp__head > span:not(.qb-code__badge) { color: var(--ink-muted); }
.qb-cp__head .qb-code__badge { color: var(--brand); }
.qb-cp__tabs { display: flex; flex-wrap: wrap; gap: 2px; padding: 8px 10px; background: var(--card-sunk); border-bottom: 1px solid var(--line); }
.qb-cp__tabs span { padding: 5px 9px; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-muted); }
.qb-cp__tabs .is-on { background: var(--card); color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.qb-cp__roster { display: grid; margin: 0; padding: 6px 0; list-style: none; }
.qb-cp__roster li { display: grid; grid-template-columns: 36px minmax(0, 0.8fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.qb-cp__roster small { color: var(--ink-muted); }
.qb-cp__av { display: grid; place-items: end center; width: 36px; height: 36px; overflow: hidden; background: var(--brand-soft); }
.qb-cp__brain { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; padding: 16px; background: var(--brand-soft); }
.qb-cp__brain b { display: block; } .qb-cp__brain small { display: block; color: var(--ink-muted); }
.qb-cp__brain .qb-chips { grid-column: 1 / -1; }
.qb-cp__brain .qb-chips li { padding: 3px 8px; font-size: 12px; }
@media (max-width: 560px) { .qb-cp__roster li { grid-template-columns: 36px minmax(0, 1fr) auto; } .qb-cp__roster small { display: none; } }

/* agents: verdict rows */
.qb-verdict-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.qb-verdict-row b { display: block; font-size: 15px; line-height: 20px; }
.qb-verdict-row small { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); }

/* agents: creed band */
.qb-creed { padding: 112px 0; background: var(--forest-950); color: var(--ink); text-align: center; }
.qb-creed__lead { margin: 0 0 32px; font-size: 20px; line-height: 30px; color: var(--ink-muted); }
.qb-creed__words { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px; margin: 0; padding: 0; list-style: none; font-family: var(--font-display); font-size: 64px; line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; }
.qb-creed__words li:nth-child(odd) { color: var(--saffron-400); }
.qb-creed__words li::after { content: ""; display: inline-block; width: 0.16em; height: 0.16em; margin-left: 0.05em; background: var(--accent); }
.qb-creed__words li:nth-child(odd)::after { background: var(--cream-50); }
.qb-creed__foot { margin: 32px auto 0; max-width: 36em; font-size: 18px; line-height: 28px; color: var(--ink-muted); }
@media (max-width: 720px) { .qb-creed { padding: 80px 0; } .qb-creed__words { font-size: 40px; } }

/* agents: teammate mock */
.qb-teammate { width: 100%; max-width: 460px; overflow: hidden; background: var(--card); color: var(--ink); border: 2px solid var(--ink); font-size: 14px; line-height: 20px; }
.qb-teammate__chan { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background: var(--forest-900); color: var(--cream-50); }
.qb-teammate__chan small { color: var(--mint-300); font-weight: 600; }
.qb-teammate__msgs { display: grid; gap: 12px; margin: 0; padding: 16px; list-style: none; }
.qb-teammate__msgs li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: start; }
.qb-teammate__msgs p { margin: 0; } .qb-teammate__msgs b { display: block; font-size: 13px; }
.qb-teammate__who { display: grid; place-items: center; width: 28px; height: 28px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; }
.qb-teammate__who.is-q { background: var(--forest-900); color: var(--saffron-400); font-family: var(--font-pixel); font-weight: 400; }
.qb-teammate__jira { padding: 12px 16px; border-top: 1px solid var(--line); background: var(--card-sunk); }
.qb-teammate__jira .qb-caption { margin-bottom: 8px; color: var(--brand); }
.qb-teammate__jira > div { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; }
.qb-teammate__jira code { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--brand); }
.qb-teammate__jira small { padding: 1px 6px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 700; }
.qb-teammate__vault { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); }
.qb-teammate__vault code { font-family: var(--font-mono); font-size: 12px; }
.qb-teammate__vault span { margin-left: auto; color: var(--ink-muted); font-size: 12px; }

/* agents: sandbox, threats, run control */
.qb-sandbox { width: 100%; max-width: 420px; padding: 20px; background: var(--forest-950); color: var(--cream-50); border: 2px solid var(--forest-900); border-radius: var(--radius-md); }
.qb-sandbox__code { display: block; margin-bottom: 14px; padding: 10px 12px; background: var(--forest-900); font-family: var(--font-mono); font-size: 14px; color: var(--saffron-400); }
.qb-sandbox ul { display: grid; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.qb-sandbox li { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--forest-900); }
.qb-sandbox li code { font-family: var(--font-mono); font-size: 13px; }
.qb-sandbox__kill { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--coral-500); }
.qb-threats { margin: 0; padding: 0; list-style: none; }
.qb-threats li { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.qb-threats li:last-child { border-bottom: 0; }
.qb-threats small { font-family: var(--font-mono); font-size: 12px; line-height: 17px; color: var(--ink-muted); }
@media (max-width: 560px) { .qb-threats li { grid-template-columns: minmax(0, 1fr) auto; } .qb-threats small { grid-column: 1 / -1; grid-row: 2; } }
.qb-runctl { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 16px; }
.qb-runctl .qb-btn { box-shadow: none; }

/* agents: synthesis */
.qb-synth { max-width: 18em; margin: 0 auto 24px; font-family: var(--font-display); font-size: 56px; line-height: 1.02; font-weight: 800; letter-spacing: -0.035em; }
.qb-synth__lead { margin: 0 auto; }
.qb-synth__lead a { color: var(--brand); font-weight: 600; }
@media (max-width: 720px) { .qb-synth { font-size: 36px; } }

/* answers page */
.qb-caption--light { color: var(--mint-300); }
.qb-people { font-size: 14px; line-height: 20px; }
.qb-people ul { margin: 0; padding: 4px 0; list-style: none; }
.qb-people li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.qb-people li b { display: block; } .qb-people li small { display: block; color: var(--ink-muted); }
.qb-people__av { display: grid; place-items: center; width: 40px; height: 40px; background: var(--forest-900); color: var(--saffron-400); font-family: var(--font-pixel); font-size: 16px; }
.qb-people__n { padding: 2px 8px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 700; white-space: nowrap; }
.qb-people__foot { display: grid; gap: 8px; padding: 14px 16px; background: var(--card-sunk); }
.qb-people__foot p { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.qb-people__foot .qb-icon { margin-top: 2px; color: var(--brand); }
.qb-assist { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); font-size: 14px; line-height: 21px; }
.qb-assist__head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 2px 10px; }
.qb-assist__head b { font-family: var(--font-display); font-size: 18px; line-height: 22px; }
.qb-assist__head small { grid-column: 2; font-size: 12px; color: var(--ink-muted); }
.qb-assist__q { margin: 0; padding: 10px 12px; background: var(--forest-900); color: var(--cream-50); font-weight: 600; }
.qb-assist__steps { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 17px; color: var(--ink-muted); }
.qb-assist__steps li { display: flex; align-items: center; gap: 6px; }
.qb-assist__a { flex: 1; margin: 0; }
.qb-assist__src { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--brand); }
.qb-assist__foot { padding-top: 10px; border-top: 1px dashed var(--line-strong); font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--ink-muted); }
.qb-fresh { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 16px; margin-top: 8px; padding: 20px 22px; background: var(--card); border: 2px solid var(--ink); box-shadow: var(--shadow-pixel); }
.qb-fresh .qb-prov { position: static; grid-row: 1 / span 2; }
.qb-fresh p { margin: 0; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.qb-fresh b { font-family: var(--font-pixel); font-size: 32px; line-height: 36px; font-weight: 400; color: var(--emphasis); }
.qb-connect { display: grid; gap: 20px; }
.qb-connect__missing { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px; background: var(--accent-soft); border: 2px dashed var(--accent-ink); }
.qb-connect__missing b { display: block; } .qb-connect__missing small { display: block; color: var(--ink-muted); }
@media (max-width: 560px) { .qb-connect__missing { grid-template-columns: auto minmax(0, 1fr); } .qb-connect__missing .qb-btn { grid-column: 1 / -1; justify-self: start; } }

/* benchmarks */
.qb-subnav { position: sticky; top: 0; z-index: 4; background: var(--card); border-bottom: 2px solid var(--ink); }
.qb-subnav .qb-container { display: flex; gap: 4px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.qb-subnav a { flex: none; padding: 8px 12px; color: var(--ink-muted); font-size: 14px; line-height: 20px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.qb-subnav a:hover { background: var(--brand-soft); color: var(--brand); }
.qb-h2h { display: flex; flex-direction: column; padding: 26px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.qb-h2h h3 { margin: 0 0 18px; font-family: var(--font-display); font-size: 21px; line-height: 27px; font-weight: 700; letter-spacing: -0.01em; }
.qb-h2h .qb-caption { color: var(--brand); }
.qb-h2h__nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.qb-h2h__nums > div { padding: 14px; background: var(--card-sunk); }
.qb-h2h__nums > div.is-q { background: var(--forest-900); color: var(--cream-50); }
.qb-h2h__nums b { display: block; font-family: var(--font-pixel); font-size: 28px; line-height: 32px; font-weight: 400; }
.qb-h2h__nums .is-q b { color: var(--saffron-400); }
.qb-h2h__nums small { display: block; margin-top: 6px; font-size: 12px; line-height: 16px; font-weight: 600; opacity: 0.8; }
.qb-h2h__metric { margin: 12px 0 0; font-size: 13px; line-height: 19px; font-weight: 700; color: var(--ink-muted); }
.qb-h2h__text { flex: 1; margin: 14px 0 16px; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.qb-method { margin-top: 12px; border-top: 1px solid var(--line); font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.qb-method summary { padding: 10px 0 0; cursor: pointer; font-weight: 700; color: var(--brand); }
.qb-method p { margin: 8px 0 0; }
.qb-suite { margin-top: 56px; }
.qb-suite__title { margin: 0 0 8px; font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 720; letter-spacing: -0.02em; }
.qb-suite__intro { max-width: 60em; margin: 0 0 18px; font-size: 16px; line-height: 25px; color: var(--ink-muted); }
.qb-suite__intro a { color: var(--brand); font-weight: 600; }
.qb-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 18px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.qb-legend > span:not(.qb-tag) { margin-right: 12px; }
.qb-legend__dash { margin-right: 4px !important; font-weight: 700; }
.qb-prov--inline { position: static; display: inline-block; }
.qb-trap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 2px solid var(--ink); background: var(--card); }
.qb-trap > div { display: grid; align-content: start; gap: 12px; padding: 22px; font-size: 15px; line-height: 23px; }
.qb-trap > div + div { border-left: 2px solid var(--ink); }
.qb-trap p { margin: 0; }
.qb-trap__q { background: var(--forest-900); color: var(--cream-50); }
.qb-trap__q .qb-caption { color: var(--mint-300); }
.qb-trap__q p:last-child { font-family: var(--font-display); font-size: 20px; line-height: 27px; font-weight: 700; }
.qb-trap__bad p { color: var(--ink-muted); text-decoration: line-through; text-decoration-color: var(--signal); }
.qb-trap .qb-tag { justify-self: start; }
@media (max-width: 960px) { .qb-trap { grid-template-columns: 1fr; } .qb-trap > div + div { border-left: 0; border-top: 2px solid var(--ink); } }
.qb-trap__good { background: var(--brand-soft); }

/* ================================================================== benchmarks & security */
.qb-muted { color: var(--ink-muted); font-weight: 400; }
.qb-truth { overflow: hidden; background: var(--card); color: var(--ink); border: 2px solid var(--forest-900); box-shadow: 8px 8px 0 0 var(--accent); }
.qb-truth__body { display: grid; gap: 12px; padding: 16px; background: var(--card-sunk); }
.qb-truth .qb-compare { box-shadow: none; border: 1px solid var(--line); }
.qb-truth .qb-compare__row { grid-template-columns: 110px minmax(0, 1fr) 44px; }
.qb-share { padding: 26px; background: var(--card); color: var(--ink); border: 2px solid var(--line-strong); }
.qb-share h3 { margin: 0 0 18px; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 720; }
.qb-share .qb-caption { color: var(--brand); }
.qb-share__pct { margin: 0 0 14px; font-family: var(--font-pixel); font-size: 64px; line-height: 64px; color: var(--emphasis); }
.qb-share__bar { height: 16px; background: var(--card-sunk); box-shadow: inset 0 0 0 1px var(--line); }
.qb-share__bar i { display: block; height: 100%; min-width: 4px; background: var(--coral-500); }
.qb-share__saw { margin: 14px 0 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
.qb-zero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; padding: 28px 36px; background: var(--forest-900); color: var(--cream-50); border: 2px solid var(--forest-900); box-shadow: 8px 8px 0 0 var(--accent); }
.qb-zero__n { margin: 0; font-family: var(--font-pixel); font-size: 128px; line-height: 104px; color: var(--saffron-400); }
.qb-zero b { font-family: var(--font-display); font-size: 26px; line-height: 32px; letter-spacing: -0.015em; }
.qb-zero p { margin: 8px 0 0; max-width: 60em; font-size: 16px; line-height: 25px; color: var(--mint-100); }
@media (max-width: 720px) { .qb-zero { grid-template-columns: 1fr; gap: 12px; padding: 24px; } .qb-zero__n { font-size: 80px; line-height: 72px; } }
.qb-approach { display: flex; flex-direction: column; gap: 12px; padding: 26px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.qb-approach h3 { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 720; letter-spacing: -0.01em; }
.qb-approach p { flex: 1; margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.qb-approach__r { align-self: flex-start; padding: 6px 10px; background: var(--signal-soft); color: var(--signal); font-family: var(--font-mono); font-size: 12.5px; line-height: 18px; }
.qb-approach.is-q { background: var(--forest-900); color: var(--cream-50); border-color: var(--forest-900); box-shadow: 8px 8px 0 0 var(--accent); }
.qb-approach.is-q p { color: var(--mint-100); }
.qb-approach.is-q .qb-approach__r { background: var(--saffron-400); color: var(--forest-900); }

/* ================================================================== pricing */
.qb-section--pricing { padding-top: 72px; }
.qb-plans[hidden] { display: none; }
.qb-billing--hero { margin-top: 0; background: var(--card); }
.qb-billing button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: 0; background: none; color: var(--ink); font: inherit; font-size: 15px; line-height: 20px; font-weight: 700; cursor: pointer; }
.qb-billing button.is-on { background: var(--action); color: var(--on-action); }
.qb-billing button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.qb-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 2px solid var(--ink); }
.qb-vs__col { padding: 28px 32px; background: var(--card); }
.qb-vs__col + .qb-vs__col { border-left: 2px solid var(--ink); }
.qb-vs__col ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: 16px; line-height: 24px; font-weight: 600; }
.qb-vs__col li { display: flex; align-items: flex-start; gap: 12px; }
.qb-vs__col .qb-icon { margin-top: 4px; }
.qb-vs__col:not(.is-q) li { color: var(--ink-muted); } .qb-vs__col:not(.is-q) .qb-icon { color: var(--signal); }
.qb-vs__col.is-q { background: var(--brand-soft); } .qb-vs__col.is-q .qb-icon { color: var(--brand); } .qb-vs__col.is-q .qb-caption { color: var(--brand); }
@media (max-width: 720px) { .qb-vs { grid-template-columns: 1fr; } .qb-vs__col + .qb-vs__col { border-left: 0; border-top: 2px solid var(--ink); } }

/* ================================================================== resources */
.qb-report { display: block; max-width: 400px; margin-left: auto; text-decoration: none; }
.qb-report__cover { position: relative; display: flex; flex-direction: column; gap: 10px; aspect-ratio: 4 / 5; padding: 32px 28px 28px; background: var(--cream-50); color: var(--forest-900); border: 3px solid var(--forest-900); box-shadow: 10px 10px 0 0 var(--saffron-400); transition: transform 90ms steps(2, end); }
.qb-report:hover .qb-report__cover { transform: translate(-4px, -4px); }
.qb-report__cover b { margin-top: 28px; font-family: var(--font-display); font-size: 44px; line-height: 0.98; font-weight: 800; letter-spacing: -0.035em; }
.qb-report__cover small { font-size: 16px; line-height: 24px; font-weight: 600; color: var(--forest-700); }
.qb-report__map { margin-top: auto; }
.qb-report__meta { display: block; margin-top: 18px; }
@media (max-width: 1080px) { .qb-report { margin: 0; } }
.qb-feature-strip { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 28px 32px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); box-shadow: var(--shadow-pixel); }
.qb-feature-strip h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 740; letter-spacing: -0.02em; }
.qb-feature-strip p { margin: 0; font-size: 16px; line-height: 25px; color: var(--ink-muted); }
.qb-feature-strip--quiet { background: var(--paper-sunk); box-shadow: none; }
@media (max-width: 860px) { .qb-feature-strip { grid-template-columns: 1fr; } }
.qb-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.qb-filter a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 700; text-decoration: none; }
.qb-filter a b { font-family: var(--font-pixel); font-weight: 400; color: var(--brand); }
.qb-filter a:hover { background: var(--brand-soft); }
.qb-filter a.is-on { background: var(--action); border-color: var(--action); color: var(--on-action); }
.qb-filter a.is-on b { color: var(--saffron-400); }
.qb-resgroup { margin-top: 56px; scroll-margin-top: 24px; }
.qb-resgroup__title { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; font-family: var(--font-pixel); font-size: 16px; line-height: 16px; font-weight: 400; text-transform: uppercase; color: var(--brand); }
.qb-resgroup__title::after { content: ""; flex: 1; height: 2px; background: var(--line); }
.qb-res { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); text-decoration: none; transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end); }
.qb-res:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-pixel); }
.qb-res__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.qb-res__top code { padding: 3px 6px; background: var(--forest-900); color: var(--saffron-400); font-family: var(--font-mono); font-size: 12px; }
.qb-res__kind { font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--ink-muted); }
.qb-res b { font-family: var(--font-display); font-size: 21px; line-height: 27px; font-weight: 700; letter-spacing: -0.01em; }
.qb-res__text { flex: 1; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.qb-res__cta { display: inline-flex; align-items: center; gap: 8px; color: var(--brand); font-size: 14px; line-height: 20px; font-weight: 700; }

/* ================================================================== long-form pages */
.qb-section--read { padding-top: 72px; }
.qb-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.qb-contact { display: grid; align-content: start; gap: 4px; padding: 22px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); text-decoration: none; transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end); }
.qb-contact .qb-tile { margin-bottom: 14px; }
.qb-contact b { font-family: var(--font-display); font-size: 19px; line-height: 25px; font-weight: 700; overflow-wrap: anywhere; }
.qb-contact small { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
a.qb-contact:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-pixel); }
.qb-phero .qb-contact { border-color: var(--line-strong); }
@media (max-width: 560px) { .qb-contact-grid { grid-template-columns: 1fr; } }
.qb-about-art { position: relative; padding: 20px; background: var(--card); border: 2px solid var(--line-strong); }
.qb-about-art__map { padding: 0; border: 0; }
.qb-about-art__owl { position: absolute; left: 50%; top: 50%; padding: 18px 18px 12px; transform: translate(-50%, -50%); background: var(--saffron-400); box-shadow: 8px 8px 0 0 var(--forest-950); }
.qb-founder { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 72px; align-items: start; }
.qb-founder__card { display: grid; justify-items: start; gap: 4px; padding: 28px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); box-shadow: 8px 8px 0 0 var(--accent); }
.qb-founder__av { display: grid; place-items: end center; width: 128px; height: 128px; margin-bottom: 16px; overflow: hidden; background: var(--brand-soft); }
.qb-founder__card b { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 750; letter-spacing: -0.02em; }
.qb-founder__card small { font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.qb-founder__links { display: grid; gap: 4px; width: 100%; margin: 20px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; }
.qb-founder__links a { display: flex; align-items: center; justify-content: space-between; padding: 6px 0; color: var(--brand); font-weight: 700; text-decoration: none; }
.qb-founder__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 960px) { .qb-founder { grid-template-columns: 1fr; gap: 40px; } }
.qb-picks { display: grid; gap: 14px; }
.qb-pick { padding: 18px 20px; background: var(--card); border: 2px solid var(--ink); }
.qb-pick b { display: block; margin-bottom: 6px; font-family: var(--font-display); font-size: 19px; line-height: 25px; }
.qb-pick p { margin: 0; }
.qb-pick--brand { background: var(--brand-soft); box-shadow: 6px 6px 0 0 var(--accent); }
.qb-pick--accent { background: var(--accent-soft); }
.qb-vsglance { overflow: hidden; background: var(--card); color: var(--ink); border: 2px solid var(--forest-900); box-shadow: 8px 8px 0 0 var(--accent); }
.qb-vsglance__row { display: grid; gap: 10px; padding: 18px 16px; border-top: 1px solid var(--line); }
.qb-vsglance__row .qb-caption { margin: 0; color: var(--brand); }
.qb-vsglance__row p { margin: 0; font-size: 16px; line-height: 24px; }
.qb-vsglance__row .qb-tag { justify-self: start; }
.qb-vsglance__row.is-q { background: var(--brand-soft); }
.qb-altlist { margin: 0; padding: 6px 0; list-style: none; background: var(--card); color: var(--ink); border: 2px solid var(--forest-900); box-shadow: 8px 8px 0 0 var(--accent); }
.qb-altlist li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 2px 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.qb-altlist li:last-child { border-bottom: 0; }
.qb-altlist__n { grid-row: 1 / span 2; font-family: var(--font-pixel); font-size: 24px; line-height: 30px; color: var(--emphasis); }
.qb-altlist b { font-family: var(--font-display); font-size: 18px; line-height: 24px; }
.qb-altlist small { font-size: 14px; line-height: 20px; color: var(--ink-muted); }
.qb-altlist li.is-q { background: var(--brand-soft); }

/* ================================================================== docs */
.qb-inline-code { padding: 2px 6px; background: var(--card-sunk); font-family: var(--font-mono); font-size: 13px; font-weight: 500; }
.qb-code__method--delete { background: var(--coral-500); color: var(--cream-50); }
.qb-code__method--put, .qb-code__method--patch { background: var(--cream-200); color: var(--forest-900); }
.qb-ep { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 4px 0 18px; padding: 10px 12px; background: var(--forest-900); border: 2px solid var(--forest-900); }
.qb-prose .qb-ep__path { padding: 0; background: none; color: var(--cream-50); font-size: 15px; }
.qb-ep__path var { font-style: normal; color: var(--saffron-400); }
.qb-ep__scope { margin-left: auto; padding: 3px 8px; background: var(--forest-800); color: var(--mint-300); font-size: 12px; line-height: 16px; font-weight: 700; }
.qb-ep__scope.is-open { background: var(--mint-300); color: var(--forest-900); }
.qb-docs__lede { font-size: 18px; line-height: 29px; color: var(--ink-muted); }
.qb-baseurl { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 24px; padding: 14px 16px; background: var(--card); border: 2px solid var(--ink); }
.qb-baseurl b { font-family: var(--font-pixel); font-size: 16px; line-height: 16px; font-weight: 400; text-transform: uppercase; color: var(--brand); }
.qb-prose .qb-baseurl code { padding: 0; background: none; font-size: 15px; }
.qb-baseurl .qb-code__copy { color: var(--ink); }
.qb-docs__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qb-docs__card { padding: 18px 20px; background: var(--card); border: 2px solid var(--ink); }
.qb-docs__card b { display: block; font-family: var(--font-display); font-size: 17px; line-height: 23px; }
.qb-docs__card p { margin: 6px 0 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
@media (max-width: 640px) { .qb-docs__cards { grid-template-columns: 1fr; } }
.qb-prose ol.qb-pipe { display: flex; flex-wrap: wrap; margin: 0 0 28px; padding: 0; list-style: none; }
.qb-prose .qb-pipe li { margin: 0; padding: 8px 14px; background: var(--card-sunk); border: 2px solid var(--ink); font-family: var(--font-pixel); font-size: 16px; line-height: 20px; text-transform: uppercase; }
.qb-pipe li + li { border-left: 0; }
.qb-pipe li.is-done { background: var(--mint-300); color: var(--forest-900); }
.qb-req, .qb-opt { font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; white-space: nowrap; }
.qb-req { color: var(--signal); } .qb-opt { color: var(--ink-muted); }
.qb-tag--sm { height: 22px; padding: 0 6px; }
.qb-table--docs td:first-child code { font-weight: 600; }
.qb-docs .qb-prose > section h3 { scroll-margin-top: 24px; }

/* ================================================================== blog */
.qb-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.qb-cats a { padding: 6px 12px; border: 1px solid var(--line-strong); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 700; text-decoration: none; }
.qb-cats a:hover { background: var(--brand-soft); color: var(--brand); }
.qb-film-card { display: block; overflow: hidden; background: var(--card); color: var(--ink); border: 2px solid var(--line-strong); box-shadow: 8px 8px 0 0 var(--accent); text-decoration: none; }
.qb-film-card__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--forest-950); }
.qb-film-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qb-film-card__body { display: grid; gap: 8px; padding: 20px 22px 22px; }
.qb-film-card__body .qb-caption { margin: 0; color: var(--brand); }
.qb-film-card__body b { font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 750; letter-spacing: -0.015em; }
.qb-film-card__body > span:nth-child(3) { font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.qb-film-card:hover .qb-film__play { transform: translate(-3px, -3px); }
.qb-shelf { display: flex; align-items: baseline; gap: 14px; margin: 56px 0 20px; font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 750; letter-spacing: -0.02em; scroll-margin-top: 24px; }
.qb-sechead + .qb-shelf { margin-top: 0; }
.qb-shelf small { font-family: var(--font-pixel); font-size: 16px; font-weight: 400; text-transform: uppercase; color: var(--ink-muted); }
.qb-article-head { padding: 36px 0 0; background-color: var(--paper); background-image: conic-gradient(at 2px 2px, transparent 270deg, var(--line) 0); background-size: 24px 24px; }
.qb-crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; font-size: 14px; line-height: 20px; font-weight: 700; color: var(--ink-muted); }
.qb-crumbs a { color: var(--brand); text-decoration: none; }
.qb-article-head__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 56px; align-items: center; }
.qb-article__title { margin: 14px 0 0; font-family: var(--font-display); font-size: 54px; line-height: 1.03; font-weight: 800; letter-spacing: -0.035em; text-wrap: balance; }
.qb-article__meta span { display: inline-flex; align-items: center; gap: 8px; }
.qb-article__meta .qb-icon { color: var(--brand); }
.qb-article-head__cover .qb-cover { border: 2px solid var(--ink); box-shadow: 8px 8px 0 0 var(--accent); }
.qb-article__lede { max-width: 860px; margin-top: 40px; padding: 28px 0 32px; border-top: 2px solid var(--ink); font-family: var(--font-display); font-size: 22px; line-height: 33px; font-weight: 500; letter-spacing: -0.01em; }
.qb-article__lede p { margin: 0 0 12px; } .qb-article__lede p:last-child { margin: 0; }
.qb-article__lede a { color: var(--brand); }
@media (max-width: 960px) { .qb-article-head__grid { grid-template-columns: 1fr; gap: 32px; } .qb-article__title { font-size: 38px; } .qb-article__lede { font-size: 19px; line-height: 29px; } }
.qb-section--article { padding-top: 48px; }
.qb-article__body { max-width: 760px; }
.qb-prose figure > svg { display: block; width: 100%; height: auto; background: var(--cream-50); border: 2px solid var(--ink); }
.qb-video { position: relative; display: block; aspect-ratio: 16 / 9; margin: 24px 0 8px; overflow: hidden; background: var(--forest-950); border: 2px solid var(--ink); }
.qb-prose .qb-video img { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; }
.qb-video__play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 88px; height: 88px; margin: -44px 0 0 -44px; background: var(--saffron-400); color: var(--forest-900); box-shadow: 6px 6px 0 0 var(--forest-950); transition: transform 90ms steps(2, end); }
.qb-video:hover .qb-video__play { transform: translate(-3px, -3px); }
.qb-video__play svg { width: 40px; height: 40px; }
.qb-video__label { position: absolute; left: 14px; bottom: 12px; padding: 4px 8px; background: var(--forest-900); color: var(--cream-50); font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; }
.qb-row--between { justify-content: space-between; }
.qb-sechead__title--sm { font-size: 36px; line-height: 40px; }

/* ================================================================== checkout, book, status */
.qb-section--checkout { padding: 72px 0 128px; }
.qb-checkout-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.qb-checkout-head .qb-eyebrow { justify-content: center; }
.qb-checkout-head .qb-lead { margin: 0 auto; }
.qb-choose { max-width: 880px; margin: 0 auto; }
.qb-choose__plan { display: grid; justify-items: start; gap: 8px; padding: 28px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); text-decoration: none; transition: transform 90ms steps(2, end), box-shadow 90ms steps(2, end); }
.qb-choose__plan:hover { transform: translate(-4px, -4px); box-shadow: var(--shadow-pixel); }
.qb-choose__plan .qb-tile { margin-bottom: 12px; }
.qb-choose__plan b { font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 750; }
.qb-choose__plan small { font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.qb-backlink { color: var(--brand); font-weight: 700; text-decoration: none; }
.qb-backlink:hover { text-decoration: underline; text-underline-offset: 4px; }
.qb-checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 72px; align-items: start; }
.qb-checkout__title { margin: 0 0 16px; font-family: var(--font-display); font-size: 48px; line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; }
.qb-checkout__summary .qb-lead { margin: 0 0 28px; }
.qb-form__trust { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.qb-form__trust li { display: flex; align-items: center; gap: 8px; } .qb-form__trust .qb-icon { color: var(--brand); }
.qb-form button[type="submit"] { white-space: normal; }
@media (max-width: 960px) { .qb-checkout { grid-template-columns: 1fr; gap: 40px; } .qb-checkout__title { font-size: 36px; } }
.qb-bookcard { overflow: hidden; background: var(--card); color: var(--ink); border: 2px solid var(--forest-900); box-shadow: 8px 8px 0 0 var(--accent); }
.qb-bookcard__plan { margin: 0; padding: 6px 0; list-style: none; }
.qb-bookcard__plan li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.qb-bookcard__plan li span { font-family: var(--font-pixel); font-size: 16px; line-height: 20px; color: var(--brand); }
.qb-bookcard__plan b { display: block; font-size: 15px; line-height: 20px; }
.qb-bookcard__plan small { display: block; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.qb-bookcard__foot { display: grid; gap: 12px; padding: 16px; background: var(--card-sunk); }
.qb-bookcard__foot p { margin: 0; font-size: 14px; line-height: 20px; text-align: center; color: var(--ink-muted); }
.qb-bookcard__foot a:not(.qb-btn) { color: var(--brand); font-weight: 700; }
.qb-section--status { padding: 96px 0 128px; background-image: conic-gradient(at 2px 2px, transparent 270deg, var(--line) 0); background-size: 24px 24px; }
.qb-metric__value--long { font-size: 32px; line-height: 48px; }
.qb-fleet { margin: 0; padding: 4px 0; list-style: none; }
.qb-fleet li { display: grid; grid-template-columns: 70px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 16px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 20px; }
.qb-fleet code { font-family: var(--font-mono); font-size: 12.5px; color: var(--brand); font-weight: 600; }
.qb-fleet small { font-size: 12px; color: var(--ink-muted); }
.qb-fleet .qb-tag { height: 24px; }
@media (max-width: 560px) { .qb-fleet li { grid-template-columns: 64px minmax(0, 1fr) auto; } .qb-fleet small { display: none; } }
.qb-posts--lead > .qb-post:first-child { grid-column: 1 / -1; }
.qb-posts--lead > .qb-post:first-child .qb-cover { flex: 1.4; min-height: 340px; }
.qb-posts--lead > .qb-post:first-child .qb-post__title { font-size: 30px; line-height: 36px; letter-spacing: -0.02em; }
.qb-posts--lead > .qb-post:first-child .qb-post__body { justify-content: center; padding: 32px; }
.qb-trap > div { min-width: 0; }
.qb-trap .qb-tag { height: auto; min-height: 28px; padding: 4px 8px; white-space: normal; }
.qb-form__preview { margin: 0; padding: 10px 12px; background: var(--accent-soft); color: var(--accent-ink); font-size: 14px; line-height: 20px; font-weight: 600; }

/* ---------------------------------------------------------------- identity security (identity.html) */
.qb-ix-hero { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); padding-bottom: 0; }
.qb-ix-hero__grid-bg { position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 48px 48px; mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 20%, transparent 75%); }
.qb-ix-hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; padding-top: 72px; padding-bottom: 72px; }
.qb-ix-hero__title { margin: 18px 0 0; font-family: var(--font-display); font-size: clamp(40px, 5.6vw, 76px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; }
.qb-ix-hero__title em { display: block; font-style: normal; color: var(--accent); }
.qb-ix-hero__lead { margin: 24px 0 0; max-width: 560px; font-size: 19px; line-height: 30px; color: var(--ink-muted); }
.qb-ix-hero__actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 32px; }
.qb-ix-hero__verdicts { list-style: none; margin: 36px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.qb-ix-hero__verdicts li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-muted); }
.qb-ix-hero__visual { position: relative; }
.qb-ix-hero__owl { position: absolute; top: -58px; right: 18px; z-index: 2; }
@media (max-width: 1020px) { .qb-ix-hero__grid { grid-template-columns: 1fr; gap: 64px; padding-top: 48px; } }

.qb-ix-stream { position: relative; background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-md); box-shadow: 8px 8px 0 var(--saffron-400); overflow: hidden; }
.qb-ix-stream__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.qb-ix-stream__head > span:first-child { display: flex; align-items: center; gap: 8px; }
.qb-ix-stream ol { list-style: none; margin: 0; padding: 0; }
.qb-ix-stream li { display: grid; grid-template-columns: auto minmax(0, 0.9fr) minmax(0, 1.4fr) auto; gap: 12px; align-items: center; padding: 12px 18px; border-bottom: 1px dashed var(--line); font-size: 14px; }
.qb-ix-stream__t { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.qb-ix-stream__who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.qb-ix-stream__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.qb-ix-stream__act { min-width: 0; }
.qb-ix-stream__act small { display: block; font-size: 12px; color: var(--ink-muted); }
.qb-ix-stream__foot { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 18px; background: var(--card-sunk); font-size: 13px; color: var(--ink-muted); }
.qb-ix-stream__foot b { color: var(--ink); }
@media (max-width: 560px) { .qb-ix-stream li { grid-template-columns: minmax(0, 1fr) auto; } .qb-ix-stream__t { display: none; } .qb-ix-stream__act { grid-column: 1 / -1; grid-row: 2; } }

.qb-ix-kinds { position: relative; border-top: 1px solid var(--line); background: var(--paper-sunk); }
.qb-ix-kinds .qb-container { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; padding-top: 22px; padding-bottom: 22px; }
.qb-ix-kinds p { margin: 0; font-family: var(--font-pixel); font-size: 14px; text-transform: uppercase; color: var(--brand); }
.qb-ix-kinds ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.qb-ix-kinds li { padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); font-size: 14px; }

.qb-ix-problem { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: start; }
.qb-ix-gaps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.qb-ix-gaps > div { padding: 22px; background: var(--card); border: 2px solid var(--ink); }
.qb-ix-gaps b { display: block; margin-top: 12px; font-family: var(--font-display); font-size: 20px; }
.qb-ix-gaps p { margin: 6px 0 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
@media (max-width: 960px) { .qb-ix-problem { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) { .qb-ix-gaps { grid-template-columns: 1fr; } }

.qb-ix-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.qb-ix-pillar { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 28px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); }
.qb-ix-pillar--hl { box-shadow: 8px 8px 0 var(--saffron-400); }
.qb-ix-pillar__n { font-family: var(--font-pixel); font-size: 32px; line-height: 32px; color: var(--brand); }
.qb-ix-pillar__kicker { margin: 0; font-family: var(--font-pixel); font-size: 14px; text-transform: uppercase; color: var(--ink-muted); }
.qb-ix-pillar h3 { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 30px; letter-spacing: -0.02em; }
.qb-ix-pillar > p { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.qb-ix-pillar .qb-btn--link { margin-top: auto; align-self: flex-start; }
@media (max-width: 1080px) { .qb-ix-pillars { grid-template-columns: 1fr; } }

.qb-ix-mini { margin: 8px 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card-sunk); font-size: 13px; overflow: hidden; }
.qb-ix-mini__head { display: flex; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--card); }
.qb-ix-mini__head small { color: var(--ink-muted); }
.qb-ix-mini table { width: 100%; border-collapse: collapse; }
@media (max-width: 560px) { .qb-ix-pillar { padding: 20px; } .qb-ix-mini td { padding: 8px; } .qb-ix-mini td:nth-child(3) { display: none; } }
.qb-ix-mini td { padding: 8px 12px; border-bottom: 1px dashed var(--line); vertical-align: top; }
.qb-ix-mini td small { display: block; color: var(--ink-muted); }
.qb-ix-mini code { font-family: var(--font-mono); font-size: 12px; }
.qb-ix-mini__note { margin: 0; padding: 10px 12px; color: var(--ink-muted); }
.qb-ix-risk { display: inline-block; padding: 2px 8px; border-radius: var(--radius-pill); font-weight: 600; font-size: 12px; }
.qb-ix-risk--low { background: var(--mint-100); color: var(--forest-700); }
.qb-ix-risk--med { background: var(--saffron-100); color: #7a5200; }
.qb-ix-risk--high { background: #fde3dc; color: #a3311a; }
.qb-ix-scope, .qb-ix-det { list-style: none; margin: 0; padding: 4px 0; }
.qb-ix-scope li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; color: var(--ink-muted); }
.qb-ix-scope li.is-on { color: var(--ink); font-weight: 600; }
.qb-ix-scope__box { display: inline-grid; place-items: center; width: 20px; height: 20px; border: 2px solid var(--ink); background: var(--card); }
.qb-ix-scope li.is-on .qb-ix-scope__box { background: var(--mint-100); color: var(--forest-700); }
.qb-ix-det li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px dashed var(--line); }
.qb-ix-det li small { display: block; color: var(--ink-muted); }

.qb-ix-graph { padding: 24px; background: var(--card); border: 2px solid var(--line-strong); border-radius: var(--radius-md); }
.qb-ix-graph .qb-graph { min-height: 380px; }

.qb-ix-factors { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 8px; border: 2px solid var(--ink); background: var(--card); }
.qb-ix-factor { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px; border-right: 2px solid var(--ink); }
.qb-ix-factor:last-child { border-right: 0; background: var(--accent-soft); }
.qb-ix-factor__n { font-family: var(--font-pixel); font-size: 14px; color: var(--ink-muted); }
.qb-ix-factor b { font-family: var(--font-display); font-size: 20px; }
.qb-ix-factor p { margin: 0; font-size: 14px; line-height: 21px; color: var(--ink-muted); }
@media (max-width: 1080px) { .qb-ix-factors { grid-template-columns: repeat(2, minmax(0, 1fr)); } .qb-ix-factor { border-right: 0; border-bottom: 2px solid var(--ink); } .qb-ix-factor:last-child { grid-column: 1 / -1; border-bottom: 0; } }
@media (max-width: 560px) { .qb-ix-factors { grid-template-columns: 1fr; } }
.qb-ix-decide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: start; margin-top: 56px; }
.qb-ix-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.qb-ix-steps li { padding: 18px; }
.qb-ix-steps .qb-steps__n { margin-bottom: 10px; font-size: 24px; line-height: 24px; }
@media (max-width: 560px) { .qb-ix-steps { grid-template-columns: 1fr; } }
.qb-ix-graph-copy .qb-checks { margin-top: 24px; }
.qb-ix-decide__copy h3 { margin: 0 0 10px; font-family: var(--font-display); font-size: 32px; letter-spacing: -0.02em; }
.qb-ix-decide__copy > p { margin: 0 0 24px; color: var(--ink-muted); font-size: 17px; line-height: 27px; }
@media (max-width: 960px) { .qb-ix-decide { grid-template-columns: 1fr; } }

.qb-ix-labs { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.qb-ix-labs__list { display: grid; gap: 12px; }
.qb-ix-labs__list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); text-decoration: none; transition: border-color .15s, transform .15s; }
.qb-ix-labs__list a:hover { border-color: var(--accent); transform: translateX(4px); }
.qb-ix-labs__list b { font-weight: 600; }
@media (max-width: 960px) { .qb-ix-labs { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .qb-ix-labs__list a { transition: none; } .qb-ix-labs__list a:hover { transform: none; } }

/* =====================================================================================
   home: the sections around the qbrin ring (the ring itself is in the design system)
   ===================================================================================== */
.qb-hero--ring .qb-hero__grid { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 40px; padding-top: 36px; padding-bottom: 96px; }
.qb-ringhero__title { font-size: clamp(48px, 4.6vw, 68px); }
.qb-ringhero__copy .qb-hero__lead { max-width: 31em; }
.qb-ringhero__visual { position: relative; min-width: 0; }
.qb-ringhero__visual::before { content: ""; position: absolute; left: 50%; top: 44%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(142, 232, 185, .16), rgba(142, 232, 185, .05) 60%, transparent); pointer-events: none; }
@media (max-width: 1080px) { .qb-hero--ring .qb-hero__grid { grid-template-columns: 1fr; gap: 40px; } .qb-ringhero__copy { max-width: 720px; } }
@media (max-width: 720px) { .qb-ringhero__title { font-size: 42px; } }

/* --- why one brain: the sprawl and the fix -------------------------------------------- */
.qh-vsgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 960px) { .qh-vsgrid { grid-template-columns: 1fr; } }
.qh-vs { margin: 0; display: flex; flex-direction: column; gap: 18px; padding: 28px; background: var(--card); border: 2px solid var(--ink); box-shadow: var(--shadow-pixel-ink); }
.qh-vs--good { box-shadow: var(--shadow-pixel); }
.qh-vs__head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.qh-vs__head h3 { margin: 0; font-family: var(--font-display); font-size: 26px; line-height: 32px; font-weight: 720; letter-spacing: -0.02em; color: var(--ink); }
.qh-vs__tag { padding: 5px 8px 4px; font-family: var(--font-pixel); font-size: 12px; line-height: 12px; text-transform: uppercase; color: #051f17; background: #ffc4b6; }
.qh-vs__tag--good { background: var(--mint-300); }
.qh-vs__art { border-radius: 10px; background-color: var(--paper-sunk); background-image: radial-gradient(var(--line) 1.2px, transparent 1.4px); background-size: 18px 18px; }
.qh-vs__points { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qh-vs__points li { display: flex; align-items: center; gap: 10px; font-size: 15px; line-height: 22px; color: var(--ink-muted); }
.qh-vs--bad .qh-vs__points .qb-icon { color: var(--signal); }
.qh-vs--good .qh-vs__points .qb-icon { color: var(--brand); }

/* --- how it works: know, authorize, govern ------------------------------------------- */
.qh-steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; counter-reset: step; }
.qh-steps::before { content: ""; position: absolute; left: 8%; right: 8%; top: 46px; height: 4px; background: repeating-linear-gradient(90deg, var(--brand) 0 8px, transparent 8px 16px); background-size: 32px 4px; opacity: .5; animation: qh-march 1.2s linear infinite; }
@media (max-width: 1080px) { .qh-steps { grid-template-columns: 1fr; } .qh-steps::before { display: none; } }
.qh-step { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; background: var(--card); border: 2px solid var(--ink); }
.qh-step__top { display: flex; align-items: center; gap: 12px; margin: 0; }
.qh-step__n { display: inline-grid; place-items: center; width: 40px; height: 40px; background: var(--forest-900); color: var(--mint-300); font-family: var(--font-pixel); font-size: 16px; line-height: 16px; }
.qh-step__verb { font-family: var(--font-pixel); font-size: 16px; line-height: 16px; text-transform: uppercase; color: var(--brand); }
.qh-step h3 { margin: 4px 0 0; font-family: var(--font-display); font-size: 24px; line-height: 30px; font-weight: 720; letter-spacing: -0.02em; color: var(--ink); }
.qh-step__body { margin: 0; font-size: 15px; line-height: 23px; color: var(--ink-muted); }
.qh-step__art { margin-top: auto; padding-top: 10px; }
.qh-know { display: grid; gap: 10px; padding: 16px; border-radius: 10px; background: var(--paper-sunk); }
.qh-know__src { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qh-know__src li { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--card); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink); animation: qh-bob 3s ease-in-out calc(var(--k) * .35s) infinite; }
.qh-know__src .qb-icon, .qh-know__mem .qb-icon { color: var(--brand); }
.qh-know__flow { display: flex; align-items: center; gap: 10px; margin: 0; font-family: var(--font-pixel); font-size: 11px; line-height: 11px; text-transform: uppercase; color: var(--brand); }
.qh-know__flow i { flex: 1; height: 4px; background: repeating-linear-gradient(90deg, var(--brand) 0 6px, transparent 6px 12px); background-size: 24px 4px; animation: qh-march 1s linear infinite; }
.qh-know__mem { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 12px; list-style: none; background: #051f17; border-radius: 8px; }
.qh-know__mem li { display: flex; align-items: center; gap: 8px; font-size: 13px; line-height: 18px; color: #dcf5e7; }
.qh-know__mem .qb-icon { color: var(--mint-300); }
.qh-ledger { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qh-ledger li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who v" "ask v"; align-items: center; gap: 2px 10px; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--card); animation: qh-in 6s ease calc(var(--k) * .5s) infinite; }
.qh-ledger__who { grid-area: who; display: flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; font-weight: 650; color: var(--ink); }
.qh-ledger__who .qb-icon { color: var(--brand); }
.qh-ledger__ask { grid-area: ask; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.qh-ledger__ask s { text-decoration-color: var(--signal); text-decoration-thickness: 2px; }
.qh-ledger__ask b { color: var(--ink); font-weight: 600; }
.qh-ledger li .qb-verdict { grid-area: v; }
.qh-govern { display: grid; gap: 10px; }
.qh-govern__ask { padding: 14px; border: 2px solid var(--saffron-400); border-radius: 10px; background: var(--accent-soft); }
.qh-govern__label { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-family: var(--font-pixel); font-size: 11px; line-height: 11px; text-transform: uppercase; color: var(--accent-ink); }
.qh-govern__label i { width: 8px; height: 8px; background: var(--saffron-400); animation: qb-twinkle 1.2s steps(2, end) infinite; }
.qh-govern__what { margin: 0; font-size: 14px; line-height: 20px; color: var(--ink); }
.qh-govern__why { margin: 2px 0 10px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.qh-govern__btns { display: flex; gap: 8px; }
.qh-btn { padding: 6px 12px; border: 1.5px solid var(--ink); border-radius: 6px; font-size: 13px; line-height: 16px; font-weight: 650; color: var(--ink); background: var(--card); }
.qh-btn--yes { background: var(--forest-900); border-color: var(--forest-900); color: var(--cream-50); }
.qh-receipts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.qh-receipts li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1.5px dashed var(--line-strong); border-radius: 8px; font-size: 13px; line-height: 18px; color: var(--ink-muted); }
.qh-receipts code { font-family: var(--font-mono); font-size: 12px; color: var(--brand); }
.qh-receipts span { flex: 1; min-width: 0; }
@keyframes qh-march { to { background-position: 32px 0; } }
@keyframes qh-bob { 50% { transform: translateY(-3px); } }
@keyframes qh-in { 0%, 100% { border-color: var(--line); } 8%, 22% { border-color: var(--brand); } 30% { border-color: var(--line); } }

/* --- bring your own agents --------------------------------------------------------- */
.qh-agents { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px; align-items: center; margin-top: 32px; padding: 36px; border: 2px solid #1f4f40; background: var(--forest-900); color: var(--cream-50); }
.qh-agents .qb-eyebrow { color: var(--mint-300); }
.qh-agents h3 { margin: 10px 0 12px; font-family: var(--font-display); font-size: 32px; line-height: 38px; font-weight: 750; letter-spacing: -0.025em; color: var(--cream-50); }
.qh-agents p { margin: 0 0 12px; font-size: 16px; line-height: 25px; color: #b3c7bd; }
.qh-agents .qb-btn--link { color: var(--saffron-400); }
.qh-agents__art { display: grid; grid-template-columns: minmax(0, 1fr) 44px auto 44px minmax(0, 1fr); align-items: center; gap: 0; }
.qh-box { padding: 14px; border: 2px solid var(--mint-300); border-radius: 10px; background: #0c3428; }
.qh-box--dashed { border-style: dashed; border-color: #6f9a89; background: transparent; }
.qh-box__label { margin: 0 0 10px !important; font-family: var(--font-pixel); font-size: 11px !important; line-height: 13px !important; text-transform: uppercase; color: var(--mint-300) !important; }
.qh-box ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.qh-box li { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; background: rgba(255, 255, 255, .06); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--cream-50); }
.qh-box .qb-icon { color: var(--mint-300); flex: none; }
.qh-pipe { position: relative; height: 4px; overflow: hidden; }
.qh-pipe i { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, var(--saffron-400) 0 6px, transparent 6px 12px); background-size: 24px 4px; animation: qh-march 0.9s linear infinite; }
.qh-pipe--rev i { animation-direction: reverse; }
.qh-brain { display: grid; justify-items: center; gap: 6px; padding: 18px 16px; border-radius: 999px; background: #051f17; box-shadow: 0 0 0 3px var(--mint-300), 0 0 0 9px rgba(142, 232, 185, .14); text-align: center; color: var(--mint-300); animation: qh-glow 2.4s ease-in-out infinite; }
.qh-brain b { font-family: var(--font-display); font-size: 20px; line-height: 22px; color: var(--cream-50); }
.qh-brain small { max-width: 8em; font-family: var(--font-pixel); font-size: 10px; line-height: 13px; text-transform: uppercase; color: var(--mint-300); }
@keyframes qh-glow { 50% { box-shadow: 0 0 0 3px var(--mint-300), 0 0 0 14px rgba(142, 232, 185, .08); } }
@media (max-width: 1080px) { .qh-agents { grid-template-columns: 1fr; } }
@media (max-width: 720px) {
  .qh-agents { padding: 24px; }
  .qh-agents__art { grid-template-columns: 1fr; justify-items: stretch; }
  .qh-pipe { width: 4px; height: 32px; justify-self: center; }
  .qh-pipe i { background: repeating-linear-gradient(180deg, var(--saffron-400) 0 6px, transparent 6px 12px); background-size: 4px 24px; animation-name: qh-march-v; }
  .qh-brain { justify-self: center; border-radius: 16px; }
}
@keyframes qh-march-v { to { background-position: 0 24px; } }

/* --- measured against the industry ------------------------------------------------- */
.qh-h2hgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 1080px) { .qh-h2hgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .qh-h2hgrid { grid-template-columns: 1fr; } }
.qh-h2h { display: flex; flex-direction: column; gap: 8px; padding: 24px; background: #072519; border: 1px solid #1f4f40; transition: border-color .2s, transform .2s; }
.qh-h2h:hover { border-color: #6f9a89; transform: translateY(-3px); }
.qh-h2h__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.qh-h2h__head .qb-prov { position: static; margin-top: 4px; font-size: 11px; line-height: 11px; padding: 4px 6px 3px; }
.qh-h2h__big { margin: 0; font-family: var(--font-pixel); font-size: 48px; line-height: 48px; color: var(--saffron-400); }
.qh-h2h__label { margin: 0; font-family: var(--font-display); font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.015em; color: var(--cream-50); }
.qh-h2h__metric { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin: 10px 0 2px; font-size: 13px; line-height: 18px; color: #b3c7bd; }
.qh-h2h__metric i { font-style: normal; font-family: var(--font-pixel); font-size: 10px; line-height: 18px; text-transform: uppercase; color: #6f9a89; }
.qh-h2h__rows { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.qh-h2h__rows li { display: grid; grid-template-columns: minmax(0, 9.6em) minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 13px; line-height: 18px; color: #93ab9f; }
.qh-h2h__rows li.is-q { color: var(--cream-50); font-weight: 650; }
.qh-h2h__who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qh-bar { position: relative; height: 10px; overflow: hidden; background: rgba(255, 255, 255, .06); }
.qh-bar i { display: block; height: 100%; background: #4f7a6a; transform-origin: left center; transition: transform 1.3s cubic-bezier(.2, .7, .2, 1) .25s; }
.is-q .qh-bar i { background: var(--saffron-400); }
[data-reveal].is-pending .qh-bar i { transform: scaleX(0); }
.qh-h2h__v { min-width: 3.2em; text-align: right; font-variant-numeric: tabular-nums; }
.qh-h2h__note { margin: auto 0 0; padding-top: 12px; border-top: 1px dashed #1f4f40; font-size: 12.5px; line-height: 18px; color: #93ab9f; }
@media (prefers-reduced-motion: reduce) { .qh-bar i, [data-qh-panel] { transition: none; animation: none; } }

/* --- the console, framed --------------------------------------------------------------- */
.qh-frame { overflow: hidden; border: 2px solid #1f4f40; border-radius: 14px; background: #051f17; box-shadow: 0 40px 80px -40px rgba(10, 46, 35, .55); }
.qh-frame__bar { display: flex; align-items: flex-end; gap: 14px; padding: 10px 14px 0; }
.qh-frame__dots { display: flex; gap: 7px; align-self: center; padding-bottom: 8px; }
.qh-frame__dots i { width: 10px; height: 10px; border-radius: 50%; background: #1f4f40; }
.qh-tabs { display: flex; flex: 1; min-width: 0; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.qh-tab { flex: none; padding: 9px 16px 10px; border: 0; border-radius: 9px 9px 0 0; background: transparent; color: #93ab9f; font: 600 13px/16px var(--font-text); cursor: pointer; white-space: nowrap; }
.qh-tab:hover { color: var(--cream-50); background: rgba(255, 255, 255, .04); }
.qh-tab.is-on { background: #0f3b2e; color: var(--cream-50); box-shadow: inset 0 2px 0 var(--saffron-400); }
.qh-tab:focus-visible { outline: 2px solid var(--saffron-400); outline-offset: -2px; }
.qh-frame__url { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 16px; background: #0f3b2e; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: #b3c7bd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qh-frame__url .qb-icon { color: var(--mint-300); }
.qh-frame__tag { align-self: center; margin-bottom: 8px; padding: 4px 8px 3px; font-family: var(--font-pixel); font-size: 11px; line-height: 11px; text-transform: uppercase; color: #051f17; background: var(--saffron-400); }
[data-qh-panel] { animation: qh-panel .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes qh-panel { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.qb-console--embed { border-radius: 0 0 12px 12px; }
.qh-console { padding: 24px 28px 28px; }
.qh-console .qb-head { margin-bottom: 18px; }
.qh-console__cols { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: 20px; align-items: start; margin-top: 20px; }
@media (max-width: 1080px) { .qh-console__cols { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .qh-console { padding: 16px; } .qh-frame__dots, .qh-frame__tag { display: none; } .qh-tab { padding: 8px 12px 9px; font-size: 12px; } }
.qh-console__cols--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1080px) { .qh-console__cols--even { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .qh-vs *, .qh-step *, .qh-agents *, .qh-steps::before { animation: none !important; } }

/* --- scroll reveal (site.js adds .is-pending only to things below the fold) ---------- */
[data-reveal].is-pending { opacity: 0; transform: translateY(28px); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--rd, 0s); }
@media (prefers-reduced-motion: reduce) { [data-reveal].is-pending { opacity: 1; transform: none; } [data-reveal].is-in { transition: none; } }

/* Front page: the identity-security band (pages/home-identity.jsx). Prefix qh-id-. Tokens only. */
.qh-id__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.qh-id__early { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 14px; font-weight: 600; color: var(--ink-muted); }
.qh-id__early span { padding: 3px 8px; background: var(--accent); color: var(--on-accent); font-family: var(--font-pixel); font-size: 12px; text-transform: uppercase; }
.qh-id__providers { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qh-id__providers li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); }
.qh-id__providers b { font-size: 15px; }
.qh-id__providers small { font-size: 13px; color: var(--ink-muted); }
.qh-id__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 28px; }

.qh-id-card { background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius-md); box-shadow: 8px 8px 0 var(--saffron-400); overflow: hidden; }
.qh-id-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; }
.qh-id-card__head > span:first-child { display: flex; align-items: center; gap: 8px; }
.qh-id-card__who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 12px 18px; background: var(--card-sunk); font-size: 14px; }
.qh-id-card__who small { flex-basis: 100%; color: var(--ink-muted); font-size: 12.5px; }
.qh-id-trail { list-style: none; margin: 0; padding: 0; }
.qh-id-trail li { display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 18px; border-bottom: 1px dashed var(--line); font-size: 13.5px; }
.qh-id-trail code { font-family: var(--font-mono); font-size: 12px; color: var(--ink-muted); }
.qh-id-trail__where { font-weight: 600; }
.qh-id-trail__what { min-width: 0; }
.qh-id-risk { padding: 14px 18px 16px; }
.qh-id-risk__title { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 10px; font-size: 14px; }
.qh-id-risk__title span { color: var(--ink-muted); font-size: 12.5px; }
.qh-id-risk__row { display: grid; grid-template-columns: 84px minmax(0, 1fr) 32px; gap: 4px 10px; align-items: center; margin-bottom: 8px; font-size: 13px; }
.qh-id-risk__row small { grid-column: 2 / -1; color: var(--ink-muted); font-size: 12px; }
.qh-id-risk__bar { height: 8px; border-radius: 4px; background: var(--card-sunk); overflow: hidden; }
.qh-id-risk__bar i { display: block; height: 100%; background: var(--accent); }
.qh-id-risk__foot { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 12.5px; color: var(--ink-muted); }

.qh-id__pillars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.qh-id__pillar { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--card); }
.qh-id__pillar b { font-family: var(--font-display); font-size: 19px; }
.qh-id__pillar p { margin: 0; font-size: 14.5px; line-height: 22px; color: var(--ink-muted); }
.qh-id__honest { display: flex; align-items: flex-start; gap: 8px; margin: 28px 0 0; font-size: 14px; color: var(--ink-muted); }

@media (max-width: 1080px) { .qh-id__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 960px) { .qh-id__grid { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 560px) {
  .qh-id__providers, .qh-id__pillars { grid-template-columns: 1fr; }
  .qh-id-trail li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .qh-id-trail__where { display: none; }
}

/* identity.html cloud section */
.qh-id__providers--wide { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.qh-id__grid--spaced { margin-top: 48px; align-items: center; }
.qh-id__h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 24px; letter-spacing: -0.015em; }
.qh-id__p { margin: 0 0 28px; color: var(--ink-muted); font-size: 16px; line-height: 25px; }
@media (max-width: 960px) { .qh-id__providers--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .qh-id__providers--wide { grid-template-columns: 1fr; } }

/* ================================================================== console screens (page level) */
/* Page-only layouts for the clean console. Components live in the design system's console.css. */

.qc-gap { height: 20px; }
.qc-mt { margin-top: 20px; }
.qc-stack { display: grid; gap: 16px; }
.qc-cols { display: grid; gap: 20px; align-items: start; }
.qc-cols > * { min-width: 0; }
.qc-cols--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qc-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qc-cols--12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.qc-cols--21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.qc-cols--summary { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.qc-cols--2 > .qb-card, .qc-cols--12 > .qb-card, .qc-cols--21 > .qb-card, .qc-cols--summary > .qb-card { height: 100%; box-sizing: border-box; }
.qc-cols--2, .qc-cols--12, .qc-cols--21, .qc-cols--summary { align-items: stretch; }
.qc-faint { color: var(--qc-faint); font-size: 13px; }
.qc-note { margin: 0 0 12px; font-size: 13.5px; line-height: 20px; color: var(--qc-muted); }
.qc-note:last-child { margin-bottom: 0; }
.qc-text { margin: 0; font-size: 14px; line-height: 22px; color: var(--qc-ink-2); }
.qc-bad { color: var(--qc-danger); font-weight: 700; }
.qc-wrap { display: inline-block; min-width: 180px; white-space: normal; }
.qc-pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.qc-rowlink { color: var(--qc-ink); font-weight: 600; text-decoration: none; }
.qc-rowlink:hover { color: var(--qc-brand); text-decoration: underline; text-underline-offset: 3px; }
.qc-counted { display: flex; align-items: flex-start; gap: 8px; margin: 14px 0 0; font-size: 12.5px; line-height: 18px; color: var(--qc-muted); }
.qc-counted .qb-icon { flex: none; margin-top: 1px; color: var(--qc-ok-fill); }
.qc-tile { display: grid; place-items: center; flex: none; width: 34px; height: 34px; box-sizing: border-box; border: 1px solid var(--qc-line); border-radius: 8px; background: #fff; color: var(--qc-brand); }
.qc-tile--lg { width: 44px; height: 44px; border-radius: 10px; background: var(--qc-brand-soft); border-color: #cfe6d9; }
.qc-iconbtn { display: inline-grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--qc-line); border-radius: 7px; background: #fff; color: var(--qc-muted); cursor: pointer; }
.qc-iconbtn:hover { border-color: var(--qc-line-strong); color: var(--qc-ink); }
.qc-rowactions { display: inline-flex; gap: 6px; }
.qc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* score cell and thin bars */
.qc-hbar { display: inline-block; width: 72px; height: 6px; border-radius: 999px; background: var(--qc-line-2); overflow: hidden; vertical-align: middle; }
.qc-hbar i { display: block; height: 100%; border-radius: 999px; background: var(--qc-ok-fill); }
.qc-hbar.is-warn i { background: var(--qc-warn-fill); }
.qc-hbar.is-danger i { background: var(--qc-danger-fill); }
.qc-score { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.qc-score b { min-width: 22px; font-size: 13px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }

/* plain linked list */
.qc-list { margin: 0; padding: 0; list-style: none; }
.qc-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--qc-line-2); font-size: 13.5px; line-height: 19px; }
.qc-list li:first-child { padding-top: 0; }
.qc-list li:last-child { padding-bottom: 0; border-bottom: 0; }
.qc-list a, .qc-list b { font-weight: 600; color: var(--qc-ink); text-decoration: none; }
.qc-list a:hover { color: var(--qc-brand); text-decoration: underline; text-underline-offset: 3px; }
.qc-list small { flex: none; font-size: 12.5px; color: var(--qc-muted); white-space: nowrap; }
.qc-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qc-checks li { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 20px; color: var(--qc-ink-2); }
.qc-checks .qb-icon { flex: none; margin-top: 2px; color: var(--qc-ok-fill); }
.qc-quotes { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qc-quotes li { display: grid; justify-items: start; gap: 4px; }
.qc-quotes q { font-size: 13px; line-height: 19px; color: var(--qc-ink-2); }
.qc-facts { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.qc-facts li { display: grid; justify-items: start; gap: 6px; padding-left: 14px; border-left: 3px solid var(--qc-brand-soft); }
.qc-facts b { font-size: 14px; line-height: 20px; font-weight: 600; }

/* summary row (identity-style detail pages) */
.qc-scorebox { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 28px; }
.qc-scorebox__facts { display: grid; justify-items: start; gap: 12px; min-width: 0; padding-left: 28px; border-left: 1px solid var(--qc-line); }
.qc-scorebox__facts .qb-statlist { width: 100%; }

/* code and verdicts */
.qc-code { margin: 0; padding: 14px 16px; overflow: auto; max-height: 300px; border: 1px solid var(--qc-line); border-radius: 8px; background: #f7f9f8; color: var(--qc-ink); font-family: var(--font-mono); font-size: 12.5px; line-height: 20px; }
.qc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; font-size: 13px; color: var(--qc-muted); }
.qc-verdict { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.qc-verdict b { display: block; font-size: 15px; line-height: 22px; }
.qc-verdict p { margin: 2px 0 0; font-size: 13.5px; line-height: 20px; color: var(--qc-muted); }
.qc-pipe { display: grid; margin: 0 0 16px; padding: 0; list-style: none; counter-reset: pipe; }
.qc-pipe li { display: grid; grid-template-columns: 16px 130px minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--qc-line-2); font-size: 13.5px; line-height: 19px; }
.qc-pipe li:last-child { border-bottom: 0; }
.qc-pipe li .qb-icon { color: var(--qc-ok-fill); }
.qc-pipe li.is-risk .qb-icon { color: var(--qc-danger-fill); }
.qc-pipe li.is-missing .qb-icon { color: var(--qc-warn-fill); }
.qc-pipe b { font-weight: 600; }
.qc-pipe span { color: var(--qc-muted); }
.qc-sev { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--qc-ink); white-space: nowrap; }
.qc-sev > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: #9aa6a1; color: #fff; }
.qc-sev.is-critical > span { background: #b3261e; }
.qc-sev.is-high > span { background: #e5484d; }
.qc-sev.is-medium > span { background: #f5a524; color: #3b2900; }

/* chat */
.qc-chat { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.qc-chat__list { position: sticky; top: 20px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; background: #fff; border: 1px solid var(--qc-line); border-radius: var(--qc-radius); }
.qc-chat__listhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.qc-chat__listhead b { font-size: 15px; }
.qc-chat__group { display: grid; gap: 2px; }
.qc-chat__group p { margin: 8px 0 4px; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--qc-faint); }
.qc-chat__group a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; color: var(--qc-ink-2); font-size: 13.5px; line-height: 18px; text-decoration: none; }
.qc-chat__group a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-chat__group a:hover { background: var(--qc-sunk); color: var(--qc-ink); }
.qc-chat__group a.is-on { background: var(--qc-brand-soft); color: var(--qc-brand); font-weight: 600; }
.qc-chat__main { display: grid; background: #fff; border: 1px solid var(--qc-line); border-radius: var(--qc-radius); }
.qc-chat__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px; border-bottom: 1px solid var(--qc-line-2); }
.qc-chat__head h1 { margin: 0; font-size: 17px; line-height: 24px; font-weight: 700; }
.qc-chat__head p { margin: 2px 0 0; font-size: 12.5px; color: var(--qc-faint); }
.qc-chat__thread { padding: 4px 22px; }
.qc-chat__composer { padding: 16px 22px 20px; border-top: 1px solid var(--qc-line-2); background: var(--qc-sunk); border-radius: 0 0 var(--qc-radius) var(--qc-radius); }

/* search */
.qc-searchtop { display: grid; justify-items: center; gap: 10px; margin: 12px 0 26px; text-align: center; }
.qc-searchtop p { margin: 0; font-size: 13px; color: var(--qc-faint); }
.qc-searchbox { width: 100%; max-width: 680px; height: 50px; border-radius: 12px; box-shadow: 0 8px 24px -18px rgba(16, 32, 25, 0.4); }
.qc-searchbox input { font-size: 16px; }
.qc-facet { display: grid; gap: 8px; }
.qc-facet + .qc-facet { margin-top: 18px; }
.qc-facet p { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--qc-faint); }
.qc-facet label { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--qc-ink-2); }
.qc-facet input { width: 16px; height: 16px; margin: 0; accent-color: var(--qc-brand); }
.qc-facet i { margin-left: auto; font-size: 12px; font-style: normal; color: var(--qc-faint); }
.qc-answer { margin: 0; font-size: 15px; line-height: 24px; color: var(--qc-ink); }
.qc-srcrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.qc-results { margin: 0; padding: 0; list-style: none; }
.qc-results li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 14px 20px; border-top: 1px solid var(--qc-line-2); }
.qc-results a { color: var(--qc-ink); font-size: 14.5px; font-weight: 700; text-decoration: none; }
.qc-results a:hover { color: var(--qc-brand); text-decoration: underline; }
.qc-results p { margin: 3px 0; font-size: 13.5px; line-height: 20px; color: var(--qc-ink-2); }
.qc-results small { font-size: 12px; color: var(--qc-faint); }

/* plan, sandbox screen */
.qc-touch { display: grid; gap: 10px; margin: 0 0 14px; padding: 0; list-style: none; }
.qc-touch li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qc-browser { overflow: hidden; background: #fff; border: 1px solid var(--qc-line); border-radius: var(--qc-radius); box-shadow: 0 16px 40px -28px rgba(16, 32, 25, 0.45); }
.qc-browser__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--qc-sunk); border-bottom: 1px solid var(--qc-line); }
.qc-browser__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d6ddd9; }
.qc-browser__bar span { flex: 1 1 auto; margin-left: 10px; padding: 5px 12px; overflow: hidden; border: 1px solid var(--qc-line); border-radius: 999px; background: #fff; font-size: 12.5px; color: var(--qc-muted); text-overflow: ellipsis; white-space: nowrap; }
.qc-browser__bar em { font-size: 12px; font-style: normal; font-weight: 700; color: var(--qc-warn); }
.qc-browser__body { display: grid; place-items: center; min-height: 380px; padding: 32px; background: #f2f5f3; }
.qc-browser__doc { display: grid; gap: 8px; width: 100%; max-width: 440px; padding: 28px; background: #fff; border: 1px solid var(--qc-line); border-radius: 8px; }
.qc-browser__doc b { font-size: 18px; }
.qc-browser__doc p { margin: 0; font-size: 13px; color: var(--qc-muted); }
.qc-browser__doc code { font-size: 17px; font-weight: 700; color: var(--qc-ink); }
.qc-browser__doc span { height: 8px; border-radius: 4px; background: var(--qc-line-2); }
.qc-browser__doc span.is-short { width: 60%; }

/* claims */
.qc-pair { background: #fff; border: 1px solid var(--qc-line); border-radius: var(--qc-radius); }
.qc-pair > header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 20px 0; font-size: 12.5px; color: var(--qc-faint); }
.qc-pair__sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding: 14px 20px; }
.qc-pair__sides > div { display: grid; justify-items: start; align-content: start; gap: 10px; padding: 14px 16px; border-radius: 8px; background: var(--qc-sunk); border: 1px solid var(--qc-line-2); }
.qc-pair__sides p { margin: 0; font-size: 14.5px; line-height: 22px; font-weight: 600; color: var(--qc-ink); }
.qc-pair > footer { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 16px; }

/* knowledge */
.qc-tilecard { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #fff; border: 1px solid var(--qc-line); border-radius: var(--qc-radius); color: inherit; text-decoration: none; box-shadow: var(--qc-shadow); }
.qc-tilecard:hover { border-color: #a9cfba; }
.qc-tilecard__icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 10px; background: var(--qc-brand-soft); color: var(--qc-brand); }
.qc-tilecard__text { display: grid; gap: 2px; min-width: 0; }
.qc-tilecard__text b { font-size: 15px; line-height: 21px; }
.qc-tilecard__text small { font-size: 13px; line-height: 18px; color: var(--qc-muted); }
.qc-tilecard__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.qc-tilecard__meta em { font-size: 12.5px; font-style: normal; font-weight: 600; color: var(--qc-muted); white-space: nowrap; }
.qc-golink { display: flex; align-items: center; gap: 0; max-width: 620px; margin: 0 0 16px; padding: 5px 5px 5px 14px; background: #fff; border: 1px solid var(--qc-line-strong); border-radius: 10px; }
.qc-golink:focus-within { border-color: var(--qc-brand); box-shadow: 0 0 0 3px var(--qc-brand-soft); }
.qc-golink span { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--qc-brand); }
.qc-golink input { flex: 1 1 auto; min-width: 0; height: 36px; margin: 0 8px 0 2px; border: 0; background: none; color: var(--qc-ink); font-family: var(--font-mono); font-size: 14px; outline: none; }
.qc-golink__name { font-family: var(--font-mono); font-size: 13px; color: var(--qc-brand); }
.qc-prose { font-size: 14.5px; line-height: 23px; color: var(--qc-ink-2); }
.qc-prose p { margin: 0 0 12px; }
.qc-prose h3 { margin: 18px 0 8px; font-size: 14.5px; line-height: 20px; font-weight: 700; color: var(--qc-ink); }
.qc-prose ul { margin: 0 0 12px; padding-left: 20px; }
.qc-prose li { margin: 4px 0; }

/* fleet */
.qc-ask + .qc-ask { margin-top: 16px; padding-top: 16px; border-top: 1px solid #f6e6bd; }
.qc-ask b { font-size: 14px; }
.qc-ask p { margin: 2px 0 0; font-size: 13px; color: var(--qc-muted); }
.qc-ask .qc-chips { margin-top: 10px; }
.qc-swarm { display: grid; gap: 14px; }
.qc-swarm__lead, .qc-swarm__specs > div { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #fff; border: 1px solid var(--qc-line); border-radius: 8px; }
.qc-swarm__lead { border-color: #b9dcc8; background: var(--qc-brand-softer); }
.qc-swarm__lead > span:nth-child(2), .qc-swarm__specs > div > span:nth-child(2) { flex: 1 1 auto; display: grid; min-width: 0; }
.qc-swarm__lead small, .qc-swarm__specs small { font-size: 12.5px; color: var(--qc-muted); }
.qc-swarm__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-left: 28px; padding-left: 16px; border-left: 2px dashed var(--qc-line); }
.qc-keys { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.qc-keys li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 2px 10px; align-items: center; }
.qc-keys .qb-icon { color: var(--qc-brand); }
.qc-keys code { font-size: 12.5px; font-weight: 400; color: var(--qc-ink); overflow-wrap: anywhere; }
.qc-keys small { grid-column: 2; font-size: 12px; color: var(--qc-muted); }
.qc-console { display: grid; align-content: start; gap: 8px; padding: 18px 20px; background: #fff; border: 1px solid var(--qc-line); border-radius: var(--qc-radius); box-shadow: var(--qc-shadow); }
.qc-console > header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
.qc-console > b { font-size: 16px; line-height: 22px; }
.qc-console > code { font-size: 12.5px; color: var(--qc-muted); }
.qc-console > p { margin: 0; font-size: 13.5px; line-height: 20px; color: var(--qc-muted); }
.qc-console__stats { display: flex; flex-wrap: wrap; gap: 22px; margin: 8px 0 4px; padding-top: 12px; border-top: 1px solid var(--qc-line-2); }
.qc-console > footer { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.qc-console.is-archived { background: var(--qc-sunk); }
.qc-console.is-archived > b, .qc-console.is-archived > p { color: var(--qc-faint); }
.qc-radios { display: grid; gap: 10px; }
.qc-radios label { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--qc-line); border-radius: 8px; background: #fff; cursor: pointer; }
.qc-radios label.is-on { border-color: var(--qc-brand); box-shadow: 0 0 0 3px var(--qc-brand-soft); }
.qc-radios input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--qc-brand); }
.qc-radios label > span:last-child { display: grid; gap: 2px; }
.qc-radios b { font-size: 14px; line-height: 20px; }
.qc-radios small { font-size: 12.5px; line-height: 18px; color: var(--qc-muted); }
.qc-radios--roles { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20px; }
.qc-radios--roles label { align-items: center; }
.qc-radios--roles input { position: absolute; opacity: 0; pointer-events: none; }
.qc-radios--roles b { font-size: 13.5px; line-height: 19px; }
.qc-people { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.qc-people li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qc-suggest { display: grid; gap: 10px; }
.qc-suggest > div { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--qc-line); border-radius: 8px; }
.qc-suggest > div > span:nth-child(2) { flex: 1 1 auto; display: grid; justify-items: start; gap: 4px; min-width: 0; }
.qc-suggest b { font-size: 14px; }
.qc-suggest small { font-size: 12.5px; line-height: 18px; color: var(--qc-muted); }
.qc-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: 22px 24px; border: 1.5px dashed #b9d9c7; border-radius: var(--qc-radius); background: var(--qc-brand-softer); }
.qc-drop > div { flex: 1 1 320px; }
.qc-drop b { font-size: 15px; }
.qc-drop p { margin: 2px 0 0; font-size: 13px; line-height: 19px; color: var(--qc-muted); }

/* forms */
.qc-form { display: grid; gap: 14px; }
.qc-form__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.qc-field { display: grid; gap: 6px; }
.qc-field > span:first-child { font-size: 13px; font-weight: 600; color: var(--qc-ink-2); }
.qc-field input { box-sizing: border-box; width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--qc-line-strong); border-radius: 8px; background: #fff; color: var(--qc-ink); font: inherit; font-size: 14.5px; outline: none; }
.qc-field input:focus { border-color: var(--qc-brand); box-shadow: 0 0 0 3px var(--qc-brand-soft); }
.qc-addr { display: flex; align-items: center; height: 42px; box-sizing: border-box; border: 1px solid var(--qc-line-strong); border-radius: 8px; background: #fff; overflow: hidden; }
.qc-addr:focus-within { border-color: var(--qc-brand); box-shadow: 0 0 0 3px var(--qc-brand-soft); }
.qc-addr em { align-self: stretch; display: flex; align-items: center; padding: 0 10px 0 12px; background: var(--qc-sunk); border-right: 1px solid var(--qc-line); font-style: normal; font-size: 14px; color: var(--qc-muted); }
.qc-addr input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 14.5px; outline: none; }
.qc-invite { display: flex; flex-wrap: wrap; gap: 8px; }
.qc-invite .qb-input { height: 30px; min-width: 220px; }
.qc-or { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--qc-faint); }
.qc-or::before, .qc-or::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--qc-line); }
.qc-switch { margin: 22px 0 0; font-size: 14px; color: var(--qc-muted); }
.qc-connect { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.qc-connect button { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--qc-line); border-radius: 8px; background: #fff; color: var(--qc-ink); font: inherit; text-align: left; cursor: pointer; }
.qc-connect button:hover { border-color: #a9cfba; }
.qc-connect button.is-on { border-color: #b9dcc8; background: var(--qc-brand-softer); }
.qc-connect b { flex: 1 1 auto; font-size: 13.5px; }
.qc-connect button > span:last-child { font-size: 12.5px; font-weight: 600; color: var(--qc-brand); }
.qc-onside { position: relative; z-index: 1; display: grid; gap: 14px; max-width: 420px; }
.qc-onside h2 { margin: 0 0 4px; font-family: var(--font-display); font-size: 26px; line-height: 32px; }
.qc-onside__card { display: grid; justify-items: start; gap: 10px; padding: 16px 18px; background: #fff; border: 1px solid var(--qc-side-line); border-radius: var(--qc-radius); box-shadow: 0 12px 30px -24px rgba(16, 32, 25, 0.5); }
.qc-onside__card p { margin: 0; font-size: 14px; line-height: 21px; }
.qc-onside__k { font-size: 11px !important; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--qc-faint); }
.qc-onside__card--stat b { font-family: var(--font-display); font-size: 30px; line-height: 34px; }
.qc-onside__card--stat span { font-size: 13px; color: var(--qc-muted); }
.qc-checkbars { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.qc-checkbars li { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.qc-checkbars li > span:first-child { display: grid; }
.qc-checkbars b { font-size: 13.5px; }
.qc-checkbars small { font-size: 12.5px; color: var(--qc-muted); }
.qc-checkbars .qc-hbar { width: 120px; }
.qc-attacks { display: grid; gap: 8px; }
.qc-attacks button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--qc-line); border-radius: 8px; background: #fff; color: var(--qc-ink); font: inherit; text-align: left; cursor: pointer; }
.qc-attacks button:hover { border-color: #f0b7b5; }
.qc-attacks button > span { display: grid; }
.qc-attacks b { font-size: 13.5px; }
.qc-attacks small { font-size: 12.5px; color: var(--qc-muted); }
.qc-attacks .qb-icon { color: var(--qc-danger-fill); }
.qc-figure { margin: 0; }
.qc-figure img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--qc-line); }
.qc-figure figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; font-size: 13px; line-height: 19px; color: var(--qc-muted); }

/* guest pages: demo, shared chat, live call, meeting copilot */
.qc-guest { min-height: 100vh; }
.qc-guestbar { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; padding: 12px 24px; background: var(--qc-side); border-bottom: 1px solid var(--qc-side-line); }
.qc-guestbar > a { display: inline-flex; color: var(--qc-ink); }
.qc-guestbar p { flex: 1 1 280px; margin: 0; font-size: 13.5px; line-height: 20px; color: var(--qc-ink-2); }
.qc-guest__body { box-sizing: border-box; width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 24px 64px; }
.qc-guest__body--narrow { max-width: 820px; }
.qc-transcript { display: grid; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.qc-transcript li { display: grid; gap: 2px; }
.qc-transcript b { font-size: 12.5px; color: var(--qc-muted); }
.qc-transcript p { margin: 0; font-size: 14.5px; line-height: 22px; }
.qc-live { display: grid; justify-items: start; gap: 8px; padding: 14px 16px; border: 1px solid var(--qc-line); border-radius: 8px; background: #fff; }
.qc-live.is-accent { border-color: #fbe0a0; background: #fffaf0; }
.qc-live p { margin: 0; font-size: 14px; line-height: 21px; }
.qc-live small { font-size: 12.5px; color: var(--qc-muted); }
.qc-live__k { font-size: 11px !important; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--qc-faint); }
.qc-zoom { box-sizing: border-box; max-width: 440px; min-height: 100vh; margin: 0 auto; background: var(--qc-bg); border-left: 1px solid var(--qc-line); border-right: 1px solid var(--qc-line); }
.qc-zoom__head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: #fff; border-bottom: 1px solid var(--qc-line); }
.qc-zoom__head b { flex: 1 1 auto; font-size: 14.5px; }
.qc-zoom__body { display: grid; gap: 14px; padding: 16px; }

/* screen index */
.qc-screens { margin: 0 0 28px; }
.qc-screens h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 15px; line-height: 22px; font-weight: 700; }
.qc-screens h2 .qb-icon { color: var(--qc-brand); }
.qc-screens h2 i { padding: 1px 8px; border-radius: 999px; background: var(--qc-line-2); color: var(--qc-muted); font-size: 12px; font-style: normal; }
.qc-screen { display: grid; gap: 4px; padding: 16px 18px; background: #fff; border: 1px solid var(--qc-line); border-radius: var(--qc-radius); color: inherit; text-decoration: none; box-shadow: var(--qc-shadow); }
.qc-screen:hover { border-color: #a9cfba; box-shadow: 0 0 0 3px var(--qc-brand-soft); }
.qc-screen code { font-size: 12px; color: var(--qc-brand); }
.qc-screen b { font-size: 15px; line-height: 21px; }
.qc-screen small { font-size: 13px; line-height: 19px; color: var(--qc-muted); }

/* responsive */
@media (max-width: 1240px) {
  .qc-cols--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qc-cols--summary { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1080px) {
  .qc-cols--2, .qc-cols--12, .qc-cols--21 { grid-template-columns: minmax(0, 1fr); }
  .qc-chat { grid-template-columns: minmax(0, 1fr); }
  .qc-chat__list { position: static; }
}
@media (max-width: 640px) {
  .qc-cols--3 { grid-template-columns: minmax(0, 1fr); }
  .qc-scorebox { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .qc-scorebox__facts { justify-items: stretch; width: 100%; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--qc-line); }
  .qc-pair__sides { grid-template-columns: minmax(0, 1fr); }
  .qc-swarm__specs { grid-template-columns: minmax(0, 1fr); margin-left: 12px; }
  .qc-radios--roles, .qc-connect { grid-template-columns: minmax(0, 1fr); }
  .qc-pipe li { grid-template-columns: 16px minmax(0, 1fr); }
  .qc-pipe li span { grid-column: 2; }
  .qc-tilecard { flex-wrap: wrap; }
  .qc-tilecard__meta { margin-left: 56px; justify-content: flex-start; }
  .qc-chat__head, .qc-chat__thread, .qc-chat__composer { padding-left: 16px; padding-right: 16px; }
  .qc-guest__body { padding: 20px 16px 48px; }
  .qc-guestbar { padding: 10px 16px; }
  .qc-invite .qb-input { min-width: 0; flex: 1 1 160px; }
}