/* Direct-response sections: problem list, offer stack, comparison table. Tokens only. */

/* ---------- Problem ---------- */
.azb-problem { display: grid; gap: var(--s-5); }
.azb-problem__list { display: grid; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.azb-problem__list li {
	display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); align-items: start;
	padding: var(--s-4) var(--s-5); border-radius: var(--radius-card);
	background: color-mix(in srgb, var(--azb-error) 7%, var(--azb-surface));
	box-shadow: inset 2px 0 0 color-mix(in srgb, var(--azb-error) 70%, transparent);
	font-size: var(--fs-lead);
}
.azb-problem__x { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--azb-error) 18%, transparent); color: var(--azb-error); }
.azb-problem__x .azb-icon { width: 16px; height: 16px; }
.azb-problem__foot { margin: 0; font-size: var(--fs-lead); color: var(--azb-ink); font-weight: 500; }

/* ---------- Offer stack ---------- */
.azb-offer { display: grid; gap: var(--s-5); }
.azb-offer__list { display: grid; gap: var(--s-3); list-style: none; margin: 0; padding: 0; }
.azb-offer__list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); align-items: start; }
.azb-offer__tick { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--radius-pill); background: var(--azb-accent-soft); color: var(--azb-accent-hi); }
.azb-offer__tick .azb-icon { width: 16px; height: 16px; }
.azb-offer__list strong { display: block; color: var(--azb-ink); font-weight: 600; }
.azb-offer__detail { display: block; margin-top: 2px; color: var(--azb-muted); font-size: var(--fs-small); }
.azb-offer__guarantee {
	display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--s-3); align-items: center; margin: 0;
	padding: var(--s-4) var(--s-5); border-radius: var(--radius-card);
	background: var(--azb-accent-soft); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--azb-accent) 45%, transparent);
	color: var(--azb-ink); font-weight: 500;
}
.azb-offer__guarantee .azb-icon { color: var(--azb-accent-hi); }
.azb-offer__cta { display: grid; gap: var(--s-2); justify-items: start; }
.azb-offer__note { margin: 0; font-size: var(--fs-small); color: var(--azb-muted); }

/* ---------- Comparison ---------- */
.azb-vs { display: grid; gap: var(--s-5); }
.azb-vs__scroll { overflow-x: auto; }
.azb-vs__table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; font-size: var(--fs-small); }
.azb-vs__table th, .azb-vs__table td { padding: var(--s-4) var(--s-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--azb-line); }
.azb-vs__table thead th { font: 500 var(--fs-label)/1.3 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--azb-muted); white-space: nowrap; }
.azb-vs__table thead th.is-us { color: var(--azb-accent); }
.azb-vs__table tbody th { font-weight: 500; color: var(--azb-ink); width: 26%; }
.azb-vs__table td { color: var(--azb-muted); }
.azb-vs__table .is-us {
	background: color-mix(in srgb, var(--azb-accent) 8%, transparent);
	color: var(--azb-ink);
}
.azb-vs__table thead th.is-us { background: color-mix(in srgb, var(--azb-accent) 12%, transparent); border-top-left-radius: var(--radius-card); border-top-right-radius: var(--radius-card); }
.azb-vs__table tbody tr:last-child .is-us { border-bottom-left-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card); }
.azb-vs__tick { width: 16px; height: 16px; margin-right: var(--s-2); color: var(--azb-accent-hi); vertical-align: -2px; }
.azb-vs__note { margin: 0; font-size: var(--fs-small); color: var(--azb-muted); }

/* Phones: each row becomes a small card, so nothing scrolls sideways to be read. */
@media (max-width: 767px) {
	.azb-vs__scroll { overflow-x: visible; }
	.azb-vs__table { min-width: 0; display: block; }
	.azb-vs__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
	.azb-vs__table tbody, .azb-vs__table tr { display: block; }
	.azb-vs__table tr { margin-bottom: var(--s-4); border: 1px solid var(--azb-line); border-radius: var(--radius-card); overflow: hidden; }
	.azb-vs__table tbody th { display: block; width: auto; background: var(--azb-surface); border-bottom: 1px solid var(--azb-line); }
	.azb-vs__table td { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: var(--s-3); align-items: start; }
	.azb-vs__table td::before { content: attr(data-label); font: 500 var(--fs-label)/1.4 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--azb-muted); }
	.azb-vs__table td.is-us::before { color: var(--azb-accent); }
	.azb-vs__table tr:last-child { margin-bottom: 0; }
	.azb-vs__table td:last-child { border-bottom: 0; }
}

/* Small aside note, used beside forms and buttons. */
.azb-note, p.azb-note { margin: 0; font-size: var(--fs-small); color: var(--azb-muted); }