/* ZYNGLE — service single and archive. */

.zg-page-hero { padding-block: clamp(3rem, 2rem + 5vw, 7rem) clamp(2rem, 1rem + 3vw, 4rem); }
.zg-page-hero__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: end; }
@media (max-width: 900px) { .zg-page-hero__grid { grid-template-columns: 1fr; align-items: start; } }
.zg-page-hero__title { margin-block: var(--zg-4); }

.zg-outcomes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--zg-8); margin-top: var(--zg-12); }
.zg-outcome { display: grid; gap: var(--zg-2); padding-top: var(--zg-4); border-top: 1px solid var(--zg-border-strong); }
.zg-outcome__title { font-weight: 600; }
.zg-outcome__body { font-size: var(--zg-text-sm); color: var(--zg-text-secondary); }

.zg-steps { counter-reset: zg-step; display: grid; gap: 0; margin-top: var(--zg-12); border-top: 1px solid var(--zg-border); }
.zg-step { display: grid; grid-template-columns: 6ch minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--zg-6); padding-block: var(--zg-8); border-bottom: 1px solid var(--zg-border); }
.zg-step__index { counter-increment: zg-step; font-family: var(--zg-font-mono); font-size: var(--zg-text-caption); color: var(--zg-text-muted); }
.zg-step__index::before { content: counter(zg-step, decimal-leading-zero); }
.zg-step__title { font-family: var(--zg-font-display); font-size: var(--zg-text-h4); font-weight: 500; }
.zg-step__body { color: var(--zg-text-secondary); font-size: var(--zg-text-sm); }
@media (max-width: 780px) { .zg-step { grid-template-columns: 1fr; gap: var(--zg-2); } }

.zg-faq { border-top: 1px solid var(--zg-border); margin-top: var(--zg-12); }
.zg-faq__item { border-bottom: 1px solid var(--zg-border); }
.zg-faq__question {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--zg-4);
	width: 100%;
	padding: var(--zg-6) 0;
	background: none;
	border: 0;
	text-align: left;
	font-family: var(--zg-font-body);
	font-size: var(--zg-text-h4);
	font-weight: 500;
	cursor: pointer;
}
.zg-faq__icon { position: relative; width: 14px; height: 14px; flex: none; }
.zg-faq__icon::before,
.zg-faq__icon::after { content: ""; position: absolute; background: currentColor; transition: transform var(--zg-duration) var(--zg-ease); }
.zg-faq__icon::before { top: 6px; left: 0; width: 14px; height: 1.5px; }
.zg-faq__icon::after { top: 0; left: 6px; width: 1.5px; height: 14px; }
.zg-faq__question[aria-expanded="true"] .zg-faq__icon::after { transform: scaleY(0); }
.zg-faq__answer { padding-bottom: var(--zg-6); color: var(--zg-text-secondary); max-width: 68ch; }
.zg-faq__answer[hidden] { display: none; }

.zg-service-index { display: grid; gap: var(--zg-12); margin-top: var(--zg-12); }
.zg-service-group__header { display: flex; align-items: baseline; justify-content: space-between; gap: var(--zg-4); padding-bottom: var(--zg-4); border-bottom: 1px solid var(--zg-border-strong); }
.zg-service-group__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0; }
.zg-service-group__item { border-bottom: 1px solid var(--zg-border); }
.zg-service-group__link { display: grid; gap: var(--zg-1); padding: var(--zg-6) var(--zg-4) var(--zg-6) 0; transition: padding-left var(--zg-duration) var(--zg-ease); }
.zg-service-group__link:hover { padding-left: var(--zg-3); }
.zg-service-group__name { font-weight: 600; }
.zg-service-group__desc { font-size: var(--zg-text-sm); color: var(--zg-text-secondary); }