/* ============================================================================
   P1 /pricing/ — Sitehandle SaaS pricing page
   Concept: "Transparent Anchor"
   Brief: projects/sitehandle/seo/batch-01/p1-pricing/design-brief.md
   DCD:   projects/sitehandle/seo/batch-01/p1-pricing/dcd.md

   Scope: hero + 3-tier card cluster (S-P1-01) ships first iteration.
   S-P1-02/03/04/07/08/09 follow in subsequent build iterations.
   ============================================================================ */

/* --- Page wrapper --- */
.p1-page {
	background-color: var(--color-surface);
}

/* All sections get the W1 page-level scroll-margin so anchor jumps clear the
   sticky header. */
.p1-page section[id] {
	scroll-margin-top: var(--header-height, 88px);
}

/* ============================================================================
   S-P1-01 — Hero with 3-tier card cluster
   ============================================================================ */
.p1-hero {
	position: relative;
	background-color: var(--color-surface);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl) clamp(3rem, 2rem + 2vw, 5rem);
	overflow: hidden;
	isolation: isolate;
}

.p1-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
	-webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
}

.p1-hero__inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
}

/* Subtle radial brand-teal wash behind the tier cluster on desktop, drawing
   the eye toward the Standard column without overpowering. Disabled on mobile
   where the cards are already the dominant visual element. */
@media (min-width: 1024px) {
	.p1-hero__inner::after {
		content: "";
		position: absolute;
		left: 50%;
		top: clamp(8rem, 5rem + 6vw, 14rem);
		transform: translateX(-50%);
		width: clamp(420px, 30vw, 640px);
		height: clamp(420px, 30vw, 640px);
		background: radial-gradient(circle at center, rgba(16, 158, 145, 0.10) 0%, rgba(16, 158, 145, 0) 60%);
		border-radius: 50%;
		pointer-events: none;
		z-index: 0;
		filter: blur(12px);
	}
}

/* --- Hero header (eyebrow + H1 + lede) --- */
.p1-hero__head {
	max-width: 880px;
	margin: 0 auto clamp(3rem, 2rem + 2.5vw, 4.5rem);
	text-align: center;
}

.p1-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.p1-hero__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h1.p1-hero__title {
	font-size: clamp(2.5rem, 1.7rem + 2.6vw, 3.875rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.08;
	margin: 0 auto var(--space-md);
	max-width: 22ch;
	text-wrap: balance;
	color: var(--color-text);
}

.p1-hero__lede {
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 56ch;
	line-height: 1.5;
}

/* --- Tier card grid --- */
.p1-hero__tiers {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	max-width: 1180px;
	margin: 0 auto;
	align-items: stretch;
}

/* Mobile: Standard (recommended) tier at top of the single-column stack so the
   conversion anchor is the first card the buyer sees on small screens. DOM
   order is Minimum -> Standard -> Scale (correct for desktop visual flow);
   `order: -1` on the featured card pulls it to first in the visual stack. */
@media (max-width: 719px) {
	.p1-hero__tiers .p1-tier--featured {
		order: -1;
	}
}

@media (min-width: 720px) {
	.p1-hero__tiers {
		grid-template-columns: repeat(2, 1fr);
	}

	/* On tablet, span Standard across both columns so it remains the visual
	   anchor when tiers don't fit 3-up. */
	.p1-hero__tiers .p1-tier--featured {
		grid-column: 1 / -1;
		max-width: 560px;
		margin: 0 auto;
		width: 100%;
	}
}

@media (min-width: 1024px) {
	.p1-hero__tiers {
		grid-template-columns: repeat(3, 1fr);
	}

	.p1-hero__tiers .p1-tier--featured {
		grid-column: auto;
		max-width: none;
		margin: 0;
	}
}

/* --- Single tier card --- */
.p1-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--color-card-surface);
	border: 1px solid rgba(16, 80, 75, 0.08);
	border-radius: var(--radius-xl);
	padding: clamp(1.85rem, 1.5rem + 0.8vw, 2.5rem);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 4px rgba(20, 20, 19, 0.04),
		0 18px 48px -22px rgba(16, 80, 75, 0.18);
	transition: transform var(--duration-normal) var(--ease-spring),
	            box-shadow var(--duration-normal) var(--ease-spring),
	            border-color var(--duration-normal) ease;
	overflow: hidden;
}

.p1-tier::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 40% at 100% 0%, rgba(16, 158, 145, 0.05) 0%, transparent 65%);
	z-index: 0;
	pointer-events: none;
}

.p1-tier:hover {
	transform: translateY(-3px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 6px rgba(20, 20, 19, 0.06),
		0 28px 64px -24px rgba(16, 80, 75, 0.30);
	border-color: rgba(16, 158, 145, 0.18);
}

/* --- Featured tier (Standard) --- */
.p1-tier--featured {
	border-color: rgba(16, 158, 145, 0.32);
	border-width: 1.5px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 4px 8px rgba(20, 20, 19, 0.08),
		0 36px 84px -22px rgba(16, 80, 75, 0.42);
}

@media (min-width: 1024px) {
	.p1-tier--featured {
		transform: translateY(-12px);
	}

	.p1-tier--featured:hover {
		transform: translateY(-15px);
	}
}

.p1-tier--featured::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: 5px;
	background: linear-gradient(90deg, #14B8A6 0%, var(--color-brand) 50%, #0F766E 100%);
	pointer-events: none;
	z-index: 1;
}

.p1-tier__pill {
	position: absolute;
	top: clamp(1.5rem, 1.2rem + 0.5vw, 1.85rem);
	right: clamp(1.25rem, 1rem + 0.5vw, 1.65rem);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	background-color: var(--color-brand);
	color: var(--color-white);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	padding: 0.35rem 0.7rem;
	border-radius: 999px;
	box-shadow: 0 4px 12px -4px rgba(16, 80, 75, 0.40);
}

/* --- Tier card head --- */
.p1-tier__head {
	position: relative;
	z-index: 1;
	margin-bottom: clamp(1.5rem, 1.25rem + 0.5vw, 1.85rem);
}

.p1-tier__name {
	font-size: var(--text-small);
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 0.6rem;
	line-height: 1;
}

.p1-tier--featured .p1-tier__name {
	color: var(--color-brand-dark);
}

.p1-tier__price {
	display: flex;
	align-items: baseline;
	flex-wrap: nowrap;
	gap: 0.4rem;
	margin: 0 0 0.85rem;
	color: var(--color-text);
	white-space: nowrap;
}

.p1-tier__price-amount {
	font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1;
}

.p1-tier__price-period {
	font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.05rem);
	font-weight: 600;
	color: var(--color-text-muted);
	letter-spacing: -0.005em;
}

.p1-tier__tagline {
	font-size: clamp(0.95rem, 0.9rem + 0.15vw, 1.0625rem);
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.45;
	max-width: 32ch;
}

/* --- Tier features list --- */
.p1-tier__features {
	position: relative;
	z-index: 1;
	list-style: none;
	margin: 0 0 clamp(1.5rem, 1.25rem + 0.5vw, 2rem);
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	flex: 1;
}

.p1-tier__features > li {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.9875rem;
	color: var(--color-text);
	line-height: 1.45;
}

.p1-tier__check {
	flex-shrink: 0;
	color: var(--color-brand);
	margin-top: 0.18em;
}

/* --- Tier CTA button --- */
.p1-tier__cta {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	padding: 0.85rem 1.25rem;
	border-radius: var(--radius-md);
	text-decoration: none;
	transition: transform var(--duration-normal) var(--ease-spring),
	            background-color var(--duration-normal) ease,
	            box-shadow var(--duration-normal) ease,
	            color var(--duration-normal) ease,
	            border-color var(--duration-normal) ease;
	border: 1.5px solid transparent;
	text-align: center;
	margin-top: auto;
}

.p1-tier__cta--primary {
	background-color: var(--color-brand);
	color: var(--color-white);
	box-shadow: 0 6px 20px -8px rgba(16, 80, 75, 0.50);
}

.p1-tier__cta--primary:hover,
.p1-tier__cta--primary:focus-visible {
	background-color: var(--color-brand-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px -8px rgba(16, 80, 75, 0.60);
}

.p1-tier__cta--ghost {
	background-color: transparent;
	color: var(--color-brand-dark);
	border-color: rgba(16, 158, 145, 0.30);
}

.p1-tier__cta--ghost:hover,
.p1-tier__cta--ghost:focus-visible {
	background-color: rgba(16, 158, 145, 0.06);
	border-color: rgba(16, 158, 145, 0.50);
	color: var(--color-brand-dark);
	transform: translateY(-2px);
}

/* ============================================================================
   S-P1-02 — What's in every plan (3-up)
   Light alternating section bg. Three card pattern mirrors the W1 channel grid:
   icon container + bold name + 1-line muted body. Cream cards, brand-tinted
   icon background, layered shadow stack.
   ============================================================================ */
.p1-glance {
	position: relative;
	background-color: var(--color-surface-alt);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl);
	overflow: hidden;
	isolation: isolate;
}

.p1-glance::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
}

.p1-glance__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.p1-glance__head {
	max-width: 720px;
	margin: 0 auto var(--space-2xl);
	text-align: center;
}

.p1-glance__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.p1-glance__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h2.p1-glance__title {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 auto var(--space-md);
	max-width: 18ch;
	text-wrap: balance;
	color: var(--color-text);
}

.p1-glance__lede {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 56ch;
	line-height: 1.55;
}

.p1-glance__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
}

@media (min-width: 720px) {
	.p1-glance__cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

.p1-glance__card {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	background-color: var(--color-card-surface);
	border: 1px solid rgba(16, 80, 75, 0.08);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 1.25rem + 0.5vw, 1.85rem);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 4px rgba(20, 20, 19, 0.05),
		0 18px 48px -20px rgba(16, 80, 75, 0.18);
	transition: transform var(--duration-normal) var(--ease-spring),
	            box-shadow var(--duration-normal) var(--ease-spring),
	            border-color var(--duration-normal) ease;
	overflow: hidden;
}

.p1-glance__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 45% at 100% 0%, rgba(16, 158, 145, 0.06) 0%, transparent 65%);
	z-index: 0;
	pointer-events: none;
}

.p1-glance__card:hover {
	transform: translateY(-4px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 6px rgba(20, 20, 19, 0.07),
		0 28px 60px -22px rgba(16, 80, 75, 0.30);
	border-color: rgba(16, 158, 145, 0.20);
}

.p1-glance__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background-color: rgba(16, 158, 145, 0.10);
	color: var(--color-brand-dark);
	flex-shrink: 0;
}

.p1-glance__copy {
	position: relative;
	z-index: 1;
	min-width: 0;
}

h3.p1-glance__name {
	font-size: clamp(1.125rem, 1rem + 0.3vw, 1.3125rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--color-text);
	margin: 0 0 0.4rem;
	line-height: 1.2;
}

.p1-glance__text {
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.5;
}

/* ============================================================================
   S-P1-07 — Pause/cancel guarantee panel
   Reuses the W1 guarantee-panel pattern verbatim with .p1-guarantee namespace.
   Single horizontal cream card with full-height brand-teal left rail, two
   halves split by vertical divider with circular OR chip. Mobile stacks
   vertically with the rail becoming a top band.
   ============================================================================ */
.p1-guarantee {
	position: relative;
	background-color: var(--color-surface);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl);
	overflow: hidden;
	isolation: isolate;
}

.p1-guarantee::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
}

.p1-guarantee__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.p1-guarantee__head {
	max-width: 720px;
	margin: 0 auto clamp(2.5rem, 2rem + 2vw, 4rem);
	text-align: center;
}

.p1-guarantee__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.p1-guarantee__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h2.p1-guarantee__title {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 auto var(--space-md);
	max-width: 22ch;
	text-wrap: balance;
	color: var(--color-text);
}

.p1-guarantee__lede {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 50ch;
	line-height: 1.55;
}

.p1-guarantee__panel {
	position: relative;
	max-width: 920px;
	margin: 0 auto;
	background-color: var(--color-card-surface);
	border-radius: var(--radius-xl);
	padding: clamp(2rem, 1.5rem + 1.5vw, 2.75rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem) clamp(2rem, 1.5rem + 1.5vw, 2.75rem) clamp(2rem, 1.5rem + 2vw, 3.5rem);
	overflow: hidden;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 6px rgba(20, 20, 19, 0.06),
		0 30px 64px -28px rgba(16, 80, 75, 0.32);
	border: 1px solid rgba(16, 158, 145, 0.16);
	display: flex;
	align-items: stretch;
	gap: 0;
}

.p1-guarantee__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 60% 80% at 0% 50%, rgba(16, 158, 145, 0.10) 0%, transparent 55%),
		radial-gradient(ellipse 50% 70% at 100% 50%, rgba(20, 184, 166, 0.07) 0%, transparent 60%);
	pointer-events: none;
}

.p1-guarantee__panel::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 5px;
	background: linear-gradient(180deg, #14B8A6 0%, var(--color-brand) 50%, #0F766E 100%);
}

.p1-guarantee__half {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(1rem, 0.75rem + 1vw, 1.5rem);
	min-width: 0;
	flex: 1 1 0;
}

.p1-guarantee__icon {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	border-radius: 18px;
	background: linear-gradient(135deg, rgba(16, 158, 145, 0.18) 0%, rgba(16, 158, 145, 0.08) 100%);
	border: 1px solid rgba(16, 158, 145, 0.24);
	color: var(--color-brand-dark);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.85) inset,
		0 8px 16px -8px rgba(16, 80, 75, 0.32);
	flex-shrink: 0;
}

.p1-guarantee__copy {
	min-width: 0;
}

h3.p1-guarantee__label {
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--color-text);
	margin: 0 0 0.25rem;
	line-height: 1.05;
}

.p1-guarantee__meta {
	font-size: clamp(0.9875rem, 0.95rem + 0.15vw, 1.0625rem);
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.4;
}

.p1-guarantee__divider {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 1px;
	margin: 0 clamp(0.5rem, 0.25rem + 0.5vw, 1rem);
	align-self: stretch;
	background: linear-gradient(180deg, transparent 0%, rgba(16, 80, 75, 0.18) 20%, rgba(16, 80, 75, 0.18) 80%, transparent 100%);
}

.p1-guarantee__divider-or {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background-color: var(--color-card-surface);
	border: 1px solid rgba(16, 80, 75, 0.14);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	box-shadow: 0 2px 4px rgba(20, 20, 19, 0.04);
}

@media (max-width: 720px) {
	.p1-guarantee__panel {
		flex-direction: column;
		gap: 0;
		padding: clamp(2rem, 1.5rem + 1.5vw, 2.5rem) clamp(1.25rem, 1rem + 1vw, 2rem);
	}

	.p1-guarantee__half {
		padding: clamp(0.5rem, 0.25rem + 0.5vw, 0.75rem) 0;
		flex: 0 0 auto;
		justify-content: flex-start;
	}

	.p1-guarantee__panel::after {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: 100%;
		height: 5px;
		background: linear-gradient(90deg, #14B8A6 0%, var(--color-brand) 50%, #0F766E 100%);
	}

	.p1-guarantee__divider {
		width: 100%;
		height: 1px;
		margin: clamp(1rem, 0.75rem + 1vw, 1.5rem) 0;
		background: linear-gradient(90deg, transparent 0%, rgba(16, 80, 75, 0.16) 20%, rgba(16, 80, 75, 0.16) 80%, transparent 100%);
	}
}

/* ============================================================================
   S-P1-03 — Comparison table
   Full feature matrix Minimum / Standard / Scale across 5 category bands.
   - Desktop: 4-column CSS grid, sticky header on scroll, Standard column
     highlighted with subtle teal tint and slightly heavier border
   - Mobile: collapsible <details> per category band; Tasks + QA stay open by
     default, others start collapsed (toggled via inline JS at section end)
   - ✓ icons in brand-teal for included; ✗ icons in subdued gray with
     visually-hidden screen-reader text for not-included
   ============================================================================ */
.p1-compare {
	position: relative;
	background-color: var(--color-surface-alt);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl);
	overflow: visible;
	isolation: isolate;
}

.p1-compare::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
}

.p1-compare__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.p1-compare__head {
	max-width: 720px;
	margin: 0 auto clamp(2.5rem, 2rem + 2vw, 4rem);
	text-align: center;
}

.p1-compare__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.p1-compare__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h2.p1-compare__title {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 auto var(--space-md);
	max-width: 22ch;
	text-wrap: balance;
	color: var(--color-text);
}

.p1-compare__lede {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 56ch;
	line-height: 1.55;
}

/* Table card wrapper */
.p1-compare__table {
	max-width: 1080px;
	margin: 0 auto;
	background-color: var(--color-card-surface);
	border: 1px solid rgba(16, 80, 75, 0.08);
	border-radius: var(--radius-lg);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 6px rgba(20, 20, 19, 0.06),
		0 22px 56px -22px rgba(16, 80, 75, 0.22);
	overflow: hidden;
}

/* Header row + each row use the same 4-column grid template so columns align
   across category bands. */
.p1-compare__header,
.p1-compare__row {
	display: grid;
	grid-template-columns: 2fr 1fr 1.05fr 1fr;
	align-items: center;
}

.p1-compare__header {
	background-color: var(--color-card-surface);
	border-bottom: 1.5px solid rgba(16, 80, 75, 0.10);
	font-size: var(--text-small);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text);
}

.p1-compare__cell {
	padding: clamp(0.85rem, 0.7rem + 0.35vw, 1.1rem) clamp(0.75rem, 0.5rem + 0.6vw, 1.15rem);
	font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1.0625rem);
	color: var(--color-text);
	text-align: center;
	line-height: 1.4;
}

.p1-compare__cell--feature {
	text-align: left;
	color: var(--color-text);
	font-weight: 600;
}

.p1-compare__header .p1-compare__cell--feature {
	color: var(--color-text-muted);
	font-weight: 800;
}

/* Featured (Standard) column — brand-teal tint runs the full table height;
   the column gets heavier left/right inset borders to read as the recommended
   column from a 6-foot view. */
.p1-compare__cell--featured {
	background-color: rgba(16, 158, 145, 0.075);
	box-shadow:
		1.5px 0 0 rgba(16, 158, 145, 0.28) inset,
		-1.5px 0 0 rgba(16, 158, 145, 0.28) inset;
	color: var(--color-text);
	font-weight: 700;
}

.p1-compare__col-pill {
	display: inline-flex;
	align-items: center;
	background-color: var(--color-brand);
	color: var(--color-white);
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	padding: 0.3rem 0.6rem;
	border-radius: 999px;
}

/* Category band — <details> styled as a connected table section.
   <summary> is the category title strip spanning all 4 columns. */
.p1-compare__band {
	border-top: 1px solid rgba(16, 80, 75, 0.10);
}

.p1-compare__band[open] + .p1-compare__band {
	border-top: 1px solid rgba(16, 80, 75, 0.10);
}

.p1-compare__band-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: clamp(0.75rem, 0.6rem + 0.4vw, 1rem) clamp(0.85rem, 0.6rem + 0.6vw, 1.25rem);
	cursor: pointer;
	list-style: none;
	font-size: var(--text-small);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-brand-dark);
	background-color: rgba(16, 158, 145, 0.06);
	border-bottom: 1px solid rgba(16, 158, 145, 0.16);
	transition: background-color var(--duration-normal) ease;
}

.p1-compare__band-title::-webkit-details-marker {
	display: none;
}

.p1-compare__band-title:hover {
	background-color: rgba(16, 158, 145, 0.10);
}

.p1-compare__band-chev {
	color: var(--color-brand);
	transition: transform var(--duration-normal) var(--ease-spring);
}

.p1-compare__band[open] .p1-compare__band-chev {
	transform: rotate(180deg);
}

.p1-compare__rows .p1-compare__row {
	border-bottom: 1px solid rgba(16, 80, 75, 0.06);
}

.p1-compare__rows .p1-compare__row:last-child {
	border-bottom: none;
}

.p1-compare__rows .p1-compare__row:hover {
	background-color: rgba(16, 158, 145, 0.025);
}

/* Yes / no glyphs */
.p1-compare__yes,
.p1-compare__no {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex-shrink: 0;
}

.p1-compare__yes {
	background-color: rgba(16, 158, 145, 0.12);
	color: var(--color-brand-dark);
}

.p1-compare__no {
	background-color: rgba(20, 20, 19, 0.05);
	color: rgba(20, 20, 19, 0.30);
}

/* Mobile: collapse table into stacked details. Header row stays visible at
   the top; each band is a stacked card with its rows underneath the title. */
@media (max-width: 719px) {
	.p1-compare__header,
	.p1-compare__row {
		grid-template-columns: 1.5fr 1fr 1fr 1fr;
	}

	.p1-compare__header {
		position: static;
		top: auto;
		font-size: 0.625rem;
		letter-spacing: 0.10em;
	}

	.p1-compare__cell {
		padding: 0.85rem 0.55rem;
		font-size: 0.875rem;
	}

	.p1-compare__cell--feature {
		font-size: 0.8125rem;
	}

	.p1-compare__col-pill {
		font-size: 0.5625rem;
		padding: 0.25rem 0.45rem;
		letter-spacing: 0.08em;
	}

	.p1-compare__yes,
	.p1-compare__no {
		width: 22px;
		height: 22px;
	}

	.p1-compare__yes svg,
	.p1-compare__no svg {
		width: 14px;
		height: 14px;
	}

	.p1-compare__band-title {
		padding: 0.85rem 0.85rem;
		font-size: 0.6875rem;
	}
}

/* ============================================================================
   S-P1-04 — Pricing anchors (cited)
   4-card horizontal row on desktop, 2x2 on tablet, 1-col on mobile. Each card
   shows an alternative cost source vs Sitehandle equivalent. Cited footnotes
   anchor to the bottom of the section.
   ============================================================================ */
.p1-anchors {
	position: relative;
	background-color: var(--color-surface);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl);
	overflow: hidden;
	isolation: isolate;
}

.p1-anchors::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
}

.p1-anchors__inner {
	max-width: 1200px;
	margin: 0 auto;
}

.p1-anchors__head {
	max-width: 720px;
	margin: 0 auto var(--space-2xl);
	text-align: center;
}

.p1-anchors__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.p1-anchors__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h2.p1-anchors__title {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 auto var(--space-md);
	max-width: 22ch;
	text-wrap: balance;
	color: var(--color-text);
}

.p1-anchors__lede {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 56ch;
	line-height: 1.55;
}

.p1-anchors__cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 0.85rem + 0.5vw, 1.5rem);
}

@media (min-width: 720px) {
	.p1-anchors__cards {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.p1-anchors__cards {
		grid-template-columns: repeat(4, 1fr);
	}
}

.p1-anchors__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--color-card-surface);
	border: 1px solid rgba(16, 80, 75, 0.08);
	border-radius: var(--radius-lg);
	padding: clamp(1.5rem, 1.25rem + 0.5vw, 1.85rem);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 4px rgba(20, 20, 19, 0.05),
		0 18px 48px -20px rgba(16, 80, 75, 0.18);
	transition: transform var(--duration-normal) var(--ease-spring),
	            box-shadow var(--duration-normal) var(--ease-spring),
	            border-color var(--duration-normal) ease;
	overflow: hidden;
}

.p1-anchors__card::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 45% at 100% 0%, rgba(16, 158, 145, 0.05) 0%, transparent 65%);
	z-index: 0;
	pointer-events: none;
}

.p1-anchors__card:hover {
	transform: translateY(-3px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.95) inset,
		0 2px 6px rgba(20, 20, 19, 0.07),
		0 28px 60px -22px rgba(16, 80, 75, 0.30);
	border-color: rgba(16, 158, 145, 0.18);
}

.p1-anchors__alt-name {
	position: relative;
	z-index: 1;
	font-size: var(--text-small);
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 0.85rem;
	line-height: 1.2;
}

.p1-anchors__price {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem;
	margin: 0 0 0.65rem;
	color: var(--color-text);
}

.p1-anchors__price-amount {
	font-size: clamp(1.625rem, 1.4rem + 0.7vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
}

.p1-anchors__price-period {
	font-size: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
	font-weight: 600;
	color: var(--color-text-muted);
}

.p1-anchors__alt-context {
	position: relative;
	z-index: 1;
	font-size: 0.875rem;
	color: var(--color-text-muted);
	margin: 0 0 1.25rem;
	line-height: 1.45;
}

.p1-anchors__fn-link {
	color: var(--color-brand);
	text-decoration: none;
	font-weight: 700;
	margin-left: 0.1rem;
}

.p1-anchors__fn-link:hover,
.p1-anchors__fn-link:focus-visible {
	text-decoration: underline;
}

.p1-anchors__sh-equiv {
	position: relative;
	z-index: 1;
	margin-top: auto;
	background-color: rgba(16, 158, 145, 0.08);
	border: 1px solid rgba(16, 158, 145, 0.18);
	border-radius: var(--radius-md);
	padding: 0.75rem 0.9rem;
}

.p1-anchors__sh-label {
	display: block;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-brand-dark);
	margin: 0 0 0.35rem;
}

.p1-anchors__sh-text {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-text);
	margin: 0;
	line-height: 1.4;
}

.p1-anchors__footnotes {
	margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) auto 0;
	max-width: 880px;
	padding: clamp(1rem, 0.75rem + 0.75vw, 1.5rem) clamp(1.25rem, 1rem + 0.75vw, 1.75rem);
	background-color: rgba(20, 20, 19, 0.03);
	border-radius: var(--radius-md);
	border: 1px solid rgba(20, 20, 19, 0.06);
}

.p1-anchors__footnote {
	font-size: 0.8125rem;
	color: var(--color-text-muted);
	margin: 0;
	line-height: 1.5;
	scroll-margin-top: var(--header-height, 88px);
}

.p1-anchors__footnote + .p1-anchors__footnote {
	margin-top: 0.5rem;
}

.p1-anchors__footnote a {
	color: var(--color-brand-dark);
	text-decoration: underline;
	text-decoration-color: rgba(16, 158, 145, 0.40);
	text-underline-offset: 2px;
}

.p1-anchors__footnote a:hover,
.p1-anchors__footnote a:focus-visible {
	text-decoration-color: var(--color-brand);
}

.p1-anchors__footnote sup {
	font-weight: 800;
	color: var(--color-brand);
	margin-right: 0.15rem;
}

/* ============================================================================
   S-P1-08 — Pricing FAQ accordion
   Driven by the schema_faq_items ACF repeater. First two items default-open.
   <details>/<summary> with brand-teal chevron that rotates on open. Subtle
   bottom border per row, no card chrome — typographic rhythm only.
   ============================================================================ */
.p1-faq {
	position: relative;
	background-color: var(--color-surface-alt);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl);
	overflow: hidden;
	isolation: isolate;
}

.p1-faq::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='2' cy='2' r='0.6' fill='%23141413' fill-opacity='0.05'/%3E%3C/svg%3E");
	background-size: 32px 32px;
	z-index: -1;
	pointer-events: none;
	mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
	-webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 80%);
}

.p1-faq__inner {
	max-width: 880px;
	margin: 0 auto;
}

.p1-faq__head {
	max-width: 720px;
	margin: 0 auto clamp(2.25rem, 1.85rem + 1.5vw, 3.25rem);
	text-align: center;
}

.p1-faq__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.p1-faq__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h2.p1-faq__title {
	font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 auto var(--space-md);
	max-width: 22ch;
	text-wrap: balance;
	color: var(--color-text);
}

.p1-faq__lede {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 56ch;
	line-height: 1.55;
}

.p1-faq__list {
	display: flex;
	flex-direction: column;
}

.p1-faq__item {
	border-bottom: 1px solid rgba(16, 80, 75, 0.10);
}

.p1-faq__item:first-child {
	border-top: 1px solid rgba(16, 80, 75, 0.10);
}

.p1-faq__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: clamp(1rem, 0.85rem + 0.4vw, 1.35rem) 0;
	cursor: pointer;
	list-style: none;
	font-size: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-text);
	line-height: 1.4;
	transition: color var(--duration-normal) ease;
}

.p1-faq__question::-webkit-details-marker {
	display: none;
}

.p1-faq__item:hover > .p1-faq__question,
.p1-faq__item[open] > .p1-faq__question {
	color: var(--color-brand-dark);
}

.p1-faq__question-text {
	flex: 1;
	min-width: 0;
}

.p1-faq__chevron {
	flex-shrink: 0;
	color: var(--color-brand);
	transition: transform var(--duration-normal) var(--ease-spring);
	margin-top: 0.18em;
}

.p1-faq__item[open] > .p1-faq__question .p1-faq__chevron {
	transform: rotate(180deg);
}

.p1-faq__answer {
	padding: 0 0 clamp(1rem, 0.85rem + 0.4vw, 1.35rem);
	font-size: clamp(0.9875rem, 0.95rem + 0.15vw, 1.0625rem);
	color: var(--color-text-muted);
	line-height: 1.6;
	max-width: 64ch;
}

/* ============================================================================
   S-P1-09 — Final CTA inline form
   3-field form (name, email, store URL) + optional tier radio chip group.
   Mirrors the W1 form pattern with .p1-cta-form namespace; reuses the W1 form
   handler JS by keeping the form id="w1-form".
   ============================================================================ */
.p1-cta-form {
	position: relative;
	background-color: var(--color-surface);
	padding: clamp(4.5rem, 3rem + 3vw, 7rem) var(--space-xl);
	overflow: hidden;
	isolation: isolate;
}

.p1-cta-form::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 55% at 50% 0%, rgba(16, 158, 145, 0.16) 0%, rgba(16, 158, 145, 0.06) 35%, transparent 70%);
	pointer-events: none;
	z-index: -1;
}

.p1-cta-form__inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.p1-cta-form__copy {
	max-width: 560px;
	margin: 0 auto clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

.p1-cta-form__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-brand);
	margin: 0 0 var(--space-md);
}

.p1-cta-form__eyebrow-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

h2.p1-cta-form__title {
	font-size: clamp(2rem, 1.5rem + 1.6vw, 2.85rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 auto var(--space-md);
	max-width: 22ch;
	color: var(--color-text);
	text-wrap: balance;
}

.p1-cta-form__lede {
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	color: var(--color-text-muted);
	margin: 0 auto;
	max-width: 56ch;
	line-height: 1.55;
}

.p1-cta-form__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	max-width: 520px;
	margin: 0 auto;
	text-align: left;
}

/* Tier radio chip group */
.p1-cta-form__tier {
	border: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

.p1-cta-form__tier-legend {
	font-size: var(--text-small);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--color-text-muted);
	margin: 0 0 1.1rem;
	padding: 0;
}

.p1-cta-form__tier-options {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.p1-cta-form__tier-option {
	cursor: pointer;
	display: inline-block;
}

.p1-cta-form__tier-radio {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.p1-cta-form__tier-chip {
	display: inline-flex;
	align-items: center;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--color-text);
	background-color: var(--color-card-surface);
	border: 1.5px solid rgba(16, 80, 75, 0.12);
	border-radius: 999px;
	padding: 0.55rem 1.1rem;
	transition: background-color var(--duration-normal) ease,
	            border-color var(--duration-normal) ease,
	            color var(--duration-normal) ease,
	            transform var(--duration-normal) var(--ease-spring);
}

.p1-cta-form__tier-option:hover .p1-cta-form__tier-chip {
	border-color: rgba(16, 158, 145, 0.36);
	transform: translateY(-1px);
}

.p1-cta-form__tier-radio:checked + .p1-cta-form__tier-chip {
	background-color: var(--color-brand);
	border-color: var(--color-brand);
	color: var(--color-white);
	box-shadow: 0 4px 12px -4px rgba(16, 80, 75, 0.40);
}

.p1-cta-form__tier-radio:focus-visible + .p1-cta-form__tier-chip {
	outline: 2px solid var(--color-brand);
	outline-offset: 3px;
}

/* Field + input */
.p1-cta-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.p1-cta-form__label {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--color-text);
}

.p1-cta-form__input {
	width: 100%;
	font-size: 1rem;
	font-family: inherit;
	color: var(--color-text);
	background-color: var(--color-card-surface);
	border: 1.5px solid rgba(16, 80, 75, 0.20);
	border-radius: var(--radius-md);
	padding: 0.85rem 1rem;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 1px 2px rgba(20, 20, 19, 0.04);
	transition: border-color var(--duration-normal) ease,
	            box-shadow var(--duration-normal) ease;
}

.p1-cta-form__input:focus {
	outline: none;
	border-color: var(--color-brand);
	box-shadow: 0 0 0 4px rgba(16, 158, 145, 0.14);
}

.p1-cta-form__input:user-invalid {
	border-color: rgba(220, 38, 38, 0.50);
}

/* Submit button */
.p1-cta-form__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--color-white);
	background-color: var(--color-brand);
	border: none;
	border-radius: var(--radius-md);
	padding: 1rem 1.5rem;
	margin-top: 0.5rem;
	cursor: pointer;
	box-shadow: 0 8px 20px -8px rgba(16, 80, 75, 0.50);
	transition: transform var(--duration-normal) var(--ease-spring),
	            box-shadow var(--duration-normal) ease,
	            background-color var(--duration-normal) ease;
}

.p1-cta-form__submit:hover:not(:disabled),
.p1-cta-form__submit:focus-visible:not(:disabled) {
	background-color: var(--color-brand-dark);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -8px rgba(16, 80, 75, 0.60);
	outline: none;
}

.p1-cta-form__submit:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.p1-cta-form__status {
	font-size: 0.9375rem;
	color: var(--color-text-muted);
	min-height: 1.4em;
	text-align: center;
}

.p1-cta-form__status--error {
	color: rgb(220, 38, 38);
}