/*
 * Wave 4 (2026-08-08): "For Businesses gateway" -- two real commercial
 * paths (directory listing vs community/social partnership), presented
 * as one deliberate choice instead of dropping straight into Directorist's
 * own unstyled plan picker. Built from the shared .hp-c-card/--hp-card-*
 * tokens and .hp-c-btn classes already used everywhere else on the site
 * (confirmed via research: no existing pricing-card pattern to copy from,
 * since /select-your-plan-2/ renders raw third-party plugin markup with
 * zero HertsPartners styling) -- not modelled on that page.
 */
.hp-gateway { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.hp-gateway__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--hp-space-6); }

.hp-gateway-card { display: flex; flex-direction: column; }
.hp-gateway-card__icon { display: grid; flex: 0 0 auto; width: 52px; height: 52px; margin-bottom: var(--hp-space-5); place-items: center; border-radius: var(--hp-radius-lg); background: var(--hp-color-primary-100); color: var(--hp-color-primary-500); }
.hp-gateway-card__icon svg { width: 1.6rem; height: 1.6rem; }
.hp-gateway-card h2 { font-size: var(--hp-text-xl); line-height: 1.25; }
.hp-gateway-card__price { margin: var(--hp-space-2) 0 0; color: var(--hp-color-primary-700); font-family: var(--hp-font-heading); font-size: var(--hp-text-lg); font-weight: 700; }
.hp-gateway-card__body { margin: var(--hp-space-3) 0 0; color: var(--hp-color-body); line-height: 1.55; }
.hp-gateway-card__points { display: grid; gap: var(--hp-space-2); margin: var(--hp-space-5) 0; padding: 0; list-style: none; }
.hp-gateway-card__points li { position: relative; padding-left: 1.5rem; color: var(--hp-color-ink); font-size: var(--hp-text-sm); }
.hp-gateway-card__points li::before { content: ""; position: absolute; left: 0; top: .45em; width: 8px; height: 8px; border-radius: 50%; background: var(--hp-color-primary-400); }
.hp-gateway-card__cta { margin-top: auto; align-self: flex-start; }

.hp-gateway__note { max-width: 46rem; margin: var(--hp-space-6) 0 0; color: var(--hp-color-body); font-size: var(--hp-text-sm); line-height: 1.55; }

@media (max-width: 767px) {
	.hp-gateway__grid { grid-template-columns: 1fr; }
	.hp-gateway-card__cta { align-self: stretch; text-align: center; }
}