/* yak-steps — numbered process list (prototype: home "เริ่มใช้งานได้ในไม่กี่ขั้นตอน" + services "custom" card). */
.yak-steps { display: flex; flex-direction: column; gap: 32px; }
.yak-steps.yak-steps--boxed { border-radius: 24px; padding: clamp(28px, 4vw, 48px); }

/* Head */
.yak-steps__head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.yak-steps__head--compact { gap: 14px; max-width: 920px; }
.yak-steps__heading { margin: 0; color: var(--ink-primary); }
.yak-steps__heading--compact { font-size: clamp(20px, 2.3vw, 25px); line-height: 1.5; font-weight: 700; text-wrap: pretty; }
.yak-steps__lead { margin: 0; }

/* List */
.yak-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--yak-min, 230px)), 1fr)); gap: 20px; }
.yak-steps__item { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 4px 8px 0 0; margin: 0; }
.yak-steps__line { display: none; position: absolute; top: 17px; left: 48px; right: -12px; height: var(--line-signature-width, 2.5px); border-radius: 2px; background: var(--gradient-route); box-shadow: var(--line-signature-glow, 0 0 18px rgba(247,205,15,.32)); pointer-events: none; }
.yak-steps__num {
  position: relative; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: var(--gradient-button-primary); box-shadow: var(--shadow-cta), var(--shadow-inset);
  color: var(--ink-primary); font-size: 15px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}
.yak-steps__title { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--ink-primary); }
.yak-steps--boxed .yak-steps__title { font-size: 17px; line-height: 1.35; }
.yak-steps__text { font-size: 15px; line-height: 1.55; color: var(--ink-secondary); }

/* Route line only between steps and only on wide layouts (prototype hides it on mobile). */
@media (min-width: 1000px) { .yak-steps__item:not(:last-child) .yak-steps__line { display: block; } }

.yak-steps__action { display: flex; flex-wrap: wrap; gap: 12px; }