/* ==========================================================================
   Component: vertical timeline (numbered steps joined by a dashed vermilion stitch).
   Used by: private label, how it works.   Animated by LH.timeline() in global.js.
   ========================================================================== */

.lh-timeline-wrap{position:relative;max-width:920px}
.lh-timeline__line{position:absolute;z-index:0;left:27px;top:28px;bottom:28px;width:3px;border-radius:3px;background-image:repeating-linear-gradient(180deg,var(--lh-vermilion) 0 9px,transparent 9px 17px)}
.lh-timeline{list-style:none;position:relative;z-index:1;display:grid;gap:clamp(20px,2.4vw,34px);margin:0;padding:0}
.lh-tl-item{display:grid;grid-template-columns:56px minmax(0,1fr);gap:clamp(16px,2.4vw,32px);align-items:start}
.lh-tl-node{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:#fff;border:1px solid var(--lh-line);box-shadow:var(--lh-sh-md);font-family:var(--lh-font-head);font-size:26px;line-height:1;color:var(--lh-vermilion)}
.lh-tl-card{background:#fff;border:1px solid var(--lh-line);border-radius:var(--lh-r-xl);box-shadow:var(--lh-sh-sm);padding:clamp(20px,2.2vw,30px)}
.lh-tl-card__title{font-size:clamp(26px,2.4vw,34px);margin-bottom:8px}
.lh-tl-card p{color:var(--lh-stone);margin:0 0 14px}

/* Start state for the scroll animation (only when motion is allowed) */
.lh-anim .lh-timeline__line{clip-path:inset(0 0 100% 0)}
.lh-anim .lh-tl-node{transform:scale(.6);opacity:.35}

@media (max-width:600px){
  .lh-timeline__line{left:21px}
  .lh-tl-item{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .lh-tl-node{width:44px;height:44px;font-size:22px}
}
@media (prefers-reduced-motion:reduce){
  .lh-anim .lh-timeline__line{clip-path:none}
  .lh-anim .lh-tl-node{transform:none;opacity:1}
}