/* =========================================================================
   Fehno Landing — frontend + editor styles
   Section-level rules (.f-*) are intentionally unscoped so they render
   in both the live page and the editor iframe.
   Global body overrides are scoped to body.fehno-landing (frontend only).
   ========================================================================= */

/* ============ CSS Variables ============ */
:root {
	--f-purple:       #502878;
	--f-purple-2:     #7a4fb0;
	--f-purple-soft:  #f1ebf7;
	--f-dark:         #23194b;
	--f-dark-2:       #1a1230;
	--f-paper:        #f6f3ec;
	--f-paper-2:      #efeadd;
	--f-ink:          #1a1a1a;
	--f-highlight:    #fde68a;
	--f-red:          #c0392b;
	--f-green:        #1f7a3f;
	--f-container:        1240px;
	--f-container-narrow: 780px;
	--f-container-wide:   1360px;

	/*
	 * Typography gap scale — use these everywhere instead of raw px values
	 * so spacing is intentional and consistent across all 12 sections.
	 *
	 * xs  eyebrow → heading (tight, they're a unit)
	 * sm  h3 bottom / lead bottom / body → body
	 * md  h1/h2 bottom → first paragraph (primary heading gap)
	 * lg  body → CTA / intro → section grid
	 * xl  reserved for major layout separations
	 */
	--f-gap-xs: clamp(12px, 0.9vw, 16px);
	--f-gap-sm: clamp(24px, 2vw, 34px);
	--f-gap-md: clamp(44px, 3.8vw, 60px);
	--f-gap-lg: clamp(52px, 5vw, 76px);
	--f-gap-xl: clamp(68px, 7vw, 104px);
}

/* ============ Section framing ============ */
.f-section {
	padding: clamp(56px, 7vw, 120px) 0;
	position: relative;
}
.f-section-inner {
	max-width: var(--f-container);
	margin: 0 auto;
	padding-left:  clamp(20px, 4vw, 56px);
	padding-right: clamp(20px, 4vw, 56px);
	box-sizing: border-box;
}
.f-section-narrow .f-section-inner { max-width: var(--f-container-narrow); }
.f-section-wide   .f-section-inner { max-width: var(--f-container-wide); }

.f-dark   { background: var(--f-dark);   color: #f3eefb; }
.f-dark2  { background: var(--f-dark-2); color: #f3eefb; }
.f-paper  { background: var(--f-paper);  color: var(--f-ink); }
.f-cream  { background: var(--f-paper-2); color: var(--f-ink); }
.f-purple { background: var(--f-purple); color: #fff; }

/* ============ Typography ============ */
.f-section h1,
.f-section h2,
.f-section h3,
.f-section h4 {
	font-family: "Outfit", system-ui, sans-serif;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.02;
	/* margin intentionally omitted — .f-h1/.f-h2/.f-h3 classes handle per-level spacing */
}

.f-eyebrow {
	font-family: "Outfit", sans-serif;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--f-purple);
	margin: 0 0 var(--f-gap-xs);   /* tight — eyebrow sits close to its heading */
}
.f-dark  .f-eyebrow,
.f-dark2 .f-eyebrow { color: var(--f-highlight); }
.f-purple .f-eyebrow { color: #fff; opacity: 0.85; }

/* Heading bottom margins use the gap scale so spacing is proportional
   to the heading's visual weight, not a fixed pixel value. */
.f-h1 { font-size: clamp(40px, 5.8vw, 78px); margin: 0 0 var(--f-gap-md); }
.f-h2 { font-size: clamp(32px, 4.5vw, 56px); margin: 0 0 var(--f-gap-md); }
.f-h3 { font-size: clamp(22px, 2.5vw, 28px); margin: 0 0 var(--f-gap-sm); }

.f-highlight { color: var(--f-purple); font-style: normal; }
.f-dark  .f-highlight,
.f-dark2 .f-highlight,
.f-purple .f-highlight { color: var(--f-highlight); }

.f-lead {
	font-family: "Inter", system-ui, sans-serif;
	font-size: clamp(17px, 1.2vw, 20px);
	line-height: 1.6;
	opacity: 0.88;
	margin: 0 0 var(--f-gap-sm);
	max-width: 62ch;
}
.f-body {
	font-family: "Inter", system-ui, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	margin: 0 0 var(--f-gap-sm);
}
.f-micro {
	font-family: "Outfit", sans-serif;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
	opacity: 0.7;
}

.f-divider {
	height: 2px;
	background: rgba(80, 40, 120, 0.2);
	max-width: 60px;
	margin: 0 0 var(--f-gap-md);
	border: 0;
	border-radius: 2px;
}
.f-dark  .f-divider,
.f-dark2 .f-divider,
.f-purple .f-divider { background: rgba(255, 255, 255, 0.35); }

/* ============ CTA button ============ */
.f-cta,
.f-cta:visited {
	display: inline-block;
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	font-size: 17px;
	letter-spacing: 0.005em;
	padding: 18px 30px;
	border-radius: 8px;
	background: var(--f-purple);
	color: #fff;
	text-decoration: none;
	border: 2px solid var(--f-purple);
	box-shadow: 0 8px 0 rgba(0, 0, 0, 0.15);
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.f-cta:hover {
	transform: translateY(2px);
	box-shadow: 0 6px 0 rgba(0, 0, 0, 0.18);
	color: #fff;
}
.f-cta-light { background: #fff; color: var(--f-purple); border-color: #fff; }
.f-cta-light:hover { color: var(--f-purple); }
.f-cta-block { display: block; text-align: center; width: 100%; box-sizing: border-box; }

/* Wrapper paragraph that spaces the CTA away from the copy above it */
.f-cta-wrap {
	margin: var(--f-gap-lg) 0 0;
	line-height: 1;   /* prevent the paragraph from adding unwanted line-height gap */
}

/* ============ Hero ============ */
.f-hero {
	padding: clamp(72px, 9vw, 140px) 0 clamp(56px, 7vw, 110px);
}
.f-hero-grid {
	max-width: var(--f-container-wide);
	margin: 0 auto;
	padding-left:  clamp(20px, 4vw, 56px);
	padding-right: clamp(20px, 4vw, 56px);
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}
.f-hero-media img {
	display: block;
	width: 100%;
	max-width: 440px;
	margin: 0 auto;
	filter: drop-shadow(0 40px 60px rgba(0, 0, 0, 0.55));
}
.f-hero-social {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
	font-family: "Outfit", sans-serif;
	font-size: 14px;
	letter-spacing: 0.01em;
	opacity: 0.9;
}
.f-hero-social strong { color: var(--f-highlight); font-weight: 700; }

@media (max-width: 900px) {
	.f-hero-grid { grid-template-columns: 1fr; gap: 36px; }
	.f-hero-media { order: -1; }
	.f-hero-media img { max-width: 280px; }
}

/* ============ Pain bullets ============ */
.f-bullets {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, 1fr);
}
.f-bullets li {
	padding: 18px 20px 18px 46px;
	border-left: 3px solid var(--f-purple);
	background: rgba(80, 40, 120, 0.05);
	font-size: 17px;
	line-height: 1.5;
	border-radius: 0 8px 8px 0;
	position: relative;
	font-family: "Inter", system-ui, sans-serif;
}
.f-bullets li::before {
	content: "—";
	position: absolute;
	left: 20px;
	top: 18px;
	color: var(--f-purple);
	font-weight: 700;
}
.f-dark  .f-bullets li,
.f-dark2 .f-bullets li {
	background: rgba(255, 255, 255, 0.04);
	border-left-color: var(--f-purple-2);
	color: #f3eefb;
}
.f-dark  .f-bullets li::before,
.f-dark2 .f-bullets li::before { color: var(--f-purple-2); }

@media (max-width: 720px) {
	.f-bullets { grid-template-columns: 1fr; }
}

/* ============ Check / cross lists ============ */
.f-check, .f-cross {
	list-style: none;
	padding: 0;
	margin: 0;
	display: grid;
	gap: 12px;
}
.f-check li,
.f-cross li {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	font-size: 16px;
	line-height: 1.5;
	font-family: "Inter", system-ui, sans-serif;
}
.f-check li::before,
.f-cross li::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	margin-top: 2px;
}
.f-check li::before {
	background: var(--f-green)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>")
		center / 14px no-repeat;
}
.f-cross li::before {
	background: var(--f-red)
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>")
		center / 14px no-repeat;
}

/* ============ Inside cards ============ */
.f-inside {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
	margin-top: var(--f-gap-lg);
}
@media (max-width: 720px) {
	.f-inside { grid-template-columns: 1fr; }
}
.f-inside-card {
	border: 1.5px solid rgba(80, 40, 120, 0.22);
	background: #fff;
	padding: 28px 26px;
	border-radius: 12px;
	position: relative;
}
.f-dark  .f-inside-card,
.f-dark2 .f-inside-card {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(255, 255, 255, 0.14);
}
.f-inside-card .f-num {
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	font-size: 14px;
	color: var(--f-purple);
	letter-spacing: 0.16em;
	margin-bottom: 6px;
	display: block;
}
.f-dark  .f-inside-card .f-num,
.f-dark2 .f-inside-card .f-num { color: var(--f-highlight); }
.f-inside-card h3 { margin: 0 0 10px; font-size: clamp(20px, 1.8vw, 26px); }
.f-inside-card p  { margin: 0; font-size: 16px; line-height: 1.55; opacity: 0.85; font-family: "Inter", system-ui, sans-serif; }

/* ============ Benefits grid ============ */
.f-benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: var(--f-gap-lg);
}
@media (max-width: 960px) { .f-benefits { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .f-benefits { grid-template-columns: 1fr; } }

.f-benefit {
	background: rgba(255, 255, 255, 0.04);
	border: 1.5px solid rgba(255, 255, 255, 0.12);
	padding: 24px 22px;
	border-radius: 12px;
}
.f-paper .f-benefit,
.f-cream .f-benefit {
	background: #fff;
	border-color: rgba(80, 40, 120, 0.18);
}
.f-benefit .f-num {
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	font-size: 14px;
	color: var(--f-purple-2);
	letter-spacing: 0.14em;
	margin-bottom: 10px;
}
.f-paper .f-benefit .f-num,
.f-cream .f-benefit .f-num { color: var(--f-purple); }
.f-benefit h3 { margin: 0 0 6px; font-size: 20px; }
.f-benefit p  { margin: 0; font-size: 15px; opacity: 0.85; line-height: 1.5; font-family: "Inter", system-ui, sans-serif; }

/* ============ For / Not-for ============ */
.f-forcols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 60px);
	margin-top: var(--f-gap-lg);
}
.f-forcols h3 { font-size: 22px; margin: 0 0 18px; }
.f-forcols .f-yes { color: #8be2a8; }
.f-forcols .f-no  { color: #ffa7a7; }
@media (max-width: 720px) { .f-forcols { grid-template-columns: 1fr; } }

/* ============ Testimonials ============ */
.f-testimonials {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: var(--f-gap-lg);
}
@media (max-width: 900px) { .f-testimonials { grid-template-columns: 1fr; } }

.f-testimonial {
	background: #fff;
	border: 1.5px solid rgba(80, 40, 120, 0.18);
	padding: 26px 24px;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.f-testimonial blockquote {
	margin: 0;
	font-family: "Outfit", sans-serif;
	font-weight: 600;
	font-size: 19px;
	line-height: 1.35;
	letter-spacing: -0.01em;
	color: var(--f-ink);
	flex: 1;
}
.f-testimonial .f-author {
	font-family: "Outfit", sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: var(--f-purple);
	letter-spacing: 0.04em;
}

/* ============ Belief quote ============ */
.f-belief { text-align: center; }
.f-belief .f-section-inner { max-width: 920px; }
.f-belief h2 { font-size: clamp(30px, 4.5vw, 58px); line-height: 1.05; }

/* ============ Author ============ */
.f-author-row {
	display: grid;
	grid-template-columns: 160px 1fr;
	gap: 36px;
	align-items: center;
}
.f-author-row img {
	width: 160px;
	height: 160px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--f-purple);
}
@media (max-width: 700px) {
	.f-author-row { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 22px; }
	.f-author-row img { width: 128px; height: 128px; }
}

/* ============ Offer ============ */
.f-offer { text-align: center; }
.f-offer-head { max-width: 640px; margin: 0 auto 36px; }
.f-offer-card {
	background: #fff;
	color: var(--f-ink);
	border-radius: 16px;
	padding: clamp(28px, 3vw, 44px) clamp(24px, 3vw, 38px);
	box-shadow: 0 24px 70px rgba(35, 25, 75, 0.4);
	max-width: 560px;
	margin: 0 auto;
	text-align: left;
}
.f-offer-card img {
	display: block;
	margin: 0 auto 20px;
	max-width: 200px;
	height: auto;
	filter: drop-shadow(0 14px 28px rgba(35, 25, 75, 0.28));
}
.f-offer-card h2 { text-align: center; margin: 0 0 10px; font-size: clamp(26px, 2.4vw, 34px); }
.f-offer-sub   { text-align: center; font-size: 15px; opacity: 0.75; margin: 0 0 22px; font-family: "Inter", system-ui, sans-serif; }

.f-price {
	text-align: center;
	margin: 22px 0 6px;
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	display: flex;
	align-items: baseline;
	gap: 14px;
	justify-content: center;
}
.f-was { text-decoration: line-through; opacity: 0.45; font-size: 24px; font-weight: 600; }
.f-now { font-size: 64px; color: var(--f-purple); line-height: 1; letter-spacing: -0.03em; }
.f-price-foot {
	text-align: center;
	font-family: "Outfit", sans-serif;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	opacity: 0.6;
	margin-bottom: 20px;
}
.f-offer-card .f-check { margin: 20px 0 4px; }

/* ============ FAQ ============ */
.f-faq {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 48px;
	margin-top: var(--f-gap-md);
}
@media (max-width: 820px) { .f-faq { grid-template-columns: 1fr; } }

.f-faq details {
	border-bottom: 1.5px solid rgba(0, 0, 0, 0.1);
	padding: 20px 0;
}
.f-dark  .f-faq details,
.f-dark2 .f-faq details { border-bottom-color: rgba(255, 255, 255, 0.12); }

.f-faq summary {
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.01em;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 14px;
	align-items: center;
}
.f-faq summary::-webkit-details-marker { display: none; }
.f-faq summary::after { content: "+"; font-size: 24px; font-weight: 700; opacity: 0.6; }
.f-faq details[open] summary::after { content: "−"; }
.f-faq details p { margin: 12px 0 0; font-size: 16px; line-height: 1.55; opacity: 0.85; font-family: "Inter", system-ui, sans-serif; }

/* ============ Final CTA ============ */
.f-final {
	text-align: center;
	padding: clamp(80px, 9vw, 140px) 0;
}
.f-final .f-section-inner { max-width: 780px; }
.f-final h2 { font-size: clamp(36px, 5.5vw, 68px); margin: 0 0 var(--f-gap-md); }
.f-final .f-lead { margin: 0 auto var(--f-gap-lg); max-width: 560px; }

/* ============ Promise two-column layout ============ */
.f-promise .f-section-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 72px);
	align-items: center;
}
@media (max-width: 820px) {
	.f-promise .f-section-inner { grid-template-columns: 1fr; gap: 28px; }
}

/* ============ Center helpers ============ */
.f-center { text-align: center; }
.f-center .f-lead    { margin-left: auto; margin-right: auto; }
.f-center .f-divider { margin-left: auto; margin-right: auto; }
.f-center .f-bullets { text-align: left; }

/* ============ Footer ============ */
.f-footer {
	text-align: center;
	padding: 30px;
	background: #0f0a1f;
	color: #9a8fb5;
	font-family: "Outfit", sans-serif;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

/* ============ Anchor offset ============ */
.f-section[id] { scroll-margin-top: 24px; }

/* =========================================================================
   Homepage blocks — spacious, minimal personal brand layout
   Shared .f-* primitives apply; these add homepage-specific overrides.
   ========================================================================= */

/* ---- HP Hero: centered, generous vertical rhythm ---- */
.f-hp-hero {
	padding: clamp(100px, 12vw, 180px) 0 clamp(80px, 10vw, 140px);
}
.f-hp-hero-inner {
	max-width: 720px;
	text-align: center;
}
.f-hp-hero-inner .f-eyebrow { justify-content: center; }
.f-hp-hero-inner .f-lead    { margin-left: auto; margin-right: auto; max-width: 52ch; }
.f-hp-hero-inner .f-cta-wrap { text-align: center; }

/* ---- HP About: 2-col photo + copy, collapses on mobile ---- */
.f-hp-about {
	padding: clamp(80px, 10vw, 140px) 0;
}
.f-hp-about-row {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: clamp(40px, 5vw, 80px);
	align-items: flex-start;
}
.f-hp-about-photo img {
	width: 200px;
	height: 200px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid var(--f-purple);
	display: block;
}
.f-hp-about-copy .f-body { max-width: 64ch; }
@media (max-width: 700px) {
	.f-hp-about-row {
		grid-template-columns: 1fr;
		gap: 28px;
		text-align: center;
		justify-items: center;
	}
	.f-hp-about-photo img { width: 160px; height: 160px; }
}

/* ---- HP Problem: dark, large spaced bullets ---- */
.f-hp-problem {
	padding: clamp(80px, 10vw, 140px) 0;
}
.f-hp-bullets {
	list-style: none;
	padding: 0;
	margin: var(--f-gap-lg) 0 0;
	display: grid;
	gap: clamp(16px, 2vw, 28px);
	max-width: 640px;
}
.f-hp-bullets li {
	font-family: "Outfit", sans-serif;
	font-size: clamp(18px, 1.8vw, 22px);
	font-weight: 600;
	line-height: 1.3;
	color: #f3eefb;
	padding-left: 28px;
	position: relative;
}
.f-hp-bullets li::before {
	content: "—";
	position: absolute;
	left: 0;
	color: var(--f-highlight);
	font-weight: 700;
}

/* ---- HP Product: 2-col cover + copy, cream background ---- */
.f-hp-product {
	padding: clamp(80px, 10vw, 140px) 0;
}
.f-hp-product-row {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: clamp(40px, 5vw, 80px);
	align-items: center;
}
.f-hp-product-cover img {
	display: block;
	width: 100%;
	max-width: 260px;
	height: auto;
	filter: drop-shadow(0 28px 48px rgba(35, 25, 75, 0.3));
}
@media (max-width: 760px) {
	.f-hp-product-row {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.f-hp-product-cover { text-align: center; }
	.f-hp-product-cover img { max-width: 200px; margin: 0 auto; }
}

/* ---- HP Outcome: dark, large check-style list ---- */
.f-hp-outcome {
	padding: clamp(80px, 10vw, 140px) 0;
}
.f-hp-outcomes {
	list-style: none;
	padding: 0;
	margin: var(--f-gap-lg) 0 0;
	display: grid;
	gap: clamp(14px, 1.8vw, 24px);
	max-width: 600px;
}
.f-hp-outcomes li {
	font-family: "Inter", system-ui, sans-serif;
	font-size: clamp(16px, 1.4vw, 19px);
	line-height: 1.5;
	color: #f3eefb;
	padding-left: 32px;
	position: relative;
}
.f-hp-outcomes li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--f-highlight);
	font-weight: 700;
	font-family: "Outfit", sans-serif;
}

/* ---- HP Social: centered, link pill buttons ---- */
.f-hp-social {
	padding: clamp(80px, 10vw, 140px) 0;
}
.f-hp-links {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-top: var(--f-gap-lg);
}
.f-hp-link,
.f-hp-link:visited {
	display: inline-block;
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.04em;
	padding: 14px 28px;
	border-radius: 100px;
	background: rgba(255, 255, 255, 0.08);
	color: #f3eefb;
	text-decoration: none;
	border: 1.5px solid rgba(255, 255, 255, 0.22);
	transition: background 0.15s ease, border-color 0.15s ease;
}
.f-hp-link:hover {
	background: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.45);
	color: #fff;
}

/* ---- HP Final CTA: dark, centered, spacious ---- */
.f-hp-cta {
	padding: clamp(100px, 12vw, 180px) 0;
}
.f-hp-cta .f-section-inner { max-width: 680px; }

/* =========================================================================
   Homepage v2 — rebuilt as a personal-brand website (not a funnel)
   Sections: hp-hero-v2, hp-about-v2, hp-products, hp-faq, hp-contact, hp-footer
   ========================================================================= */

/* ---- Ghost CTA variant (used as secondary in hero) ---- */
.f-cta-ghost,
.f-cta-ghost:visited {
	background: transparent;
	color: #f3eefb;
	border-color: rgba(243, 238, 251, 0.35);
}
.f-cta-ghost:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(243, 238, 251, 0.65);
	color: #fff;
}
.f-paper .f-cta-ghost,
.f-cream .f-cta-ghost,
.f-paper .f-cta-ghost:visited,
.f-cream .f-cta-ghost:visited {
	color: var(--f-ink);
	border-color: rgba(26, 26, 26, 0.25);
}
.f-paper .f-cta-ghost:hover,
.f-cream .f-cta-ghost:hover {
	background: rgba(26, 26, 26, 0.06);
	border-color: rgba(26, 26, 26, 0.45);
	color: var(--f-ink);
}

/* ---- HP Hero v2: centered brand identity with photo ---- */
.f-hp-hero-v2 {
	padding: clamp(96px, 11vw, 160px) 0 clamp(80px, 9vw, 128px);
}
.f-hp-hero-v2-inner {
	max-width: 720px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.f-hp-hero-v2-photo {
	width: 128px;
	height: 128px;
	margin: 0 0 var(--f-gap-md);
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	border: 2px solid rgba(255, 255, 255, 0.12);
}
.f-hp-hero-v2-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.f-hp-hero-v2-photo-placeholder {
	background: linear-gradient(135deg, var(--f-purple) 0%, var(--f-purple-2) 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	font-size: 56px;
	color: #fff;
}
.f-hp-hero-v2-inner .f-eyebrow { justify-content: center; }
.f-hp-hero-v2-inner .f-h1 {
	font-size: clamp(36px, 5.2vw, 68px);
	margin: 0 0 var(--f-gap-sm);
}
.f-hp-hero-v2-inner .f-lead {
	max-width: 52ch;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: var(--f-gap-md);
}
.f-hp-hero-v2-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
	margin-top: var(--f-gap-sm);
}
@media (max-width: 540px) {
	.f-hp-hero-v2-photo { width: 104px; height: 104px; }
	.f-hp-hero-v2-ctas .f-cta { width: 100%; box-sizing: border-box; text-align: center; }
}

/* ---- HP About v2: single-column, generous line length ---- */
.f-hp-about-v2 {
	padding: clamp(88px, 10vw, 148px) 0;
}
.f-hp-about-v2-inner {
	max-width: 720px;
}
.f-hp-about-v2-inner .f-h2 {
	font-size: clamp(30px, 4vw, 52px);
}
.f-hp-about-v2-body {
	display: flex;
	flex-direction: column;
	gap: var(--f-gap-sm);
	margin-top: var(--f-gap-md);
}
.f-hp-about-v2-body .f-body {
	margin: 0;
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.6;
	max-width: 62ch;
}

/* ---- HP Products / Resources: hub list ---- */
.f-hp-products {
	padding: clamp(88px, 10vw, 148px) 0;
}
.f-hp-products-inner {
	max-width: 860px;
}
.f-hp-products-header {
	margin-bottom: var(--f-gap-lg);
}
.f-hp-products-header .f-h2 {
	font-size: clamp(30px, 4vw, 52px);
	margin-bottom: 0;
}
.f-hp-products-lead {
	color: rgba(26, 26, 26, 0.65);
	font-size: 16px;
	margin: 10px 0 0;
}

/* Hub list — vertical rows with thin separators */
.f-hp-hub-list {
	list-style: none;
	padding: 0;
	margin: 0;
	border-top: 1px solid rgba(26, 26, 26, 0.1);
}
.f-hp-hub-item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "body meta";
	gap: clamp(20px, 3vw, 48px);
	align-items: center;
	padding: clamp(28px, 3.5vw, 44px) 0;
	border-bottom: 1px solid rgba(26, 26, 26, 0.1);
	transition: background 0.15s ease;
}
.f-hp-hub-item--has-image {
	grid-template-columns: 88px 1fr auto;
	grid-template-areas: "thumb body meta";
}

/* Thumbnail (optional) — portrait ratio for book covers */
.f-hp-hub-thumb {
	grid-area: thumb;
	width: 88px;
	height: 120px;
	border-radius: 8px;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--f-purple-soft);
	box-shadow: 0 6px 20px rgba(35, 25, 75, 0.15);
}
.f-hp-hub-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Body: tag + title + description */
.f-hp-hub-body {
	grid-area: body;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.f-hp-hub-tag {
	display: inline-block;
	align-self: flex-start;
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--f-purple);
	background: var(--f-purple-soft);
	padding: 4px 10px;
	border-radius: 100px;
	margin-bottom: 4px;
}
.f-hp-hub-title {
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--f-ink);
	margin: 0;
}
.f-hp-hub-desc {
	color: rgba(26, 26, 26, 0.68);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
	max-width: 56ch;
}

/* Meta: price + CTA — right-aligned column */
.f-hp-hub-meta {
	grid-area: meta;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	flex-shrink: 0;
}
.f-hp-hub-price {
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	font-size: clamp(18px, 2vw, 22px);
	letter-spacing: -0.02em;
	color: var(--f-ink);
}
.f-hp-hub-cta,
.f-hp-hub-cta:visited {
	display: inline-flex;
	align-items: center;
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--f-purple);
	text-decoration: none;
	background: var(--f-purple-soft);
	padding: 10px 20px;
	border-radius: 100px;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}
.f-hp-hub-cta:hover {
	background: var(--f-purple);
	color: #fff;
}
/* "Próximamente" — soft muted pill, no hover effect */
.f-hp-hub-cta[href="#recursos"],
.f-hp-hub-cta--upcoming {
	background: rgba(80, 40, 120, 0.07);
	color: rgba(80, 40, 120, 0.55);
	cursor: default;
	pointer-events: none;
	border: 1.5px solid rgba(80, 40, 120, 0.15);
}

/* Mobile: stack body above meta */
@media (max-width: 640px) {
	.f-hp-hub-item {
		grid-template-columns: 1fr;
		grid-template-areas:
			"body"
			"meta";
		gap: 16px;
	}
	.f-hp-hub-item--has-image {
		grid-template-columns: 88px 1fr;
		grid-template-areas:
			"thumb body"
			"meta  meta";
		align-items: flex-start;
	}
	.f-hp-hub-thumb { width: 72px; height: 98px; }
	.f-hp-hub-meta { align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
}

/* ---- HP FAQ: clean accordion on cream ---- */
.f-hp-faq {
	padding: clamp(88px, 10vw, 148px) 0;
}
.f-hp-faq-inner {
	max-width: 780px;
}
.f-hp-faq-header {
	margin-bottom: var(--f-gap-lg);
}
.f-hp-faq-header .f-h2 {
	font-size: clamp(30px, 4vw, 52px);
	margin-bottom: 0;
}
.f-hp-faq-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(26, 26, 26, 0.12);
}
.f-hp-faq-item {
	border-bottom: 1px solid rgba(26, 26, 26, 0.12);
}
.f-hp-faq-item details { padding: 0; }
.f-hp-faq-item summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: clamp(18px, 2vw, 24px) 4px;
	cursor: pointer;
	user-select: none;
}
.f-hp-faq-item summary::-webkit-details-marker { display: none; }
.f-hp-faq-q {
	font-family: "Outfit", sans-serif;
	font-weight: 600;
	font-size: clamp(17px, 1.6vw, 20px);
	line-height: 1.35;
	color: var(--f-ink);
}
.f-hp-faq-icon {
	font-family: "Outfit", sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1;
	color: var(--f-purple);
	flex-shrink: 0;
	transition: transform 0.2s ease;
	width: 28px;
	text-align: center;
}
.f-hp-faq-item details[open] .f-hp-faq-icon {
	transform: rotate(45deg);
}
.f-hp-faq-a {
	padding: 0 4px clamp(20px, 2vw, 28px);
	max-width: 64ch;
}
.f-hp-faq-a p {
	margin: 0;
	color: rgba(26, 26, 26, 0.78);
	font-size: 16px;
	line-height: 1.65;
}

/* ---- HP Contact: dark, minimal, email + link list ---- */
.f-hp-contact {
	padding: clamp(88px, 10vw, 148px) 0;
}
.f-hp-contact-inner {
	max-width: 680px;
	text-align: center;
}
.f-hp-contact-inner .f-eyebrow { justify-content: center; }
.f-hp-contact-inner .f-h2 {
	font-size: clamp(30px, 4vw, 52px);
	margin-bottom: var(--f-gap-sm);
}
.f-hp-contact-inner .f-lead {
	max-width: 48ch;
	margin: 0 auto var(--f-gap-md);
}
.f-hp-contact-email {
	margin: 0 0 var(--f-gap-md);
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: clamp(22px, 2.4vw, 30px);
	letter-spacing: -0.01em;
}
.f-hp-contact-email a,
.f-hp-contact-email a:visited {
	color: var(--f-highlight);
	text-decoration: none;
	border-bottom: 2px solid rgba(253, 230, 138, 0.35);
	padding-bottom: 3px;
	transition: border-color 0.15s ease;
}
.f-hp-contact-email a:hover {
	border-bottom-color: var(--f-highlight);
}
.f-hp-contact-links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	justify-content: center;
}
.f-hp-contact-links a,
.f-hp-contact-links a:visited {
	color: rgba(243, 238, 251, 0.75);
	font-family: "Outfit", sans-serif;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	letter-spacing: 0.02em;
	transition: color 0.15s ease;
}
.f-hp-contact-links a:hover {
	color: #fff;
}

/* ---- HP Footer: real website footer ---- */
.f-hp-footer {
	padding: clamp(56px, 6vw, 80px) 0 clamp(32px, 4vw, 48px);
}
.f-hp-footer-grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr;
	gap: clamp(32px, 4vw, 64px);
	align-items: flex-start;
	padding-bottom: clamp(32px, 4vw, 48px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.f-hp-footer-brand { max-width: 360px; }
.f-hp-footer-logo {
	font-family: "Outfit", sans-serif;
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0 0 10px;
}
.f-hp-footer-tagline {
	color: rgba(243, 238, 251, 0.6);
	font-size: 14.5px;
	line-height: 1.55;
	margin: 0;
}
.f-hp-footer-col-title {
	font-family: "Outfit", sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(243, 238, 251, 0.45);
	margin: 0 0 16px;
}
.f-hp-footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.f-hp-footer-col a,
.f-hp-footer-col a:visited {
	color: rgba(243, 238, 251, 0.75);
	font-family: "Inter", sans-serif;
	font-size: 14.5px;
	text-decoration: none;
	transition: color 0.15s ease;
}
.f-hp-footer-col a:hover { color: #fff; }
.f-hp-footer-bottom {
	padding-top: clamp(24px, 3vw, 32px);
}
.f-hp-footer-bottom p {
	color: rgba(243, 238, 251, 0.45);
	font-size: 13px;
	margin: 0;
	letter-spacing: 0.01em;
}
@media (max-width: 720px) {
	.f-hp-footer-grid {
		grid-template-columns: 1fr;
		gap: clamp(28px, 4vw, 40px);
	}
}

/* =========================================================================
   Homepage body override (scoped to body.fehno-home)
   Strips theme chrome on the homepage just like the landing.
   ========================================================================= */
body.fehno-home {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	color: var(--f-ink);
	background: var(--f-paper);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
	scroll-behavior: smooth;
}
body.fehno-home .wp-block-post-title,
body.fehno-home .wp-block-template-part { display: none; }
body.fehno-home main,
body.fehno-home .wp-site-blocks,
body.fehno-home .entry-content,
body.fehno-home .wp-block-post-content {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
/*
 * The theme template wraps post-content in a group block with
 *   style="padding-top: var(--wp--preset--spacing--60)"  (= up to 70px)
 * That is the visible beige gap above the hero. Zero it out on the homepage.
 * Targeting only direct children of <main> keeps nested groups untouched.
 */
body.fehno-home main > .wp-block-group {
	padding: 0 !important;
	margin:  0 !important;
}
/*
 * Override WP's is-layout-constrained rule which boxes every direct child
 * to --wp--style--global--content-size (645px on this theme). The rule uses
 * :where() (zero specificity) so a single class selector wins cleanly.
 * The !important on margins mirrors the source rule's own !important.
 */
body.fehno-home .is-layout-constrained > [class*="wp-block-fehno-"],
body.fehno-home .wp-block-post-content  > [class*="wp-block-fehno-"] {
	max-width: none   !important;
	width:     100%   !important;
	box-sizing: border-box;
	margin-left:        0 !important;
	margin-right:       0 !important;
	margin-block-start: 0 !important;
	margin-block-end:   0 !important;
}

/* =========================================================================
   Frontend-only overrides (scoped to body.fehno-landing)
   These never inject into the editor iframe (stripped by block_editor_settings_all).
   ========================================================================= */

/* Global body reset */
body.fehno-landing {
	font-family: "Inter", system-ui, -apple-system, sans-serif;
	color: var(--f-ink);
	background: var(--f-paper);
	font-size: 17px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/* Hide theme chrome so the landing owns the full viewport */
body.fehno-landing .wp-block-post-title,
body.fehno-landing .wp-block-template-part { display: none; }

body.fehno-landing main,
body.fehno-landing .wp-site-blocks,
body.fehno-landing .entry-content,
body.fehno-landing .wp-block-post-content {
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* Same two-layer gap as the homepage:
 *   main has inline margin-top: var(--wp--preset--spacing--60)  ← zeroed above
 *   main > .wp-block-group has inline padding-top: the same value ← zeroed here
 */
body.fehno-landing main > .wp-block-group {
	padding: 0 !important;
	margin:  0 !important;
}

/* =========================================================================
   Legal pages  —  body.fehno-legal
   Applied to: /aviso-legal/ /politica-de-privacidad/ /cookies/
               /terminos-y-condiciones/

   WHY this block exists here (and not in a separate file):
   - The stylesheet is only enqueued when fehno_blocks_page_type() === 'legal'
   - All rules are scoped to body.fehno-legal so nothing else is affected
   ========================================================================= */

/* ── Minimal legal header (replaces TT5 template-part entirely) ─────── */

.fehno-legal-topbar {
	display: flex;
	align-items: center;
	padding: 22px clamp(20px, 4vw, 48px);
	background: #1a1230;
	border-bottom: 1px solid rgba(243, 238, 251, 0.08);
}

.fehno-legal-logo {
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	font-weight: 800;
	font-size: 20px;
	letter-spacing: 0.05em;
	color: #f3eefb !important;
	text-decoration: none !important;
}
.fehno-legal-logo:hover {
	color: rgba(243, 238, 251, 0.72) !important;
}

/* ── Canvas ─────────────────────────────────────────────────────────── */

body.fehno-legal,
body.fehno-legal .wp-site-blocks {
	background: #1a1230 !important;
	color: #f3eefb;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

/* ── Main / Content ──────────────────────────────────────────────────── */

/* Override the inline style="margin-top:..." WP puts on <main> */
body.fehno-legal main.wp-block-group {
	margin-top: 0 !important;
}

/* Zero the inner wrapper's inline padding-top/bottom (TT5 template sets these inline) */
body.fehno-legal main > .wp-block-group {
	padding-top:    0 !important;
	padding-bottom: 0 !important;
}

/* ── Page title ── */
body.fehno-legal .wp-block-post-title,
body.fehno-legal .entry-title {
	font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
	font-size: clamp(28px, 4vw, 48px) !important;
	font-weight: 800 !important;
	color: #f3eefb !important;
	line-height: 1.1 !important;
	letter-spacing: -0.02em;
	max-width: 820px !important;
	width: 100%;
	margin-left:  auto !important;
	margin-right: auto !important;
	padding: clamp(48px, 6vw, 80px) clamp(20px, 4vw, 48px) clamp(12px, 1.5vw, 20px) !important;
	box-sizing: border-box;
}

/* ── Content column ── */
body.fehno-legal .wp-block-post-content,
body.fehno-legal .entry-content {
	max-width: 820px !important;
	width: 100%;
	margin-left:  auto !important;
	margin-right: auto !important;
	padding: 0 clamp(20px, 4vw, 48px) clamp(64px, 8vw, 120px) !important;
	box-sizing: border-box;
	color: #f3eefb;
}

/* Kill the is-layout-constrained 645px cap on every content child.
   TT5's rule uses :where() → specificity 0. Our (0,2,1) wins cleanly. */
body.fehno-legal .wp-block-post-content > *,
body.fehno-legal .entry-content > * {
	max-width: none !important;
	margin-left:  0 !important;
	margin-right: 0 !important;
}

/* ── Headings ── */
body.fehno-legal h1,
body.fehno-legal h2 {
	font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
	font-weight: 700 !important;
	color: #f3eefb !important;
	line-height: 1.2;
	letter-spacing: -0.01em;
	margin-top: 2.4em;
	margin-bottom: 0.5em;
}
body.fehno-legal h2 { font-size: clamp(20px, 2.2vw, 28px) !important; }

body.fehno-legal h3 {
	font-family: 'Outfit', system-ui, -apple-system, sans-serif !important;
	font-size: clamp(16px, 1.6vw, 20px) !important;
	font-weight: 600 !important;
	color: #f3eefb !important;
	line-height: 1.3;
	margin-top: 1.8em;
	margin-bottom: 0.45em;
}

/* First heading: no extra top gap */
body.fehno-legal .wp-block-post-content > h2:first-child,
body.fehno-legal .wp-block-post-content > h3:first-child,
body.fehno-legal .entry-content > h2:first-child,
body.fehno-legal .entry-content > h3:first-child {
	margin-top: 0.5em;
}

/* ── Body text ── */
body.fehno-legal p {
	color: rgba(243, 238, 251, 0.82) !important;
	margin-bottom: 1em;
	line-height: 1.75;
}
body.fehno-legal strong {
	color: #f3eefb !important;
	font-weight: 600;
}

/* ── Lists ── */
body.fehno-legal ul,
body.fehno-legal ol {
	padding-left: 1.5em;
	margin-bottom: 1em;
}
body.fehno-legal li {
	color: rgba(243, 238, 251, 0.82) !important;
	margin-bottom: 0.4em;
	line-height: 1.65;
}

/* ── Horizontal rules / separators ── */
body.fehno-legal hr,
body.fehno-legal .wp-block-separator {
	border: none !important;
	border-top: 1px solid rgba(243, 238, 251, 0.13) !important;
	background: transparent !important;
	margin: 2.2em 0;
	opacity: 1 !important;
	height: 0 !important;
}

/* ── Inline links (content area) ── */
body.fehno-legal .wp-block-post-content a,
body.fehno-legal .entry-content a {
	color: #fde68a !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}
body.fehno-legal .wp-block-post-content a:hover,
body.fehno-legal .entry-content a:hover {
	color: #fff !important;
	text-decoration: none;
}


/* =========================================================================
   El Protocolo — ep-* block styles
   Crimson (#8B1E3F / #B8264F) accent system over the Fehno dark base.
   All rules are scoped to .ep-section so they NEVER bleed into other pages.
   ========================================================================= */

/* ── EP token layer ── */
.ep-section {
	--ep-crimson:   #8B1E3F;
	--ep-crimson-2: #B8264F;
	--ep-crimson-3: #C73A5E;
	--ep-bone:      #F4EFE6;
	--ep-bone-dim:  #C9C3B6;
	--ep-bone-faint:#7A7468;
	--ep-bg:        #23194B;
	--ep-bg-2:      #150E2C;
	--ep-bg-3:      #1A1338;
	--ep-card:      #1F1540;
	--ep-line:      rgba(244,239,230,0.10);
	--ep-line-s:    rgba(244,239,230,0.22);
	--ep-mono:      'JetBrains Mono', ui-monospace, Menlo, monospace;
	--ep-display:   'Outfit', system-ui, sans-serif;
	--ep-body:      'Inter', system-ui, sans-serif;
}

/* ── Page-level chrome ── */
body.fehno-ep {
	background:
		radial-gradient(ellipse 70% 45% at 80% 5%,  rgba(139,30,63,0.20), transparent 55%),
		radial-gradient(ellipse 60% 40% at 10% 50%, rgba(80,40,120,0.26), transparent 60%),
		radial-gradient(ellipse 70% 40% at 90% 95%, rgba(139,30,63,0.16), transparent 60%),
		#150E2C;
	background-attachment: fixed;
}

/* Hide TT5 chrome — header/footer template-parts + post title H1 above blocks.
   .wp-block-template-part covers both header and footer rendered by the FSE engine.
   .wp-block-post-title would otherwise render "El Protocolo" as an H1 above the hero. */
body.fehno-ep .wp-block-post-title,
body.fehno-ep .wp-block-template-part { display: none !important; }

/* Nuclear container reset — mirrors body.fehno-landing's two-layer gap fix.
 *
 * TT5's page.html template stacks TWO inline-style spacing sources:
 *   1. <main style="margin-top:var(--wp--preset--spacing--60)">     ← Layer 1
 *   2.   <div style="padding-top:var(--wp--preset--spacing--60)">   ← Layer 2 (inner group)
 *
 * Both layers must be zeroed, plus the containing chain (wp-site-blocks,
 * entry-content, wp-block-post-content) needs margin/padding cleared so
 * layout-constrained max-widths don't cap the full-bleed sections.
 */
body.fehno-ep main,
body.fehno-ep .wp-site-blocks,
body.fehno-ep .entry-content,
body.fehno-ep .wp-block-post-content {
	max-width: none !important;
	padding:   0 !important;
	margin:    0 !important;
}
/* Layer 2: inner group block inside <main> with its own inline padding-top */
body.fehno-ep main > .wp-block-group {
	padding: 0 !important;
	margin:  0 !important;
}
/* Constrained-layout children — only lift the max-width cap.
   Do NOT touch padding here: each section block owns its own vertical rhythm
   via .ep-hero / .ep-identification / .ep-mechanism / .ep-offer { padding: clamp(…) } */
body.fehno-ep .is-layout-constrained > [class*="wp-block-fehno-"],
body.fehno-ep .wp-block-post-content  > [class*="wp-block-fehno-"] {
	max-width: none !important;
}

/* ── Shared EP atoms ── */
.ep-section-inner {
	max-width: 720px;
	margin: 0 auto;
	padding-left:  clamp(20px, 5vw, 48px);
	padding-right: clamp(20px, 5vw, 48px);
}

.ep-crimson      { color: var(--ep-crimson-2); }
.ep-mono-tag     {
	font-family: var(--ep-mono);
	font-size: 10px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--ep-bone-faint);
}
.ep-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--ep-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ep-bone-faint);
	margin: 0 0 24px;
}
.ep-dot {
	width: 5px;
	height: 5px;
	background: var(--ep-crimson-2);
	border-radius: 50%;
	display: inline-block;
	flex-shrink: 0;
}
.ep-h1 {
	font-family: var(--ep-display);
	font-weight: 900;
	font-size: clamp(44px, 8vw, 80px);
	line-height: 0.96;
	letter-spacing: -0.035em;
	color: var(--ep-bone);
	margin: 0 0 clamp(20px, 3vw, 32px);
}
.ep-h2 {
	font-family: var(--ep-display);
	font-weight: 800;
	font-size: clamp(30px, 5vw, 52px);
	line-height: 1.0;
	letter-spacing: -0.03em;
	color: var(--ep-bone);
	margin: 0 0 clamp(28px, 4vw, 44px);
}
.ep-lead {
	font-family: var(--ep-body);
	font-size: clamp(15px, 1.5vw, 17px);
	line-height: 1.5;
	color: var(--ep-bone-dim);
	margin: 0 0 clamp(24px, 3vw, 36px);
}
.ep-body-md {
	font-family: var(--ep-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--ep-bone-dim);
	margin: 12px 0 0;
}

/* ── EP Button ── */
.ep-btn {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	background: var(--ep-crimson);
	color: var(--ep-bone);
	font-family: var(--ep-display);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: -0.01em;
	padding: 18px 22px;
	box-sizing: border-box;
	border-radius: 4px;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(139,30,63,0.35);
	transition: transform 0.15s ease, background 0.2s ease;
}
.ep-btn:hover {
	background: var(--ep-crimson-3);
	transform: translateY(-1px);
	color: #fff;
}
/* ep-btn-block: resets to block-level flex so width:100% is relative
   to the card's content box, not an inline formatting context */
.ep-btn-block {
	display: flex;
	width: 100%;
	box-sizing: border-box;
}
.ep-btn-arrow { flex-shrink: 0; }

/* ── ep-hero ── */
.ep-hero { padding: clamp(64px, 9vw, 120px) 0; }
.ep-hero-inner {
	max-width: 720px;
	margin: 0 auto;
	padding-left:  clamp(20px, 5vw, 48px);
	padding-right: clamp(20px, 5vw, 48px);
	/* Single column — all children stack in natural document order */
	display: flex;
	flex-direction: column;
}
.ep-hero-inner .ep-eyebrow { margin-bottom: clamp(16px, 2vw, 24px); }
.ep-hero-inner .ep-h1      { margin-bottom: clamp(16px, 2vw, 24px); }
.ep-hero-inner .ep-lead    { margin-bottom: clamp(24px, 3vw, 36px); }
.ep-book-card {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--ep-bg-3);
	border: 1px solid var(--ep-line);
	border-radius: 4px;
	padding: 16px 18px;
	/* Gap BELOW the card before the CTA separator line */
	margin-bottom: clamp(24px, 3.5vw, 32px);
}
.ep-book-spine {
	width: 46px;
	height: 62px;
	background: linear-gradient(135deg, var(--ep-bg), var(--ep-bg-3));
	border: 1px solid var(--ep-line);
	border-radius: 2px 4px 4px 2px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.4);
	flex-shrink: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 6px 5px 5px;
}
.ep-book-spine-title {
	font-family: var(--ep-display);
	font-weight: 900;
	font-size: 8px;
	line-height: 1.05;
	letter-spacing: -0.04em;
	color: var(--ep-bone);
}
.ep-book-spine-brand {
	font-family: var(--ep-mono);
	font-size: 5px;
	letter-spacing: 0.1em;
	color: var(--ep-bone-faint);
	text-align: center;
}
/* Actual cover image replaces the CSS spine when coverImageId is set */
.ep-cover-img {
	width: 80px;
	height: auto;
	display: block;
	flex-shrink: 0;
	border-radius: 3px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.ep-book-meta { flex: 1; }
.ep-book-name {
	font-family: var(--ep-display);
	font-weight: 700;
	font-size: 15px;
	color: var(--ep-bone);
	margin-bottom: 5px;
}
/* CTA wrap: action zone separated from the product card above by a hairline.
   This mirrors the design's "pinned CTA at bottom of screen" intent — the
   border-top creates a clear visual break so the button feels purposefully
   contained, not floating. */
.ep-hero-cta-wrap {
	width: 100%;
	padding-top: clamp(20px, 3vw, 28px);
	border-top: 1px solid var(--ep-line);
	margin-top: 0; /* gap comes from ep-book-card margin-bottom */
}
.ep-social-proof {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--ep-line);
}
.ep-avatars { display: flex; }
.ep-avatar {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1.5px solid var(--ep-bg);
	margin-left: -7px;
}
.ep-avatar:first-child { margin-left: 0; }
.ep-avatar-1 { background: linear-gradient(135deg, #502878, #8B1E3F); }
.ep-avatar-2 { background: linear-gradient(135deg, #23194B, #B8264F); }
.ep-avatar-3 { background: linear-gradient(135deg, #6B3A9C, #C9C3B6); }

/* ── ep-identification ── */
.ep-identification { padding: clamp(56px, 8vw, 112px) 0; }
.ep-id-header { margin-bottom: clamp(28px, 4vw, 44px); }
.ep-signals {
	border-top: 1px solid var(--ep-line);
	margin-bottom: clamp(28px, 4vw, 44px);
}
.ep-signal-row {
	display: grid;
	grid-template-columns: 52px 1fr 22px;
	align-items: center;
	gap: 12px;
	padding: 15px 0;
	border-bottom: 1px solid var(--ep-line);
}
.ep-signal-key { color: var(--ep-bone-faint); }
.ep-signal-text {
	font-family: var(--ep-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--ep-bone);
}
.ep-signal-check {
	font-family: var(--ep-mono);
	font-size: 13px;
	text-align: center;
}
.ep-split-card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--ep-line);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: clamp(24px, 3.5vw, 40px);
}
.ep-split-left,
.ep-split-right { padding: 20px 18px; }
.ep-split-left  { border-right: 1px solid var(--ep-line); }
.ep-split-right { background: rgba(139,30,63,0.10); }
.ep-split-word {
	font-family: var(--ep-display);
	font-weight: 800;
	font-size: clamp(28px, 5vw, 40px);
	letter-spacing: -0.035em;
	line-height: 1;
	margin: 10px 0 8px;
}
.ep-split-strike {
	color: var(--ep-bone-faint);
	text-decoration: line-through;
	text-decoration-color: var(--ep-crimson);
	text-decoration-thickness: 2px;
}
.ep-split-sub {
	font-family: var(--ep-body);
	font-size: 12px;
	line-height: 1.35;
	color: var(--ep-bone-dim);
	margin: 0;
}
.ep-pull-quote {
	font-family: var(--ep-display);
	font-weight: 700;
	font-size: clamp(18px, 2.5vw, 24px);
	line-height: 1.25;
	letter-spacing: -0.02em;
	color: var(--ep-bone);
	margin: 0;
	padding: 0;
	border: none;
}

/* ── ep-mechanism ── */
.ep-mechanism { padding: clamp(56px, 8vw, 112px) 0; }
.ep-case-card {
	border: 1px solid var(--ep-line);
	border-radius: 4px;
	background: var(--ep-bg-3);
	overflow: hidden;
	margin-bottom: clamp(28px, 4vw, 44px);
}
.ep-case-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 16px;
	border-bottom: 1px solid var(--ep-line);
}
.ep-case-dots {
	display: flex;
	gap: 4px;
}
.ep-case-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ep-line-s);
}
.ep-case-steps { }
.ep-case-step {
	padding: 16px 16px;
	border-bottom: 1px solid var(--ep-line);
}
.ep-case-step-last { border-bottom: none; }
.ep-case-step-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.ep-case-step-body {
	font-family: var(--ep-display);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.3;
	color: var(--ep-bone);
	letter-spacing: -0.01em;
	margin: 0;
}
.ep-protocols { margin-bottom: clamp(20px, 3vw, 36px); }
.ep-protocols-count {
	display: block;
	margin-bottom: 12px;
	color: var(--ep-bone-faint);
}
.ep-protocol-list { display: flex; flex-direction: column; gap: 8px; }
.ep-protocol-chip {
	display: grid;
	grid-template-columns: 48px 1fr 20px;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: var(--ep-bg-3);
	border: 1px solid var(--ep-line);
	border-radius: 3px;
}
.ep-protocol-key  { }
.ep-protocol-text {
	font-family: var(--ep-display);
	font-weight: 600;
	font-size: 14px;
	color: var(--ep-bone);
	letter-spacing: -0.01em;
}
.ep-protocol-arrow { color: var(--ep-bone-faint); text-align: right; }
.ep-pills-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	padding-top: clamp(18px, 2.5vw, 28px);
	border-top: 1px solid var(--ep-line);
}
.ep-pill {
	display: flex;
	align-items: center;
	gap: 7px;
}
.ep-pill-dot { font-size: 10px; }

/* ── ep-offer ── */
.ep-offer { padding: clamp(56px, 8vw, 112px) 0; }
.ep-benefits {
	border-top: 1px solid var(--ep-line);
	margin-bottom: clamp(28px, 4vw, 44px);
}
.ep-benefit-row {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--ep-line);
	align-items: baseline;
}
.ep-benefit-arrow {
	font-family: var(--ep-mono);
	font-size: 14px;
	padding-top: 2px;
}
.ep-benefit-title {
	font-family: var(--ep-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.01em;
	color: var(--ep-bone);
	line-height: 1.2;
}
.ep-benefit-sub {
	margin-top: 2px;
	font-family: var(--ep-body);
	font-size: 12px;
	color: var(--ep-bone-dim);
}
.ep-product-card {
	background: linear-gradient(180deg, rgba(139,30,63,0.14), rgba(0,0,0,0.22));
	border: 1px solid var(--ep-line-s);
	border-radius: 4px;
	/* Generous padding so the button never touches the card edge */
	padding: clamp(22px, 3.5vw, 32px);
	margin-bottom: clamp(40px, 6vw, 72px);
}
.ep-product-card-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}
.ep-badge { }
.ep-product-name {
	font-family: var(--ep-display);
	font-weight: 800;
	font-size: clamp(24px, 4vw, 34px);
	letter-spacing: -0.025em;
	color: var(--ep-bone);
	margin: 0 0 6px;
	line-height: 1.05;
}
.ep-product-sub {
	font-family: var(--ep-body);
	font-size: 13px;
	color: var(--ep-bone-faint);
	margin: 0 0 18px;
}
.ep-price-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	/* More breathing room between price and CTA — key containment fix */
	margin-bottom: clamp(24px, 3vw, 32px);
	padding-bottom: clamp(20px, 2.5vw, 28px);
	border-bottom: 1px solid var(--ep-line);
}
.ep-price-was {
	font-family: var(--ep-display);
	font-weight: 600;
	font-size: 16px;
	color: var(--ep-bone-faint);
	text-decoration: line-through;
	text-decoration-color: var(--ep-crimson);
	text-decoration-thickness: 2px;
}
.ep-price-now {
	font-family: var(--ep-display);
	font-weight: 800;
	font-size: clamp(40px, 8vw, 56px);
	letter-spacing: -0.04em;
	color: var(--ep-bone);
	line-height: 1;
}
.ep-price-curr {
	font-size: 14px;
	font-weight: 500;
	color: var(--ep-bone-dim);
	margin-left: 4px;
}
.ep-security-note {
	text-align: center;
	margin: 14px 0 0;
	color: var(--ep-bone-faint);
}
.ep-closing {
	text-align: center;
	padding-top: clamp(40px, 6vw, 72px);
	border-top: 1px solid var(--ep-line-s);
}
.ep-closing-head {
	font-family: var(--ep-display);
	font-weight: 800;
	font-size: clamp(28px, 5vw, 52px);
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--ep-bone);
	margin: 0 0 18px;
}
.ep-closing-foot {
	color: var(--ep-bone-faint);
	margin: 0;
}

/* ── Responsive tweaks ── */
@media (max-width: 560px) {
	.ep-split-card { grid-template-columns: 1fr; }
	.ep-split-left { border-right: none; border-bottom: 1px solid var(--ep-line); }
	.ep-signal-row { grid-template-columns: 44px 1fr 18px; gap: 8px; }
	.ep-protocol-chip { grid-template-columns: 40px 1fr 16px; gap: 8px; }
}

/* ── EP page: hide WooCommerce persistent cart bar if present ── */
body.fehno-ep .woocommerce-store-notice,
body.fehno-ep .woocommerce-breadcrumb { display: none !important; }