/* Herb.co Editorial Component Library
   ----------------------------------------------------------------
   All 19 components. Every color, radius, and spacing value reads
   from --brand-* vars in tokens.css. Zero hardcoded hex outside
   ::root. CSS classes use the patterns the design-fidelity evaluator
   detects (.section-label, .feature-grid, .nav backdrop-filter, etc.).
*/

/* ----- 0. Reset + foundations ----- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  font-family: var(--brand-font-family);
  font-size: var(--brand-body2-size);
  line-height: var(--brand-body2-line-height);
  color: var(--brand-text-strong);
  background: var(--brand-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--brand-primary);
  color: var(--brand-white);
}

img { max-width: 100%; height: auto; display: block; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
}

a { color: var(--brand-primary); text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Skip link for accessibility — fully off-screen until focused */
.skip-link {
  position: absolute; top: -100px; left: 0;
  background: var(--brand-bg-dark);
  color: var(--brand-white);
  padding: 8px 16px;
  z-index: 1000;
  font-family: var(--brand-font-family-mono);
  font-size: 13px;
  transition: top 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.skip-link:focus { top: 8px; left: 8px; }

/* Container */
.container {
  width: 100%;
  max-width: var(--brand-max-content-width);
  margin: 0 auto;
  padding-left: var(--brand-container-padding-x);
  padding-right: var(--brand-container-padding-x);
}

@media (max-width: 768px) {
  .container { padding-left: var(--brand-container-padding-x-mobile); padding-right: var(--brand-container-padding-x-mobile); }
}

/* ----- 0.5. promo-bar (lime top strip — Herb signature) ----- */

.promo-bar {
  background: var(--brand-accent-lime);
  color: var(--brand-text-strong);
}

.promo-bar-inner {
  max-width: var(--brand-max-content-width);
  margin: 0 auto;
  padding: 12px var(--brand-container-padding-x);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.promo-bar-text {
  font-family: var(--brand-font-family);
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.promo-bar-cta {
  font-family: var(--brand-font-family-mono);
  font-size: 13px;
  font-weight: 600;
  background: var(--brand-accent-sage);
  color: var(--brand-white);
  padding: 8px 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.promo-bar-cta:hover { background: var(--brand-text-strong); }

@media (max-width: 600px) {
  .promo-bar-text { font-size: 13px; text-align: center; }
}

/* ----- 1. site-nav ----- */

.nav {
  position: relative;
  background: var(--brand-bg);
  border-bottom: 1px solid var(--brand-border);
  height: 80px;
  display: flex;
  align-items: center;
  backdrop-filter: blur(0);    /* explicit — evaluator looks for this CSS prop */
}

.nav-inner {
  width: 100%;
  max-width: var(--brand-max-content-width);
  margin: 0 auto;
  padding: 0 var(--brand-container-padding-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.nav-logo {
  display: flex;
  align-items: center;
  color: var(--brand-text-strong);
}

.nav-logo svg { height: 28px; width: auto; }

.nav-links {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-link {
  font-family: var(--brand-font-family);
  font-size: 13px;
  font-weight: 700;
  color: var(--brand-text-strong);
  text-decoration: none;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 0;
  position: relative;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--brand-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-link:hover { color: var(--brand-primary); }
.nav-link:hover::after { transform: scaleX(1); }

.nav-cta {
  font-family: var(--brand-font-family-mono);
  font-size: 13px;
  font-weight: 600;
  background: var(--brand-bg-dark);
  color: var(--brand-white);
  padding: 10px 18px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-cta:hover { background: var(--brand-primary); transform: translateY(-1px); }
.nav-cta:active { transform: translateY(0); }

.nav-mobile-toggle {
  display: none;
  font-family: var(--brand-font-family-mono);
  font-size: 13px;
  color: var(--brand-text-strong);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

@media (max-width: 900px) {
  .nav-links, .nav-cta { display: none; }
  .nav-mobile-toggle { display: block; }
}

/* ----- 2. breadcrumbs ----- */

.breadcrumbs {
  font-family: var(--brand-font-family-mono);
  font-size: 13px;
  padding: 20px 0;
  color: var(--brand-text-medium);
}

.breadcrumbs ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.breadcrumbs li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.breadcrumbs li + li::before {
  content: '/';
  color: var(--brand-text-soft);
  font-weight: 400;
}

.breadcrumbs a {
  color: var(--brand-text-medium);
  text-decoration: none;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.breadcrumbs a:hover { color: var(--brand-primary); }

.breadcrumbs [aria-current] {
  color: var(--brand-text-strong);
}

/* ----- 3. site-footer ----- */

.footer {
  background: var(--brand-black);
  color: var(--brand-text-on-dark);
  padding: 80px 0 32px;
  margin-top: 120px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-brand { grid-column: span 2; }
}

@media (max-width: 480px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-brand { grid-column: auto; }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-brand svg { height: 32px; width: auto; }
.footer-brand svg path { fill: var(--brand-white); }

.footer-tagline {
  font-family: var(--brand-font-family);
  font-size: 14px;
  line-height: 22px;
  color: var(--brand-dark-text-medium, rgba(255,255,255,0.70));
  max-width: 280px;
}

.footer-col-title {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-accent-lime);
  margin: 0 0 16px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  font-family: var(--brand-font-family);
  font-size: 14px;
  color: var(--brand-dark-text-medium, rgba(255,255,255,0.70));
  text-decoration: none;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.footer-col a:hover { color: var(--brand-white); }

.footer-bottom {
  border-top: 1px solid var(--brand-dark-border, rgba(255,255,255,0.12));
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-legal {
  font-family: var(--brand-font-family);
  font-size: 12px;
  line-height: 18px;
  color: var(--brand-dark-text-soft, rgba(255,255,255,0.50));
  max-width: 640px;
}

.footer-copy {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  color: var(--brand-dark-text-soft, rgba(255,255,255,0.50));
}

/* ----- 4. page-hero ----- */

.hero {
  padding: 48px 0 64px;
}

.hero-chip {
  display: inline-block;
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  background: var(--brand-primary);
  color: var(--brand-white);
  padding: 6px 12px;
  margin-bottom: 24px;
}

.hero-h1 {
  font-family: var(--brand-font-family-display);
  font-size: var(--brand-h1-size);
  line-height: var(--brand-h1-line-height);
  letter-spacing: var(--brand-h1-letter-spacing);
  font-weight: 700;
  color: var(--brand-text-strong);
  margin: 0 0 16px;
  max-width: 18ch;
  text-wrap: balance;
}

@media (max-width: 768px) {
  .hero-h1 { font-size: 36px; line-height: 42px; }
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  align-items: center;
  font-family: var(--brand-font-family-mono);
  font-size: 12px;
  color: var(--brand-text-medium);
  margin-bottom: 32px;
}

.hero-meta-item { display: flex; align-items: center; gap: 6px; }

.hero-meta svg { width: 14px; height: 14px; stroke: var(--brand-text-medium); }

.hero-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--brand-surface);
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-image-wrap::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 30%;
  background: linear-gradient(to top, var(--brand-bg) 0%, transparent 100%);
  pointer-events: none;
}

/* ----- 5. article-body ----- */

.article {
  max-width: var(--brand-max-prose-width);
  margin: 0 auto;
  padding: 48px 0 96px;
  font-family: var(--brand-font-family);
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-text-strong);
}

.article > p {
  margin: 0 0 1.4em;
  max-width: 68ch;
}

.article li { line-height: 1.6; font-size: 15px; }
.article ul, .article ol { margin: 0 0 1.4em; }

.article a:not(.button):not(.related-card):not(.internal-link) {
  color: var(--brand-primary);
  text-decoration: underline;
  text-decoration-color: rgba(48,65,255,0.30);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-decoration-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.article a:not(.button):not(.related-card):not(.internal-link):hover {
  text-decoration-color: var(--brand-primary);
}

.article strong { font-weight: 600; color: var(--brand-text-strong); }

.article ul, .article ol {
  margin: 0 0 1.5em;
  padding-left: 1.5em;
}

.article li { margin-bottom: 0.4em; }

.article blockquote {
  margin: 2em 0;
  padding-left: 24px;
  border-left: 3px solid var(--brand-primary);
  font-style: normal;
  color: var(--brand-text-medium);
  font-size: 17px;
  line-height: 1.5;
}

.article hr {
  border: none;
  border-top: 1px solid var(--brand-border);
  margin: 3em 0;
}

.article code {
  font-family: var(--brand-font-family-mono);
  font-size: 0.9em;
  background: var(--brand-surface);
  padding: 2px 6px;
}

/* ----- Tables (markdown body) ----- */

.article table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-family: var(--brand-font-family);
  font-size: 14px;
  line-height: 1.5;
  border-top: 1px solid var(--brand-text-strong);
  border-bottom: 1px solid var(--brand-rule);
}

.article thead {
  background: var(--brand-paper);
}

.article th {
  text-align: left;
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--brand-text-strong);
  padding: 12px 16px;
  border-bottom: 1px solid var(--brand-text-strong);
  white-space: nowrap;
  vertical-align: bottom;
}

.article td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--brand-rule);
  color: var(--brand-text-strong);
  vertical-align: top;
}

.article tbody tr:hover {
  background: var(--brand-paper);
}

.article tbody tr:last-child td { border-bottom: none; }

/* First column emphasis — e.g., "Type I", "THC" — looks like a row label */
.article tbody td:first-child {
  font-weight: 500;
  color: var(--brand-text-strong);
}

/* Numeric / tabular columns — apply via class="numeric" on <td> or hint with tabular-nums */
.article td[align="right"], .article th[align="right"] {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.article td[align="center"], .article th[align="center"] {
  text-align: center;
}

/* Responsive — wrap tables in a horizontal-scroll container on narrow viewports.
   Markdown produces a plain <table>, so we use a CSS-only trick: make the table
   block-scrollable on tight screens. */
@media (max-width: 600px) {
  .article table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }
  .article td { font-size: 13px; }
}

/* ----- 6. h2-section + h3 ----- */

.section-label {
  font-family: var(--brand-font-family-mono);
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-primary);
  margin: 0 0 12px;
  display: block;
}

.article h2 {
  font-family: var(--brand-font-family-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.6px;
  font-weight: 700;
  color: var(--brand-text-strong);
  margin: 2.5em 0 0.75em;
  scroll-margin-top: 100px;
}

.article h3 {
  font-family: var(--brand-font-family-display);
  font-size: clamp(22px, 2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.2px;
  font-weight: 700;
  color: var(--brand-text-strong);
  margin: 2em 0 0.5em;
  scroll-margin-top: 100px;
}

.article h4 {
  font-family: var(--brand-font-family-display);
  font-size: 20px;
  line-height: 1.3;
  font-weight: 600;
  margin: 1.5em 0 0.5em;
}

.h2-anchor {
  color: var(--brand-text-soft);
  text-decoration: none;
  margin-left: 12px;
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 400;
}

.article h2:hover .h2-anchor, .article h3:hover .h2-anchor { opacity: 1; }

/* ----- 7. faq-accordion ----- */

.faq {
  max-width: var(--brand-max-prose-width);
  margin: 64px auto 0;
  padding: 0 0 32px;
}

.faq-heading {
  font-family: var(--brand-font-family-display);
  font-size: 26px;
  line-height: 1.2;
  letter-spacing: -0.3px;
  font-weight: 700;
  margin: 0 0 32px;
}

.faq-list {
  border-top: 1px solid var(--brand-border);
}

.faq-item {
  border-bottom: 1px solid var(--brand-border);
}

.faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  text-align: left;
  padding: 22px 0;
  cursor: pointer;
  font-family: var(--brand-font-family);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--brand-text-strong);
  background: transparent;
  border: none;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-trigger:hover { color: var(--brand-primary); }

.faq-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  margin-top: 4px;
}

.faq-icon::before, .faq-icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-icon::before {
  top: 50%; left: 0; right: 0;
  height: 1.5px;
  transform: translateY(-50%);
}

.faq-icon::after {
  left: 50%; top: 0; bottom: 0;
  width: 1.5px;
  transform: translateX(-50%);
}

.faq-item[open] .faq-icon::after { transform: translateX(-50%) scaleY(0); }

.faq-answer {
  padding: 0 0 22px;
  font-family: var(--brand-font-family);
  font-size: 15px;
  line-height: 1.6;
  color: var(--brand-text-medium);
  max-width: 68ch;
}

.faq-answer p:first-child { margin-top: 0; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ----- 8. sources-list ----- */

.sources {
  max-width: var(--brand-max-prose-width);
  margin: 64px auto 0;
  padding: 32px;
  background: var(--brand-bg-alt);
}

.sources-heading {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-text-medium);
  margin: 0 0 24px;
}

.sources-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: source;
}

.sources-list li {
  display: grid;
  grid-template-columns: 24px auto 1fr;
  gap: 12px 16px;
  padding: 16px 0;
  border-top: 1px solid var(--brand-border);
  counter-increment: source;
  align-items: start;
}

.sources-list li:first-child { border-top: none; padding-top: 0; }
.sources-list li:last-child { padding-bottom: 0; }

.sources-list li::before {
  content: '[' counter(source) ']';
  font-family: var(--brand-font-family-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
}

.source-badge {
  font-family: var(--brand-font-family-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 8px;
  background: var(--brand-text-strong);
  color: var(--brand-bg);
  white-space: nowrap;
  align-self: start;
}

.source-badge.gov { background: var(--brand-primary); color: var(--brand-white); }
.source-badge.regulator { background: var(--brand-accent-sage); color: var(--brand-white); }
.source-badge.peer-review { background: var(--brand-text-strong); color: var(--brand-bg); }
.source-badge.industry { background: var(--brand-text-medium); color: var(--brand-white); }
.source-badge.news { background: var(--brand-surface-raised); color: var(--brand-text-strong); }

.source-content {
  font-family: var(--brand-font-family);
  font-size: 14px;
  line-height: 20px;
  color: var(--brand-text-strong);
}

.source-content a {
  color: var(--brand-text-strong);
  text-decoration: underline;
  text-decoration-color: rgba(10,10,11,0.20);
  text-underline-offset: 3px;
}

.source-content a:hover { text-decoration-color: var(--brand-primary); color: var(--brand-primary); }

.source-meta {
  color: var(--brand-text-soft);
  font-size: 13px;
  margin-top: 2px;
}

/* Inline citation superscript */
sup.citation {
  font-family: var(--brand-font-family-mono);
  font-size: 0.7em;
  color: var(--brand-primary);
  padding-left: 2px;
  font-weight: 500;
}

sup.citation a { color: inherit; text-decoration: none; }

/* ----- 9. related-rail ----- */

.related {
  background: var(--brand-bg-dark);
  color: var(--brand-text-on-dark);
  padding: 80px 0;
  margin-top: 96px;
}

.related-label {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-accent-lime);
  margin: 0 0 16px;
}

.related-heading {
  font-family: var(--brand-font-family-display);
  font-size: 40px;
  line-height: 44px;
  letter-spacing: -0.5px;
  font-weight: 700;
  margin: 0 0 48px;
  color: var(--brand-white);
  max-width: 20ch;
}

@media (max-width: 768px) {
  .related-heading { font-size: 28px; line-height: 32px; }
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--brand-dark-border, rgba(255,255,255,0.12));
  border: 1px solid var(--brand-dark-border, rgba(255,255,255,0.12));
}

@media (max-width: 900px) {
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .related-grid { grid-template-columns: 1fr; }
}

.related-card {
  background: var(--brand-bg-dark);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
  min-height: 200px;
}

.related-card:hover { background: var(--brand-dark-surface, rgba(255,255,255,0.06)); }

.related-card-type {
  font-family: var(--brand-font-family-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-accent-lime);
}

.related-card-title {
  font-family: var(--brand-font-family-display);
  font-size: 18px;
  line-height: 24px;
  font-weight: 700;
  color: var(--brand-white);
  margin: 0;
}

.related-card-arrow {
  margin-top: auto;
  font-family: var(--brand-font-family-mono);
  font-size: 16px;
  color: var(--brand-accent-lime);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.related-card:hover .related-card-arrow { transform: translateX(4px); }

/* ----- 10. jsonld-embed ----- */
/* No visible CSS — script tag in <head> */

/* ----- 11. quick-facts ----- */

.quick-facts {
  max-width: var(--brand-max-prose-width);
  margin: 0 auto 48px;
  background: var(--brand-bg-alt);
  border: 1px solid var(--brand-border);
}

.quick-facts-heading {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-text-medium);
  padding: 20px 24px 16px;
  margin: 0;
  border-bottom: 1px solid var(--brand-border);
}

.quick-facts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--brand-border);
}

@media (max-width: 600px) {
  .quick-facts-grid { grid-template-columns: 1fr; }
}

.quick-fact {
  background: var(--brand-bg-alt);
  padding: 18px 24px;
}

.quick-fact-label {
  font-family: var(--brand-font-family);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brand-text-soft);
  margin-bottom: 4px;
}

.quick-fact-value {
  font-family: var(--brand-font-family-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--brand-text-strong);
  line-height: 22px;
}

.quick-fact-value strong { font-weight: 700; }

/* ----- 12. internal-link-card ----- */

.internal-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: var(--brand-bg-alt);
  border-left: 3px solid var(--brand-primary);
  text-decoration: none;
  color: var(--brand-text-strong);
  margin: 2em 0;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.internal-link:hover {
  background: var(--brand-surface);
  transform: translateX(2px);
}

.internal-link-content { flex: 1; }

.internal-link-label {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-primary);
  margin-bottom: 4px;
}

.internal-link-title {
  font-family: var(--brand-font-family);
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}

.internal-link-arrow {
  font-family: var(--brand-font-family-mono);
  color: var(--brand-primary);
  font-size: 18px;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.internal-link:hover .internal-link-arrow { transform: translateX(4px); }

/* ----- 13. disclaimer-box ----- */

.disclaimer {
  max-width: var(--brand-max-prose-width);
  margin: 48px auto;
  padding: 20px 24px;
  background: var(--brand-surface);
  border-left: 3px solid var(--brand-text-medium);
  font-family: var(--brand-font-family);
  font-size: 14px;
  line-height: 22px;
  color: var(--brand-text-medium);
}

.disclaimer-heading {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-text-strong);
  margin: 0 0 8px;
}

.disclaimer p { margin: 0; }

/* ----- 14. stat-counter ----- */

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--brand-border);
  border: 1px solid var(--brand-border);
  margin: 48px 0;
  max-width: var(--brand-max-prose-width);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 600px) {
  .stats { grid-template-columns: 1fr; }
}

.stat {
  background: var(--brand-bg);
  padding: 32px 24px;
  text-align: left;
}

.stat-value {
  font-family: var(--brand-font-family-display);
  font-size: 48px;
  line-height: 1;
  font-weight: 700;
  color: var(--brand-primary);
  margin: 0 0 8px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -1px;
}

.stat-label {
  font-family: var(--brand-font-family-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-text-medium);
}

/* ----- 15. cannabinoid-bar (strain pages) ----- */

.cannabinoid {
  max-width: var(--brand-max-prose-width);
  margin: 32px auto;
  padding: 24px;
  background: var(--brand-bg-alt);
  border: 1px solid var(--brand-border);
}

.cannabinoid-row {
  display: grid;
  grid-template-columns: 80px 1fr 90px;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
}

.cannabinoid-row + .cannabinoid-row { border-top: 1px solid var(--brand-border); }

.cannabinoid-label {
  font-family: var(--brand-font-family-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text-strong);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.cannabinoid-track {
  position: relative;
  height: 10px;
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
}

.cannabinoid-fill {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  background: var(--brand-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* In-view scale animation — driven by the inline style="--target-scale: X" from the macro */
.cannabinoid-fill[data-animated] { transform: scaleX(var(--target-scale, 1)); }

.cannabinoid-fill.thc { background: var(--brand-primary); }
.cannabinoid-fill.cbd { background: var(--brand-accent-sage); }
.cannabinoid-fill.cbg { background: var(--brand-accent-lime); }

.cannabinoid-value {
  font-family: var(--brand-font-family-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text-strong);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ----- 16. terpene-wheel (strain pages) ----- */

.terpenes {
  max-width: var(--brand-max-prose-width);
  margin: 32px auto;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: center;
  padding: 24px;
  background: var(--brand-bg-alt);
  border: 1px solid var(--brand-border);
}

@media (max-width: 600px) {
  .terpenes { grid-template-columns: 1fr; justify-items: center; }
}

.terpene-wheel-svg { width: 100%; max-width: 200px; height: auto; }

.terpene-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.terpene-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--brand-font-family);
  font-size: 14px;
  color: var(--brand-text-strong);
}

.terpene-dot {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  border-radius: 50%;
}

.terpene-name {
  font-weight: 600;
  min-width: 110px;
}

.terpene-meta {
  color: var(--brand-text-medium);
  font-size: 13px;
}

/* ----- 17. dispensary-card (city pages) ----- */

.dispensaries {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 32px 0;
}

@media (max-width: 768px) {
  .dispensaries { grid-template-columns: 1fr; }
}

.dispensary {
  border: 1px solid var(--brand-border);
  padding: 24px;
  background: var(--brand-bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.dispensary:hover { border-color: var(--brand-text-strong); }

.dispensary-name {
  font-family: var(--brand-font-family-display);
  font-size: 22px;
  line-height: 26px;
  font-weight: 700;
  margin: 0;
  color: var(--brand-text-strong);
}

.dispensary-type {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-primary);
}

.dispensary-meta {
  font-family: var(--brand-font-family);
  font-size: 14px;
  line-height: 20px;
  color: var(--brand-text-medium);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dispensary-meta-item { display: flex; align-items: flex-start; gap: 8px; }

.dispensary-meta svg { width: 14px; height: 14px; margin-top: 3px; stroke: var(--brand-text-soft); flex-shrink: 0; }

.dispensary-license {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  color: var(--brand-text-soft);
  border-top: 1px solid var(--brand-border);
  padding-top: 12px;
  margin-top: auto;
}

/* ----- 18. product-line-grid (brand pages) ----- */

.product-lines {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--brand-border);
  border: 1px solid var(--brand-border);
  margin: 32px 0;
}

@media (max-width: 768px) {
  .product-lines { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .product-lines { grid-template-columns: 1fr; }
}

.product-line {
  background: var(--brand-bg);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-decoration: none;
  color: inherit;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.product-line:hover { background: var(--brand-bg-alt); }

.product-line-icon-wrap {
  width: 56px;
  height: 56px;
  background: var(--brand-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-line-icon-wrap svg { width: 28px; height: 28px; stroke: var(--brand-text-strong); }

.product-line-name {
  font-family: var(--brand-font-family-display);
  font-size: 20px;
  line-height: 24px;
  font-weight: 700;
  color: var(--brand-text-strong);
  margin: 0;
}

.product-line-desc {
  font-family: var(--brand-font-family);
  font-size: 14px;
  line-height: 20px;
  color: var(--brand-text-medium);
  margin: 0;
}

/* ----- 19. glossary-cross-link ----- */

.glossary-cross {
  max-width: var(--brand-max-prose-width);
  margin: 64px auto 0;
}

.glossary-cross-heading {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-text-medium);
  margin: 0 0 16px;
}

.glossary-cross-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--brand-border);
  border: 1px solid var(--brand-border);
}

@media (max-width: 600px) { .glossary-cross-grid { grid-template-columns: 1fr; } }

.glossary-cross-item {
  background: var(--brand-bg);
  padding: 16px;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.glossary-cross-item:hover { background: var(--brand-bg-alt); }

.glossary-cross-term {
  font-family: var(--brand-font-family);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-text-strong);
}

.glossary-cross-meaning {
  font-family: var(--brand-font-family);
  font-size: 12px;
  line-height: 16px;
  color: var(--brand-text-medium);
}

/* ----- Generic button (used by CTAs in various places) ----- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  font-family: var(--brand-font-family-mono);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: none;
}

.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }

.button-primary { background: var(--brand-bg-dark); color: var(--brand-white); }
.button-primary:hover { background: var(--brand-primary); }

.button-secondary {
  background: var(--brand-primary);
  color: var(--brand-white);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-family: var(--brand-font-family);
  font-weight: 600;
}

.button-arrow {
  display: inline-block;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.button:hover .button-arrow { transform: translateX(4px); }

/* =================================================================
   v2 — Botanical Editorial redesign
   Magazine-craft additions: centered hero with seal, pill breadcrumb,
   author byline, at-a-glance card, sticky TOC, floating CTA, pull quote,
   tip box, decorative section delineators, off-cream surface texture.
   ================================================================= */

/* LP DARK-FIRST overrides — these tokens are dark-theme-tuned for LP.
   The Herb engine uses warm-cream paper; LP uses raised-dark surfaces. */
:root {
  --brand-paper: #1f1e1d;          /* raised dark surface (was cream) */
  --brand-paper-warm: #262626;     /* charcoal raised */
  --brand-ink: #141516;            /* LP's signature near-black */
  --brand-rule: rgba(255, 255, 255, 0.10);
  --brand-rule-soft: rgba(255, 255, 255, 0.05);
}

/* ----- Hero v2: centered editorial ----- */

.hero-v2 {
  padding: 80px 0 64px;
  background: var(--brand-paper);
  position: relative;
  overflow: hidden;
}

/* Subtle dot-grid texture behind the hero — pure CSS, no images. */
.hero-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(10,10,11,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: 0 0;
  pointer-events: none;
  opacity: 0.6;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}

.hero-v2 .container {
  position: relative;
  z-index: 1;
}

.hero-meta-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 56px;
  font-family: var(--brand-font-family-mono);
  font-size: 12px;
  color: var(--brand-text-medium);
}

.hero-meta-bar-right {
  display: flex;
  gap: 24px;
  align-items: center;
}

.hero-meta-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hero-meta-bar-item svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}

/* Pill breadcrumb — replaces the plain /-separated one in the v2 hero */
.pill-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--brand-font-family-mono);
  font-size: 12px;
  color: var(--brand-text-medium);
}

.pill-breadcrumb-link {
  color: var(--brand-text-medium);
  text-decoration: none;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pill-breadcrumb-link:hover { color: var(--brand-primary); }

.pill-breadcrumb-current {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 12px;
  background: var(--brand-bg);
  border: 1px solid var(--brand-rule);
  color: var(--brand-text-strong);
  font-weight: 500;
}

.pill-breadcrumb-current svg {
  width: 13px;
  height: 13px;
  fill: var(--brand-primary);
}

.pill-breadcrumb-sep {
  color: var(--brand-text-soft);
}

/* Seal block + H1 */

.hero-seal-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 32px;
}

.hero-seal {
  margin-bottom: 24px;
  animation: seal-rotate 60s linear infinite;
}

@keyframes seal-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-seal { animation: none; }
}

.hero-h1-v2 {
  font-family: var(--brand-font-family-display);
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.05;
  letter-spacing: -1.4px;
  font-weight: 700;
  color: var(--brand-text-strong);
  margin: 0 auto 24px;
  max-width: 18ch;
  text-wrap: balance;
  word-break: break-word;
}

.hero-lead {
  font-family: var(--brand-font-family);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.55;
  color: var(--brand-text-medium);
  max-width: 56ch;
  margin: 0 auto 40px;
  text-align: center;
  text-wrap: pretty;
}

/* Author byline — circular avatar (SVG monogram) + name + credentials */

.bylines {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
  align-items: center;
}

.byline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.byline-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-white);
  font-family: var(--brand-font-family-mono);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.byline-avatar.sage { background: var(--brand-accent-sage); }
.byline-avatar.ink { background: var(--brand-ink); }

.byline-text {
  font-family: var(--brand-font-family);
  font-size: 13px;
  line-height: 1.3;
  color: var(--brand-text-medium);
}

.byline-name {
  color: var(--brand-text-strong);
  font-weight: 500;
}

.byline-role {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--brand-text-soft);
}

/* Decorative dotted rule — used as section delineator */

.dot-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 48px auto;
  max-width: var(--brand-max-prose-width);
  color: var(--brand-rule);
}

.dot-rule::before, .dot-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background-image: linear-gradient(to right, var(--brand-rule) 1px, transparent 1px);
  background-size: 6px 1px;
  background-repeat: repeat-x;
}

.dot-rule-mark {
  font-family: var(--brand-font-family-mono);
  font-size: 14px;
  color: var(--brand-primary);
  letter-spacing: 2px;
}

/* ----- At-a-Glance summary card ----- */

.glance {
  max-width: var(--brand-max-content-width);
  margin: -32px auto 96px;
  position: relative;
  z-index: 2;
}

.glance-card {
  background: var(--brand-bg);
  border: 1px solid var(--brand-rule);
  position: relative;
}

.glance-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  border-bottom: 1px solid var(--brand-rule);
}

.glance-title {
  font-family: var(--brand-font-family);
  font-size: 18px;
  font-weight: 600;
  color: var(--brand-text-strong);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.glance-title svg {
  width: 18px;
  height: 18px;
  stroke: var(--brand-primary);
}

.glance-count {
  font-family: var(--brand-font-family-mono);
  font-size: 12px;
  color: var(--brand-text-soft);
  letter-spacing: 0.5px;
}

.glance-rows {
  display: grid;
  grid-template-columns: 1fr;
}

.glance-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 18px 28px;
  border-top: 1px solid var(--brand-rule);
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.glance-row:first-child { border-top: none; }
.glance-row:hover { background: var(--brand-paper); }

.glance-num {
  font-family: var(--brand-font-family-mono);
  font-size: 13px;
  color: var(--brand-text-soft);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.glance-label {
  font-family: var(--brand-font-family);
  font-size: 14px;
  color: var(--brand-text-medium);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

.glance-value {
  font-family: var(--brand-font-family-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--brand-text-strong);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.glance-value-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--brand-primary);
  color: var(--brand-white);
}

.glance-value-pill.sage { background: var(--brand-accent-sage); }
.glance-value-pill.ink { background: var(--brand-ink); }

/* ----- Article layout with sticky TOC right rail ----- */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 64px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--brand-container-padding-x);
  align-items: start;
}

@media (max-width: 960px) {
  .article-layout { grid-template-columns: 1fr; }
  .article-layout .toc { display: none; }
}

.article-layout .article {
  max-width: none;
  padding: 0;
  margin: 0;
}

.toc {
  position: sticky;
  top: 100px;
  padding: 24px 0;
  font-family: var(--brand-font-family-mono);
  font-size: 12px;
}

.toc-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-text-soft);
  margin: 0 0 16px;
}

.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-left: 1px solid var(--brand-rule);
}

.toc-item a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0 8px 16px;
  color: var(--brand-text-medium);
  text-decoration: none;
  font-family: var(--brand-font-family);
  font-size: 13px;
  line-height: 1.4;
  border-left: 2px solid transparent;
  margin-left: -1px;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.toc-item a:hover {
  color: var(--brand-primary);
  border-left-color: var(--brand-primary);
}

.toc-item a.active {
  color: var(--brand-text-strong);
  border-left-color: var(--brand-primary);
  font-weight: 500;
}

.toc-item-num {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  color: var(--brand-text-soft);
  font-variant-numeric: tabular-nums;
}

/* ----- Section numbers in margin (decorative for H2s) ----- */

.article h2 {
  position: relative;
}

.article h2 .h2-num {
  position: absolute;
  left: -64px;
  top: 18px;
  font-family: var(--brand-font-family-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--brand-text-soft);
  letter-spacing: 1px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .article h2 .h2-num { position: static; display: block; margin-bottom: 8px; }
}

/* ----- Pull quote ----- */

.pull-quote {
  margin: 56px 0;
  padding: 24px 0;
  border-top: 1px solid var(--brand-rule);
  border-bottom: 1px solid var(--brand-rule);
  font-family: var(--brand-font-family-display);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.4px;
  font-weight: 500;
  color: var(--brand-text-strong);
  text-wrap: balance;
}

.pull-quote::before {
  content: '"';
  font-size: 1.2em;
  line-height: 0;
  color: var(--brand-primary);
  margin-right: 0.1em;
  vertical-align: -0.15em;
}

.pull-quote-cite {
  display: block;
  margin-top: 20px;
  font-family: var(--brand-font-family-mono);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-text-medium);
}

/* ----- Tip / callout box ----- */

.tip {
  margin: 40px 0;
  padding: 24px 28px;
  background: var(--brand-paper);
  border-left: 3px solid var(--brand-primary);
}

.tip-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-primary);
  margin-bottom: 8px;
}

.tip-label::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--brand-primary);
  border-radius: 50%;
}

.tip p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--brand-text-strong); }

/* ----- Floating CTA pill at bottom ----- */

.floating-cta {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--brand-bg-dark);
  color: var(--brand-white);
  font-family: var(--brand-font-family-mono);
  font-size: 13px;
  font-weight: 500;
  padding: 0;
  box-shadow: 0 8px 32px rgba(10, 10, 11, 0.18);
  z-index: 50;
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1), opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-cta-prompt {
  padding: 12px 20px 12px 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--brand-dark-text-medium, rgba(255,255,255,0.70));
}

.floating-cta-prompt::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--brand-accent-lime);
  border-radius: 50%;
}

.floating-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: var(--brand-primary);
  color: var(--brand-white);
  text-decoration: none;
  border-left: 1px solid var(--brand-dark-border, rgba(255,255,255,0.18));
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.floating-cta-button:hover { background: var(--brand-text-strong); }

@media (max-width: 600px) {
  .floating-cta { font-size: 12px; max-width: calc(100vw - 32px); }
  .floating-cta-prompt { padding-left: 14px; }
}

/* ----- Quality-tagged source rows (refined) ----- */
/* (already mostly styled, this is just chevron + hover) */

.sources-list a:hover {
  color: var(--brand-primary);
  text-decoration-color: var(--brand-primary);
}

/* ----- Verified badge ----- */

.verified-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: rgba(58, 138, 82, 0.10);
  color: var(--brand-success);
  border: 1px solid rgba(58, 138, 82, 0.25);
}

.verified-badge svg {
  width: 12px;
  height: 12px;
  stroke: var(--brand-success);
}

/* ----- Updated badge ----- */

.updated-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  letter-spacing: 0.5px;
  color: var(--brand-text-medium);
}

.updated-badge svg { width: 12px; height: 12px; stroke: currentColor; }

/* =================================================================
   v3 — Dynamic widget library
   timeline · stat_banner · chip_cloud · comparison_grid · process_steps · callout_card
   Plus inline featured-link, stat-block, status-legend, fact-grid.
   ================================================================= */

/* ----- Stat banner (3-up big-number row) ----- */

.stat-banner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 56px 0;
  border-top: 1px solid var(--brand-text-strong);
  border-bottom: 1px solid var(--brand-text-strong);
}

@media (max-width: 640px) {
  .stat-banner { grid-template-columns: 1fr; }
}

.stat-banner-item {
  padding: 32px 28px;
  border-left: 1px solid var(--brand-rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stat-banner-item:first-child { border-left: none; }

@media (max-width: 640px) {
  .stat-banner-item { border-left: none; border-top: 1px solid var(--brand-rule); padding: 24px 0; }
  .stat-banner-item:first-child { border-top: none; }
}

.stat-banner-label {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-text-medium);
}

.stat-banner-value {
  font-family: var(--brand-font-family-display);
  font-size: 44px;
  line-height: 1;
  letter-spacing: -1.5px;
  font-weight: 700;
  color: var(--brand-text-strong);
  font-variant-numeric: tabular-nums;
}

.stat-banner-value .unit {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.5px;
  margin-left: 2px;
  color: var(--brand-text-medium);
}

.stat-banner-detail {
  font-family: var(--brand-font-family);
  font-size: 13px;
  line-height: 1.4;
  color: var(--brand-text-medium);
}

/* ----- Timeline (vertical, ribbon-style) ----- */

.timeline {
  margin: 56px 0;
  position: relative;
  padding-left: 32px;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 9px;
  width: 1px;
  background: var(--brand-rule);
}

.timeline-event {
  position: relative;
  padding-bottom: 28px;
  padding-left: 24px;
}

.timeline-event:last-child { padding-bottom: 0; }

.timeline-event::before {
  content: '';
  position: absolute;
  left: -27px;
  top: 6px;
  width: 12px;
  height: 12px;
  background: var(--brand-primary);
  border: 3px solid var(--brand-bg);
  z-index: 1;
  border-radius: 50%;
}

.timeline-event.muted::before { background: var(--brand-text-medium); }
.timeline-event.sage::before { background: var(--brand-accent-sage); }

.timeline-date {
  font-family: var(--brand-font-family-mono);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-primary);
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}

.timeline-title {
  font-family: var(--brand-font-family);
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-text-strong);
  margin: 0 0 4px;
  line-height: 1.3;
}

.timeline-detail {
  font-family: var(--brand-font-family);
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-text-medium);
  margin: 0;
  max-width: 56ch;
}

.timeline-label {
  font-family: var(--brand-font-family-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-text-soft);
  margin-bottom: 12px;
  display: block;
}

/* ----- Chip cloud (effects, tags, conditions) ----- */

.chip-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0;
}

.chip-cloud-heading {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-text-soft);
  margin: 0 0 12px;
  width: 100%;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--brand-bg);
  border: 1px solid var(--brand-rule);
  font-family: var(--brand-font-family);
  font-size: 13px;
  color: var(--brand-text-strong);
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.chip:hover { border-color: var(--brand-text-strong); background: var(--brand-paper); }

.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
}

.chip.primary { background: var(--brand-primary); color: var(--brand-white); border-color: var(--brand-primary); }
.chip.primary .chip-dot { background: var(--brand-white); }
.chip.sage { background: var(--brand-accent-sage); color: var(--brand-white); border-color: var(--brand-accent-sage); }
.chip.sage .chip-dot { background: var(--brand-white); }
.chip.ink { background: var(--brand-bg-dark); color: var(--brand-white); border-color: var(--brand-bg-dark); }
.chip.ink .chip-dot { background: var(--brand-accent-lime); }
.chip.warm { background: var(--brand-paper); border-color: var(--brand-rule); }

/* ----- Comparison grid (3-up cards side-by-side) ----- */

.compare {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--brand-rule);
  border: 1px solid var(--brand-rule);
  margin: 48px 0;
}

@media (max-width: 768px) { .compare { grid-template-columns: 1fr; } }

.compare-card {
  background: var(--brand-bg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.compare-card.featured {
  background: var(--brand-paper);
  position: relative;
}

.compare-card.featured::before {
  content: 'Most common';
  position: absolute;
  top: -10px;
  left: 28px;
  background: var(--brand-primary);
  color: var(--brand-white);
  font-family: var(--brand-font-family-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 4px 10px;
}

.compare-card-label {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-primary);
}

.compare-card-name {
  font-family: var(--brand-font-family-display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--brand-text-strong);
  margin: 0;
  letter-spacing: -0.2px;
}

.compare-card-desc {
  font-family: var(--brand-font-family);
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand-text-medium);
  margin: 0;
}

.compare-card-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--brand-rule);
}

.compare-card-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--brand-font-family);
  font-size: 13px;
}

.compare-card-stat-label {
  color: var(--brand-text-medium);
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.compare-card-stat-value {
  color: var(--brand-text-strong);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ----- Process steps (numbered cards) ----- */

.steps {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 48px 0;
}

@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }

.step {
  padding: 24px 28px 28px;
  background: var(--brand-bg);
  border: 1px solid var(--brand-rule);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

.step-num {
  font-family: var(--brand-font-family-display);
  font-size: 28px;
  line-height: 1;
  font-weight: 700;
  color: var(--brand-primary);
  font-variant-numeric: tabular-nums;
  margin-bottom: 8px;
  letter-spacing: -1px;
}

.step-num .of {
  font-size: 12px;
  color: var(--brand-text-soft);
  font-weight: 500;
  letter-spacing: 0;
  margin-left: 4px;
}

.step-title {
  font-family: var(--brand-font-family);
  font-size: 16px;
  font-weight: 600;
  color: var(--brand-text-strong);
  margin: 0;
  line-height: 1.3;
}

.step-detail {
  font-family: var(--brand-font-family);
  font-size: 13px;
  line-height: 1.55;
  color: var(--brand-text-medium);
  margin: 0;
}

/* ----- Callout card (full-width inline CTA card) ----- */

.callout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  margin: 48px 0;
  background: var(--brand-bg-dark);
  color: var(--brand-white);
  position: relative;
  overflow: hidden;
}

.callout.lime { background: var(--brand-accent-lime); color: var(--brand-text-strong); }
.callout.sage { background: var(--brand-accent-sage); color: var(--brand-white); }
.callout.paper { background: var(--brand-paper); color: var(--brand-text-strong); border: 1px solid var(--brand-rule); }

@media (max-width: 700px) {
  .callout { grid-template-columns: 1fr; text-align: left; }
}

.callout-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}

.callout.lime .callout-icon, .callout.paper .callout-icon { background: rgba(10,10,11,0.06); }

.callout-icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
}

.callout-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.callout-label {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-accent-lime);
  opacity: 0.85;
}

.callout.lime .callout-label, .callout.paper .callout-label { color: var(--brand-primary); }
.callout.sage .callout-label { color: var(--brand-accent-lime); }

.callout-title {
  font-family: var(--brand-font-family-display);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 700;
  color: inherit;
  margin: 0;
  letter-spacing: -0.3px;
}

.callout-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--brand-bg);
  color: var(--brand-text-strong);
  font-family: var(--brand-font-family-mono);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

.callout.lime .callout-cta { background: var(--brand-bg-dark); color: var(--brand-white); }
.callout.paper .callout-cta { background: var(--brand-primary); color: var(--brand-white); }

.callout-cta:hover { transform: translateX(2px); }

/* ----- Inline featured link card (with optional thumbnail) ----- */

.feature-link {
  display: grid;
  grid-template-columns: 120px 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 16px;
  margin: 32px 0;
  background: var(--brand-paper);
  border: 1px solid var(--brand-rule);
  text-decoration: none;
  color: var(--brand-text-strong);
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 600px) {
  .feature-link { grid-template-columns: 1fr; }
  .feature-link-thumb { display: none; }
}

.feature-link:hover { border-color: var(--brand-text-strong); transform: translateY(-1px); }

.feature-link-thumb {
  width: 120px;
  aspect-ratio: 4/3;
  background: var(--brand-surface);
  overflow: hidden;
}

.feature-link-thumb img { width: 100%; height: 100%; object-fit: cover; }

.feature-link-label {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--brand-primary);
  margin-bottom: 4px;
}

.feature-link-title {
  font-family: var(--brand-font-family);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 4px;
}

.feature-link-meta {
  font-family: var(--brand-font-family);
  font-size: 13px;
  color: var(--brand-text-medium);
  margin: 0;
}

.feature-link-arrow {
  font-family: var(--brand-font-family-mono);
  font-size: 18px;
  color: var(--brand-primary);
}

/* ----- Status legend (legal/illegal/decrim/etc) ----- */

.status-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 16px 0;
}

.status-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--brand-font-family-mono);
  font-size: 12px;
  color: var(--brand-text-medium);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-text-medium);
}

.status-dot.legal { background: var(--brand-success); }
.status-dot.medical-only { background: var(--brand-primary); }
.status-dot.decrim { background: var(--brand-warning); }
.status-dot.illegal { background: var(--brand-error); }

/* ----- Stat block (single big stat inline) ----- */

.stat-block {
  margin: 32px 0;
  padding: 24px 0;
  border-top: 1px solid var(--brand-rule);
  border-bottom: 1px solid var(--brand-rule);
}

.stat-block-value {
  font-family: var(--brand-font-family-display);
  font-size: 56px;
  line-height: 1;
  font-weight: 700;
  color: var(--brand-primary);
  letter-spacing: -2px;
  font-variant-numeric: tabular-nums;
}

.stat-block-detail {
  font-family: var(--brand-font-family);
  font-size: 14px;
  color: var(--brand-text-medium);
  margin-top: 8px;
  line-height: 1.5;
}

/* ----- Section separator with mono label ----- */

.section-rule {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 64px 0 32px;
}

.section-rule::before, .section-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--brand-rule);
}

.section-rule-text {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--brand-text-soft);
}

/* ----- Print styles ----- */

@media print {
  .nav, .footer, .related, .button { display: none; }
  body { color: var(--brand-text-strong); background: var(--brand-bg); }
  a { color: var(--brand-text-strong); text-decoration: underline; }
  .article { max-width: none; }
}

/* =================================================================
   LP-specific overrides — gold accent, dark surfaces, premium feel
   ================================================================= */

/* Promo bar — gold instead of lime */
.promo-bar { background: var(--brand-gold); color: var(--brand-ink); }
.promo-bar-cta { background: var(--brand-ink); color: var(--brand-white); }
.promo-bar-cta:hover { background: var(--brand-charcoal); }

/* Nav — dark with white text */
.nav { background: var(--brand-ink); border-bottom: 1px solid var(--brand-rule); }
.nav-link { color: var(--brand-white); font-weight: 500; }
.nav-link:hover { color: var(--brand-gold); }
.nav-link::after { background: var(--brand-gold); }
.nav-cta { background: var(--brand-gold); color: var(--brand-ink); font-weight: 600; }
.nav-cta:hover { background: var(--brand-gold-soft); transform: translateY(-1px); }

/* Skip link — gold */
.skip-link { background: var(--brand-gold); color: var(--brand-ink); }

/* Body + html surfaces */
html, body { background-color: var(--brand-ink); color: var(--brand-text-strong); }
::selection { background: var(--brand-gold); color: var(--brand-ink); }

/* Article inline links — gold underline */
.article a:not(.button):not(.related-card):not(.internal-link) {
  color: var(--brand-gold);
  text-decoration-color: rgba(238, 183, 93, 0.4);
}
.article a:not(.button):not(.related-card):not(.internal-link):hover {
  text-decoration-color: var(--brand-gold);
}

/* Section labels in gold */
.section-label { color: var(--brand-gold); }

/* Hero — dark surface (was cream paper for Herb) */
.hero-v2 { background: var(--brand-ink); }
.hero-v2::before {
  background-image: radial-gradient(circle, rgba(238, 183, 93, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: 0.7;
}

/* Hero typography — light text on dark */
.hero-h1-v2 { color: var(--brand-white); }
.hero-lead { color: var(--brand-text-medium); }
.hero-meta-bar { color: var(--brand-text-medium); }
.hero-meta-bar svg { stroke: var(--brand-text-medium); }

/* Pill breadcrumb — dark surface */
.pill-breadcrumb { color: var(--brand-text-medium); }
.pill-breadcrumb-link { color: var(--brand-text-medium); }
.pill-breadcrumb-link:hover { color: var(--brand-gold); }
.pill-breadcrumb-current {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--brand-rule);
  color: var(--brand-white);
}
.pill-breadcrumb-current svg { fill: var(--brand-gold); }

/* Glance card — dark raised surface */
.glance-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--brand-rule);
}
.glance-header { border-bottom: 1px solid var(--brand-rule); }
.glance-title { color: var(--brand-white); }
.glance-title svg { stroke: var(--brand-gold); }
.glance-row { border-top: 1px solid var(--brand-rule); }
.glance-row:hover { background: rgba(255,255,255,0.04); }
.glance-label { color: var(--brand-text-medium); }
.glance-value { color: var(--brand-white); }
.glance-num { color: var(--brand-text-soft); }
.glance-value-pill { background: var(--brand-gold); color: var(--brand-ink); }
.glance-value-pill.sage { background: var(--brand-accent-sage, #617556); color: var(--brand-white); }
.glance-value-pill.ink { background: rgba(255,255,255,0.10); color: var(--brand-white); }

/* Article body — silver text on dark */
.article { color: var(--brand-silver); }
.article strong { color: var(--brand-white); }
.article h2, .article h3, .article h4 { color: var(--brand-white); }
.article h2 .h2-num { color: var(--brand-gold); opacity: 0.7; }
.article blockquote { border-left-color: var(--brand-gold); color: var(--brand-text-medium); }

/* Tables on dark */
.article table { border-top-color: var(--brand-white); border-bottom-color: var(--brand-rule); }
.article thead { background: rgba(255,255,255,0.04); }
.article th { color: var(--brand-white); border-bottom-color: var(--brand-white); }
.article td { color: var(--brand-silver); border-bottom-color: var(--brand-rule); }
.article tbody tr:hover { background: rgba(255,255,255,0.04); }
.article tbody td:first-child { color: var(--brand-white); }

/* Quick facts on dark */
.quick-facts { background: rgba(255,255,255,0.04); border-color: var(--brand-rule); }
.quick-facts-heading { color: var(--brand-text-medium); border-bottom-color: var(--brand-rule); }
.quick-facts-grid { background: var(--brand-rule); }
.quick-fact { background: var(--brand-ink); }
.quick-fact-label { color: var(--brand-text-soft); }
.quick-fact-value { color: var(--brand-white); }

/* FAQ on dark */
.faq-heading { color: var(--brand-white); }
.faq-list { border-top-color: var(--brand-rule); }
.faq-item { border-bottom-color: var(--brand-rule); }
.faq-trigger { color: var(--brand-white); }
.faq-trigger:hover { color: var(--brand-gold); }
.faq-answer { color: var(--brand-text-medium); }

/* Sources on dark */
.sources { background: rgba(255,255,255,0.04); }
.sources-heading { color: var(--brand-text-medium); }
.sources-list li { border-top-color: var(--brand-rule); }
.sources-list li::before { color: var(--brand-gold); }
.source-content { color: var(--brand-white); }
.source-content a { color: var(--brand-white); }
.source-content a:hover { color: var(--brand-gold); text-decoration-color: var(--brand-gold); }
.source-meta { color: var(--brand-text-soft); }
.source-badge { background: var(--brand-gold); color: var(--brand-ink); }
.source-badge.gov, .source-badge.official, .source-badge.primary { background: var(--brand-gold); color: var(--brand-ink); }
.source-badge.industry, .source-badge.news { background: rgba(255,255,255,0.10); color: var(--brand-white); }

/* Pull quote on dark */
.pull-quote { border-top-color: var(--brand-rule); border-bottom-color: var(--brand-rule); color: var(--brand-white); }
.pull-quote::before { color: var(--brand-gold); }
.pull-quote-cite { color: var(--brand-text-medium); }

/* Tip box on dark */
.tip { background: rgba(238, 183, 93, 0.08); border-left-color: var(--brand-gold); }
.tip-label { color: var(--brand-gold); }
.tip-label::before { background: var(--brand-gold); }
.tip p { color: var(--brand-white); }

/* Floating CTA — keep dark, swap blue accent for gold */
.floating-cta { background: var(--brand-ink); border: 1px solid var(--brand-rule); }
.floating-cta-prompt::before { background: var(--brand-gold); }
.floating-cta-button { background: var(--brand-gold); color: var(--brand-ink); }
.floating-cta-button:hover { background: var(--brand-gold-soft); }

/* Author bylines — adapt to dark */
.byline-avatar { background: var(--brand-gold); color: var(--brand-ink); font-weight: 600; }
.byline-avatar.sage { background: var(--brand-charcoal); color: var(--brand-white); }
.byline-avatar.ink { background: rgba(255,255,255,0.10); color: var(--brand-white); }
.byline-name { color: var(--brand-white); }
.byline-text { color: var(--brand-text-medium); }
.byline-role { color: var(--brand-text-soft); }

/* TOC on dark */
.toc-title { color: var(--brand-text-soft); }
.toc-list { border-left-color: var(--brand-rule); }
.toc-item a { color: var(--brand-text-medium); }
.toc-item a:hover { color: var(--brand-gold); border-left-color: var(--brand-gold); }
.toc-item a.active { color: var(--brand-white); border-left-color: var(--brand-gold); }
.toc-item-num { color: var(--brand-text-soft); }

/* Stat banner on dark */
.stat-banner { border-top-color: var(--brand-white); border-bottom-color: var(--brand-white); }
.stat-banner-item { border-left-color: var(--brand-rule); }
.stat-banner-label { color: var(--brand-text-medium); }
.stat-banner-value { color: var(--brand-white); }
.stat-banner-value .unit { color: var(--brand-gold); }
.stat-banner-detail { color: var(--brand-text-medium); }

/* Timeline on dark */
.timeline::before { background: var(--brand-rule); }
.timeline-event::before { background: var(--brand-gold); border-color: var(--brand-ink); }
.timeline-event.muted::before { background: var(--brand-text-medium); }
.timeline-date { color: var(--brand-gold); }
.timeline-title { color: var(--brand-white); }
.timeline-detail { color: var(--brand-text-medium); }
.timeline-label { color: var(--brand-text-soft); }

/* Chip cloud on dark */
.chip-cloud-heading { color: var(--brand-text-soft); }
.chip { background: rgba(255,255,255,0.04); border-color: var(--brand-rule); color: var(--brand-white); }
.chip:hover { border-color: var(--brand-gold); background: rgba(238,183,93,0.08); }
.chip-dot { background: var(--brand-gold); }
.chip.primary { background: var(--brand-gold); color: var(--brand-ink); border-color: var(--brand-gold); }
.chip.primary .chip-dot { background: var(--brand-ink); }
.chip.sage { background: var(--brand-charcoal); color: var(--brand-white); border-color: var(--brand-charcoal); }
.chip.ink { background: var(--brand-black); color: var(--brand-gold); border-color: var(--brand-rule); }
.chip.ink .chip-dot { background: var(--brand-gold); }
.chip.warm { background: rgba(255,255,255,0.06); border-color: var(--brand-rule); }

/* Comparison grid on dark */
.compare { background: var(--brand-rule); border-color: var(--brand-rule); }
.compare-card { background: var(--brand-ink); }
.compare-card.featured { background: rgba(238,183,93,0.06); }
.compare-card.featured::before { background: var(--brand-gold); color: var(--brand-ink); }
.compare-card-label { color: var(--brand-gold); }
.compare-card-name { color: var(--brand-white); }
.compare-card-desc { color: var(--brand-text-medium); }
.compare-card-stats { border-top-color: var(--brand-rule); }
.compare-card-stat-label { color: var(--brand-text-medium); }
.compare-card-stat-value { color: var(--brand-white); }

/* Steps on dark */
.step { background: rgba(255,255,255,0.03); border-color: var(--brand-rule); }
.step-num { color: var(--brand-gold); }
.step-num .of { color: var(--brand-text-soft); }
.step-title { color: var(--brand-white); }
.step-detail { color: var(--brand-text-medium); }

/* Callout variants on dark */
.callout.ink { background: rgba(255,255,255,0.04); color: var(--brand-white); border: 1px solid var(--brand-rule); }
.callout.ink .callout-label { color: var(--brand-gold); }
.callout.ink .callout-icon { background: rgba(238, 183, 93, 0.12); }
.callout.ink .callout-cta { background: var(--brand-gold); color: var(--brand-ink); }
.callout.ink .callout-cta:hover { background: var(--brand-gold-soft); }
.callout.lime { background: var(--brand-gold); color: var(--brand-ink); }
.callout.lime .callout-cta { background: var(--brand-ink); color: var(--brand-white); }
.callout.sage { background: var(--brand-charcoal); color: var(--brand-white); }
.callout.sage .callout-label { color: var(--brand-gold); }
.callout.sage .callout-cta { background: var(--brand-gold); color: var(--brand-ink); }
.callout.paper { background: rgba(255,255,255,0.06); color: var(--brand-white); border-color: var(--brand-rule); }
.callout.paper .callout-label { color: var(--brand-gold); }
.callout.paper .callout-icon { background: rgba(238, 183, 93, 0.12); }
.callout.paper .callout-cta { background: var(--brand-gold); color: var(--brand-ink); }
.callout-title { color: inherit; }

/* Feature link on dark */
.feature-link { background: rgba(255,255,255,0.04); border-color: var(--brand-rule); color: var(--brand-white); }
.feature-link:hover { border-color: var(--brand-gold); }
.feature-link-thumb { background: rgba(255,255,255,0.08); }
.feature-link-label { color: var(--brand-gold); }
.feature-link-title { color: var(--brand-white); }
.feature-link-meta { color: var(--brand-text-medium); }
.feature-link-arrow { color: var(--brand-gold); }

/* Stat block + section rule + status legend on dark */
.stat-block { border-top-color: var(--brand-rule); border-bottom-color: var(--brand-rule); }
.stat-block-value { color: var(--brand-gold); }
.stat-block-detail { color: var(--brand-text-medium); }
.section-rule::before, .section-rule::after { background: var(--brand-rule); }
.section-rule-text { color: var(--brand-text-soft); }
.status-item { color: var(--brand-text-medium); }

/* Verified + updated badges on dark */
.verified-badge { background: rgba(238,183,93,0.10); border-color: rgba(238,183,93,0.30); color: var(--brand-gold); }
.verified-badge svg { stroke: var(--brand-gold); }
.updated-badge { color: var(--brand-text-medium); }

/* Internal link card */
.internal-link { background: rgba(255,255,255,0.04); border-left-color: var(--brand-gold); color: var(--brand-white); }
.internal-link:hover { background: rgba(255,255,255,0.07); }
.internal-link-label { color: var(--brand-gold); }
.internal-link-arrow { color: var(--brand-gold); }

/* Disclaimer */
.disclaimer { background: rgba(255,255,255,0.04); border-left-color: var(--brand-text-medium); color: var(--brand-text-medium); }
.disclaimer-heading { color: var(--brand-white); }

/* Dot rule */
.dot-rule { color: var(--brand-rule); }
.dot-rule::before, .dot-rule::after {
  background-image: linear-gradient(to right, var(--brand-rule) 1px, transparent 1px);
}
.dot-rule-mark { color: var(--brand-gold); }

/* Related rail — already dark by default; tune lime accents to gold */
.related-label { color: var(--brand-gold); }
.related-card-type { color: var(--brand-gold); }
.related-card-arrow { color: var(--brand-gold); }

/* Footer column titles in gold */
.footer-col-title { color: var(--brand-gold); }

/* Glossary cross link on dark */
.glossary-cross-heading { color: var(--brand-text-soft); }
.glossary-cross-grid { background: var(--brand-rule); border-color: var(--brand-rule); }
.glossary-cross-item { background: var(--brand-ink); color: var(--brand-white); }
.glossary-cross-item:hover { background: rgba(255,255,255,0.04); }
.glossary-cross-term { color: var(--brand-white); }
.glossary-cross-meaning { color: var(--brand-text-medium); }

/* =================================================================
   LP v4 — Lead-magnet inspired widgets
   agent_quote · case_study · lead_leak_donut · comparison_matrix
   ================================================================= */

/* ----- agent_quote (testimonial card with serif italic) ----- */
.agent-quote {
  max-width: var(--brand-max-prose-width);
  margin: 56px 0;
  padding: 48px 40px;
  background: var(--brand-cream, #F1EFEB);
  border: 1px solid rgba(20,21,22,0.10);
  border-radius: 8px;
  color: #262626;
  position: relative;
}
.agent-quote-eb {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #262626;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.agent-quote-eb::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--brand-gold);
  border-radius: 999px;
}
.agent-quote-text {
  font-family: "Cormorant Garamond", "Juana W05 Light", Georgia, serif;
  font-size: 28px;
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: #141516;
}
.agent-quote-text::before {
  content: '\201C';
  font-size: 64px;
  color: var(--brand-gold);
  line-height: 0.4;
  display: inline;
  margin-right: 4px;
  vertical-align: -0.2em;
  font-style: normal;
}
.agent-quote-attrib {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(20,21,22,0.10);
  display: flex;
  align-items: center;
  gap: 16px;
}
.agent-quote-avatar {
  width: 52px; height: 52px;
  border-radius: 999px;
  background: var(--brand-ink);
  color: var(--brand-gold);
  display: flex; align-items: center; justify-content: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 20px; font-weight: 500;
  flex-shrink: 0;
}
.agent-quote-who {
  font-family: var(--brand-font-family);
  font-size: 14px; font-weight: 500;
  color: #141516;
  letter-spacing: -0.005em;
}
.agent-quote-role {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  color: #4A4A4A;
  margin-top: 2px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ----- case_study (dark header + light body w/ metrics) ----- */
.case-study {
  max-width: var(--brand-max-content-width);
  margin: 64px 0;
  background: #FAF9F5;
  border: 1px solid rgba(20,21,22,0.10);
  border-radius: 8px;
  overflow: hidden;
  color: #262626;
}
.case-study-header {
  background: var(--brand-ink);
  color: var(--brand-white);
  padding: 32px 36px;
}
.case-study-eb {
  font-family: var(--brand-font-family-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-gold);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.case-study-eb::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--brand-gold);
  border-radius: 999px;
}
.case-study-client {
  font-family: "Cormorant Garamond", serif;
  font-size: 32px; font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--brand-white);
  line-height: 1.15;
}
.case-study-market {
  font-size: 13px; color: var(--brand-silver, #bbb);
  margin-top: 6px; letter-spacing: 0.04em;
  font-family: var(--brand-font-family);
}
.case-study-body { padding: 36px; }
.case-study-outcome {
  font-family: var(--brand-font-family);
  font-size: 24px; line-height: 1.25; letter-spacing: -0.015em;
  color: #141516; font-weight: 500; margin-bottom: 24px;
}
.case-study-outcome .serif {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  color: var(--brand-gold);
}
.case-study-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(20,21,22,0.10);
  border-bottom: 1px solid rgba(20,21,22,0.10);
  margin-bottom: 24px;
}
.case-study-metric {
  padding: 24px 16px;
  border-right: 1px solid rgba(20,21,22,0.10);
}
.case-study-metric:last-child { border-right: none; }
.case-study-metric-num {
  font-family: var(--brand-font-family);
  font-size: 32px; font-weight: 500;
  letter-spacing: -0.025em; line-height: 1;
  color: #141516;
}
.case-study-metric-lbl {
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  color: #8A8A8A;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 10px; line-height: 1.4;
}
.case-study-body-p {
  font-family: var(--brand-font-family);
  font-size: 14px; line-height: 1.6;
  color: #4A4A4A; margin-bottom: 20px;
}
.case-study-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--brand-font-family);
  font-size: 13px; font-weight: 500;
  padding: 13px 22px;
  border-radius: 4px;
  background: var(--brand-gold); color: var(--brand-ink);
  text-decoration: none;
  transition: background 160ms ease;
}
.case-study-cta:hover { background: var(--brand-gold-soft); }
@media (max-width:560px) {
  .case-study-metrics { grid-template-columns: 1fr; }
  .case-study-metric { border-right: none; border-bottom: 1px solid rgba(20,21,22,0.10); }
  .case-study-metric:last-child { border-bottom: none; }
  .case-study-client { font-size: 24px; }
}

/* ----- lead_leak_donut (SVG donut + legend) ----- */
.lead-donut {
  max-width: var(--brand-max-content-width);
  margin: 56px 0;
  padding: 36px;
  background: var(--brand-ink);
  border-radius: 8px;
  color: var(--brand-white);
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 700px) {
  .lead-donut { grid-template-columns: 1fr; }
}
.lead-donut-eb {
  font-family: var(--brand-font-family-mono);
  font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--brand-gold);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.lead-donut-eb::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--brand-gold);
  border-radius: 999px;
}
.lead-donut-h {
  font-family: var(--brand-font-family);
  font-size: 22px; line-height: 1.3; font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--brand-white);
  margin-bottom: 8px;
}
.lead-donut-p {
  font-family: var(--brand-font-family);
  font-size: 14px; color: var(--brand-silver, #bbb);
  margin-bottom: 0; line-height: 1.6;
}
.lead-donut-svg {
  width: 100%; height: auto; max-width: 240px;
  margin: 0 auto;
}
.lead-donut-svg text.center {
  font-family: var(--brand-font-family);
  font-size: 18px; font-weight: 500;
  fill: var(--brand-white);
  text-anchor: middle; dominant-baseline: middle;
  letter-spacing: -0.02em;
}
.lead-donut-svg text.center-lbl {
  font-family: var(--brand-font-family-mono);
  font-size: 6px; fill: var(--brand-silver, #bbb);
  text-anchor: middle; dominant-baseline: middle;
  letter-spacing: 0.1em; text-transform: uppercase;
}
.lead-donut-legend {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 16px;
  font-family: var(--brand-font-family);
  font-size: 13px;
  color: var(--brand-white);
}
.lead-donut-legend-row {
  display: grid; grid-template-columns: 14px 1fr auto;
  align-items: center; gap: 10px;
}
.lead-donut-legend-sw {
  width: 12px; height: 12px;
  border-radius: 2px;
}
.lead-donut-legend-pct {
  font-family: var(--brand-font-family-mono);
  font-size: 12px;
  color: var(--brand-silver, #bbb);
  font-variant-numeric: tabular-nums;
}

/* ----- comparison_matrix (dense feature matrix) ----- */
.matrix-wrap {
  max-width: var(--brand-max-content-width);
  margin: 56px 0;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
}
.matrix-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--brand-font-family);
  font-size: 13px;
  background: rgba(255,255,255,0.03);
  color: var(--brand-white);
}
.matrix-table thead {
  background: rgba(255,255,255,0.06);
}
.matrix-table th {
  padding: 14px 16px;
  text-align: left;
  font-family: var(--brand-font-family-mono);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--brand-white);
  border-bottom: 1px solid rgba(255,255,255,0.16);
  white-space: nowrap;
}
.matrix-table th.lp { background: rgba(238,183,93,0.10); color: var(--brand-gold); }
.matrix-table td {
  padding: 13px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: var(--brand-silver, #bbb);
  font-size: 13px;
  vertical-align: middle;
}
.matrix-table td:first-child {
  color: var(--brand-white);
  font-weight: 500;
}
.matrix-table td.lp-col {
  background: rgba(238,183,93,0.06);
  color: var(--brand-white);
}
.matrix-table td.yes { color: var(--brand-gold); font-weight: 500; }
.matrix-table td.yes::before { content: '● '; margin-right: 4px; }
.matrix-table td.partial { color: rgba(255,255,255,0.65); }
.matrix-table td.partial::before { content: '◐ '; margin-right: 4px; }
.matrix-table td.no { color: rgba(255,255,255,0.40); }
.matrix-table td.no::before { content: '○ '; margin-right: 4px; }
.matrix-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.matrix-table tbody tr:last-child td { border-bottom: none; }
.matrix-foot {
  padding: 14px 18px;
  background: rgba(255,255,255,0.02);
  font-family: var(--brand-font-family-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.50);
  border-top: 1px solid rgba(255,255,255,0.06);
  text-transform: none;
  letter-spacing: 0.04em;
}

/* =================================================================
   THE AGENT HUB — additions for hub-REAgents
   Category grids, directory listings, report gallery + report
   documents, tool calculators. All token-based, dark/gold.
   ================================================================= */

/* ----- Page intro (sub-page hero, lighter than hero-v2) ----- */
.page-intro { padding: 56px 0 8px; }
.page-intro .container { max-width: var(--brand-max-content-width); }
.page-intro-label {
  font-family: var(--brand-font-family-mono);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--brand-gold); margin: 0 0 16px;
}
.page-intro-title {
  font-family: var(--brand-font-family-display);
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.02; letter-spacing: -1.4px; font-weight: 700;
  color: var(--brand-white); margin: 0 0 20px; max-width: 20ch;
  text-wrap: balance;
}
.page-intro-lead {
  font-family: var(--brand-font-family);
  font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55;
  color: var(--brand-text-medium); max-width: 62ch; margin: 0;
  text-wrap: pretty;
}

/* ----- Section header (label + display title + optional "view all") ----- */
.hub-section { padding: 24px 0; }
.hub-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 28px;
  padding-bottom: 20px; border-bottom: 1px solid var(--brand-rule);
}
.hub-section-head-left { max-width: 62ch; }
.hub-section-label {
  font-family: var(--brand-font-family-mono);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 2px;
  color: var(--brand-gold); margin: 0 0 10px; display: block;
}
.hub-section-title {
  font-family: var(--brand-font-family-display);
  font-size: clamp(26px, 3vw, 38px); line-height: 1.08;
  letter-spacing: -0.8px; font-weight: 700;
  color: var(--brand-white); margin: 0 0 8px;
}
.hub-section-desc {
  font-family: var(--brand-font-family);
  font-size: 15px; line-height: 1.5;
  color: var(--brand-text-medium); margin: 0;
}
.hub-viewall {
  font-family: var(--brand-font-family-mono);
  font-size: 12px; font-weight: 600; letter-spacing: 1px;
  text-transform: uppercase; color: var(--brand-gold);
  text-decoration: none; white-space: nowrap;
  display: inline-flex; align-items: center; gap: 8px;
  padding-bottom: 4px; border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.hub-viewall:hover { border-bottom-color: var(--brand-gold); }

/* ----- Hub card grid ----- */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  border-top: 1px solid var(--brand-rule);
  border-left: 1px solid var(--brand-rule);
}
.hub-grid.cols-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.hub-grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.hub-card {
  background: var(--brand-ink);
  padding: 28px 26px 24px;
  display: flex; flex-direction: column; gap: 10px;
  text-decoration: none; color: var(--brand-white);
  position: relative; min-height: 168px;
  border-right: 1px solid var(--brand-rule);
  border-bottom: 1px solid var(--brand-rule);
  transition: background 220ms ease;
}
.hub-card:hover { background: rgba(238,183,93,0.06); }
.hub-card-icon {
  width: 40px; height: 40px; margin-bottom: 6px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--brand-rule); color: var(--brand-gold);
}
.hub-card-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.hub-card-label {
  font-family: var(--brand-font-family-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--brand-gold);
}
.hub-card-title {
  font-family: var(--brand-font-family-display);
  font-size: 21px; line-height: 1.2; font-weight: 700;
  letter-spacing: -0.3px; color: var(--brand-white); margin: 0;
}
.hub-card-desc {
  font-family: var(--brand-font-family);
  font-size: 14px; line-height: 1.5; color: var(--brand-text-medium);
  margin: 0;
}
.hub-card-arrow {
  margin-top: auto; padding-top: 12px;
  font-family: var(--brand-font-family-mono);
  font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--brand-gold); display: inline-flex; align-items: center; gap: 8px;
}
.hub-card-arrow span { transition: transform 200ms ease; }
.hub-card:hover .hub-card-arrow span { transform: translateX(4px); }
.hub-card.featured { background: rgba(238,183,93,0.05); }
.hub-card-tag {
  position: absolute; top: 0; right: 0;
  background: var(--brand-gold); color: var(--brand-ink);
  font-family: var(--brand-font-family-mono);
  font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px;
}

/* Compact link list (Steadily-style dense category items) */
.hub-list {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  border-top: 1px solid var(--brand-rule); border-left: 1px solid var(--brand-rule);
}
.hub-list-item {
  background: var(--brand-ink); padding: 18px 22px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-decoration: none; color: var(--brand-white);
  font-family: var(--brand-font-family); font-size: 15px; font-weight: 500;
  border-right: 1px solid var(--brand-rule); border-bottom: 1px solid var(--brand-rule);
  transition: background 200ms ease;
}
.hub-list-item:hover { background: rgba(238,183,93,0.06); }
.hub-list-item span.arr { color: var(--brand-gold); font-family: var(--brand-font-family-mono); }
.hub-list-item small {
  display: block; font-family: var(--brand-font-family-mono);
  font-size: 11px; color: var(--brand-text-soft); letter-spacing: 0.5px;
  margin-top: 3px; font-weight: 400;
}

/* ----- Filter/tab bar (decorative) ----- */
.filter-bar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 8px 0 36px; padding: 16px 0; border-bottom: 1px solid var(--brand-rule);
}
.filter-chip {
  font-family: var(--brand-font-family-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.5px; padding: 8px 16px;
  border: 1px solid var(--brand-rule); background: transparent;
  color: var(--brand-text-medium); text-decoration: none; cursor: pointer;
  transition: all 180ms ease; white-space: nowrap;
}
.filter-chip:hover { border-color: var(--brand-gold); color: var(--brand-white); }
.filter-chip.active { background: var(--brand-gold); border-color: var(--brand-gold); color: var(--brand-ink); font-weight: 600; }
.filter-bar-label {
  font-family: var(--brand-font-family-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 1.5px; color: var(--brand-text-soft);
  margin-right: 8px;
}

/* ----- Directory ranked listing cards ----- */
.listing {
  display: grid; grid-template-columns: 1fr; gap: 1px;
  background: var(--brand-rule); border: 1px solid var(--brand-rule); margin: 8px 0 40px;
}
.listing-row {
  background: var(--brand-ink);
  display: grid; grid-template-columns: 64px 1fr auto; gap: 24px;
  align-items: center; padding: 24px 28px;
  text-decoration: none; color: var(--brand-white);
  transition: background 200ms ease;
}
.listing-row:hover { background: rgba(238,183,93,0.05); }
.listing-rank {
  font-family: var(--brand-font-family-display); font-size: 34px; font-weight: 700;
  color: var(--brand-gold); letter-spacing: -1px; line-height: 1;
  font-variant-numeric: tabular-nums; text-align: center;
}
.listing-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.listing-name {
  font-family: var(--brand-font-family-display); font-size: 22px; font-weight: 700;
  letter-spacing: -0.3px; color: var(--brand-white); margin: 0; line-height: 1.15;
}
.listing-sub {
  font-family: var(--brand-font-family-mono); font-size: 12px; letter-spacing: 0.5px;
  color: var(--brand-gold); text-transform: uppercase;
}
.listing-desc {
  font-family: var(--brand-font-family); font-size: 14px; line-height: 1.5;
  color: var(--brand-text-medium); margin: 4px 0 0; max-width: 68ch;
}
.listing-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.listing-tag {
  font-family: var(--brand-font-family-mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; padding: 4px 9px; border: 1px solid var(--brand-rule);
  color: var(--brand-text-medium);
}
.listing-stats {
  display: flex; gap: 28px; align-items: center; flex-shrink: 0;
}
.listing-stat { text-align: right; }
.listing-stat-value {
  font-family: var(--brand-font-family-display); font-size: 24px; font-weight: 700;
  color: var(--brand-white); letter-spacing: -0.5px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.listing-stat-label {
  font-family: var(--brand-font-family-mono); font-size: 10px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--brand-text-soft); margin-top: 6px;
}
@media (max-width: 800px) {
  .listing-row { grid-template-columns: 44px 1fr; }
  .listing-stats { grid-column: 1 / -1; justify-content: flex-start; gap: 32px;
    padding-top: 8px; border-top: 1px solid var(--brand-rule); }
  .listing-stat { text-align: left; }
}

/* ----- Report gallery cards ----- */
.report-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px; margin: 8px 0 40px;
}
.report-card {
  background: rgba(255,255,255,0.03); border: 1px solid var(--brand-rule);
  text-decoration: none; color: var(--brand-white);
  display: flex; flex-direction: column; overflow: hidden;
  transition: border-color 220ms ease, transform 220ms ease;
}
.report-card:hover { border-color: var(--brand-gold); transform: translateY(-2px); }
.report-cover {
  aspect-ratio: 8 / 5; position: relative; overflow: hidden;
  background:
    radial-gradient(120% 120% at 80% 0%, rgba(238,183,93,0.18), transparent 55%),
    linear-gradient(160deg, #1c1d1f 0%, #101112 100%);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px 24px; border-bottom: 1px solid var(--brand-rule);
}
.report-cover-top {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--brand-font-family-mono); font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--brand-gold);
}
.report-cover-market {
  font-family: var(--brand-font-family-display); font-size: 30px; font-weight: 700;
  letter-spacing: -0.6px; line-height: 1.05; color: var(--brand-white); margin: 0;
}
.report-cover-sub {
  font-family: var(--brand-font-family-mono); font-size: 12px; letter-spacing: 0.5px;
  color: var(--brand-text-medium); margin-top: 6px;
}
.report-cover-seal {
  position: absolute; right: -20px; bottom: -20px; width: 120px; height: 120px;
  opacity: 0.14; color: var(--brand-gold);
}
.report-card-body { padding: 20px 24px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.report-card-title {
  font-family: var(--brand-font-family); font-size: 16px; font-weight: 600;
  color: var(--brand-white); margin: 0; line-height: 1.3;
}
.report-card-meta {
  font-family: var(--brand-font-family); font-size: 14px; line-height: 1.5;
  color: var(--brand-text-medium); margin: 0;
}
.report-card-foot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--brand-rule);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--brand-font-family-mono); font-size: 11px; letter-spacing: 0.5px;
  color: var(--brand-text-soft); text-transform: uppercase;
}
.report-card-foot .go { color: var(--brand-gold); }

/* ----- Report DOCUMENT (the shareable report page) ----- */
.report-doc { max-width: 960px; margin: 0 auto; padding: 0 var(--brand-container-padding-x); }
.report-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 16px 0; margin-bottom: 8px;
  border-bottom: 1px solid var(--brand-rule);
}
.report-toolbar-note {
  font-family: var(--brand-font-family-mono); font-size: 12px; color: var(--brand-text-soft);
}
.report-toolbar-actions { display: flex; gap: 10px; }
.report-btn {
  font-family: var(--brand-font-family-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px; padding: 10px 18px; text-decoration: none; cursor: pointer;
  border: 1px solid var(--brand-rule); color: var(--brand-white); background: transparent;
  display: inline-flex; align-items: center; gap: 8px; transition: all 180ms ease;
}
.report-btn:hover { border-color: var(--brand-gold); color: var(--brand-gold); }
.report-btn.primary { background: var(--brand-gold); border-color: var(--brand-gold); color: var(--brand-ink); }
.report-btn.primary:hover { background: var(--brand-gold-soft); color: var(--brand-ink); }

/* White-label agent header on the report */
.report-masthead {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  flex-wrap: wrap; padding: 28px 32px; margin: 24px 0 0;
  background: rgba(255,255,255,0.03); border: 1px solid var(--brand-rule);
}
.report-agent { display: flex; align-items: center; gap: 16px; }
.report-agent-avatar {
  width: 54px; height: 54px; border-radius: 50%; flex-shrink: 0;
  background: var(--brand-gold); color: var(--brand-ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--brand-font-family-display); font-size: 22px; font-weight: 700;
}
.report-agent-name { font-family: var(--brand-font-family); font-size: 17px; font-weight: 600; color: var(--brand-white); margin: 0; }
.report-agent-role { font-family: var(--brand-font-family-mono); font-size: 12px; color: var(--brand-text-medium); letter-spacing: 0.5px; margin-top: 3px; }
.report-agent-contact { font-family: var(--brand-font-family-mono); font-size: 12px; color: var(--brand-gold); text-align: right; line-height: 1.7; }

/* Report cover block */
.report-cover-lg {
  margin: 24px 0; padding: 64px 48px; text-align: center; position: relative; overflow: hidden;
  background:
    radial-gradient(130% 130% at 50% -10%, rgba(238,183,93,0.16), transparent 55%),
    linear-gradient(165deg, #1b1c1e 0%, #0e0f10 100%);
  border: 1px solid var(--brand-rule);
}
.report-cover-lg-label {
  font-family: var(--brand-font-family-mono); font-size: 12px; font-weight: 600;
  letter-spacing: 3px; text-transform: uppercase; color: var(--brand-gold); margin: 0 0 20px;
}
.report-cover-lg-title {
  font-family: var(--brand-font-family-display); font-size: clamp(38px, 6vw, 64px);
  line-height: 1.02; letter-spacing: -1.6px; font-weight: 700; color: var(--brand-white);
  margin: 0 auto 16px; max-width: 16ch;
}
.report-cover-lg-sub {
  font-family: var(--brand-font-family); font-size: 18px; color: var(--brand-text-medium);
  margin: 0 auto; max-width: 48ch;
}
.report-cover-lg-date {
  font-family: var(--brand-font-family-mono); font-size: 13px; letter-spacing: 1.5px;
  text-transform: uppercase; color: var(--brand-text-soft); margin-top: 28px;
}

/* KPI grid inside report */
.kpi-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--brand-rule); border-left: 1px solid var(--brand-rule); margin: 8px 0;
}
@media (max-width: 640px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .kpi-grid { grid-template-columns: 1fr; } }
.kpi {
  background: var(--brand-ink); padding: 24px 22px; display: flex; flex-direction: column; gap: 8px;
  border-right: 1px solid var(--brand-rule); border-bottom: 1px solid var(--brand-rule);
}
.kpi-label {
  font-family: var(--brand-font-family-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--brand-text-medium);
}
.kpi-value {
  font-family: var(--brand-font-family-display); font-size: 34px; font-weight: 700;
  letter-spacing: -0.8px; line-height: 1; color: var(--brand-white); font-variant-numeric: tabular-nums;
}
.kpi-delta { font-family: var(--brand-font-family-mono); font-size: 12px; font-weight: 600; }
.kpi-delta.up { color: var(--brand-success); }
.kpi-delta.down { color: var(--brand-error); }
.kpi-delta.flat { color: var(--brand-text-soft); }

/* CSS bar chart for reports */
.barchart { margin: 24px 0; display: flex; flex-direction: column; gap: 16px; }
.barchart-row { display: grid; grid-template-columns: 140px 1fr 92px; align-items: center; gap: 16px; }
.barchart-label { font-family: var(--brand-font-family-mono); font-size: 12px; color: var(--brand-text-medium); letter-spacing: 0.5px; }
.barchart-track { height: 26px; background: rgba(255,255,255,0.05); position: relative; }
.barchart-fill { height: 100%; background: linear-gradient(90deg, rgba(238,183,93,0.55), var(--brand-gold)); }
.barchart-val { font-family: var(--brand-font-family-display); font-size: 16px; font-weight: 700; color: var(--brand-white); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .barchart-row { grid-template-columns: 100px 1fr 72px; gap: 10px; } }

/* Trend line (SVG) wrapper */
.trend-wrap { margin: 24px 0; padding: 28px 24px; background: rgba(255,255,255,0.03); border: 1px solid var(--brand-rule); }
.trend-wrap svg { width: 100%; height: auto; display: block; }
.trend-caption { font-family: var(--brand-font-family-mono); font-size: 11px; color: var(--brand-text-soft); margin-top: 14px; letter-spacing: 0.5px; }

/* ----- TOOLS: calculators ----- */
.tool-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; margin: 8px 0 40px; }
.tool-card { background: rgba(255,255,255,0.03); border: 1px solid var(--brand-rule); padding: 28px 28px 30px; display: flex; flex-direction: column; }
.tool-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.tool-card-icon { width: 40px; height: 40px; flex-shrink: 0; border: 1px solid var(--brand-rule); color: var(--brand-gold); display: flex; align-items: center; justify-content: center; }
.tool-card-icon svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.tool-card-title { font-family: var(--brand-font-family-display); font-size: 22px; font-weight: 700; letter-spacing: -0.3px; color: var(--brand-white); margin: 0; }
.tool-card-desc { font-family: var(--brand-font-family); font-size: 14px; line-height: 1.5; color: var(--brand-text-medium); margin: 8px 0 20px; }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.field-label { font-family: var(--brand-font-family-mono); font-size: 11px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--brand-text-medium); }
.field-input-wrap { position: relative; display: flex; align-items: center; }
.field-prefix, .field-suffix { position: absolute; font-family: var(--brand-font-family-mono); font-size: 14px; color: var(--brand-text-soft); pointer-events: none; }
.field-prefix { left: 14px; }
.field-suffix { right: 14px; }
.field input, .field select {
  width: 100%; padding: 12px 14px; background: var(--brand-ink);
  border: 1px solid var(--brand-rule); color: var(--brand-white);
  font-family: var(--brand-font-family); font-size: 15px; font-variant-numeric: tabular-nums;
  transition: border-color 180ms ease; -moz-appearance: textfield;
}
.field input.has-prefix { padding-left: 30px; }
.field input.has-suffix { padding-right: 34px; }
.field input:focus, .field select:focus { outline: none; border-color: var(--brand-gold); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.tool-result { margin-top: 8px; padding: 22px 24px; background: rgba(238,183,93,0.07); border: 1px solid rgba(238,183,93,0.28); }
.tool-result-label { font-family: var(--brand-font-family-mono); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--brand-gold); }
.tool-result-value { font-family: var(--brand-font-family-display); font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1.05; color: var(--brand-white); margin-top: 6px; font-variant-numeric: tabular-nums; }
.tool-result-breakdown { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.tool-result-line { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--brand-font-family); font-size: 14px; padding-top: 8px; border-top: 1px solid var(--brand-rule); }
.tool-result-line span:first-child { color: var(--brand-text-medium); font-family: var(--brand-font-family-mono); font-size: 12px; letter-spacing: 0.5px; }
.tool-result-line span:last-child { color: var(--brand-white); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Illustrative-data disclaimer strip */
.data-note {
  font-family: var(--brand-font-family-mono); font-size: 12px; line-height: 1.6;
  color: var(--brand-text-soft); padding: 16px 20px; margin: 24px 0;
  background: rgba(255,255,255,0.03); border-left: 2px solid var(--brand-gold);
}

/* Prose helper for hub pages (reuse .article styling without full article layout) */
.hub-prose { max-width: var(--brand-max-prose-width); }
.hub-prose p { font-family: var(--brand-font-family); font-size: 17px; line-height: 1.65; color: var(--brand-silver); }

@media print {
  .report-toolbar, .promo-bar, .nav, .footer { display: none !important; }
  .report-cover-lg { break-inside: avoid; }
}

/* ================================================================
   LIGHT THEME — html[data-theme="light"] (2026-07-06)
   Dark stays the default. The toggle in the nav sets data-theme on
   <html> (persisted in localStorage; pre-paint snippet in <head>).
   Strategy: remap the --brand-* variables first (covers every
   component that reads vars), then patch the remaining hardcoded
   rgba(255,255,255,…)/#1b1c1e component rules and inline page styles
   (higher specificity via the html[data-theme] prefix).
   ================================================================ */
html[data-theme="light"] {
  color-scheme: light;
  /* page + surfaces */
  --brand-ink: #faf9f7;               /* THE page/nav/card background in this build */
  --brand-bg: #faf9f7;
  --brand-bg-alt: #f1efeb;
  --brand-bg-raised: #ffffff;
  --brand-bg-dark: #efece6;
  --brand-black: #f1efeb;             /* footer background */
  --brand-charcoal: #f1efeb;
  --brand-paper: #ffffff;
  --brand-paper-warm: #f1efeb;
  --brand-surface: rgba(20,21,22,0.04);
  --brand-surface-raised: rgba(20,21,22,0.07);
  /* text — --brand-white is the heading/text color throughout */
  --brand-white: #141516;
  --brand-text-strong: rgba(20,21,22,0.95);
  --brand-text-medium: rgba(20,21,22,0.72);
  --brand-text-soft: rgba(20,21,22,0.55);
  --brand-text-muted: rgba(20,21,22,0.38);
  --brand-text-on-dark: rgba(20,21,22,0.85);
  --brand-dark-text-strong: rgba(20,21,22,0.95);
  --brand-dark-text-medium: rgba(20,21,22,0.72);
  --brand-dark-text-soft: rgba(20,21,22,0.55);
  /* rules + borders — strengthened so cards read as cards on #faf9f7 */
  --brand-rule: rgba(20,21,22,0.15);
  --brand-rule-soft: rgba(20,21,22,0.08);
  --brand-border: rgba(20,21,22,0.15);
  --brand-border-strong: rgba(20,21,22,0.28);
  --brand-dark-border: rgba(20,21,22,0.16);
  /* semantic delta colors tuned for white — dark-theme green/red wash out here */
  --brand-success: #1a7f4e;
  --brand-error: #b3261e;
  --brand-dark-surface: rgba(20,21,22,0.05);
  --brand-dark-bg: #faf9f7;
  --brand-dark-bg-raised: #ffffff;
  /* gold, darkened for contrast on light (AA as large text/UI on #faf9f7) */
  --brand-gold: #a8781f;
  --brand-gold-hover: #8a6218;
  --brand-gold-soft: #97701e;
  --brand-primary: #a8781f;
  --brand-link-color: #8a6218;
  --brand-bg-accent: #a8781f;
  --brand-dark-accent: #a8781f;
  --brand-shadow-md: 0 12px 32px rgba(20,21,22,0.10);
  --brand-shadow-soft: 0 1px 3px rgba(20,21,22,0.08), 0 1px 2px rgba(20,21,22,0.05);
  --brand-shadow-glow: 0 0 0 1px rgba(168,120,31,0.30), 0 8px 32px rgba(168,120,31,0.15);
}

/* nav CTA / promo keep gold backgrounds — force readable ink on them */
html[data-theme="light"] .nav-cta,
html[data-theme="light"] .promo-bar,
html[data-theme="light"] .skip-link { color: #141516; }
html[data-theme="light"] .promo-bar { background: #e9c980; }
html[data-theme="light"] .promo-bar-cta { background: #141516; color: #faf9f7; }
html[data-theme="light"] ::selection { background: #a8781f; color: #ffffff; }

/* hardcoded white-alpha surfaces → ink-alpha equivalents */
html[data-theme="light"] .glance-card, html[data-theme="light"] .article thead,
html[data-theme="light"] .article tbody tr:hover, html[data-theme="light"] .quick-facts,
html[data-theme="light"] .sources, html[data-theme="light"] .glance-row:hover,
html[data-theme="light"] .chip, html[data-theme="light"] .step,
html[data-theme="light"] .callout.ink, html[data-theme="light"] .feature-link,
html[data-theme="light"] .internal-link, html[data-theme="light"] .disclaimer,
html[data-theme="light"] .glossary-cross-item:hover, html[data-theme="light"] .data-note,
html[data-theme="light"] .tool-card, html[data-theme="light"] .trend-wrap,
html[data-theme="light"] .matrix-table tfoot td { background: rgba(20,21,22,0.035); }
html[data-theme="light"] .chip.warm, html[data-theme="light"] .callout.paper,
html[data-theme="light"] .glance-value-pill.ink, html[data-theme="light"] .source-badge.industry,
html[data-theme="light"] .source-badge.news, html[data-theme="light"] .byline-avatar.ink,
html[data-theme="light"] .feature-link-thumb { background: rgba(20,21,22,0.08); }
html[data-theme="light"] .internal-link:hover { background: rgba(20,21,22,0.06); }
html[data-theme="light"] .barchart-track { background: rgba(20,21,22,0.07); }
html[data-theme="light"] .matrix-table { border-color: rgba(20,21,22,0.12); }
html[data-theme="light"] .matrix-table thead th { border-bottom-color: rgba(20,21,22,0.2); }
html[data-theme="light"] .matrix-table td, html[data-theme="light"] .matrix-table th { border-bottom-color: rgba(20,21,22,0.07); }
html[data-theme="light"] .matrix-table td.partial { color: rgba(20,21,22,0.66); }
html[data-theme="light"] .matrix-table td.no { color: rgba(20,21,22,0.42); }
html[data-theme="light"] .matrix-table tbody tr:hover { background: rgba(20,21,22,0.03); }

/* inline-SVG charts: axis/grid readability (fill/stroke attrs lose to CSS) */
html[data-theme="light"] .trend-wrap svg text { fill: rgba(20,21,22,0.6); }
html[data-theme="light"] .trend-wrap svg line { stroke: rgba(20,21,22,0.10); }
html[data-theme="light"] .trend-wrap svg g text { fill: #141516; }
html[data-theme="light"] .trend-wrap svg g rect[fill="rgba(255,255,255,0.05)"] { fill: rgba(20,21,22,0.06); }
html[data-theme="light"] .trend-wrap svg polyline { stroke: #a8781f; }
html[data-theme="light"] .trend-wrap svg circle { fill: #a8781f; }
html[data-theme="light"] .trend-wrap svg polygon { fill: rgba(168,120,31,0.12); }

/* generated inline <style> blocks (screener/compare/deal-analyzer/map) */
html[data-theme="light"] .scr-field input, html[data-theme="light"] .scr-field select,
html[data-theme="light"] .cmp-field select, html[data-theme="light"] .da-field input,
html[data-theme="light"] .da-form select, html[data-theme="light"] .mp-filter {
  background: #ffffff; color: #141516; border-color: rgba(20,21,22,0.18); }
html[data-theme="light"] table.scr th { background: #f1efeb; color: rgba(20,21,22,0.6); }
html[data-theme="light"] table.scr td { border-bottom-color: rgba(20,21,22,0.06); }
html[data-theme="light"] table.scr tr:hover td { background: rgba(168,120,31,0.07); }
html[data-theme="light"] .scr-score { color: #141516 !important; }
html[data-theme="light"] .cmp-verdict { background: rgba(168,120,31,0.07); border-color: rgba(168,120,31,0.25); }
html[data-theme="light"] table.cmp th, html[data-theme="light"] table.cmp td { border-bottom-color: rgba(20,21,22,0.09); }
html[data-theme="light"] .map-side { background: #f4f2ee; }
html[data-theme="light"] .map-btn, html[data-theme="light"] .map-badge,
html[data-theme="light"] #map-search, html[data-theme="light"] #map-state,
html[data-theme="light"] .map-geo-wrap { background: rgba(250,249,247,0.94); }
html[data-theme="light"] #map-suggest { background: #ffffff; }
html[data-theme="light"] #map-legend { background: rgba(250,249,247,0.94); }
html[data-theme="light"] #map, html[data-theme="light"] #map-table-wrap { background: #faf9f7; }
html[data-theme="light"] #map-table-wrap th, html[data-theme="light"] #map-table-wrap td { border-bottom-color: rgba(20,21,22,0.08); }
html[data-theme="light"] #map-loading { background: rgba(250,249,247,0.6); }
html[data-theme="light"] .map-tip { background: #ffffff !important; color: #26261f !important;
  border-color: rgba(168,120,31,0.5) !important; box-shadow: 0 6px 24px rgba(20,21,22,0.18) !important; }
html[data-theme="light"] .map-tip .leaflet-tooltip-content strong { color: #141516; }
html[data-theme="light"] .mp-metric.on, html[data-theme="light"] .map-geo.on { background: rgba(168,120,31,0.14); }
html[data-theme="light"] .mp-metric:hover { background: rgba(168,120,31,0.08); }
html[data-theme="light"] #map-suggest button:hover { background: rgba(168,120,31,0.10); }

/* ---- light polish pass (2026-07-06) ------------------------------------
   Cards get a raised white surface + container shadows; heroes get a soft
   warm wash; footer becomes a distinct parchment block; hovers use the
   darkened gold so nothing reads as bright #eeb75d on white. */
html[data-theme="light"] .kpi, html[data-theme="light"] .hub-card,
html[data-theme="light"] .hub-list-item, html[data-theme="light"] .listing-row {
  background: #ffffff;
}
/* shadow on cells, not containers — a container shadow paints empty trailing grid cells */
html[data-theme="light"] .hub-card, html[data-theme="light"] .kpi,
html[data-theme="light"] .hub-list-item, html[data-theme="light"] .listing-row {
  box-shadow: 0 1px 2px rgba(20,21,22,0.04);
}
html[data-theme="light"] .glance-card, html[data-theme="light"] .tool-card,
html[data-theme="light"] .trend-wrap {
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(20,21,22,0.04), 0 10px 28px rgba(20,21,22,0.05);
}
html[data-theme="light"] .tool-card, html[data-theme="light"] .trend-wrap { border-color: rgba(20,21,22,0.13); }
html[data-theme="light"] .hub-card:hover, html[data-theme="light"] .hub-list-item:hover,
html[data-theme="light"] .listing-row:hover { background: #fbf6ea; }
html[data-theme="light"] .hub-card.featured { background: #fdf9ef; }
html[data-theme="light"] .field input, html[data-theme="light"] .field select {
  background: #ffffff; border-color: rgba(20,21,22,0.18);
}
html[data-theme="light"] .field input:focus, html[data-theme="light"] .field select:focus { border-color: #a8781f; }

/* heroes: soft warm wash so intros read as a deliberate band, not blank page */
html[data-theme="light"] .hero-v2 { background: linear-gradient(180deg, #f3ecdc 0%, #f8f5ee 55%, #faf9f7 100%); }
html[data-theme="light"] .hero-v2::before {
  background-image: radial-gradient(circle, rgba(168,120,31,0.12) 1px, transparent 1px);
  opacity: 0.5;
}
html[data-theme="light"] .page-intro {
  background: linear-gradient(180deg, #f4eee0 0%, rgba(250,249,247,0) 100%);
}

/* footer: distinct warm parchment block, harmonized links */
html[data-theme="light"] .footer { background: #eee9dc; border-top: 1px solid rgba(20,21,22,0.08); }
html[data-theme="light"] .footer-col a { color: rgba(20,21,22,0.68); }
html[data-theme="light"] .footer-col a:hover { color: #141516; }
html[data-theme="light"] .footer-bottom { border-top-color: rgba(20,21,22,0.12); }

/* report covers keep their dark art direction — force light text back on */
html[data-theme="light"] .report-cover-market, html[data-theme="light"] .report-cover-lg-title { color: #f5f2ea; }
html[data-theme="light"] .report-cover-sub, html[data-theme="light"] .report-cover-lg-sub { color: rgba(255,255,255,0.66); }
html[data-theme="light"] .report-cover-lg-date { color: rgba(255,255,255,0.5); }
html[data-theme="light"] .report-cover-top, html[data-theme="light"] .report-cover-lg-label,
html[data-theme="light"] .report-cover-seal { color: #eeb75d; }

/* ================================================================
   State tile-grid choropleth (interactive) — /markets + homepage teaser.
   Standard NPR/538 layout, 11 cols x 8 rows; tiles are <a> links with a
   CSS-revealed tooltip (.tm-tip). Theme-aware bucket ramps below. */
.tilemap {
  display: grid; grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 5px; max-width: 720px; margin: 0 auto;
}
.tm-tile {
  position: relative; aspect-ratio: 1 / 1; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--brand-font-family-mono); font-size: 13px; font-weight: 600;
  letter-spacing: 0.3px; text-decoration: none;
  transition: transform 0.13s ease, filter 0.13s ease, box-shadow 0.13s ease;
}
a.tm-tile:hover, a.tm-tile:focus-visible {
  transform: scale(1.1); filter: brightness(1.18);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35); z-index: 6;
}
/* score buckets, dark theme (gold alpha ramp) */
.tm-b0 { background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.35); }
.tm-b1 { background: rgba(238,183,93,0.12); color: rgba(255,255,255,0.75); }
.tm-b2 { background: rgba(238,183,93,0.28); color: #f5e9d4; }
.tm-b3 { background: rgba(238,183,93,0.48); color: #f5e9d4; }
.tm-b4 { background: rgba(238,183,93,0.72); color: #141516; }
.tm-b5 { background: rgba(238,183,93,1); color: #141516; }
/* tooltip */
.tm-tip {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%); width: max-content; max-width: 210px;
  background: #1f2022; color: #f5f2ea; border: 1px solid rgba(238,183,93,0.45);
  border-radius: 6px; padding: 9px 11px; text-align: left;
  font-family: var(--brand-font-family, Inter, sans-serif); font-weight: 400;
  font-size: 12px; line-height: 1.5; letter-spacing: 0;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.12s ease; z-index: 40;
}
.tm-tip strong { display: block; font-size: 13px; color: #eeb75d; margin-bottom: 3px; }
.tm-tip span { display: block; color: rgba(245,242,234,0.82); }
.tm-tile:hover .tm-tip, .tm-tile:focus-visible .tm-tip { opacity: 1; visibility: visible; }
/* edge tiles: keep the tooltip inside the container */
.tm-tipl .tm-tip { left: 0; transform: none; }
.tm-tipr .tm-tip { left: auto; right: 0; transform: none; }
.tm-tipb .tm-tip { bottom: auto; top: calc(100% + 8px); }
/* legend swatches reuse bucket classes */
.tm-legend { display: inline-flex; gap: 4px; }
.tm-legend .tm-sw { width: 20px; height: 12px; border-radius: 2px; display: inline-block; }
/* anchored state sections scroll clear of the sticky nav */
.hub-section[id^="state-"] { scroll-margin-top: 96px; }

/* light theme: deeper gold-brown ramp with real contrast */
html[data-theme="light"] .tm-b0 { background: rgba(20,21,22,0.06); color: rgba(20,21,22,0.4); }
html[data-theme="light"] .tm-b1 { background: #f2e7c9; color: rgba(20,21,22,0.75); }
html[data-theme="light"] .tm-b2 { background: #e7d29b; color: #141516; }
html[data-theme="light"] .tm-b3 { background: #d4b264; color: #141516; }
html[data-theme="light"] .tm-b4 { background: #b98d36; color: #ffffff; }
html[data-theme="light"] .tm-b5 { background: #97701e; color: #ffffff; }
html[data-theme="light"] a.tm-tile:hover, html[data-theme="light"] a.tm-tile:focus-visible {
  filter: brightness(1.06); box-shadow: 0 6px 18px rgba(20, 21, 22, 0.22);
}
html[data-theme="light"] .tm-tip {
  background: #ffffff; color: #26261f; border-color: rgba(168,120,31,0.5);
  box-shadow: 0 10px 28px rgba(20, 21, 22, 0.18);
}
html[data-theme="light"] .tm-tip strong { color: #8a6218; }
html[data-theme="light"] .tm-tip span { color: rgba(20,21,22,0.75); }

/* nav theme toggle button */
.theme-toggle {
  background: none; border: 1px solid var(--brand-rule); border-radius: 999px;
  color: var(--brand-text-medium); cursor: pointer; line-height: 0;
  padding: 8px; margin-left: 16px; display: inline-flex; align-items: center;
}
.theme-toggle:hover { border-color: var(--brand-gold); color: var(--brand-gold); }
.theme-toggle svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }

/* ================================================================
   WealthyBud wordmark lockup (nav + footer) — 2026-07-06 rebrand.
   Reuses the WealthyBud infinity mark (500x248) recolored to the
   theme-aware gold; serif two-tone wordmark: Wealthy (ink/white) + Bud (gold).
   ================================================================ */
.wb-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.wb-lockup > svg { height: 21px; width: auto; flex: none; color: var(--brand-gold); }
.wb-lockup > svg path { fill: currentColor; }
.wb-word {
  font-family: var(--brand-font-family-display);
  font-size: 25px; font-weight: 700; letter-spacing: -0.3px;
  line-height: 1; color: var(--brand-white); white-space: nowrap;
}
.wb-gold { color: var(--brand-gold); }
.footer-brand .wb-lockup > svg { height: 24px; }
.footer-brand .wb-lockup > svg path { fill: var(--brand-gold); }
.footer-brand .wb-word { font-size: 29px; }