/*
 * Success stories: listing + story pages.
 * Follows the Zenkraft Brand and Design System v2 (Oct 2026):
 * Inter only, 9-color palette, no gradients/shadows/filters on brand surfaces,
 * 12px cards, 8px buttons (48px tall), 80/48px section padding, left-aligned text.
 * Everything is namespaced with .zks-
 */

.zks {
	--navy: #0B1D3A;
	--blue: #0176D3;
	--sky: #1B96FF;
	--green: #89C648;
	--mid-green: #4E9A3D;
	--gray: #F4F7FA;
	--lblue: #E0F0FF;
	--white: #FFFFFF;
	font-family: 'Inter', Arial, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	color: var(--navy);
	background: var(--white);
	text-align: left;
}

.zks *, .zks h1, .zks h2, .zks h3, .zks h4, .zks h5, .zks p, .zks a, .zks li, .zks span, .zks b, .zks i, .zks strong, .zks cite {
	font-family: 'Inter', Arial, sans-serif;
}

.zks h1, .zks h2, .zks h3, .zks h4, .zks h5 { color: var(--navy); text-transform: none; letter-spacing: 0; margin-top: 0; }
.zks p { color: var(--navy); font-size: 16px; line-height: 1.5; margin: 0 0 16px; }
.zks a { text-decoration: none; }
.zks img { max-width: 100%; }

.zks-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.zks-section { padding: 80px 0; background: var(--white); }
.zks-section--gray { background: var(--gray); }

/* ---------- Type scale (web) ---------- */

.zks h1 { font-weight: 900; font-size: 48px; line-height: 1.2; margin-bottom: 20px; }
.zks h2 { font-weight: 700; font-size: 32px; line-height: 1.2; margin-bottom: 16px; }
.zks h3 { font-weight: 600; font-size: 20px; line-height: 1.4; margin-bottom: 8px; }
.zks h4 { font-weight: 600; font-size: 20px; line-height: 1.4; margin-bottom: 8px; }
.zks .zks-lead { font-weight: 500; font-size: 20px; line-height: 1.4; }

.zks-label {
	display: block;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sky);
	margin-bottom: 16px;
}

.zks-stat { display: flex; align-items: baseline; gap: 4px; font-weight: 700; line-height: 1.1; color: var(--blue); }
.zks-stat b { font-weight: 700; font-size: 64px; line-height: 1.1; color: var(--blue); }
.zks-stat i { font-style: normal; font-weight: 700; font-size: 28px; color: var(--blue); }

.zks-link { display: inline-flex; gap: 8px; font-weight: 600; font-size: 16px; color: var(--blue); }
.zks-link::after { content: "\2794"; transition: transform .2s ease; }
a:hover > .zks-link::after, a.zks-link:hover::after { transform: translateX(4px); }

/* ---------- Buttons ---------- */

.zks .zks-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 24px;
	border-radius: 8px;
	border: 2px solid transparent;
	font-weight: 600;
	font-size: 16px;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.zks .zks-btn--primary { background: var(--blue); color: var(--white); border-color: var(--blue); }
.zks .zks-btn--primary:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.zks .zks-btn--secondary { background: var(--white); color: var(--blue); border-color: var(--blue); }
.zks .zks-btn--secondary:hover { background: var(--lblue); color: var(--blue); }
.zks .zks-btn--green { background: var(--green); color: var(--navy); border-color: var(--green); }
.zks .zks-btn--green:hover { background: var(--white); color: var(--navy); border-color: var(--white); }
.zks-btns { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Hero (Deep Navy, typographic) ---------- */

.zks-hero { background: var(--navy); padding: 160px 0 80px; }
.zks-hero h1 { color: var(--white); max-width: 840px; }
.zks-hero .zks-lead { color: var(--white); max-width: 680px; margin-bottom: 32px; }
.zks-hero .zks-back { display: inline-block; color: var(--white); font-weight: 500; margin-bottom: 32px; }
.zks-hero .zks-back:hover { color: var(--sky); }

.zks-logo {
	display: inline-flex;
	align-items: center;
	background: var(--white);
	border-radius: 12px;
	padding: 12px 20px;
	height: 56px;
	margin-bottom: 24px;
}
.zks-logo img { max-height: 32px; width: auto; max-width: 160px; display: block; }

.zks-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.zks-tag {
	display: inline-block;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.2;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 8px 12px;
	border-radius: 8px;
	background: var(--lblue);
	color: var(--navy);
}

/* ---------- Trust bar / stat strip ---------- */

.zks-strip { display: grid; grid-template-columns: repeat(var(--cols, 3), 1fr); gap: 16px; }
.zks-strip > div { background: var(--gray); border-radius: 12px; padding: 32px; }
.zks-strip .zks-stat b { font-size: 48px; }
.zks-strip .zks-stat i { font-size: 24px; }
.zks-strip .zks-strip__label { display: block; margin-top: 8px; font-size: 16px; line-height: 1.5; }
.zks-trust { padding: 48px 0; background: var(--white); }

/* ---------- Cards ---------- */

.zks-section-head { max-width: 720px; margin-bottom: 40px; }
.zks-section-head h2 { margin-bottom: 8px; }
.zks-section-head p { margin: 0; }

.zks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.zks-grid--3 { grid-template-columns: repeat(3, 1fr); }

.zks-card {
	display: flex;
	flex-direction: column;
	background: var(--white);
	border-radius: 12px;
	padding: 32px;
	color: var(--navy);
	border: 2px solid var(--white);
	transition: border-color .2s ease;
}
.zks-card:hover { border-color: var(--blue); color: var(--navy); }
.zks-card__logo { height: 40px; display: flex; align-items: center; margin-bottom: 24px; }
.zks-card__logo img { max-height: 36px; max-width: 160px; width: auto; display: block; }
.zks-card .zks-label { margin-bottom: 8px; }
.zks-card .zks-stat { margin-bottom: 4px; }
.zks-card__statlabel { font-weight: 500; margin-bottom: 20px; }
.zks-card h3 { margin-bottom: 8px; }
.zks-card p { flex: 1; margin-bottom: 24px; }


/* ---------- Story page ---------- */

.zks-layout { display: grid; grid-template-columns: minmax(0, 720px) 1fr; gap: 64px; align-items: start; }
.zks-main > section { margin-bottom: 64px; }
.zks-main > section:last-child { margin-bottom: 0; }
.zks-main .zks-intro { font-weight: 500; font-size: 20px; line-height: 1.4; }

.zks-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 24px; }
.zks-step { background: var(--gray); border-radius: 12px; padding: 24px; }
.zks-step__n {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 8px;
	background: var(--blue); color: var(--white); font-weight: 700; font-size: 16px;
	margin-bottom: 16px;
}
.zks-step h4 { font-size: 18px; margin-bottom: 8px; }
.zks-step p { margin: 0; }

.zks-results { display: grid; gap: 16px; margin-top: 24px; }
.zks-result { display: grid; grid-template-columns: 40px 1fr; gap: 16px; align-items: start; background: var(--lblue); border-radius: 12px; padding: 24px; }
.zks-result svg { width: 40px; height: 40px; display: block; }
.zks-result h4 { font-size: 18px; margin-bottom: 8px; }
.zks-result p { margin: 0; }

.zks-next { background: var(--gray); border-radius: 12px; padding: 32px; }
.zks-next ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.zks-next li { position: relative; padding-left: 32px; margin: 0; }
.zks-next li::before { content: "\2794"; position: absolute; left: 0; top: 0; color: var(--blue); font-weight: 700; }

.zks-aside { position: sticky; top: 96px; display: grid; gap: 16px; }
.zks-panel { background: var(--gray); border-radius: 12px; padding: 24px; }
.zks-panel .zks-label { margin-bottom: 8px; }
.zks-panel p { margin: 0; }
.zks-panel--cta { background: var(--lblue); }
.zks-panel--cta p { font-weight: 600; margin-bottom: 16px; }
.zks-panel--cta .zks-btns { flex-direction: column; }
.zks-panel--cta .zks-btn { width: 100%; }
.zks-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.zks-chips li { margin: 0; padding: 8px 12px; border-radius: 8px; background: var(--lblue); font-weight: 600; font-size: 14px; }

/* Quote: Cloud Gray, Deep Navy text, SF Blue accent */
.zks-quote { background: var(--gray); padding: 80px 0; }
.zks-quote blockquote { max-width: 840px; margin: 0; padding: 0 0 0 32px; border: 0; border-left: 4px solid var(--blue); }
.zks-quote blockquote p { font-weight: 500; font-size: 24px; line-height: 1.4; color: var(--navy); margin: 0 0 24px; }
.zks-quote cite { display: flex; align-items: center; gap: 16px; font-style: normal; }
.zks-quote cite i { width: 48px; height: 48px; border-radius: 50%; background: var(--blue); color: var(--white); display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 700; flex: none; }
.zks-quote cite strong { display: block; font-weight: 600; }
.zks-quote cite small { display: block; font-size: 14px; }

/* Final CTA: SF Blue band, combo 2 */
.zks-final { background: var(--blue); padding: 80px 0; }
.zks-final h2 { color: var(--white); max-width: 720px; }
.zks-final p { color: var(--white); max-width: 720px; margin-bottom: 32px; }

/* Reveal (progressive enhancement, opacity only) */
.zks-js .zks-reveal { opacity: 0; transition: opacity .6s ease; }
.zks-js .zks-reveal.is-in { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
	.zks * { transition: none !important; }
	.zks-js .zks-reveal { opacity: 1; }
}

@media (max-width: 991px) {
	.zks-layout { grid-template-columns: 1fr; gap: 48px; }
	.zks-aside { position: static; }
		.zks-grid--3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
	.zks h1 { font-size: 36px; }
	.zks h2 { font-size: 26px; }
	.zks h3, .zks h4 { font-size: 18px; }
	.zks .zks-lead, .zks-main .zks-intro { font-size: 18px; }
	.zks-label { font-size: 12px; }
	.zks-stat b, .zks-strip .zks-stat b { font-size: 40px; }
	.zks-hero { padding: 120px 0 48px; }
	.zks-section, .zks-quote, .zks-final { padding: 48px 0; }
	.zks-trust { padding: 32px 0; }
	.zks-grid, .zks-grid--3, .zks-steps, 	.zks-strip { grid-template-columns: 1fr 1fr; }
	.zks-card, .zks-next { padding: 24px; }
	.zks-quote blockquote p { font-size: 20px; }
	.zks-btns .zks-btn { width: 100%; }
}

@media (max-width: 480px) {
	.zks-strip { grid-template-columns: 1fr; }
}

/* Beat the theme's section padding rules (some use !important) */
.zks > section.zks-section, .zks > section.zks-quote, .zks > section.zks-final { padding-top: 80px !important; padding-bottom: 80px !important; }
.zks > section.zks-trust { padding-top: 48px !important; padding-bottom: 48px !important; }
.zks > section.zks-section--tight { padding-top: 32px !important; }
.zks > section.zks-hero { padding-top: 160px !important; padding-bottom: 80px !important; }
.zks .zks-main > section { padding: 0 !important; }
.zks-card p { font-weight: 400; }
@media (max-width: 767px) {
	.zks > section.zks-section, .zks > section.zks-quote, .zks > section.zks-final { padding-top: 48px !important; padding-bottom: 48px !important; }
	.zks > section.zks-trust { padding-top: 32px !important; padding-bottom: 32px !important; }
	.zks > section.zks-hero { padding-top: 120px !important; padding-bottom: 48px !important; }
}

.zks-strip--survey > div { background: var(--gray); }
.zks-strip .zks-strip__note { display: block; margin-top: 4px; font-size: 14px; }
.zks p.zks-source { margin: 24px 0 0; font-size: 14px; }
@media (max-width: 991px) { .zks-strip--survey { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .zks-strip--survey { grid-template-columns: 1fr; } }

/* Stat labels in sentence case (labels are written as fragments in the markup) */
.zks .zks-strip__label::first-letter, .zks .zks-card__statlabel::first-letter { text-transform: uppercase; }