:root {
	--bf-cream: #F5EFE0;
	--bf-cream-light: #FFF9EC;
	--bf-cream-card: rgba(255, 249, 236, 0.86);
	--bf-gold: #C9A961;
	--bf-gold-deep: #B47A16;
	--bf-green: #6B8E5A;
	--bf-green-dark: #263C27;
	--bf-brown: #3D2C1E;
	--bf-brown-soft: #6B5B47;
	--bf-line: rgba(61, 44, 30, 0.18);
	--bf-shadow: 0 20px 52px rgba(61, 44, 30, 0.10);
	--bf-serif: Georgia, "Times New Roman", Times, serif;
	--bf-sans: "Trebuchet MS", "Nunito Sans", "DM Sans", Arial, sans-serif;
	--bf-radius: 24px;

	/* -------------------------------------------------------------------
	   Bondifly button design system — single source of truth.
	   Used by .bf-btn utilities and mapped onto the theme / Gutenberg / PMPro
	   button selectors so every action across the site shares one look.
	   Primary = warm gold (dark text); Secondary = cream + warm border;
	   Ghost = gold/forest text link; Danger = muted warm outline.
	   ------------------------------------------------------------------- */
	--bf-btn-radius: 12px;
	--bf-btn-min-h: 48px;
	--bf-btn-font-weight: 600;
	--bf-btn-gold: linear-gradient(180deg, #D4B36C 0%, #BC9748 100%);
	--bf-btn-gold-hover: linear-gradient(180deg, #DCBE78 0%, #C7A152 100%);
	--bf-btn-gold-border: #A7822D;
	--bf-btn-gold-text: #2A1C0B;
	--bf-btn-gold-shadow: 0 10px 22px -10px rgba(167, 130, 45, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
	--bf-btn-gold-shadow-hover: 0 14px 28px -12px rgba(167, 130, 45, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4);
	--bf-btn-secondary-bg: #FBF7EB;
	--bf-btn-secondary-bg-hover: #FFFFFF;
	--bf-btn-secondary-border: #D9C9A4;
	--bf-btn-secondary-text: #3D2C1E;
	--bf-btn-ghost-text: #A7822D;
	--bf-btn-danger-text: #9A5B28;
	--bf-btn-danger-border: rgba(150, 90, 40, 0.3);
	--bf-btn-focus-ring: 2px solid #8A6D24;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background:
		radial-gradient(circle at 8% 10%, rgba(107, 142, 90, 0.16), transparent 22rem),
		radial-gradient(circle at 92% 18%, rgba(201, 169, 97, 0.16), transparent 20rem),
		linear-gradient(180deg, var(--bf-cream), #F1E6CE);
	color: var(--bf-brown);
	font-family: var(--bf-sans);
	font-size: 17px;
	line-height: 1.65;
	margin: 0;
	min-width: 320px;
}

body::before {
	border: 1px solid rgba(61, 44, 30, 0.12);
	border-radius: 34px;
	content: "";
	inset: 16px;
	pointer-events: none;
	position: fixed;
	z-index: 20;
}

a {
	color: inherit;
	text-decoration-color: rgba(180, 122, 22, 0.38);
	text-underline-offset: 0.2em;
}

a:hover,
a:focus {
	color: var(--bf-gold-deep);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--bf-brown);
	font-family: var(--bf-serif);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.08;
	margin: 0 0 0.65em;
}

h1 {
	font-size: clamp(3rem, 7vw, 6.6rem);
}

h2 {
	font-size: clamp(2.2rem, 4vw, 4rem);
}

h3 {
	font-size: clamp(1.35rem, 2vw, 2rem);
}

p {
	margin: 0 0 1.2em;
}

ul,
ol {
	margin: 0 0 1.4em;
	padding-left: 1.3em;
}

.screen-reader-text,
.skip-link {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

.skip-link:focus {
	background: var(--bf-cream-light);
	clip: auto;
	height: auto;
	left: 1rem;
	padding: 0.7rem 1rem;
	top: 1rem;
	width: auto;
	z-index: 100;
}

.site-shell {
	margin: 0 auto;
	max-width: 1240px;
	padding: 0 28px;
	width: 100%;
}

.narrow-shell {
	max-width: 920px;
}

.content-shell {
	max-width: 920px;
}

.site-header {
	background: rgba(245, 239, 224, 0.86);
	backdrop-filter: blur(14px);
	position: sticky;
	top: 0;
	z-index: 30;
}

.site-header__inner {
	align-items: center;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: auto 1fr auto;
	min-height: 96px;
}

.site-brand {
	display: grid;
	line-height: 1;
	text-decoration: none;
}

.site-brand__name,
.site-footer__logo {
	color: var(--bf-brown);
	font-family: var(--bf-serif);
	font-size: clamp(2rem, 3vw, 3.2rem);
	font-weight: 600;
}

.site-brand__heart {
	color: var(--bf-gold);
	font-size: 1.7rem;
	position: absolute;
	transform: translate(7.8rem, 0.35rem);
}

.site-brand__tagline {
	color: var(--bf-brown-soft);
	font-size: 0.95rem;
	margin-top: 0.35rem;
}

.custom-logo {
	display: block;
	max-height: 70px;
	width: auto;
}

.site-navigation {
	justify-self: center;
}

.bondifly-menu,
.bondifly-footer-menu,
.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bondifly-menu {
	align-items: center;
	display: flex;
	gap: clamp(1rem, 3vw, 3rem);
}

.bondifly-menu a,
.site-header__account {
	color: var(--bf-brown);
	font-weight: 700;
	text-decoration: none;
}

.bondifly-menu a:hover,
.bondifly-menu a:focus,
.site-header__account:hover,
.site-header__account:focus {
	color: var(--bf-gold-deep);
}

.site-header__account {
	background: rgba(255, 249, 236, 0.65);
	border: 1px solid var(--bf-line);
	border-radius: 999px;
	padding: 0.65rem 1rem;
}

.menu-toggle {
	background: transparent;
	border: 0;
	display: none;
	height: 42px;
	justify-self: end;
	padding: 8px;
	width: 46px;
}

.menu-toggle__line {
	background: var(--bf-brown);
	border-radius: 999px;
	display: block;
	height: 2px;
	margin: 6px 0;
	width: 100%;
}

.site-main {
	overflow: hidden;
}

.hero-section {
	background-image: var(--hero-bg-image);
	background-position: center;
	background-size: cover;
	padding: clamp(3rem, 7vw, 7rem) 0 3rem;
	position: relative;
}

.hero-section::after {
	background: linear-gradient(180deg, transparent, var(--bf-cream));
	bottom: 0;
	content: "";
	height: 140px;
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
}

.hero-grid {
	align-items: center;
	display: grid;
	gap: clamp(2rem, 5vw, 5rem);
	grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr);
	position: relative;
	z-index: 1;
}

.hero-copy {
	max-width: 620px;
}

.section-kicker {
	color: var(--bf-gold-deep);
	font-weight: 800;
	letter-spacing: 0.04em;
	margin-bottom: 0.9rem;
	text-transform: uppercase;
}

.hero-lead,
.page-hero p,
.section-heading p,
.two-column p,
.final-cta p {
	color: var(--bf-brown-soft);
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

.button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin: 2rem 0 1.2rem;
}

.button-row--center,
.center-action {
	justify-content: center;
	text-align: center;
}

.button,
.bondifly-button,
.pmpro_btn,
.pmpro_btn-submit,
input[type="submit"],
button[type="submit"] {
	align-items: center;
	background: var(--bf-btn-gold);
	border: 1px solid var(--bf-btn-gold-border);
	border-radius: var(--bf-btn-radius);
	box-shadow: var(--bf-btn-gold-shadow);
	color: var(--bf-btn-gold-text);
	cursor: pointer;
	display: inline-flex;
	font-weight: var(--bf-btn-font-weight);
	gap: 0.55rem;
	justify-content: center;
	line-height: 1.2;
	min-height: var(--bf-btn-min-h);
	padding: 0.85rem 1.5rem;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.button:hover,
.button:focus,
.bondifly-button:hover,
.bondifly-button:focus,
.pmpro_btn:hover,
.pmpro_btn:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
button[type="submit"]:hover,
button[type="submit"]:focus {
	background: var(--bf-btn-gold-hover);
	box-shadow: var(--bf-btn-gold-shadow-hover);
	color: var(--bf-btn-gold-text);
	text-decoration: none;
}

.button--secondary {
	background: var(--bf-btn-secondary-bg);
	border-color: var(--bf-btn-secondary-border);
	box-shadow: none;
	color: var(--bf-btn-secondary-text);
}

.button--secondary:hover,
.button--secondary:focus {
	background: var(--bf-btn-secondary-bg-hover);
	color: var(--bf-btn-secondary-text);
}

.trust-line {
	color: var(--bf-brown-soft);
	font-weight: 700;
}

.hero-art {
	position: relative;
}

.hero-art img,
.image-placeholder {
	border: 1px solid var(--bf-line);
	border-radius: 34px;
	box-shadow: var(--bf-shadow);
	display: block;
	overflow: hidden;
}

.hero-art img {
	aspect-ratio: 1.18;
	object-fit: cover;
	width: 100%;
}

.image-placeholder {
	align-items: center;
	background:
		radial-gradient(circle at 38% 32%, rgba(201, 169, 97, 0.44), transparent 18rem),
		radial-gradient(circle at 70% 64%, rgba(107, 142, 90, 0.22), transparent 16rem),
		linear-gradient(145deg, #EAD9B8, #FFF5DD);
	color: rgba(61, 44, 30, 0.58);
	display: grid;
	font-family: var(--bf-serif);
	font-size: 1.4rem;
	min-height: 220px;
	place-items: center;
	text-align: center;
}

.image-placeholder--hero {
	aspect-ratio: 1.18;
	min-height: 420px;
}

.image-placeholder--character {
	aspect-ratio: 1;
	border-radius: 18px;
	min-height: 180px;
}

.image-placeholder--tall {
	aspect-ratio: 4 / 5;
	min-height: 420px;
}

.section {
	padding: clamp(3rem, 7vw, 6rem) 0;
}

.section-heading {
	margin: 0 auto 2.3rem;
	max-width: 760px;
}

.section-heading--center {
	text-align: center;
}

.section-heading--center::after {
	background: linear-gradient(90deg, transparent, rgba(180, 122, 22, 0.55), transparent);
	content: "";
	display: block;
	height: 1px;
	margin: 1rem auto 0;
	width: min(360px, 80%);
}

.promise-grid,
.character-grid,
.steps-grid {
	display: grid;
	gap: 1rem;
}

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

.character-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.soft-card,
.content-card,
.abo-card {
	background: var(--bf-cream-card);
	border: 1px solid var(--bf-line);
	border-radius: var(--bf-radius);
	box-shadow: var(--bf-shadow);
}

.soft-card {
	padding: 1.4rem;
}

.promise-card {
	text-align: center;
}

.promise-card p,
.character-card p,
.step-card p {
	color: var(--bf-brown-soft);
}

.card-icon {
	color: var(--bf-gold-deep);
	display: block;
	font-size: 2.4rem;
	line-height: 1;
	margin-bottom: 0.9rem;
}

.section--audio {
	background: rgba(255, 249, 236, 0.44);
}

.section--audio .bondifly-audio-library {
	margin: 0 auto;
	max-width: 760px;
}

.center-action {
	display: flex;
	margin-top: 1.6rem;
}

.character-card {
	display: grid;
	gap: 1.1rem;
}

.two-column {
	align-items: center;
	display: grid;
	gap: clamp(2rem, 5vw, 5rem);
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.82fr);
}

.badge-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: 1.5rem;
}

.badge-row span {
	background: rgba(107, 142, 90, 0.14);
	border: 1px solid rgba(107, 142, 90, 0.30);
	border-radius: 999px;
	color: var(--bf-green-dark);
	font-weight: 800;
	padding: 0.5rem 0.8rem;
}

.step-card {
	align-items: center;
	display: flex;
	gap: 1rem;
}

.step-card span {
	align-items: center;
	background: var(--bf-gold);
	border-radius: 999px;
	box-shadow: 0 8px 18px rgba(180, 122, 22, 0.22);
	display: inline-flex;
	font-family: var(--bf-serif);
	font-size: 1.45rem;
	height: 52px;
	justify-content: center;
	width: 52px;
}

.step-card h3 {
	font-size: 1.35rem;
	margin: 0;
}

.abo-card {
	padding: clamp(1.5rem, 4vw, 3rem);
	text-align: center;
}

.price {
	color: var(--bf-green-dark);
	font-family: var(--bf-serif);
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 700;
	margin: 0.3rem 0 1.2rem;
}

.benefit-list {
	display: grid;
	gap: 0.65rem;
	list-style: none;
	margin: 1.8rem auto 0;
	max-width: 560px;
	padding: 0;
	text-align: left;
}

.benefit-list li {
	color: var(--bf-brown-soft);
	padding-left: 1.8rem;
	position: relative;
}

.benefit-list li::before {
	color: var(--bf-green);
	content: "✓";
	font-weight: 900;
	left: 0;
	position: absolute;
}

.faq-list {
	display: grid;
	gap: 0.8rem;
}

.faq-list details {
	background: rgba(255, 249, 236, 0.74);
	border: 1px solid var(--bf-line);
	border-radius: 16px;
	padding: 1rem 1.2rem;
}

.faq-list summary {
	cursor: pointer;
	font-weight: 800;
}

.faq-list p {
	color: var(--bf-brown-soft);
	margin: 0.85rem 0 0;
}

.final-cta {
	text-align: center;
}

.page-hero {
	padding: clamp(4rem, 8vw, 7rem) 0 2rem;
	text-align: center;
}

.page-hero h1 {
	font-size: clamp(3rem, 6vw, 5.2rem);
}

.page-content-section {
	padding: 2rem 0 clamp(4rem, 8vw, 7rem);
}

.content-card {
	padding: clamp(1.4rem, 4vw, 3rem);
}

.content-card > *:last-child {
	margin-bottom: 0;
}

.content-card h2,
.content-card h3 {
	margin-top: 1.4em;
}

.content-card h2:first-child,
.content-card h3:first-child {
	margin-top: 0;
}

.content-card p,
.content-card li {
	color: var(--bf-brown-soft);
}

.content-card a {
	font-weight: 800;
}

.account-shell,
.login-shell {
	max-width: 760px;
}

.content-card--account {
	display: grid;
	gap: 1.4rem;
}

.pmpro-account-wrap:empty {
	display: none;
}

.text-link {
	border-bottom: 1px solid rgba(180, 122, 22, 0.5);
	color: var(--bf-green-dark);
	font-family: var(--bf-serif);
	font-size: 1.35rem;
	font-weight: 700;
	text-decoration: none;
}

.site-footer {
	background:
		radial-gradient(circle at 10% 0%, rgba(201, 169, 97, 0.12), transparent 20rem),
		linear-gradient(180deg, var(--bf-green-dark), #172615);
	color: #F8EFD7;
	margin-top: 2rem;
	padding: clamp(3rem, 7vw, 5rem) 0 1.6rem;
	position: relative;
}

.site-footer::before {
	background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.45), transparent);
	content: "";
	height: 1px;
	left: 8%;
	position: absolute;
	right: 8%;
	top: 0;
}

.site-footer__inner {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1.35fr 1fr 1fr 1fr;
}

.site-footer__logo {
	color: #F8EFD7;
	display: inline-block;
	margin-bottom: 0.8rem;
	text-decoration: none;
}

.site-footer p,
.site-footer a,
.site-footer li {
	color: rgba(248, 239, 215, 0.84);
}

.site-footer h2 {
	color: #F8EFD7;
	font-size: 1.45rem;
	margin-bottom: 0.8rem;
}

.site-footer ul {
	display: grid;
	gap: 0.55rem;
}

.site-footer a {
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--bf-gold);
}

.site-footer__bottom {
	align-items: center;
	border-top: 1px solid rgba(248, 239, 215, 0.15);
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	justify-content: space-between;
	margin-top: 2.5rem;
	padding-top: 1.4rem;
}

.site-footer__bottom p {
	margin: 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select {
	background: rgba(255, 249, 236, 0.82);
	border: 1px solid var(--bf-line);
	border-radius: 12px;
	color: var(--bf-brown);
	font: inherit;
	padding: 0.75rem 0.9rem;
	width: 100%;
}

label {
	color: var(--bf-brown);
	font-weight: 800;
}

.pmpro {
	color: var(--bf-brown);
}

.pmpro_card,
.pmpro_checkout,
.pmpro_login_wrap,
.pmpro_lost_password_wrap,
.pmpro_reset_password_wrap {
	background: transparent;
	border: 0;
	box-shadow: none;
}

.pmpro_form_field,
.pmpro_checkout-field {
	margin-bottom: 1rem;
}

.bondifly-audio-library {
	color: var(--bf-brown);
}

.bondifly-audio-library .bondifly-episode-card,
.bondifly-account-box {
	background: var(--bf-cream-card);
	border-color: var(--bf-line);
	border-radius: var(--bf-radius);
	box-shadow: var(--bf-shadow);
}

.bondifly-audio-library .bondifly-episode-card__title {
	font-family: var(--bf-serif);
}

.bondifly-audio-library .bondifly-badge {
	background: var(--bf-green);
}

@media (max-width: 960px) {
	body::before {
		display: none;
	}

	.site-header__inner {
		grid-template-columns: 1fr auto;
		min-height: 78px;
	}

	.menu-toggle {
		display: block;
	}

	.site-header__account {
		display: none;
	}

	.site-navigation {
		background: rgba(255, 249, 236, 0.96);
		border: 1px solid var(--bf-line);
		border-radius: 18px;
		box-shadow: var(--bf-shadow);
		display: none;
		grid-column: 1 / -1;
		justify-self: stretch;
		padding: 1rem;
	}

	body.is-menu-open .site-navigation {
		display: block;
	}

	.bondifly-menu {
		align-items: stretch;
		display: grid;
		gap: 0.2rem;
	}

	.bondifly-menu a {
		display: block;
		padding: 0.75rem 0.3rem;
	}

	.hero-grid,
	.two-column {
		grid-template-columns: 1fr;
	}

	.hero-copy {
		max-width: none;
	}

	.hero-art {
		order: -1;
	}

	.image-placeholder--hero {
		min-height: 300px;
	}

	.promise-grid,
	.character-grid,
	.steps-grid,
	.site-footer__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	body {
		font-size: 16px;
	}

	.site-shell {
		padding: 0 18px;
	}

	.site-brand__name {
		font-size: 2rem;
	}

	.site-brand__heart {
		transform: translate(7.1rem, 0.2rem);
	}

	.hero-section {
		padding-top: 2rem;
	}

	.button-row,
	.button {
		width: 100%;
	}

	.button {
		text-align: center;
	}

	.soft-card,
	.content-card,
	.abo-card {
		border-radius: 18px;
	}

	.step-card {
		align-items: flex-start;
	}

	.site-footer__bottom {
		align-items: flex-start;
		flex-direction: column;
	}
}

/* Premium storybook polish layer. */
:root {
	--bf-shadow-soft: 0 10px 26px rgba(61, 44, 30, 0.08);
	--bf-shadow-card: 0 18px 46px rgba(61, 44, 30, 0.13);
	--bf-shadow-glow: 0 20px 70px rgba(201, 169, 97, 0.22);
	--bf-serif: "Cormorant Garamond", "Lora", Georgia, serif;
	--bf-sans: "Nunito Sans", "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--hero-bg-image: linear-gradient(180deg, rgba(245, 239, 224, 0), rgba(245, 239, 224, 0));
}

body {
	background:
		radial-gradient(circle at 7% 6%, rgba(38, 60, 39, 0.20), transparent 17rem),
		radial-gradient(circle at 94% 12%, rgba(38, 60, 39, 0.16), transparent 19rem),
		radial-gradient(circle at 50% -8%, rgba(201, 169, 97, 0.20), transparent 26rem),
		linear-gradient(135deg, rgba(61, 44, 30, 0.035), transparent 26%),
		linear-gradient(180deg, #F8F0DD 0%, var(--bf-cream) 42%, #EFE1C6 100%);
	background-size: auto;
	color: var(--bf-brown);
	font-family: var(--bf-sans);
}

body::before {
	background:
		radial-gradient(circle at 0 0, rgba(38, 60, 39, 0.45), transparent 13rem),
		radial-gradient(circle at 100% 0, rgba(38, 60, 39, 0.32), transparent 13rem),
		radial-gradient(circle at 0 100%, rgba(38, 60, 39, 0.35), transparent 12rem),
		radial-gradient(circle at 100% 100%, rgba(38, 60, 39, 0.30), transparent 12rem);
	border-color: rgba(61, 44, 30, 0.13);
	box-shadow: inset 0 0 70px rgba(38, 60, 39, 0.10);
}

body::after {
	background:
		linear-gradient(90deg, rgba(38, 60, 39, 0.34), transparent 16%, transparent 84%, rgba(38, 60, 39, 0.28)),
		linear-gradient(180deg, rgba(38, 60, 39, 0.20), transparent 12rem, transparent calc(100% - 12rem), rgba(38, 60, 39, 0.24));
	content: "";
	inset: 0;
	pointer-events: none;
	position: fixed;
	z-index: 0;
}

.site-header,
.site-main,
.site-footer {
	position: relative;
	z-index: 1;
}

.site-shell {
	max-width: 1320px;
}

.site-header {
	background:
		linear-gradient(180deg, rgba(248, 240, 221, 0.94), rgba(245, 239, 224, 0.82));
	border-bottom: 1px solid rgba(61, 44, 30, 0.10);
	box-shadow: 0 8px 22px rgba(61, 44, 30, 0.05);
}

.site-header__inner {
	gap: clamp(1rem, 2.5vw, 2.5rem);
	grid-template-columns: minmax(210px, auto) 1fr auto;
	min-height: 90px;
}

.site-brand__name,
.site-footer__logo {
	color: var(--bf-brown);
	font-size: clamp(2.3rem, 3.2vw, 3.7rem);
	letter-spacing: 0;
}

.site-brand__tagline {
	color: var(--bf-brown);
	font-size: 1rem;
	opacity: 0.82;
}

.site-navigation {
	justify-self: end;
}

.bondifly-menu {
	gap: clamp(1rem, 2.2vw, 2.3rem);
}

.bondifly-menu a {
	border-bottom: 2px solid transparent;
	padding: 0.45rem 0;
}

.bondifly-menu a:hover,
.bondifly-menu a:focus {
	border-color: rgba(201, 169, 97, 0.74);
}

.site-header__account {
	background: linear-gradient(180deg, #E6C372, var(--bf-gold-deep));
	border-color: rgba(107, 74, 20, 0.45);
	border-radius: 11px;
	box-shadow: 0 10px 24px rgba(180, 122, 22, 0.20);
	color: #fffaf0;
	font-weight: 900;
	padding: 0.78rem 1.08rem;
}

.site-header__account:hover,
.site-header__account:focus {
	color: #fffaf0;
}

.hero-section {
	background:
		var(--hero-bg-image),
		radial-gradient(circle at 70% 22%, rgba(201, 169, 97, 0.22), transparent 25rem),
		radial-gradient(circle at 9% 0%, rgba(107, 142, 90, 0.18), transparent 20rem);
	background-position: center;
	background-size: cover;
	padding: clamp(3rem, 5.8vw, 6rem) 0 clamp(2.8rem, 5vw, 4.8rem);
}

.hero-section::before {
	background:
		radial-gradient(ellipse at 12% 0%, rgba(38, 60, 39, 0.16), transparent 28rem),
		radial-gradient(ellipse at 100% 10%, rgba(38, 60, 39, 0.18), transparent 28rem);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.hero-section::after {
	background:
		linear-gradient(90deg, transparent, rgba(180, 122, 22, 0.34), transparent),
		linear-gradient(180deg, transparent, var(--bf-cream));
	height: 170px;
}

.hero-grid {
	gap: clamp(2.5rem, 5vw, 6rem);
	grid-template-columns: minmax(480px, 0.96fr) minmax(460px, 1.04fr);
}

.hero-copy {
	max-width: 760px;
}

.hero-copy h1 {
	font-size: clamp(3.6rem, 5.15vw, 6.55rem);
	line-height: 0.98;
	margin-bottom: 1.25rem;
	max-width: 780px;
	text-wrap: balance;
}

.hero-lead {
	font-size: clamp(1.12rem, 1.35vw, 1.32rem);
	line-height: 1.72;
	max-width: 690px;
}

.section-kicker {
	align-items: center;
	display: inline-flex;
	gap: 0.45rem;
	letter-spacing: 0.03em;
}

.section-kicker::before {
	color: var(--bf-green);
	content: "❧";
	font-size: 1.1em;
	line-height: 1;
}

.button {
	border-radius: 12px;
	box-shadow: 0 12px 26px rgba(180, 122, 22, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22);
	min-height: 52px;
	padding: 0.92rem 1.45rem;
}

.button--secondary {
	backdrop-filter: blur(8px);
	border-color: rgba(61, 44, 30, 0.25);
	box-shadow: inset 0 0 0 1px rgba(255, 249, 236, 0.55);
}

.trust-line {
	background: rgba(255, 249, 236, 0.58);
	border: 1px solid rgba(61, 44, 30, 0.10);
	border-radius: 999px;
	display: inline-flex;
	margin-top: 0.3rem;
	padding: 0.5rem 0.8rem;
}

.hero-art {
	filter: drop-shadow(0 28px 60px rgba(61, 44, 30, 0.16));
}

.hero-art::before {
	background: radial-gradient(circle, rgba(201, 169, 97, 0.28), transparent 62%);
	content: "";
	inset: -3rem;
	position: absolute;
	z-index: -1;
}

.hero-art img,
.image-placeholder--hero {
	border-radius: 42px;
}

.image-placeholder {
	background:
		linear-gradient(135deg, rgba(255, 249, 236, 0.58), rgba(255, 249, 236, 0) 34%),
		radial-gradient(circle at 32% 26%, rgba(201, 169, 97, 0.56), transparent 11rem),
		radial-gradient(circle at 70% 68%, rgba(107, 142, 90, 0.30), transparent 13rem),
		linear-gradient(145deg, #DFC894, #FFF3D7 58%, #E8D2A7);
	border: 1px solid rgba(61, 44, 30, 0.18);
	box-shadow: var(--bf-shadow-card), inset 0 0 0 12px rgba(255, 249, 236, 0.34);
	position: relative;
}

.image-placeholder::before {
	border: 1px solid rgba(255, 249, 236, 0.66);
	border-radius: inherit;
	content: "";
	inset: 12px;
	position: absolute;
}

.image-placeholder::after {
	background:
		linear-gradient(90deg, transparent, rgba(61, 44, 30, 0.07), transparent),
		repeating-linear-gradient(120deg, rgba(61, 44, 30, 0.035) 0 1px, transparent 1px 7px);
	content: "";
	inset: 0;
	mix-blend-mode: multiply;
	opacity: 0.55;
	position: absolute;
}

.image-placeholder span {
	background: rgba(255, 249, 236, 0.66);
	border: 1px solid rgba(61, 44, 30, 0.14);
	border-radius: 999px;
	color: rgba(61, 44, 30, 0.68);
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	font-weight: 700;
	padding: 0.55rem 0.95rem;
	position: relative;
	z-index: 1;
}

.image-placeholder--hero {
	aspect-ratio: 1.28 / 1;
	min-height: 440px;
}

.section {
	padding: clamp(3.4rem, 5.4vw, 5.8rem) 0;
	position: relative;
}

.section + .section::before {
	background: linear-gradient(90deg, transparent, rgba(180, 122, 22, 0.28), transparent);
	content: "";
	height: 1px;
	left: 50%;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	width: min(760px, 72vw);
}

.section + .section::after {
	color: rgba(107, 142, 90, 0.72);
	content: "❧";
	font-size: 1.35rem;
	left: 50%;
	line-height: 1;
	position: absolute;
	top: -0.67rem;
	transform: translateX(-50%);
}

.section-heading {
	margin-bottom: clamp(2rem, 3.2vw, 3rem);
}

.section-heading h2 {
	font-size: clamp(2.35rem, 4.4vw, 4.6rem);
	text-wrap: balance;
}

.promise-grid,
.character-grid,
.steps-grid {
	gap: 1.25rem;
}

.soft-card,
.content-card,
.abo-card,
.faq-list details {
	background:
		linear-gradient(145deg, rgba(255, 249, 236, 0.92), rgba(246, 233, 205, 0.78));
	border-color: rgba(61, 44, 30, 0.15);
	box-shadow: var(--bf-shadow-soft);
}

.soft-card {
	padding: clamp(1.35rem, 2vw, 1.9rem);
}

.promise-card {
	display: flex;
	flex-direction: column;
	min-height: 260px;
}

.promise-card .card-icon {
	align-items: center;
	background: rgba(201, 169, 97, 0.17);
	border: 1px solid rgba(201, 169, 97, 0.34);
	border-radius: 999px;
	display: inline-flex;
	height: 70px;
	justify-content: center;
	margin: 0 auto 1.1rem;
	width: 70px;
}

.promise-card h3 {
	font-size: clamp(1.45rem, 2vw, 1.95rem);
	margin-bottom: 0.75rem;
}

.promise-card p {
	line-height: 1.65;
	margin-bottom: 0;
}

.section--audio {
	background:
		radial-gradient(circle at 50% 0%, rgba(201, 169, 97, 0.18), transparent 22rem),
		linear-gradient(180deg, rgba(255, 249, 236, 0.30), rgba(255, 249, 236, 0.62));
}

.section--audio .narrow-shell {
	max-width: 1040px;
}

.section--audio .bondifly-audio-library {
	max-width: 980px;
}

.section--audio .bondifly-episode-card {
	align-items: center;
	background:
		linear-gradient(135deg, rgba(255, 249, 236, 0.96), rgba(246, 233, 205, 0.88));
	border: 1px solid rgba(201, 169, 97, 0.36);
	border-radius: 28px;
	box-shadow: var(--bf-shadow-glow), var(--bf-shadow-soft);
	grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
	padding: clamp(1rem, 2.2vw, 1.6rem);
}

.section--audio .bondifly-episode-card__cover {
	border-radius: 20px;
	box-shadow: inset 0 0 0 8px rgba(255, 249, 236, 0.42);
}

.section--audio .bondifly-episode-card__body {
	gap: 0.7rem;
}

.section--audio .bondifly-episode-card__title {
	font-size: clamp(1.65rem, 3vw, 2.4rem);
}

.section--audio .bondifly-episode-card audio {
	border-radius: 999px;
	min-height: 42px;
}

.character-card {
	overflow: hidden;
	padding: 1rem;
	transition: transform 160ms ease, box-shadow 160ms ease;
}

.character-card:hover {
	box-shadow: var(--bf-shadow-card);
	transform: translateY(-3px);
}

.character-card h3 {
	font-size: clamp(1.65rem, 2.4vw, 2.3rem);
	margin-top: 0.25rem;
}

.image-placeholder--character {
	aspect-ratio: 4 / 3.25;
	border-radius: 20px;
	min-height: 230px;
}

.section--parents {
	background:
		radial-gradient(circle at 88% 45%, rgba(107, 142, 90, 0.16), transparent 20rem),
		linear-gradient(180deg, transparent, rgba(255, 249, 236, 0.36), transparent);
}

.two-column {
	grid-template-columns: minmax(0, 1fr) minmax(360px, 0.78fr);
}

.section--parents h2 {
	font-size: clamp(2.5rem, 4.5vw, 4.7rem);
	text-wrap: balance;
}

.section--parents .image-placeholder--tall {
	min-height: 500px;
}

.badge-row span {
	background: rgba(255, 249, 236, 0.72);
	border-color: rgba(107, 142, 90, 0.35);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
	color: var(--bf-green-dark);
	padding: 0.62rem 0.9rem;
}

.step-card {
	align-items: flex-start;
	flex-direction: column;
	min-height: 230px;
	padding: 1.5rem;
}

.step-card span {
	background: linear-gradient(180deg, #E2C06B, var(--bf-gold-deep));
	color: #fffaf0;
	flex: 0 0 auto;
	height: 58px;
	width: 58px;
}

.step-card h3 {
	font-size: clamp(1.45rem, 2.3vw, 1.95rem);
	margin: 0 0 0.45rem;
}

.step-card p {
	line-height: 1.58;
	margin: 0;
}

#abo {
	background: radial-gradient(circle at 50% 50%, rgba(201, 169, 97, 0.18), transparent 24rem);
}

#abo .narrow-shell {
	max-width: 980px;
}

.abo-card {
	background:
		linear-gradient(145deg, rgba(255, 249, 236, 0.97), rgba(247, 230, 194, 0.88));
	border: 1px solid rgba(201, 169, 97, 0.52);
	box-shadow: var(--bf-shadow-glow), 0 20px 58px rgba(61, 44, 30, 0.12);
	padding: clamp(1.8rem, 4.4vw, 4rem);
	position: relative;
}

.abo-card::before {
	border: 1px solid rgba(255, 249, 236, 0.74);
	border-radius: calc(var(--bf-radius) - 8px);
	content: "";
	inset: 12px;
	pointer-events: none;
	position: absolute;
}

.abo-card h2,
.abo-card .price,
.abo-card .button,
.abo-card .benefit-list,
.abo-card .section-kicker {
	position: relative;
	z-index: 1;
}

.abo-card h2 {
	margin-left: auto;
	margin-right: auto;
	max-width: 740px;
}

.price {
	color: var(--bf-brown);
	font-size: clamp(2.3rem, 4.2vw, 3.7rem);
}

.benefit-list {
	background: rgba(255, 249, 236, 0.58);
	border: 1px solid rgba(61, 44, 30, 0.10);
	border-radius: 18px;
	gap: 0.7rem;
	max-width: 690px;
	padding: 1.2rem clamp(1.1rem, 2.2vw, 1.6rem);
}

.benefit-list li::before {
	background: rgba(107, 142, 90, 0.16);
	border-radius: 999px;
	display: inline-flex;
	height: 1.25rem;
	justify-content: center;
	width: 1.25rem;
}

.faq-list {
	gap: 0.95rem;
}

.faq-list details {
	border-radius: 18px;
	padding: 0;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.faq-list details:hover,
.faq-list details:focus-within,
.faq-list details[open] {
	border-color: rgba(201, 169, 97, 0.42);
	box-shadow: var(--bf-shadow-soft);
}

.faq-list summary {
	list-style: none;
	padding: 1.1rem 3.2rem 1.1rem 1.25rem;
	position: relative;
}

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

.faq-list summary::after {
	background: rgba(201, 169, 97, 0.16);
	border-radius: 999px;
	color: var(--bf-gold-deep);
	content: "+";
	font-size: 1.35rem;
	height: 1.7rem;
	line-height: 1.55rem;
	position: absolute;
	right: 1rem;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	width: 1.7rem;
}

.faq-list details[open] summary::after {
	content: "−";
}

.faq-list p {
	border-top: 1px solid rgba(61, 44, 30, 0.09);
	margin: 0;
	padding: 1rem 1.25rem 1.2rem;
}

.final-cta .narrow-shell {
	background:
		radial-gradient(circle at 18% 28%, rgba(201, 169, 97, 0.22), transparent 13rem),
		linear-gradient(145deg, rgba(255, 249, 236, 0.95), rgba(239, 218, 178, 0.70));
	border: 1px solid rgba(201, 169, 97, 0.34);
	border-radius: 30px;
	box-shadow: var(--bf-shadow-card);
	max-width: 980px;
	padding: clamp(2rem, 4.8vw, 4rem);
	position: relative;
}

.final-cta .narrow-shell::before {
	color: rgba(107, 142, 90, 0.58);
	content: "❧";
	font-size: 2rem;
	left: 50%;
	position: absolute;
	top: 1rem;
	transform: translateX(-50%);
}

.final-cta h2 {
	margin-left: auto;
	margin-right: auto;
	max-width: 760px;
	padding-top: 1rem;
}

.site-footer {
	background:
		radial-gradient(circle at 8% 0%, rgba(201, 169, 97, 0.13), transparent 17rem),
		radial-gradient(circle at 96% 12%, rgba(201, 169, 97, 0.09), transparent 16rem),
		linear-gradient(180deg, #31462D 0%, var(--bf-green-dark) 48%, #152314 100%);
	margin-top: 0;
	padding-top: clamp(3.6rem, 7vw, 6rem);
}

.site-footer::after {
	background:
		linear-gradient(90deg, rgba(20, 32, 19, 0.65), transparent 18%, transparent 82%, rgba(20, 32, 19, 0.65)),
		radial-gradient(ellipse at 50% 100%, rgba(13, 24, 13, 0.70), transparent 34rem);
	bottom: 0;
	content: "";
	left: 0;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
}

.site-footer__inner,
.site-footer__bottom {
	position: relative;
	z-index: 1;
}

.site-footer__logo {
	color: #FFF4D6;
}

.site-footer h2 {
	color: #FFF4D6;
}

.site-footer p,
.site-footer a,
.site-footer li {
	color: rgba(255, 244, 214, 0.82);
}

.site-footer__bottom {
	border-top-color: rgba(255, 244, 214, 0.18);
}

@media (max-width: 1120px) {
	.hero-grid {
		grid-template-columns: minmax(0, 1fr) minmax(390px, 0.92fr);
	}

	.hero-copy h1 {
		font-size: clamp(3.25rem, 5.6vw, 5.5rem);
	}
}

@media (max-width: 960px) {
	body::after {
		display: none;
	}

	.site-header__inner {
		grid-template-columns: 1fr auto;
	}

	.site-navigation {
		justify-self: stretch;
	}

	.hero-section {
		padding-top: 1.6rem;
	}

	.hero-grid {
		grid-template-columns: 1fr;
	}

	.hero-art {
		order: 0;
	}

	.hero-copy {
		text-align: left;
	}

	.hero-copy h1 {
		font-size: clamp(3rem, 10vw, 4.4rem);
		max-width: 760px;
	}

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

	.promise-card,
	.step-card {
		min-height: 0;
	}

	.two-column {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	.site-shell {
		padding: 0 20px;
	}

	.site-header__inner {
		min-height: 76px;
	}

	.site-brand__name {
		font-size: 2.15rem;
	}

	.site-brand__tagline {
		font-size: 0.86rem;
	}

	.hero-copy h1 {
		font-size: clamp(2.65rem, 13vw, 3.8rem);
		line-height: 1.02;
	}

	.hero-lead,
	.page-hero p,
	.section-heading p,
	.two-column p,
	.final-cta p {
		font-size: 1.02rem;
	}

	.image-placeholder--hero {
		aspect-ratio: 4 / 3;
		min-height: 260px;
	}

	.section {
		padding: 3rem 0;
	}

	.section--audio .bondifly-episode-card {
		grid-template-columns: 1fr;
	}

	.image-placeholder--character {
		min-height: 210px;
	}

	.section--parents .image-placeholder--tall {
		aspect-ratio: 4 / 3;
		min-height: 260px;
	}

	.final-cta .narrow-shell {
		border-radius: 22px;
	}

	.site-footer__inner {
		gap: 1.8rem;
	}
}

/* Editable Gutenberg landing page system. */
body {
	background:
		radial-gradient(circle at 8% 5%, rgba(25, 53, 31, 0.22), transparent 18rem),
		radial-gradient(circle at 92% 8%, rgba(25, 53, 31, 0.18), transparent 19rem),
		radial-gradient(circle at 50% -8%, rgba(201, 169, 97, 0.22), transparent 30rem),
		radial-gradient(circle at 20% 45%, rgba(201, 169, 97, 0.08), transparent 26rem),
		linear-gradient(135deg, rgba(61, 44, 30, 0.035), transparent 24%),
		linear-gradient(180deg, #F8F0DD 0%, #F5EFE0 42%, #EFE1C8 100%);
}

body::before {
	background:
		radial-gradient(circle at 0 0, rgba(25, 53, 31, 0.52), transparent 14rem),
		radial-gradient(circle at 100% 0, rgba(25, 53, 31, 0.40), transparent 14rem),
		radial-gradient(circle at 0 100%, rgba(25, 53, 31, 0.42), transparent 13rem),
		radial-gradient(circle at 100% 100%, rgba(25, 53, 31, 0.36), transparent 13rem);
}

.front-page-content > .wp-block-group:first-child {
	margin-top: 0;
}

.bf-section {
	margin: 0;
	padding: clamp(3.4rem, 5.3vw, 5.8rem) max(24px, calc((100vw - 1320px) / 2));
	position: relative;
}

.bf-section + .bf-section::before {
	background: linear-gradient(90deg, transparent, rgba(180, 122, 22, 0.28), transparent);
	content: "";
	height: 1px;
	left: 50%;
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	width: min(760px, 72vw);
}

.bf-section + .bf-section::after {
	color: rgba(107, 142, 90, 0.72);
	content: "❧";
	font-size: 1.35rem;
	left: 50%;
	position: absolute;
	top: -0.75rem;
	transform: translateX(-50%);
}

.bf-section > * {
	margin-left: auto;
	margin-right: auto;
	max-width: 1320px;
}

.bf-hero {
	background:
		radial-gradient(circle at 72% 24%, rgba(201, 169, 97, 0.24), transparent 25rem),
		radial-gradient(circle at 8% 0%, rgba(107, 142, 90, 0.18), transparent 20rem);
	overflow: hidden;
	padding-top: clamp(3rem, 6vw, 6.6rem);
}

.bf-hero::before {
	background:
		radial-gradient(ellipse at 0 0, rgba(25, 53, 31, 0.18), transparent 30rem),
		radial-gradient(ellipse at 100% 8%, rgba(25, 53, 31, 0.20), transparent 31rem);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.bf-hero__grid {
	align-items: center;
	display: grid;
	gap: clamp(2.5rem, 5vw, 6rem);
	grid-template-columns: minmax(460px, 0.95fr) minmax(440px, 1.05fr);
	position: relative;
	z-index: 1;
}

.bf-hero__copy {
	max-width: 760px;
}

.bf-hero__copy h1 {
	font-size: clamp(3.4rem, 5vw, 6.3rem);
	line-height: 1;
	margin-bottom: 1.25rem;
	max-width: 780px;
	text-wrap: balance;
}

.bf-hero__copy .hero-lead {
	max-width: 700px;
}

.bf-hero__art {
	filter: drop-shadow(0 28px 60px rgba(61, 44, 30, 0.17));
	position: relative;
}

.bf-hero__art::before {
	background: radial-gradient(circle, rgba(201, 169, 97, 0.30), transparent 64%);
	content: "";
	inset: -3rem;
	position: absolute;
	z-index: -1;
}

.wp-block-button.button--primary .wp-block-button__link,
.wp-block-button .wp-block-button__link,
.button,
.bondifly-button {
	align-items: center;
	background: linear-gradient(180deg, #E6C372, var(--bf-gold-deep));
	border: 1px solid rgba(107, 74, 20, 0.45);
	border-radius: 12px;
	box-shadow: 0 12px 26px rgba(180, 122, 22, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22);
	color: #fffaf0;
	display: inline-flex;
	font-weight: 900;
	gap: 0.55rem;
	justify-content: center;
	line-height: 1.2;
	min-height: 52px;
	padding: 0.92rem 1.45rem;
	text-decoration: none;
}

.wp-block-button.button--secondary .wp-block-button__link {
	background: rgba(255, 249, 236, 0.58) !important;
	border-color: rgba(61, 44, 30, 0.25);
	box-shadow: inset 0 0 0 1px rgba(255, 249, 236, 0.55);
	color: var(--bf-brown);
}

.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
	filter: brightness(0.96);
	text-decoration: none;
}

.image-placeholder p {
	background: rgba(255, 249, 236, 0.68);
	border: 1px solid rgba(61, 44, 30, 0.14);
	border-radius: 999px;
	color: rgba(61, 44, 30, 0.68);
	font-family: var(--bf-serif);
	font-size: clamp(1.05rem, 1.5vw, 1.35rem);
	font-weight: 700;
	margin: 0;
	padding: 0.55rem 0.95rem;
	position: relative;
	z-index: 1;
}

.bf-promises .promise-grid,
.bf-characters .character-grid,
.steps-grid {
	align-items: stretch;
	display: grid;
}

.bf-promises .promise-grid,
.steps-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.bf-characters .character-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.promise-grid.wp-block-columns,
.character-grid.wp-block-columns,
.steps-grid.wp-block-columns {
	gap: 1.25rem;
}

.soft-card.wp-block-column {
	flex-basis: auto !important;
}

.card-icon {
	margin-left: auto;
	margin-right: auto;
}

.badge-row {
	display: flex;
}

.badge-row p {
	background: rgba(255, 249, 236, 0.72);
	border: 1px solid rgba(107, 142, 90, 0.35);
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
	color: var(--bf-green-dark);
	font-weight: 800;
	margin: 0;
	padding: 0.62rem 0.9rem;
}

.step-card > p:first-child {
	align-items: center;
	background: linear-gradient(180deg, #E2C06B, var(--bf-gold-deep));
	border-radius: 999px;
	box-shadow: 0 8px 18px rgba(180, 122, 22, 0.22);
	color: #fffaf0;
	display: inline-flex;
	font-family: var(--bf-serif);
	font-size: 1.45rem;
	height: 58px;
	justify-content: center;
	margin: 0 0 1rem;
	width: 58px;
}

.step-card > h3 {
	margin-bottom: 0.45rem;
}

.step-card > p:last-child {
	color: var(--bf-brown-soft);
	line-height: 1.58;
	margin-bottom: 0;
}

.section--audio > * {
	max-width: 1040px;
}

.section--audio .wp-block-shortcode {
	margin: 0 auto;
	max-width: 980px;
}

#abo > * {
	max-width: 980px;
}

.faq-list.wp-block-group {
	display: grid;
	gap: 0.95rem;
	max-width: 920px;
}

.faq-list .wp-block-details {
	background: linear-gradient(145deg, rgba(255, 249, 236, 0.92), rgba(246, 233, 205, 0.78));
	border: 1px solid rgba(61, 44, 30, 0.15);
	border-radius: 18px;
	box-shadow: var(--bf-shadow-soft);
	margin: 0;
	overflow: hidden;
	transition: border-color 160ms ease, box-shadow 160ms ease;
}

.faq-list .wp-block-details:hover,
.faq-list .wp-block-details:focus-within,
.faq-list .wp-block-details[open] {
	border-color: rgba(201, 169, 97, 0.42);
}

.faq-list .wp-block-details summary {
	cursor: pointer;
	font-weight: 900;
	list-style: none;
	padding: 1.1rem 3.2rem 1.1rem 1.25rem;
	position: relative;
}

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

.faq-list .wp-block-details summary::after {
	background: rgba(201, 169, 97, 0.16);
	border-radius: 999px;
	color: var(--bf-gold-deep);
	content: "+";
	font-size: 1.35rem;
	height: 1.7rem;
	line-height: 1.55rem;
	position: absolute;
	right: 1rem;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	width: 1.7rem;
}

.faq-list .wp-block-details[open] summary::after {
	content: "−";
}

.faq-list .wp-block-details p {
	border-top: 1px solid rgba(61, 44, 30, 0.09);
	color: var(--bf-brown-soft);
	margin: 0;
	padding: 1rem 1.25rem 1.2rem;
}

@media (max-width: 960px) {
	.bf-section {
		padding-left: 22px;
		padding-right: 22px;
	}

	.bf-hero__grid,
	.bf-promises .promise-grid,
	.bf-characters .character-grid,
	.steps-grid {
		grid-template-columns: 1fr;
	}

	.bf-hero__copy h1 {
		font-size: clamp(3rem, 10vw, 4.4rem);
	}
}

@media (max-width: 640px) {
	.bf-section {
		padding-bottom: 3rem;
		padding-top: 3rem;
	}

	.bf-hero__copy h1 {
		font-size: clamp(2.55rem, 12vw, 3.65rem);
	}

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

/* Reference-aligned parchment homepage layer. */
:root {
	--bf-cream: #F5EFE0;
	--bf-cream-light: #FFF8E8;
	--bf-cream-card: rgba(250, 241, 219, 0.86);
	--bf-gold: #C9A961;
	--bf-gold-deep: #A86F17;
	--bf-green: #6B8E5A;
	--bf-green-dark: #263C27;
	--bf-green-ink: #172817;
	--bf-brown: #3D2C1E;
	--bf-brown-soft: #6B5B47;
	--bf-line: rgba(61, 44, 30, 0.18);
	--bf-serif: "Cormorant Garamond", "Lora", Georgia, serif;
	--bf-sans: "Nunito Sans", "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--bf-shadow-soft: 0 14px 34px rgba(61, 44, 30, 0.09);
	--bf-shadow-warm: 0 20px 52px rgba(61, 44, 30, 0.13);
	--bf-max: 1160px;
}

html {
	background: var(--bf-green-ink);
}

body {
	background:
		radial-gradient(circle at 50% 12%, rgba(255, 250, 232, 0.72), transparent 22rem),
		radial-gradient(circle at 14% 20%, rgba(201, 169, 97, 0.16), transparent 19rem),
		radial-gradient(circle at 84% 34%, rgba(107, 142, 90, 0.13), transparent 22rem),
		repeating-linear-gradient(24deg, rgba(61, 44, 30, 0.026) 0 1px, transparent 1px 9px),
		linear-gradient(180deg, #F9F1DF 0%, var(--bf-cream) 45%, #EEDFC1 100%);
	color: var(--bf-brown);
	font-family: var(--bf-sans);
	font-size: 15px;
	line-height: 1.62;
}

/* Global parchment / old-paper texture.
   A single fixed layer sits behind ALL content on every page (homepage +
   subpages) so the whole site shares one warm storybook paper atmosphere.
   It is translucent, so the existing warm background gradients still show
   through and the page is not flattened. The header is transparent, so the
   texture continues behind it too. Content, cards and text paint above this
   layer (they use z-index: 1) and stay clean and readable — the texture does
   not bleed into the cards. If the image is missing the layer is simply
   invisible, so nothing breaks. */
.bf-paper {
	/* Repeating tile (not "cover") so the paper grain stays crisp and visible
	   at any screen size. z-index: 0 keeps it above the base body background
	   but below all content (header/main/footer are position: relative;
	   z-index: 1), so the texture shows through the open areas and behind the
	   transparent header, while cards/text paint cleanly on top. */
	background-image: url("../images/bondifly/parchment-texture.png");
	background-position: top left;
	background-repeat: repeat;
	background-size: 520px 520px;
	inset: 0;
	mix-blend-mode: multiply;
	opacity: 0.55;
	pointer-events: none;
	position: fixed;
	z-index: 0;
}

body::before {
	background:
		radial-gradient(circle at 0 0, rgba(19, 34, 18, 0.72), transparent 15rem),
		radial-gradient(circle at 100% 0, rgba(19, 34, 18, 0.58), transparent 15rem),
		radial-gradient(circle at 0 100%, rgba(19, 34, 18, 0.62), transparent 17rem),
		radial-gradient(circle at 100% 100%, rgba(19, 34, 18, 0.56), transparent 17rem),
		linear-gradient(90deg, rgba(25, 48, 25, 0.30), transparent 13%, transparent 87%, rgba(25, 48, 25, 0.30));
	border: 1px solid rgba(61, 44, 30, 0.10);
	border-radius: 0;
	box-shadow: inset 0 0 90px rgba(23, 40, 23, 0.16);
	inset: 0;
	z-index: 0;
}

body::after {
	background:
		radial-gradient(ellipse at 7% 12%, rgba(30, 58, 30, 0.34), transparent 11rem),
		radial-gradient(ellipse at 94% 16%, rgba(30, 58, 30, 0.30), transparent 12rem),
		radial-gradient(ellipse at 7% 58%, rgba(54, 91, 47, 0.20), transparent 12rem),
		radial-gradient(ellipse at 94% 60%, rgba(54, 91, 47, 0.18), transparent 12rem),
		repeating-linear-gradient(100deg, transparent 0 38px, rgba(38, 60, 39, 0.13) 39px 41px, transparent 42px 88px);
	content: "";
	inset: 0;
	mix-blend-mode: multiply;
	opacity: 0.72;
	pointer-events: none;
	position: fixed;
	z-index: 0;
}

h1,
h2,
h3,
.site-brand__name,
.site-footer__logo {
	font-family: var(--bf-serif);
	font-weight: 500;
	letter-spacing: 0;
}

h1 {
	font-size: clamp(3.5rem, 5.2vw, 5.85rem);
}

h2 {
	font-size: clamp(2.15rem, 3.2vw, 3.25rem);
}

h3 {
	font-size: clamp(1.45rem, 1.8vw, 1.9rem);
}

.site-shell,
.bf-section > * {
	max-width: var(--bf-max);
}

.site-header {
	background: transparent;
	border: 0;
	box-shadow: none;
	position: relative;
}

.site-header__inner {
	grid-template-columns: minmax(190px, auto) 1fr auto;
	min-height: 112px;
}

.site-brand {
	position: relative;
}

.site-brand__name {
	font-size: clamp(2.25rem, 3.2vw, 3.25rem);
	line-height: 0.9;
}

.site-brand__heart {
	color: var(--bf-gold);
	font-size: 2rem;
	transform: translate(8.2rem, -0.1rem);
}

.site-brand__tagline {
	color: var(--bf-brown);
	font-family: var(--bf-serif);
	font-size: 1.08rem;
	opacity: 0.92;
}

.bondifly-menu {
	gap: clamp(1.4rem, 3vw, 3.3rem);
}

.bondifly-menu a,
.site-header__account {
	color: var(--bf-brown);
	font-size: 0.93rem;
	font-weight: 700;
}

.site-header__account,
.wp-block-button.button--primary .wp-block-button__link,
.wp-block-button .wp-block-button__link,
.button,
.bondifly-button {
	background: var(--bf-btn-gold);
	border: 1px solid var(--bf-btn-gold-border);
	border-radius: var(--bf-btn-radius);
	box-shadow: var(--bf-btn-gold-shadow);
	color: var(--bf-btn-gold-text);
	font-size: 0.94rem;
	font-weight: var(--bf-btn-font-weight);
	min-height: var(--bf-btn-min-h);
	padding: 0.78rem 1.5rem;
}

.site-header__account:hover,
.site-header__account:focus,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
	background: var(--bf-btn-gold-hover);
	box-shadow: var(--bf-btn-gold-shadow-hover);
	color: var(--bf-btn-gold-text);
}

.wp-block-button.button--secondary .wp-block-button__link {
	background: var(--bf-btn-secondary-bg) !important;
	border: 1px solid var(--bf-btn-secondary-border);
	box-shadow: none;
	color: var(--bf-btn-secondary-text);
	min-width: 260px;
}

.bf-section {
	padding: clamp(2.4rem, 4.4vw, 4.6rem) max(24px, calc((100vw - var(--bf-max)) / 2));
}

.bf-section + .bf-section::before {
	background: linear-gradient(90deg, transparent, rgba(61, 44, 30, 0.28), transparent);
	width: min(540px, 66vw);
}

.bf-section + .bf-section::after {
	color: rgba(168, 111, 23, 0.82);
	content: "→  ♡  ←";
	font-family: var(--bf-serif);
	font-size: 1.05rem;
	top: -0.8rem;
}

.bf-hero {
	background: transparent;
	padding-top: clamp(1.1rem, 2vw, 2rem);
}

.bf-hero::before {
	background:
		radial-gradient(ellipse at 75% 26%, rgba(37, 55, 28, 0.18), transparent 33rem),
		radial-gradient(ellipse at 5% 55%, rgba(201, 169, 97, 0.16), transparent 21rem);
}

.bf-hero__grid {
	gap: clamp(2rem, 4vw, 4.5rem);
	grid-template-columns: minmax(360px, 0.86fr) minmax(520px, 1.14fr);
}

.bf-hero__copy h1 {
	font-size: clamp(3.65rem, 5vw, 5.85rem);
	font-weight: 500;
	line-height: 0.98;
	margin-bottom: 1.1rem;
	max-width: 560px;
}

.bf-hero__copy .hero-lead {
	color: var(--bf-brown);
	font-family: var(--bf-serif);
	font-size: clamp(1.06rem, 1.2vw, 1.22rem);
	line-height: 1.55;
	max-width: 520px;
}

.section-kicker {
	color: #986715;
	font-family: var(--bf-serif);
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.section-kicker::before {
	content: "☘";
}

.button-row {
	gap: 0.8rem;
	margin-top: 1.55rem;
}

.trust-line {
	background: transparent;
	border: 0;
	color: rgba(61, 44, 30, 0.62);
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	padding: 0;
}

.bf-storybook-image {
	margin: 0;
	overflow: hidden;
	position: relative;
}

.bf-storybook-image img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.bf-storybook-image--hero {
	aspect-ratio: 1.48 / 1;
	border-radius: 30px;
	filter: drop-shadow(0 22px 40px rgba(45, 35, 20, 0.20));
	mask-image: radial-gradient(ellipse at center, #000 58%, rgba(0, 0, 0, 0.84) 73%, transparent 98%);
	-webkit-mask-image: radial-gradient(ellipse at center, #000 58%, rgba(0, 0, 0, 0.84) 73%, transparent 98%);
}

.bf-storybook-image--hero::after,
.image-placeholder--hero::after {
	background:
		radial-gradient(ellipse at 100% 20%, rgba(21, 36, 20, 0.24), transparent 18rem),
		linear-gradient(90deg, rgba(245, 239, 224, 0.20), transparent 18%, transparent 78%, rgba(38, 60, 39, 0.18));
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

.section-heading {
	margin-bottom: clamp(1.5rem, 2.6vw, 2.3rem);
}

.section-heading--center::after {
	background: linear-gradient(90deg, transparent, rgba(61, 44, 30, 0.34), transparent);
	margin-top: 0.72rem;
	width: min(470px, 80%);
}

.section-heading h2 {
	font-size: clamp(2rem, 2.8vw, 2.75rem);
	font-weight: 500;
}

.bf-promises {
	padding-top: clamp(2rem, 3vw, 3rem);
}

.bf-promises .promise-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.promise-grid.wp-block-columns {
	gap: 0;
}

.promise-card.soft-card {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-height: 0;
	padding: 0 1.5rem;
	position: relative;
}

.promise-card + .promise-card {
	border-left: 1px solid rgba(61, 44, 30, 0.13);
}

.promise-card .card-icon {
	background: transparent;
	border: 0;
	color: #827B37;
	font-family: var(--bf-serif);
	font-size: 3.2rem;
	height: auto;
	margin-bottom: 0.7rem;
	width: auto;
}

.promise-card h3 {
	font-family: var(--bf-serif);
	font-size: 1.18rem;
	font-weight: 600;
	margin-bottom: 0.45rem;
}

.promise-card p:not(.card-icon) {
	color: var(--bf-brown);
	font-size: 0.9rem;
	line-height: 1.55;
}

.character-grid.wp-block-columns,
.episode-grid.wp-block-columns {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.soft-card,
.content-card,
.abo-card,
.faq-list details {
	background:
		linear-gradient(145deg, rgba(255, 248, 230, 0.86), rgba(242, 225, 193, 0.72)),
		repeating-linear-gradient(30deg, rgba(61, 44, 30, 0.025) 0 1px, transparent 1px 8px);
	border: 1px solid rgba(97, 72, 35, 0.22);
	border-radius: 13px;
	box-shadow: 0 10px 24px rgba(61, 44, 30, 0.08);
}

.character-card {
	align-items: stretch;
	display: grid;
	gap: 1rem;
	grid-template-columns: minmax(132px, 0.9fr) minmax(0, 1fr);
	min-height: 230px;
	padding: 0.85rem;
	position: relative;
}

.character-card .character-badge {
	align-items: center;
	background: #788647;
	border-radius: 999px;
	color: #FFF3D4;
	display: inline-flex;
	font-size: 0.82rem;
	font-weight: 800;
	height: 46px;
	justify-content: center;
	left: 0.35rem;
	margin: 0;
	position: absolute;
	top: 0.35rem;
	width: 46px;
	z-index: 2;
}

.character-card .bf-storybook-image {
	border-radius: 10px;
	grid-row: 1 / span 4;
	min-height: 190px;
}

.bf-storybook-image--cora img {
	object-position: 68% 50%;
}

.bf-storybook-image--elian img {
	object-position: 88% 42%;
}

.bf-storybook-image--fuli img {
	object-position: 98% 58%;
}

.character-card h3 {
	align-self: end;
	font-size: 1.65rem;
	margin: 0.8rem 0 0.3rem;
}

.character-card p {
	color: var(--bf-brown);
	font-size: 0.92rem;
	line-height: 1.55;
	margin-bottom: 0;
}

.character-card .card-link {
	align-self: end;
	color: #8F641A;
	font-size: 0.9rem;
	font-weight: 800;
	margin-top: 0.65rem;
}

.section--audio {
	background: transparent;
	padding-bottom: clamp(2rem, 3.2vw, 3.2rem);
}

.section--audio .section-heading p {
	display: none;
}

.section--audio .wp-block-shortcode {
	max-width: 1000px;
}

.section--audio .bondifly-audio-library {
	gap: 0;
}

.section--audio .bondifly-episode-card {
	align-items: center;
	background:
		linear-gradient(145deg, rgba(255, 248, 230, 0.76), rgba(242, 225, 193, 0.62)),
		repeating-linear-gradient(30deg, rgba(61, 44, 30, 0.025) 0 1px, transparent 1px 8px);
	border: 1px solid rgba(97, 72, 35, 0.24);
	border-radius: 14px;
	box-shadow: 0 10px 22px rgba(61, 44, 30, 0.07);
	display: grid;
	gap: 1.35rem;
	grid-template-columns: 132px minmax(0, 1fr);
	padding: 0.9rem;
}

.section--audio .bondifly-episode-card__cover {
	border-radius: 10px;
}

.section--audio .bondifly-episode-card__body {
	display: grid;
	gap: 0.3rem 1rem;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 0.86fr);
}

.section--audio .bondifly-episode-card__meta,
.section--audio .bondifly-episode-card__title,
.section--audio .bondifly-episode-card__description {
	grid-column: 1;
}

.section--audio .bondifly-episode-card__player,
.section--audio .bondifly-episode-card__duration {
	grid-column: 2;
}

.section--audio .bondifly-episode-card__title {
	font-size: 1.65rem;
}

.section--audio .bondifly-episode-card__description,
.section--audio .bondifly-episode-card__duration {
	font-size: 0.9rem;
}

.section--audio .bondifly-episode-card__player {
	align-items: center;
	display: grid;
	gap: 0.7rem;
	grid-template-columns: 54px 1fr;
	margin: 0;
}

.section--audio .bondifly-episode-card__player::before {
	align-items: center;
	background: linear-gradient(180deg, #E7C472, #C99B39);
	border-radius: 50%;
	color: #2F2116;
	content: "▶";
	display: inline-flex;
	font-size: 1rem;
	height: 54px;
	justify-content: center;
	padding-left: 0.12rem;
	width: 54px;
}

.section--audio .bondifly-episode-card audio {
	filter: sepia(0.6) saturate(0.8);
	height: 38px;
}

.episode-card {
	align-items: center;
	display: grid;
	gap: 0.85rem;
	grid-template-columns: 92px minmax(0, 1fr);
	min-height: 148px;
	padding: 0.75rem;
	position: relative;
}

.episode-number {
	align-items: center;
	background: linear-gradient(180deg, #DAB95F, #B98923);
	border-radius: 50%;
	box-shadow: 0 8px 18px rgba(124, 82, 20, 0.16);
	color: #2F2116;
	display: inline-flex;
	font-family: var(--bf-serif);
	font-size: 1.25rem;
	height: 44px;
	justify-content: center;
	left: -0.55rem;
	margin: 0;
	position: absolute;
	top: -0.45rem;
	width: 44px;
	z-index: 2;
}

.episode-card .bf-storybook-image {
	aspect-ratio: 1;
	border-radius: 9px;
}

.bf-storybook-image--episode img {
	object-position: 36% 58%;
}

.bf-storybook-image--episode-2 img {
	object-position: 46% 50%;
}

.bf-storybook-image--episode-3 img {
	object-position: 84% 48%;
}

.episode-card__body {
	margin: 0;
}

.episode-label,
.episode-duration {
	color: var(--bf-brown);
	font-size: 0.82rem;
	font-weight: 700;
	margin: 0;
}

.episode-card h3 {
	font-family: var(--bf-sans);
	font-size: 0.98rem;
	font-weight: 800;
	line-height: 1.25;
	margin: 0 0 0.2rem;
}

.episode-card .wp-block-buttons {
	margin-top: 0.55rem;
}

.episode-card .wp-block-button.button--secondary .wp-block-button__link {
	border-radius: 999px;
	font-size: 0.78rem;
	min-height: 34px;
	min-width: 0;
	padding: 0.45rem 0.9rem;
}

.final-cta {
	background:
		radial-gradient(circle at 8% 18%, rgba(201, 169, 97, 0.16), transparent 18rem),
		radial-gradient(circle at 96% 12%, rgba(201, 169, 97, 0.12), transparent 16rem),
		linear-gradient(180deg, #31462D 0%, #20361F 100%);
	color: #F9EED0;
	margin-top: clamp(2rem, 4vw, 4rem);
	padding-bottom: clamp(2.2rem, 4vw, 3.4rem);
	padding-top: clamp(2.4rem, 4.5vw, 3.8rem);
}

.final-cta::before {
	background:
		linear-gradient(90deg, rgba(17, 31, 17, 0.68), transparent 18%, transparent 82%, rgba(17, 31, 17, 0.68)),
		radial-gradient(ellipse at 50% 100%, rgba(13, 24, 13, 0.55), transparent 36rem);
	bottom: 0;
	height: auto;
	inset: 0;
	left: 0;
	right: 0;
	top: 0;
	transform: none;
	width: auto;
}

.final-cta::after {
	display: none;
}

.final-cta .narrow-shell {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	max-width: var(--bf-max);
	padding: 0;
}

.final-cta .narrow-shell::before,
.final-cta .narrow-shell::after {
	display: none;
}

.final-cta__inner {
	align-items: center;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: minmax(0, 1fr) auto minmax(210px, 0.48fr);
	position: relative;
	z-index: 1;
}

.final-cta .final-cta__inner::before {
	background:
		linear-gradient(145deg, #E6CDA0, #B8854A);
	border: 1px solid rgba(255, 244, 214, 0.32);
	border-radius: 6px;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
	content: "";
	display: block;
	height: 84px;
	justify-self: center;
	transform: rotate(8deg);
	width: 128px;
}

.final-cta .final-cta__inner::after {
	color: rgba(255, 244, 214, 0.78);
	content: "♡";
	display: block;
	font-family: var(--bf-serif);
	font-size: 2rem;
	position: absolute;
	right: 1rem;
	top: 55%;
}

.final-cta h2 {
	color: #F9EED0;
	font-size: clamp(1.75rem, 2.6vw, 2.55rem);
	margin: 0 0 0.55rem;
	max-width: 680px;
	padding: 0;
}

.final-cta p {
	color: rgba(249, 238, 208, 0.88);
	font-size: 1.03rem;
	margin: 0;
}

.final-cta .button-row {
	margin: 0;
}

.final-cta__note {
	font-family: var(--bf-serif);
	font-size: 1.28rem !important;
	font-style: italic;
	line-height: 1.15;
	max-width: 220px;
	transform: rotate(-8deg);
}

.site-footer {
	background: linear-gradient(180deg, #20361F 0%, #172817 100%);
	margin: 0;
	padding: 1.35rem 0 1.55rem;
}

.site-footer::before {
	background: rgba(249, 238, 208, 0.16);
	left: 0;
	right: 0;
}

.site-footer::after {
	display: none;
}

.site-footer__inner {
	align-items: center;
	display: grid;
	gap: 1rem 2rem;
	grid-template-columns: auto 1fr auto;
}

.site-footer__brand {
	min-width: 0;
}

.site-footer__logo {
	color: #F9EED0;
	font-size: 1.9rem;
	margin: 0;
}

.bondifly-footer-menu {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.65rem;
	justify-content: center;
}

.site-footer p,
.site-footer li,
.site-footer a {
	color: rgba(249, 238, 208, 0.80);
	font-size: 0.82rem;
}

.site-footer__bottom,
.site-footer__column,
.site-footer h2 {
	display: none;
}

@media (max-width: 900px) {
	.site-header__inner,
	.bf-hero__grid {
		grid-template-columns: 1fr;
	}

	.site-navigation {
		justify-self: start;
	}

	.site-header__account {
		justify-self: start;
	}

	.bf-hero__copy {
		max-width: 680px;
	}

	.bf-storybook-image--hero {
		aspect-ratio: 16 / 9;
	}

	.character-card {
		grid-template-columns: 1fr;
	}

	.character-card .bf-storybook-image {
		aspect-ratio: 16 / 10;
		grid-row: auto;
	}
}

@media (max-width: 960px) {
	body::before,
	body::after {
		opacity: 0.34;
	}

	.site-header {
		background: rgba(248, 240, 221, 0.88);
		position: sticky;
	}

	.site-header__inner {
		grid-template-columns: 1fr auto;
		min-height: 76px;
	}

	.site-navigation {
		background: rgba(255, 248, 230, 0.96);
	}

	.bf-promises .promise-grid,
	.character-grid.wp-block-columns,
	.episode-grid.wp-block-columns {
		grid-template-columns: 1fr;
	}

	.promise-card + .promise-card {
		border-left: 0;
		border-top: 1px solid rgba(61, 44, 30, 0.13);
		padding-top: 1.3rem;
	}

	.promise-card.soft-card {
		padding-bottom: 1.3rem;
	}

	.section--audio .bondifly-episode-card__body,
	.final-cta__inner,
	.site-footer__inner {
		grid-template-columns: 1fr;
	}

	.section--audio .bondifly-episode-card__player,
	.section--audio .bondifly-episode-card__duration {
		grid-column: 1;
	}

	.final-cta {
		text-align: left;
	}

	.final-cta__inner::before {
		justify-self: start;
	}

	.bondifly-footer-menu {
		justify-content: flex-start;
	}
}

@media (max-width: 640px) {
	body {
		font-size: 15px;
	}

	.site-shell,
	.bf-section {
		padding-left: 18px;
		padding-right: 18px;
	}

	.site-brand__name {
		font-size: 2rem;
	}

	.site-brand__heart {
		font-size: 1.55rem;
		transform: translate(7.05rem, -0.05rem);
	}

	.site-brand__tagline {
		font-size: 0.88rem;
	}

	.bf-hero__copy h1 {
		font-size: clamp(2.75rem, 12vw, 3.55rem);
	}

	.bf-storybook-image--hero {
		aspect-ratio: 4 / 3;
		mask-image: radial-gradient(ellipse at center, #000 68%, transparent 100%);
		-webkit-mask-image: radial-gradient(ellipse at center, #000 68%, transparent 100%);
	}

	.section--audio .bondifly-episode-card,
	.episode-card {
		grid-template-columns: 1fr;
	}

	.section--audio .bondifly-episode-card__cover {
		aspect-ratio: 16 / 9;
	}

	.episode-card .bf-storybook-image {
		aspect-ratio: 16 / 9;
	}

	.wp-block-button.button--secondary .wp-block-button__link {
		min-width: 0;
	}
}

/* =========================================================================
   Site footer — compact storybook footer (CTA strip + divider + bottom row).
   Shared across the homepage and all subpages. Uses a fresh `.bf-site-footer`
   root class so none of the legacy footer rules interfere. The dark-green
   gradient starts where the homepage final-CTA ends (#0F1F14) so the two blend
   seamlessly on the front page.
   ========================================================================= */
.bf-site-footer {
	background:
		radial-gradient(900px 220px at 50% -10%, rgba(107, 142, 90, 0.22), transparent 70%),
		linear-gradient(180deg, #0F1F14 0%, #0B160F 100%);
	color: #C8C2A8;
	font-family: var(--bf-sans, "DM Sans", system-ui, -apple-system, sans-serif);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
}

.bf-site-footer__cta {
	align-items: center;
	display: grid;
	gap: clamp(16px, 2.4vw, 34px);
	grid-template-columns: 1.5fr auto auto;
	padding: clamp(18px, 2.4vw, 26px) 0 clamp(12px, 1.6vw, 18px);
}

.bf-site-footer__cta-text h2 {
	color: #F4ECD6;
	font-family: var(--bf-serif, "Cormorant Garamond", Georgia, serif);
	font-size: clamp(21px, 2.3vw, 28px);
	font-weight: 500;
	line-height: 1.14;
	margin: 0 0 6px;
}

.bf-site-footer__cta-text p {
	color: #C8C2A8;
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
	max-width: 440px;
}

/* Gold CTA button — matches the site's primary button style. */
.bf-site-footer__button {
	align-items: center;
	background: var(--bf-btn-gold);
	border: 1px solid var(--bf-btn-gold-border);
	border-radius: var(--bf-btn-radius);
	box-shadow: var(--bf-btn-gold-shadow);
	color: var(--bf-btn-gold-text);
	display: inline-flex;
	font: var(--bf-btn-font-weight) 15px/1.2 var(--bf-sans, "DM Sans", system-ui, sans-serif);
	gap: 8px;
	justify-content: center;
	min-height: var(--bf-btn-min-h);
	padding: 12px 24px;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
	white-space: nowrap;
}

.bf-site-footer__button:hover,
.bf-site-footer__button:focus {
	background: var(--bf-btn-gold-hover);
	box-shadow: var(--bf-btn-gold-shadow-hover);
	color: var(--bf-btn-gold-text);
	transform: translateY(-1px);
}

/* =========================================================================
   Reusable Bondifly button utilities (.bf-btn + variants).
   The existing theme / Gutenberg / PMPro button selectors are mapped onto the
   same design tokens above, so these utility classes share their exact look and
   can be used directly in new markup. Purely visual — no behaviour changes.
   ========================================================================= */
.bf-btn {
	align-items: center;
	border: 1px solid transparent;
	border-radius: var(--bf-btn-radius);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--bf-sans);
	font-size: 15px;
	font-weight: var(--bf-btn-font-weight);
	gap: 8px;
	justify-content: center;
	line-height: 1.2;
	min-height: var(--bf-btn-min-h);
	padding: 12px 24px;
	text-align: center;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.bf-btn--primary {
	background: var(--bf-btn-gold);
	border-color: var(--bf-btn-gold-border);
	box-shadow: var(--bf-btn-gold-shadow);
	color: var(--bf-btn-gold-text);
}

.bf-btn--primary:hover,
.bf-btn--primary:focus {
	background: var(--bf-btn-gold-hover);
	box-shadow: var(--bf-btn-gold-shadow-hover);
	color: var(--bf-btn-gold-text);
	transform: translateY(-1px);
}

.bf-btn--secondary {
	background: var(--bf-btn-secondary-bg);
	border-color: var(--bf-btn-secondary-border);
	color: var(--bf-btn-secondary-text);
}

.bf-btn--secondary:hover,
.bf-btn--secondary:focus {
	background: var(--bf-btn-secondary-bg-hover);
	border-color: var(--bf-btn-gold-border);
	color: var(--bf-btn-secondary-text);
	transform: translateY(-1px);
}

.bf-btn--ghost {
	background: none;
	border-color: transparent;
	box-shadow: none;
	color: var(--bf-btn-ghost-text);
	min-height: 0;
	padding: 6px 8px;
}

.bf-btn--ghost:hover,
.bf-btn--ghost:focus {
	color: var(--bf-btn-gold-text);
	text-decoration: underline;
}

.bf-btn--danger {
	background: none;
	border: 1px solid var(--bf-btn-danger-border);
	border-radius: 999px;
	box-shadow: none;
	color: var(--bf-btn-danger-text);
	min-height: 0;
	padding: 8px 16px;
}

.bf-btn--danger:hover,
.bf-btn--danger:focus {
	background: rgba(150, 90, 40, 0.08);
	border-color: rgba(150, 90, 40, 0.5);
	color: var(--bf-btn-danger-text);
}

/* Accessibility: one clear, warm keyboard-focus ring for every action across
   the site (also restores the outline PMPro removes from its buttons). */
.bf-btn:focus-visible,
.button:focus-visible,
.bondifly-button:focus-visible,
.wp-block-button .wp-block-button__link:focus-visible,
.site-header__account:focus-visible,
.bf-site-footer__button:focus-visible,
.site-nav__cta:focus-visible,
.menu-toggle:focus-visible,
input[type="submit"]:focus-visible,
button[type="submit"]:focus-visible,
.pmpro_btn:focus-visible,
.pmpro_btn-submit:focus-visible,
.pmpro_btn-submit-checkout:focus-visible,
.bf-button:focus-visible,
.bf-play-button:focus-visible,
.btn:focus-visible,
.pmpro_card_action a:focus-visible,
.pmpro_actions_nav a:focus-visible,
.pmpro_table_orders a:focus-visible {
	outline: var(--bf-btn-focus-ring);
	outline-offset: 2px;
}

.bf-site-footer__deco {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: flex-end;
}

.bf-site-footer__deco img {
	flex: none;
	height: auto;
	width: clamp(104px, 10vw, 132px);
}

.bf-site-footer__note {
	color: #E2CF9C;
	font-family: var(--hand, "Caveat", "Segoe Script", cursive);
	font-size: 19px;
	line-height: 1.1;
	max-width: 130px;
}

/* Thin divider + clean single-row bottom bar. */
.bf-site-footer__bar {
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	justify-content: space-between;
	padding: 14px 0 18px;
}

.bf-site-footer__logo {
	color: #F4ECD6;
	font-family: var(--bf-serif, "Cormorant Garamond", Georgia, serif);
	font-size: 23px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.bf-site-footer__logo span {
	color: #C9A961;
}

.bf-site-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	justify-content: center;
}

.bf-site-footer__links a,
.bf-site-footer__email {
	color: #C8C2A8;
	text-decoration: none;
	white-space: nowrap;
}

.bf-site-footer__links a:hover,
.bf-site-footer__links a:focus,
.bf-site-footer__email:hover,
.bf-site-footer__email:focus {
	color: #fff;
}

@media (max-width: 860px) {
	.bf-site-footer__cta {
		gap: 16px 22px;
		grid-template-columns: 1fr auto;
	}

	.bf-site-footer__deco {
		display: none;
	}
}

@media (max-width: 600px) {
	/* Single centered column. Items stay full-width (text wraps normally — no
	   horizontal overflow) and everything is centered via text-align. */
	.bf-site-footer__cta {
		gap: 18px;
		grid-template-columns: 1fr;
		padding: 24px 0 18px;
		text-align: center;
	}

	.bf-site-footer__cta-text p {
		margin-left: auto;
		margin-right: auto;
	}

	.bf-site-footer__button {
		margin-left: auto;
		margin-right: auto;
		max-width: 320px;
		width: 100%;
	}

	.bf-site-footer__bar {
		flex-direction: column;
		gap: 12px;
		text-align: center;
	}

	.bf-site-footer__links {
		justify-content: center;
	}
}

/* =========================================================================
   Sticky footer (layout — NOT position:fixed).
   The body is a full-height flex column: the main content grows to fill the
   viewport on short pages so the footer sits at the bottom, while long pages
   flow naturally with the footer after the content. The decorative .bf-paper
   layer (position:fixed) and the skip link (position:absolute) are out of
   flow, so they are not flex items and do not affect this layout.
   ========================================================================= */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

/* Account for the WordPress admin bar so logged-in users get no extra scroll. */
body.admin-bar {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		min-height: calc(100vh - 46px);
		min-height: calc(100dvh - 46px);
	}
}

/* Main content grows to fill the available vertical space; never shrinks. */
.site-main {
	flex: 1 0 auto;
}

/* Header and footer keep their natural height and are never compressed. */
.site-header,
.bf-site-footer {
	flex-shrink: 0;
}

/* =========================================================================
   Mobile navigation has moved to its own global stylesheet,
   assets/css/bondifly-nav.css, which is enqueued last on every page and is the
   single source of truth for the mobile header, hamburger, slide-down panel,
   in-panel CTA and dimming backdrop. Keeping it in one file (rather than copied
   into the two page skins) is what makes the menu identical on every page.
   ========================================================================= */