/*
 * Heartmade theme styles. Loaded on the front end and in the editor.
 *
 * Every value comes from a theme.json token:
 *   colours  --wp--preset--color--*        shadows  --wp--preset--shadow--*
 *   fonts    --wp--preset--font-family--*   others   --wp--custom--{group}--*
 * Rotations and decorative offsets are written in place: they are one-off art
 * direction, not reusable scale values.
 *
 * Sections 1-12 port the approved mockup rule for rule. Later sections add
 * what the mockup did not have (WordPress, forms, motion, cookie banner,
 * text pages). Breakpoints: 880px and 520px.
 */

/* 1. Base ------------------------------------------------------------------ */

:root {
	/* Derived values used by more than one rule below. */
	--hm-admin-bar: var(--wp-admin--admin-bar--height, 0px);
	--hm-header-height: 98px; /* 10px + 76px logo + 10px + 2px border */
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--plum);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--custom--font-size--16);
	line-height: var(--wp--custom--line-height--body);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--marigold);
	outline-offset: 3px;
}

.wrap {
	width: 100%;
	max-width: var(--wp--custom--container--page);
	margin-inline: auto;
	padding-inline: var(--wp--custom--gutter);
}

section {
	padding-block: var(--wp--custom--space--88);
}

.eyebrow {
	font-size: var(--wp--custom--font-size--12);
	font-weight: var(--wp--custom--font-weight--heavy);
	letter-spacing: var(--wp--custom--tracking--eyebrow);
	text-transform: uppercase;
	margin: 0 0 var(--wp--custom--space--10);
}

h2.script {
	font-family: var(--wp--preset--font-family--script);
	font-weight: var(--wp--custom--font-weight--regular);
	font-size: var(--wp--custom--font-size--section-title);
	line-height: var(--wp--custom--line-height--title);
	margin: 0 0 var(--wp--custom--space--20);
	text-wrap: balance;
}

/* 2. Header ---------------------------------------------------------------- */

header.site {
	position: sticky;
	top: calc(env(safe-area-inset-top, 0px) + var(--hm-admin-bar));
	z-index: var(--wp--custom--z-index--header);
	background: var(--wp--preset--color--white);
	border-bottom: var(--wp--custom--border--rule) solid var(--wp--preset--color--plum);
}

.bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--custom--space--24);
	padding-block: var(--wp--custom--space--10);
}

.brand img {
	height: 76px;
	width: auto;
}

.brand-text {
	font-family: var(--wp--preset--font-family--script);
	font-size: var(--wp--custom--font-size--26);
}

nav.links {
	display: flex;
	gap: var(--wp--custom--space--28);
}

nav.links a {
	text-decoration: none;
	font-size: var(--wp--custom--font-size--13);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: var(--wp--custom--tracking--nav);
	text-transform: uppercase;
}

nav.links a:hover {
	color: var(--wp--preset--color--magenta);
}

/* 3. Buttons and text links ------------------------------------------------ */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--custom--space--8);
	min-height: 48px;
	padding: var(--wp--custom--space--12) var(--wp--custom--space--22);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--custom--font-size--14);
	font-weight: var(--wp--custom--font-weight--heavy);
	letter-spacing: var(--wp--custom--tracking--button);
	text-transform: uppercase;
	text-decoration: none;
	border: var(--wp--custom--border--rule) solid var(--wp--preset--color--plum-deep);
	border-radius: var(--wp--custom--radius--none);
	cursor: pointer;
	transition: transform var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard), box-shadow var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard);
}

.btn-coral {
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--plum-deep);
	box-shadow: var(--wp--preset--shadow--button);
}

.btn-plum {
	background: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--plum);
	box-shadow: var(--wp--preset--shadow--button-alt);
}

.btn-line {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--plum-deep);
}

.btn:hover {
	transform: translate(-2px, -2px);
}

.btn-coral:hover {
	box-shadow: var(--wp--preset--shadow--button-hover);
}

.btn-plum:hover {
	box-shadow: var(--wp--preset--shadow--button-alt-hover);
}

@media (prefers-reduced-motion: reduce) {
	.btn {
		transition: none;
	}

	.btn:hover {
		transform: none;
	}
}

.textlink {
	font-weight: var(--wp--custom--font-weight--bold);
	font-size: var(--wp--custom--font-size--15);
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

.textlink:hover {
	color: var(--wp--preset--color--magenta);
}

/* 4. Hero ------------------------------------------------------------------ */

.hero {
	position: relative;
	padding-block: var(--wp--custom--space--64) var(--wp--custom--space--96);
	text-align: center;
	overflow: hidden;
}

.deco {
	position: absolute;
	font-size: var(--wp--custom--font-size--34);
	line-height: var(--wp--custom--line-height--single);
}

.deco.a {
	left: 7%;
	top: 56px;
	color: var(--wp--preset--color--coral);
}

.deco.b {
	right: 8%;
	top: 96px;
	color: var(--wp--preset--color--marigold);
}

.deco.c {
	left: 12%;
	top: 420px;
	color: var(--wp--preset--color--turquoise);
	font-size: var(--wp--custom--font-size--26);
}

.tag {
	display: inline-block;
	background: var(--wp--preset--color--marigold);
	color: var(--wp--preset--color--plum-deep);
	font-size: var(--wp--custom--font-size--12);
	font-weight: var(--wp--custom--font-weight--heavy);
	letter-spacing: var(--wp--custom--tracking--tag);
	padding: var(--wp--custom--space--7) var(--wp--custom--space--14);
	transform: rotate(-2deg);
	margin-bottom: var(--wp--custom--space--26);
}

.hero h1 {
	margin: 0;
	font-weight: var(--wp--custom--font-weight--black);
	font-size: var(--wp--custom--font-size--display);
	line-height: var(--wp--custom--line-height--display);
	letter-spacing: var(--wp--custom--tracking--display);
	text-transform: uppercase;
	color: var(--wp--preset--color--plum);
}

.hero h1 .mail {
	display: block;
	font-family: var(--wp--preset--font-family--script);
	font-weight: var(--wp--custom--font-weight--regular);
	text-transform: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--magenta);
	font-size: 1.05em;
	line-height: var(--wp--custom--line-height--script-display);
}

.hero .lede {
	max-width: var(--wp--custom--container--lede);
	margin: var(--wp--custom--space--18) auto var(--wp--custom--space--30);
	font-size: var(--wp--custom--font-size--18);
}

.hero .ctas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--space--24);
	align-items: center;
	justify-content: center;
}

.frame {
	position: relative;
	max-width: var(--wp--custom--container--frame);
	margin: var(--wp--custom--space--64) auto 0;
	transform: rotate(-1.5deg);
}

/* The painted cards are one image made in Canva (pink ground + three cards). */
.frame-inner {
	background: var(--wp--preset--color--tint-coral);
	border: var(--wp--custom--border--frame) solid var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--frame);
}

.frame-art {
	width: 100%;
	aspect-ratio: 44 / 21;
	object-fit: cover;
}

.stamp {
	position: absolute;
	left: -26px;
	top: 18px;
	width: 78px;
	height: 78px;
	background: var(--wp--preset--color--marigold);
	border: var(--wp--custom--border--rule) dashed var(--wp--preset--color--plum-deep);
	color: var(--wp--preset--color--plum-deep);
	display: grid;
	place-content: center;
	text-align: center;
	font-size: var(--wp--custom--font-size--11);
	font-weight: var(--wp--custom--font-weight--black);
	letter-spacing: var(--wp--custom--tracking--nav);
	line-height: var(--wp--custom--line-height--compact);
	transform: rotate(-10deg);
}

.stamp-heart {
	font-size: var(--wp--custom--font-size--21);
	line-height: var(--wp--custom--line-height--single);
}

.sticker {
	position: absolute;
	font-family: var(--wp--preset--font-family--script);
	font-size: var(--wp--custom--font-size--19);
	padding: var(--wp--custom--space--6) var(--wp--custom--space--16);
	color: var(--wp--preset--color--plum-deep);
	white-space: nowrap;
}

.frame .sticker {
	right: -18px;
	bottom: -22px;
	background: var(--wp--preset--color--turquoise);
	transform: rotate(-4deg);
}

/* 5. How it works ---------------------------------------------------------- */

.how {
	background: var(--wp--preset--color--tint-turq);
}

.steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--custom--space--32);
	margin-top: var(--wp--custom--space--36);
}

.step {
	border-top: var(--wp--custom--border--rule) solid var(--wp--preset--color--plum);
	padding-top: var(--wp--custom--space--20);
}

.step-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--wp--custom--space--18);
}

.step-head svg {
	width: 30px;
	height: 30px;
	stroke: var(--wp--preset--color--plum);
	fill: none;
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.step-num {
	font-size: var(--wp--custom--font-size--30);
	font-weight: var(--wp--custom--font-weight--heavy);
	color: var(--wp--preset--color--leaf-deep);
	font-variant-numeric: tabular-nums;
}

.step h3 {
	margin: 0 0 var(--wp--custom--space--8);
	font-size: var(--wp--custom--font-size--21);
	font-weight: var(--wp--custom--font-weight--heavy);
}

.step p {
	margin: 0;
	font-size: var(--wp--custom--font-size--15);
	max-width: var(--wp--custom--measure--step);
}

/* 6. What's in the envelope ------------------------------------------------ */

.inside .grid2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--custom--space--64);
	align-items: center;
}

.photo {
	position: relative;
}

.photo .pic {
	border: var(--wp--custom--border--frame) solid var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--photo-coral);
	transform: rotate(-2deg);
}

.photo .pic img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.inside .sticker {
	left: -14px;
	bottom: 34px;
	background: var(--wp--preset--color--marigold);
	transform: rotate(-6deg);
}

.intro {
	font-size: var(--wp--custom--font-size--17);
	max-width: var(--wp--custom--measure--intro);
	margin: 0 0 var(--wp--custom--space--18);
}

ul.items {
	list-style: none;
	margin: 0 0 var(--wp--custom--space--18);
	padding: 0;
}

ul.items li {
	border-bottom: var(--wp--custom--border--line) solid var(--wp--preset--color--plum);
	padding: var(--wp--custom--space--12) 0 var(--wp--custom--space--12) var(--wp--custom--space--26);
	position: relative;
	font-size: var(--wp--custom--font-size--15);
}

ul.items li::before {
	content: "✿";
	position: absolute;
	left: 0;
	top: 11px;
	color: var(--wp--preset--color--magenta);
}

ul.items b {
	font-weight: var(--wp--custom--font-weight--heavy);
}

.caption {
	font-size: var(--wp--custom--font-size--13);
	font-style: italic;
	margin: 0 0 var(--wp--custom--space--22);
}

/* 7. Pricing --------------------------------------------------------------- */

.pricing {
	background: var(--wp--preset--color--tint-coral);
	text-align: center;
}

.plans {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--custom--space--28);
	max-width: var(--wp--custom--container--plans);
	margin: var(--wp--custom--space--36) auto 0;
	text-align: left;
}

.plan {
	border: var(--wp--custom--border--rule) solid var(--wp--preset--color--plum-deep);
	padding: var(--wp--custom--space--26) var(--wp--custom--space--24);
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--10);
}

.plan:nth-child(1) {
	background: var(--wp--preset--color--white);
	transform: rotate(-1deg);
}

.plan:nth-child(2) {
	background: var(--wp--preset--color--marigold);
	transform: rotate(1deg);
}

.plan:nth-child(3) {
	background: var(--wp--preset--color--tint-leaf);
	transform: rotate(-.6deg);
}

.plan-label {
	font-size: var(--wp--custom--font-size--12);
	font-weight: var(--wp--custom--font-weight--heavy);
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}

.price {
	font-size: var(--wp--custom--font-size--44);
	font-weight: var(--wp--custom--font-weight--black);
	letter-spacing: var(--wp--custom--tracking--price);
	line-height: var(--wp--custom--line-height--single);
	font-variant-numeric: tabular-nums;
}

.price small {
	font-size: var(--wp--custom--font-size--15);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: 0;
}

.plan .script-title {
	font-family: var(--wp--preset--font-family--script);
	font-size: var(--wp--custom--font-size--34);
	line-height: var(--wp--custom--line-height--script-card);
}

.plan p {
	margin: 0;
	font-size: var(--wp--custom--font-size--15);
	flex: 1;
}

.plan .btn {
	margin-top: var(--wp--custom--space--8);
	width: 100%;
}

.plan .gift-btns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--wp--custom--space--10);
	margin-top: var(--wp--custom--space--8);
}

.plan .gift-btns .btn {
	margin-top: 0;
	padding-inline: var(--wp--custom--space--8);
	font-size: var(--wp--custom--font-size--13);
	letter-spacing: var(--wp--custom--tracking--snug);
	white-space: nowrap;
}

.fine {
	font-size: var(--wp--custom--font-size--13);
	margin: var(--wp--custom--space--30) 0 0;
}

/* 8. Meet Elizabeth -------------------------------------------------------- */

.about {
	background: var(--wp--preset--color--tint-turq);
}

.about .grid2 {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--wp--custom--space--64);
	align-items: center;
}

.about .pic {
	border: var(--wp--custom--border--frame) solid var(--wp--preset--color--white);
	box-shadow: var(--wp--preset--shadow--photo-plum);
	transform: rotate(2deg);
}

.about .pic img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 55% 40%;
}

.about .sticker {
	right: -12px;
	bottom: -14px;
	background: var(--wp--preset--color--coral);
	transform: rotate(-5deg);
}

.about p {
	font-size: var(--wp--custom--font-size--17);
	max-width: var(--wp--custom--measure--about);
	margin: 0 0 var(--wp--custom--space--16);
}

/* 9. FAQ ------------------------------------------------------------------- */

.faq .wrap {
	max-width: var(--wp--custom--container--faq);
}

.faq details {
	border-top: var(--wp--custom--border--rule) solid var(--wp--preset--color--plum);
}

.faq details:last-of-type {
	border-bottom: var(--wp--custom--border--rule) solid var(--wp--preset--color--plum);
}

.faq summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	gap: var(--wp--custom--space--16);
	align-items: center;
	padding: var(--wp--custom--space--18) 0;
	font-size: var(--wp--custom--font-size--19);
	font-weight: var(--wp--custom--font-weight--heavy);
}

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

.faq summary::after {
	content: "+";
	font-size: var(--wp--custom--font-size--26);
	font-weight: var(--wp--custom--font-weight--medium);
	line-height: var(--wp--custom--line-height--single);
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease-standard);
}

.faq details[open] summary::after {
	transform: rotate(45deg);
}

.faq details p {
	margin: 0 0 var(--wp--custom--space--20);
	max-width: var(--wp--custom--measure--answer);
	font-size: var(--wp--custom--font-size--16);
}

.still {
	margin-top: var(--wp--custom--space--24);
	font-size: var(--wp--custom--font-size--15);
}

/* 10. Contact -------------------------------------------------------------- */

.contact {
	background: var(--wp--preset--color--tint-cream);
}

.contact .grid2 {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: var(--wp--custom--space--56);
	align-items: start;
}

.contact p {
	font-size: var(--wp--custom--font-size--17);
	max-width: var(--wp--custom--measure--contact);
}

.email {
	font-weight: var(--wp--custom--font-weight--heavy);
	font-size: var(--wp--custom--font-size--18);
	user-select: all;
}

.contact form {
	display: grid;
	gap: var(--wp--custom--space--16);
}

.contact label {
	display: grid;
	gap: var(--wp--custom--space--6);
	font-size: var(--wp--custom--font-size--13);
	font-weight: var(--wp--custom--font-weight--heavy);
	letter-spacing: var(--wp--custom--tracking--nav);
	text-transform: uppercase;
}

/* Submit is excluded: Contact Form 7 renders it as an <input>, the mockup used a <button>. */
.contact input:not([type="submit"]),
.contact textarea {
	font: inherit;
	font-size: var(--wp--custom--font-size--16);
	text-transform: none;
	letter-spacing: 0;
	font-weight: var(--wp--custom--font-weight--regular);
	color: var(--wp--preset--color--plum-deep);
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--rule) solid var(--wp--preset--color--plum);
	padding: var(--wp--custom--space--12) var(--wp--custom--space--14);
	border-radius: var(--wp--custom--radius--none);
}

.contact textarea {
	min-height: 140px;
	resize: vertical;
}

.contact form .btn {
	justify-self: start;
}

/* 11. Footer --------------------------------------------------------------- */

.site-footer {
	background: var(--wp--preset--color--plum);
	color: var(--wp--preset--color--white);
	padding-block: var(--wp--custom--space--56) var(--wp--custom--space--32);
}

.foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--custom--space--32);
}

.foot .name {
	font-family: var(--wp--preset--font-family--script);
	font-size: var(--wp--custom--font-size--30);
	margin: 0 0 var(--wp--custom--space--8);
}

.foot p {
	margin: 0 0 var(--wp--custom--space--6);
	font-size: var(--wp--custom--font-size--15);
	max-width: var(--wp--custom--measure--footer);
}

.foot nav {
	display: grid;
	grid-template-columns: auto auto;
	gap: var(--wp--custom--space--10) var(--wp--custom--space--40);
	align-content: start;
}

.foot nav a {
	font-weight: var(--wp--custom--font-weight--bold);
	font-size: var(--wp--custom--font-size--14);
	text-decoration: none;
}

.foot nav a:hover {
	color: var(--wp--preset--color--marigold);
}

.legal {
	border-top: var(--wp--custom--border--hairline) solid rgba(255, 255, 255, .35);
	margin-top: var(--wp--custom--space--36);
	padding-top: var(--wp--custom--space--18);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--wp--custom--space--12);
	font-size: var(--wp--custom--font-size--13);
}

/* 12. Responsive (mockup breakpoints) -------------------------------------- */

@media (max-width: 880px) {
	nav.links {
		display: none;
	}

	.steps,
	.plans {
		grid-template-columns: 1fr;
	}

	.inside .grid2,
	.about .grid2,
	.contact .grid2 {
		grid-template-columns: 1fr;
		gap: var(--wp--custom--space--48);
	}

	.plan:nth-child(n) {
		transform: none;
	}

	section {
		padding-block: var(--wp--custom--space--64);
	}
}

@media (max-width: 520px) {
	:root {
		--hm-header-height: 70px; /* 10px + 48px logo + 10px + 2px border */
	}

	.brand img {
		height: 48px;
	}

	.bar .btn {
		min-height: 42px;
		padding: var(--wp--custom--space--8) var(--wp--custom--space--12);
		font-size: var(--wp--custom--font-size--12);
	}

	.stamp {
		left: -8px;
		top: -18px;
		width: 62px;
		height: 62px;
		font-size: var(--wp--custom--font-size--9);
	}

	.stamp-heart {
		font-size: var(--wp--custom--font-size--18);
	}

	.frame .sticker {
		right: -6px;
		font-size: var(--wp--custom--font-size--16);
	}

	.frame-inner {
		border-width: var(--wp--custom--border--frame-sm);
		box-shadow: var(--wp--preset--shadow--frame-sm);
	}

	.deco.c {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
 * Additions beyond the mockup
 * ------------------------------------------------------------------------- */

/* 13. In-page jumps land below the sticky header. */
main section[id] {
	scroll-margin-top: calc(var(--hm-header-height) + var(--hm-admin-bar));
}

/* 14. Eyebrows match everywhere. In the mockup, `.about p` and `.contact p`
 * also caught the eyebrow paragraph, so those two rendered at 17px instead of
 * 12px. Fixed at Ben's request. */
.about .eyebrow,
.contact .eyebrow {
	font-size: var(--wp--custom--font-size--12);
	max-width: none;
	margin: 0 0 var(--wp--custom--space--10);
}

/* 15. Legal links in the footer. */
.legal-links {
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--space--6) var(--wp--custom--space--18);
}

.legal a,
.linkish {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.linkish {
	font: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.legal a:hover,
.linkish:hover {
	color: var(--wp--preset--color--marigold);
}

/* 16. Contact Form 7. */
.contact .wpcf7 {
	margin: 0;
}

.contact .wpcf7-form-control-wrap {
	display: block;
}

/* Block, like the mockup's grid-item fields: an inline field inside Contact
 * Form 7's wrapper <span> would sit on a text baseline and add a gap below. */
.contact .wpcf7 input:not([type="submit"]),
.contact .wpcf7 textarea {
	display: block;
	width: 100%;
}

.contact .form-actions {
	display: flex;
	align-items: center;
	gap: var(--wp--custom--space--12);
}

.contact .wpcf7-spinner {
	margin: 0;
}

.contact .wpcf7-not-valid-tip {
	color: var(--wp--preset--color--magenta);
	font-size: var(--wp--custom--font-size--13);
	font-weight: var(--wp--custom--font-weight--bold);
	letter-spacing: 0;
	text-transform: none;
	margin-top: var(--wp--custom--space--6);
}

.contact .wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: var(--wp--custom--space--14) var(--wp--custom--space--16);
	border: var(--wp--custom--border--rule) solid var(--wp--preset--color--magenta);
	background: var(--wp--preset--color--white);
	font-size: var(--wp--custom--font-size--15);
}

.contact .wpcf7 form.sent .wpcf7-response-output {
	background: var(--wp--preset--color--tint-leaf);
	border-color: var(--wp--preset--color--leaf-deep);
}

.contact .form-note,
.contact .form-placeholder {
	font-size: var(--wp--custom--font-size--13);
	max-width: none;
	margin: var(--wp--custom--space--16) 0 0;
}

.contact .form-note a {
	color: inherit;
}

/* reCAPTCHA v3 badge hidden; the required notice sits under the form. */
.grecaptcha-badge {
	visibility: hidden;
}

/* 17. Scroll reveal. Only active when html.hm-reveal is set by the head
 * script (motion allowed, JavaScript running). Uses the individual
 * `translate` property so it stacks with each element's own rotation. */
html.hm-reveal [data-reveal] {
	opacity: 0;
	translate: 0 var(--hm-reveal-distance, var(--wp--custom--motion--reveal-distance));
	transition:
		opacity var(--hm-reveal-duration, var(--wp--custom--motion--reveal-duration)) var(--wp--custom--motion--reveal-ease) var(--hm-reveal-delay, 0ms),
		translate var(--hm-reveal-duration, var(--wp--custom--motion--reveal-duration)) var(--wp--custom--motion--reveal-ease) var(--hm-reveal-delay, 0ms);
}

html.hm-reveal [data-reveal].is-revealed {
	opacity: 1;
	translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
	html.hm-reveal [data-reveal] {
		opacity: 1;
		translate: none;
		transition: none;
	}
}

/* 18. Cookie banner. */
.consent {
	position: fixed;
	left: var(--wp--custom--space--16);
	bottom: calc(var(--wp--custom--space--16) + env(safe-area-inset-bottom, 0px));
	z-index: var(--wp--custom--z-index--consent);
	width: min(440px, calc(100vw - 2 * var(--wp--custom--space--16)));
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--plum-deep);
	border: var(--wp--custom--border--rule) solid var(--wp--preset--color--plum-deep);
	box-shadow: var(--wp--preset--shadow--button-hover);
	padding: var(--wp--custom--space--18) var(--wp--custom--space--20);
	display: grid;
	gap: var(--wp--custom--space--14);
}

.consent[hidden] {
	display: none;
}

.consent-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--script);
	font-size: var(--wp--custom--font-size--21);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--wp--custom--line-height--script-card);
	color: var(--wp--preset--color--plum);
}

.consent-text {
	margin: 0;
	font-size: var(--wp--custom--font-size--15);
}

.consent-text a {
	font-weight: var(--wp--custom--font-weight--bold);
	text-underline-offset: 3px;
}

.consent-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--custom--space--12);
}

.consent .btn {
	min-height: 42px;
	padding: var(--wp--custom--space--8) var(--wp--custom--space--18);
	font-size: var(--wp--custom--font-size--13);
}

/* 19. Text pages (Privacy policy and others) and 404. */
.page-main {
	padding-block: var(--wp--custom--space--64) var(--wp--custom--space--88);
}

.page-main .wrap {
	max-width: calc(var(--wp--custom--container--faq) + 2 * var(--wp--custom--gutter));
}

.page-main h1 {
	font-family: var(--wp--preset--font-family--script);
	font-weight: var(--wp--custom--font-weight--regular);
	font-size: var(--wp--custom--font-size--section-title);
	line-height: var(--wp--custom--line-height--title);
	margin: 0 0 var(--wp--custom--space--24);
	text-wrap: balance;
}

.prose {
	font-size: var(--wp--custom--font-size--17);
}

.prose > * {
	max-width: var(--wp--custom--measure--answer);
}

.prose h2 {
	font-size: var(--wp--custom--font-size--21);
	font-weight: var(--wp--custom--font-weight--heavy);
	margin: var(--wp--custom--space--36) 0 var(--wp--custom--space--10);
}

.prose h3 {
	font-size: var(--wp--custom--font-size--18);
	font-weight: var(--wp--custom--font-weight--heavy);
	margin: var(--wp--custom--space--24) 0 var(--wp--custom--space--8);
}

.prose p,
.prose ul,
.prose ol {
	margin: 0 0 var(--wp--custom--space--16);
}

.prose ul,
.prose ol {
	padding-left: var(--wp--custom--space--24);
}

.prose li {
	margin-bottom: var(--wp--custom--space--6);
}

.prose a {
	font-weight: var(--wp--custom--font-weight--bold);
	text-underline-offset: 3px;
}

.prose a:hover {
	color: var(--wp--preset--color--magenta);
}

/* 20. Thank You page (where Stripe sends buyers after paying): one section,
 * message beside the newsletter sign-up so the form is on the first screen. */
.thanks {
	padding-block: var(--wp--custom--space--56) var(--wp--custom--space--88);
}

.thanks-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--custom--space--56);
	align-items: start;
}

.thanks h1 {
	font-family: var(--wp--preset--font-family--script);
	font-weight: var(--wp--custom--font-weight--regular);
	font-size: var(--wp--custom--font-size--section-title);
	line-height: var(--wp--custom--line-height--title);
	color: var(--wp--preset--color--plum);
	margin: 0 0 var(--wp--custom--space--20);
	text-wrap: balance;
}

.thanks-message {
	font-size: var(--wp--custom--font-size--17);
	max-width: var(--wp--custom--measure--intro);
}

.thanks-message p {
	margin: 0 0 var(--wp--custom--space--18);
}

.thanks .frame {
	margin: 0;
}

.thanks-signup {
	background: var(--wp--preset--color--tint-coral);
	border: var(--wp--custom--border--rule) solid var(--wp--preset--color--plum);
	box-shadow: var(--wp--preset--shadow--card);
	padding: var(--wp--custom--space--28);
}

.thanks-signup h2.script {
	font-size: var(--wp--custom--font-size--34);
	margin-bottom: var(--wp--custom--space--8);
}

.thanks-signup-text {
	font-size: var(--wp--custom--font-size--15);
	margin-bottom: var(--wp--custom--space--16);
}

.thanks-signup-text p {
	margin: 0 0 var(--wp--custom--space--10);
}

@media (max-width: 880px) {
	.thanks-grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--wp--custom--space--40);
	}
}

@media (max-width: 520px) {
	.thanks-signup {
		padding: var(--wp--custom--space--20);
	}
}

/* The Reach plugin's built-in sign-up form, styled like the contact form.
 * The plugin outputs email first; the name field is moved above it. */
.signup-form--builtin .hostinger-reach-block-form-fields {
	display: flex;
	flex-direction: column;
	gap: var(--wp--custom--space--16);
}

.signup-form--builtin .hostinger-reach-block-form-field {
	display: grid;
	gap: var(--wp--custom--space--6);
}

.signup-form--builtin .hostinger-reach-block-form-field:nth-child(2) {
	order: -1;
}

.signup-form--builtin label {
	font-size: var(--wp--custom--font-size--13);
	font-weight: var(--wp--custom--font-weight--heavy);
	letter-spacing: var(--wp--custom--tracking--nav);
	text-transform: uppercase;
	color: var(--wp--preset--color--plum-deep);
}

.signup-form--builtin label .required {
	color: var(--wp--preset--color--magenta);
}

.signup-form--builtin input[type="email"],
.signup-form--builtin input[type="text"] {
	width: 100%;
	font: inherit;
	font-size: var(--wp--custom--font-size--16);
	color: var(--wp--preset--color--plum-deep);
	background: var(--wp--preset--color--white);
	border: var(--wp--custom--border--rule) solid var(--wp--preset--color--plum);
	padding: var(--wp--custom--space--12) var(--wp--custom--space--14);
	border-radius: var(--wp--custom--radius--none);
}

.signup-form--builtin .hostinger-reach-block-submit {
	justify-self: start;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-top: var(--wp--custom--space--6);
	padding: var(--wp--custom--space--12) var(--wp--custom--space--22);
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--custom--font-size--14);
	font-weight: var(--wp--custom--font-weight--heavy);
	letter-spacing: var(--wp--custom--tracking--button);
	text-transform: uppercase;
	background: var(--wp--preset--color--coral);
	color: var(--wp--preset--color--plum-deep);
	border: var(--wp--custom--border--rule) solid var(--wp--preset--color--plum-deep);
	border-radius: var(--wp--custom--radius--none);
	box-shadow: var(--wp--preset--shadow--button);
	cursor: pointer;
	transition: transform var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard), box-shadow var(--wp--custom--motion--fast) var(--wp--custom--motion--ease-standard);
}

.signup-form--builtin .hostinger-reach-block-submit:hover {
	transform: translate(-2px, -2px);
	box-shadow: var(--wp--preset--shadow--button-hover);
}

.signup-form--builtin .hostinger-reach-block-submit:disabled {
	opacity: .6;
	cursor: wait;
}

.signup-form--builtin .reach-subscription-message {
	align-items: center;
	gap: var(--wp--custom--space--10);
	font-size: var(--wp--custom--font-size--16);
	font-weight: var(--wp--custom--font-weight--bold);
	color: var(--wp--preset--color--plum-deep);
}

@media (prefers-reduced-motion: reduce) {
	.signup-form--builtin .hostinger-reach-block-submit {
		transition: none;
	}

	.signup-form--builtin .hostinger-reach-block-submit:hover {
		transform: none;
	}
}