/* New modules for the L2 templates (§10.3-10.5). Kept in its own file
   rather than touching components.css — see IMPLEMENTATION.md decision #8. */

/* Module #03 — the canonical light .hero-l2 (Service Pillar / Sector) now
   lives in components.css per design-reference.html §07/§08 ("B —
   Capability" page type: light hero + at-a-glance box). This file only
   keeps the pieces the Product hero still needs — Product is page type
   "C", explicitly dark, and layers its own self-contained treatment on top
   in product-l2.css rather than inheriting a shared dark base. */
.hero-l2__actions {
	display: flex;
	gap: var(--space-4);
	margin-top: var(--space-6);
	flex-wrap: wrap;
}
.hero-l2__proof {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	margin-top: var(--space-7);
	padding-top: var(--space-6);
	border-top: 1px solid var(--line-dark);
}
.hero-l2__proof strong {
	font-family: var(--font-display);
	font-size: var(--fs-display-3);
}
.hero-l2__proof span {
	font-size: var(--fs-interface);
	text-transform: uppercase;
	letter-spacing: var(--tracking-interface);
	color: var(--muted-dark);
}

/* Module #13 — text + visual split base layout now lives in components.css
   (canonical definition, matching the real .text-visual-split__body /
   --image-left class names module-text-visual-split.php emits — see
   IMPLEMENTATION.md's design-system-migration note on this consolidation). */
.text-visual-split .btn--tertiary { margin-top: var(--space-5); }

/* Module #20 — pricing / package cards. */
.pricing-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--gutter);
	align-items: start;
}
.pricing-card {
	position: relative;
	border: 1px solid var(--line-light);
	border-radius: var(--radius-md);
	padding: var(--space-7);
	background: var(--paper);
}
.section--dark .pricing-card, .section--dark-soft .pricing-card {
	background: var(--ink-soft);
	border-color: var(--line-dark);
	color: var(--paper);
}
.pricing-card--featured {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
}
.pricing-card__badge {
	position: absolute;
	top: var(--space-5);
	right: var(--space-5);
	font-size: var(--fs-interface);
	text-transform: uppercase;
	letter-spacing: var(--tracking-interface);
	color: var(--accent-deep);
}
.section--dark .pricing-card__badge, .section--dark-soft .pricing-card__badge { color: var(--accent); }
.pricing-card__price {
	font-family: var(--font-display);
	font-size: var(--fs-display-4);
	margin: var(--space-3) 0 var(--space-4);
}
.pricing-card__desc { color: var(--muted-light); margin-bottom: var(--space-5); }
.section--dark .pricing-card__desc, .section--dark-soft .pricing-card__desc { color: var(--muted-dark); }
.pricing-card__features { margin-bottom: var(--space-6); }
.pricing-card__features li {
	padding-block: var(--space-2);
	border-top: 1px solid var(--line-light);
	font-size: var(--fs-small);
}
.section--dark .pricing-card__features li, .section--dark-soft .pricing-card__features li { border-top-color: var(--line-dark); }
.pricing-card__features li:first-child { border-top: none; }

/* Feature grid baseline — a distinct product identity is layered on top in
   product-l2.css, scoped to the Product template only. */
.feature-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gutter);
}
.feature-grid--2 { grid-template-columns: repeat(2, 1fr); }
.feature-grid--4 { grid-template-columns: repeat(4, 1fr); }
.feature-card {
	padding: var(--space-6);
	border: 1px solid var(--line-light);
	border-radius: var(--radius-md);
}
.feature-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-bottom: var(--space-4);
	font-size: var(--fs-display-6);
}
@media (max-width: 767px) {
	.feature-grid, .feature-grid--2, .feature-grid--4 { grid-template-columns: 1fr; }
}