/* Homepage-only timeline; type and spacing match the existing homepage. */
.timeline-section { width: 100%; margin: clamp(56px, 7vw, 96px) auto clamp(76px, 9vw, 112px); text-align: center; }
.timeline-intro { max-width: 660px; margin: 0 auto 38px; }
.timeline-intro .badge { margin: 0 0 22px; }
.timeline-intro h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.18; font-weight: 700; letter-spacing: -.025em; margin: 0 0 22px; }
.timeline-intro > p:last-child { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; margin: 0 auto; max-width: 56ch; color: var(--grey-mid); }
.timeline-figure { margin: 0; }
[data-ai-timeline] { width: 100%; max-width: 960px; margin-inline: auto; }
.timeline-svg { display: block; height: auto; margin-inline: auto; overflow: visible; font-family: var(--font-body); }
.timeline-svg .node { fill: var(--bg); stroke: var(--grey); stroke-width: 1.5; }
.timeline-svg .future { stroke-dasharray: 1.5 4.5; }
.timeline-svg .annotation { fill: none; stroke: var(--grid-major-page); stroke-width: 1.5; }
/* The reference implementation's Scale uses structural grey. A knocked-out
   strip separates this true time axis from the board's 96px major rules. */
.timeline-svg .scale, .timeline-svg .edge { fill: none; stroke: var(--grey); stroke-width: 1.5; stroke-linecap: butt; }
.timeline-svg .plot-point { fill: var(--bg); stroke: var(--grey); stroke-width: 1.5; }
.timeline-svg .open-label { fill: var(--bg); stroke: none; }
.timeline-svg .label { font-size: 16px; fill: var(--white); }
.timeline-svg .muted { fill: var(--grey-mid); }
.timeline-svg .meta { font-family: var(--font-mono); font-size: 12px; fill: var(--grey-mid); }
.timeline-svg .year { font-family: var(--font-mono); font-size: 16px; fill: var(--grey-mid); }
.timeline-svg .emphasis { fill: var(--bg); stroke: var(--yellow); stroke-width: 2.25; }
.timeline-svg .ticks, .timeline-svg .star { fill: none; stroke: var(--yellow); stroke-width: 1.5; }
.timeline-svg .star { stroke-width: 2.25; }
.timeline-svg .question-mark { font-size: 26px; fill: var(--white); }
.timeline-svg .knockout { fill: var(--bg); }
.timeline-source:hover .label, .timeline-source:focus-visible .label { text-decoration: underline; }
.motion-enabled .reveal-now, .motion-enabled .reveal-question, .motion-enabled .reveal-earlier { opacity: 0; transition: opacity 1.2s ease; }
.motion-enabled.show-now .reveal-now, .motion-enabled.show-question .reveal-question, .motion-enabled.show-earlier .reveal-earlier { opacity: 1; }
.motion-enabled.resetting .reveal-now, .motion-enabled.resetting .reveal-question, .motion-enabled.resetting .reveal-earlier { transition: none; }
.timeline-invitation { margin: 38px auto 0; max-width: 620px; }
.timeline-invitation.homepage-closing { margin-top: clamp(56px, 7vw, 96px); }
.timeline-invitation h3 { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 12px; }
.timeline-invitation p { font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--grey-mid); margin: 0 0 24px; }
.timeline-invitation .cta { margin: 0; }
.timeline-fallback { max-width: 660px; margin: 0 auto; color: var(--grey-mid); line-height: 1.6; text-align: left; }
.timeline-fallback li { margin-block: 8px; }
.mobile-now { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .motion-enabled .reveal-now, .motion-enabled .reveal-question, .motion-enabled .reveal-earlier { opacity: 1; transition: none; }
}