/* ================================================================
   Sections — Shared collapsible toggle, milestone banner
   ================================================================ */

/* ── Collapsible Section (shared) ──────────────────────────────── */
.section-toggle,
.comparisons-toggle {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: transparent; border: none;
  color: var(--text-ghost); font-size: clamp(8px, 2vw, 10px);
  font-family: inherit; cursor: pointer; padding: 6px 0; margin: 0 auto;
  transition: color 0.4s ease; letter-spacing: 0.15em; text-transform: uppercase;
}

.section-toggle:hover,
.comparisons-toggle:hover { color: rgba(183,199,223,0.45); }

.section-toggle .toggle-arrow,
.comparisons-toggle .toggle-arrow {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 6px; opacity: 0.4;
}

.section-toggle.open .toggle-arrow,
.comparisons-toggle.open .toggle-arrow { transform: rotate(180deg); }

.section-collapse {
  max-height: 0; overflow: hidden;
  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
  opacity: 0;
}

.section-collapse.open { max-height: 2000px; opacity: 1; }

/* ── Milestone Banner ──────────────────────────────────────────── */
.milestone-banner { margin-top: 14px; text-align: center; animation: fadeIn 1s ease-out 1.6s both; min-height: 20px; }

.milestone-text {
  display: inline-block; padding: 4px 0;
  font-size: clamp(9px, 2.2vw, 11px); color: var(--text-faint);
  line-height: 1.4; letter-spacing: 0.03em; transition: color 0.5s ease;
}

.milestone-text.anniversary-mode { color: rgba(255,239,119,0.4); }
.milestone-text.milestone-fade { animation: milestoneFade 0.6s ease-out; }