.process-steps { background: var(--color-bg-muted); }
.process-steps--dark { color: #fff; background: var(--color-dark); }
.process-steps__layout { display: grid; align-items: start; gap: clamp(46px, 7vw, 110px); grid-template-columns: minmax(280px, 0.72fr) minmax(0, 1.28fr); }
.process-steps__header { position: sticky; top: 120px; }
.process-steps__eyebrow { display: block; margin-bottom: 15px; color: var(--color-accent); font-size: 13px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.process-steps__header h2 { margin-bottom: 18px; }
.process-steps--dark .process-steps__header h2 { color: #fff; }
.process-steps__header p { max-width: 480px; margin: 0; color: var(--color-text); font-size: 17px; line-height: 1.6; }
.process-steps--dark .process-steps__header p { color: rgba(255, 255, 255, 0.68); }
.process-steps__list { display: grid; margin: 0; padding: 0; list-style: none; }
.process-steps__list li { display: grid; align-items: start; gap: 24px; padding: 30px 0; border-top: 1px solid var(--color-border); grid-template-columns: 54px minmax(0, 1fr); }
.process-steps--dark .process-steps__list li { border-color: rgba(255, 255, 255, 0.16); }
.process-steps__number { color: var(--color-accent); font-size: 18px; font-weight: 900; }
.process-steps__list h3 { margin: 0 0 9px; font-size: 23px; }
.process-steps--dark .process-steps__list h3 { color: #fff; }
.process-steps__list p { max-width: 720px; margin: 0; color: var(--color-text); font-size: 15px; line-height: 1.6; }
.process-steps--dark .process-steps__list p { color: rgba(255, 255, 255, 0.68); }
.process-steps__action { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; color: var(--color-accent); font-size: 14px; font-weight: 800; }
.process-steps__action span { font-size: 18px; }
.process-steps__action:hover { color: #fff; }
.process-steps__action:is(button) { padding: 0; border: 0; background: transparent; cursor: pointer; }
.process-steps__editable-heading h2 { margin-bottom: 18px; }
.process-steps__editable-heading p { max-width: 480px; margin: 0; color: var(--color-text); font-size: 17px; line-height: 1.6; }
.process-steps--dark .process-steps__editable-heading h2 { color: #fff; }
.process-steps--dark .process-steps__editable-heading p { color: rgba(255, 255, 255, .68); }

@media (max-width: 900px) { .process-steps__layout { grid-template-columns: 1fr; } .process-steps__header { position: static; } }
@media (max-width: 767px) { .process-steps__list li { gap: 12px; grid-template-columns: 42px minmax(0, 1fr); } .process-steps__list h3 { font-size: 20px; } }