/* Process steps: stepper with timed progress lines above one card (media left, step text right). */
.sy-ps { --ps-ease: cubic-bezier(.2, .7, .2, 1); padding: clamp(64px, 8vw, 112px) clamp(16px, 6vw, 85px); background: var(--sy-mist-2, #f5f8fa); }
.sy-ps__inner { max-width: 1290px; margin: 0 auto; }
.sy-ps__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px 56px; align-items: end; margin-bottom: clamp(30px, 3.6vw, 48px); }
.sy-ps__head .sy-kicker { margin: 0 0 12px; }
.sy-ps .sy-ps__title { margin: 0; font-size: clamp(30px, 3.2vw, 44px); font-weight: 600; letter-spacing: -.02em; line-height: 1.12; color: var(--sy-ink, #263653); }
.sy-ps__lead { display: grid; justify-items: end; gap: 20px; }
.sy-ps__lead .sy-ps__intro { justify-self: stretch; }
.sy-ps__intro { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--sy-muted, #59677a); }
.sy-ps__cta { display: inline-flex; align-items: center; gap: 14px; min-height: 50px; padding: 0 22px; border-radius: var(--sy-radius, 8px); background: var(--sy-navy, #283951); color: #fff; font-size: 15px; font-weight: 600; text-decoration: none; transition: background .2s, transform .25s var(--ps-ease); }
.sy-ps__cta:hover { background: #1b2a3e; color: #fff; transform: translateY(-1px); }
.sy-ps__cta:active { transform: translateY(1px); }
.sy-ps__cta .sy-arrow, .sy-ps__next .sy-arrow { transition: transform .3s var(--ps-ease); }
.sy-ps__cta:hover .sy-arrow, .sy-ps__next:hover .sy-arrow { transform: translateX(4px); }
.sy-ps__cta:focus-visible { outline: 2px solid var(--sy-navy, #283951); outline-offset: 3px; }

/* Stepper */
.sy-ps__tabs { display: grid; grid-template-columns: repeat(var(--ps-n, 4), minmax(0, 1fr)); gap: 0 clamp(10px, 1.6vw, 20px); margin-bottom: 18px; }
.sy-ps__tab { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; align-content: start; gap: 12px; padding: 0 0 6px; border: 0; background: none; text-align: left; font: inherit; color: var(--sy-muted, #59677a); cursor: pointer; transition: color .25s; }
.sy-ps__track { grid-column: 1 / -1; display: block; height: 3px; margin-bottom: 12px; border-radius: 3px; background: #dfe5ea; overflow: hidden; }
.sy-ps__fill { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--sy-navy, #283951); transform: scaleX(0); transform-origin: left center; will-change: transform; }
[dir="rtl"] .sy-ps__fill { transform-origin: right center; }
.sy-ps__tab.is-done .sy-ps__fill, .sy-ps.is-manual .sy-ps__tab.is-active .sy-ps__fill { transform: scaleX(1); }
.sy-ps.is-manual .sy-ps__fill { transition: transform .5s var(--ps-ease); }
.sy-ps__num { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #d6dde3; font-size: 12.5px; font-weight: 600; letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--sy-muted, #59677a); transition: background .3s, color .3s, box-shadow .3s; }
.sy-ps__num .sy-ico { position: absolute; opacity: 0; transform: scale(.6); transition: opacity .25s, transform .35s var(--ps-ease); }
.sy-ps__num span { transition: opacity .2s; }
.sy-ps__name { font-size: clamp(15px, 1.2vw, 16.5px); font-weight: 600; line-height: 1.3; }
.sy-ps__tab:hover { color: var(--sy-ink, #263653); }
.sy-ps__tab:hover .sy-ps__num { box-shadow: inset 0 0 0 1px var(--sy-navy, #283951); color: var(--sy-ink, #263653); }
.sy-ps__tab.is-done { color: var(--sy-ink, #263653); }
.sy-ps__tab.is-done .sy-ps__num { background: #e7ecf1; box-shadow: none; color: var(--sy-navy, #283951); }
.sy-ps__tab.is-done .sy-ps__num span { opacity: 0; }
.sy-ps__tab.is-done .sy-ps__num .sy-ico { opacity: 1; transform: none; }
.sy-ps__tab.is-active { color: var(--sy-ink, #263653); }
.sy-ps__tab.is-active .sy-ps__num { background: var(--sy-navy, #283951); box-shadow: 0 6px 14px -6px rgba(40, 57, 81, .6); color: #fff; }
.sy-ps__tab:focus-visible { outline: 2px solid var(--sy-navy, #283951); outline-offset: 6px; border-radius: 6px; }

/* Card */
.sy-ps__card { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); background: #fff; border-radius: var(--sy-radius-lg, 16px); overflow: hidden; box-shadow: 0 1px 2px rgba(21, 33, 52, .05), 0 30px 60px -36px rgba(21, 33, 52, .35); }
.sy-ps__stage { position: relative; min-height: 400px; background: #1a2435; }
.sy-ps__media { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--ps-ease); }
.sy-ps__media.is-active { opacity: 1; }
.sy-ps__media video, .sy-ps__media img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 6s linear; }
.sy-ps__media.is-active video, .sy-ps__media.is-active img { transform: scale(1); }
.sy-ps__panels { display: grid; align-items: center; padding: clamp(28px, 3.6vw, 52px); }
.sy-ps__panel { grid-area: 1 / 1; display: grid; justify-items: start; align-content: center; gap: 14px; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity .35s var(--ps-ease), transform .5s var(--ps-ease), visibility 0s .35s; }
.sy-ps__panel.is-active { visibility: visible; opacity: 1; transform: none; transition: opacity .45s var(--ps-ease) .1s, transform .6s var(--ps-ease) .1s, visibility 0s; }
.sy-ps__step-k { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--sy-muted, #59677a); font-variant-numeric: tabular-nums; }
.sy-ps .sy-ps__step-h { margin: 0; font-size: clamp(24px, 2.3vw, 30px); font-weight: 600; letter-spacing: -.015em; line-height: 1.2; color: var(--sy-ink, #263653); }
.sy-ps__text { margin: 0; font-size: 16px; line-height: 1.65; color: var(--sy-muted, #59677a); max-width: 46ch; }
.sy-ps__facts { display: grid; gap: 10px; margin: 6px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid #edf1f4; width: 100%; }
.sy-ps__facts li { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 10px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--sy-ink, #263653); }
.sy-ps__facts .sy-ico { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #e9f4ee; color: #2f8a57; }
.sy-ps__next { justify-self: end; display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 0; border: 0; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--sy-navy, #283951); text-decoration: none; cursor: pointer; }
.sy-ps__next span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .35s var(--ps-ease); }
.sy-ps__next:hover { color: var(--sy-navy, #283951); }
.sy-ps__next:hover span { background-size: 100% 1px; }
.sy-ps__next:focus-visible { outline: 2px solid var(--sy-navy, #283951); outline-offset: 3px; border-radius: 4px; }

/* No JavaScript: show every step's text, one after another. */
html:not(.sy-js) .sy-ps__panel { grid-area: auto; visibility: visible; opacity: 1; transform: none; }
html:not(.sy-js) .sy-ps__panels { gap: 32px; }
html:not(.sy-js) .sy-ps__next[data-go] { display: none; }

@media (max-width: 960px) {
	.sy-ps__head { grid-template-columns: 1fr; }
	.sy-ps__lead { justify-items: start; }
	.sy-ps__card { grid-template-columns: 1fr; }
	.sy-ps__stage { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
	.sy-ps__tabs { gap: 0 8px; }
	.sy-ps__tab { grid-template-columns: 1fr; gap: 8px; }
	.sy-ps__num { width: 28px; height: 28px; font-size: 11.5px; }
	.sy-ps__name { font-size: 12.5px; font-weight: 500; }
	.sy-ps__tab.is-active .sy-ps__name { font-weight: 600; }
	.sy-ps__panels { padding: 22px 20px 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.sy-ps__panel, .sy-ps__panel.is-active, .sy-ps__media, .sy-ps__media video, .sy-ps__media img, .sy-ps__num, .sy-ps__num .sy-ico { transition: none; transform: none; }
}
