/* QB BrandOS — Shared components (v3.2 canonical)
   Last updated: 2026-05-14
   Spec reference: CHAPTER_01_SPEC.md §3 (components) + §12 (rules)

   Every value derives from /css/qb-tokens.css. No hardcoded colors,
   spacings, or font sizes appear outside the `:root` block this
   file imports from. Mobile-first; @media breakpoints at 640px and
   1024px. Reduced-motion respected on every transform.

   Locked patterns ported verbatim from ecosystem.html:
     .qb-button + .qb-button_content  (3D two-layer pill)
     .qb-tag    + .qb-tag_content     (eyebrow tag)
     .qb-card                         (cream card + hard offset shadow)
     .qb-illus-card                   (illustration frame)
     .qb-shadow                       (utility class)

   New components per spec §3:
     .qb-nav, .qb-phase-card, .qb-exercise-card, .qb-artifact-row,
     .qb-lock-foundation-cta, .qb-paywall-modal, .qb-empty-state,
     .qb-tier-badge, .qb-share-controls, .qb-qbp-section,
     .qb-status-pill
*/

/* =====================================================
   BASE TYPOGRAPHY (page-level; pages still own their own body)
   ===================================================== */
.qb-display {
  font-family: var(--font-display);
  font-variation-settings: "wght" 600, "opsz" 96, "SOFT" 60, "WONK" 0;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.qb-mono {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-75);
}

/* =====================================================
   SHADOW UTILITY (verbatim from ecosystem.html)
   ===================================================== */
.qb-shadow { box-shadow: var(--shadow-hard); }

/* =====================================================
   BUTTON — 3D two-layer pill (verbatim from ecosystem.html)
   ===================================================== */
.qb-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 0;
  font-size: var(--space-m);
  cursor: pointer;
  isolation: isolate;
  text-decoration: none;
  color: inherit;
}
.qb-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: var(--ink);
  transform: translateY(0.17em) scale(0.99);
  transition: transform var(--duration-pill) var(--ease-pill);
  z-index: -1;
}
.qb-button_content {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--ink);
  padding: 1.1em 1.5em;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.5em;
  line-height: 1.5em;
  letter-spacing: 0.02em;
  transform: translateY(-0.17em);
  transition:
    transform   var(--duration-pill) var(--ease-pill),
    filter      var(--duration-pill) var(--ease-pill),
    background  var(--duration-pill) var(--ease-pill),
    color       var(--duration-pill) var(--ease-pill);
  will-change: transform;
  white-space: nowrap;
}
@media (hover: hover) {
  .qb-button:hover .qb-button_content {
    transform: translateY(-0.45em) scale(1.02);
    filter: brightness(1.08);
  }
  .qb-button:hover::before {
    transform: translateY(0.05em) scale(0.99);
  }
}
.qb-button:active .qb-button_content {
  transform: translateY(0.32em) scale(0.96);
  filter: brightness(0.92);
  transition-duration: 0.15s;
}
.qb-button:active::before {
  transform: translateY(0.42em) scale(0.99);
  transition-duration: 0.15s;
}
.qb-button.is-primary   .qb-button_content { background: var(--gold);      color: var(--ink); }
.qb-button.is-secondary .qb-button_content { background: var(--rose-deep); color: var(--cream); }
.qb-button.is-sm        .qb-button_content { padding: 0.8em 1.4em; font-size: 0.4em; }
.qb-button.is-sm::before { transform: translateY(0.1em) scale(0.99); }
.qb-button.is-lg        .qb-button_content { font-size: 0.6em; }
.qb-button.is-expand                       { width: 100%; }
.qb-button.is-expand    .qb-button_content { width: 100%; }
.qb-button[disabled],
.qb-button.is-disabled {
  cursor: not-allowed;
  filter: grayscale(0.3) opacity(0.55);
  pointer-events: none;
}

/* Reduced motion: drop the transforms, keep the color shifts. */
@media (prefers-reduced-motion: reduce) {
  .qb-button::before,
  .qb-button_content { transition: filter 0.2s linear, background 0.2s linear, color 0.2s linear; }
  .qb-button:hover  .qb-button_content,
  .qb-button:active .qb-button_content { transform: translateY(-0.17em); }
  .qb-button:hover::before,
  .qb-button:active::before            { transform: translateY(0.17em) scale(0.99); }
}
.qb-reduced-motion .qb-button::before,
.qb-reduced-motion .qb-button_content { transition: filter 0.2s linear, background 0.2s linear, color 0.2s linear; }
.qb-reduced-motion .qb-button:hover  .qb-button_content,
.qb-reduced-motion .qb-button:active .qb-button_content { transform: translateY(-0.17em); }
.qb-reduced-motion .qb-button:hover::before,
.qb-reduced-motion .qb-button:active::before            { transform: translateY(0.17em) scale(0.99); }

/* =====================================================
   TAG — eyebrow + content (verbatim from ecosystem.html)
   ===================================================== */
.qb-tag {
  display: inline-flex;
  font-size: var(--space-m);
}
.qb-tag_content {
  border: var(--border-default) solid var(--ink);
  background: var(--cream);
  border-radius: var(--radius-pill);
  padding: 0.7em 1.5em;
  font-family: var(--font-body);
  font-size: 0.5em;
  font-weight: 600;
  line-height: 1.4em;
  letter-spacing: 0.1em;
  color: var(--ink);
  text-transform: uppercase;
  box-shadow: 0 4px var(--ink);
}
.qb-tag.is-rose   .qb-tag_content { background: var(--rose);      color: var(--cream); border-color: var(--rose-deep); }
.qb-tag.is-teal   .qb-tag_content { background: var(--teal);      color: var(--ink);   }
.qb-tag.is-pink   .qb-tag_content { background: var(--pink);      color: var(--ink);   }
.qb-tag.is-butter .qb-tag_content { background: var(--butter);    color: var(--ink);   }
.qb-tag.is-soft   .qb-tag_content { background: var(--cream-card); }
.qb-tag.is-gold   .qb-tag_content { background: var(--gold);      color: var(--ink); border-color: var(--gold-deep); }

/* =====================================================
   CARD — cream card with hard offset shadow
   ===================================================== */
.qb-card {
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--cream-card);
  overflow: hidden;
  box-shadow: var(--shadow-hard);
  transition: transform var(--duration-pill) var(--ease-pill),
              box-shadow var(--duration-pill) var(--ease-pill);
}
.qb-card.is-raised   { border-radius: var(--radius-raised); }
.qb-card.is-warm     { background: var(--cream-warm); }
.qb-card.is-rose     { background: var(--cream-rose); }
.qb-card.is-discovery   { background: var(--phase-discovery); }
.qb-card.is-creation    { background: var(--phase-creation); }
.qb-card.is-content     { background: var(--phase-content); }
.qb-card.is-execution   { background: var(--phase-execution); }
.qb-card.is-intelligence{ background: var(--phase-intelligence); }

/* =====================================================
   ILLUSTRATION CARD (verbatim from ecosystem.html)
   ===================================================== */
.qb-illus-card {
  background: var(--cream-card);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
  padding: var(--space-s);
  box-shadow: var(--shadow-hard);
  overflow: hidden;
  width: 100%;
  max-width: 460px;
}
@media (min-width: 640px) {
  .qb-illus-card { padding: var(--space-m); }
}
.qb-illus-card img,
.qb-illus-card video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

/* =====================================================
   NAV — persistent top navigation (qb-nav)
   ===================================================== */
.qb-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-m);
  background: var(--cream);
  border-bottom: 1px solid var(--ink-25);
  font-family: var(--font-body);
}
.qb-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: var(--step-0);
}
.qb-nav__brand img {
  height: 1.4em;
  width: auto;
}
.qb-nav__links {
  display: none;
  align-items: center;
  gap: var(--space-s);
}
.qb-nav__link {
  font-size: var(--step--1);
  letter-spacing: 0.02em;
  color: var(--ink-75);
  text-decoration: none;
  padding: 0.3em 0;
  border-bottom: 2px solid transparent;
  transition: color var(--duration-pill) var(--ease-pill),
              border-color var(--duration-pill) var(--ease-pill);
}
.qb-nav__link.is-active {
  color: var(--ink);
  border-bottom-color: var(--gold);
}
.qb-nav__link:hover { color: var(--ink); }
.qb-nav__hamburger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  width: 2.5em;
  height: 2.5em;
  cursor: pointer;
}
.qb-nav__hamburger-bar {
  display: block;
  width: 1.4em;
  height: 2px;
  background: var(--ink);
  position: relative;
}
.qb-nav__hamburger-bar::before,
.qb-nav__hamburger-bar::after {
  content: '';
  display: block;
  width: 1.4em;
  height: 2px;
  background: var(--ink);
  position: absolute;
}
.qb-nav__hamburger-bar::before { top: -0.4em; }
.qb-nav__hamburger-bar::after  { top:  0.4em; }
@media (min-width: 640px) {
  .qb-nav__links     { display: inline-flex; }
  .qb-nav__hamburger { display: none; }
}

/* =====================================================
   PHASE CARD — Foundation page state card (qb-phase-card)
   ===================================================== */
.qb-phase-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--cream-card);
  box-shadow: var(--shadow-hard);
  position: relative;
}
.qb-phase-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-75);
}
.qb-phase-card__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.qb-phase-card__meta {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--ink-75);
}
.qb-phase-card__cta { margin-top: auto; }
.qb-phase-card.is-discovery    { background: var(--phase-discovery); }
.qb-phase-card.is-creation     { background: var(--phase-creation); }
.qb-phase-card.is-content      { background: var(--phase-content); }
.qb-phase-card.is-execution    { background: var(--phase-execution); }
.qb-phase-card.is-intelligence { background: var(--phase-intelligence); }
.qb-phase-card.is-available    { /* default; no override */ }
.qb-phase-card.is-complete     { opacity: 1; }
.qb-phase-card.is-locked       { background: var(--cream-edge); }
.qb-phase-card.is-locked .qb-phase-card__title { color: var(--ink-75); }

/* =====================================================
   EXERCISE CARD — Phase 01 exercise tile (qb-exercise-card)
   ===================================================== */
.qb-exercise-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-m);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-raised);
  background: var(--cream-card);
  box-shadow: var(--shadow-hard);
}
.qb-exercise-card__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.1;
  color: var(--ink);
}
.qb-exercise-card__desc {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--ink-75);
  line-height: 1.5;
}
.qb-exercise-card__row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-3xs);
}
.qb-exercise-card__meta {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-50);
}
.qb-exercise-card__cta { margin-top: var(--space-xs); }
.qb-exercise-card.is-locked { background: var(--cream-edge); }
.qb-exercise-card.is-locked .qb-exercise-card__name { color: var(--ink-75); }
.qb-exercise-card.is-complete { background: var(--cream-warm); }

/* =====================================================
   ARTIFACT ROW — Archive list row (qb-artifact-row)
   ===================================================== */
.qb-artifact-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xs);
  align-items: center;
  padding: var(--space-s) var(--space-m);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-raised);
  background: var(--cream-card);
  box-shadow: var(--shadow-hard);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.qb-artifact-row.is-disabled,
.qb-artifact-row[aria-disabled="true"] {
  cursor: not-allowed;
}
.qb-artifact-row__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.15;
  color: var(--ink);
}
.qb-artifact-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-50);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-top: var(--space-3xs);
}
.qb-artifact-row__meta-dot {
  width: 4px; height: 4px;
  background: var(--ink-50);
  border-radius: var(--radius-circle);
}

/* =====================================================
   STATUS PILL — small status indicator (qb-status-pill)
   ===================================================== */
.qb-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  border: var(--border-bubble) solid var(--ink);
  background: var(--cream);
  color: var(--ink);
}
.qb-status-pill__dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-circle);
  background: var(--ink-50);
}
.qb-status-pill.is-queued      .qb-status-pill__dot { background: var(--ink-50); }
.qb-status-pill.is-generating  .qb-status-pill__dot { background: var(--teal-deep); animation: qb-status-pulse 1.4s ease-in-out infinite; }
.qb-status-pill.is-delivered   .qb-status-pill__dot { background: var(--phase-discovery); }
.qb-status-pill.is-failed      .qb-status-pill__dot { background: var(--rose-deep); }
.qb-status-pill.is-locked      .qb-status-pill__dot { background: var(--ink); }
.qb-status-pill.is-queued      { background: var(--cream); }
.qb-status-pill.is-generating  { background: var(--teal-soft); }
.qb-status-pill.is-delivered   { background: var(--cream-warm); }
.qb-status-pill.is-failed      { background: var(--cream-rose); color: var(--rose-deep); border-color: var(--rose-deep); }
.qb-status-pill.is-locked      { background: var(--cream-edge); }

@keyframes qb-status-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .qb-status-pill.is-generating .qb-status-pill__dot { animation: none; }
}
.qb-reduced-motion .qb-status-pill.is-generating .qb-status-pill__dot { animation: none; }

/* =====================================================
   LOCK FOUNDATION CTA — block wrapper around the pill (qb-lock-foundation-cta)
   ===================================================== */
.qb-lock-foundation-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-m);
  text-align: center;
}
.qb-lock-foundation-cta__hint {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-50);
  max-width: 28em;
}

/* =====================================================
   TIER BADGE — small pill (qb-tier-badge)
   ===================================================== */
.qb-tier-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
  border: var(--border-bubble) solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.qb-tier-badge.is-free    { background: var(--cream-edge); color: var(--ink); }
.qb-tier-badge.is-starter { background: var(--gold);       color: var(--ink); border-color: var(--gold-deep); }
.qb-tier-badge.is-pro     { background: var(--rose);       color: var(--cream); border-color: var(--rose-deep); }
.qb-tier-badge.is-agency  { background: var(--aubergine);  color: var(--cream); border-color: var(--ink); }
.qb-tier-badge.is-atelier { background: var(--ink);        color: var(--gold); border-color: var(--gold); }

/* =====================================================
   EMPTY STATE — standardized empty surface (qb-empty-state)
   ===================================================== */
.qb-empty-state {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l);
  text-align: center;
  align-items: center;
}
.qb-empty-state__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.qb-empty-state__headline {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.05;
  color: var(--ink);
  max-width: 18em;
}
.qb-empty-state__body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink-75);
  line-height: 1.5;
  max-width: 32em;
}
.qb-empty-state.is-cold-start  { background: transparent; }
.qb-empty-state.is-waiting     { background: var(--cream-warm); border-radius: var(--radius-card); }
.qb-empty-state.is-failed      { background: var(--cream-rose); border-radius: var(--radius-card); }
.qb-empty-state.is-locked      { background: var(--cream-edge); border-radius: var(--radius-card); }

/* =====================================================
   PAYWALL MODAL (qb-paywall-modal)
   ===================================================== */
.qb-paywall-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: var(--scrim);
  padding: 0;
}
.qb-paywall-modal__sheet {
  width: 100%;
  max-width: 100%;
  background: var(--cream);
  border-top: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  box-shadow: var(--shadow-hard);
  padding: var(--space-l) var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.qb-paywall-modal__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--rose-deep);
}
.qb-paywall-modal__headline {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.05;
  color: var(--ink);
}
.qb-paywall-modal__body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink-75);
  line-height: 1.5;
  max-width: 36em;
}
.qb-paywall-modal__price {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
.qb-paywall-modal__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}
.qb-paywall-modal__secondary {
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--ink-75);
  text-decoration: underline;
  cursor: pointer;
  padding: var(--space-xs);
}
@media (min-width: 640px) {
  .qb-paywall-modal { align-items: center; padding: var(--space-l); }
  .qb-paywall-modal__sheet {
    max-width: 32em;
    border: var(--border-default) solid var(--ink);
    border-radius: var(--radius-card);
  }
  .qb-paywall-modal__actions { flex-direction: row; }
}

/* =====================================================
   SHARE CONTROLS (qb-share-controls)
   ===================================================== */
.qb-share-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  padding: var(--space-m) 0;
  align-items: center;
}
.qb-share-controls__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.6em 1em;
  border: var(--border-bubble) solid var(--ink);
  border-radius: var(--radius-pill);
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step--1);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration-pill) var(--ease-pill),
              color      var(--duration-pill) var(--ease-pill);
}
.qb-share-controls__btn:hover {
  background: var(--ink);
  color: var(--cream);
}
.qb-share-controls__btn.is-disabled {
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

/* =====================================================
   QBP SECTION (qb-qbp-section)
   ===================================================== */
.qb-qbp-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l) 0;
  border-bottom: 1px solid var(--ink-25);
}
.qb-qbp-section__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.qb-qbp-section__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.05;
  color: var(--ink);
}
.qb-qbp-section__prose {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  max-width: 36em;
}
.qb-qbp-section__empty {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--ink-50);
  padding: var(--space-s) 0;
}
.qb-qbp-section__empty a { color: var(--ink); text-decoration: underline; }

/* =====================================================
   ARTIFACT READING SURFACE (step 9)
   ===================================================== */

/* Article frame */
.qb-artifact-article {
  max-width: 76ch;
  margin: 0 auto;
  padding: var(--space-l) var(--space-m) var(--space-2xl);
  background: var(--cream);
}
@media (min-width: 640px) {
  .qb-artifact-article { padding: var(--space-xl) var(--space-l) var(--space-3xl); }
}
@media (min-width: 1024px) {
  .qb-artifact-article { max-width: 84ch; }
}

/* ── Header ───────────────────────────────────────────── */
.qb-artifact-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-l) 0 var(--space-m);
  border-bottom: 1px solid var(--ink-25);
  margin-bottom: var(--space-l);
}
.qb-artifact-header__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.qb-artifact-header__title {
  font-family: var(--font-display);
  font-variation-settings: "wght" 500, "opsz" 96, "SOFT" 60, "WONK" 0;
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.qb-artifact-header__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.25;
  color: var(--ink-75);
  margin-top: var(--space-3xs);
}
.qb-artifact-header__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  margin-top: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.qb-artifact-header__dot {
  width: 4px; height: 4px;
  border-radius: var(--radius-circle);
  background: var(--ink-50);
}

/* ── Body sections ────────────────────────────────────── */
.qb-artifact-body { display: flex; flex-direction: column; gap: var(--space-xl); }
.qb-artifact-section { display: flex; flex-direction: column; gap: var(--space-s); }
.qb-artifact-section__heading {
  font-family: var(--font-display);
  font-variation-settings: "wght" 500, "opsz" 24, "SOFT" 50, "WONK" 0;
  font-size: var(--step-3);
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.qb-artifact-section__prose {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink);
}
.qb-artifact-section__prose p { margin: 0 0 var(--space-s); max-width: 65ch; }
.qb-artifact-section__prose p:last-child { margin-bottom: 0; }
.qb-artifact-section__prose strong { font-weight: 700; }
.qb-artifact-section__prose em     { font-style: italic; }
.qb-artifact-section__pull-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-3);
  line-height: 1.2;
  color: var(--ink-75);
  border-left: 3px solid var(--gold);
  padding: var(--space-xs) var(--space-m);
  margin: var(--space-s) 0;
  background: var(--cream-card);
  border-radius: 0 var(--radius-box) var(--radius-box) 0;
}
.qb-artifact-section__illustration {
  margin: var(--space-m) 0 0;
  padding: 0;
  max-width: 460px;
  align-self: center;
}
.qb-artifact-section__illustration img {
  width: 100%;
  height: auto;
  display: block;
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
  background: var(--cream-card);
  /* Tinting per spec 12.5. Sepia + warm hue rotates the editorial PNGs
     into the v3.2 cream/gold register. Tuned for the existing inventory;
     if any specific slot reads poorly the consumer can drop the slot. */
  filter: sepia(0.35) saturate(1.15) hue-rotate(-8deg) brightness(0.98) contrast(1.02);
}

/* ── Data blocks ──────────────────────────────────────── */
.qb-artifact-blocks {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}
.qb-data-block {
  padding: var(--space-m);
  background: var(--cream-card);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard);
}
.qb-data-block__title {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-s);
}

/* ── Palette ─────────────────────────────────────────── */
.qb-palette__swatches {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
}
@media (min-width: 640px) {
  .qb-palette__swatches { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .qb-palette__swatches { grid-template-columns: repeat(4, 1fr); }
}
.qb-palette__swatch {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  background: var(--cream);
  border: var(--border-bubble) solid var(--ink-25);
  border-radius: var(--radius-raised);
  padding: var(--space-s);
}
.qb-palette__chip {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-box);
  border: 1px solid var(--ink-25);
}
.qb-palette__label {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.1;
  color: var(--ink);
}
.qb-palette__hex {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  color: var(--ink-50);
  text-transform: uppercase;
}
.qb-palette__rationale {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--ink-75);
  line-height: 1.45;
}

/* ── Type pairing ────────────────────────────────────── */
.qb-type-pairing__pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
}
@media (min-width: 640px) {
  .qb-type-pairing__pair { grid-template-columns: 1fr 1fr; }
}
.qb-type-pairing__panel {
  background: var(--cream);
  border: var(--border-bubble) solid var(--ink-25);
  border-radius: var(--radius-raised);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.qb-type-pairing__role {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.qb-type-pairing__sample {
  font-size: var(--step-4);
  line-height: 1.05;
  color: var(--ink);
}
.qb-type-pairing__weight {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  color: var(--ink-50);
  text-transform: uppercase;
}
.qb-type-pairing__rationale {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--ink-75);
  line-height: 1.45;
  margin-top: var(--space-3xs);
}

/* ── Positioning map ─────────────────────────────────── */
.qb-positioning-map__frame {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  align-items: stretch;
}
.qb-positioning-map__row { display: contents; }
.qb-positioning-map__chart {
  grid-column: 2;
  aspect-ratio: 1 / 1;
  background: var(--cream);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
  position: relative;
  overflow: hidden;
}
.qb-positioning-map__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.qb-positioning-map__bg     { fill: var(--cream); }
.qb-positioning-map__axis   { stroke: var(--ink-25); stroke-width: 0.3; stroke-dasharray: 1 2; }
.qb-positioning-map__dot    { fill: var(--ink-50); stroke: var(--ink); stroke-width: 0.4; }
.qb-positioning-map__placement.is-self .qb-positioning-map__dot {
  fill: var(--rose); stroke: var(--rose-deep); stroke-width: 0.6;
}
.qb-positioning-map__label {
  font-family: 'Inter', sans-serif;
  font-size: 3.2px;
  fill: var(--ink-75);
  font-weight: 500;
}
.qb-positioning-map__placement.is-self .qb-positioning-map__label {
  fill: var(--rose-deep); font-weight: 700;
}
.qb-positioning-map__axis-label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-50);
  align-self: center;
}
.qb-positioning-map__axis-label.is-y-high {
  grid-column: 1 / -1;
  text-align: center;
  padding-bottom: var(--space-3xs);
}
.qb-positioning-map__axis-label.is-y-low {
  grid-column: 1;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-self: end;
  padding-right: var(--space-3xs);
}
.qb-positioning-map__x-row {
  grid-column: 2;
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-3xs);
}

/* ── Always / Never ──────────────────────────────────── */
.qb-always-never__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
}
@media (min-width: 640px) {
  .qb-always-never__columns { grid-template-columns: 1fr 1fr; }
}
.qb-always-never__column {
  padding: var(--space-s);
  background: var(--cream);
  border: var(--border-bubble) solid var(--ink-25);
  border-radius: var(--radius-raised);
}
.qb-always-never__column-title {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: var(--space-xs);
}
.qb-always-never__column--always .qb-always-never__column-title { color: var(--phase-discovery); }
.qb-always-never__column--never  .qb-always-never__column-title { color: var(--rose-deep); }
.qb-always-never__list { display: flex; flex-direction: column; gap: var(--space-3xs); }
.qb-always-never__item {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.45;
  color: var(--ink);
  padding-left: var(--space-s);
  position: relative;
}
.qb-always-never__item::before {
  content: '';
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 2px;
  background: var(--ink);
}
.qb-always-never__column--never .qb-always-never__item::before { background: var(--rose-deep); }

/* ── Priority list ──────────────────────────────────── */
.qb-priority-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.qb-priority-list__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-s);
  align-items: start;
  padding: var(--space-s);
  background: var(--cream);
  border: var(--border-bubble) solid var(--ink-25);
  border-radius: var(--radius-raised);
}
.qb-priority-list__rank {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  color: var(--gold-deep);
  font-variation-settings: "wght" 600;
}
.qb-priority-list__label {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: var(--space-3xs);
}
.qb-priority-list__rationale {
  font-family: var(--font-body);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-75);
}

/* ── Descriptor list ─────────────────────────────────── */
.qb-descriptor-list__groups {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
}
@media (min-width: 640px) {
  .qb-descriptor-list__groups { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1024px) {
  .qb-descriptor-list__groups { grid-template-columns: repeat(3, 1fr); }
}
.qb-descriptor-list__group {
  background: var(--cream);
  border: var(--border-bubble) solid var(--ink-25);
  border-radius: var(--radius-raised);
  padding: var(--space-s);
}
.qb-descriptor-list__group-label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: var(--space-xs);
}
.qb-descriptor-list__items {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}
.qb-descriptor-list__items li {
  font-family: var(--font-body);
  font-size: var(--step--1);
  background: var(--cream-card);
  border: var(--border-bubble) solid var(--ink-25);
  border-radius: var(--radius-pill);
  padding: 0.3em 0.8em;
  color: var(--ink);
}

/* ── Footer ───────────────────────────────────────────── */
.qb-artifact-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 1px solid var(--ink-25);
}
.qb-artifact-footer__title {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: var(--space-xs);
}
.qb-artifact-footer__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  color: var(--ink-75);
}
.qb-artifact-footer__list li {
  background: var(--cream-card);
  border-radius: var(--radius-pill);
  padding: 0.3em 0.8em;
}
.qb-artifact-footer__list a { color: var(--ink); text-decoration: underline; }

/* ── Locked / Failed / Not-found ──────────────────────── */
.qb-artifact-locked-frost {
  position: relative;
  margin-top: var(--space-l);
  padding: var(--space-l) 0;
  background:
    linear-gradient(to bottom, var(--cream) 0%, rgba(251,245,230,0) 30%),
    repeating-linear-gradient(180deg, rgba(45,21,33,0.04) 0px, rgba(45,21,33,0.04) 1px, transparent 1px, transparent 6px);
  border-top: 1px dashed var(--ink-25);
}
.qb-artifact-locked-frost .qb-paywall-modal {
  position: relative;
  inset: auto;
  z-index: auto;
  background: transparent;
  align-items: center;
  padding: 0;
}
.qb-artifact-locked-frost .qb-paywall-modal__sheet {
  max-width: 32em;
  margin: 0 auto;
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
}
.qb-artifact-article.is-failed .qb-artifact-failed__body {
  background: var(--cream-card);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
.qb-artifact-failed__detail {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  color: var(--ink-50);
}
.qb-artifact-failed__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

/* ── Loading skeleton ─────────────────────────────────── */
.qb-artifact-skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-l) 0;
}
.qb-artifact-skeleton__eyebrow,
.qb-artifact-skeleton__title,
.qb-artifact-skeleton__heading,
.qb-artifact-skeleton__line {
  background: linear-gradient(90deg, var(--cream-edge) 0%, var(--cream-warm) 50%, var(--cream-edge) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-box);
  animation: qb-skel-shimmer 1.6s linear infinite;
  height: 16px;
}
.qb-artifact-skeleton__eyebrow         { width: 30%; height: 12px; }
.qb-artifact-skeleton__title           { width: 80%; height: var(--step-5); border-radius: var(--radius-raised); }
.qb-artifact-skeleton__title--short    { width: 50%; }
.qb-artifact-skeleton__section         { margin-top: var(--space-m); display: flex; flex-direction: column; gap: var(--space-2xs); }
.qb-artifact-skeleton__heading         { width: 40%; height: 22px; margin-bottom: var(--space-2xs); }
.qb-artifact-skeleton__line            { width: 100%; }
.qb-artifact-skeleton__line--short     { width: 60%; }

@keyframes qb-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .qb-artifact-skeleton__eyebrow,
  .qb-artifact-skeleton__title,
  .qb-artifact-skeleton__heading,
  .qb-artifact-skeleton__line {
    animation: none;
    background: var(--cream-warm);
  }
}
.qb-reduced-motion .qb-artifact-skeleton__eyebrow,
.qb-reduced-motion .qb-artifact-skeleton__title,
.qb-reduced-motion .qb-artifact-skeleton__heading,
.qb-reduced-motion .qb-artifact-skeleton__line {
  animation: none;
  background: var(--cream-warm);
}

/* =====================================================
   PRINT — artifact reading surface
   ===================================================== */
@media print {
  /* Reset page chrome */
  body, .qb-cream { background: #fff !important; color: #000 !important; }
  .qb-nav, .qb-share-controls, .qb-paywall-modal, .qb-status-pill,
  .qb-button, .qb-artifact-locked-frost, .qb-artifact-failed__actions {
    display: none !important;
  }
  .qb-artifact-article {
    max-width: 100%;
    padding: 0;
    background: #fff;
  }
  .qb-artifact-header__title,
  .qb-artifact-header__eyebrow,
  .qb-artifact-section__heading,
  .qb-data-block__title,
  .qb-artifact-section__prose,
  .qb-priority-list__label,
  .qb-priority-list__rank,
  .qb-positioning-map__axis-label {
    color: #000 !important;
  }
  .qb-artifact-section,
  .qb-data-block,
  .qb-artifact-footer {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .qb-data-block {
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #000;
  }
  .qb-palette__chip { box-shadow: 0 0 0 1px #000; }
  .qb-priority-list__item,
  .qb-always-never__column,
  .qb-descriptor-list__group,
  .qb-type-pairing__panel,
  .qb-palette__swatch {
    background: #fff !important;
    border-color: #000 !important;
  }
  .qb-artifact-section__pull-quote {
    background: #fff !important;
    border-left-color: #000 !important;
  }
  .qb-artifact-section__illustration img {
    filter: none !important;
    border-color: #000 !important;
  }
  @page { margin: 18mm; }
}

/* =====================================================
   QBP RENDERING SURFACE (step 10)
   ===================================================== */

.qb-qbp-article {
  max-width: 88ch;
  margin: 0 auto;
  padding: 0 var(--space-m) var(--space-3xl);
  background: var(--cream);
}
@media (min-width: 640px) {
  .qb-qbp-article { padding: 0 var(--space-l) var(--space-3xl); }
}

/* ── Cover ────────────────────────────────────────────── */
.qb-qbp-cover {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-l) 0 var(--space-xl);
  gap: var(--space-l);
}
.qb-qbp-cover__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  flex-wrap: wrap;
}
.qb-qbp-cover__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.qb-qbp-cover__brand {
  font-family: var(--font-display);
  font-variation-settings: "wght" 500, "opsz" 96, "SOFT" 60, "WONK" 0;
  font-size: var(--step-7);
  line-height: 0.98;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0;
  word-break: break-word;
}
.qb-qbp-cover__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.qb-qbp-cover__status {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 0.9em;
  border-radius: var(--radius-pill);
  border: var(--border-bubble) solid var(--ink);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.qb-qbp-cover__status.is-draft  { background: var(--cream-edge); color: var(--ink); }
.qb-qbp-cover__status.is-locked { background: var(--phase-discovery); color: var(--ink); border-color: var(--ink); }
.qb-qbp-cover__date { color: var(--ink-50); }
.qb-qbp-cover__export.qb-button { font-size: var(--step-0); }

/* ── Empty banner ─────────────────────────────────────── */
.qb-qbp-empty-banner {
  background: var(--cream-warm);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
  padding: var(--space-l);
  box-shadow: var(--shadow-hard);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  margin-bottom: var(--space-xl);
}
.qb-qbp-empty-banner h2 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1.05;
  color: var(--ink);
}
.qb-qbp-empty-banner p {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink-75);
}
.qb-qbp-empty-banner__actions { display: flex; gap: var(--space-xs); flex-wrap: wrap; }

/* ── Table of contents ────────────────────────────────── */
.qb-qbp-toc {
  border-top: 1px solid var(--ink-25);
  border-bottom: 1px solid var(--ink-25);
  padding: var(--space-l) 0;
  margin-bottom: var(--space-2xl);
}
.qb-qbp-toc__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: var(--space-s);
}
.qb-qbp-toc__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px) {
  .qb-qbp-toc__list { grid-template-columns: 1fr 1fr; }
}
.qb-qbp-toc__list a {
  display: flex;
  align-items: baseline;
  gap: var(--space-s);
  text-decoration: none;
  color: var(--ink);
  padding: var(--space-2xs) 0;
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-pill) var(--ease-pill);
}
.qb-qbp-toc__list a:hover { border-bottom-color: var(--gold); }
.qb-qbp-toc__index {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  color: var(--ink-50);
}
.qb-qbp-toc__label {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.1;
}

/* ── Section frame ────────────────────────────────────── */
.qb-qbp-sections { display: flex; flex-direction: column; }
.qb-qbp-section {
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--ink-25);
}
.qb-qbp-section:last-child { border-bottom: 0; }
.qb-qbp-section__header { display: flex; flex-direction: column; gap: var(--space-3xs); margin-bottom: var(--space-l); }
.qb-qbp-section__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.qb-qbp-section__title {
  font-family: var(--font-display);
  font-variation-settings: "wght" 500, "opsz" 64, "SOFT" 60, "WONK" 0;
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.qb-qbp-section__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}
.qb-qbp-section__empty {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink-50);
  padding: var(--space-s) 0;
}
.qb-qbp-section__empty a { color: var(--ink); text-decoration: underline; }

/* ── Sub-block (label + body) ────────────────────────── */
.qb-qbp-subblock { display: flex; flex-direction: column; gap: var(--space-xs); }
.qb-qbp-subblock__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.qb-qbp-subblock__body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  max-width: 65ch;
}
.qb-qbp-subblock.is-wide .qb-qbp-subblock__body { max-width: 100%; }
.qb-qbp-subblock__empty {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--ink-50);
  font-style: italic;
}
.qb-qbp-prose__p { margin: 0 0 var(--space-xs); }
.qb-qbp-prose__p:last-child { margin-bottom: 0; }

/* ── Sense group ─────────────────────────────────────── */
.qb-qbp-sense-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m);
  background: var(--cream-card);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard);
}
.qb-qbp-sense-group__h {
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.1;
  color: var(--ink);
}

/* ── Archetype card ──────────────────────────────────── */
.qb-qbp-archetype {
  background: var(--cream-card);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  box-shadow: var(--shadow-hard);
}
.qb-qbp-archetype__primary {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.05;
  color: var(--ink);
}
.qb-qbp-archetype__secondary,
.qb-qbp-archetype__tension {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  color: var(--ink-75);
}
.qb-qbp-archetype__headline {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink);
  margin-top: var(--space-3xs);
}
.qb-qbp-archetype__epigraph {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--ink-75);
  border-left: 3px solid var(--gold);
  padding: var(--space-3xs) var(--space-s);
  margin-top: var(--space-2xs);
}

/* ── Always / Never (QBP) ────────────────────────────── */
.qb-qbp-always-never__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-s);
}
@media (min-width: 640px) {
  .qb-qbp-always-never__columns { grid-template-columns: 1fr 1fr; }
}
.qb-qbp-always-never__col {
  background: var(--cream-card);
  border: var(--border-bubble) solid var(--ink-25);
  border-radius: var(--radius-raised);
  padding: var(--space-s);
}
.qb-qbp-always-never__h {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: var(--space-xs);
}
.qb-qbp-always-never__col--always .qb-qbp-always-never__h { color: var(--phase-discovery); }
.qb-qbp-always-never__col--never  .qb-qbp-always-never__h { color: var(--rose-deep); }
.qb-qbp-always-never__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  list-style: none;
  margin: 0; padding: 0;
}
.qb-qbp-always-never__col li {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  padding-left: var(--space-s);
  position: relative;
}
.qb-qbp-always-never__col li::before {
  content: '';
  position: absolute; left: 0; top: 0.55em;
  width: 8px; height: 2px;
  background: var(--ink);
}
.qb-qbp-always-never__col--never li::before { background: var(--rose-deep); }

/* ── Visual DNA stats ────────────────────────────────── */
.qb-qbp-vdna-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-s);
}
@media (min-width: 640px) {
  .qb-qbp-vdna-stats { grid-template-columns: repeat(4, 1fr); }
}
.qb-qbp-handoff {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--ink-50);
  font-style: italic;
  padding: var(--space-s) 0;
}
.qb-qbp-handoff a { color: var(--ink); text-decoration: underline; }

/* ── War Table lists ─────────────────────────────────── */
.qb-qbp-priorities {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: priority;
}
.qb-qbp-priorities li {
  counter-increment: priority;
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  padding-left: var(--space-l);
  position: relative;
}
.qb-qbp-priorities li::before {
  content: counter(priority);
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  color: var(--gold-deep);
  font-weight: 600;
}
.qb-qbp-principles {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  list-style: none;
  margin: 0;
  padding: 0;
}
.qb-qbp-principles li {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  padding-left: var(--space-s);
  position: relative;
}
.qb-qbp-principles li::before {
  content: '—';
  position: absolute; left: 0; top: 0;
  color: var(--ink-50);
}

/* ── Locked section frost ────────────────────────────── */
.qb-qbp-section.is-locked { background: transparent; }
.qb-qbp-section__locked {
  position: relative;
  padding: var(--space-l) 0;
  background:
    linear-gradient(to bottom, var(--cream) 0%, rgba(251,245,230,0) 30%),
    repeating-linear-gradient(180deg, rgba(45,21,33,0.04) 0px, rgba(45,21,33,0.04) 1px, transparent 1px, transparent 6px);
  border-top: 1px dashed var(--ink-25);
}
.qb-qbp-section__locked .qb-paywall-modal {
  position: relative;
  inset: auto;
  z-index: auto;
  background: transparent;
  align-items: center;
  padding: 0;
}
.qb-qbp-section__locked .qb-paywall-modal__sheet {
  max-width: 32em;
  margin: 0 auto;
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
}

/* ── Footer ──────────────────────────────────────────── */
.qb-qbp-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: flex-start;
  padding: var(--space-2xl) 0 var(--space-l);
  border-top: 1px solid var(--ink-25);
  margin-top: var(--space-xl);
}
.qb-qbp-footer__copy p {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.qb-qbp-footer__note { text-transform: none; letter-spacing: 0.04em; }

/* ── Error body ──────────────────────────────────────── */
.qb-qbp-error__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  align-items: flex-start;
  padding: var(--space-l);
  background: var(--cream-card);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
  margin-top: var(--space-l);
}
.qb-qbp-error__body p {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink-75);
}

/* ── Loading skeleton ────────────────────────────────── */
.qb-qbp-skeleton {
  background: linear-gradient(90deg, var(--cream-edge) 0%, var(--cream-warm) 50%, var(--cream-edge) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-box);
  animation: qb-skel-shimmer 1.6s linear infinite;
}
.qb-qbp-skeleton--eyebrow  { width: 35%; height: 14px; margin-bottom: var(--space-s); }
.qb-qbp-skeleton--brand    { width: 80%; height: var(--step-7); border-radius: var(--radius-raised); margin-bottom: var(--space-m); }
.qb-qbp-skeleton--meta     { width: 50%; height: 18px; }
.qb-qbp-skeleton--toc-line { width: 80%; height: 22px; margin-bottom: var(--space-xs); }
.qb-qbp-skeleton--heading  { width: 60%; height: var(--step-5); border-radius: var(--radius-raised); margin-bottom: var(--space-s); }
.qb-qbp-skeleton--line     { width: 100%; height: 16px; margin-bottom: var(--space-2xs); }
.qb-qbp-skeleton--short    { width: 65%; }

@media (prefers-reduced-motion: reduce) {
  .qb-qbp-skeleton { animation: none; background: var(--cream-warm); }
}
.qb-reduced-motion .qb-qbp-skeleton { animation: none; background: var(--cream-warm); }

/* =====================================================
   PRINT — QBP rendering surface
   ===================================================== */
@media print {
  .qb-qbp-article { max-width: 100%; padding: 0; background: #fff; }
  .qb-qbp-cover { min-height: auto; padding: 0 0 var(--space-l); page-break-after: always; }
  .qb-qbp-cover__export, .qb-qbp-footer .qb-button, .qb-qbp-section__locked .qb-button { display: none !important; }
  .qb-qbp-section__locked {
    background: none;
    border: 1px solid #000;
    padding: var(--space-m);
  }
  .qb-qbp-section__locked .qb-paywall-modal__sheet { display: none; }
  .qb-qbp-section__locked::after {
    content: 'Available with Starter.';
    font-family: var(--font-mono);
    font-size: var(--step--2);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #000;
    display: block;
  }
  .qb-qbp-section,
  .qb-qbp-sense-group,
  .qb-qbp-archetype,
  .qb-qbp-always-never__columns,
  .qb-qbp-subblock {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .qb-qbp-sense-group,
  .qb-qbp-archetype,
  .qb-qbp-always-never__col {
    background: #fff !important;
    box-shadow: none !important;
    border: 1px solid #000;
  }
  .qb-qbp-archetype__epigraph { border-left-color: #000 !important; }
}

/* =====================================================
   BRAND ARCHIVE SURFACE (step 11)
   ===================================================== */

.qb-archive {
  max-width: 88ch;
  margin: 0 auto;
  padding: var(--space-l) var(--space-m) var(--space-3xl);
}
@media (min-width: 640px) {
  .qb-archive { padding: var(--space-xl) var(--space-l) var(--space-3xl); }
}

/* ── Header ──────────────────────────────────────────── */
.qb-archive-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-l) 0 var(--space-m);
  border-bottom: 1px solid var(--ink-25);
  margin-bottom: var(--space-m);
}
.qb-archive-header__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.qb-archive-header__title {
  font-family: var(--font-display);
  font-variation-settings: "wght" 500, "opsz" 96, "SOFT" 60, "WONK" 0;
  font-size: var(--step-4);
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.qb-archive-header__subtitle {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink-75);
  max-width: 48ch;
}
.qb-archive-header__counts {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-top: var(--space-3xs);
}

/* ── Filter bar ──────────────────────────────────────── */
.qb-archive-filter-bar {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding: var(--space-m) 0;
  border-bottom: 1px solid var(--ink-25);
  margin-bottom: var(--space-s);
}
@media (min-width: 1024px) {
  .qb-archive-filter-bar {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-m);
  }
}
.qb-archive-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  min-width: 0;
}
.qb-archive-filter-group__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.qb-archive-filter-group__pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs);
}
@media (max-width: 639px) {
  /* Allow the pill row to scroll horizontally on narrow viewports
     rather than wrapping to multiple lines. */
  .qb-archive-filter-group__pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: var(--space-3xs);
    scrollbar-width: thin;
  }
  .qb-archive-filter-group__pills::-webkit-scrollbar { height: 4px; }
  .qb-archive-filter-group__pills::-webkit-scrollbar-thumb { background: var(--ink-25); border-radius: 4px; }
}
.qb-archive-pill {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--cream);
  color: var(--ink-75);
  border: var(--border-bubble) solid var(--ink-25);
  border-radius: var(--radius-pill);
  padding: 0.5em 1em;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--duration-pill) var(--ease-pill),
              color var(--duration-pill) var(--ease-pill),
              border-color var(--duration-pill) var(--ease-pill);
}
.qb-archive-pill:hover { color: var(--ink); border-color: var(--ink); }
.qb-archive-pill.is-active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.qb-archive-pill.is-disabled,
.qb-archive-pill[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.qb-archive-filter-reset {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: transparent;
  border: 0;
  color: var(--ink-50);
  cursor: pointer;
  text-decoration: underline;
  padding: var(--space-3xs) 0;
}
.qb-archive-filter-reset:hover { color: var(--ink); }
@media (min-width: 1024px) {
  .qb-archive-filter-reset { margin-left: auto; align-self: center; }
}

/* ── Toolbar (counts + version toggle) ───────────────── */
.qb-archive-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  flex-wrap: wrap;
}
.qb-archive-counts {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.qb-archive-toggle {
  display: inline-flex;
  border: var(--border-bubble) solid var(--ink-25);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.qb-archive-toggle-btn {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--cream);
  color: var(--ink-75);
  border: 0;
  padding: 0.5em 1em;
  cursor: pointer;
  transition: background var(--duration-pill) var(--ease-pill),
              color var(--duration-pill) var(--ease-pill);
}
.qb-archive-toggle-btn.is-active {
  background: var(--ink);
  color: var(--cream);
}
.qb-archive-toggle-btn + .qb-archive-toggle-btn {
  border-left: 1px solid var(--ink-25);
}

/* ── List ────────────────────────────────────────────── */
.qb-archive-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-s);
}
.qb-archive-list > .qb-artifact-row {
  transition: transform var(--duration-pill) var(--ease-pill),
              box-shadow var(--duration-pill) var(--ease-pill);
}
.qb-archive-list > .qb-artifact-row:nth-child(even) {
  background: var(--cream);
}
.qb-archive-list > .qb-artifact-row:hover {
  transform: translateY(-2px);
}
.qb-archive-list > .qb-artifact-row.is-pending {
  cursor: default;
  filter: opacity(0.7);
}
.qb-archive-list > .qb-artifact-row.is-locked {
  filter: opacity(0.85);
}
.qb-archive-list > .qb-artifact-row.is-locked::after {
  content: '⌧';
  position: absolute;
  right: var(--space-s);
  top: var(--space-3xs);
  font-family: var(--font-mono);
  color: var(--ink-50);
  font-size: var(--step--1);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .qb-archive-list > .qb-artifact-row { transition: none; }
  .qb-archive-list > .qb-artifact-row:hover { transform: none; }
}
.qb-reduced-motion .qb-archive-list > .qb-artifact-row { transition: none; }
.qb-reduced-motion .qb-archive-list > .qb-artifact-row:hover { transform: none; }

/* ── Empty state ─────────────────────────────────────── */
.qb-archive-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-xl) 0;
  max-width: 56ch;
}
.qb-archive-empty__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.qb-archive-empty__headline {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.05;
  color: var(--ink);
}
.qb-archive-empty__body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink-75);
}

/* ── Skeleton list ───────────────────────────────────── */
.qb-archive-list.is-skeleton { gap: var(--space-xs); }
.qb-archive-skel-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-s) var(--space-m);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-raised);
  background: var(--cream-card);
  box-shadow: var(--shadow-hard);
}

/* Print: hide filter bar, show plain rows */
@media print {
  .qb-archive-filter-bar,
  .qb-archive-toolbar { display: none !important; }
  .qb-archive-list > .qb-artifact-row {
    background: #fff !important;
    box-shadow: none !important;
    border-color: #000 !important;
    page-break-inside: avoid;
  }
}

/* =====================================================
   FOUNDATION SURFACE (step 12)
   ===================================================== */

.qb-foundation { background: var(--cream); }
.qb-foundation__inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: var(--space-l) var(--space-m) var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}
@media (min-width: 640px) {
  .qb-foundation__inner { padding: var(--space-xl) var(--space-l) var(--space-3xl); }
}

/* ── Nav ─────────────────────────────────────────────── */
.qb-foundation-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--ink-25);
  padding: var(--space-s) var(--space-m);
}
@media (min-width: 640px) {
  .qb-foundation-nav { padding: var(--space-s) var(--space-l); }
}
.qb-foundation-nav__wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-variation-settings: "wght" 600, "SOFT" 60;
  font-size: var(--step-0);
  color: var(--ink);
}
.qb-foundation-nav .qb-nav__links {
  align-items: center;
  gap: var(--space-s);
}
@media (max-width: 639px) {
  .qb-foundation-nav .qb-nav__links {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    background: var(--cream);
    padding: var(--space-s) var(--space-m);
    border-bottom: 1px solid var(--ink-25);
    align-items: flex-start;
  }
  .qb-foundation-nav .qb-nav__links.is-open { display: flex; }
}

/* ── Top banner (post-lock confirmation, etc.) ───────── */
.qb-foundation-banner {
  margin: 0 auto;
  max-width: 1240px;
  background: var(--cream-warm);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-raised);
  padding: var(--space-s) var(--space-m);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ink);
  box-shadow: var(--shadow-hard);
  margin-top: var(--space-m);
}
.qb-foundation-banner.is-success { background: var(--phase-discovery); }
.qb-foundation-banner__text { margin: 0; }

/* ── Hero ───────────────────────────────────────────── */
.qb-foundation-hero {
  display: grid;
  gap: var(--space-l);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 1024px) {
  .qb-foundation-hero.is-cold {
    grid-template-columns: 1fr minmax(0, 420px);
  }
}
.qb-foundation-hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  max-width: 60ch;
}
.qb-foundation-hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.qb-foundation-hero__title {
  font-family: var(--font-display);
  font-variation-settings: "wght" 500, "opsz" 96, "SOFT" 60, "WONK" 0;
  font-size: var(--step-5);
  line-height: 1.02;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.qb-foundation-hero__body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink-75);
}
.qb-foundation-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-xs);
}
.qb-foundation-hero__illustration {
  max-width: 420px;
  width: 100%;
  justify-self: center;
}

/* ── Progress bar ────────────────────────────────────── */
.qb-foundation-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  margin-top: var(--space-xs);
}
.qb-foundation-progress__bar {
  display: flex;
  gap: 4px;
}
.qb-foundation-progress__seg {
  flex: 1;
  height: 8px;
  background: var(--cream-edge);
  border-radius: var(--radius-box);
  border: 1px solid var(--ink-25);
}
.qb-foundation-progress__seg.is-filled {
  background: var(--gold);
  border-color: var(--gold-deep);
}
.qb-foundation-progress__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* ── Exercise grid ───────────────────────────────────── */
.qb-foundation-exercises__grid {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .qb-foundation-exercises__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .qb-foundation-exercises__grid { grid-template-columns: repeat(3, 1fr); } }

/* ── Phase roadmap ───────────────────────────────────── */
.qb-foundation-roadmap {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  padding-top: var(--space-l);
  border-top: 1px solid var(--ink-25);
}
.qb-foundation-roadmap__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.qb-foundation-roadmap__grid {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: 1fr;
}
@media (min-width: 640px)  { .qb-foundation-roadmap__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .qb-foundation-roadmap__grid { grid-template-columns: repeat(5, 1fr); } }

/* ── Queue (post-lock, generating) ───────────────────── */
.qb-foundation-queue {
  margin-top: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  background: var(--cream-card);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-raised);
  box-shadow: var(--shadow-hard);
  padding: var(--space-s) var(--space-m);
}
.qb-foundation-queue__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-3xs) 0;
}
.qb-foundation-queue__row + .qb-foundation-queue__row {
  border-top: 1px solid var(--ink-25);
}
.qb-foundation-queue__agent {
  font-family: var(--font-body);
  font-size: var(--step--1);
  color: var(--ink);
  text-transform: capitalize;
}

/* ── Tiles grid (post-lock delivered) ───────────────── */
.qb-foundation-tiles__grid {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) { .qb-foundation-tiles__grid { grid-template-columns: repeat(2, 1fr); } }

/* ── Upgrade banner ──────────────────────────────────── */
.qb-foundation-upgrade-banner {
  display: grid;
  gap: var(--space-m);
  padding: var(--space-l);
  background: var(--cream-card);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-hard);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 768px) {
  .qb-foundation-upgrade-banner { grid-template-columns: 1fr auto; }
}
.qb-foundation-upgrade-banner__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: var(--space-xs);
}
.qb-foundation-upgrade-banner__body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink-75);
  max-width: 48ch;
}
.qb-foundation-upgrade-banner__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-xs);
}
.qb-foundation-upgrade-banner__price {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-50);
}

/* ── "Next phase" plain note (starter, delivered) ────── */
.qb-foundation-next {
  padding: var(--space-m);
  background: var(--cream-warm);
  border: 1px dashed var(--ink-25);
  border-radius: var(--radius-raised);
}
.qb-foundation-next__text {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--ink-75);
  max-width: 56ch;
}

/* ── Print ──────────────────────────────────────────── */
@media print {
  .qb-foundation-nav,
  .qb-foundation-banner,
  .qb-foundation-upgrade-banner__cta,
  .qb-toast { display: none !important; }
  .qb-foundation__inner { padding: 0 !important; }
  .qb-foundation-hero__title,
  .qb-foundation-hero__eyebrow,
  .qb-foundation-hero__body { color: #000 !important; }
}

/* =====================================================
   PAYWALL SURFACE (step 13)
   ===================================================== */

.qb-paywall { background: var(--cream); }
.qb-paywall__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-m) var(--space-2xl);
}

.qb-paywall-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  background: var(--cream-warm);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
  padding: var(--space-s) var(--space-m);
  margin-bottom: var(--space-l);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.qb-paywall-banner__text { color: var(--ink); }

.qb-paywall__header {
  text-align: center;
  margin-bottom: var(--space-xl);
}
.qb-paywall__header.is-cancelled .qb-paywall__eyebrow { color: var(--rose-deep); }
.qb-paywall__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-s);
}
.qb-paywall__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 60;
  font-size: var(--step-4);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 var(--space-s) 0;
  max-width: 22ch;
  margin-left: auto;
  margin-right: auto;
}
.qb-paywall__body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  color: var(--ink);
  max-width: 56ch;
  margin: 0 auto;
}

.qb-paywall__plans {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-l);
  margin-bottom: var(--space-xl);
}
@media (min-width: 1024px) {
  .qb-paywall__plans {
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
  }
}

.qb-plan-card {
  background: var(--cream-card);
  border: var(--border-default) solid var(--ink);
  border-radius: var(--radius-card);
  padding: var(--space-l);
  box-shadow: 0 9px 0 var(--ink);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  position: relative;
}
@media (min-width: 640px) {
  .qb-plan-card { box-shadow: 0 16px 0 var(--ink); }
}
.qb-plan-card.is-starter {
  background: var(--cream-warm);
  box-shadow: 0 12px 0 var(--ink);
}
@media (min-width: 640px) {
  .qb-plan-card.is-starter { box-shadow: 0 20px 0 var(--ink); }
}
.qb-plan-card.is-soon { opacity: 0.82; }
.qb-plan-card.is-current { outline: 2px solid var(--gold-deep); outline-offset: -2px; }

.qb-plan-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
}
.qb-plan-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
}
.qb-plan-card__pip {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--cream);
  padding: 0.3em 0.8em;
  border-radius: var(--radius-pill);
}
.qb-plan-card__pip.is-current-pip { background: var(--gold-deep); }

.qb-plan-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}
.qb-plan-card__amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 60;
  font-size: var(--step-4);
  color: var(--ink);
}
.qb-plan-card.is-starter .qb-plan-card__amount { color: var(--gold-deep); }
.qb-plan-card__cadence {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink);
}
.qb-plan-card__lede {
  font-size: var(--step--1);
  color: var(--ink);
  margin: 0;
  line-height: 1.5;
}

.qb-plan-card__features {
  list-style: none;
  padding: 0;
  margin: var(--space-xs) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1;
}
.qb-plan-card__feature {
  font-size: var(--step--1);
  color: var(--ink);
  line-height: 1.45;
  padding-left: 1.4em;
  position: relative;
}
.qb-plan-card__feature::before {
  content: '·';
  position: absolute;
  left: 0.2em;
  top: 0;
  font-weight: 700;
  font-size: 1.4em;
  line-height: 1;
  color: var(--ink);
}

.qb-plan-card__cta {
  margin-top: var(--space-s);
  display: flex;
  justify-content: flex-start;
}
.qb-plan-card__cta .qb-button.is-loading { opacity: 0.7; }

.qb-paywall-atelier {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: var(--space-l) 0;
}
.qb-paywall-atelier__link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.qb-paywall-atelier__link:hover { color: var(--gold-deep); }

.qb-paywall__footer {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  display: flex;
  justify-content: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
}
.qb-paywall__footer-dot { opacity: 0.5; }

@media (prefers-reduced-motion: reduce), (.qb-reduced-motion *) {
  .qb-plan-card { transition: none; }
}

/* =====================================================
   ACCOUNT SURFACE (step 13)
   ===================================================== */

.qb-account { background: var(--cream); }
.qb-account__inner {
  max-width: 640px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-m) var(--space-2xl);
}

.qb-account__header {
  margin-bottom: var(--space-xl);
}
.qb-account__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--space-s);
}
.qb-account__headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 60;
  font-size: var(--step-4);
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}

.qb-account-field {
  border-top: 1px solid var(--ink);
  padding: var(--space-l) 0 var(--space-s);
  display: grid;
  gap: var(--space-2xs);
}
.qb-account-field:last-child { border-bottom: 1px solid var(--ink); }

.qb-account-field__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.75;
}
.qb-account-field__value {
  font-family: var(--font-body);
  font-size: var(--step-0);
  color: var(--ink);
  word-break: break-word;
}
.qb-account-field__hint {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink);
  opacity: 0.6;
}
.qb-account-field__control {
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex-wrap: wrap;
}
.qb-account-field__tier-row {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  flex-wrap: wrap;
}
.qb-account-field__since {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink);
  opacity: 0.7;
}

.qb-account-link {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.qb-account-link.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: auto;
}
.qb-account-link.is-disabled:hover { color: var(--ink); }

.qb-account-field--signout { margin-top: var(--space-m); }

.qb-account__error {
  margin: var(--space-l) 0;
  font-size: var(--step--1);
  color: var(--rose-deep);
}

.qb-tier-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.3em 0.9em;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--cream-warm);
  color: var(--ink);
  border: 1px solid var(--ink);
}
.qb-tier-badge.is-free    { background: var(--cream-warm); }
.qb-tier-badge.is-starter { background: var(--gold); color: var(--ink); }
.qb-tier-badge.is-pro     { background: var(--teal); color: var(--ink); }
.qb-tier-badge.is-agency  { background: var(--rose-deep); color: var(--cream); }
.qb-tier-badge.is-atelier { background: var(--ink); color: var(--cream); }

@media print {
  .qb-paywall,
  .qb-account { background: #fff !important; }
  .qb-paywall__footer,
  .qb-paywall-atelier { display: none; }
}

/* ─── Archive chain tree-view (chapter 2 · step 11) ─────────────────── */
.qb-archive-chain {
  margin-top: var(--space-l);
  padding: var(--space-l);
  background: var(--cream-card);
  border: 2px solid var(--ink);
  border-radius: var(--radius-card, 0.8rem);
  box-shadow: 0 9px var(--ink);
}
@media (min-width: 640px) {
  .qb-archive-chain { box-shadow: 0 16px var(--ink); }
}
.qb-archive-chain__header {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  margin-bottom: var(--space-m);
  flex-wrap: wrap;
}
.qb-archive-chain__title {
  font-family: var(--font-display, 'Fraunces', serif);
  font-weight: 500;
  font-size: var(--step-2);
  margin: 0;
}
.qb-archive-chain__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.qb-archive-chain-node-wrap {
  display: flex;
  flex-direction: column;
}
.qb-archive-chain-child {
  position: relative;
  opacity: 0.92;
}
.qb-archive-chain-child::before {
  content: "↳";
  position: absolute;
  left: -18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-50);
  font-family: var(--font-mono);
  font-size: var(--step--1);
}
.qb-archive-legacy {
  margin-top: var(--space-2xl);
  padding-top: var(--space-l);
  border-top: 1px dashed rgba(45, 21, 33, 0.18);
}
.qb-archive-legacy__title {
  font-family: var(--font-display, 'Fraunces', serif);
  font-weight: 500;
  font-size: var(--step-2);
  margin: 0 0 var(--space-2xs);
}
.qb-archive-legacy__subhead {
  color: rgba(45, 21, 33, 0.65);
  font-size: var(--step--1);
  margin: 0 0 var(--space-m);
}