/**
 * Design Lead Pros – Landing v2 (Lovable port) styles.
 *
 * Loaded only on pages using the "page-v2" template (see functions.php).
 * Everything is scoped under .dlp-v2 so it can't leak into page one.
 * Values mirror the Lovable build (src/styles.css + routes/index.tsx in
 * C:\Users\jkaye\Documents\GitHub\design-studio-showcase): Tailwind oklch
 * tokens mapped onto the theme.json palette; gradients, glows and
 * translucent surfaces derived with color-mix so the palette stays the
 * single source of truth. Pixel sizes below are the Lovable design's own.
 *
 * Breakpoints follow the Lovable (Tailwind) tiers for fidelity:
 *   sm 640px · md 768px · lg 1025px (Tailwind lg is 1024; we use the
 *   theme's 1025 desktop tier so both pages agree on "desktop").
 */

/* ---------- Tokens ---------- */
.dlp-v2 {
	--v2-ink: var(--wp--preset--color--ink-green);
	--v2-ink-card: var(--wp--preset--color--ink-card);
	--v2-ink-fg: var(--wp--preset--color--white);
	--v2-ink-muted: color-mix(in srgb, var(--wp--preset--color--white) 68%, var(--wp--preset--color--moss));
	--v2-ink-border: color-mix(in srgb, var(--wp--preset--color--white) 10%, transparent);
	--v2-border: var(--wp--preset--color--rule);
	--v2-soft: var(--wp--preset--color--tint);
	--v2-brand: var(--wp--preset--color--primary);
	--v2-brand-deep: var(--wp--preset--color--deep);
	--v2-brand-light: var(--wp--preset--color--leaf-light);
	--v2-muted: var(--wp--preset--color--moss);
	--v2-text: var(--wp--preset--color--contrast);
	--v2-gradient-brand: linear-gradient(135deg, var(--v2-brand-light), var(--v2-brand) 55%, var(--v2-brand-deep));
	--v2-gradient-ink: radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--v2-brand-deep) 55%, transparent), transparent 60%), var(--v2-ink);
	--v2-glow: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--v2-brand-light) 45%, transparent), transparent 70%);
	--v2-shadow-float: 0 30px 60px -20px rgba(22, 28, 19, 0.35), 0 10px 20px -10px rgba(22, 28, 19, 0.2);
	--v2-shadow-card: 0 1px 2px rgba(22, 28, 19, 0.06), 0 12px 32px -12px rgba(22, 28, 19, 0.18);
	--v2-font-display: var(--wp--preset--font-family--space-grotesk);
	--v2-font-sans: var(--wp--preset--font-family--dm-sans);
	--v2-font-mono: var(--wp--preset--font-family--jetbrains-mono);

	font-family: var(--v2-font-sans);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.dlp-v2 > *,
.dlp-v2 main > * {
	margin-block-start: 0;
}

/* Lovable container is max-w-6xl (1152px). */
.dlp-v2 .alignwide {
	max-width: 1152px;
}

.dlp-v2 :is(h1, h2, h3, h4) {
	font-family: var(--v2-font-display);
	font-weight: 600;
	letter-spacing: -0.02em;
}

/* ---------- Type helpers ---------- */
.v2-label {
	font-family: var(--v2-font-mono);
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.v2-display {
	margin: 0;
	font-family: var(--v2-font-display);
	font-weight: 600;
	font-size: clamp(2.6rem, 6.5vw, 4.75rem);
	line-height: 1.02;
	letter-spacing: -0.03em;
}

.v2-h2 {
	margin: 0;
	font-size: clamp(1.875rem, 4vw, 2.5rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.v2-lead {
	font-size: clamp(1.125rem, 2vw, 1.25rem);
	line-height: 1.5;
}

.v2-gradient-text {
	background-image: var(--v2-gradient-brand);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.v2-muted {
	color: var(--v2-muted);
}

.v2-brand {
	color: var(--v2-brand);
}

.v2-brand-light {
	color: var(--v2-brand-light);
}

.v2-ink-muted {
	color: var(--v2-ink-muted);
}

/* Eyebrow pill */
.v2-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	padding: 0.375rem 0.75rem;
	border: 1px solid var(--v2-border);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--v2-brand-deep);
	font-family: var(--v2-font-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.4;
}

.v2-eyebrow::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--v2-brand);
}

.v2-eyebrow--dark {
	border-color: var(--v2-ink-border);
	background: transparent;
	color: var(--v2-ink-muted);
}

/* Section heading blocks */
.v2-section {
	padding-block: var(--wp--preset--spacing--70);
}

.v2-section--tight {
	padding-top: 0;
}

.v2-head {
	margin-bottom: 3.5rem;
}

.v2-head > * + * {
	margin-block-start: 1.25rem;
}

.v2-head--center {
	max-width: 42rem;
	margin-inline: auto;
	text-align: center;
}

/* ---------- Buttons & links ---------- */
.dlp-v2 .v2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	padding: 0 1rem;
	border-radius: 999px;
	background: var(--v2-ink);
	color: var(--v2-ink-fg);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.dlp-v2 .v2-btn:hover {
	background: color-mix(in srgb, var(--v2-ink) 90%, var(--wp--preset--color--white));
	color: var(--v2-ink-fg);
}

.dlp-v2 .v2-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	height: 56px;
	padding: 0 1.75rem;
	border-radius: 999px;
	background: var(--v2-ink);
	color: var(--v2-ink-fg);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	box-shadow: var(--v2-shadow-float);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.dlp-v2 .v2-cta:hover {
	transform: translateY(-2px);
	color: var(--v2-ink-fg);
}

.v2-cta__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-image: var(--v2-gradient-brand);
	color: var(--v2-ink);
	transition: transform 0.2s ease;
}

.v2-cta__arrow svg {
	width: 16px;
	height: 16px;
}

.v2-cta:hover .v2-cta__arrow {
	transform: translateX(2px);
}

.dlp-v2 .v2-cta--light {
	background: var(--v2-brand-light);
	color: var(--v2-ink);
	box-shadow: none;
}

.dlp-v2 .v2-cta--light:hover {
	background: color-mix(in srgb, var(--v2-brand-light) 90%, var(--wp--preset--color--white));
	color: var(--v2-ink);
}

.dlp-v2 .v2-textlink {
	color: var(--v2-text);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	text-underline-offset: 4px;
}

.dlp-v2 .v2-textlink:hover {
	text-decoration: underline;
}

/* ---------- Header (sticky glass pill) ---------- */
.v2-header {
	position: sticky;
	top: 0;
	z-index: 40;
	padding: 0.75rem 0.75rem 0;
}

.admin-bar .v2-header {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar .v2-header {
		top: 46px;
	}
}

.v2-header__bar {
	height: 56px;
	padding: 0 1rem;
	border: 1px solid var(--v2-border);
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--white) 75%, transparent);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	box-shadow: var(--v2-shadow-card);
}

.v2-header__bar > *,
.v2-header__right > * {
	margin: 0;
}

.v2-logo {
	margin: 0;
	line-height: 0;
}

.v2-logo img {
	display: block;
	height: 24px;
	width: auto;
}

.dlp-v2 .v2-nav {
	display: none;
}

.dlp-v2 .v2-nav a:where(:not(.wp-element-button)) {
	color: var(--v2-muted);
	font-size: 14px;
}

.dlp-v2 .v2-nav a:where(:not(.wp-element-button)):hover {
	color: var(--v2-text);
}

@media (min-width: 640px) {
	.v2-header__bar {
		padding: 0 1.5rem;
	}

	.v2-logo img {
		height: 28px;
	}
}

@media (min-width: 768px) {
	.dlp-v2 .v2-nav {
		display: flex;
	}
}

/* ---------- Hero ---------- */
.v2-hero {
	position: relative;
	margin-top: -68px; /* header height (56) + its top padding (12): hero background runs behind the pill */
	padding-top: calc(68px + 4rem);
	padding-bottom: 5rem;
}

.v2-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: linear-gradient(var(--v2-border) 1px, transparent 1px), linear-gradient(90deg, var(--v2-border) 1px, transparent 1px);
	background-size: 48px 48px;
	-webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
	mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 75%);
}

.v2-hero::after {
	content: "";
	position: absolute;
	right: -10rem;
	top: 5rem;
	width: 600px;
	height: 600px;
	pointer-events: none;
	background: var(--v2-glow);
}

.v2-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 4rem;
	align-items: center;
}

.v2-hero__grid > * {
	margin-block-start: 0;
}

.v2-hero__copy > * + * {
	margin-block-start: 1.5rem;
}

.v2-hero__copy .v2-display {
	margin-top: 1.75rem;
}

.v2-hero__copy .v2-lead {
	max-width: 40ch;
}

.v2-hero__actions {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	margin-top: 2.5rem;
}

.v2-checks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	list-style: none;
	margin: 2.5rem 0 0;
	padding: 0;
	font-size: 14px;
	color: var(--v2-muted);
}

.v2-checks li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.v2-checks svg {
	width: 16px;
	height: 16px;
	color: var(--v2-brand);
}

@media (min-width: 640px) {
	.v2-hero {
		padding-top: calc(68px + 6rem);
	}

	.v2-hero__actions {
		flex-direction: row;
		align-items: center;
	}
}

@media (min-width: 1025px) {
	.v2-hero {
		padding-bottom: 7rem;
	}

	.v2-hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}
}

/* Dashboard mockup */
.v2-dash-wrap {
	position: relative;
	width: 100%;
	max-width: 520px;
	margin-inline: auto;
}

.v2-dash {
	position: relative;
	padding: 1.25rem;
	border: 1px solid var(--v2-ink-border);
	border-radius: 1rem;
	background: var(--v2-gradient-ink);
	color: var(--v2-ink-fg);
	box-shadow: var(--v2-shadow-float);
}

.v2-dash__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.v2-dash__dots {
	display: flex;
	gap: 6px;
}

.v2-dash__dots i {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--v2-ink-muted) 40%, transparent);
}

.v2-dash__title {
	font-size: 11px;
	color: var(--v2-ink-muted);
}

.v2-dash__stats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.v2-dash__tile {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.75rem;
	border: 1px solid var(--v2-ink-border);
	border-radius: 0.75rem;
	background: var(--v2-ink-card);
}

.v2-dash__k {
	font-size: 10px;
	color: var(--v2-ink-muted);
}

.v2-dash__v {
	font-family: var(--v2-font-display);
	font-size: 26px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}

.v2-dash__chart {
	margin-top: 0.75rem;
	padding: 1rem;
	border: 1px solid var(--v2-ink-border);
	border-radius: 0.75rem;
	background: var(--v2-ink-card);
}

.v2-dash__chart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 13px;
	font-weight: 500;
}

.v2-dash__trend {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 12px;
	color: var(--v2-brand-light);
}

.v2-dash__trend svg {
	width: 14px;
	height: 14px;
}

.v2-bars {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
	height: 6rem;
	margin-top: 1rem;
}

.v2-bars i {
	display: block;
	flex: 1;
	border-radius: 6px 6px 0 0;
	background-image: var(--v2-gradient-brand);
	opacity: 0.9;
}

.v2-bars--short {
	height: 5rem;
	gap: 0.375rem;
	margin-top: 1.5rem;
}

.v2-bars--short i {
	border-radius: 4px 4px 0 0;
	opacity: 1;
}

/* Bar chart entry (hero dashboard + ROI card): bars grow from the baseline, left to right. Only when
   count-up.js has added .v2-anim (JS present, motion allowed); --i is the
   bar's index, set inline in the pattern. */
.v2-bars.v2-anim i {
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: calc(var(--i, 0) * 110ms);
}

.v2-bars.v2-anim.is-visible i {
	transform: scaleY(1);
}

/* Hero dashboard: wait for the card's own rise-in before drawing the bars
   (matches data-count-delay on .v2-dash__stats). */
.v2-dash .v2-bars.v2-anim i {
	transition-delay: calc(400ms + var(--i, 0) * 110ms);
}

.v2-dash__appts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
}

.v2-dash__appts li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--v2-ink-border);
	border-radius: 0.75rem;
	background: var(--v2-ink-card);
}

.v2-dash__when {
	display: flex;
	flex-direction: column;
	flex-shrink: 0;
	width: 44px;
	font-family: var(--v2-font-mono);
	font-size: 11px;
	text-transform: uppercase;
	color: var(--v2-ink-muted);
}

.v2-dash__when span:last-child {
	color: var(--v2-ink-fg);
}

.v2-dash__who {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14px;
	font-weight: 500;
}

.v2-dash__tag {
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--v2-brand) 20%, transparent);
	color: var(--v2-brand-light);
	font-size: 10px;
}

/* Floating cards (sm and up) */
.v2-float {
	position: absolute;
	display: none;
	border: 1px solid var(--v2-border);
	border-radius: 1rem;
	background: var(--wp--preset--color--white);
	color: var(--v2-text);
	box-shadow: var(--v2-shadow-float);
}

.v2-float--tl {
	left: -1.5rem;
	top: -1.5rem;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem;
	animation: v2-float 7s ease-in-out infinite;
}

.v2-float--tl strong {
	display: block;
	font-size: 13px;
	font-weight: 600;
}

.v2-float--tl small {
	display: block;
	font-size: 12px;
	color: var(--v2-muted);
}

.v2-float__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-image: var(--v2-gradient-brand);
	color: var(--v2-ink);
}

.v2-float__icon svg {
	width: 16px;
	height: 16px;
}

.v2-float--br {
	right: -1rem;
	bottom: -1.5rem;
	flex-direction: column;
	padding: 0.75rem 1rem;
	animation: v2-float 9s ease-in-out infinite reverse;
}

.v2-float--br .v2-label {
	font-size: 10px;
	color: var(--v2-muted);
}

.v2-float--br strong {
	font-family: var(--v2-font-display);
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
}

@media (min-width: 640px) {
	.v2-float {
		display: flex;
	}
}

/* Motion */
@keyframes v2-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

@keyframes v2-rise {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}

.v2-rise {
	animation: v2-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.v2-rise--delay {
	animation-delay: 150ms;
}

@media (prefers-reduced-motion: reduce) {
	.v2-rise,
	.v2-float--tl,
	.v2-float--br {
		animation: none;
	}

	.dlp-v2 .v2-cta,
	.v2-card--small {
		transition: none;
	}
}

/* ---------- Trust strip ---------- */
.v2-trust {
	padding-block: 2rem;
	border-top: 1px solid var(--v2-border);
	border-bottom: 1px solid var(--v2-border);
	background: color-mix(in srgb, var(--v2-soft) 60%, transparent);
}

.v2-trust__row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.v2-trust__row > * {
	margin: 0;
}

.v2-trust__label {
	font-size: 12px;
	color: var(--v2-muted);
}

.v2-trust__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.v2-trust__list li {
	font-family: var(--v2-font-display);
	font-size: 17px;
	font-weight: 600;
	color: color-mix(in srgb, var(--v2-text) 60%, transparent);
}

/* Quieter "and more" tail: the niches are examples, not the full list. */
.v2-trust__list .v2-trust__more {
	font-weight: 400;
	color: var(--v2-muted);
}

@media (min-width: 768px) {
	.v2-trust__row {
		flex-direction: row;
		justify-content: space-between;
	}
}

/* ---------- Old way / new way ---------- */
.v2-two {
	display: grid;
	gap: 1.25rem;
}

.v2-two > * {
	margin-block-start: 0;
}

.v2-panel {
	position: relative;
	padding: 2rem;
	border-radius: 1.5rem;
}

.v2-panel > * {
	position: relative;
}

.v2-panel .v2-label {
	margin: 0;
}

.v2-panel--soft {
	border: 1px solid var(--v2-border);
	background: color-mix(in srgb, var(--v2-soft) 50%, transparent);
}

.v2-panel--ink {
	overflow: hidden;
	background: var(--v2-gradient-ink);
	color: var(--v2-ink-fg);
	box-shadow: var(--v2-shadow-float);
}

.v2-panel--ink::before {
	content: "";
	position: absolute;
	right: -5rem;
	top: -5rem;
	width: 18rem;
	height: 18rem;
	pointer-events: none;
	background: var(--v2-glow);
}

.v2-rows {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
}

.v2-rows li {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	font-size: 17px;
	line-height: 1.5;
}

.v2-rows--x li {
	color: var(--v2-muted);
}

.v2-rows__dot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	margin-top: 2px;
	border-radius: 50%;
}

.v2-rows__dot svg {
	width: 14px;
	height: 14px;
}

.v2-rows--x .v2-rows__dot {
	border: 1px solid var(--v2-border);
	background: var(--wp--preset--color--white);
}

.v2-rows--check .v2-rows__dot {
	background-image: var(--v2-gradient-brand);
	color: var(--v2-ink);
}

@media (min-width: 640px) {
	.v2-panel {
		padding: 2.5rem;
	}
}

@media (min-width: 1025px) {
	.v2-two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- How it works (ink band) ---------- */
.v2-ink-band {
	background: var(--v2-gradient-ink);
	color: var(--v2-ink-fg);
}

.v2-ink-band :is(h2, h3) {
	color: var(--v2-ink-fg);
}

.v2-how__head {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.v2-how__head > * {
	margin: 0;
}

.v2-how__head .v2-h2 {
	max-width: 18ch;
	margin-top: 1.25rem;
}

.v2-how__note {
	max-width: 36ch;
	color: var(--v2-ink-muted);
}

.v2-steps {
	position: relative;
	display: grid;
	gap: 1.25rem;
	margin-top: 4rem;
}

.v2-steps > * {
	margin-block-start: 0;
}

.v2-step {
	position: relative;
}

.v2-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 1rem;
}

.v2-tile--gradient {
	width: 56px;
	height: 56px;
	background-image: var(--v2-gradient-brand);
	color: var(--v2-ink);
	box-shadow: var(--v2-shadow-float);
}

.v2-tile--gradient svg {
	width: 24px;
	height: 24px;
}

.v2-tile--soft {
	width: 40px;
	height: 40px;
	border-radius: 0.75rem;
	background: var(--v2-soft);
	color: var(--v2-brand-deep);
}

.v2-tile--soft svg {
	width: 16px;
	height: 16px;
}

.v2-tile--xl {
	flex-shrink: 0;
	width: 96px;
	height: 96px;
	border-radius: 1.5rem;
}

.v2-tile--xl svg {
	width: 48px;
	height: 48px;
}

.v2-step__week {
	margin: 1.5rem 0 0;
	font-size: 11px;
}

.v2-step__name {
	margin: 0.5rem 0 0;
	font-size: 21px;
}

.v2-step__body {
	margin: 0.5rem 0 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--v2-ink-muted);
}

@media (min-width: 768px) {
	.v2-how__head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
	}

	.v2-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1025px) {
	.v2-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.v2-steps::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: 28px;
		height: 1px;
		background: var(--v2-ink-border);
	}
}

/* ---------- Bento grid ---------- */
.v2-grid6 {
	display: grid;
	gap: 1rem;
}

.v2-grid6 > * {
	margin-block-start: 0;
}

.v2-card {
	padding: 1.75rem;
	border: 1px solid var(--v2-border);
	border-radius: 1.5rem;
	background: var(--wp--preset--color--white);
	box-shadow: var(--v2-shadow-card);
}

.v2-card h3 {
	margin: 0;
	font-size: 20px;
}

.v2-card__title {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.v2-card__p {
	max-width: 48ch;
	margin: 0.5rem 0 0;
}

.v2-card--ink {
	border-color: transparent;
	background: var(--v2-gradient-ink);
	color: var(--v2-ink-fg);
	box-shadow: var(--v2-shadow-float);
}

.v2-card--ink h3 {
	margin-top: 0.75rem;
	color: var(--v2-ink-fg);
}

.v2-span2 .v2-card__p {
	font-size: 15px;
}

.v2-icon {
	display: inline-flex;
}

.v2-icon svg {
	width: 20px;
	height: 20px;
}

.v2-crm-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin-top: 1.5rem;
}

.v2-crm-tile {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem;
	border: 1px solid var(--v2-border);
	border-radius: 1rem;
	background: color-mix(in srgb, var(--v2-soft) 60%, transparent);
}

.v2-crm-tile .v2-label {
	font-size: 10px;
}

.v2-crm-tile__n {
	font-family: var(--v2-font-display);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1;
}

.v2-channels {
	display: flex;
	gap: 0.5rem;
}

.v2-channels + h3 {
	margin-top: 1.25rem;
}

.v2-pair {
	display: grid;
	gap: 1rem;
}

/* No explicit height: grid stretch equalises each row. (height:100% here
   added the padding on top of the row height and made cards overlap.) */
.v2-card--small {
	padding: 1.5rem;
	transition: transform 0.2s ease;
}

.v2-card--small:hover {
	transform: translateY(-4px);
}

.v2-card--small h3 {
	margin-top: 1rem;
	font-size: 18px;
}

.v2-card--small p {
	margin: 0.375rem 0 0;
	font-size: 15px;
}

@media (min-width: 640px) {
	.v2-pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.v2-grid6 {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}

	.v2-span4 {
		grid-column: span 4;
	}

	.v2-span3 {
		grid-column: span 3;
	}

	.v2-span2 {
		grid-column: span 2;
	}
}

/* ---------- Stats band ---------- */
.v2-stats__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1px;
	overflow: hidden;
	border-radius: 1.5rem;
	background: color-mix(in srgb, var(--v2-ink) 15%, var(--wp--preset--color--white));
}

.v2-stats__grid > * {
	margin-block-start: 0;
}

.v2-stat {
	position: relative;
	overflow: hidden;
	padding: 2.5rem 1.5rem;
	background: var(--v2-ink);
	color: var(--v2-ink-fg);
	transition: background-color 0.3s ease;
}

/* Soft glow that drifts in from the corner on hover. */
.v2-stat::after {
	content: "";
	position: absolute;
	right: -6rem;
	top: -6rem;
	width: 14rem;
	height: 14rem;
	pointer-events: none;
	background: var(--v2-glow);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.v2-stat:hover {
	background: var(--v2-ink-card);
}

.v2-stat:hover::after {
	opacity: 1;
}

/* Short gradient accent bar above each number; sweeps in on reveal. */
.v2-stat::before {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-bottom: 1.25rem;
	border-radius: 999px;
	background-image: var(--v2-gradient-brand);
	transform-origin: left center;
}

.v2-stat__n {
	position: relative;
	margin: 0;
	font-family: var(--v2-font-display);
	font-size: 56px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}

.v2-stat__l {
	position: relative;
	margin: 0.75rem 0 0;
	font-size: 15px;
	color: var(--v2-ink-muted);
}

/* Reveal: cells rise in with a stagger once count-up.js marks the grid
   .v2-anim (JS present, motion allowed) and then .is-visible (in view).
   Without JS neither class exists and everything is simply shown. */
/* Only the cell CONTENTS animate; the dark cell itself stays put so the
   light gap colour never shows through. */
.v2-stats__grid.v2-anim .v2-stat > * {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.v2-stats__grid.v2-anim .v2-stat::before {
	transform: scaleX(0);
	transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.v2-stats__grid.v2-anim.is-visible .v2-stat > * {
	opacity: 1;
	transform: none;
}

.v2-stats__grid.v2-anim.is-visible .v2-stat::before {
	transform: scaleX(1);
}

.v2-stats__grid.v2-anim .v2-stat:nth-child(2) > *,
.v2-stats__grid.v2-anim .v2-stat:nth-child(2)::before {
	transition-delay: 0.14s;
}

.v2-stats__grid.v2-anim .v2-stat:nth-child(3) > *,
.v2-stats__grid.v2-anim .v2-stat:nth-child(3)::before {
	transition-delay: 0.28s;
}

.v2-stats__grid.v2-anim .v2-stat:nth-child(4) > *,
.v2-stats__grid.v2-anim .v2-stat:nth-child(4)::before {
	transition-delay: 0.42s;
}

@media (min-width: 640px) {
	.v2-stat {
		padding-inline: 2rem;
	}
}

@media (min-width: 1025px) {
	.v2-stats__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ---------- Guarantee card ---------- */
.v2-guarantee__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
	overflow: hidden;
	padding: 2rem;
	border: 2px solid var(--v2-brand);
	border-radius: 1.5rem;
	background: var(--v2-soft);
}

.v2-guarantee__card::after {
	content: "";
	position: absolute;
	right: -8rem;
	bottom: -8rem;
	width: 24rem;
	height: 24rem;
	pointer-events: none;
	background: var(--v2-glow);
}

.v2-guarantee__card > * {
	position: relative;
	z-index: 1;
}

.v2-guarantee__body > * + * {
	margin-top: 1.25rem;
}

.v2-guarantee__statement {
	max-width: 28ch;
	margin: 0;
	font-family: var(--v2-font-display);
	font-size: clamp(1.75rem, 3.8vw, 2.75rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.v2-guarantee__statement span {
	color: var(--v2-brand-deep);
}

.v2-guarantee__risk {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
	color: var(--v2-brand-deep);
}

@media (min-width: 640px) {
	.v2-guarantee__card {
		padding: 3.5rem;
	}
}

@media (min-width: 1025px) {
	.v2-guarantee__card {
		flex-direction: row;
		align-items: center;
	}
}

/* ---------- FAQ (core Details, no JS) ---------- */
.v2-faq__grid {
	display: grid;
	gap: 2.5rem;
}

.v2-faq__grid > * {
	margin-block-start: 0;
}

.v2-faq__grid .v2-head {
	margin-bottom: 0;
}

.v2-faq__list > * {
	margin-block-start: 0;
}

.v2-faq__list > * + * {
	margin-block-start: 0.75rem;
}

.v2-faq__item {
	padding: 0 1.5rem;
	border: 1px solid var(--v2-border);
	border-radius: 1rem;
	background: var(--wp--preset--color--white);
	box-shadow: var(--v2-shadow-card);
}

.v2-faq__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.25rem 0;
	cursor: pointer;
	list-style: none;
	font-family: var(--v2-font-display);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-align: left;
}

.v2-faq__item summary::-webkit-details-marker {
	display: none;
}

.v2-faq__item summary::after {
	content: "";
	flex-shrink: 0;
	width: 8px;
	height: 8px;
	margin: -4px 6px 0 0;
	border-right: 2px solid var(--v2-muted);
	border-bottom: 2px solid var(--v2-muted);
	transform: rotate(45deg);
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), margin-top 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Chevron flips in step with the drawer (faq.js adds .is-closing while
   the close animation runs). */
.v2-faq__item[open]:not(.is-closing) summary::after {
	margin-top: 4px;
	transform: rotate(-135deg);
}

/* Bottom space equals the summary's top padding (1.25rem). Scoped under
   .dlp-v2 to outrank core's ".wp-block-details-is-layout-flow > :last-child
   { margin-block-end: 0 }" rule. */
.dlp-v2 .v2-faq__item > p {
	margin: 0 0 1.25rem;
	font-size: 17px;
	line-height: 1.6;
}

@media (min-width: 640px) {
	.v2-faq__item summary {
		font-size: 18px;
	}
}

@media (min-width: 1025px) {
	.v2-faq__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	}
}

/* ---------- Final CTA panel ---------- */
.v2-final {
	padding: 0 0.75rem 0.75rem;
}

.v2-final .alignwide {
	max-width: none;
}

.v2-final__panel {
	position: relative;
	overflow: hidden;
	padding: 6rem 1.25rem;
	border-radius: 1.5rem;
	background: var(--v2-gradient-ink);
	color: var(--v2-ink-fg);
	text-align: center;
}

.v2-final__panel::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 0;
	width: 700px;
	height: 500px;
	transform: translate(-50%, -50%);
	pointer-events: none;
	background: var(--v2-glow);
}

.v2-final__panel > * {
	position: relative;
	margin-block-start: 0;
}

.v2-final__spark {
	display: inline-flex;
}

.v2-final__spark svg {
	width: 24px;
	height: 24px;
}

.v2-final__h2 {
	max-width: 16ch;
	margin: 1.5rem auto 0;
	color: var(--v2-ink-fg);
}

.v2-final__lead {
	max-width: 50ch;
	margin: 1.5rem auto 0;
}

.v2-final__action {
	margin: 2.5rem 0 0;
}

@media (min-width: 640px) {
	.v2-final {
		padding: 0 1.25rem 1.25rem;
	}

	.v2-final__panel {
		padding-block: 8rem;
	}
}

/* ---------- Footer ---------- */
.v2-footer__row > * {
	margin: 0;
}

.v2-footer__copy {
	font-family: var(--v2-font-mono);
	font-size: 13px;
	color: var(--v2-muted);
}