/* QuantBase UI components, v2 (meme noir). Needs qb-tokens.css loaded first.
 *
 * Every class is prefixed qb- so the app can import this file beside its own
 * styles without collisions. Components: base, button, input, badge (risk
 * levels), card, table, FAQ accordion, skeleton, plus a few utilities.
 * No !important outside the .qb-sr utility.
 */

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + var(--space-4)); }
body {
  margin: 0; background: var(--canvas); color: var(--ink-2);
  font: var(--weight-regular) var(--type-body-lg)/var(--lh-body) var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; color: var(--ink); font-family: var(--display); font-weight: var(--weight-semibold); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); text-wrap: balance; }
p { margin: 0; }
a { color: inherit; }
code, kbd, pre, samp { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-xs); }
::selection { background: var(--qb-dim); color: var(--ink); }

/* ---------------------------------------------------------------- button */
.qb-btn {
  --btn-bg: var(--raised-2); --btn-fg: var(--ink); --btn-edge: var(--line-2);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 44px; padding: 0 var(--space-5); border-radius: var(--r-sm);
  border: 1px solid var(--btn-edge); background: var(--btn-bg); color: var(--btn-fg);
  font: var(--weight-semibold) 15px/1 var(--sans); letter-spacing: .005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.qb-btn:hover { --btn-bg: var(--raised-3); }
.qb-btn:active { transform: translateY(1px); }
.qb-btn:focus-visible { border-radius: var(--r-sm); }
.qb-btn svg { width: 18px; height: 18px; flex: none; }
.qb-btn--primary { --btn-bg: linear-gradient(180deg, var(--qb-hi) -40%, var(--qb) 55%, var(--qb-lo) 140%); --btn-fg: var(--on-accent); --btn-edge: var(--qb-lo);
  box-shadow: inset 0 1px 0 rgba(255, 245, 220, .55), 0 10px 28px -14px rgba(233, 180, 76, .7); }
.qb-btn--primary:hover { --btn-bg: linear-gradient(180deg, #FFF0C8 -40%, var(--qb-hover) 55%, var(--qb) 140%); --btn-edge: var(--qb); }
.qb-btn--secondary { --btn-bg: transparent; --btn-fg: var(--ink); --btn-edge: var(--line-3); }
.qb-btn--secondary:hover { --btn-bg: var(--raised); --btn-edge: var(--ink-4); }
.qb-btn--outline { --btn-bg: transparent; --btn-fg: var(--ink); --btn-edge: var(--line-3); }
.qb-btn--outline:hover { --btn-bg: var(--raised); --btn-edge: var(--ink-3); }
.qb-btn--dark { --btn-bg: rgba(12, 10, 9, .55); --btn-fg: var(--ink); --btn-edge: var(--line-3); }
.qb-btn--dark:hover { --btn-bg: var(--raised-2); --btn-edge: var(--qb-edge); }
.qb-btn--light { --btn-bg: var(--paper); --btn-fg: var(--paper-ink); --btn-edge: var(--paper); }
.qb-btn--light:hover { --btn-bg: #FFF8EA; --btn-edge: #FFF8EA; }
.qb-btn--ghost { --btn-bg: transparent; --btn-edge: transparent; --btn-fg: var(--ink-2); padding: 0 var(--space-3); }
.qb-btn--ghost:hover { --btn-bg: var(--raised); }
.qb-btn--sm { min-height: 36px; padding: 0 var(--space-4); font-size: 14px; }
.qb-btn--lg { min-height: 52px; padding: 0 var(--space-6); font-size: 16px; }
.qb-btn--block { display: flex; width: 100%; }
.qb-btn[disabled], .qb-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

/* ---------------------------------------------------------------- input */
.qb-field { display: grid; gap: var(--space-2); }
.qb-label { color: var(--ink-3); font-size: var(--type-small); font-weight: var(--weight-medium); }
.qb-input {
  width: 100%; min-height: 44px; padding: 0 var(--space-4);
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--sunk); color: var(--ink);
  font: var(--weight-regular) 16px/1.4 var(--sans);   /* 16px: no zoom-on-focus on iOS */
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
textarea.qb-input { padding: var(--space-3) var(--space-4); min-height: 88px; resize: vertical; }
.qb-input::placeholder { color: var(--ink-4); }
.qb-input:hover { border-color: var(--line-3); }
.qb-input:focus-visible { border-color: var(--qb-hi); box-shadow: 0 0 0 3px var(--qb-dim); border-radius: var(--r-sm); }
.qb-input[aria-invalid="true"] { border-color: var(--loss); }
.qb-help { color: var(--ink-4); font-size: var(--type-small); }
.qb-inline-form { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.qb-inline-form .qb-input { flex: 1 1 220px; width: auto; }

/* ---------------------------------------------------------------- badge
 * Risk levels never rely on colour alone: each badge carries its words, and
 * the dot's shape differs (low: filled, medium: half, high: ring + fill). */
.qb-badge {
  --badge-fg: var(--ink-3); --badge-bg: var(--raised-2); --badge-edge: var(--line-2);
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 24px; padding: 0 9px; border-radius: var(--r-xs);
  border: 1px solid var(--badge-edge); background: var(--badge-bg); color: var(--badge-fg);
  font: var(--weight-medium) 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.qb-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.qb-badge--plain::before { display: none; }
.qb-badge--brand { --badge-fg: var(--qb-hi); --badge-bg: var(--qb-dim); --badge-edge: var(--qb-edge); }
.qb-badge--risk-low { --badge-fg: var(--gain); --badge-bg: var(--gain-dim); --badge-edge: rgba(145, 201, 165, .35); }
.qb-badge--risk-medium { --badge-fg: var(--warn); --badge-bg: var(--warn-dim); --badge-edge: rgba(232, 193, 124, .35); }
.qb-badge--risk-medium::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px currentColor; }
.qb-badge--risk-high { --badge-fg: var(--loss); --badge-bg: var(--loss-dim); --badge-edge: rgba(242, 140, 132, .4); }
.qb-badge--risk-high::before { box-shadow: 0 0 0 2px var(--loss-dim), 0 0 0 3px currentColor; }
.qb-badge--risk-unknown { --badge-fg: var(--ink-3); }
.qb-badge--risk-unknown::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.qb-badge--info { --badge-fg: var(--info); --badge-bg: var(--info-dim); --badge-edge: rgba(184, 178, 217, .35); }

/* ---------------------------------------------------------------- card */
.qb-card {
  position: relative; padding: var(--space-6); border-radius: var(--r-lg);
  border: 1px solid var(--line); background: var(--raised);
}
.qb-card--sunk { background: var(--sunk); }
.qb-card--raised { background: var(--raised-2); box-shadow: var(--shadow-2); }
.qb-card--brand { border-color: var(--qb-edge); background: linear-gradient(180deg, rgba(233, 180, 76, .09), rgba(233, 180, 76, 0) 60%), var(--raised); }
.qb-card--interactive { transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.qb-card--interactive:hover { border-color: var(--line-3); transform: translateY(-2px); }
.qb-card > h3 { font-size: var(--type-h3); }
.qb-card > h3 + p, .qb-card > p + p { margin-top: var(--space-2); }

/* ---------------------------------------------------------------- table */
.qb-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); -webkit-overflow-scrolling: touch; }
.qb-table { width: 100%; border-collapse: collapse; font-size: var(--type-body); }
.qb-table th, .qb-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.qb-table th { color: var(--ink-3); font-size: var(--type-label); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; background: var(--raised); }
.qb-table tr:last-child td { border-bottom: 0; }
.qb-table td.qb-num, .qb-table th.qb-num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.qb-table tbody tr:hover td { background: rgba(244, 235, 221, .025); }

/* ---------------------------------------------------------------- FAQ accordion
 * Native <details>/<summary>: works without script, keyboard and screen-reader
 * friendly, and its text is in the page for search engines. */
.qb-faq { border-top: 1px solid var(--line); }
.qb-faq details { border-bottom: 1px solid var(--line); }
.qb-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-5) 0; cursor: pointer; list-style: none;
  color: var(--ink); font-size: 17px; font-weight: var(--weight-medium); line-height: var(--lh-snug);
}
.qb-faq summary::-webkit-details-marker { display: none; }
.qb-faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg) translateY(-3px); transition: transform var(--dur-2) var(--ease);
}
.qb-faq details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.qb-faq summary:hover { color: var(--qb-hi); }
.qb-faq details > div { padding: 0 0 var(--space-5); color: var(--ink-3); max-width: var(--prose-width); }
.qb-faq details > div p + p { margin-top: var(--space-3); }

/* ---------------------------------------------------------------- skeleton
 * Holds the exact box a value will fill, so nothing moves when it arrives. */
.qb-skeleton {
  display: inline-block; min-width: 4ch; height: 1em; border-radius: var(--r-xs); vertical-align: -0.1em;
  background: linear-gradient(90deg, var(--raised-2) 0%, var(--raised-3) 50%, var(--raised-2) 100%) 0 0 / 200% 100%;
  color: transparent; animation: qb-shimmer 1.4s linear infinite;
}
@keyframes qb-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .qb-skeleton { animation: none; } }
.qb-skeleton.is-still { animation: none; }   /* a placeholder in an illustration, not loading */

/* ---------------------------------------------------------------- utilities */
.qb-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.qb-mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.qb-muted { color: var(--ink-4); }
.qb-eyebrow { color: var(--qb-hi); font: var(--weight-semibold) var(--type-label)/1.2 var(--mono); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.qb-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--qb-edge); text-underline-offset: 3px; }
.qb-link:hover { text-decoration-color: var(--qb); }
.qb-skip { position: absolute; left: var(--space-4); top: -60px; z-index: 100; padding: var(--space-2) var(--space-4); border-radius: var(--r-pill); background: var(--ink); color: var(--canvas); font-weight: var(--weight-semibold); text-decoration: none; }
.qb-skip:focus { top: var(--space-3); }

/* quantbase.live layouts, v2 "meme noir". Concatenated after qb-ui.css into
 * /qb-site.css at build time (site/build.py), so a page loads exactly two
 * stylesheets: /qb-tokens.css and /qb-site.css. Values come from the tokens;
 * the few raw colours below are translucent tints of a token colour.
 * No grid or dot background patterns: texture is film grain (fractal noise)
 * and torn-paper edges, both used with restraint. */

/* ---------------------------------------------------------------- frame */
body { min-height: 100vh; overflow-x: hidden; background: var(--canvas); }
/* film grain over everything, very faint; never intercepts input */
body::after { content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .07;
  background-image: var(--grain); mix-blend-mode: overlay; }
.qb-wrap { width: 100%; max-width: calc(var(--page-width) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* header: sticky, fixed height, so nothing below it moves */
.qb-top {
  position: sticky; top: 0; z-index: 50; height: var(--header-height);
  background: rgba(12, 10, 9, .82); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
}
.qb-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--qb-edge) 30%, rgba(158, 22, 32, .7) 70%, transparent); opacity: .7; }
.qb-top__in { height: 100%; display: flex; align-items: center; gap: var(--space-6); }
.qb-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: var(--weight-bold) 20px/1 var(--display); letter-spacing: -0.03em; flex: none; }
.qb-brand svg { width: 26px; height: auto; }
.qb-nav { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.qb-nav__link { padding: var(--space-2) var(--space-3); border-radius: var(--r-sm); color: var(--ink-2); font-size: 16px; font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; }
.qb-nav__link:hover, .qb-nav__link[aria-current="page"] { color: var(--qb-hi); background: transparent; }
.qb-nav .qb-btn { margin-left: var(--space-2); }
.qb-nav .qb-btn--outline { --btn-edge: var(--qb-edge); --btn-fg: var(--qb-hi); }
.qb-nav .qb-btn--outline:hover { --btn-bg: var(--qb-dim); --btn-edge: var(--qb); }
@media (max-width: 520px) { .qb-nav__tg { display: none; } .qb-nav { gap: 0; } }

/* footer: minimal, on the darkest ink */
.qb-foot { position: relative; padding: var(--space-12) 0 var(--space-8); border-top: 1px solid var(--line); background: var(--sunk); }
.qb-foot__top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6); }
.qb-foot__top p { color: var(--ink-4); font-size: 15px; }
.qb-foot__links { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); list-style: none; margin: var(--space-6) 0 0; padding: 0; }
.qb-foot__links a { display: inline-block; padding: 6px 0; color: var(--ink-3); font-size: 14px; text-decoration: none; }
.qb-foot__links a:hover { color: var(--qb-hi); }
.qb-foot__risk { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--line); color: var(--ink-4); font-size: var(--type-small); }
.qb-foot__risk b { color: var(--ink-3); }
.qb-foot__bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-3); color: var(--ink-4); font-size: var(--type-small); }
.qb-foot__bar a { color: var(--ink-3); }

/* ---------------------------------------------------------------- homepage */
.kicker { display: flex; align-items: center; gap: 10px; color: var(--ink-3); font: var(--weight-medium) 12px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--qb); box-shadow: 0 0 0 4px var(--qb-dim), 0 0 12px rgba(233, 180, 76, .6); }
.dot--live { background: var(--blood-hi); box-shadow: 0 0 0 4px rgba(229, 72, 77, .16), 0 0 12px rgba(229, 72, 77, .6); }
.big { margin-top: var(--space-4); font: 400 var(--type-big)/var(--lh-poster) var(--poster); letter-spacing: var(--tracking-poster); text-transform: uppercase; color: var(--ink); }
.big .dim { color: var(--qb); }
.pills { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.pills .qb-btn--lg { min-height: 56px; padding: 0 var(--space-6); font-size: 17px; }
.sec { padding: clamp(80px, 9vw, 140px) 0 0; }
.sec__lede { margin-top: var(--space-5); color: var(--ink-3); font-size: var(--type-lede); max-width: 60ch; }
.fine { margin-top: var(--space-6); color: var(--ink-4); font-size: var(--type-small); max-width: 80ch; }

/* reveal on scroll: only elements below the fold at load, only with motion allowed (qb.js) */
.qb-motion .rv.is-pending { opacity: 0; transform: translateY(18px); }
.qb-motion .rv { transition: opacity .7s var(--ease), transform .7s var(--ease); }

/* torn-paper edges: an SVG filled with the colour of the section it tears into */
.torn { position: absolute; left: 0; right: 0; height: clamp(14px, 2.2vw, 28px); pointer-events: none; z-index: 1; line-height: 0; }
.torn svg { width: 100%; height: 100%; fill: currentColor; }
.torn--top { top: 0; transform: translateY(-99%); }
.torn--bottom { bottom: 0; transform: translateY(99%) scaleY(-1); }

/* an illustration, pasted up: torn edge mask, a hard shadow, a gold hairline */
.frame-torn { position: relative; filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .7)); }
.frame-torn picture, .frame-torn > img { display: block; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 4L12 5L28 6L34 6L46 8L57 7L69 4L78 6L85 8L97 12L106 10L120 9L132 10L147 11L162 10L170 9L179 14L188 13L199 12L212 10L218 11L224 13L236 14L252 13L267 13L276 13L284 13L298 11L305 10L320 10L332 9L339 7L352 9L359 11L369 10L383 10L390 16L404 13L420 13L427 13L441 12L457 13L468 13L478 12L486 11L502 12L511 10L525 12L539 13L551 13L564 12L578 13L593 13L600 13L612 13L625 13L637 13L647 13L660 13L671 13L685 13L698 13L706 13L718 13L732 13L738 12L751 10L763 8L771 6L781 5L787 5L799 5L814 4L823 4L837 9L844 9L856 11L866 12L876 11L888 13L900 12L906 10L918 9L933 8L941 7L951 9L963 8L974 8L990 8L1000 6L996 10L996 25L994 33L995 42L996 58L995 69L996 82L996 91L996 100L995 110L996 116L994 131L993 137L992 149L990 160L989 170L987 179L987 193L987 202L987 209L988 220L987 232L987 240L989 253L987 269L987 275L987 288L988 295L987 303L984 310L984 320L987 334L988 344L987 355L987 361L987 374L987 385L988 397L990 408L989 418L988 431L990 443L991 455L992 466L987 472L987 488L987 495L989 509L990 519L990 531L989 538L989 552L989 564L989 577L985 583L984 594L987 609L989 620L989 627L991 642L992 651L987 659L987 669L987 682L987 689L987 702L989 710L990 716L990 726L989 735L990 742L990 758L992 774L988 787L988 803L990 810L984 821L987 828L987 836L989 843L989 850L991 862L991 869L989 881L989 887L990 899L988 912L987 922L988 930L987 943L989 951L989 958L991 966L992 972L994 982L993 991L992 1000L988 996L976 994L963 995L953 996L945 996L936 996L925 993L915 991L903 992L893 988L879 987L868 989L857 987L850 988L840 988L826 987L810 987L796 984L790 987L775 987L766 989L757 988L747 989L733 987L723 989L712 991L705 990L697 989L684 987L670 984L658 987L649 989L639 989L629 987L614 987L602 987L591 987L582 989L572 989L559 989L550 988L537 988L522 987L508 987L497 987L481 987L475 987L463 987L451 987L438 987L428 987L419 988L404 989L390 991L379 989L366 990L354 988L345 987L338 989L326 989L318 989L305 988L294 987L285 987L270 988L255 988L247 990L240 989L226 988L212 987L197 987L190 989L182 989L169 988L159 988L152 988L139 988L123 990L110 990L99 991L84 992L73 991L61 992L47 987L39 987L30 989L14 989L0 990L4 986L4 976L4 966L4 959L4 949L6 940L4 929L4 915L5 900L4 894L6 884L5 868L7 855L6 841L5 825L5 816L4 804L4 793L6 778L7 772L6 760L11 745L10 735L11 725L13 714L11 707L11 697L13 685L12 673L10 660L8 647L8 637L6 623L6 617L5 610L6 598L7 587L10 571L11 563L13 553L13 543L13 531L13 522L16 514L13 504L12 496L11 482L10 470L9 462L11 451L9 444L13 432L16 421L13 414L12 402L10 395L8 388L10 376L10 369L11 362L9 353L11 342L10 334L8 318L7 309L7 297L7 289L8 279L7 271L8 260L8 247L7 233L6 225L7 216L5 200L4 191L10 176L11 167L10 158L9 151L10 141L9 132L11 118L10 111L10 105L10 98L10 82L9 69L11 62L10 51L9 36L11 24L13 12L13 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000' preserveAspectRatio='none'%3E%3Cpath d='M0 4L12 5L28 6L34 6L46 8L57 7L69 4L78 6L85 8L97 12L106 10L120 9L132 10L147 11L162 10L170 9L179 14L188 13L199 12L212 10L218 11L224 13L236 14L252 13L267 13L276 13L284 13L298 11L305 10L320 10L332 9L339 7L352 9L359 11L369 10L383 10L390 16L404 13L420 13L427 13L441 12L457 13L468 13L478 12L486 11L502 12L511 10L525 12L539 13L551 13L564 12L578 13L593 13L600 13L612 13L625 13L637 13L647 13L660 13L671 13L685 13L698 13L706 13L718 13L732 13L738 12L751 10L763 8L771 6L781 5L787 5L799 5L814 4L823 4L837 9L844 9L856 11L866 12L876 11L888 13L900 12L906 10L918 9L933 8L941 7L951 9L963 8L974 8L990 8L1000 6L996 10L996 25L994 33L995 42L996 58L995 69L996 82L996 91L996 100L995 110L996 116L994 131L993 137L992 149L990 160L989 170L987 179L987 193L987 202L987 209L988 220L987 232L987 240L989 253L987 269L987 275L987 288L988 295L987 303L984 310L984 320L987 334L988 344L987 355L987 361L987 374L987 385L988 397L990 408L989 418L988 431L990 443L991 455L992 466L987 472L987 488L987 495L989 509L990 519L990 531L989 538L989 552L989 564L989 577L985 583L984 594L987 609L989 620L989 627L991 642L992 651L987 659L987 669L987 682L987 689L987 702L989 710L990 716L990 726L989 735L990 742L990 758L992 774L988 787L988 803L990 810L984 821L987 828L987 836L989 843L989 850L991 862L991 869L989 881L989 887L990 899L988 912L987 922L988 930L987 943L989 951L989 958L991 966L992 972L994 982L993 991L992 1000L988 996L976 994L963 995L953 996L945 996L936 996L925 993L915 991L903 992L893 988L879 987L868 989L857 987L850 988L840 988L826 987L810 987L796 984L790 987L775 987L766 989L757 988L747 989L733 987L723 989L712 991L705 990L697 989L684 987L670 984L658 987L649 989L639 989L629 987L614 987L602 987L591 987L582 989L572 989L559 989L550 988L537 988L522 987L508 987L497 987L481 987L475 987L463 987L451 987L438 987L428 987L419 988L404 989L390 991L379 989L366 990L354 988L345 987L338 989L326 989L318 989L305 988L294 987L285 987L270 988L255 988L247 990L240 989L226 988L212 987L197 987L190 989L182 989L169 988L159 988L152 988L139 988L123 990L110 990L99 991L84 992L73 991L61 992L47 987L39 987L30 989L14 989L0 990L4 986L4 976L4 966L4 959L4 949L6 940L4 929L4 915L5 900L4 894L6 884L5 868L7 855L6 841L5 825L5 816L4 804L4 793L6 778L7 772L6 760L11 745L10 735L11 725L13 714L11 707L11 697L13 685L12 673L10 660L8 647L8 637L6 623L6 617L5 610L6 598L7 587L10 571L11 563L13 553L13 543L13 531L13 522L16 514L13 504L12 496L11 482L10 470L9 462L11 451L9 444L13 432L16 421L13 414L12 402L10 395L8 388L10 376L10 369L11 362L9 353L11 342L10 334L8 318L7 309L7 297L7 289L8 279L7 271L8 260L8 247L7 233L6 225L7 216L5 200L4 191L10 176L11 167L10 158L9 151L10 141L9 132L11 118L10 111L10 105L10 98L10 82L9 69L11 62L10 51L9 36L11 24L13 12L13 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.frame-torn img { width: 100%; height: auto; }
.frame-torn--tilt { transform: rotate(-1.4deg); }
figure figcaption { margin-top: var(--space-3); color: var(--ink-4); font-size: 12px; }

/* hero: the blurred loop of flashing coins behind the copy */
.hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(calc(100svh - var(--header-height)), 820px); display: flex; align-items: center;
  background: var(--canvas); }
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--canvas); }
.hero__poster, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__poster { filter: saturate(1.05); }
.hero__video { opacity: 0; transition: opacity 1.2s var(--ease); }
.hero__video.is-on { opacity: 1; }
/* the scrim keeps the copy AA over the brightest frame: dense ink on the copy side, vignette, a fade into the page */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12, 10, 9, .94) 0%, rgba(12, 10, 9, .86) 34%, rgba(12, 10, 9, .45) 62%, rgba(12, 10, 9, .25) 100%),
    radial-gradient(120% 90% at 70% 40%, transparent 40%, rgba(12, 10, 9, .7) 100%),
    linear-gradient(0deg, var(--canvas) 0%, rgba(12, 10, 9, 0) 28%); }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 0;
  background: linear-gradient(90deg, transparent, rgba(233, 180, 76, .5), transparent); }
.hero__in { position: relative; padding-top: var(--space-16); padding-bottom: var(--space-12); }
.kicker--stamp { display: inline-flex; padding: 7px 12px 6px; border: 1px solid var(--qb-edge); border-radius: var(--r-xs); color: var(--qb-hi); background: rgba(12, 10, 9, .55); }
.hero h1 { margin-top: var(--space-6); max-width: none; font-weight: var(--weight-medium); }
.hero__loud { display: block; max-width: 8.2em; font: 400 clamp(50px, 5.6vw + 10px, 104px)/.9 var(--poster); letter-spacing: var(--tracking-poster); text-transform: uppercase; color: var(--ink);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .6); }
.hero__quiet { display: block; margin-top: var(--space-5); max-width: 22em; color: var(--qb-hi); font: var(--weight-medium) clamp(22px, 1.2vw + 15px, 32px)/1.2 var(--sans); letter-spacing: -0.02em; }
.hero__sub { margin-top: var(--space-5); max-width: 32em; color: var(--ink-2); font-size: clamp(16px, .4vw + 14px, 19px); line-height: 1.55; }
.hero .pills { margin-top: var(--space-8); }
.trust { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; margin: var(--space-6) 0 0; padding: 0; color: var(--ink-2); font-size: 14px; }
.trust li { display: flex; align-items: center; gap: 8px; }
.trust li::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; color: var(--qb);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.hero__explore { display: inline-flex; align-items: center; gap: var(--space-3); margin-top: var(--space-12); color: var(--ink-3); font: 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.hero__explore:hover { color: var(--qb-hi); }
@media (max-width: 899px) {
  .hero { display: block; min-height: 0; }
  .hero::before { background:
    linear-gradient(180deg, rgba(12, 10, 9, .55) 0%, rgba(12, 10, 9, .78) 45%, rgba(12, 10, 9, .9) 75%, var(--canvas) 100%); }
  .hero__in { padding-top: var(--space-12); padding-bottom: var(--space-10); }
  .hero .kicker { letter-spacing: .08em; font-size: 10px; }
  .hero__loud { font-size: clamp(44px, 13vw, 72px); }
  .hero__explore { margin-top: var(--space-8); }
}
@media (max-width: 520px) { .hero .pills .qb-btn { flex: 1 1 100%; } }

/* the street: one row of pasted-up signs */
.strip { position: relative; border-bottom: 1px solid var(--line); background: var(--sunk); overflow: hidden; }
.strip__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); padding-top: var(--space-8); padding-bottom: var(--space-8); }
.strip__k { color: var(--ink-4); font: var(--weight-medium) 11px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; }
.signs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); flex: 1; }
.sign { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 7px; border-radius: 2px; font: 400 clamp(15px, .6vw + 12px, 20px)/1 var(--poster); letter-spacing: .04em;
  text-transform: uppercase; white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .8); }
.sign svg { width: 1.1em; height: 1.1em; }
.sign:nth-child(odd) { transform: rotate(-1.6deg); }
.sign:nth-child(even) { transform: rotate(1.2deg) translateY(2px); }
.sign--red { background: var(--blood); color: var(--ink); }
.sign--paper { background: var(--paper); color: var(--paper-ink); }
.sign--gold { background: var(--qb); color: var(--on-accent); }
.sign--ink { background: var(--canvas); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-3), 0 6px 14px -6px rgba(0, 0, 0, .8); }
.sign--exit { background: var(--paper); color: var(--paper-ink); box-shadow: inset 0 0 0 2px var(--paper-ink), inset 0 0 0 4px var(--paper), 0 6px 14px -6px rgba(0, 0, 0, .8); }
.strip__names { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-8); color: var(--ink); font-size: clamp(18px, .8vw + 14px, 22px); font-weight: var(--weight-medium); letter-spacing: -0.02em; }

/* why QuantBase: the lounge upstairs */
.why { padding: clamp(72px, 8vw, 128px) 0 0; }
.why__in { display: grid; gap: var(--space-10); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .why__in { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-16); } }
.why__art { margin: 0; }
.why__copy > p:not(.kicker) { margin-top: var(--space-5); color: var(--ink-3); font-size: 17px; max-width: 34em; }
.why__copy .strip__names { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--line); }
.why__copy .why__fine { margin-top: var(--space-2); color: var(--ink-4); font-size: 14px; }

/* the platform: tabs + panels, a case file on ink */
.tour { margin-top: var(--space-10); }
.tabs { display: flex; gap: var(--space-1); overflow-x: auto; border-bottom: 1px solid var(--line-2); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: var(--space-4) var(--space-4); border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  background: none; color: var(--ink-4); font: var(--weight-medium) 15px/1 var(--sans); cursor: pointer; }
.tabs button:hover { color: var(--ink-2); }
.tabs button[aria-selected="true"] { color: var(--qb-hi); border-bottom-color: var(--qb); }
.panels { margin-top: var(--space-6); }
.panel { position: relative; display: grid; gap: var(--space-10); align-items: center; grid-template-columns: minmax(0, 1fr); padding: clamp(24px, 4vw, 56px);
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  background: radial-gradient(70% 90% at 15% 0%, rgba(233, 180, 76, .10), transparent 70%), radial-gradient(60% 80% at 100% 100%, rgba(158, 22, 32, .14), transparent 70%), var(--raised); }
.panel::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(233, 180, 76, .10); border-radius: var(--r-md); pointer-events: none; }
.panel + .panel { margin-top: var(--space-4); }
.panel[hidden] { display: none; }
@media (min-width: 960px) { .panel { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--space-16); } }
.panel__media { margin: 0; display: grid; justify-items: center; }
.only-phone { display: none; }
@media (max-width: 699px) { .only-phone { display: block; } .only-desk { display: none; } }
.panel__media figcaption, .band__art figcaption { margin-top: var(--space-3); color: var(--ink-4); font-size: 12px; text-align: center; }
.panel__copy h3 { margin-top: var(--space-4); font: 400 clamp(32px, 1.8vw + 22px, 48px)/.95 var(--poster); letter-spacing: var(--tracking-poster); text-transform: uppercase; }
.panel__copy > p:not(.kicker) { margin-top: var(--space-4); color: var(--ink-3); font-size: 17px; max-width: 36em; }
.panel__copy .pills { margin-top: var(--space-8); }
.ticks { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-3); }
.ticks li { display: flex; gap: var(--space-3); color: var(--ink-2); }
.ticks svg { flex: none; margin-top: 4px; color: var(--qb); }

/* device frames (real screens and labelled illustrations) */
.phone { width: min(300px, 78vw); aspect-ratio: 600 / 1298; padding: 10px; border-radius: 44px; background: #050403;
  box-shadow: 0 0 0 1px var(--line-2), var(--shadow-3), 0 40px 80px -30px rgba(233, 180, 76, .22); }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; }
.laptop { width: 100%; border-radius: var(--r-lg); overflow: hidden; background: #050403; box-shadow: 0 0 0 1px var(--line-2), var(--shadow-3); }
.laptop__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.laptop__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--raised-3); }
.laptop__bar span { margin-left: var(--space-3); color: var(--ink-4); font: 11px/1 var(--mono); }
.laptop img { width: 100%; aspect-ratio: 1600 / 1000; }
.phone--mock { display: flex; }
.mock { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); padding: 28px 18px 18px; border-radius: 34px; background: var(--canvas); text-align: left; overflow: hidden; }
.mock__k { color: var(--qb-hi); font: var(--weight-semibold) 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.mock__t { color: var(--ink); font-size: 15px; }
.mock__card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); }
.mock__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 12px 14px; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: 13px; }
.mock__row:last-child { border-bottom: 0; }
.mock__row .qb-skeleton { height: 12px; }
.mock__note { color: var(--ink-4); font-size: 12px; }
.mock__btn { align-self: flex-start; margin-top: auto; }
.mock__bal { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-md); background: var(--qb-dim); box-shadow: inset 0 0 0 1px rgba(233, 180, 76, .2); }
.mock__bal span, .mock__bal em { color: var(--ink-3); font-size: 12px; font-style: normal; }
.mock__bal b { color: var(--ink); font-size: 30px; letter-spacing: -0.02em; }
.bubble { padding: 12px 14px; border-radius: 14px 14px 14px 4px; background: var(--raised-2); color: var(--ink-2); font-size: 14px; }
.bubble b { display: block; margin-bottom: 6px; color: var(--ink); }
.bubble .mock__row { padding: 8px 0; }
.bubble--me { align-self: flex-end; border-radius: 14px 14px 4px 14px; background: var(--qb); color: var(--on-accent); font-family: var(--mono); font-size: 13px; }

/* the PAPER band: the practice room, on blood-dark ink */
.band { position: relative; margin-top: clamp(80px, 9vw, 140px);
  background: radial-gradient(70% 90% at 85% 50%, rgba(233, 180, 76, .16), transparent 70%), linear-gradient(180deg, var(--blood-deep), #140405);
  border-block: 1px solid rgba(229, 72, 77, .18); overflow: hidden; }
.band__in { display: grid; gap: var(--space-10); align-items: center; grid-template-columns: minmax(0, 1fr); padding-top: clamp(64px, 8vw, 120px); padding-bottom: clamp(64px, 8vw, 120px); }
@media (min-width: 960px) { .band__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.band__copy > p:not(.kicker) { margin-top: var(--space-5); max-width: 34em; color: var(--ink-2); font-size: 17px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chips span { padding: 6px 10px; border: 1px solid rgba(233, 180, 76, .35); border-radius: var(--r-xs); color: var(--ink-2); font: 12px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.band__live { margin-top: var(--space-8); max-width: 30em; }
.band__lk { color: var(--ink); font-weight: var(--weight-medium); }
.band__live .waitlist { margin-top: var(--space-3); }
.band__live .qb-input { background: rgba(0, 0, 0, .45); }
.band__live .qb-help { margin-top: var(--space-2); color: var(--ink-3); }
.band__live .qb-help[data-state="ok"] { color: var(--gain); }
.band__live .qb-help[data-state="error"] { color: var(--loss); }
.band__art { position: relative; display: flex; justify-content: center; align-items: center; }
.band__art figure { position: relative; z-index: 1; margin: 0; width: 100%; }
.band__word { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: rgba(229, 72, 77, .14);
  font: 400 clamp(110px, 16vw, 240px)/1 var(--poster); letter-spacing: .02em; white-space: nowrap; user-select: none; }

/* the details: newsprint, between two torn edges, beside the rug poster */
.light { position: relative; margin-top: clamp(60px, 7vw, 110px); padding: clamp(72px, 8vw, 128px) 0; background: var(--paper); color: var(--paper-ink-2); }
.light .torn { color: var(--paper); }
.light__in { display: grid; gap: var(--space-12); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .light__in { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--space-16); } }
.light__poster { margin: 0; justify-self: center; width: min(340px, 82vw); }
.light__poster img { width: 100%; transform: rotate(-2deg); box-shadow: 0 2px 0 rgba(22, 17, 13, .2), 0 28px 50px -24px rgba(22, 17, 13, .65); }
.light__poster figcaption { color: var(--paper-ink-3); text-align: center; }
@media (min-width: 1000px) { .light__poster { position: sticky; top: calc(var(--header-height) + var(--space-8)); align-self: start; } }
.light .kicker { color: var(--paper-ink-3); }
.light .dot { background: var(--blood); box-shadow: 0 0 0 4px rgba(158, 22, 32, .14); }
.light h2, .light h3 { color: var(--paper-ink); }
.light .big .dim, .light .big { color: var(--paper-ink); }
.light__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }
.light__r { color: var(--paper-ink-3); font-size: 14px; text-align: right; }
@media (max-width: 699px) { .light__r { text-align: left; } }
.details { display: grid; gap: 0 var(--space-8); margin-top: var(--space-10); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 680px) { .details { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1240px) { .details { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.detail { padding: var(--space-6) 0 var(--space-8); border-top: 2px solid var(--paper-ink); }
.detail svg { color: var(--blood); }
.detail h3 { margin-top: var(--space-4); font: 400 22px/1 var(--poster); letter-spacing: .02em; text-transform: uppercase; }
.detail p { margin-top: var(--space-2); color: var(--paper-ink-2); font-size: 15px; }
.light :focus-visible { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--qb-deep); }

/* desk + phone */
.desk { display: grid; gap: var(--space-12); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .desk { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.desk__p { margin: var(--space-5) 0 var(--space-8); max-width: 32em; color: var(--ink-3); font-size: 17px; }
.nums { list-style: none; margin: 0; padding: var(--space-3); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--shadow-3); }
.nums li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-5); padding: var(--space-5); border-radius: var(--r-md); }
.nums li + li { border-top: 1px solid var(--line); }
.nums li > span { color: var(--qb); font: 400 28px/1 var(--poster); }
.nums b { color: var(--ink); font-size: 18px; font-weight: var(--weight-medium); }
.nums p { margin-top: 2px; color: var(--ink-4); font-size: 14px; }
.nums li > svg { color: var(--ink-4); }
.nums .nums__foot { display: flex; gap: var(--space-3); color: var(--ink-3); font-size: 13px; }

/* live counts: a lit board, four separate cards */
.stats { display: grid; gap: var(--space-3); margin-top: var(--space-10); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat { position: relative; padding: var(--space-6) var(--space-5); border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(233, 180, 76, .06), transparent 60%), var(--raised); }
.stat::before { content: ""; position: absolute; left: var(--space-5); right: var(--space-5); top: -1px; height: 2px; background: linear-gradient(90deg, var(--qb), transparent); }
.stat__label { color: var(--ink-3); font: var(--weight-medium) 12px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.stat__value { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; min-height: 1.1em; margin-top: var(--space-3); color: var(--qb-hi); font-size: clamp(30px, 2.4vw + 14px, 50px); font-weight: var(--weight-semibold); line-height: 1.1; }
.stat__value .qb-skeleton { height: .9em; vertical-align: 0; }
.stat__value [data-stat] { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; text-shadow: 0 0 24px rgba(233, 180, 76, .35); }
.stat__share { color: var(--ink-4); font-size: 14px; font-weight: var(--weight-medium); letter-spacing: 0; text-shadow: none; }
.stat__what { margin-top: var(--space-3); color: var(--ink-4); font-size: var(--type-small); line-height: 1.5; }
.stats__note { margin-top: var(--space-4); color: var(--ink-4); font-size: var(--type-small); }
.stats__note[data-state="error"] { color: var(--warn); }

/* pricing: Free on ink, Meme as the gold pass */
.plans { display: grid; gap: var(--space-5); margin-top: var(--space-10); grid-template-columns: minmax(0, 1fr); max-width: 940px; }
@media (min-width: 760px) { .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.plan { position: relative; display: flex; flex-direction: column; padding: var(--space-8); border: 1px solid var(--line-2); border-radius: var(--r-lg); background: var(--raised); }
.plan--hl { border-color: var(--qb-edge); box-shadow: var(--glow-gold);
  background: radial-gradient(80% 60% at 100% 0%, rgba(233, 180, 76, .16), transparent 70%), linear-gradient(180deg, #1C160F, var(--raised)); }
/* ticket notches cut into the gold pass */
.plan--hl::before, .plan--hl::after { content: ""; position: absolute; top: 46%; width: 22px; height: 22px; border-radius: 50%; background: var(--canvas); box-shadow: inset 0 0 0 1px var(--qb-edge); }
.plan--hl::before { left: -12px; clip-path: inset(0 0 0 50%); }
.plan--hl::after { right: -12px; clip-path: inset(0 50% 0 0); }
.plan__stamp { position: absolute; top: 18px; right: -6px; padding: 5px 10px 4px; background: var(--blood); color: var(--ink); font: 400 13px/1 var(--poster); letter-spacing: .1em; text-transform: uppercase; transform: rotate(4deg); box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .8); }
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding-right: 80px; }
.plan:not(.plan--hl) .plan__head { padding-right: 0; }
.plan__head h3 { font: 400 30px/1 var(--poster); letter-spacing: .02em; text-transform: uppercase; }
.plan__price { margin-top: var(--space-4); color: var(--ink-3); }
.plan__price b { color: var(--ink); font: 400 64px/1 var(--poster); letter-spacing: 0; }
.plan--hl .plan__price b { color: var(--qb-hi); }
.plan__blurb { margin-top: var(--space-3); color: var(--ink-3); }
.plan__feats { flex: 1; list-style: none; margin: var(--space-6) 0 var(--space-8); padding: var(--space-6) 0 0; display: grid; gap: var(--space-3); align-content: start; border-top: 1px dashed var(--line-3); }
.plan__feats li { display: flex; gap: var(--space-3); color: var(--ink-2); }
.plan__feats svg { flex: none; margin-top: 4px; color: var(--qb); }
.plan .qb-btn--lg { min-height: 52px; }

/* community: a flyer pasted on the wall */
.community { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-6); padding: clamp(28px, 4vw, 56px);
  border-radius: 2px; background: linear-gradient(135deg, #2A0709, #120405 70%); box-shadow: inset 0 0 0 1px rgba(229, 72, 77, .25), var(--shadow-3); }
.community h2 { margin-top: var(--space-4); font: 400 clamp(32px, 2.4vw + 18px, 52px)/.95 var(--poster); letter-spacing: var(--tracking-poster); text-transform: uppercase; }
.community p { margin-top: var(--space-3); color: var(--ink-2); max-width: 56ch; }
.community .fine { margin-top: var(--space-3); color: var(--ink-3); }

/* faq: two columns */
.faq { display: grid; gap: var(--space-10); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .faq { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .faq__l { position: sticky; top: calc(var(--header-height) + var(--space-8)); align-self: start; } }
.faq__more { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--space-6); color: var(--ink-3); text-decoration: none; }
.faq__more:hover { color: var(--qb-hi); }
.qb-faq summary:hover { color: var(--qb-hi); }

/* closing band: gold light rising out of blood-dark ink */
.close { position: relative; margin-top: clamp(100px, 10vw, 160px); padding: clamp(80px, 10vw, 160px) 0; text-align: center;
  background: radial-gradient(70% 90% at 50% 115%, rgba(233, 180, 76, .38), transparent 70%), linear-gradient(180deg, #1A0506, #2A0709); }
.close .torn { color: #1A0506; }
.close .kicker, .close .pills { justify-content: center; }
.close h2 { margin: var(--space-6) auto 0; max-width: 11em; font: 400 clamp(56px, 7vw + 16px, 136px)/.9 var(--poster); letter-spacing: var(--tracking-poster); text-transform: uppercase; }
.close p { margin: var(--space-6) auto var(--space-8); color: var(--ink-2); }

/* analytics choice: a small bar, shown only after the hero has scrolled away */
.consent {
  position: fixed; z-index: 60; left: var(--space-3); right: var(--space-3); bottom: var(--space-3);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--line-2); border-radius: var(--r-md);
  background: var(--raised-2); box-shadow: var(--shadow-3); color: var(--ink-2); font-size: 14px;
}
.consent[hidden] { display: none; }
.consent div { display: flex; gap: var(--space-2); }
@media (min-width: 720px) { .consent { left: auto; max-width: 440px; } }

/* ---------------------------------------------------------------- inner pages */
.qb-inner { display: block; }
.qb-inner .rail { width: 100%; max-width: calc(var(--page-width) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.qb-inner .phead { padding: var(--space-16) 0 var(--space-10); }
.qb-inner .eyebrow, .qb-inner .k { color: var(--qb-hi); font: var(--weight-semibold) var(--type-label)/1.2 var(--mono); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.qb-inner h1 { margin-top: var(--space-3); max-width: 18em; font: 400 clamp(40px, 3.6vw + 18px, 72px)/.95 var(--poster); letter-spacing: var(--tracking-poster); text-transform: uppercase; }
.qb-inner h1 span { color: var(--ink-3); }
.qb-inner h2 { margin-top: var(--space-3); font-size: clamp(24px, 1.4vw + 16px, 32px); }
.qb-inner h3 { font-size: 18px; }
.qb-inner .lede { margin-top: var(--space-4); max-width: 64ch; color: var(--ink-3); font-size: var(--type-lede); }
.qb-inner .cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.qb-inner .note { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-left: 3px solid var(--qb); border-radius: var(--r-sm); background: var(--raised); color: var(--ink-3); font-size: 15px; }
.qb-inner .note b { color: var(--ink); }
.qb-inner .s { padding: var(--space-12) 0; border-top: 1px solid var(--line); }
.qb-inner .cards { display: grid; gap: var(--space-4); margin-top: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.qb-inner .qb-card p { margin-top: var(--space-2); color: var(--ink-3); }
.qb-inner .split { display: grid; gap: var(--space-10); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) { .qb-inner .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.qb-inner .muted { color: var(--ink-4); }
.qb-inner .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.qb-inner a.u { color: var(--ink); text-decoration: underline; text-decoration-color: var(--qb-edge); text-underline-offset: 3px; }
.qb-inner .rates { display: grid; gap: 1px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--line); overflow: hidden; }
.qb-inner .rate { padding: var(--space-6); background: var(--raised); }
.qb-inner .rate .v { color: var(--ink); font: var(--weight-semibold) 36px/1 var(--mono); }
.qb-inner .rate .l { margin-top: var(--space-2); color: var(--ink-4); font-size: 14px; }
.qb-inner .qb-card--brand .k { color: var(--qb-hi); }
.qb-inner input[type="range"] { accent-color: var(--qb); }

/* code blocks, tabs, copy (agents page) */
.qb-inner .code { margin-top: var(--space-5); border: 1px solid var(--line-2); border-radius: var(--r-md); background: var(--sunk); overflow: hidden; }
.qb-inner .bar2 { display: flex; align-items: center; justify-content: space-between; padding: 8px var(--space-4); border-bottom: 1px solid var(--line); color: var(--ink-4); font: 12px/1 var(--mono); }
.qb-inner .copy { padding: 6px 12px; border: 1px solid var(--line-2); border-radius: var(--r-pill); background: transparent; color: var(--ink-2); font: var(--weight-medium) 12px/1 var(--sans); cursor: pointer; }
.qb-inner .copy.done { color: var(--gain); border-color: var(--gain); }
.qb-inner pre { margin: 0; padding: var(--space-4); overflow-x: auto; color: var(--ink-2); font-size: 13px; line-height: 1.6; white-space: pre; }
.qb-inner #prompt-text { max-height: 420px; white-space: pre-wrap; }
.qb-inner .tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.qb-inner .tabs button { padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--r-pill); background: transparent; color: var(--ink-3); font: var(--weight-medium) 14px/1 var(--sans); cursor: pointer; }
.qb-inner .tabs button[aria-selected="true"] { border-color: var(--qb-edge); background: var(--qb-dim); color: var(--ink); }
.qb-inner [data-pane][data-on="0"] { display: none; }

/* docs */
.qb-inner .docs { display: grid; gap: var(--space-10); padding: var(--space-10) 0 var(--space-12); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .qb-inner .docs { grid-template-columns: 220px minmax(0, 1fr); } }
@media (min-width: 1200px) { .qb-inner .docs { grid-template-columns: 220px minmax(0, 1fr) 200px; } }
.qb-inner .sidebar, .qb-inner .toc { position: sticky; top: calc(var(--header-height) + var(--space-6)); align-self: start; max-height: calc(100vh - var(--header-height) - var(--space-12)); overflow-y: auto; }
.qb-inner .sidebar h4, .qb-inner .toc h4 { margin: var(--space-5) 0 var(--space-2); color: var(--ink-4); font: var(--weight-semibold) var(--type-label)/1.2 var(--mono); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.qb-inner .sidebar h4:first-child, .qb-inner .toc h4:first-child { margin-top: 0; }
.qb-inner .sidebar ul, .qb-inner .toc ul { list-style: none; margin: 0; padding: 0; }
.qb-inner .sidebar a, .qb-inner .toc a { display: block; padding: 5px 10px; border-radius: var(--r-xs); color: var(--ink-3); font-size: 14px; text-decoration: none; }
.qb-inner .sidebar a:hover, .qb-inner .toc a:hover { color: var(--ink); background: var(--raised); }
.qb-inner .sidebar a.on { color: var(--ink); background: var(--raised-2); }
.qb-inner .toc a.lvl3 { padding-left: 22px; font-size: 13px; }
@media (max-width: 899px) { .qb-inner .docs > .sidebar { display: none; } }
@media (max-width: 1199px) { .qb-inner .docs > .toc { display: none; } }
.qb-inner .docnav-m { margin-bottom: var(--space-6); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--raised); }
.qb-inner .docnav-m summary { padding: var(--space-3) var(--space-4); color: var(--ink); font-weight: var(--weight-medium); cursor: pointer; }
.qb-inner .docnav-m .sidebar { position: static; max-height: none; padding: 0 var(--space-3) var(--space-3); }
@media (min-width: 900px) { .qb-inner .docnav-m { display: none; } }
.qb-inner .doc { min-width: 0; }
.qb-inner .doc h1 { font-size: clamp(36px, 2vw + 22px, 52px); }
.qb-inner .crumb { color: var(--ink-4); font: 12px/1 var(--mono); letter-spacing: .04em; }
.qb-inner .mdlink { margin-top: var(--space-10); color: var(--ink-4); font-size: var(--type-small); }
.qb-inner .mdlink a { color: var(--ink-3); }
.qb-inner .pager { display: grid; gap: var(--space-3); margin-top: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.qb-inner .pager a { display: block; padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--r-md); text-decoration: none; }
.qb-inner .pager a:hover { border-color: var(--line-3); }
.qb-inner .pager a.nx { text-align: right; }
.qb-inner .pager small { display: block; color: var(--ink-4); font-size: 12px; }
.qb-inner .pager b { color: var(--ink); font-weight: var(--weight-medium); }

/* prose (rendered Markdown) */
.qb-inner .prose { margin-top: var(--space-8); max-width: var(--prose-width); color: var(--ink-2); }
.qb-inner .prose > * + * { margin-top: var(--space-4); }
.qb-inner .prose h2 { margin-top: var(--space-12); font-size: 26px; scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.qb-inner .prose h3 { margin-top: var(--space-8); font-size: 19px; scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.qb-inner .prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--qb-edge); text-underline-offset: 3px; }
.qb-inner .prose a:hover { text-decoration-color: var(--qb); }
.qb-inner .prose a.anchor { margin-left: 8px; color: var(--ink-5); text-decoration: none; opacity: 0; }
.qb-inner .prose h2:hover a.anchor, .qb-inner .prose h3:hover a.anchor, .qb-inner .prose a.anchor:focus { opacity: 1; }
.qb-inner .prose ul, .qb-inner .prose ol { padding-left: 1.4em; }
.qb-inner .prose li + li { margin-top: var(--space-2); }
.qb-inner .prose strong { color: var(--ink); }
.qb-inner .prose blockquote { margin-left: 0; padding: var(--space-3) var(--space-5); border-left: 3px solid var(--qb); background: var(--raised); color: var(--ink-3); }
.qb-inner .prose :not(pre) > code { padding: 2px 6px; border-radius: var(--r-xs); background: var(--raised-2); color: var(--ink); font-size: .88em; }
.qb-inner .prose pre { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--sunk); }
.qb-inner .prose hr { border: 0; border-top: 1px solid var(--line); }
.qb-inner .tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); }
.qb-inner .prose table, .qb-inner .params { width: 100%; border-collapse: collapse; font-size: 14px; }
.qb-inner .prose th, .qb-inner .prose td, .qb-inner .params th, .qb-inner .params td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.qb-inner .prose th, .qb-inner .params th { background: var(--raised); color: var(--ink-3); font-size: 12px; font-weight: var(--weight-semibold); }
.qb-inner .prose tr:last-child td { border-bottom: 0; }

/* tool reference */
.qb-inner .tool-filter { width: 100%; min-height: 44px; margin: var(--space-6) 0 var(--space-4); padding: 0 var(--space-4); border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--sunk); color: var(--ink); font: 16px var(--sans); }
.qb-inner .tool-card { border-bottom: 1px solid var(--line); }
.qb-inner .tool-card summary { display: flex; flex-wrap: wrap; gap: 4px var(--space-4); padding: var(--space-3) 0; cursor: pointer; }
.qb-inner .tool-card .nm { color: var(--ink); font: var(--weight-medium) 14px var(--mono); }
.qb-inner .tool-card .sm { color: var(--ink-4); font-size: 14px; }
.qb-inner .tool-body { padding: 0 0 var(--space-5); color: var(--ink-3); font-size: 14px; }
.qb-inner .tool-body p + p { margin-top: var(--space-2); }
.qb-inner .params { margin-top: var(--space-4); border: 1px solid var(--line); }
.qb-inner .params td.p { color: var(--ink); font-family: var(--mono); white-space: nowrap; }
.qb-inner .params td.t { color: var(--info); font-family: var(--mono); }
.qb-inner .params .req { margin-left: 6px; color: var(--warn); font-size: 11px; }