/* ============================================
   Page-specific styles for non-dashboard pages
   Homepage, Methodology, Pulse, About, Pricing, Signup
   ============================================ */

/* ---------- HOMEPAGE ---------- */

.hero {
  padding-block: clamp(var(--space-16), 9vw, var(--space-32));
  background: linear-gradient(180deg, var(--color-surface) 0%, var(--color-bg) 100%);
  border-bottom: 1px solid var(--color-divider);
}
.hero__inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: center;
}
@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; }
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font: 600 var(--text-xs)/1.4 var(--font-body);
  color: var(--color-primary);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-5);
}
.hero__eyebrow::before {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--color-primary);
}
.hero__title {
  font: 600 var(--text-2xl)/1.05 var(--font-display);
  letter-spacing: -0.02em;
  margin-bottom: var(--space-6);
  text-wrap: balance;
}
.hero__title em {
  font-style: italic;
  color: var(--color-primary);
}
.hero__lead {
  font: 400 var(--text-lg)/1.5 var(--font-body);
  color: var(--color-text-muted);
  max-width: 56ch;
  margin-bottom: var(--space-8);
}
.hero__ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.hero__sample {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow-md);
}
.hero__sample h3 {
  font: 500 var(--text-xs)/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}
.hero__sample-bigvalue {
  font: 700 var(--text-2xl)/1 var(--font-display);
  font-feature-settings: "tnum";
  margin-bottom: var(--space-1);
}
.hero__sample-delta {
  color: var(--color-up);
  font-weight: 600;
  margin-bottom: var(--space-4);
}
.hero__sample-rows {
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4);
  display: grid;
  gap: var(--space-3);
}
.hero__sample-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-sm);
}
.hero__sample-row span:first-child { color: var(--color-text); font-weight: 500; }
.hero__sample-row .delta { font-feature-settings: "tnum"; font-weight: 600; }

/* Three pillars section */
.pillars { padding-block: clamp(var(--space-12), 6vw, var(--space-24)); }
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
@media (max-width: 880px) { .pillars__grid { grid-template-columns: 1fr; } }
.pillar {
  border-top: 2px solid var(--color-text);
  padding-top: var(--space-5);
}
.pillar__num {
  font: 500 var(--text-xs)/1 var(--font-mono);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.pillar__title {
  font: 500 var(--text-lg)/1.2 var(--font-display);
  margin-bottom: var(--space-3);
}
.pillar__body {
  color: var(--color-text-muted);
  font-size: var(--text-base);
  line-height: 1.55;
}

/* Latest signals row */
.signals {
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.signals__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
}
.signal-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  transition: border-color var(--transition-interactive), transform var(--transition-interactive);
}
.signal-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.signal-card__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.signal-card__name {
  font: 600 var(--text-base)/1.2 var(--font-body);
}
.signal-card__delta { font-weight: 600; font-feature-settings: "tnum"; }
.signal-card__delta.is-up { color: var(--color-up); }
.signal-card__delta.is-down { color: var(--color-down); }
.signal-card__why {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
}
.signal-card__source {
  font: 500 var(--text-xs)/1 var(--font-mono);
  color: var(--color-text-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Quote / pull quote */
.quote-block {
  padding-block: clamp(var(--space-16), 8vw, var(--space-24));
  text-align: center;
}
.quote-block__quote {
  font: italic 400 var(--text-xl)/1.35 var(--font-display);
  max-width: 28ch;
  margin: 0 auto var(--space-6);
  color: var(--color-text);
  text-wrap: balance;
}
.quote-block__attr {
  font: 500 var(--text-xs)/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---------- ARTICLE / EDITORIAL PAGE (methodology, pulse-issue) ---------- */

.article {
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
}
.article__inner {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
}
.article__eyebrow {
  font: 600 var(--text-xs)/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}
.article__title {
  font: 600 var(--text-2xl)/1.1 var(--font-display);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.article__lead {
  font: 400 var(--text-lg)/1.5 var(--font-body);
  color: var(--color-text-muted);
  margin-bottom: var(--space-10);
  max-width: 60ch;
}
.article__meta {
  display: flex;
  gap: var(--space-3);
  font: 500 var(--text-xs)/1 var(--font-body);
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}
.article__body { font-size: var(--text-base); line-height: 1.7; }
.article__body h2 {
  font: 600 var(--text-xl)/1.2 var(--font-display);
  margin-top: var(--space-12);
  margin-bottom: var(--space-4);
  letter-spacing: -0.01em;
}
.article__body h3 {
  font: 600 var(--text-lg)/1.25 var(--font-body);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}
.article__body p { margin-bottom: var(--space-5); }
.article__body ul, .article__body ol {
  margin: 0 0 var(--space-5) var(--space-5);
}
.article__body li { margin-bottom: var(--space-2); }
.article__body strong { color: var(--color-text); font-weight: 600; }
.article__body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-surface-offset);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-sm);
}
.article__body a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 3px; }
.article__body a:hover { color: var(--color-primary-hover); }

/* TOC sidebar (desktop only) */
.article-with-toc {
  display: grid;
  grid-template-columns: minmax(0, 760px) 220px;
  gap: var(--space-12);
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
}
@media (max-width: 1024px) {
  .article-with-toc { grid-template-columns: 1fr; }
  .article-toc { display: none; }
}
.article-toc {
  position: sticky;
  top: calc(var(--space-16) + var(--space-2));
  align-self: start;
  font-size: var(--text-sm);
  border-left: 1px solid var(--color-divider);
  padding-left: var(--space-4);
  max-height: 75vh;
  overflow-y: auto;
}
.article-toc__title {
  font: 500 var(--text-xs)/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.article-toc ul { list-style: none; padding: 0; margin: 0; }
.article-toc li { margin-bottom: var(--space-2); }
.article-toc a { color: var(--color-text-muted); text-decoration: none; }
.article-toc a:hover, .article-toc a.is-active { color: var(--color-primary); }

/* Source register table on methodology */
.source-register {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin: var(--space-6) 0 var(--space-8);
}
.source-register th, .source-register td {
  padding: var(--space-3) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: top;
}
.source-register th {
  font: 600 var(--text-xs)/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  background: var(--color-surface);
}
.source-register td.weight {
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--color-primary);
}

/* Ethics section special styling */
.ethics-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
}
.ethics-card h4 {
  font: 600 var(--text-base)/1.2 var(--font-body);
  margin-bottom: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.ethics-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--color-primary);
  color: white;
  font: 600 var(--text-xs)/1 var(--font-mono);
  flex-shrink: 0;
}
.ethics-card p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* ---------- PULSE ARCHIVE LIST ---------- */
.archive { padding-block: clamp(var(--space-10), 5vw, var(--space-16)); }
.archive__inner {
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
}
.archive__head { margin-bottom: var(--space-10); }
.archive-item {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--space-6);
  padding-block: var(--space-5);
  border-bottom: 1px solid var(--color-divider);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-interactive);
}
.archive-item:hover { background: var(--color-surface); }
@media (max-width: 700px) {
  .archive-item { grid-template-columns: 1fr; gap: var(--space-2); }
}
.archive-item__date {
  font: 500 var(--text-xs)/1 var(--font-mono);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.archive-item__title {
  font: 500 var(--text-lg)/1.3 var(--font-display);
  letter-spacing: -0.005em;
  margin-bottom: var(--space-1);
}
.archive-item__excerpt {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 60ch;
}
.archive-item__tag {
  font: 500 var(--text-xs)/1 var(--font-body);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- PRICING ---------- */
.pricing { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.pricing__inner {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
}
.pricing__head {
  text-align: center;
  margin-bottom: var(--space-12);
}
.pricing__head h1 {
  font: 600 var(--text-2xl)/1.1 var(--font-display);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
}
.pricing__head p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 50ch;
  margin-inline: auto;
}
.pricing__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
}
@media (max-width: 880px) { .pricing__grid { grid-template-columns: 1fr; } }
.tier {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
}
.tier--featured {
  border-color: var(--color-primary);
  border-width: 2px;
  background: var(--color-bg);
  position: relative;
  box-shadow: var(--shadow-md);
}
.tier__badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: white;
  font: 600 var(--text-xs)/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-full);
}
.tier__name {
  font: 500 var(--text-xs)/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.tier__price {
  font: 700 var(--text-2xl)/1 var(--font-display);
  font-feature-settings: "tnum";
  margin-bottom: var(--space-1);
}
.tier__price-unit { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 400; }
.tier__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
  min-height: 3em;
}
.tier__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  flex: 1;
}
.tier__features li {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-sm);
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.tier__features li::before {
  content: "✓";
  color: var(--color-primary);
  font-weight: 700;
  flex-shrink: 0;
}
.tier__features li.disabled { color: var(--color-text-faint); }
.tier__features li.disabled::before { content: "—"; color: var(--color-text-faint); }
.tier__cta { width: 100%; }

/* ---------- ABOUT ---------- */
.about-hero {
  padding-block: clamp(var(--space-12), 6vw, var(--space-20));
  border-bottom: 1px solid var(--color-divider);
}
.about-hero__inner {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
}
.about-hero h1 {
  font: 600 var(--text-2xl)/1.1 var(--font-display);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.about-hero p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-bottom: var(--space-4);
}

/* ---------- SIGNUP FORM ---------- */
.signup { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); min-height: 75vh; }
.signup__inner {
  max-width: 540px;
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
}
.signup__title {
  font: 600 var(--text-xl)/1.1 var(--font-display);
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}
.signup__lead {
  color: var(--color-text-muted);
  margin-bottom: var(--space-8);
}
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
.field label {
  font: 500 var(--text-xs)/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.field input, .field select, .field textarea {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--color-text);
  transition: border-color var(--transition-interactive), box-shadow var(--transition-interactive);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 18%, transparent);
}
.field__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.signup__success {
  background: color-mix(in oklab, var(--color-up) 12%, var(--color-surface));
  border: 1px solid var(--color-up);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  text-align: center;
  display: none;
}
.signup__success.is-shown { display: block; }
.signup__success h3 {
  font: 600 var(--text-lg)/1.2 var(--font-display);
  margin-bottom: var(--space-2);
  color: var(--color-up);
}

/* Page hero (smaller than homepage hero) */
.page-hero {
  padding-block: clamp(var(--space-10), 5vw, var(--space-16));
  border-bottom: 1px solid var(--color-divider);
  background: var(--color-surface);
}
.page-hero__inner {
  max-width: var(--content-default);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-8));
}
.page-hero__eyebrow {
  font: 600 var(--text-xs)/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}
.page-hero h1 {
  font: 600 var(--text-2xl)/1.1 var(--font-display);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
  text-wrap: balance;
}
.page-hero__lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 60ch;
  line-height: 1.55;
}

/* Sample issue card pull-quotes & callouts */
.callout {
  background: var(--color-surface-offset);
  border-left: 3px solid var(--color-primary);
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-sm);
  margin-block: var(--space-6);
}
.callout__label {
  font: 600 var(--text-xs)/1 var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.callout p { margin: 0; font-size: var(--text-base); }

.pullquote {
  font: italic 500 var(--text-lg)/1.4 var(--font-display);
  color: var(--color-text);
  text-align: center;
  max-width: 28ch;
  margin: var(--space-8) auto;
  text-wrap: balance;
}

/* Image substitute / data card embed in articles */
.data-card-embed {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  margin-block: var(--space-6);
}
.data-card-embed__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.data-card-embed__title {
  font: 600 var(--text-sm)/1 var(--font-body);
}
.data-card-embed__source {
  font: 500 var(--text-xs)/1 var(--font-mono);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.data-card-embed__chart {
  width: 100%;
  height: 160px;
}

/* Trope detail modal (interactive) */
.modal {
  position: fixed;
  inset: 0;
  background: oklch(0 0 0 / 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--space-4);
}
.modal.is-open { display: flex; }
.modal__panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  max-width: 720px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--space-8);
  box-shadow: var(--shadow-lg);
}
.modal__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-divider);
}
.modal__title { font: 600 var(--text-xl)/1.2 var(--font-display); margin-bottom: var(--space-1); }
.modal__sub { font-size: var(--text-sm); color: var(--color-text-muted); }
.modal__close {
  background: var(--color-surface-offset);
  border-radius: var(--radius-full);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--text-base);
  flex-shrink: 0;
}
.modal__close:hover { background: var(--color-surface-dynamic); }

/* Time-range selector for index detail */
.range-selector {
  display: inline-flex;
  background: var(--color-surface-offset);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 0;
}
.range-selector button {
  padding: var(--space-2) var(--space-4);
  font: 500 var(--text-xs)/1 var(--font-body);
  color: var(--color-text-muted);
  border-radius: calc(var(--radius-md) - 3px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.range-selector button.is-active {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* Modal big chart */
.modal-chart {
  width: 100%;
  height: 240px;
  margin-bottom: var(--space-5);
}
.modal__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
@media (max-width: 600px) { .modal__stats { grid-template-columns: repeat(2, 1fr); } }
.modal__stat-label {
  font: 500 var(--text-xs)/1 var(--font-body);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-1);
}
.modal__stat-value {
  font: 600 var(--text-base)/1 var(--font-body);
  font-feature-settings: "tnum";
}
.modal__sources {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.modal__sources strong { color: var(--color-text); }

/* Section heading for in-page sections */
.section-head--lg .section-head__title {
  font: 600 var(--text-xl)/1.1 var(--font-display);
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}
.section-eyebrow {
  font: 600 var(--text-xs)/1 var(--font-body);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

/* ---------- Interactivity additions (modal extras, filters, signup) ---------- */
.modal__backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.modal__panel { position: relative; z-index: 1; }
.modal__eyebrow {
  font: 500 var(--text-xs)/1 var(--font-body);
  color: var(--color-primary, #d6336c);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}
.modal__body { display: flex; flex-direction: column; gap: var(--space-5); }
.modal__chart-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  background: var(--color-surface);
}
.modal__chart-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: var(--space-3);
  flex-wrap: wrap; gap: var(--space-3);
}
.modal__chart-label {
  font: 500 var(--text-xs)/1 var(--font-body);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.modal__chart {
  width: 100%; height: 220px; display: block;
}
.modal__footnote {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
}
.modal__footnote a { color: inherit; text-decoration: underline; }

/* chip--range styled to match range-selector buttons */
.chip--range {
  padding: var(--space-2) var(--space-3);
  font: 500 var(--text-xs)/1 var(--font-body);
  color: var(--color-text-muted);
  border-radius: calc(var(--radius-md) - 3px);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.chip--range.is-active {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-sm);
}

/* leaderboard row hover affordance */
.lb-table tbody tr.lb-row { transition: background-color 120ms ease; }
.lb-table tbody tr.lb-row:hover { background: var(--color-surface); }

/* form errors / signup success */
.form-error {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: oklch(0.96 0.04 25);
  color: oklch(0.40 0.18 25);
  border: 1px solid oklch(0.85 0.10 25);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.signup-success {
  padding: var(--space-7);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.signup-success__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  background: oklch(0.94 0.10 150);
  color: oklch(0.40 0.18 150);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700;
  margin-bottom: var(--space-4);
}
.signup-success__title {
  font: 600 var(--text-2xl)/1.1 var(--font-display);
  margin-bottom: var(--space-3);
}
.signup-success__body {
  color: var(--color-text-muted);
  max-width: 50ch;
  margin: 0 auto var(--space-4);
}

.modal__stat {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.modal__stat-value.is-up   { color: var(--color-success, #16a34a); }
.modal__stat-value.is-down { color: var(--color-danger, #dc2626); }