/* Lifecycle layouts share the public-site design-system tokens. */
.about-lifecycle { padding-block: 0 clamp(24px, 4vw, 48px); }
.creation-timeline { --timeline-icon-size: clamp(36px, 7vw, 64px); display: flex; max-width: 640px; margin: 0 auto; padding: 16px 0; list-style: none; }
.creation-timeline li { position: relative; display: grid; flex: 1 1 0; min-width: 0; place-items: center; }
.creation-timeline li:not(:last-child)::after { position: absolute; top: 50%; left: calc(50% + var(--timeline-icon-size) / 2 + 8px); width: calc(100% - var(--timeline-icon-size) - 16px); border-top: 1px dashed var(--brand-soft); opacity: .55; content: ''; }
.creation-timeline svg { display: block; width: var(--timeline-icon-size); height: var(--timeline-icon-size); opacity: .85; }
.app-steps { gap: 12px; }
.app-step { gap: 10px; min-width: 0; }
#step-keep-tab { --step-pop: var(--brand); --step-wash: var(--brand-pale); --step-edge: var(--brand); }
#step-send-tab { --step-pop: var(--pop-sun); --step-wash: var(--pop-sun-wash); --step-edge: var(--gold); }
.step-bubble svg { width: 100%; height: 100%; }
@media (min-width: 761px) and (max-width: 1100px) {
  .app-step { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 760px) {
  .app-step::after { content: '+'; margin-left: auto; color: var(--brand); }
  .app-step[aria-expanded="true"]::after { content: '−'; }
  .app-steps > .step-panel { min-height: 0; margin-block: 12px 24px; padding: 24px; gap: 24px; border-radius: var(--radius); }
  .app-steps > .step-panel .step-panel-art { min-height: 0; }
  .step-panels { margin-top: 0; }
}