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

:root {
  --bg-cream: #FDFBF7;
  --bg-light: #F5F2EC;
  --brand-forest: #529B44;
  --brand-lime: #90C446;
  --brand-forest-15: rgba(82,155,68,0.15);
  --brand-forest-08: rgba(82,155,68,0.08);
  --shadow-soft: rgba(0,0,0,0.08);
  --shadow-card: rgba(0,0,0,0.15);
  --text-primary: #1a1a1a;
  --text-muted: #4a4a4a;
  --text-light: #767676;
  --border-light: rgba(82,155,68,0.18);
  --radius: 14px;
  --radius-sm: 8px;
  --hp: #e74c3c;
  --xp: #9b59b6;
  --gold: #f1c40f;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  background: var(--bg-cream);
  color: var(--text-primary);
  line-height: 1.7;
}

a { color: var(--brand-forest); }

/* ── Badge bar ── */
.badge-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(253,251,247,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.badge-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.badge-tier {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--brand-forest-08);
  border: 1px solid var(--border-light);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--brand-forest);
}
.badge-name-wrap { display: flex; align-items: center; gap: 4px; }
.badge-name { font-weight: 600; font-size: 0.92rem; }
.icon-btn {
  background: transparent; border: none; cursor: pointer;
  font-size: 0.9rem; padding: 2px 4px; opacity: 0.6;
  transition: opacity 0.2s;
}
.icon-btn:hover { opacity: 1; }
.badge-level {
  background: var(--brand-forest);
  color: #fff;
  padding: 3px 9px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
}
.bar {
  height: 8px;
  background: rgba(0,0,0,0.08);
  border-radius: 4px;
  overflow: hidden;
  flex: 1;
  min-width: 80px;
  max-width: 160px;
}
.bar-fill { height: 100%; transition: width 0.4s ease; }
.badge-bar-stat {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.78rem; color: var(--text-muted); white-space: nowrap;
}
.badge-bar-stat .label { font-weight: 600; }
.hp-fill { background: linear-gradient(90deg, var(--hp), #ff7676); }
.xp-fill { background: linear-gradient(90deg, var(--xp), #c39bd3); }
.badge-gold {
  display: flex; align-items: center; gap: 4px;
  font-weight: 600; font-size: 0.85rem; color: var(--text-primary);
}
.badge-spacer { flex: 1; }

/* ── Auth pill ── */
.auth-slot { display: flex; align-items: center; gap: 6px; }
.auth-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid var(--brand-forest-15);
  object-fit: cover;
}
.auth-name { font-size: 0.82rem; font-weight: 600; color: var(--text-muted); }
.auth-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1.5px solid rgba(0,0,0,0.12);
  color: var(--text-primary);
  padding: 5px 12px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 18px;
  cursor: pointer;
  transition: all 0.15s;
}
.auth-btn:hover { border-color: var(--brand-forest); color: var(--brand-forest); }

/* ── Tab bar (bottom nav) ── */
.tab-bar {
  position: sticky;
  bottom: 0;
  background: rgba(253,251,247,0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  z-index: 90;
}
.tab-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 4px 12px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  font-family: inherit;
  border-top: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.tab-btn:hover { color: var(--brand-forest); }
.tab-btn.active { color: var(--brand-forest); border-top-color: var(--brand-forest); }
.tab-btn.locked { opacity: 0.4; cursor: not-allowed; }
.tab-btn.locked:hover { color: var(--text-muted); }
.tab-btn.locked .tab-icon { filter: grayscale(0.7); }
.tab-icon { font-size: 1.15rem; }
.tab-label { font-size: 0.72rem; font-weight: 600; }

.tab-lock-toast {
  position: fixed;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%) translateY(8px);
  background: rgba(28, 41, 33, 0.94);
  color: #fff;
  font-family: inherit;
  font-size: 0.82rem;
  line-height: 1.45;
  padding: 10px 16px;
  border-radius: 10px;
  max-width: min(420px, calc(100% - 32px));
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 200;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.tab-lock-toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

main.tab-main {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 20px 40px;
}
@media (min-width: 900px) {
  main.tab-main { max-width: 960px; }
}

/* ── Hero banner + sections ── */
.hero-banner {
  background: linear-gradient(135deg, var(--brand-forest), #3f7d34);
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: 0 6px 20px rgba(82,155,68,0.25);
}
.hero-banner-tier {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  opacity: 0.85;
  margin-bottom: 6px;
}
.hero-banner-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  margin-bottom: 4px;
}
.hero-banner-stats { font-size: 0.85rem; opacity: 0.92; }

.hero-section { margin-bottom: 28px; }
.hero-section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.hero-section-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.first-play-banner {
  background: rgba(255, 243, 224, 0.55);
  border-left: 3px solid rgba(180, 130, 60, 0.55);
  border-radius: 6px;
  padding: 14px 18px;
}
.first-play-banner-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 6px 0;
}
.first-play-banner-body {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text);
  margin: 0;
}

/* ── Progressive disclosure: discovery phase ── */
.discovery-welcome-felt {
  margin: 10px 0 0;
  font-size: 0.88rem;
  font-style: italic;
  opacity: 0.92;
}
.h30-spoke-label--dim { opacity: 0.35; }

.unlock-banner {
  background: rgba(232, 245, 233, 0.9);
  border-left: 3px solid var(--brand-forest);
  border-radius: 6px;
  padding: 14px 18px;
  animation: unlock-pop 0.45s ease-out;
}
.unlock-banner--map {
  background: linear-gradient(135deg, rgba(232, 245, 233, 0.95), rgba(255, 243, 224, 0.9));
  border-left-width: 5px;
  text-align: center;
  padding: 20px 18px;
}
.unlock-banner-icon { font-size: 1.6rem; margin-bottom: 4px; }
.unlock-banner-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0 0 6px;
}
.unlock-banner-body {
  font-size: 0.92rem;
  line-height: 1.55;
  margin: 0;
}
@keyframes unlock-pop {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.quadrant-card--reveal { animation: quadrant-reveal 0.5s ease-out; }
@keyframes quadrant-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.locked-teaser {
  background: #fff;
  border: 1px dashed var(--border-light);
  border-radius: 8px;
  padding: 14px 18px;
}
.locked-teaser-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 8px;
}
.locked-teaser-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 0.88rem;
  color: var(--text-muted);
  padding: 4px 0;
}
.locked-teaser-lock { flex: 0 0 auto; }

/* ── Quadrants (Mind / Body / Spirit / Vocation) ── */
.quadrant-overall {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
}
.quadrant-overall-stat {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 8px 14px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.quadrant-overall-stat .label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
}
.quadrant-overall-stat .value {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
}
.quadrant-overall-stat .value.good { color: #16a085; }
.quadrant-overall-stat .value.fair { color: #f39c12; }
.quadrant-overall-stat .value.low  { color: #e74c3c; }

.quadrant-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 600px) {
  .quadrant-grid { grid-template-columns: 1fr; }
}
.quadrant-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px var(--shadow-soft);
}
.quadrant-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
}
.quadrant-icon { font-size: 1.2rem; }
.quadrant-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  flex: 1;
}
.quadrant-score {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-primary);
}
.quadrant-bar {
  height: 6px;
  background: rgba(0,0,0,0.06);
}
.quadrant-bar-fill { height: 100%; transition: width 0.4s ease; }
.quadrant-desc {
  padding: 10px 14px 0;
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.5;
}
.quadrant-domains {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-bottom: 1px solid var(--border-light);
}
.quadrant-domain-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.83rem;
}
.qd-icon { width: 18px; text-align: center; }
.qd-name { flex: 1; color: var(--text-muted); }
.qd-score { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.quadrant-skills { padding: 10px 14px 14px; }
.quadrant-skills-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 8px;
}
.quadrant-skills-empty {
  font-size: 0.78rem;
  color: var(--text-light);
  font-style: italic;
}
.skill-list { display: flex; flex-direction: column; gap: 8px; }
.skill-row {
  background: var(--bg-light);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
}
.skill-row-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.skill-name { font-size: 0.88rem; font-weight: 600; }
.skill-level {
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(0,0,0,0.06);
  padding: 2px 7px;
  border-radius: 9px;
}
.skill-bar {
  height: 4px;
  background: rgba(0,0,0,0.06);
  border-radius: 2px;
  margin: 5px 0 4px;
  overflow: hidden;
}
.skill-bar-fill { height: 100%; transition: width 0.4s ease; }
.skill-meta { font-size: 0.7rem; color: var(--text-light); }

/* ── Journal ── */
.journal-input {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid rgba(0,0,0,0.14);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.55;
  resize: vertical;
  outline: none;
  background: #fff;
}
.journal-input:focus { border-color: var(--brand-forest); }
.journal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 12px;
  flex-wrap: wrap;
}
.journal-tip { font-size: 0.78rem; color: var(--text-light); flex: 1; min-width: 200px; }
.journal-feedback {
  background: var(--brand-forest-08);
  border: 1px solid var(--brand-forest-15);
  color: var(--brand-forest);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  margin-top: 12px;
}
.journal-list { display: flex; flex-direction: column; gap: 12px; }
.journal-entry {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.journal-entry-time {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-light);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.journal-entry-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.journal-entry-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.skill-chip {
  background: var(--brand-forest-08);
  color: var(--brand-forest);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 10px;
}

/* legacy domain-grid (if any caller still uses it) */
.domain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}
.domain-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.domain-card-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.82rem; font-weight: 600; margin-bottom: 6px;
  color: var(--text-primary);
}
.domain-card-name { line-height: 1.3; }
.domain-card-score {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.4rem; font-weight: 600;
}
.domain-card-out { font-size: 0.78rem; color: var(--text-light); font-weight: 400; }
.domain-card-meta { font-size: 0.72rem; color: var(--text-light); margin-top: 4px; }
.domain-card .bar { max-width: none; height: 6px; }

/* ── 7-day experiments ── */
.experiment-active {
  background: #fff;
  border: 1px solid var(--brand-forest-15);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 22px;
  box-shadow: 0 4px 14px var(--shadow-soft);
}
.experiment-active-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.experiment-icon { font-size: 1.6rem; }
.experiment-active-title { flex: 1; }
.experiment-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  color: var(--brand-forest);
  text-transform: uppercase;
}
.experiment-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 2px;
}
.experiment-progress {
  height: 6px;
  background: rgba(82,155,68,0.12);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 14px;
}
.experiment-progress-fill {
  height: 100%;
  background: var(--brand-forest);
  transition: width 0.4s ease;
}
.experiment-block { margin-bottom: 12px; }
.experiment-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 4px;
}
.experiment-text {
  font-size: 0.92rem;
  color: var(--text-primary);
  line-height: 1.55;
}
.experiment-checkin {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}
.experiment-checkin-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 12px;
  flex-wrap: wrap;
}
.experiment-complete {
  background: var(--brand-forest-08);
  border: 1px solid var(--brand-forest);
  color: var(--brand-forest);
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  margin-top: 10px;
}
.experiment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.experiment-card {
  background: #fff;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius);
  padding: 14px 16px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.15s;
}
.experiment-card:hover {
  border-color: var(--brand-forest);
  background: var(--brand-forest-08);
  transform: translateY(-1px);
}
.experiment-card.active {
  border-color: var(--brand-forest);
  background: var(--brand-forest-08);
}
.experiment-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.experiment-card-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
}
.experiment-card-hypo {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  flex: 1;
}
.experiment-card-cta {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand-forest);
}

/* ── Quest cards (legacy, no longer rendered) ── */
.quest-list { display: flex; flex-direction: column; gap: 10px; }
.quest-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.quest-card.done { opacity: 0.55; background: var(--brand-forest-08); }
.quest-main { display: flex; align-items: center; gap: 12px; }
.quest-icon { font-size: 1.4rem; }
.quest-name { font-weight: 600; font-size: 0.95rem; }
.quest-rewards { font-size: 0.78rem; color: var(--text-light); }
.quest-btn {
  padding: 8px 16px;
  border: 1.5px solid var(--brand-forest);
  background: var(--brand-forest);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.quest-btn:hover:not(:disabled) { background: #3f7d34; }
.quest-btn:disabled {
  background: transparent; color: var(--brand-forest);
  cursor: default;
}
.phase-note {
  text-align: center;
  font-size: 0.78rem;
  color: var(--text-light);
  font-style: italic;
  margin: 16px 0 24px;
}

/* ── Planet / variable grids (Elder) ── */
.planet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px;
}
.planet-row {
  display: flex;
  justify-content: space-between;
  background: var(--bg-light);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
}
.planet-name { color: var(--text-muted); }
.planet-val { font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* ── Elder prompts ── */

/* Suggestions panel — collapsible container that wraps tabs + grid.
   Auto-shown for first-time users (empty thread), collapsed once chat
   starts. Visually subordinate to the chat block above it. */
.elder-prompts-panel {
  margin-top: 14px;
  padding: 14px 16px 6px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: rgba(155, 89, 182, 0.04);
}
.elder-prompts-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.elder-prompts-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.01em;
}
.prompt-refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--text-muted);
  transition: all 0.15s;
}
.prompt-refresh-btn:hover {
  border-color: var(--brand-forest);
  color: var(--text-primary);
  background: var(--brand-forest-08);
}
.prompt-refresh-btn:active .prompt-refresh-icon {
  transform: rotate(180deg);
}
.prompt-refresh-icon {
  display: inline-block;
  font-size: 0.95rem;
  line-height: 1;
  transition: transform 0.4s ease;
}
.prompts-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-light);
  padding: 4px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
  width: fit-content;
}
.prompts-tab {
  background: transparent;
  border: 0;
  padding: 7px 14px;
  border-radius: calc(var(--radius-sm) - 2px);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
  transition: background 0.12s, color 0.12s;
}
.prompts-tab:hover { color: var(--text-primary); }
.prompts-tab.active {
  background: #fff;
  color: var(--text-primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.prompt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.prompt-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.15s;
  color: var(--text-primary);
}
.prompt-chip:hover {
  border-color: var(--brand-forest);
  background: var(--brand-forest-08);
  transform: translateY(-1px);
}
.prompt-chip-icon { font-size: 1.2rem; }
.prompt-chip-label { font-size: 0.88rem; font-weight: 600; line-height: 1.35; }

.prompt-stage {
  background: #fff;
  border: 1px solid var(--brand-forest-15);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: 0 4px 14px var(--shadow-soft);
}
.prompt-stage-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px;
  font-size: 0.95rem;
}
.prompt-text {
  width: 100%;
  min-height: 220px;
  font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  padding: 12px 14px;
  border: 1.5px solid rgba(0,0,0,0.12);
  border-radius: var(--radius-sm);
  background: var(--bg-light);
  color: var(--text-primary);
  resize: vertical;
  outline: none;
}
.prompt-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.prompt-actions a.auth-btn { text-decoration: none; }

/* ── Settings modal ── */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.modal-card {
  background: #fff;
  width: 100%;
  max-width: 560px;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px var(--shadow-card);
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-light);
}
.modal-head h3 { font-size: 1.05rem; }
.modal-body { padding: 18px 20px; }

.settings-section {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--border-light);
}
.settings-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.settings-section h4 {
  font-size: 0.95rem;
  margin-bottom: 8px;
  color: var(--text-primary);
}
.settings-sub {
  font-size: 0.84rem;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 10px;
}
.settings-sub a { text-decoration: none; }
.settings-label {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.settings-label .journal-input { margin-top: 4px; }
.settings-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.settings-pill {
  display: inline-block;
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
}
.settings-pill.ok {
  background: var(--brand-forest-08);
  color: var(--brand-forest);
  border-color: var(--border-light);
  font-weight: 600;
}
.settings-pill.err {
  background: rgba(220, 53, 69, 0.10);
  color: #b8252f;
  border-color: rgba(220, 53, 69, 0.25);
  font-weight: 600;
}
.settings-pill.checking {
  background: rgba(155, 89, 182, 0.08);
  color: #7d4ea3;
  border-color: rgba(155, 89, 182, 0.18);
  font-style: italic;
}
.settings-license-status {
  margin-top: 10px;
  line-height: 1.6;
}
.settings-tabs {
  display: flex;
  gap: 4px;
  background: var(--bg-light);
  padding: 4px;
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.settings-tab {
  flex: 1;
  background: transparent;
  border: none;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-muted);
  transition: all 0.15s;
}
.settings-tab.active {
  background: #fff;
  color: var(--brand-forest);
  box-shadow: 0 1px 3px var(--shadow-soft);
}
.settings-pane .journal-input { margin-bottom: 8px; }
.settings-danger { color: #b04040 !important; border-color: #f5c2c2 !important; }

/* ── Elder chat ── */
.elder-mode-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.elder-upgrade-banner {
  background: linear-gradient(135deg, var(--brand-forest-08), rgba(241, 196, 15, 0.12));
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-primary);
  margin-bottom: 14px;
}
.elder-upgrade-banner strong { color: var(--brand-forest); }
.elder-upgrade-banner a { font-weight: 600; }

.experiment-picker-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}
.experiment-picker-head .auth-btn { white-space: nowrap; }
.elder-chat-block { margin-top: 18px; }
.elder-chat-title {
  font-size: 0.9rem;
  margin-bottom: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.elder-setup {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}
.elder-setup-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 18px;
  display: flex;
  flex-direction: column;
}
.elder-setup-card h4 {
  font-size: 1rem;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.elder-setup-sub {
  font-size: 0.84rem;
  color: var(--text-muted);
  margin-bottom: 12px;
  line-height: 1.5;
}
.elder-setup-link {
  font-size: 0.78rem;
  margin: 8px 0 12px;
}
.elder-setup-link a { text-decoration: none; }
.elder-setup-card .form-submit { width: 100%; }

.elder-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.elder-mode-badge {
  display: inline-block;
  background: var(--brand-forest-08);
  border: 1px solid var(--border-light);
  color: var(--brand-forest);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 600;
}
.elder-mode-badge.inactive {
  background: var(--bg-light);
  color: var(--text-muted);
}

.elder-thread {
  background: var(--bg-light);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 14px;
  min-height: 180px;
  max-height: 480px;
  overflow-y: auto;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.elder-empty {
  color: var(--text-light);
  font-size: 0.88rem;
  text-align: center;
  padding: 28px 16px;
}
.elder-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 0.92rem;
  line-height: 1.55;
  word-wrap: break-word;
}
.elder-bubble-user {
  align-self: flex-end;
  background: var(--brand-forest);
  color: #fff;
  border-bottom-right-radius: 4px;
}
.elder-bubble-elder {
  align-self: flex-start;
  background: #fff;
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  border-bottom-left-radius: 4px;
}
.elder-bubble-elder p { margin-bottom: 8px; }
.elder-bubble-elder p:last-child { margin-bottom: 0; }
.elder-bubble-error {
  align-self: center;
  background: #fff5f5;
  border: 1px solid #f5c2c2;
  color: #b04040;
  font-size: 0.84rem;
  max-width: 100%;
}

.elder-composer {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.elder-composer .form-submit { width: auto; align-self: flex-end; }

/* ── Elder placeholder ── */
.elder-placeholder {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.elder-emoji { font-size: 2.4rem; }
.elder-text strong { display: block; margin-bottom: 6px; font-size: 0.95rem; }
.elder-text p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; }

/* ── Chronicle ── */
.chronicle-empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--text-light);
  background: #fff;
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.chronicle-feed { display: flex; flex-direction: column; gap: 6px; }
.chronicle-row {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.88rem;
}
.chronicle-icon { font-size: 1rem; }
.chronicle-msg { flex: 1; color: var(--text-primary); }
.chronicle-time { font-size: 0.72rem; color: var(--text-light); white-space: nowrap; }

/* ── Discover-more card (persistent at bottom of every tab) ── */
.discover-card {
  margin-top: 28px;
  background: linear-gradient(160deg, #fff, var(--brand-forest-08));
  border: 1px solid var(--brand-forest-15);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: 0 2px 12px var(--shadow-soft);
}
.discover-card.complete {
  background: var(--brand-forest-08);
  border-color: var(--brand-forest);
  text-align: center;
  padding: 22px;
}
.discover-header {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 14px;
}
.discover-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand-forest);
}
.discover-progress-bar {
  height: 4px;
  background: rgba(82,155,68,0.15);
  border-radius: 2px;
  overflow: hidden;
}
.discover-progress-fill {
  height: 100%;
  background: var(--brand-forest);
  transition: width 0.4s ease;
}
.discover-domain {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 8px;
}
.discover-question {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 6px;
}
.discover-hint {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 14px;
}
.discover-text {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.discover-actions {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px;
  flex-wrap: wrap;
  gap: 8px;
}
.discover-note {
  font-size: 0.75rem;
  color: var(--text-light);
}
.link-btn {
  background: transparent;
  border: none;
  color: var(--brand-forest);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.link-btn:hover { background: var(--brand-forest-08); }
.lg-step-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--brand-forest);
  margin-bottom: 8px;
}
.lg-step-heading {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.22;
  margin-bottom: 8px;
}
.lg-step-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.domain-icon { display: inline-block; margin-right: 6px; }

.domain-progress {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 20px;
}
.domain-progress-row {
  display: flex; justify-content: space-between;
  font-size: 0.82rem; color: var(--text-muted);
  margin-bottom: 8px;
}
.domain-progress .bar { max-width: none; }

/* ── Form ── */
.form-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 28px 28px;
  box-shadow: 0 2px 16px var(--shadow-soft);
}
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  margin-bottom: 6px;
}
.form-group input, .form-group select {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid rgba(0,0,0,0.14);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-family: inherit;
  background: #fff;
  outline: none;
  transition: border-color 0.2s;
}
.form-group input:focus, .form-group select:focus { border-color: var(--brand-forest); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } .form-card { padding: 22px 18px; } }

.birthplace-group { position: relative; }
.birthplace-suggestions {
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff;
  border: 1.5px solid var(--brand-forest);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  z-index: 50; display: none;
  max-height: 220px; overflow-y: auto;
  box-shadow: 0 8px 24px var(--shadow-card);
}
.birthplace-suggestions.active { display: block; }
.birthplace-suggestion {
  padding: 10px 14px; font-size: 0.85rem; cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.birthplace-suggestion:hover { background: var(--brand-forest-08); }

.form-submit {
  width: 100%;
  padding: 13px 28px;
  border-radius: var(--radius-sm);
  border: none;
  background: var(--brand-forest);
  color: #fff;
  font-size: 0.98rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  margin-top: 4px;
}
.form-submit:hover:not(:disabled) { background: #3f7d34; transform: translateY(-1px); }
.form-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.form-note { font-size: 0.78rem; color: var(--text-light); text-align: center; margin-top: 12px; }

.loading-dots::after { content: '...'; animation: dots 1.2s steps(4, end) infinite; }
@keyframes dots {
  0%,20% { content: '.'; }
  40% { content: '..'; }
  60%,100% { content: '...'; }
}

.error-toast {
  display: none;
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: #991b1b;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  font-size: 0.88rem;
  margin-bottom: 16px;
}

/* ── Chart result (cloned styling) ── */
.chart-result { display: none; margin-top: 24px; }
.chart-felt-line {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.55;
  color: var(--brand-forest);
  background: #f6f3ec;
  border-left: 3px solid var(--brand-forest);
  padding: 18px 22px;
  border-radius: var(--radius);
  margin: 0 0 18px 0;
}
@media (max-width: 480px) {
  .chart-felt-line { font-size: 1.1rem; padding: 16px 18px; }
}
.discover-intro {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.6;
  color: #4a4a4a;
  margin: 0 0 16px 0;
  padding: 0 2px;
}
.chart-summary-grid--core {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 480px) {
  .chart-summary-grid--core { grid-template-columns: 1fr; }
}
.chart-summary-grid--core .chart-summary-value {
  font-size: 1.05rem;
  font-weight: 700;
}
.chart-full-details {
  margin: 0 0 16px 0;
}
.chart-full-summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-forest);
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  background: #fff;
  transition: background 0.15s;
}
.chart-full-summary:hover { background: #f6f3ec; }
.chart-full-summary::-webkit-details-marker { display: none; }
.chart-full-details[open] .chart-full-summary { margin-bottom: 12px; }
.chart-summary {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: 0 2px 12px var(--shadow-soft);
  margin-bottom: 16px;
}
.chart-summary h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem; font-weight: 600;
  margin-bottom: 16px;
}
.chart-summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (max-width: 480px) { .chart-summary-grid { grid-template-columns: 1fr; } }
.chart-summary-item { display: flex; flex-direction: column; gap: 3px; }
.chart-summary-label {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--brand-forest);
}
.chart-summary-value { font-size: 0.95rem; font-weight: 600; }
.center-tag, .channel-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.78rem;
}
.center-tag.defined   { background: var(--brand-forest-15); color: var(--brand-forest); font-weight: 600; }
.center-tag.undefined { background: rgba(0,0,0,0.06); color: var(--text-muted); font-weight: 600; }
.channel-tag {
  background: rgba(82,155,68,0.08); color: var(--text-muted);
  border: 1px solid var(--border-light);
}
.bodygraph-card {
  background: #fefcf8;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 16px;
  text-align: center;
  overflow: hidden;
}
.bodygraph-card svg { width: 100%; height: auto; display: block; }
.chart-report {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 26px 28px;
  font-size: 0.93rem;
  color: var(--text-muted);
  line-height: 1.75;
}
.chart-report h1, .chart-report h2, .chart-report h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--text-primary);
  margin: 16px 0 8px;
}
.chart-report h2 { font-size: 1.15rem; }
.chart-report h3 { font-size: 1rem; }
.chart-report ul { padding-left: 20px; margin: 8px 0; }
.chart-report li { margin-bottom: 6px; }
.chart-report p { margin-bottom: 10px; }
.chart-report hr { border: none; border-top: 1px solid var(--border-light); margin: 16px 0; }
.chart-report strong { color: var(--text-primary); font-weight: 600; }

/* CTA right after the mini-report — points readers to the deeper $29 Blueprint */
.mini-report-cta {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 22px 24px 24px;
  margin-top: 16px;
  text-align: center;
}
.mini-report-cta-eyebrow {
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-forest);
  font-weight: 600;
  margin-bottom: 6px;
}
.mini-report-cta-h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 8px;
  line-height: 1.35;
}
.mini-report-cta-body {
  font-size: 0.92rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 16px;
}
.mini-report-cta-body ul {
  text-align: left;
  list-style: none;
  padding: 0;
  margin: 0 0 10px;
  display: inline-block;
}
.mini-report-cta-body ul li {
  padding: 3px 0 3px 18px;
  position: relative;
}
.mini-report-cta-body ul li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--brand-forest);
  font-size: 0.85rem;
}
.mini-report-cta-body .cta-meta {
  font-size: 0.82rem;
  color: var(--text-faint, #aaa);
  margin-top: 6px;
}
.mini-report-cta-btn {
  display: inline-block;
  padding: 11px 22px;
  background: var(--brand-forest);
  color: #fff !important;
  font-weight: 600;
  font-size: 0.92rem;
  border-radius: var(--radius-sm, 6px);
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.mini-report-cta-btn:hover { background: #3f7d34; transform: translateY(-1px); }

/* ── Question cards ── */
.question-card {
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 14px;
  box-shadow: 0 1px 4px var(--shadow-soft);
}
.question-text { font-size: 1rem; font-weight: 600; margin-bottom: 6px; line-height: 1.5; }
.question-hint { font-size: 0.82rem; color: var(--text-light); margin-bottom: 14px; }
.scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 6px;
}
.scale-btn {
  padding: 10px 0;
  border: 1.5px solid rgba(0,0,0,0.12);
  background: #fff;
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-muted);
  transition: all 0.15s;
}
.scale-btn:hover { border-color: var(--brand-forest); color: var(--brand-forest); }
.scale-btn.active {
  background: var(--brand-forest);
  border-color: var(--brand-forest);
  color: #fff;
}
.scale-legend {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-light);
  padding: 0 4px;
}

/* ── Footer nav (Back/Next) ── */
.step-footer {
  position: sticky;
  bottom: 0;
  background: rgba(253,251,247,0.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,0,0,0.06);
  padding: 12px 20px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  max-width: 720px;
  margin: 0 auto;
}
.step-footer button {
  flex: 1;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--brand-forest);
  background: #fff;
  color: var(--brand-forest);
  cursor: pointer;
  transition: all 0.15s;
}
.step-footer button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.step-footer #btn-next {
  background: var(--brand-forest);
  color: #fff;
}
.step-footer #btn-next:hover:not(:disabled) { background: #3f7d34; }
.step-footer #btn-back:hover:not(:disabled) { background: var(--brand-forest-08); }

/* ── Human 3.0 chart ─────────────────────────────────────────────────────── */
.h30-section { background: #fff; border: 1px solid var(--border-light); border-radius: var(--radius); padding: 24px; margin: 20px 0; }
.h30-header { text-align: center; margin-bottom: 12px; }
.h30-title { font-size: 2rem; font-weight: 800; letter-spacing: 1px; }
.h30-sub { color: var(--text-light); font-size: 0.9rem; margin-top: 4px; }
.h30-discovery-hint {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--brand-forest);
  background: #f6f3ec;
  border: 1px dashed rgba(45, 92, 56, 0.35);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin: 12px auto 0;
  max-width: 560px;
}
.h30-grid {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(320px, 720px) minmax(180px, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 24px 28px;
  align-items: center;
  margin-top: 12px;
}
.h30-corner { font-size: 0.85rem; line-height: 1.55; color: var(--text-muted); max-width: 240px; }
.h30-corner-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.h30-corner h4 { font-size: 1.05rem; font-weight: 800; color: var(--text-primary); margin: 0; letter-spacing: 0.01em; }
.h30-corner-pct { font-size: 0.95rem; font-weight: 700; color: var(--brand-forest); }
.h30-corner-sub {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.h30-corner p { margin: 0; }
.h30-corner.tl { grid-column: 1; grid-row: 1; text-align: left; justify-self: end; }
.h30-corner.tr { grid-column: 3; grid-row: 1; text-align: left; justify-self: start; }
.h30-corner.bl { grid-column: 1; grid-row: 2; text-align: left; justify-self: end; }
.h30-corner.br { grid-column: 3; grid-row: 2; text-align: left; justify-self: start; }
.h30-chart { grid-column: 2; grid-row: 1 / span 2; width: 100%; }
.h30-svg { width: 100%; height: auto; max-width: 720px; display: block; margin: 0 auto; }
.h30-axis-label { font-family: 'Inter', system-ui, sans-serif; fill: #1a1a1a; font-weight: 700; }
.h30-axis-cap { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }
/* Cap chart visual size when section is narrow (no breakout). */
@media (max-width: 899px) {
  .h30-svg { max-width: 460px; }
}
/* Tablet / narrow desktop: keep side-by-side but with smaller corner blocks. */
@media (max-width: 899px) and (min-width: 600px) {
  .h30-grid {
    grid-template-columns: minmax(150px, 1fr) minmax(220px, 460px) minmax(150px, 1fr);
    gap: 16px 18px;
  }
  .h30-corner { font-size: 0.78rem; line-height: 1.5; max-width: 180px; }
  .h30-corner h4 { font-size: 0.95rem; }
  .h30-corner p { font-size: 0.78rem; }
}
/* True mobile: stack corners above/below the chart. */
@media (max-width: 599px) {
  .h30-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; gap: 16px; }
  .h30-corner, .h30-corner.tl, .h30-corner.tr, .h30-corner.bl, .h30-corner.br {
    text-align: left; justify-self: stretch; max-width: none;
  }
  .h30-corner.tl { grid-column: 1; grid-row: 1; }
  .h30-corner.tr { grid-column: 2; grid-row: 1; }
  .h30-corner.bl { grid-column: 1; grid-row: 3; }
  .h30-corner.br { grid-column: 2; grid-row: 3; }
  .h30-chart { grid-column: 1 / span 2; grid-row: 2; }
  .h30-svg { max-width: 420px; }
}

.h30-legend {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}
@media (max-width: 720px) {
  .h30-legend { grid-template-columns: 1fr; }
}
.h30-legend-block { min-width: 0; }
.h30-legend-block h5 { font-size: 0.85rem; font-weight: 700; margin: 0 0 6px 0; letter-spacing: 0.02em; }
.h30-legend-axis { font-size: 0.95rem; font-weight: 500; color: var(--text-muted); margin-left: 2px; }
.h30-legend-intro { font-size: 0.8rem; color: var(--text-muted); line-height: 1.75; margin: 0; }
.h30-legend-intro b { color: var(--text-primary); font-weight: 700; }
.h30-legend-row {
  font-size: 0.8rem;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
  margin-bottom: 10px;
}
.h30-legend-row:last-child { margin-bottom: 0; }
.h30-legend-row .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.h30-legend-row-body { display: block; }
.h30-legend-row-body b { color: var(--text-primary); font-weight: 700; }
.h30-legend-row-sub {
  display: block;
  font-size: 0.72rem;
  color: var(--text-light);
  letter-spacing: 0.02em;
  margin-top: 1px;
}

.prompt-section-label { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); margin-bottom: 8px; letter-spacing: 0.3px; }

.elder-composer-actions { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 8px; }

/* Language toggle (badge bar) */
.lang-toggle { display: inline-flex; gap: 0; border: 1px solid var(--border, rgba(0,0,0,0.15)); border-radius: 6px; overflow: hidden; margin-right: 4px; }
.lang-toggle-btn { background: transparent; border: 0; padding: 4px 8px; font-size: 0.78rem; font-weight: 600; color: var(--text-muted, #666); cursor: pointer; line-height: 1.2; letter-spacing: 0.5px; }
.lang-toggle-btn + .lang-toggle-btn { border-left: 1px solid var(--border, rgba(0,0,0,0.15)); }
.lang-toggle-btn.active { background: var(--text, #1a1a1a); color: #fff; }
.lang-toggle-btn:hover:not(.active) { background: rgba(0,0,0,0.05); }

/* Journey tab — coming soon placeholder */
.journey-coming-soon { text-align: center; padding: 56px 24px; }
.journey-eyebrow { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.5px; color: var(--text-muted, #666); margin-bottom: 12px; }
.journey-coming-soon .hero-section-title { margin-bottom: 12px; }
.journey-coming-soon .hero-section-sub { max-width: 540px; margin: 0 auto 28px; }
.journey-soon { display: inline-block; padding: 8px 18px; border-radius: 999px; background: rgba(88,214,141,0.18); color: #2e8b57; font-weight: 600; font-size: 0.95rem; }

/* Email-sent banner (chart step) */
.email-sent-banner { background: rgba(88,214,141,0.12); border: 1px solid rgba(88,214,141,0.4); color: #1c6e3f; padding: 14px 18px; border-radius: 10px; margin-bottom: 16px; font-size: 0.95rem; line-height: 1.55; }
.email-sent-banner strong { color: #0f4d2a; }

/* User-triggered email send: prompt + button + dismissable toast */
.email-send-block {
  margin-top: 22px;
  padding: 18px 20px;
  background: #fbf8f1;
  border: 1px solid #e3dac2;
  border-radius: 12px;
  text-align: center;
}
.email-send-lead {
  margin: 0 0 8px;
  color: #3f7d34;
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.4;
}
.email-send-prompt {
  margin: 0 0 12px;
  color: #3f3a32;
  font-size: 0.95rem;
  line-height: 1.55;
}
.email-send-prompt strong { color: #3f7d34; }
.email-send-btn { margin: 0; }
.email-send-btn:disabled { opacity: 0.65; cursor: default; }

.email-sent-toast {
  margin-top: 22px;
  padding: 16px 18px;
  background: rgba(88,214,141,0.12);
  border: 1px solid rgba(88,214,141,0.4);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.email-sent-toast[hidden] { display: none; }
.email-sent-toast-body {
  color: #1c6e3f;
  font-size: 0.95rem;
  line-height: 1.55;
  flex: 1 1 240px;
  text-align: left;
}
.email-sent-toast-body strong { color: #0f4d2a; }
.email-sent-toast-dismiss {
  background: #1c6e3f;
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.email-sent-toast-dismiss:hover { background: #0f4d2a; }

/* ── Experiment tab: stats banner ── */
.exp-stats-empty .hero-section-sub { font-style: italic; opacity: 0.8; }
.exp-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-top: 8px;
}
.exp-stat-card {
  background: rgba(88,214,141,0.08);
  border: 1px solid rgba(88,214,141,0.2);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
}
.exp-stat-num {
  font-family: 'Fraunces', serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: #2e8b57;
  line-height: 1.1;
}
.exp-stat-unit { font-size: 0.85rem; opacity: 0.7; font-weight: 500; }
.exp-stat-label {
  margin-top: 4px;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.75;
}
@media (max-width: 640px) {
  .exp-stats-row { grid-template-columns: repeat(2, 1fr); }
}

/* ── Experiment tab: tag chips ── */
.tag-chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag-chip {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.78rem;
  background: rgba(0,0,0,0.05);
  color: var(--text-secondary, #555);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.12s ease;
}
.tag-chip.static { cursor: default; }
.tag-chip:not(.static):hover { background: rgba(88,214,141,0.12); }
.tag-chip.active {
  background: rgba(88,214,141,0.22);
  color: #1c6e3f;
  border-color: rgba(88,214,141,0.5);
}

/* ── Experiment tab: aliveness chip in past entries ── */
.aliveness-chip {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  background: rgba(88,214,141,0.15);
  color: #2e8b57;
}
.aliveness-chip.a1 { background: rgba(192,57,43,0.15); color: #c0392b; }
.aliveness-chip.a2 { background: rgba(230,126,34,0.15); color: #b35418; }
.aliveness-chip.a3 { background: rgba(241,196,15,0.18); color: #8a7600; }
.aliveness-chip.a4 { background: rgba(88,214,141,0.18); color: #2e8b57; }
.aliveness-chip.a5 { background: rgba(46,204,113,0.25); color: #1a7d4a; }

/* ── Experiment tab: templates toggle ── */
.experiment-templates-toggle { margin-top: 8px; text-align: right; }

/* ── Experiment tab: modal (reuses .modal-backdrop / .modal-card) ── */
.exp-modal .modal-card { max-width: 640px; }
.exp-modal .modal-body { max-height: 70vh; overflow-y: auto; }

/* ── Check-in modal: aliveness 1-5 row ── */
.checkin-step { padding: 4px 0; }
.checkin-q {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  margin-bottom: 6px;
}
.checkin-hint { font-size: 0.85rem; opacity: 0.75; margin-bottom: 14px; }
.aliveness-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 8px;
}
.aliveness-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 14px 4px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.1);
  background: #fff;
  cursor: pointer;
  transition: all 0.12s ease;
  min-height: 86px;
}
.aliveness-btn:hover { background: rgba(88,214,141,0.08); border-color: rgba(88,214,141,0.3); }
.aliveness-btn.active {
  background: rgba(88,214,141,0.18);
  border-color: rgba(88,214,141,0.55);
  color: #1c6e3f;
  box-shadow: 0 4px 14px rgba(88,214,141,0.18);
}
.aliveness-num { font-family: 'Fraunces', serif; font-size: 1.35rem; font-weight: 600; }
.aliveness-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.85; }
@media (max-width: 480px) {
  .aliveness-row { grid-template-columns: repeat(5, 1fr); gap: 4px; }
  .aliveness-btn { min-height: 72px; padding: 10px 2px; }
  .aliveness-num { font-size: 1.1rem; }
  .aliveness-label { font-size: 0.62rem; }
}

.checkin-summary { text-align: center; padding: 14px 0; }
.checkin-summary-line { font-size: 1.05rem; opacity: 0.85; margin-bottom: 8px; }
.checkin-feedback { font-size: 0.88rem; opacity: 0.8; }

/* ── Scratch form: duration radio ── */
.exp-scratch-form .settings-label { margin-bottom: 8px; }
.duration-radio {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.duration-btn {
  flex: 1 1 auto;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  cursor: pointer;
  font-size: 0.88rem;
  transition: all 0.12s ease;
}
.duration-btn:hover { background: rgba(88,214,141,0.08); }
.duration-btn.active {
  background: rgba(88,214,141,0.2);
  border-color: rgba(88,214,141,0.55);
  color: #1c6e3f;
  font-weight: 600;
}

/* Scratch form spacing */
.exp-scratch-form .journal-input { margin-bottom: 4px; }

/* ── Journey tab ───────────────────────────────────────────────────── */
.journey-empty .journey-empty-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.journey-cta-btn { flex: 1 1 auto; min-width: 200px; }

.journey-modal .modal-card { max-width: 520px; }

.journey-active .journey-active-head {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: space-between;
}
.journey-active-titles { flex: 1 1 60%; min-width: 0; }
.journey-active-titles .hero-section-title { margin: 4px 0 6px; }
.journey-domain-line {
  font-size: 0.78rem;
  opacity: 0.65;
  margin-top: 4px;
  font-style: italic;
}

.journey-week-indicator {
  text-align: right;
  min-width: 130px;
}
.journey-week-of {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 6px;
}
.journey-week-dots {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}
.journey-week-dot {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.12);
  background: #fff;
  color: rgba(0,0,0,0.45);
}
.journey-week-dot.done { background: rgba(88,214,141,0.25); color: #1c6e3f; border-color: rgba(88,214,141,0.55); }
.journey-week-dot.current { background: #1c6e3f; color: #fff; border-color: #1c6e3f; }
.journey-week-dot.pending { opacity: 0.55; }

.journey-week-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 14px;
  padding: 18px 18px 14px;
  margin-bottom: 14px;
}
.journey-week-head { margin-bottom: 12px; }
.journey-week-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #1c6e3f;
  margin-bottom: 4px;
}
.journey-week-sub {
  font-size: 0.92rem;
  opacity: 0.78;
  line-height: 1.5;
}

.journey-questions { display: flex; flex-direction: column; gap: 14px; }
.journey-question-block {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 12px;
}
.journey-question-block:first-child { border-top: 0; padding-top: 0; }
.journey-q-label {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.journey-q-hint {
  font-size: 0.82rem;
  opacity: 0.7;
  margin-bottom: 8px;
  line-height: 1.45;
}
.journey-q-input { width: 100%; }
.journey-q-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.journey-ask-elder-btn { font-size: 0.82rem; }

.journey-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.journey-chip-row.tight { gap: 6px; }
.journey-chip {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  font-size: 0.82rem;
  transition: background 0.12s ease, border-color 0.12s ease;
  flex: 1 1 200px;
  min-width: 160px;
}
.journey-chip.small { flex: 0 0 auto; min-width: auto; padding: 6px 12px; }
.journey-chip:hover { background: rgba(88,214,141,0.08); border-color: rgba(88,214,141,0.4); }
.journey-chip-label { font-weight: 600; }
.journey-chip-sub { opacity: 0.7; font-style: italic; font-size: 0.78rem; }
.journey-chip-fits { opacity: 0.6; font-size: 0.74rem; }

.journey-weekly-review {
  margin-top: 16px;
  padding: 12px;
  background: rgba(155, 89, 182, 0.06);
  border-radius: 10px;
}
.journey-weekly-review-sub {
  font-size: 0.78rem;
  opacity: 0.7;
  margin-top: 4px;
}

.journey-advance-row {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  flex-wrap: wrap;
}
.journey-advance-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.journey-advance-hint { font-size: 0.78rem; opacity: 0.65; font-style: italic; }

.journey-tools-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.journey-history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.journey-history-row {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
}
.journey-history-row-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.journey-history-row-titles { flex: 1; min-width: 0; }
.journey-history-row-title { font-weight: 600; }
.journey-history-row-meta {
  font-size: 0.78rem;
  opacity: 0.65;
  margin-top: 2px;
}
.journey-history-toggle { font-size: 0.84rem; }
.journey-history-empty { font-style: italic; opacity: 0.7; }
.journey-history-body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.journey-history-week-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.7;
  margin-bottom: 4px;
}
.journey-history-entry { margin-bottom: 6px; }
.journey-history-key {
  font-size: 0.78rem;
  font-weight: 600;
  opacity: 0.8;
}
.journey-history-val {
  font-size: 0.88rem;
  line-height: 1.5;
  opacity: 0.85;
}

@media (max-width: 480px) {
  .journey-active .journey-active-head { flex-direction: column; }
  .journey-week-indicator { text-align: left; }
  .journey-week-dots { justify-content: flex-start; }
  .journey-cta-btn { min-width: 100%; }
}


/* ─── Hero tab — Diagnosis layer (synthesis + paired charts + cards) ─── */

.hero-headline-text {
  font-size: 0.97rem;
  line-height: 1.55;
  opacity: 0.95;
  margin-top: 6px;
}

/* Synthesis block — cream bg, serif body, 4px brand-forest left border to
   match the Blueprint hook card so the brand reads continuously. */
.synthesis-block {
  background: #fbf8f1;
  border-left: 4px solid var(--brand-forest, #529b44);
  padding: 18px 22px;
  border-radius: 8px;
}
.synthesis-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-forest, #529b44);
  margin-bottom: 8px;
}
.synthesis-body {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.06rem;
  line-height: 1.65;
  margin: 0;
  color: #1a1a1a;
}
.synthesis-body em {
  font-style: italic;
  color: #2a2a2a;
}
.synthesis-body p {
  margin: 0 0 0.7em;
}
.synthesis-body p:last-child {
  margin-bottom: 0;
}
.synthesis-body p.synthesis-tail {
  margin-top: 0.9em;
  font-size: 0.96rem;
  color: #4a4a4a;
}
/* Phase 7d — "since last take" delta line (under the bridge sentence). */
.synthesis-since {
  margin: 14px 0 0 0;
  padding: 10px 14px;
  background: #fff;
  border-left: 3px solid var(--brand-forest, #529b44);
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: #2a2a2a;
}

/* Per-session flavor: rotating type reminder, open-center tip, and HD
   quote stacked under the bridge sentence. Picked once per page load
   (see lib/synthesis-flavor.js) so the page reads fresh each login. */
.synthesis-flavor {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed rgba(82, 155, 68, 0.3);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.synthesis-reminder {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #2a2a2a;
}
.synthesis-reminder em { font-style: italic; color: #1a1a1a; }
.synthesis-reminder strong { color: var(--brand-forest, #529b44); }
.synthesis-tip {
  margin: 0;
  padding-left: 18px;
  position: relative;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #2a2a2a;
}
.synthesis-tip::before {
  content: '•';
  position: absolute;
  left: 4px;
  color: var(--brand-forest, #529b44);
  font-weight: 700;
}
.synthesis-quote {
  margin: 4px 0 0 0;
  padding: 8px 0 8px 14px;
  border-left: 3px solid rgba(82, 155, 68, 0.35);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.55;
  color: #333;
}
.synthesis-quote cite {
  display: block;
  margin-top: 4px;
  font-size: 0.82rem;
  font-style: normal;
  opacity: 0.7;
}

/* Archetype micro-block — sits beneath the synthesis block. Reuses
   synthesis-block chrome; differentiates with a mode badge + tighter
   prose. */
.archetype-block { margin-top: 14px; }
.archetype-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
}
.archetype-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(82, 155, 68, 0.14);
  color: var(--brand-forest, #529b44);
}
.archetype-badge--detailed {
  background: var(--brand-forest, #529b44);
  color: #fff;
}
.archetype-confidence {
  margin: 0 0 8px 0;
  font-size: 0.88rem;
  color: #555;
  line-height: 1.5;
}
.archetype-label {
  margin: 0 0 8px 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #1a1a1a;
}
.archetype-label em { font-style: italic; color: #444; }
.archetype-body { font-size: 1rem; }
.archetype-pain-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.88rem;
  color: var(--brand-forest, #529b44);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Paired-charts: bodygraph (left) + radial (right). Stacks on mobile. */
.charts-paired-section .hero-section-title { margin-bottom: 14px; }
.charts-paired {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.charts-paired-col {
  display: flex;
  flex-direction: column;
}
.charts-caption {
  font-size: 0.85rem;
  font-style: italic;
  opacity: 0.7;
  margin: 8px 0 14px 0;
  text-align: center;
}
.h30-radial-wrap {
  background: #fafafa;
  border-radius: 8px;
  padding: 8px;
}
.h30-radial-wrap .h30-svg { width: 100%; height: auto; display: block; }

/* Spokes & polygons — open-center spokes dashed; current dotted; enough dashed-stroke. */
.h30-spoke--open { stroke: rgba(80,40,20,0.6); }
.h30-poly--current { transition: opacity 200ms ease; }
.h30-poly--enough { opacity: 0.85; }

/* Phase 7b — radial labels (compass / tier rings / spokes) + legend below. */
.h30-quadrant-label {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.h30-quadrant-chip--mind     .h30-quadrant-label { fill: #6e3a96; }
.h30-quadrant-chip--body     .h30-quadrant-label { fill: #c0392b; }
.h30-quadrant-chip--spirit   .h30-quadrant-label { fill: #b8890b; }
.h30-quadrant-chip--vocation .h30-quadrant-label { fill: #2980b9; }
.h30-tier-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  fill: rgba(20,20,20,0.55);
  letter-spacing: 0.05em;
  cursor: help;
}
.h30-spoke-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  fill: #2a2a2a;
  paint-order: stroke;
  stroke: rgba(255,255,255,0.85);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Auto-fit so the 3-block legend folds gracefully when the radial column
   is narrow (desktop with bodygraph + radial sharing 50/50 width). */
.h30-legend {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-top: 12px;
  padding: 12px;
  background: rgba(0,0,0,0.025);
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.5;
}
.h30-legend-block { min-width: 0; }
.h30-legend-title {
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
  color: #1a1a1a;
}
.h30-legend-axis {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.55;
  font-size: 0.72rem;
}
.h30-legend-row {
  margin-bottom: 4px;
  font-size: 0.78rem;
}
.h30-legend-row-sub { opacity: 0.6; font-size: 0.72rem; }
.h30-legend-body {
  font-size: 0.78rem;
  opacity: 0.85;
}

@media (max-width: 768px) {
  .charts-paired { grid-template-columns: 1fr; gap: 12px; }
  .h30-quadrant-label { font-size: 18px; }
  .h30-spoke-label { font-size: 10px; }
}

/* Quadrant card domain row — current/enough/gap + center anchor tag. */
.quadrant-domain-row--rich {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 6px;
  border-bottom: 1px dashed rgba(0,0,0,0.06);
}
.quadrant-domain-row--rich:last-child { border-bottom: none; }
.qd-line-1 { display: flex; align-items: center; gap: 6px; }
.qd-line-2 { display: flex; align-items: center; gap: 14px; }
.qd-line-3 { padding-top: 2px; }

.center-tag-mini {
  font-size: 0.75rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.05);
  color: #333;
}
.center-tag-mini--open {
  background: rgba(231, 76, 60, 0.10);
  color: #b34;
  border: 1px dashed rgba(231,76,60,0.4);
}
.center-tag-mini--defined {
  background: rgba(82,155,68,0.10);
  color: #2a5d2c;
}

.gap-stat {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 50px;
}
.gap-stat-num { font-weight: 700; font-size: 0.95rem; line-height: 1; }
.gap-stat-lbl { font-size: 0.66rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.gap-stat--gap .gap-stat-num { color: #c0392b; }

/* Enough slider — Step 2 + Hero inline edit. */
.enough-slider {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 18px;
}
.enough-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.enough-slider-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0;
}
.enough-slider-value {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand-forest, #529b44);
}
.enough-slider-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: linear-gradient(to right,
    var(--enough-color, #529b44) 0%,
    var(--enough-color, #529b44) var(--enough-fill, 80%),
    rgba(0,0,0,0.10) var(--enough-fill, 80%),
    rgba(0,0,0,0.10) 100%);
  border-radius: 3px;
  outline: none;
  margin: 4px 0;
}
.enough-slider-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--enough-color, #529b44);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.enough-slider-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--enough-color, #529b44);
  cursor: pointer;
}
.enough-slider-input--mini { height: 4px; margin: 2px 0; }
.enough-slider-input--mini::-webkit-slider-thumb { width: 14px; height: 14px; }
.enough-slider-input--mini::-moz-range-thumb { width: 14px; height: 14px; }

.enough-slider-help {
  font-size: 0.85rem;
  margin: 6px 0 0 0;
  opacity: 0.75;
  line-height: 1.5;
}
.enough-slider-defer {
  font-size: 0.85rem;
  margin: 8px 0 0 0;
  color: var(--brand-forest, #529b44);
  font-weight: 600;
  line-height: 1.5;
}

/* Phase 7 — dimmed default treatment + "drag me" pulse on the thumb. */
.enough-slider-value[data-default] {
  color: rgba(0,0,0,0.42);
  font-weight: 500;
}
.enough-slider-value[data-default] .enough-slider-value-default {
  font-size: 0.8rem;
  font-weight: 400;
  font-style: italic;
  margin-left: 4px;
}
.enough-slider-value:not([data-default]) .enough-slider-value-default {
  display: none;
}
@keyframes slider-thumb-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(82,155,68,0.55), 0 1px 3px rgba(0,0,0,0.15); }
  60%  { box-shadow: 0 0 0 12px rgba(82,155,68,0), 0 1px 3px rgba(0,0,0,0.15); }
  100% { box-shadow: 0 0 0 0 rgba(82,155,68,0), 0 1px 3px rgba(0,0,0,0.15); }
}
.enough-slider-input--first-touch::-webkit-slider-thumb {
  animation: slider-thumb-pulse 1.6s ease-out 2;
}
.enough-slider-input--first-touch::-moz-range-thumb {
  animation: slider-thumb-pulse 1.6s ease-out 2;
}

/* Tier line — replaces single mean tier. */
.tier-line {
  background: rgba(0,0,0,0.025);
  border-radius: 8px;
  padding: 14px 18px;
}
.tier-line-row {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 6px;
}
.tier-line-stat { font-size: 0.95rem; }
.tier-line-interp { font-size: 0.85rem; opacity: 0.7; margin: 0; line-height: 1.5; }

/* Where-to-start — pain card + workflow + experiment as one unit. */
.where-to-start {
  background: linear-gradient(135deg, rgba(82,155,68,0.06), rgba(82,155,68,0.02));
  border-radius: 10px;
  padding: 22px 24px;
  border: 1px solid rgba(82,155,68,0.15);
}
.where-to-start-pain {
  display: inline-block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--brand-forest, #529b44);
  margin-bottom: 14px;
  text-decoration: none;
  border-bottom: 1px dashed rgba(82,155,68,0.5);
  padding-bottom: 1px;
}
.where-to-start-pain:hover { border-bottom-style: solid; }
.where-to-start-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.where-to-start-card {
  background: #fff;
  border-radius: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(0,0,0,0.06);
}
.where-to-start-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 8px;
}
.where-to-start-link {
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--brand-forest, #529b44);
  text-decoration: none;
}
.where-to-start-link:hover { text-decoration: underline; }
@media (max-width: 600px) {
  .where-to-start-grid { grid-template-columns: 1fr; }
}

/* Phase 9 — "Why we chose this" reasoning panel + alternatives. */
.where-to-start-why {
  margin-top: 14px;
  background: rgba(255,255,255,0.55);
  border-radius: 8px;
  border: 1px solid rgba(82,155,68,0.15);
  padding: 0;
}
.where-to-start-why[open] {
  background: #fff;
}
.where-to-start-why-summary {
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--brand-forest, #529b44);
  padding: 10px 14px;
  list-style: none;
  user-select: none;
}
.where-to-start-why-summary::-webkit-details-marker { display: none; }
.where-to-start-why-summary::before {
  content: '▸ ';
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.15s ease;
}
.where-to-start-why[open] .where-to-start-why-summary::before {
  transform: rotate(90deg);
}
.where-to-start-why-body {
  padding: 4px 16px 14px 18px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #2a2a2a;
}
.where-to-start-why-body p { margin: 0 0 8px; }
.where-to-start-why-body p:last-child { margin-bottom: 0; }
.where-to-start-why-note {
  margin-top: 10px !important;
  padding: 10px 12px;
  background: rgba(247, 220, 90, 0.18);
  border-left: 3px solid #d4a800;
  border-radius: 4px;
  font-size: 0.86rem;
  color: #5a4400;
}

.where-to-start-alts {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(82,155,68,0.25);
}
.where-to-start-alts-title {
  font-size: 0.96rem;
  font-weight: 700;
  color: #2a2a2a;
  margin: 0 0 4px;
}
.where-to-start-alts-sub {
  font-size: 0.84rem;
  color: #555;
  margin: 0 0 12px;
}
.where-to-start-alts-empty {
  font-size: 0.86rem;
  color: #666;
  margin: 0;
  font-style: italic;
}
.where-to-start-alts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.where-to-start-alt-card {
  background: #fff;
  border-radius: 8px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.where-to-start-alt-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #888;
}
.where-to-start-alt-pain {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--brand-forest, #529b44);
  text-decoration: none;
  border-bottom: 1px dashed rgba(82,155,68,0.4);
  padding-bottom: 1px;
  align-self: flex-start;
}
.where-to-start-alt-pain:hover { border-bottom-style: solid; }
.where-to-start-alt-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.where-to-start-alt-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.65;
}
.where-to-start-alt-exp-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #2a2a2a;
}
@media (max-width: 600px) {
  .where-to-start-alts-grid { grid-template-columns: 1fr; }
}

/* Two doors — Elder + Blueprint side by side. */
.two-doors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.two-doors-card {
  background: #fff;
  border-radius: 10px;
  padding: 18px 20px;
  border: 1px solid rgba(0,0,0,0.08);
  text-align: center;
}
.two-doors-card--elder { background: rgba(82,155,68,0.04); }
.two-doors-card--blueprint { background: rgba(255,196,82,0.06); }
.two-doors-btn {
  display: inline-block;
  background: var(--brand-forest, #529b44);
  color: #fff;
  font-weight: 600;
  border: none;
  border-radius: 6px;
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.two-doors-card--blueprint .two-doors-btn { background: #b07a1d; }
.two-doors-btn:hover { opacity: 0.9; }
.two-doors-sub {
  font-size: 0.82rem;
  margin: 0;
  opacity: 0.7;
  line-height: 1.5;
}
@media (max-width: 600px) {
  .two-doors { grid-template-columns: 1fr; }
}

/* ─── Hero — Theory U reflection (Phase 2) ─── */
.theory-u {
  background: rgba(255, 196, 82, 0.05);
  border-radius: 10px;
  padding: 0;
  border: 1px solid rgba(176, 122, 29, 0.18);
}
.theory-u-details {
  padding: 0;
}
.theory-u-summary {
  list-style: none;
  cursor: pointer;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.theory-u-summary::-webkit-details-marker { display: none; }
.theory-u-summary::before {
  content: '▸';
  display: inline-block;
  transition: transform 150ms ease;
  opacity: 0.55;
  font-size: 0.8rem;
}
.theory-u-details[open] .theory-u-summary::before {
  transform: rotate(90deg);
}
.theory-u-icon {
  font-size: 1.1rem;
}
.theory-u-title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  flex: 1;
}
.theory-u-saved {
  font-size: 0.75rem;
  color: #2a5d2c;
  background: rgba(82, 155, 68, 0.12);
  padding: 2px 8px;
  border-radius: 999px;
  font-weight: 600;
}
.theory-u-intro {
  font-size: 0.9rem;
  margin: 0 20px 14px 20px;
  opacity: 0.75;
  line-height: 1.5;
  font-style: italic;
}
.theory-u-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 0 20px 20px 20px;
}
.theory-u-prompt {
  background: #fff;
  border-radius: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.theory-u-label {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: 0.98rem;
  color: #b07a1d;
  margin-bottom: 4px;
}
.theory-u-helper {
  font-size: 0.85rem;
  margin: 0 0 8px 0;
  opacity: 0.75;
  line-height: 1.5;
}
.theory-u-input {
  width: 100%;
  font-family: inherit;
  font-size: 0.93rem;
  line-height: 1.6;
  padding: 10px 12px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  resize: vertical;
  background: #fafaf7;
}
.theory-u-input:focus {
  outline: none;
  border-color: #b07a1d;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(176, 122, 29, 0.12);
}
@media (min-width: 768px) {
  .theory-u-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ─── Save-as-image row ─── */
.save-card-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 8px;
}
.save-card-btn {
  background: var(--brand-forest, #529b44);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
}
.save-card-btn:hover { opacity: 0.92; }
.save-card-btn:disabled { opacity: 0.55; cursor: wait; }
.save-card-help {
  font-size: 0.85rem;
  opacity: 0.7;
  flex: 1;
  min-width: 220px;
}

/* Type-aware note inside synthesis block */
.synthesis-typenote {
  margin: 12px 0 0 0;
  padding: 12px 14px;
  background: rgba(176, 122, 29, 0.08);
  border-left: 3px solid rgba(176, 122, 29, 0.6);
  border-radius: 4px;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #4a3818;
}

/* ─── Phase 5 — felt-sense 1–10 scale ─── */
.scale--ten {
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
.scale--ten .scale-btn {
  padding: 12px 0;
  font-size: 0.92rem;
}
@media (max-width: 480px) {
  .scale--ten {
    grid-template-columns: repeat(10, 1fr);
    gap: 4px;
  }
  .scale--ten .scale-btn {
    padding: 10px 0;
    font-size: 0.82rem;
  }
}

/* The single felt-sense question card has more breathing room than the
   old 4-5 stacked Likert cards. */
.question-card--felt {
  padding-top: 22px;
  padding-bottom: 22px;
}
.question-card--felt .question-text {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.18rem;
  line-height: 1.5;
  margin-bottom: 8px;
}
.question-card--felt .question-hint {
  font-style: italic;
  font-size: 0.88rem;
  margin-bottom: 18px;
  opacity: 0.75;
}

/* ─── Phase 7c — re-take footer at end of Hero ─── */
.retake-footer {
  background: rgba(176, 122, 29, 0.06);
  border: 1px dashed rgba(176, 122, 29, 0.35);
  border-radius: 10px;
  padding: 22px 24px;
  margin-top: 36px;
}
.retake-footer-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #4a3818;
}
.retake-footer-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4a3818;
  margin: 0 0 12px 0;
}
.retake-footer-encourage {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #6a5028;
  margin: 0 0 18px 0;
  font-style: italic;
}
.retake-footer-stat {
  background: #fff;
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: #4a3818;
}
.retake-footer-btn {
  background: var(--brand-forest, #529b44);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px 20px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-block;
}
.retake-footer-btn:hover { filter: brightness(1.08); }
.retake-footer-feedback {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed rgba(176, 122, 29, 0.35);
}
.retake-footer-feedback-prompt {
  font-size: 0.88rem;
  line-height: 1.55;
  color: #4a3818;
  margin: 0 0 10px 0;
}
.retake-footer-feedback-btn {
  display: inline-block;
  background: #fff;
  color: var(--brand-forest, #529b44);
  border: 1.5px solid var(--brand-forest, #529b44);
  border-radius: 6px;
  padding: 9px 16px;
  font-weight: 600;
  font-size: 0.92rem;
  text-decoration: none;
}
.retake-footer-feedback-btn:hover {
  background: var(--brand-forest, #529b44);
  color: #fff;
}

/* Variance bands on the radial — open-center spokes get amber-red, all
   else olive. Drawn under the polygons via stacking order. */
.h30-variance {
  opacity: 0.85;
}

/* Phase 7b — Discovery slot pinned to the top of Hero (right under the
   synthesis bridge). Inherits .discover-card's existing styling; the
   wrapper just visually links the questions back to the synthesis line
   above ("your scores read X% — answer below to refine"). */
.discovery-slot .discover-card {
  margin-top: 0;
  border-left: 4px solid var(--brand-forest, #529b44);
}
/* Detailed-mode discovery card — different border accent so the user
   knows they have opted into the deeper path. */
.discover-card--detailed {
  border-left: 4px solid var(--brand-forest, #529b44);
  background: linear-gradient(160deg, #fff, rgba(176,122,29,0.05));
}
/* Detailed-mode 1–5 scale — buttons stretch to fill the row, big enough
   to tap on phones (44px+ touch target). */
.scale--five {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-top: 12px;
  margin-bottom: 8px;
}
.scale--five .scale-btn {
  padding: 18px 0;
  font-size: 1.1rem;
  min-height: 52px;
  font-weight: 700;
}
@media (max-width: 480px) {
  .scale--five { gap: 6px; }
  .scale--five .scale-btn {
    padding: 16px 0;
    font-size: 1rem;
    min-height: 48px;
  }
}

/* Phase 8 — Hero "Where to start" sequence header + dual-CTA experiment card */
.where-to-start-sequence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 4px 0 10px 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.where-to-start-step-sep { opacity: 0.4; }
.where-to-start-card--experiment .where-to-start-title {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.where-to-start-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.where-to-start-cta.primary {
  display: inline-block;
  background: var(--brand-forest, #529b44);
  color: #fff;
  font-weight: 600;
  font-size: 0.92rem;
  padding: 8px 14px;
  border-radius: 6px;
  text-decoration: none;
}
.where-to-start-cta.primary:hover { filter: brightness(1.08); text-decoration: none; }
.where-to-start-link.secondary {
  font-size: 0.88rem;
  opacity: 0.8;
}

/* Phase 8 — Experiment "Suggested for you" + per-card article link */
.suggested-for-you .suggested-grid { margin-top: 8px; }
.experiment-card.suggested {
  border-color: rgba(82, 155, 68, 0.45);
  box-shadow: 0 0 0 1px rgba(82, 155, 68, 0.18) inset;
}
.experiment-card-badge {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(82, 155, 68, 0.15);
  color: var(--brand-forest, #529b44);
  padding: 3px 7px;
  border-radius: 4px;
}
.template-article-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--brand-forest, #529b44);
  text-decoration: none;
  font-weight: 500;
}
.template-article-link:hover { text-decoration: underline; }
.experiment-card.template-card--highlighted {
  animation: template-card-flash 2.5s ease-out;
}
@keyframes template-card-flash {
  0%   { box-shadow: 0 0 0 3px rgba(82, 155, 68, 0.55); }
  100% { box-shadow: 0 0 0 0 rgba(82, 155, 68, 0); }
}