/*
 * Why PurePaws page
 *
 * Uses only the provisional project tokens in theme.json. Decorative fields are
 * CSS-only and do not represent products, people, evidence, or certifications.
 */

.pp-why-main {
	--pp-why-gutter: clamp(20px, 4vw, 32px);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	margin-block-start: 0;
	overflow: clip;
}

.pp-why-main > * {
	margin-block-start: 0;
}

.pp-why-section {
	margin-block-start: 0;
	scroll-margin-top: 132px;
}

.pp-why-shell {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: 1200px;
	padding-inline: var(--pp-why-gutter);
	width: 100%;
}

.pp-why-main h1,
.pp-why-main h2,
.pp-why-main h3,
.pp-why-main p {
	margin-block-start: 0;
}

.pp-why-main h1,
.pp-why-main h2,
.pp-why-main h3 {
	color: var(--wp--preset--color--purple-900);
}

.pp-why-main h2 {
	font-size: clamp(2rem, 4vw, 3.2rem);
	letter-spacing: -0.035em;
	line-height: 1.04;
	margin-block-end: 24px;
}

.pp-why-main h3 {
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	line-height: 1.25;
}

.pp-why-main p {
	line-height: 1.7;
}

.pp-why-eyebrow {
	color: var(--wp--preset--color--purple-700);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	line-height: 1.3 !important;
	margin-block-end: 18px;
	text-transform: uppercase;
}

.pp-why-eyebrow--light {
	color: var(--wp--preset--color--yellow-300);
}

.pp-why-section-heading {
	max-width: 800px;
}

.pp-why-section-heading > p:last-child,
.pp-why-editorial__body > p,
.pp-why-principles__intro > p:last-child,
.pp-why-support__content > p:last-child,
.pp-why-responsible__panel > p:last-child,
.pp-why-final__inner > p {
	color: var(--wp--preset--color--muted);
	font-size: clamp(1rem, 1.5vw, 1.125rem);
	max-width: 720px;
}

.pp-why-section-heading--narrow {
	max-width: 760px;
}

/* Hero */
.pp-why-hero {
	background:
		radial-gradient(circle at 92% 14%, rgb(241 235 247 / 90%), transparent 30%),
		linear-gradient(120deg, var(--wp--preset--color--cream-100) 0%, var(--wp--preset--color--white) 64%);
	border-bottom: 12px solid var(--wp--preset--color--purple-900);
	padding-block: clamp(72px, 9vw, 116px);
	position: relative;
}

.pp-why-hero::before {
	background: var(--wp--preset--color--gold-500);
	content: "";
	height: 2px;
	left: 0;
	opacity: 0.7;
	position: absolute;
	top: 48px;
	width: min(18vw, 230px);
}

.pp-why-hero__grid {
	align-items: center;
	display: grid;
	gap: clamp(48px, 7vw, 96px);
	grid-template-columns: minmax(0, 1.16fr) minmax(330px, 0.84fr);
}

.pp-why-hero__content {
	max-width: 720px;
	position: relative;
	z-index: 2;
}

.pp-why-hero__title {
	font-size: clamp(3rem, 5.7vw, 5.5rem);
	letter-spacing: -0.055em;
	line-height: 0.96;
	margin-block-end: 28px;
}

.pp-why-hero__body {
	color: var(--wp--preset--color--muted);
	font-size: clamp(1rem, 1.45vw, 1.18rem);
	max-width: 650px;
}

.pp-why-actions {
	gap: 12px;
	margin-block-start: 32px;
}

.pp-why-actions .wp-block-button__link {
	align-items: center;
	border: 2px solid transparent;
	border-radius: var(--wp--custom--radius--control, 12px);
	box-sizing: border-box;
	display: inline-flex;
	font-size: 1rem;
	font-weight: 750;
	justify-content: center;
	line-height: 1.2;
	min-height: 49px;
	padding: 13px 21px;
	text-decoration: none;
	transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.pp-why-actions .pp-button--primary .wp-block-button__link {
	background: var(--wp--preset--color--purple-700);
	color: var(--wp--preset--color--white);
}

.pp-why-actions .pp-button--primary .wp-block-button__link:hover {
	background: var(--wp--preset--color--purple-900);
	transform: translateY(-2px);
}

.pp-why-actions .pp-button--secondary .wp-block-button__link {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--purple-700);
	color: var(--wp--preset--color--purple-900);
}

.pp-why-actions .pp-button--secondary .wp-block-button__link:hover {
	background: var(--wp--preset--color--lilac-100);
	border-color: var(--wp--preset--color--purple-900);
	transform: translateY(-2px);
}

.pp-why-actions .wp-block-button__link:focus-visible {
	outline: 3px solid var(--wp--preset--color--gold-500);
	outline-offset: 4px;
}

.pp-why-hero__visual {
	aspect-ratio: 1;
	background:
		radial-gradient(circle at 35% 32%, var(--wp--preset--color--cream-100) 0 8%, transparent 8.5%),
		radial-gradient(circle at 71% 31%, rgb(199 155 75 / 45%) 0 5%, transparent 5.5%),
		linear-gradient(145deg, rgb(241 235 247 / 85%), rgb(252 236 241 / 72%));
	border: 1px solid rgb(93 58 130 / 18%);
	border-radius: 50%;
	box-shadow: 0 32px 70px rgb(52 32 79 / 15%);
	max-width: 470px;
	position: relative;
}

.pp-why-hero__visual::before,
.pp-why-hero__visual::after {
	border: 1px solid rgb(93 58 130 / 38%);
	border-radius: 50%;
	content: "";
	position: absolute;
}

.pp-why-hero__visual::before {
	inset: 15%;
}

.pp-why-hero__visual::after {
	background: rgb(93 58 130 / 16%);
	border: 0;
	bottom: 8%;
	height: 38%;
	right: 4%;
	width: 38%;
}

.pp-why-hero__visual-word {
	bottom: 16%;
	color: var(--wp--preset--color--purple-900);
	font-size: clamp(0.72rem, 1.1vw, 0.9rem);
	font-weight: 850;
	left: 15%;
	letter-spacing: 0.2em;
	line-height: 1.8 !important;
	position: absolute;
	z-index: 2;
}

/* Everyday care */
.pp-why-everyday {
	background: var(--wp--preset--color--white);
	padding-block: clamp(72px, 9vw, 112px);
}

.pp-why-editorial {
	display: grid;
	gap: clamp(40px, 8vw, 120px);
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

.pp-why-editorial__body {
	border-left: 3px solid var(--wp--preset--color--gold-500);
	padding-left: clamp(24px, 4vw, 48px);
}

.pp-why-editorial__body > p {
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	line-height: 1.75;
}

.pp-why-editorial__note {
	background: linear-gradient(90deg, var(--wp--preset--color--cream-100), transparent);
	margin-block-start: 34px;
	min-height: 12px;
	width: 70%;
}

/* Purpose */
.pp-why-purpose {
	background: var(--wp--preset--color--lilac-100);
	padding-block: clamp(72px, 9vw, 108px);
}

.pp-why-purpose__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-block-start: clamp(40px, 6vw, 64px);
}

.pp-why-purpose__item {
	background: var(--wp--preset--color--white);
	border-top: 4px solid var(--wp--preset--color--purple-500);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	min-height: 270px;
	padding: 28px 24px;
}

.pp-why-purpose__item--vital {
	border-top-color: var(--wp--preset--color--gold-500);
}

.pp-why-purpose__item--calm {
	border-top-color: #b789a0;
}

.pp-why-purpose__item--gut {
	border-top-color: var(--wp--preset--color--yellow-300);
}

.pp-why-index {
	color: var(--wp--preset--color--purple-500);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.15em;
	margin-block-end: auto;
}

.pp-why-purpose__item h3 {
	margin-block: 40px 12px;
}

.pp-why-purpose__item > p:last-child {
	color: var(--wp--preset--color--muted);
	font-size: 0.95rem;
	margin-block-end: 0;
}

/* Ingredients */
.pp-why-ingredients {
	background: var(--wp--preset--color--cream-100);
	padding-block: clamp(72px, 9vw, 112px);
}

.pp-why-principles {
	align-items: end;
	display: grid;
	gap: clamp(48px, 8vw, 120px);
	grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
}

.pp-why-principles__list {
	border-top: 1px solid rgb(52 32 79 / 28%);
}

.pp-why-principles__list h3 {
	align-items: center;
	border-bottom: 1px solid rgb(52 32 79 / 20%);
	display: flex;
	gap: 24px;
	margin: 0;
	padding-block: 24px;
}

.pp-why-principles__list h3 span {
	color: var(--wp--preset--color--gold-500);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
}

/* Dosage */
.pp-why-dosage {
	background: var(--wp--preset--color--white);
	padding-block: clamp(72px, 9vw, 112px);
}

.pp-why-steps {
	display: grid;
	gap: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-block-start: clamp(44px, 7vw, 72px);
	position: relative;
}

.pp-why-steps::before {
	background: var(--wp--preset--color--lilac-100);
	content: "";
	height: 2px;
	left: 11%;
	position: absolute;
	right: 11%;
	top: 31px;
}

.pp-why-step {
	position: relative;
	text-align: center;
	z-index: 1;
}

.pp-why-step__number {
	align-items: center;
	background: var(--wp--preset--color--purple-700);
	border: 7px solid var(--wp--preset--color--white);
	border-radius: 50%;
	box-sizing: border-box;
	color: var(--wp--preset--color--white);
	display: inline-flex;
	font-size: 1rem;
	font-weight: 800;
	height: 64px;
	justify-content: center;
	margin-block-end: 20px;
	width: 64px;
}

.pp-why-step h3 {
	margin-inline: auto;
	max-width: 220px;
}

/* Transparency */
.pp-why-transparency {
	background: var(--wp--preset--color--purple-900);
	color: var(--wp--preset--color--white);
	padding-block: clamp(72px, 9vw, 112px);
}

.pp-why-transparency__grid {
	align-items: center;
	display: grid;
	gap: clamp(48px, 8vw, 120px);
	grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
}

.pp-why-transparency h2 {
	color: var(--wp--preset--color--white);
}

.pp-why-transparency__content > p {
	color: rgb(255 255 255 / 78%);
	font-size: clamp(1rem, 1.5vw, 1.15rem);
}

.pp-why-transparency__marker {
	align-items: center;
	aspect-ratio: 1;
	border: 1px solid rgb(255 255 255 / 38%);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	max-width: 330px;
	position: relative;
}

.pp-why-transparency__marker::before {
	border: 1px solid rgb(246 217 107 / 55%);
	border-radius: 50%;
	content: "";
	inset: 16%;
	position: absolute;
}

.pp-why-transparency__marker p {
	color: var(--wp--preset--color--white);
	font-size: clamp(1.25rem, 2.2vw, 1.8rem);
	font-weight: 800;
	letter-spacing: 0.13em;
	line-height: 1.35 !important;
	position: relative;
	text-align: center;
}

.pp-why-transparency__principle {
	border-top: 1px solid rgb(255 255 255 / 22%);
	margin-block-start: 32px;
	padding-block-start: 24px;
}

/* Support */
.pp-why-support {
	background: var(--wp--preset--color--blush-100);
	padding-block: clamp(72px, 9vw, 108px);
}

.pp-why-support__grid {
	align-items: center;
	display: grid;
	gap: clamp(48px, 8vw, 110px);
	grid-template-columns: minmax(0, 1.1fr) minmax(310px, 0.9fr);
}

.pp-why-support__topics {
	background: rgb(255 255 255 / 72%);
	border: 1px solid rgb(93 58 130 / 14%);
	border-radius: 50%;
	box-sizing: border-box;
	padding: 36px 50px;
}

.pp-why-support__topics p {
	border-bottom: 1px solid rgb(93 58 130 / 16%);
	color: var(--wp--preset--color--purple-900);
	font-size: 0.95rem;
	font-weight: 750;
	margin: 0;
	padding-block: 15px;
	text-align: center;
}

.pp-why-support__topics p:last-child {
	border-bottom: 0;
}

/* Shopping */
.pp-why-shopping {
	background: var(--wp--preset--color--cream-100);
	padding-block: clamp(72px, 9vw, 104px);
}

.pp-why-shopping__facts {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-block-start: 48px;
}

.pp-why-shopping__facts h3 {
	border-top: 1px solid rgb(52 32 79 / 24%);
	font-size: 0.95rem;
	margin: 0;
	padding: 24px 0 0 30px;
	position: relative;
}

.pp-why-shopping__facts h3::before {
	border: 2px solid var(--wp--preset--color--purple-500);
	border-radius: 50%;
	content: "";
	height: 10px;
	left: 0;
	position: absolute;
	top: 28px;
	width: 10px;
}

/* Responsible communication */
.pp-why-responsible {
	background: var(--wp--preset--color--white);
	padding-block: clamp(72px, 9vw, 112px);
}

.pp-why-responsible__panel {
	background:
		linear-gradient(110deg, var(--wp--preset--color--lilac-100), rgb(255 248 236 / 82%));
	border-left: 6px solid var(--wp--preset--color--gold-500);
	box-sizing: border-box;
	max-width: 1100px;
	padding-block: clamp(48px, 7vw, 82px);
	padding-right: clamp(28px, 7vw, 96px);
	padding-left: clamp(28px, 7vw, 96px);
}

.pp-why-responsible__panel h2 {
	max-width: 760px;
}

.pp-why-responsible__panel > p:last-child {
	color: var(--wp--preset--color--ink);
	font-size: clamp(1.05rem, 1.7vw, 1.22rem);
	max-width: 860px;
}

/* Final CTA */
.pp-why-final {
	background:
		radial-gradient(circle at 20% 50%, rgb(199 155 75 / 18%), transparent 20%),
		var(--wp--preset--color--lilac-100);
	padding-block: clamp(72px, 9vw, 108px);
}

.pp-why-final__inner {
	max-width: 900px;
	text-align: center;
}

.pp-why-final__inner > p {
	margin-inline: auto;
}

.pp-why-final__actions {
	justify-content: center;
}

@media (max-width: 980px) {
	.pp-why-hero__grid,
	.pp-why-principles,
	.pp-why-transparency__grid,
	.pp-why-support__grid {
		grid-template-columns: 1fr;
	}

	.pp-why-hero__visual {
		justify-self: center;
		max-width: 390px;
		width: 80%;
	}

	.pp-why-purpose__grid,
	.pp-why-shopping__facts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pp-why-purpose__item {
		min-height: 235px;
	}

	.pp-why-transparency__marker {
		max-width: 260px;
	}
}

@media (max-width: 700px) {
	.pp-why-section {
		scroll-margin-top: 112px;
	}

	.pp-why-hero {
		padding-block: 64px 72px;
	}

	.pp-why-hero__grid,
	.pp-why-editorial {
		grid-template-columns: 1fr;
	}

	.pp-why-hero__visual {
		max-width: 320px;
		width: 88%;
	}

	.pp-why-editorial__body {
		padding-left: 24px;
	}

	.pp-why-purpose__grid,
	.pp-why-shopping__facts {
		grid-template-columns: 1fr;
	}

	.pp-why-purpose__item {
		min-height: 210px;
	}

	.pp-why-purpose__item h3 {
		margin-block: 28px 10px;
	}

	.pp-why-steps {
		gap: 24px;
		grid-template-columns: 1fr;
	}

	.pp-why-steps::before {
		bottom: 40px;
		height: auto;
		left: 31px;
		right: auto;
		top: 40px;
		width: 2px;
	}

	.pp-why-step {
		align-items: center;
		display: grid;
		gap: 18px;
		grid-template-columns: 64px 1fr;
		text-align: left;
	}

	.pp-why-step__number {
		margin: 0;
	}

	.pp-why-step h3 {
		margin: 0;
		max-width: none;
	}

	.pp-why-transparency__marker {
		max-width: 230px;
	}

	.pp-why-support__topics {
		border-radius: 24px;
		padding: 24px 28px;
	}

	.pp-why-shopping__facts h3 {
		min-height: 48px;
	}
}

@media (max-width: 480px) {
	.pp-why-hero__title {
		font-size: clamp(2.65rem, 13vw, 3.45rem);
	}

	.pp-why-actions,
	.pp-why-actions .wp-block-button,
	.pp-why-actions .wp-block-button__link {
		width: 100%;
	}

	.pp-why-actions .wp-block-button__link {
		padding-inline: 16px;
		text-align: center;
	}

	.pp-why-hero__visual {
		width: 100%;
	}

	.pp-why-responsible__panel {
		border-left-width: 4px;
		padding-inline: 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pp-why-main *,
	.pp-why-main *::before,
	.pp-why-main *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}