.smiles-scroll-timeline {
    --timeline-primary: #416c99;
    --timeline-heading: #243756;
    --timeline-text: #667184;
    --timeline-track: #d9e0e7;
    --timeline-node-size: 52px;
    --timeline-duration: 450ms;
    width: 100%;
    color: var(--timeline-heading);
    font-family: inherit;
}

.smiles-scroll-timeline,
.smiles-scroll-timeline * { box-sizing: border-box; }

.smiles-timeline__header { max-width: 760px; margin-bottom: 52px; padding-left: 2em; }
.smiles-timeline__eyebrow { display: block; margin-bottom: 12px; color: var(--timeline-primary); font-size: 12px; font-weight: 700; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; }
.smiles-timeline__title { margin: 0; color: var(--timeline-heading); font-size: clamp(32px, 4vw, 52px); font-weight: 700; line-height: 1.12; letter-spacing: -.035em; }
.smiles-timeline__description { max-width: 680px; margin-top: 18px; color: var(--timeline-text); font-size: 16px; line-height: 1.75; }
.smiles-timeline__description p,
.smiles-timeline__step-description p { margin: 0; }
.smiles-timeline__body { position: relative; }

.smiles-timeline__track {
    position: absolute;
    z-index: 0;
    top: calc(var(--timeline-node-size) / 2 - 2px);
    right: calc((100% / var(--timeline-count)) / 2);
    left: calc((100% / var(--timeline-count)) / 2);
    height: 4px;
    overflow: hidden;
    border-radius: 99px;
    background: var(--timeline-track);
}

.smiles-timeline__progress { display: block; width: calc(var(--timeline-progress, 0) * 100%); height: 100%; border-radius: inherit; background: var(--timeline-primary); transition: width 100ms linear; }
.smiles-timeline__steps { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(var(--timeline-count), minmax(0, 1fr)); gap: var(--timeline-gap, 28px); margin: 0; padding: 0; list-style: none; }
.smiles-timeline__step { min-width: 0; text-align: center; }

.smiles-timeline__number {
    display: inline-flex;
    width: var(--timeline-node-size);
    height: var(--timeline-node-size);
    align-items: center;
    justify-content: center;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 1px var(--timeline-track), 0 10px 24px rgba(36, 55, 86, .1);
    color: var(--timeline-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: color var(--timeline-duration) ease, background-color var(--timeline-duration) ease, box-shadow var(--timeline-duration) ease, transform var(--timeline-duration) ease;
}

.smiles-timeline__step.is-active .smiles-timeline__number { background: var(--timeline-primary); color: #fff; box-shadow: 0 0 0 1px var(--timeline-primary), 0 12px 28px rgba(65, 108, 153, .24); transform: scale(1.06); }
.smiles-timeline__content { margin-top: 24px; opacity: .45; transform: translateY(10px); transition: opacity var(--timeline-duration) ease, transform var(--timeline-duration) ease; }
.smiles-timeline__step.is-active .smiles-timeline__content { opacity: 1; transform: translateY(0); }
.smiles-timeline__label { display: block; margin-bottom: 7px; color: var(--timeline-primary); font-size: 11px; font-weight: 700; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; }
.smiles-timeline__step-title { margin: 0; color: var(--timeline-heading); font-size: 19px; font-weight: 700; line-height: 1.3; }
.smiles-timeline__step-description { margin-top: 12px; color: var(--timeline-text); font-size: 14px; line-height: 1.7; }

@media (max-width: 767px) {
    .smiles-timeline__header { margin-bottom: 38px; }
    .smiles-timeline__title { font-size: clamp(30px, 9vw, 40px); }
    .smiles-timeline__steps { display: flex; flex-direction: column; gap: var(--timeline-gap, 34px); }
    .smiles-timeline__step { display: grid; grid-template-columns: var(--timeline-node-size) minmax(0, 1fr); gap: 18px; align-items: start; text-align: left; }
    .smiles-timeline__track { top: calc(var(--timeline-node-size) / 2); right: auto; bottom: calc(var(--timeline-node-size) / 2); left: calc(var(--timeline-node-size) / 2 - 2px); width: 4px; height: auto; }
    .smiles-timeline__progress { width: 100%; height: calc(var(--timeline-progress, 0) * 100%); transition: height 100ms linear; }
    .smiles-timeline__content { margin-top: 4px; padding-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .smiles-timeline__progress,
    .smiles-timeline__number,
    .smiles-timeline__content { transition: none; }
}