/* The homepage's typography and dark-mode palette remain the source of truth. */
.tn-timeline { margin: 48px 0; }
.tn-timeline[hidden], .tn-timeline [hidden] { display: none !important; }
.tn-timeline > .spanborder { margin: 0 0 26px; }
.tn-timeline .tn-timeline-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 24px; list-style: none; padding: 0; margin: 0; }
.tn-timeline .tn-timeline-item { flex: 0 0 calc((100% - 48px) / 3); max-width: 400px; min-width: 0; margin: 0; padding: 0; display: flex; }
.tn-timeline-card { width: 100%; display: flex; flex-direction: column; border: 1px solid #e1e3e5; border-radius: 12px; overflow: hidden; background: #fafafa; color: #252525; }
.tn-timeline .tn-timeline-cover { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; object-position: center; margin: 0; border: 0; }
.tn-timeline-copy { padding: 22px; min-width: 0; flex: 1; }
.tn-timeline .tn-timeline-copy time { display: block; margin: 0 0 12px; font-size: 13px; color: #666; }
.tn-timeline .tn-timeline-copy p { margin: 0; font-family: inherit; font-size: 17px; line-height: 1.65; color: inherit; overflow-wrap: anywhere; }
.tn-timeline-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.tn-timeline-actions:not(:has(> :not([hidden]))) { display: none; }
.tn-timeline-status { margin: 16px 0 0; text-align: center; }
.tn-timeline button:disabled { opacity: .6; cursor: wait; }
.tn-timeline button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.tn-cover-unavailable::before { content: ''; display: block; aspect-ratio: 3 / 1; background: linear-gradient(125deg, #224f56, #9eb5a9, #d9c59b); }
body.dark-mode .tn-timeline-card { background: #242424; color: #e9e9e9; border-color: #414141; }
body.dark-mode .tn-timeline .tn-timeline-copy time { color: #bdbdbd; }
body.dark-mode .tn-timeline-cover { filter: brightness(.85) saturate(.9); }
body.dark-mode .tn-timeline .btn-outline-dark { color: #eee; border-color: #777; }
body.dark-mode .tn-timeline .btn-outline-dark:hover { background: #eee; color: #222; }
@media (max-width: 991px) { .tn-timeline .tn-timeline-item { flex-basis: calc((100% - 24px) / 2); } }
@media (max-width: 575px) { .tn-timeline { margin: 32px 0; } .tn-timeline .tn-timeline-item { flex-basis: 100%; } .tn-timeline-copy { padding: 20px; } .tn-timeline-actions .btn { max-width: 100%; white-space: normal; } }