/* ============================================================
   EvvyTools — State of America (EvvyTools National Index)
   /trackers/state-of-america/
   Matches the Gas Tracker visual language (.etg-) — dark navy
   gradient, steel-blue mutes, pinhole noise, glow effects.
   Class prefix: .soa- (State of America)
   ============================================================ */

:root {
  --soa-hero-grad:    linear-gradient(160deg, #0a1529 0%, #0d1e3f 50%, #112a56 100%);
  --soa-section-grad: linear-gradient(160deg, #0a1529 0%, #112a56 100%);
  --soa-steel:        rgba(176, 196, 222, 0.7);
  --soa-steel-dim:    rgba(176, 196, 222, 0.5);
  --soa-glass:        rgba(255, 255, 255, 0.04);
  --soa-glass-hover:  rgba(255, 255, 255, 0.07);
  --soa-glass-border: rgba(255, 255, 255, 0.08);
  --soa-glass-bdr-2:  rgba(255, 255, 255, 0.12);
  --soa-good:         #86efac;
  --soa-good-bg:      rgba(74, 222, 128, 0.14);
  --soa-bad:          #fca5a5;
  --soa-bad-bg:       rgba(248, 113, 113, 0.12);
  --soa-flat:         #cbd5e1;
  --soa-flat-bg:      rgba(176, 196, 222, 0.12);
  --soa-accent:       #B0C4DE;   /* light steel blue — matches site's --evvy-accent-light */
  --soa-accent-deep:  #4682B4;   /* steel blue — for emphasis on light backgrounds */
  --soa-ease:         cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes soaHeroOrbPulse {
  0%   { opacity: 0.55; }
  100% { opacity: 1; }
}
@keyframes soaSweepShine {
  0%   { transform: translateX(-120%) skewX(-14deg); }
  100% { transform: translateX(220%)  skewX(-14deg); }
}
@keyframes soaLivePulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  60%     { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0);   }
}
@keyframes soaFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.soa-wrap {
  position: relative;
  z-index: 5;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

/* ============================================================
   PAGE HERO — the single H1 that names and explains the page
   in plain English, sitting above the persona selector.
   ============================================================ */
.soa-page-hero {
  margin: 0.5rem 0 1.75rem;
  padding: 1.5rem 0 1.75rem;
  border-bottom: 1px solid var(--evvy-border-color, #e5e7eb);
  animation: soaFadeUp 0.6s var(--soa-ease) both;
}
.soa-page-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.85rem;
  font-family: var(--evvy-font-mono, ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--evvy-text-secondary, #6b7280);
}
.soa-page-eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--soa-accent-deep);   /* light bg — needs darker blue */
  box-shadow: 0 0 0 0 rgba(70, 130, 180, 0.6);
  animation: soaLivePulse 2.4s ease-out infinite;
  flex-shrink: 0;
}
.soa-page-title {
  margin: 0 0 0.85rem;
  font-family: var(--evvy-font-display, 'Fraunces', serif);
  font-weight: 700;
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--evvy-navy, #002040);
}
.soa-page-lede {
  margin: 0 0 1.1rem;
  font-family: var(--evvy-font-ui, inherit);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  line-height: 1.55;
  color: var(--evvy-text-secondary, #4b5563);
  max-width: 68ch;
}
.soa-page-lede strong {
  color: var(--evvy-navy, #002040);
  font-weight: 600;
}
.soa-page-lede em {
  font-style: italic;
  color: var(--evvy-navy, #002040);
}
.soa-page-tagline {
  margin: -0.4rem 0 1rem;
  font-family: var(--evvy-font-display, 'Fraunces', serif);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--soa-accent-deep);   /* light bg — needs the darker blue for contrast */
}
.soa-page-tagline em {
  font-style: italic;
  font-weight: 600;
}
.soa-page-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  font-family: var(--evvy-font-mono, ui-monospace, monospace);
  font-size: 0.78rem;
  color: var(--evvy-text-secondary, #6b7280);
}
.soa-page-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.soa-page-meta i {
  color: var(--soa-accent-deep);   /* light bg — needs the darker blue */
  font-size: 0.85rem;
}
@media (max-width: 600px) {
  .soa-page-hero { padding: 1rem 0 1.25rem; }
  .soa-page-meta { font-size: 0.72rem; gap: 0.3rem 0.9rem; }
}

/* ============================================================
   PERSONA BAR
   ============================================================ */
.soa-persona-bar {
  margin: 0 0 1.5rem;
  animation: soaFadeUp 0.7s var(--soa-ease) both 0.1s;
}
.soa-persona-label {
  font-family: var(--evvy-font-mono, ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--evvy-text-secondary, #6b7280);
  margin: 0 0 0.65rem;
}
.soa-personas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.soa-persona-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem 0.6rem 0.85rem;
  background: var(--evvy-surface-light, #f6f7f9);
  border: 1.5px solid var(--evvy-border-color, #e5e7eb);
  border-radius: 50rem;
  font-family: var(--evvy-font-ui, inherit);
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--evvy-text-secondary, #6b7280);
  cursor: pointer;
  transition: all 0.22s ease;
}
.soa-persona-btn .emo { font-size: 1.05rem; line-height: 1; }
.soa-persona-btn:hover {
  background: var(--evvy-surface, #fff);
  border-color: var(--evvy-navy, #002040);
  color: var(--evvy-navy, #002040);
}
.soa-persona-btn:focus-visible {
  outline: 2px solid var(--evvy-accent, #4682B4);
  outline-offset: 3px;
}
.soa-persona-btn.is-active {
  background: var(--evvy-navy, #002040);
  color: #fff;
  border-color: var(--evvy-navy, #002040);
  box-shadow: 0 6px 20px -8px rgba(0, 32, 64, 0.45);
}

/* ============================================================
   HERO — dark navy card
   ============================================================ */
.soa-hero {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  margin: 0 0 1.5rem;
  background: var(--soa-hero-grad);
  color: #fff;
  box-shadow: 0 12px 40px rgba(0, 12, 40, 0.3);
  animation: soaFadeUp 0.9s var(--soa-ease) both 0.2s;
}
.soa-hero-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 82% 40%, rgba(70, 130, 180, 0.22) 0%, transparent 60%),
    radial-gradient(ellipse 40% 45% at 10% 85%, rgba(255, 100, 50, 0.18) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(176,196,222,0.065)'/%3E%3C/svg%3E");
  animation: soaHeroOrbPulse 6s ease-in-out infinite alternate;
  pointer-events: none;
}
.soa-hero-inner {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  padding: 2rem 1.5rem;
  align-items: center;
}
@media (min-width: 900px) {
  .soa-hero-inner {
    grid-template-columns: 1.05fr 1fr;
    gap: 2.5rem;
    padding: 2.4rem 2.2rem;
  }
}

/* Hero gauge (replaces the prior portrait) */
.soa-gauge {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: 1rem 0 0.25rem;
  aspect-ratio: 8 / 5;
}
.soa-gauge-svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.soa-gauge-tick-label {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
  fill: rgba(176, 196, 222, 0.55);
  letter-spacing: 0.04em;
}
/* No CSS transform/transition on the needle — the SVG `transform`
   attribute uses the explicit `rotate(angle, cx, cy)` form with its
   own pivot, and JS animates it via requestAnimationFrame. Adding
   CSS transitions or transform-origin here makes the browser
   reinterpret the pivot and the needle drifts. */
.soa-gauge-tier {
  position: absolute;
  top: 0.85rem;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
  padding: 0.3rem 0.7rem;
  background: rgba(10, 21, 41, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}
.soa-gauge-tier::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--soa-accent);
}
.soa-gauge-endpoint {
  position: absolute;
  bottom: 0.4rem;
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--soa-steel-dim);
}
.soa-gauge-endpoint-left  { left: 6%; }
.soa-gauge-endpoint-right { right: 6%; }

/* Readout */
.soa-readout {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.soa-readout-eyebrow {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soa-steel);
  margin: 0;
}
.soa-readout-eyebrow .accent { color: var(--soa-accent); }
.soa-readout-title {
  font-family: var(--evvy-font-display, 'Fraunces', serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.85rem, 4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
  color: #fff;
}
.soa-score-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 0.5rem;
}
.soa-score-numeral {
  font-family: var(--evvy-font-display, 'Fraunces', serif);
  font-weight: 900;
  font-size: clamp(5.5rem, 13vw, 9rem);
  letter-spacing: -0.04em;
  line-height: 0.88;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #fff 0%, #b0c4de 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.soa-score-meta { display: flex; flex-direction: column; gap: 0.55rem; padding-top: 0.4rem; }
.soa-score-of {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--soa-steel);
}
.soa-grade-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 0.5rem 0.95rem;
  background: rgba(255, 255, 255, 0.95);
  color: #002040;
  font-family: var(--evvy-font-display, 'Fraunces', serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.65rem;
  letter-spacing: -0.02em;
  line-height: 1;
  border-radius: 12px;
  box-shadow: 0 6px 18px -6px rgba(255, 255, 255, 0.4);
  transition: all 0.3s var(--soa-ease);
}
.soa-grade-badge.is-good { background: rgba(134, 239, 172, 0.95); color: #0a1f12; box-shadow: 0 6px 18px -6px rgba(134, 239, 172, 0.5); }
.soa-grade-badge.is-bad  { background: rgba(252, 165, 165, 0.95); color: #2a0a0e; box-shadow: 0 6px 18px -6px rgba(252, 165, 165, 0.5); }
.soa-quote {
  margin: 0.25rem 0 0;
  font-family: var(--evvy-font-display, 'Fraunces', serif);
  font-style: italic;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.45;
  color: rgba(230, 237, 245, 0.85);
  padding-left: 1.1rem;
  border-left: 2px solid var(--soa-accent);
}
.soa-change-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 50rem;
  background: var(--soa-glass);
  border: 1px solid var(--soa-glass-border);
  width: max-content;
  font-family: var(--evvy-font-mono, monospace);
  letter-spacing: 0.02em;
}
.soa-change-pill.up   { background: var(--soa-good-bg); color: var(--soa-good); border-color: rgba(74, 222, 128, 0.25); }
.soa-change-pill.down { background: var(--soa-bad-bg);  color: var(--soa-bad);  border-color: rgba(248, 113, 113, 0.25); }
.soa-change-pill.flat { background: var(--soa-flat-bg); color: var(--soa-flat); border-color: rgba(176, 196, 222, 0.2); }
.soa-change-pill i { font-size: 0.95rem; }
.soa-change-pill .label { opacity: 0.65; font-weight: 500; margin-left: 0.2rem; }

/* ============================================================
   SECTIONS
   ============================================================ */
.soa-section {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--soa-section-grad);
  color: #fff;
  padding: 1.75rem 1.5rem;
  margin: 0 0 1.5rem;
  box-shadow: 0 10px 32px rgba(0, 12, 40, 0.25);
}
.soa-section::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(176,196,222,0.05)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.soa-section-head {
  position: relative; z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.soa-section-title {
  font-family: var(--evvy-font-display, 'Fraunces', serif);
  font-weight: 700;
  font-size: 1.3rem;
  margin: 0;
  letter-spacing: -0.01em;
  color: #fff;
}
.soa-section-sub {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soa-steel);
  margin: 0;
}
.soa-section-sub strong { color: #fff; font-weight: 600; }

/* Six Fronts */
.soa-fronts {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 640px) { .soa-fronts { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .soa-fronts { grid-template-columns: repeat(6, 1fr); } }
.soa-front {
  position: relative;
  padding: 1rem 0.9rem 1.1rem;
  background: var(--soa-glass);
  border: 1px solid var(--soa-glass-border);
  border-radius: 12px;
  transition: transform 0.25s var(--soa-ease), background 0.25s var(--soa-ease), border-color 0.25s var(--soa-ease);
  overflow: hidden;
}
.soa-front:hover {
  transform: translateY(-2px);
  background: var(--soa-glass-hover);
  border-color: var(--soa-glass-bdr-2);
}
.soa-front-name {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soa-steel);
  margin: 0 0 0.45rem;
  line-height: 1.3;
  min-height: 2.4em;
}
.soa-front-grade { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; }
.soa-front-letter {
  font-family: var(--evvy-font-display, 'Fraunces', serif);
  font-style: italic;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #fff 0%, #b0c4de 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.soa-front-delta {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.18rem 0.45rem;
  border-radius: 50rem;
}
.soa-front-delta.up   { color: var(--soa-good); background: var(--soa-good-bg); }
.soa-front-delta.down { color: var(--soa-bad);  background: var(--soa-bad-bg);  }
.soa-front-delta.flat { color: var(--soa-flat); background: var(--soa-flat-bg); }
.soa-front-delta i { font-size: 0.65rem; margin-right: 0.1rem; }
.soa-front-spark {
  display: block;
  width: 100%;
  height: 24px;
  margin-top: 0.5rem;
  color: var(--soa-steel);
  overflow: visible;
}
.soa-front-spark polyline { transition: points 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

/* Pulse chart */
.soa-pulse-wrap {
  position: relative; z-index: 1;
  background: var(--soa-glass);
  border: 1px solid var(--soa-glass-border);
  border-radius: 14px;
  padding: 1.1rem 1rem 0.85rem;
  overflow: hidden;
}
.soa-pulse-wrap::after {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 80px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), transparent);
  animation: soaSweepShine 9s ease-in-out infinite;
  pointer-events: none;
}
.soa-pulse-svg { width: 100%; height: 180px; display: block; }
.soa-pulse-grid line { stroke: rgba(176, 196, 222, 0.10); stroke-width: 0.5; stroke-dasharray: 2 4; }
.soa-pulse-axis text {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 9px;
  fill: var(--soa-steel-dim);
  letter-spacing: 0.05em;
}
.soa-pulse-line {
  fill: none;
  stroke: url(#soaPulseStroke);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(74, 222, 128, 0.3));
  transition: d 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.soa-pulse-area { fill: url(#soaPulseFill); transition: d 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.soa-pulse-point { fill: #002040; stroke: var(--soa-steel); stroke-width: 1; transition: cy 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.soa-pulse-point-now {
  fill: var(--soa-accent);
  stroke: #fff;
  stroke-width: 1.5;
  r: 5.5;
  filter: drop-shadow(0 0 6px rgba(176, 196, 222, 0.7));
}
.soa-pulse-now-label {
  font-family: var(--evvy-font-mono, monospace);
  font-weight: 600;
  font-size: 11px;
  fill: var(--soa-accent);
}

/* Pull quote */
.soa-pull {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: center;
}
@media (min-width: 760px) {
  .soa-pull { grid-template-columns: auto 1fr auto; gap: 1.75rem; }
}
.soa-pull-icon {
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(70, 130, 180, 0.14);
  border: 1px solid rgba(70, 130, 180, 0.3);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--soa-accent);
  font-size: 1.5rem;
}
.soa-pull-body { min-width: 0; }
.soa-pull-eyebrow {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soa-accent);
  margin: 0 0 0.4rem;
}
.soa-pull-text {
  font-family: var(--evvy-font-display, 'Fraunces', serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.35;
  color: #fff;
  margin: 0 0 0.45rem;
  letter-spacing: -0.005em;
}
.soa-pull-source {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--soa-steel-dim);
}
.soa-pull-spark {
  width: 120px;
  height: 56px;
  flex-shrink: 0;
  color: var(--soa-accent);
}
.soa-pull-spark polyline { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Methodology */
.soa-method { position: relative; z-index: 1; }
.soa-method-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  font-family: var(--evvy-font-display, 'Fraunces', serif);
  font-weight: 600;
  font-size: 1.05rem;
  color: #fff;
}
.soa-method-summary::-webkit-details-marker { display: none; }
.soa-method-summary .arrow {
  transition: transform 0.3s var(--soa-ease);
  color: var(--soa-accent);
  font-size: 0.9rem;
}
details[open] .soa-method-summary .arrow { transform: rotate(90deg); }
.soa-method-body {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--soa-glass-border);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(203, 213, 225, 0.85);
}
@media (min-width: 720px) { .soa-method-body { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.soa-method-body p { margin: 0 0 0.5rem; }
.soa-method-body p strong { color: #fff; font-weight: 600; }
.soa-method-body .col-title {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--soa-steel);
  margin: 0 0 0.6rem;
}
.soa-method-list { list-style: none; padding: 0; margin: 0; }
.soa-method-list li {
  display: flex;
  gap: 0.55rem;
  padding: 0.35rem 0;
  border-top: 1px dashed var(--soa-glass-border);
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.78rem;
  color: rgba(203, 213, 225, 0.75);
}
.soa-method-list li:first-child { border-top: none; }
.soa-method-list strong {
  font-family: var(--evvy-font-ui, inherit);
  font-weight: 600;
  color: #fff;
  min-width: 100px;
  font-size: 0.8rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .soa-hero-bg, .soa-pulse-wrap::after { animation: none; }
  .soa-pulse-line, .soa-pulse-area, .soa-pulse-point, .soa-front-spark polyline { transition: none; }
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .soa-score-row { gap: 0.75rem; }
  .soa-grade-badge { font-size: 1.35rem; min-width: 52px; padding: 0.4rem 0.75rem; }
}

/* ============================================================
   STAT ROW — context numbers about the index itself
   ============================================================ */
.soa-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
  margin: 0 0 1.5rem;
}
@media (min-width: 600px) { .soa-stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .soa-stats { grid-template-columns: repeat(7, 1fr); } }
.soa-stat {
  padding: 0.9rem 0.85rem 1rem;
  background: var(--soa-section-grad);
  border: 1px solid var(--soa-glass-border);
  border-radius: 12px;
  color: #fff;
  transition: transform 0.22s var(--soa-ease), border-color 0.22s var(--soa-ease);
}
.soa-stat:hover { transform: translateY(-2px); border-color: var(--soa-glass-bdr-2); }
.soa-stat-label {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soa-steel);
  margin: 0 0 0.4rem;
  line-height: 1.3;
}
.soa-stat-value {
  font-family: var(--evvy-font-display, 'Fraunces', serif);
  font-weight: 700;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -0.02em;
  margin: 0 0 0.35rem;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.soa-stat-value.soa-stat-up   { color: var(--soa-good); }
.soa-stat-value.soa-stat-down { color: var(--soa-bad); }
.soa-stat-sub {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--soa-steel-dim);
  margin: 0;
}

/* ============================================================
   LONG VIEW — 5-year history chart
   ============================================================ */
.soa-long-wrap {
  position: relative; z-index: 1;
  background: var(--soa-glass);
  border: 1px solid var(--soa-glass-border);
  border-radius: 14px;
  padding: 1rem 0.75rem 0.5rem;
  overflow: hidden;
}
.soa-long-wrap::after {
  content: '';
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 80px;
  background: linear-gradient(90deg, rgba(255,255,255,0.05), transparent);
  animation: soaSweepShine 11s ease-in-out infinite;
  pointer-events: none;
}
.soa-long-svg { width: 100%; height: 220px; display: block; }
.soa-long-grid line {
  stroke: rgba(176, 196, 222, 0.10);
  stroke-width: 0.5;
  stroke-dasharray: 2 4;
}
.soa-long-grade {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 9px;
  letter-spacing: 0.05em;
  fill: var(--soa-steel-dim);
}
.soa-long-line {
  fill: none;
  stroke: url(#soaLongStroke);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 2px 6px rgba(176, 196, 222, 0.25));
}
.soa-long-area { fill: url(#soaLongFill); }
.soa-long-anchor-line {
  stroke: rgba(176, 196, 222, 0.18);
  stroke-width: 0.6;
  stroke-dasharray: 1 3;
}
.soa-long-anchor-dot {
  fill: var(--soa-steel);
  stroke: #0a1529;
  stroke-width: 1.2;
}
.soa-long-anchor-dot.is-now {
  fill: var(--soa-accent);
  stroke: #fff;
  stroke-width: 1.6;
  filter: drop-shadow(0 0 6px rgba(176, 196, 222, 0.7));
}
.soa-long-anchor-label {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  fill: rgba(255, 255, 255, 0.9);
}
.soa-long-anchor-label.is-now { fill: var(--soa-accent); }
.soa-long-anchor-note {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  fill: var(--soa-steel);
}
.soa-long-axis text {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 10px;
  fill: var(--soa-steel-dim);
  letter-spacing: 0.04em;
}
.soa-long-caption {
  position: relative; z-index: 1;
  margin: 1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: rgba(203, 213, 225, 0.78);
  max-width: 64ch;
}

/* ============================================================
   WHAT FEEDS THE SCORE — related-fronts grid
   ============================================================ */
.soa-related-grid {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}
@media (min-width: 700px) { .soa-related-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .soa-related-grid { grid-template-columns: repeat(6, 1fr); } }
.soa-related-card {
  display: block;
  padding: 0.95rem 0.9rem 0.8rem;
  background: var(--soa-glass);
  border: 1px solid var(--soa-glass-border);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  transition: transform 0.25s var(--soa-ease), background 0.25s var(--soa-ease), border-color 0.25s var(--soa-ease);
}
.soa-related-card:hover {
  transform: translateY(-2px);
  background: var(--soa-glass-hover);
  border-color: var(--soa-glass-bdr-2);
  color: #fff;
}
.soa-related-front {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soa-accent);
  margin: 0 0 0.35rem;
}
.soa-related-name {
  font-family: var(--evvy-font-ui, inherit);
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(230, 237, 245, 0.95);
  line-height: 1.3;
  margin: 0 0 0.6rem;
  min-height: 2em;
}
.soa-related-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.soa-related-value {
  font-family: var(--evvy-font-display, 'Fraunces', serif);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.soa-related-delta {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.18rem 0.4rem;
  border-radius: 50rem;
}
.soa-related-delta-up   { color: var(--soa-good); background: var(--soa-good-bg); }
.soa-related-delta-down { color: var(--soa-bad);  background: var(--soa-bad-bg); }
.soa-related-delta-flat { color: var(--soa-flat); background: var(--soa-flat-bg); }
.soa-related-delta i { font-size: 0.6rem; margin-right: 0.15rem; }
.soa-related-spark {
  display: block;
  width: 100%;
  height: 40px;
  color: var(--soa-steel);
  overflow: visible;
}

/* ============================================================
   EDITORIAL — long-form context
   Uses the same dark gradient as the other content sections so
   the white body copy has a dark surface to read against. Pre-fix
   this used a near-transparent glass which let the light page bg
   bleed through and made the text invisible.
   ============================================================ */
.soa-editorial {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: var(--soa-section-grad);
  border: 1px solid var(--soa-glass-border);
  padding: 2rem 1.6rem;
  margin: 0 0 1.5rem;
  color: rgba(230, 237, 245, 0.9);
  line-height: 1.65;
  box-shadow: 0 10px 32px rgba(0, 12, 40, 0.25);
}
.soa-editorial::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(176,196,222,0.05)'/%3E%3C/svg%3E");
  pointer-events: none;
}
.soa-editorial > * { position: relative; z-index: 1; }
@media (min-width: 720px) {
  .soa-editorial { padding: 2.25rem 2.25rem; }
}
.soa-editorial .soa-section-title { margin-bottom: 1rem; }
.soa-editorial h3 {
  font-family: var(--evvy-font-display, 'Fraunces', serif);
  font-style: italic;
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 1.5rem 0 0.5rem;
}
.soa-editorial p {
  margin: 0 0 1rem;
  font-size: 0.96rem;
  color: rgba(230, 237, 245, 0.85);
}
.soa-editorial p strong { color: #fff; font-weight: 600; }
.soa-editorial p em { color: var(--soa-accent); font-style: italic; }
.soa-editorial-meta {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--soa-glass-border);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.5rem;
}
@media (min-width: 720px) { .soa-editorial-meta { grid-template-columns: repeat(2, 1fr); gap: 0.75rem 2rem; } }
.soa-editorial-meta > div {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.78rem;
  color: rgba(230, 237, 245, 0.78);
}
.soa-editorial-meta span {
  display: block;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--soa-steel);
  margin-bottom: 0.2rem;
}

/* ============================================================
   FAQ
   ============================================================ */
.soa-faq {
  position: relative; z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.soa-faq-item {
  background: var(--soa-glass);
  border: 1px solid var(--soa-glass-border);
  border-radius: 12px;
  transition: background 0.25s var(--soa-ease), border-color 0.25s var(--soa-ease);
}
.soa-faq-item[open] {
  background: var(--soa-glass-hover);
  border-color: var(--soa-glass-bdr-2);
}
.soa-faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  font-family: var(--evvy-font-ui, inherit);
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  line-height: 1.4;
}
.soa-faq-q::-webkit-details-marker { display: none; }
.soa-faq-arrow {
  flex-shrink: 0;
  color: var(--soa-accent);
  font-size: 0.85rem;
  transition: transform 0.3s var(--soa-ease);
}
.soa-faq-item[open] .soa-faq-arrow { transform: rotate(90deg); }
.soa-faq-a {
  padding: 0 1.1rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.65;
  color: rgba(203, 213, 225, 0.88);
}
.soa-faq-a p { margin: 0 0 0.5rem; }
.soa-faq-a p:last-child { margin-bottom: 0; }
.soa-faq-a a {
  color: var(--soa-accent);
  text-decoration: underline;
  text-decoration-color: rgba(176, 196, 222, 0.4);
  text-underline-offset: 2px;
}
.soa-faq-a a:hover { text-decoration-color: var(--soa-accent); }
.soa-faq-a strong { color: #fff; font-weight: 600; }

/* ============================================================
   US MAP — six fronts laid over a stylized U.S. silhouette.
   Replaces the prior grid layout. Each pin is a circular grade
   badge positioned at a region of geographic relevance.
   ============================================================ */
.soa-section-map { padding-bottom: 1.25rem; }

.soa-usmap-wrap {
  position: relative; z-index: 1;
}
.soa-usmap-svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 480px;
}
/* Injected from us-states.js — one <path> per state. Styled uniformly
   so the map reads as a single "America" surface; the 6 grade pins
   above carry the color/meaning. */
.soa-usmap-state {
  fill: rgba(70, 130, 180, 0.18);
  stroke: rgba(176, 196, 222, 0.45);
  stroke-width: 0.8;
  stroke-linejoin: round;
  transition: fill 0.6s var(--soa-ease);
}
.soa-usmap-stripes { opacity: 0.85; }

/* Pin = grade badge anchored to a region */
.soa-usmap-pin { cursor: default; }
.soa-usmap-pin-tether {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.2;
  stroke-dasharray: 2 3;
}
.soa-usmap-pin-anchor {
  fill: var(--soa-accent);
  stroke: #fff;
  stroke-width: 1;
}
.soa-usmap-pin-bg {
  fill: rgba(10, 21, 41, 0.92);
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 1.5;
  filter: drop-shadow(0 4px 10px rgba(0, 12, 40, 0.45));
}
.soa-usmap-pin-short {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  fill: var(--soa-steel);
}
.soa-usmap-pin-letter {
  font-family: var(--evvy-font-display, 'Fraunces', serif);
  font-style: italic;
  font-weight: 800;
  font-size: 30px;
  letter-spacing: -0.03em;
  fill: #fff;
}
.soa-usmap-pin-delta {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 11px;
  font-weight: 600;
}
.soa-usmap-pin-delta-up   { fill: var(--soa-good); }
.soa-usmap-pin-delta-down { fill: var(--soa-bad); }
.soa-usmap-pin-delta-flat { fill: var(--soa-flat); }

/* Legend strip below the map — keeps the full front names + spark
   trends visible since the pins only carry the short code + grade. */
.soa-usmap-legend {
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.6rem;
}
@media (min-width: 600px) { .soa-usmap-legend { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .soa-usmap-legend { grid-template-columns: repeat(6, 1fr); } }
.soa-usmap-legend-item {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 0.45rem 0.6rem;
  align-items: start;
  padding: 0.7rem 0.65rem 0.75rem;
  background: var(--soa-glass);
  border: 1px solid var(--soa-glass-border);
  border-radius: 10px;
  transition: background 0.25s var(--soa-ease), border-color 0.25s var(--soa-ease);
}
.soa-usmap-legend-item:hover {
  background: var(--soa-glass-hover);
  border-color: var(--soa-glass-bdr-2);
}
.soa-usmap-legend-short {
  font-family: var(--evvy-font-mono, monospace);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--soa-accent);
  background: rgba(176, 196, 222, 0.10);
  border: 1px solid rgba(176, 196, 222, 0.25);
  border-radius: 6px;
  padding: 0.3rem 0;
  text-align: center;
  align-self: start;
}
.soa-usmap-legend-meta { min-width: 0; }
.soa-usmap-legend-meta .soa-front-name {
  margin: 0 0 0.3rem;
  min-height: 0;
}
.soa-usmap-legend-meta .soa-front-letter { font-size: 1.5rem; }
.soa-usmap-legend-item .soa-front-spark {
  grid-column: 1 / -1;
  height: 22px;
  margin-top: 0.15rem;
}