/* ==========================================================================
   About: Our promise
   The promise band. HTML: template-parts/about/our-promise.php
   ========================================================================== */

/* Promise strip */
.promise__strip { position: relative; display: grid; grid-template-columns: .8fr 2.2fr; gap: 28px; align-items: center; padding: 28px clamp(22px, 3vw, 36px); border-radius: 26px; background: linear-gradient(100deg, rgba(124, 58, 237, .16), rgba(255, 255, 255, .03) 45%, rgba(34, 211, 238, .08)); border: 1px solid var(--border-strong); }
.promise__strip::before { content: ""; position: absolute; left: 8%; right: 8%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, #a78bfa, #22d3ee, #f472b6, #34d399, transparent); box-shadow: 0 0 14px rgba(167, 139, 250, .8); }
.promise__head .eyebrow { margin-bottom: 8px; }
.promise__title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin: 0; }
.promise__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.promise__list li { --c: #a78bfa; display: flex; align-items: flex-start; gap: 12px; }
.promise__icon { flex-shrink: 0; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--c) 18%, transparent); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); color: var(--c); box-shadow: 0 0 20px -6px var(--c); }
.promise__list strong { display: block; color: #fff; font-family: var(--font-display); font-size: .96rem; }
.promise__list small { display: block; margin-top: 3px; color: var(--muted); font-size: .82rem; line-height: 1.45; }

@media (max-width: 1024px) {
	.promise__strip { grid-template-columns: 1fr; }
	.promise__list { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.promise__list { grid-template-columns: 1fr; }
}