/*
 * Funnel design system.
 *
 * Replaces ~386KB of per-element CSS exported by the old page builder. Values
 * were measured off the live pages, so the look is preserved while the markup
 * underneath becomes ordinary WordPress content.
 */

.fn {
	--fn-text: #212121;
	--fn-bg: #fff;
	--fn-accent: #ffd61e;
	--fn-accent-ink: #000;
	--fn-serif: "Noto Serif", Georgia, "Times New Roman", serif;
	--fn-sans: "Noto Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--fn-width: 848px;

	background: var(--fn-bg);
	color: var(--fn-text);
	font: 400 19px/1.5 var(--fn-sans);
	-webkit-font-smoothing: antialiased;
}

/* The original drops body copy to 17px below its 768px breakpoint. */
@media (max-width: 767px) { .fn { font-size: 17px; } }

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

.fn__wrap {
	max-width: var(--fn-width);
	margin: 0 auto;
	padding: 0 16px;
}

/* --------------------------------------------------------------- typography */
.fn h1, .fn h2 {
	font-family: var(--fn-serif);
	font-weight: 500;
	color: var(--fn-text);
	line-height: 1.5;
	margin: 1.6em 0 .5em;
	text-align: center;
}
.fn h1 { font-size: clamp(1.6rem, 1.25rem + 1.5vw, 2.19rem); }   /* 35px */
.fn h2 { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.75rem); }
.fn h3 {
	font-family: var(--fn-sans);
	font-size: 1.25rem;                                            /* 20px */
	font-weight: 500;
	line-height: 1.5;
	margin: 1.4em 0 .4em;
}
.fn p { margin: 0 0 1.5em; }
.fn strong { font-weight: 700; }
.fn em { font-style: italic; }
/* Links are not underlined on these pages; only .fn-u marks an underline. */
.fn a { color: inherit; text-decoration: none; }
.fn a:hover { text-decoration: underline; }

.fn ul { margin: 30px 0 0; padding: 0; list-style: none; }
.fn li { position: relative; padding-left: 1.8em; margin: 0 0 20px; }
.fn li::before {
	content: "";
	position: absolute; left: 0; top: .2em;
	width: 1.1em; height: 1.1em;
	background-color: #009900;
	-webkit-mask: var(--fn-check) center / contain no-repeat;
	mask: var(--fn-check) center / contain no-repeat;
}

/* ...but only for the funnel's own copy. The rule above matches every li inside
   .fn, including WooCommerce's payment-method list in the embedded checkout,
   where it painted a green tick over each radio and indented the row by 1.8em.
   The embedded form brings its own styling; keep out of it. */
.fn #wfacp-e-form li,
.fn .wfacp_main_wrapper li {
	padding-left: 0;
	margin-bottom: 0;
}
.fn #wfacp-e-form li::before,
.fn .wfacp_main_wrapper li::before { content: none; }

/* Same leak, worse symptom: `.fn img { width: 100% }` stretches the payment
   icons to fill their box -- visa.svg is 750x471 but was rendering 149x30, a
   ratio of 4.95 against its natural 1.59. The gateway sizes its own icons. */
.fn #wfacp-e-form img,
.fn .wfacp_main_wrapper img {
	display: inline-block;
	width: auto;
	height: auto;
	max-width: 100%;
	border-radius: 0;
}

/* -------------------------------------------------------------------- media */
.fn figure { margin: 20px 0; }
.fn img { display: block; width: 100%; height: auto; border-radius: 4px; }

/* ---------------------------------------------------------------- call to action */
.fn .fn__cta,
.fn__cta {
	min-height: 70px;
	display: flex; align-items: center; justify-content: center;
	width: 100%;
	max-width: 592px;
	margin: 0 auto;
	padding: 15px 30px;
	background: var(--fn-accent);
	color: var(--fn-accent-ink);
	border: 1px solid #deb002;
	border-radius: 5px;
	/* Measured off the original: 28px/700 label in a 592x70 button. */
	font: 700 28px/1.2 var(--fn-sans);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s ease;
}
.fn__cta:hover { filter: brightness(.94); }
@media (max-width: 767px) {
	.fn .fn__cta,
	.fn__cta { min-height: 54px; padding: 15px; font-size: 16px; font-weight: 400; }
}
.fn__cta:active { transform: translateY(1px); }
.fn__cta strong { font-weight: 700; }

.fn hr {
	border: 0;
	border-top: 1px solid #e3e3e3;
	margin: 2.2em 0;
}

/* ------------------------------------------------------------------- video */
.fn__video { max-width: 420px; margin: 1.8em auto; }
.fn__video video {
	width: 100%; height: auto; display: block;
	aspect-ratio: 404 / 720;
	background: #000; border-radius: 8px;
}

/* Offer block revealed once the video reaches its cue. Own class, so it no
   longer depends on the old builder's .hide utility. */
.fn__gated { display: none; }
.fn__gated.is-revealed { display: block; animation: fn-in .4s ease both; }
@keyframes fn-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


:root {
	--fn-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm139 135L226 369c-6 8-18 9-25 2L117 287c-7-7-7-18 0-25l21-21c7-7 18-7 25 0l48 47 141-188c6-8 18-9 25-3l21 16c8 6 9 17 3 25z"/></svg>');
	--fn-lock: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z"/></svg>');
}

/* ------------------------------------------------------------------ layout */
/* Image-beside-copy bands. These carry the page's visual rhythm, so they stack
   rather than shrink once there is no room for two readable columns. */
.fn .wp-block-columns {
	display: flex;
	gap: 0;
	align-items: center;
	margin: 0 auto;
}
.fn .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}
/* A column with an explicit width in the block markup keeps it; the other
   column takes the rest. This is how the original splits image beside copy. */
.fn .wp-block-column[style*="flex-basis"] { flex-grow: 0; flex-shrink: 0; }
.fn .wp-block-column figure { margin: 0; }
.fn .wp-block-column p:last-child,
.fn .wp-block-column ul:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
	.fn .wp-block-columns { flex-direction: column; row-gap: var(--cgm, 30px); }
	/* Once the row stacks, flex-basis is a HEIGHT. The block writes it inline,
	   so only !important can hand the column back its natural height. */
	.fn .wp-block-column[style*="flex-basis"] { flex-basis: auto !important; width: 100%; }
	/* Rows the original flips on a phone, so the photo leads. */
	.fn .fn__cols--rev { flex-direction: column-reverse; }
	.fn h1 { margin-top: 1.1em; }
}

/* Images inside a band are sized by the column; standalone ones stay centred. */
.fn > .wp-block-image,
.fn__wrap > .wp-block-image { max-width: 100%; margin: 1.8em auto; }

.fn .wp-block-separator { max-width: 100%; }
.fn .wp-block-column h2,
.fn .wp-block-column h3 { text-align: left; margin-top: 0; }

/* ---------------------------------------------------- emphasis + hierarchy --
 * Measured from the original page. These carry the scannability of a long
 * sales page: red for the claims that must land, yellow for the phrases the
 * eye should catch when skimming.
 */
.fn { --fn-red: #b8000e; --fn-hl: #fff390; }

/* Scoped one level deeper than `.fn h2`, or the heading rule outranks these
   and red headings silently render dark. */
.fn .fn-red { color: var(--fn-red); }
.fn .fn-hl  { background: var(--fn-hl); padding: .05em .12em; }
.fn .fn-u   { text-decoration: underline; }
.fn .fn-left { text-align: left; }
.fn strong { font-weight: 700; }

/* Heading scale, all Noto Serif and centred unless stated. */
.fn h1,
.fn .fn-h-xl { font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.19rem); font-weight: 500; }
.fn .fn-h-lg { font-size: clamp(1.5rem, 1.15rem + 1.3vw, 2.06rem); font-weight: 400; }
.fn .fn-h-md { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.63rem); font-weight: 400; }
.fn .fn-h-sm { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.38rem); font-weight: 400; text-align: left; }
.fn .fn-h-faq {
	font-family: var(--fn-sans);
	font-size: 1.25rem;
	font-weight: 500;
	text-align: left;
	color: #000;
}
.fn h2, .fn h3 { line-height: 1.35; }

/* The original's rule is a short centred hairline, not a full-width band. */
.fn .wp-block-separator {
	width: 100%;
	max-width: var(--fn-width);
	margin: 2em auto;
	border-top: 1px solid #cbd5e0;
}

/* Lead line under a page title, and the fine print in page footers. */
.fn .fn-lead { text-align: center; font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); margin-bottom: 1.4em; }
.fn .fn-fine { font-size: .8rem; color: #666; text-align: center; line-height: 1.55; }
.fn .fn-fine a { color: #666; }

/* Decline link sits quietly under the primary action, as in the original. */
.fn .fn__skip,
.fn a.wfocu_skip_offer {
	display: block; max-width: 592px; margin: .6em auto 2em;
	text-align: center; font-size: .95rem; color: #666; text-decoration: underline;
}
.fn__video { max-width: 420px; margin: 1.8em auto; }
.fn__video video { width: 100%; height: auto; display: block; aspect-ratio: 404/720; background: #000; border-radius: 8px; }
.fn__poke { text-align: center; font-size: .9rem; color: #555; margin: .6rem 0 0; }
.fn__poke[hidden] { display: none; }

/*
 * Offer pages.
 *
 * The offer steps use a different skin from the sales page: one sans family
 * throughout, bold headings, and solid green/grey buttons instead of the
 * yellow sales call to action.
 */
.fn-offer { font-family: "Open Sans", var(--fn-sans); }
.fn-offer h1, .fn-offer h2, .fn-offer h3 { font-family: "Open Sans", var(--fn-sans); font-weight: 700; }
.fn-offer .fn-h-xl { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); font-weight: 700; }
.fn-offer .fn-h-lg { font-size: clamp(1.85rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 700; }
.fn-offer .fn-lead { font-weight: 400; font-size: clamp(1.25rem, 1rem + 1vw, 1.875rem); }
.fn-offer .fn-fine { color: #b0b0b0; }
.fn-offer .fn-fine a { color: #b0b0b0; }
.fn-offer .fn__poke { font-weight: 600; color: #444; }

/* 90-day downsell: the reference uses a wider reading column and footer. */
.fn.page-id-223 { --fn-width: 942px; }
.fn.page-id-223 > .fn__wrap { padding-top: 40px; }
.fn.page-id-223 .fn-h:first-child { position: relative; }
.fn.page-id-223 .fn-h:first-child::after {
	content: "";
	position: absolute;
	top: calc(100% + 19px);
	left: 50%;
	width: 85px;
	border-top: 2px solid #d5d5d5;
	transform: translateX(-50%);
}
.fn.page-id-223 a.fn__accept--ds1 {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: none;
	height: 73px;
	margin-top: 40px;
	padding: 15px 30px;
	border: 1px solid #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: normal;
}
.fn.page-id-223 a.fn__decline--ds1 {
	position: relative;
	width: 184.914px;
	height: 36.5px;
	min-height: 0;
	margin-top: 10px;
	margin-bottom: 0;
	padding: 5px 40px;
	font-size: 18px;
	font-weight: 700;
	line-height: normal;
}
.fn.page-id-223 a.fn__decline--ds1::before {
	content: "";
	position: absolute;
	inset: -4px 0;
}
.fn.page-id-223 .fn__ds1-footer {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-top: 100px;
	padding: 30px 10px;
	background: #0e100f;
	transform: translateX(-50%);
}
.fn.page-id-223 .fn-fine--wide {
	position: relative;
	left: 50%;
	width: min(1033px, calc(90vw - 20px));
	max-width: none;
	letter-spacing: -.05px;
	transform: translateX(-50%);
}
@media (max-width: 768px) {
	.fn.page-id-223 > .fn__wrap { padding-inline: 25px; }
	.fn.page-id-223 a.fn__accept--ds1 { width: 100%; }
}
@media (max-width: 767px) {
	.fn.page-id-223 a.fn__accept--ds1 { height: 59.5px; padding: 15px; font-size: 20px; }
	.fn.page-id-223 a.fn__decline--ds1 { width: 164.266px; height: 33.5px; padding: 5px 40px; font-size: 14px; }
	.fn.page-id-223 .fn-fine--wide { width: calc(100vw - 20px); }
}

/*
 * Accept and decline.
 *
 * Green is the default accept; the coaching offers use the brand yellow with
 * black text. Label sizes are clamped so the large desktop type of the
 * original scales down instead of overflowing a phone.
 */
.fn a.fn__accept,
.fn a.fn__decline {
	display: block; width: fit-content; max-width: 100%; box-sizing: border-box;
	text-align: center; color: #fff; text-decoration: none;
	border-radius: 5px; line-height: 1.25; cursor: pointer;
}
.fn a.fn__accept {
	margin: 1.6em auto 0; padding: 15px 60px; background: #009900;
	font-weight: 700; font-size: clamp(1.05rem, .7rem + 1.4vw, 1.875rem);
}
.fn a.fn__accept .fn__accept-sub {
	display: block; margin-top: .3em; font-weight: 400;
	font-size: clamp(.85rem, .68rem + .6vw, 1.375rem);
}
.fn a.fn__accept:hover { background: #007a00; }

/* downsell 1 keeps the green, with the tighter padding of the original */
.fn a.fn__accept--sm { padding: 15px 30px; }
.fn a.fn__accept--sm .fn__accept-sub { font-size: clamp(.85rem, .7rem + .45vw, 1.25rem); }

/* the coaching offers */
.fn a.fn__accept--yellow { background: #fed018; color: #000; padding: 16px 40px; }
.fn a.fn__accept--yellow:hover { background: #f0c40c; }
.fn a.fn__accept--yellow .fn__accept-sub { font-size: clamp(.8rem, .74rem + .2vw, 1rem); }
.fn a.fn__accept--xl { font-size: clamp(1.15rem, .75rem + 1.6vw, 2.125rem); }

.fn a.fn__decline {
	margin: 1em auto 2.5em; padding: 10px 30px;
	background: #b0b0b0; font-size: 1rem;
}
.fn a.fn__decline:hover { background: #9a9a9a; }
/* Measured lead-ins that differ from the shared button rhythm. */
.fn.page-id-225 a.fn__accept--xl.fn__accept--proof { margin-top: 53px; }

@media (max-width: 480px) {
	.fn a.fn__accept  { padding: 15px 20px; width: 100%; }
	.fn a.fn__decline { padding: 10px 20px; }
}

/* The coaching video is widescreen and framed, unlike the vertical offer VSL. */
.fn__video--wide { max-width: 760px; }
.fn__video--wide video {
	aspect-ratio: 16/9; border: 7px solid #000; border-radius: 5px;
}

/* Two-column bands: testimonial pairs and image-beside-copy rows. */
.fn .fn__cols { display: flex; gap: 0; align-items: center; }
.fn .fn__cols > .wp-block-column { flex: 1 1 0; min-width: 0; }
@media (max-width: 767px) { .fn .fn__cols { flex-direction: column; } }

/* Accent colours used by the coaching offers, alongside the red. */
.fn .fn-green  { color: #009900; }
.fn .fn-purple { color: #6b4c9a; }

/* Offer-step body copy runs larger than the sales page. */
.fn-offer p { font-size: 1.25rem; }
.fn-offer li { font-size: 1.25rem; }

/*
 * Checkout.
 *
 * Its own skin again: Roboto throughout, black headings, and the reservation
 * timer beside the form. The two columns hold the form and the summary copy,
 * and stack on a phone with the form first.
 */
/* The checkout runs wider than the reading column of the funnel: the original
   sits on a 1080px stage with two ~520px columns, not the 848px article width. */
/* The template wraps content in .fn__wrap and the checkout content opens with
   its own .fn__wrap div, so the side padding was applied twice -- squeezing the
   banner to 311px on a 375px screen where the original runs 355px. Collapse the
   inner one and size the stage so both ends land on the original's numbers:
   1080px of content on desktop, 355px on a phone. */
.fn-checkout { --fn-width: 1112px; }
.fn-checkout .fn__wrap .fn__wrap { padding-inline: 0; max-width: none; }
@media (max-width: 640px) {
	.fn-checkout .fn__wrap { padding-inline: 10px; }
}
.fn-checkout { font-family: "Roboto", var(--fn-sans); color: #000; }
.fn-checkout h2 { font-family: "Roboto", var(--fn-sans); font-weight: 700; color: #000; }

/* The checkout plugin left-aligns headings inside its columns with an
 * !important rule. Only the page's own headings are taken back -- the
 * form's own headings ("Order summary", "Payment method") stay left. */
.fn-checkout .fn__reserve,
.fn-checkout .fn__secure,
.fn-checkout .fn__about { text-align: center !important; }
.fn-checkout .fn__reserve { font-size: 1.5rem; margin: 0; }
/* "Secure Checkout" sits on a grey band across the stage, with a padlock ahead
   of it -- measured off the original: #e3e3e7, 26px/700, 55px tall. */
.fn-checkout .fn__secure {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4em;
	background: #e3e3e7;
	margin: 1em 0 1.4em;
	padding: 12px 16px;
	font-size: 1.625rem;
	font-weight: 700;
	line-height: 1.2;
}
.fn-checkout .fn__secure::before {
	content: "";
	flex: 0 0 auto;
	width: .8em;
	height: .8em;
	background-color: currentColor;
	-webkit-mask: var(--fn-lock) center / contain no-repeat;
	mask: var(--fn-lock) center / contain no-repeat;
}
@media (max-width: 640px) {
	.fn-checkout .fn__secure { font-size: 1.25rem; padding: 10px 14px; }
	.fn-checkout .fn__reserve { font-size: 1.25rem; }
}
.fn-checkout .fn__about  { font-size: 1.875rem; }

.fn__logo { text-align: center; margin: 1.2em auto; }
.fn__logo img { display: block; max-width: 220px; height: auto; margin-inline: auto; }

.fn__timerbar { align-items: center; gap: 12px; }
.fn__timer .olt-row { display: flex; justify-content: center; gap: 14px; }
.fn__timer .olt { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.fn__timer .count { font-size: 1.875rem; font-weight: 700; color: var(--fn-red); }
.fn__timer .label { font-size: 1rem; font-weight: 300; color: #000; }

/* The benefit list uses a green tick rather than a webfont icon. */
.fn__checks { list-style: none; padding-left: 0; margin-left: 0; }
.fn__checks li { position: relative; padding-left: 1.9em; margin-bottom: 20px; }
/* A bare ✓ glyph read as a stray tick; the original uses a filled disc with the
   check knocked out of it, which is the mask already defined for .fn li. */
.fn__checks li::before {
	content: ""; position: absolute; left: 0; top: .15em;
	width: 1.2em; height: 1.2em;
	background-color: #16a34a;
	-webkit-mask: var(--fn-check) center / contain no-repeat;
	mask: var(--fn-check) center / contain no-repeat;
}

.fn__checkout-cols { gap: 38px; align-items: flex-start; }
@media (max-width: 860px) {
	.fn__checkout-cols { flex-direction: column; }
	.fn__timerbar { flex-direction: column; gap: 4px; }
}

/*
 * Full-width colour bands.
 *
 * The sales page is built from stacked sections that alternate between white
 * and a pale tint, with one warm block for the bonuses and a dark footer. The
 * band spans the viewport while its contents stay in the reading column.
 */
.fn-banded .fn__wrap { max-width: none; padding: 0; }

.fn__band { padding: 20px 20px 30px; }
/* The original sets a width per block rather than running one reading column
   down the page: most lines sit in 848px, but several sit in 731, 789 or 672,
   and the footer runs wider at 1033. --w / --wm carry that per block. */
.fn__band > * {
	max-width: var(--w, var(--fn-width));
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 767px) {
	.fn__band > [style*="--wm:"] { max-width: var(--wm); }
}
.fn__band--pb20 { padding-bottom: 20px; }
.fn__band--pb60 { padding-bottom: 60px; }
/* The 2px border is drawn inside the band's own box, so its side padding is
   18px, not 20px -- otherwise the reading column loses 4px and paragraphs wrap
   a line early on a phone. */
.fn__band--tint { background: #f7fafc; border: 2px solid #e9eef2; }
/* Scoped one level deeper than `.fn__band`, or the responsive padding further
   down the file sets 20px back and the phone loses the 4px again. */
.fn .fn__band--tint { padding-left: 18px; padding-right: 18px; }
.fn__band--warm { background: #fffbea; }
.fn__band--dark {
	background: #0e100f;
	color: #999;
	padding: 28px 16px;
	font-size: .95rem;
}
/* The footer runs wider than the reading bands -- 370px on a phone -- so its
   side padding has to outrank the shared responsive padding further down. */
.fn .fn__band--dark { padding-left: 10px; padding-right: 10px; }
.fn__band--dark a { color: #999; }
.fn__band--dark h1, .fn__band--dark h2, .fn__band--dark h3 { color: #fff; }

/* The first band carries the headline and needs no extra lead-in space. */
.fn__band:first-child > *:first-child { margin-top: 0; }
/* The original opens on 50px of clear space at both breakpoints; the band's
   own 20px padding is the rhythm between bands, not the page's lead-in. */
.fn-banded .fn__band:first-child { padding-top: 50px; }

/* The short centred rule the page uses to break up the opening. */
.fn .fn__rule {
	width: 212px; height: 0; margin: 20px auto;
	border: 0; border-top: 1px solid #000;
}

/*
 * FAQ.
 *
 * Rebuilt on <details>/<summary>, so opening an answer needs no JavaScript at
 * all -- the browser does it.
 */
/* Measured off the original's accordion: a 854px stack of 62px rows, each a
   1px #e9eef2 outline around a #f7fafc head of 15px padding and a 20px/700
   line on a 30px leading, with 10px between rows. */
.fn__faq { max-width: 854px; margin: 45px auto 0; }
.fn__faq details {
	background: transparent;
	border: 1px solid #e9eef2;
	border-radius: 10px;
	margin-bottom: 10px;
	padding: 0;
	overflow: hidden;
}
.fn__faq summary {
	display: flex; justify-content: space-between; align-items: center; gap: 14px;
	padding: 15px; cursor: pointer; list-style: none;
	background: #f7fafc; border-radius: 10px;
	font-family: var(--fn-sans); font-size: 20px; font-weight: 700; color: #000;
	line-height: 30px; text-align: left;
}
.fn__faq summary::-webkit-details-marker { display: none; }
.fn__faq summary::after {
	content: ""; flex: 0 0 auto; width: 12px; height: 12px;
	border-right: 2px solid #55606a; border-bottom: 2px solid #55606a;
	transform: rotate(45deg) translate(-2px, -2px);
}
.fn__faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fn__faq p { font-size: 17px; color: #000; margin: 0; padding: 15px; }
/* The original's question drops to 15px on a phone, giving a 77px row. */
@media (max-width: 767px) {
	.fn__faq summary { font-size: 15px; line-height: 22.5px; }
}

/*
 * Per-line type.
 *
 * Each heading and lead line carries the size measured off the original as
 * --h. The min() caps it against the viewport, so the 46px line still fits a
 * phone without a media query per size.
 */
.fn .fn-h {
	font-family: var(--fn-serif);
	font-size: var(--h, 30px);
	font-weight: var(--hw, 400);
	line-height: var(--hl, 1.5);
	color: var(--hc, var(--fn-text));
	margin: 40px 0 30px;
	text-align: center;
}
/* Two headings stacked read as one title block in the original. */
.fn .fn-h + .fn-h { margin-top: 10px; }
.fn .fn-h--sans { font-family: var(--fn-sans); }
.fn .fn-c { text-align: center; }
/* .fn-left has to outrank the centred default on a sized line. */
.fn .fn-h.fn-left, .fn .fn-t.fn-left { text-align: left; }

/* Accent colours must outrank the per-line type rules above. */
.fn .fn-h.fn-red, .fn .fn-t.fn-red { color: var(--fn-red); }
.fn .fn-h.fn-green, .fn .fn-t.fn-green { color: #009900; }
.fn .fn-h.fn-purple, .fn .fn-t.fn-purple { color: #6b4c9a; }
.fn .fn-h.fn-fine, .fn .fn-t.fn-fine { color: #b0b0b0; }
.fn .fn-t {
	font-family: var(--fn-sans);
	font-size: var(--h, 19px);
	font-weight: var(--hw, 400);
	line-height: var(--hl, 1.5);
	color: var(--hc, var(--fn-text));
	text-align: center;
}
.fn .fn-t--serif { font-family: var(--fn-serif); }
.fn .fn-t { margin: 25px 0; }
/* a label sitting directly on the line below it, as in the bonus cards */
.fn .fn-t--tight { margin-bottom: 0; }
.fn .fn-t--tight + .fn-t { margin-top: 0; }
.fn__band--dark .fn-t { margin: 15px 0 0; color: inherit; }

/* Below the original's 768px breakpoint every sized line drops to its own
   mobile size; --hm carries it, and falls back to the desktop value. */
@media (max-width: 767px) {
	.fn .fn-h, .fn .fn-t { font-size: var(--hm, var(--h, 30px)); }
}

/* `.fn .fn-h` and `.fn .fn-t` above set a `margin` shorthand, which resets the
   `auto` side margins that `.fn__band > *` relies on to hold the reading
   column in the middle of a full-width band. Both are (0,2,0), so the later
   one won and every sized line rendered flush against the band's left padding.
   Restoring only the inline margins here keeps the vertical rhythm untouched.
   Must stay after the two rules above. */
.fn .fn__band > * { margin-inline: auto; }

/*
 * Boxes.
 *
 * The callouts, the five bonus cards and the guarantee block are containers
 * that draw a border in the source. Each carries its own border, fill, radius
 * and padding as custom properties, so one rule covers all of them.
 */
.fn .fn__box {
	max-width: var(--bmw, 878px);
	margin: 0 auto;
	padding: var(--bp, 20px);
	border: var(--bw, 2px) var(--bs, solid) var(--bc, #e0cb67);
	border-radius: var(--br, 10px);
	background: var(--bbg, transparent);
}

/* The original tops the bonus copy just under the cover, not centred on it. */
.fn .fn__box--bonus .wp-block-columns { align-items: flex-start; }
/* Both bonus columns carry 10px of their own padding in the original: a 320px
   cover column holds a 250px image, and the 397px copy column measures 377px
   of text. Without it the copy ran 20px wide and wrapped a line short. */
.fn .fn__box--bonus .wp-block-column { padding: 0 10px; }
@media (min-width: 768px) {
	.fn .fn__box--bonus .wp-block-column:not([style*="flex-basis"]) { padding-top: 20px; }
}
/* Once the bonus row stacks, the original gives the box 10px of padding and
   the column none, so the copy keeps a 326px measure instead of 290px and
   stops wrapping a line early. */
@media (max-width: 767px) {
	.fn .fn__box.fn__box--bonus { padding: 10px; }
	.fn .fn__box--bonus .wp-block-column { padding: 0; }
}
.fn .fn__box > *:first-child { margin-top: 0; }
.fn .fn__box > *:last-child { margin-bottom: 0; }

/*
 * Images keep the width the original gives them -- the seal is 120px, the
 * payment badge 300px, the photos beside copy about 320px. Without this they
 * all stretch to the width of the reading column.
 */
.fn .fn__img { margin: 0 auto; text-align: center; }
.fn .fn__img img { display: block; margin-inline: auto; max-width: 100%; height: auto; }
.fn .fn__img--sized img { width: var(--iw); }
@media (max-width: 767px) {
	.fn .fn__img--sized img { width: var(--iwm, var(--iw)); max-width: 100%; }
}

@media (max-width: 767px) {
	/* A thick border is drawn inside the box, so a box that carries one needs
	   less padding to keep the same measure. --bpm carries it per box. */
	.fn .fn__box { padding: var(--bpm, 18px); }
	.fn__band { padding-left: 20px; padding-right: 20px; }
}

/* ===========================================================================
 * Interaction refinements (Apple fluid-interface review).
 *
 * Deliberately NOT here: heading leading/tracking, and a resting shadow on the
 * buy button. Both were measured off the original page -- headings there run at
 * line-height 1.5 with normal tracking, and the button carries no shadow -- so
 * changing them would break the visual match the sales page is held to.
 * ======================================================================== */

/* ------------------------------------------------------- press feedback ---
 * Hover does not exist on a phone, so the offer buttons previously gave no
 * response at all to a tap -- on the two pages where one tap charges a card.
 * Feedback belongs on press, and it is instant: no transition on transform.
 */
.fn a.fn__accept:active,
.fn a.fn__decline:active,
.fn .fn__skip:active,
.fn a.wfocu_skip_offer:active {
	transform: translateY(1px);
}
.fn a.fn__accept:active { filter: brightness(.95); }

/* --------------------------------------------------------- focus ring ---
 * Nothing in the funnel showed a focus state, so a keyboard user could not
 * tell where they were -- including on the checkout. Only keyboard focus is
 * styled, so a mouse press stays clean.
 */
.fn a:focus-visible,
.fn button:focus-visible,
.fn summary:focus-visible {
	outline: 3px solid #0b63ce;
	outline-offset: 2px;
	border-radius: 4px;
}
/* The blue disappears on the dark band; the accent carries the contrast. */
.fn__band--dark a:focus-visible,
.fn__band--dark button:focus-visible,
.fn__band--dark summary:focus-visible {
	outline-color: var(--fn-accent);
}

/* ------------------------------------------------------ touch targets ---
 * 44px is the smallest comfortable target; the decline button measured 40px.
 * The embedded checkout is left entirely to FunnelKit's own styling.
 */
.fn a.fn__decline,
.fn .fn__skip {
	min-height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ----------------------------------------------------------------- faq ---
 * The chevron flipped with no transition, so nothing signalled that a panel
 * was opening. Short, and it points where the panel is going.
 */
.fn__faq summary::after { transition: transform .2s ease; }
.fn__faq details[open] > *:not(summary) { animation: fn-in .25s ease both; }

/* ------------------------------------------------------ reduced motion ---
 * Replaces the blanket "no transitions, no animations". Reduced motion asks
 * for a gentler equivalent, not the loss of all feedback: durations collapse,
 * but states still change and the press response survives.
 */
@media (prefers-reduced-motion: reduce) {
	.fn *, .fn *::before, .fn *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.fn__gated.is-revealed { animation: fn-fade .2s ease both !important; }
}
@keyframes fn-fade { from { opacity: 0; } to { opacity: 1; } }

/* The gateway renders its card marks at 30px, which crowds the radio next to
   them; the original sets them smaller. */
/* ONLY the card-brand marks, which the gateway groups in .fkwcs_stripe_icons.
   Scoped tightly on purpose: an earlier, broader version also caught the Google
   Pay and Apple Pay button graphics and squashed them to 22px. */
.fn #wfacp-e-form li.wc_payment_method .fkwcs_stripe_icons img,
.fn .wfacp_main_wrapper li.wc_payment_method .fkwcs_stripe_icons img {
	height: 22px !important;
	width: auto !important;
}

/* The wallet marks are sized by the gateway's own stylesheet at width:56px, but
   the reset above outranks it and width:auto collapses those SVGs to nothing --
   which is why the Google Pay mark vanished. Hand its value back. */
.fn #wfacp-e-form .fkwcs_stripe_gpay_icons img,
.fn #wfacp-e-form .fkwcs_stripe_apple_pay_icon,
.fn .wfacp_main_wrapper .fkwcs_stripe_gpay_icons img,
.fn .wfacp_main_wrapper .fkwcs_stripe_apple_pay_icon {
	width: 56px;
	height: auto;
}


/* ===========================================================================
 * Vertical rhythm.
 *
 * Every gap on the reference page is measured and written into the markup as
 * --mt (desktop) and --mtm (phone). Rhythm runs on top margins only, so one
 * gap is one value and nothing collapses in from the block above.
 * ======================================================================== */
/* Nothing carries a bottom margin: a gap is the top margin of the block below. */
.fn p, .fn h2, .fn figure, .fn .fn-h, .fn .fn-t, .fn .fn__img,
.fn .fn__box, .fn .wp-block-columns, .fn .fn__cta { margin-bottom: 0; }
/* A column with an explicit width must not also grow. WordPress used to say
   so in its own columns stylesheet, which no longer loads now that the page
   is raw HTML, so the rule has to live here -- and after the rule that gives
   every column flex-grow:1. */
.fn .fn__cols > .wp-block-column[style*="flex-basis"],
.fn .wp-block-column[style*="flex-basis"] { flex-grow: 0; flex-shrink: 0; }

.fn [style*="--mt:"] { margin-top: var(--mt); }
.fn .wp-block-column > *:first-child { margin-top: 0; }
@media (max-width: 767px) {
	.fn [style*="--mtm:"] { margin-top: var(--mtm); }
	/* a stacked row separates its two columns with the original's own gap */
	.fn .wp-block-columns { flex-direction: column; row-gap: var(--cgm, 30px); }
	/* rows the original flips on a phone, so the photo leads */
	.fn .fn__cols--rev { flex-direction: column-reverse; }
}

/* 1-on-1 coaching offer. */
.fn.page-id-225 {
	--fn-width: 972px;
	font-family: "Noto Sans", var(--fn-sans);
	font-size: 20px;
	line-height: 1.3;
}
.fn.page-id-225 > .fn__wrap { padding-top: 40px; }
.fn.page-id-225 p { font-size: 20px; line-height: 1.3; }
.fn.page-id-225 .fn-coaching-hero { width: 789px; max-width: 100%; margin-inline: auto; }
.fn.page-id-225 .fn-coaching-lead {
	position: relative;
	left: 50%;
	width: min(1150px, calc(100vw - 50px));
	font-size: 30px;
	line-height: 1.3;
	text-align: center;
	transform: translateX(-50%);
}
.fn.page-id-225 .fn-h-lg.fn-red {
	font-family: "Noto Serif", var(--fn-serif);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
}
.fn.page-id-225 .fn-h-lg.fn-purple { font-family: "Noto Serif", var(--fn-serif); font-size: 36px; line-height: 1.3; }
.fn.page-id-225 .fn-h-xl.fn-red { font-size: 40px; font-weight: 400; line-height: 1.3; }
.fn.page-id-225 .fn-h-xl.fn-green { font-size: 44px; line-height: 1.3; }
.fn.page-id-225 .fn-h-lg.fn-green { font-size: 22px; line-height: 1.3; }
.fn.page-id-225 .fn-h-lg.fn-red.fn-coaching-section { width: 916px; max-width: 100%; margin-inline: auto; font-size: 40px; }
.fn.page-id-225 .fn-h-lg.fn-red.fn-coaching-ready { width: 951px; max-width: calc(100vw - 40px); margin-inline: auto; font-size: 36px; text-align: center; }
.fn.page-id-225 .fn-h-lg.fn-red.fn-coaching-center { text-align: center; }
.fn.page-id-225 .fn-coaching-card-title { font-size: 24px; line-height: 1.3; text-align: left; }
.fn.page-id-225 .fn-coaching-click { font-size: 30px; line-height: 1.3; text-align: center; }
.fn.page-id-225 .fn__agreement { width: 907px; max-width: none; margin-left: 38px; font-size: 22px; }
.fn.page-id-225 .fn-coaching-proof-lead { font-size: 18px; line-height: 1.3; text-align: center; }

.fn.page-id-225 .fn__video--wide {
	position: relative;
	left: 50%;
	width: min(975px, calc(100vw - 50px));
	max-width: none;
	margin: 20px auto 40px;
	padding: 17px;
	background: #000;
	transform: translateX(-50%);
}
.fn.page-id-225 .fn__video--wide video { aspect-ratio: 16 / 9; border: 0; border-radius: 0; }

.fn.page-id-225 .fn__guide-grid {
	position: relative;
	margin-inline: 5px;
	min-height: 360px;
	padding-right: 291px;
}
.fn.page-id-225 .fn__guide-grid .fn__portrait--desktop {
	position: absolute;
	top: -20px;
	right: 0;
	margin: 0;
}
.fn.page-id-225 .fn__portrait img { width: 271px; height: auto; }
.fn.page-id-225 .fn__portrait--mobile { display: none; }

.fn.page-id-225 .fn__offer-panel {
	position: relative;
	left: 50%;
	width: 100vw;
	background: #f3f5f7;
	transform: translateX(-50%);
}
.fn.page-id-225 .fn__offer-panel > * { width: 940px; max-width: calc(100vw - 40px); margin-inline: auto; }
.fn.page-id-225 .fn__offer-panel--wide > * { width: 951px; }
.fn.page-id-225 a.fn__accept--xl {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 343px;
	height: 98px;
	margin-top: 20px;
	padding: 16px 40px;
	font-size: 34px;
	line-height: normal;
}
.fn.page-id-225 a.fn__accept--xl .fn__accept-sub { margin-top: 0; font-size: 16px; line-height: normal; }
/* The only figure inside an offer panel is the card-trust badge, which the
   original renders 300x66 at every width. */
/* The trust badge is 300px inside a 940px panel, so it needs its own auto
   margins -- without them it sat against the panel's left edge. */
.fn.page-id-225 .fn__offer-panel figure img { width: 300px; height: auto; margin-inline: auto; }
.fn.page-id-225 a.fn__decline { width: 279px; margin-top: 20px; margin-bottom: 0; padding-inline: 10px; }
.fn.page-id-225 a.fn__accept--proof { margin-top: 20px; }
.fn.page-id-225 a.fn__decline--proof { margin-top: 10px; }

.fn.page-id-225 .fn__steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	width: 896px;
	max-width: 100%;
}
.fn.page-id-225 .fn__step-card {
	padding: 10px;
	background: #f4f6f8;
	border: 1px solid #dce1e5;
}
.fn.page-id-225 .fn__step-card p { margin-top: 0; font-size: 19px; line-height: 1.3; }
.fn.page-id-225 .fn__step-card .fn__step-image { margin-top: 22px; }
.fn.page-id-225 .fn__step-card s.fn-hl { text-decoration: none; }
.fn.page-id-225 .fn__step-card img { width: 100%; border-radius: 0; }

.fn.page-id-225 .fn__guarantees {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
	width: 920px;
	max-width: 100%;
	/* The row also carries .fn__cols, whose align-items:center applies to a
	   grid too, so the shorter card floated down half the row and its heading
	   no longer lined up with its neighbour. The original tops them out. */
	align-items: start;
}
.fn.page-id-225 .fn__guarantee-card {
	padding: 20px;
	background: #f4f6f8;
	border: 1px solid #dce1e5;
}

.fn.page-id-225 .fn__signature { text-align: left; }
.fn.page-id-225 .fn__signature span { font-family: "Dancing Script", cursive; font-weight: 400; }

.fn.page-id-225 .fn__testimonials {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 50px;
	width: 910px;
	max-width: 100%;
}
.fn.page-id-225 .fn__testimonial-card {
	min-height: 105px;
	padding: 20px 10px 17px;
	background: #fff;
	border: 0;
	outline: 1px solid #ddd;
	border-radius: 10px;
	box-shadow: 0 2px 12px rgb(0 0 0 / 18%);
}
.fn.page-id-225 .fn__testimonial-card p { margin-top: 0; font-size: 22px; line-height: 1.3; }
.fn.page-id-225 .fn__testimonial-dot { width: 410px; margin-top: var(--mt, 29px); margin-inline: auto; }
.fn.page-id-225 .fn__testimonial-dot img { width: 410px; height: auto; border-radius: 0; }

.fn.page-id-225 .fn__dark-footer {
	position: relative;
	left: 50%;
	width: 100vw;
	padding: 30px 10px 33px;
	background: #0e100f;
	transform: translateX(-50%);
}
.fn.page-id-225 .fn__footer-logo { margin-inline: auto; }
.fn.page-id-225 .fn__footer-logo img { width: 120px; height: 40px; margin-inline: auto; }
.fn.page-id-225 .fn-fine--wide {
	position: relative;
	left: 50%;
	width: min(1033px, calc(100vw - 20px));
	max-width: none;
	transform: translateX(-50%);
}
.fn.page-id-225 .fn-fine--compact { letter-spacing: -.7px; }
.fn.page-id-225 p.fn-fine { font-size: var(--h); line-height: var(--hl); }
.fn.page-id-225 .fn-h-xl.fn-red s { display: block; width: 100%; text-align: center; }

@media (min-width: 768px) and (max-width: 991px) {
	.fn.page-id-225 > .fn__wrap { padding-inline: 10px; }
	.fn.page-id-225 .fn-coaching-hero { width: calc(70vw - 30px); }
	.fn.page-id-225 .fn-coaching-lead { width: calc(100vw - 20px); }
	.fn.page-id-225 .fn__video--wide { width: calc(85vw - 20px); }
	.fn.page-id-225 .fn__guide-grid {
		width: 100vw;
		min-height: 423px;
		margin-inline: -10px;
		padding: 10px calc(30vw + 17px) 10px 15px;
	}
	.fn.page-id-225 .fn__guide-grid .fn__portrait--desktop { top: 0; right: 15px; }
	.fn.page-id-225 .fn__guide-grid > .fn-h-lg { margin-top: 10px; }
	.fn.page-id-225 .fn__guide-grid + .fn-h-lg { margin-top: 30px; }
	.fn.page-id-225 .fn__portrait img { width: calc(30vw - 18px); }
	.fn.page-id-225 .fn-h-lg.fn-red.fn-coaching-section,
	.fn.page-id-225 .fn__steps { width: calc(80vw - 20px); }
	.fn.page-id-225 .fn__steps { gap: 20px; margin-top: 41px; }
	.fn.page-id-225 .fn__step-card { min-height: 419px; padding: 20px; }
	.fn.page-id-225 .fn__steps + .fn-coaching-section { margin-top: 78px; }
	.fn.page-id-225 .fn__guarantees { width: calc(82vw - 20px); gap: 20px; }
	.fn.page-id-225 .fn__guarantees { align-items: stretch; margin-top: 30px; }
	.fn.page-id-225 .fn__guarantees + .fn__guarantees { margin-top: 21px; }
	.fn.page-id-225 .fn__guarantee-card {
		display: flex;
		min-height: 378px;
		flex-direction: column;
		justify-content: center;
		padding: 20px 30px;
	}
	.fn.page-id-225 .fn__guarantees + .fn__guarantees .fn__guarantee-card { min-height: 326px; }
	.fn.page-id-225 .fn-coaching-section + .fn__guarantees > .fn__guarantee-card:nth-child(2) > *,
	.fn.page-id-225 .fn__guarantees + .fn__guarantees > .fn__guarantee-card:first-child > * { transform: translateY(-11px); }
	.fn.page-id-225 .fn__offer-panel:not(.fn__offer-panel--wide) > * { width: calc(100vw - 20px); max-width: none; }
	.fn.page-id-225 .fn__offer-panel:not(.fn__offer-panel--wide) > .fn__accept { width: 343px; }
	.fn.page-id-225 .fn__offer-panel:not(.fn__offer-panel--wide) > .fn__decline { width: 279px; }
	.fn.page-id-225 .fn-h-lg.fn-red.fn-coaching-ready,
	.fn.page-id-225 .fn-coaching-click,
	.fn.page-id-225 .fn__offer-panel--wide > * { width: calc(83vw - 20px); max-width: none; margin-inline: auto; }
	.fn.page-id-225 .fn__agreement {
		width: calc(83vw - 64px);
		margin-left: calc(8.5vw + 44px);
	}
	.fn.page-id-225 .fn-h-lg.fn-red.fn-coaching-ready { margin-top: 90px; }
	.fn.page-id-225 .fn__offer-panel--wide > .fn__decline { margin-top: 23px; }
	.fn.page-id-225 .fn-coaching-proof-lead { width: calc(80vw - 20px); margin-inline: auto; }
	.fn.page-id-225 .fn__testimonials { width: calc(82vw - 30px); gap: 30px; margin-top: calc(var(--mt) + 9px); }
	.fn.page-id-225 .fn-coaching-proof-lead + .fn__testimonials { margin-top: calc(var(--mt) + 12px); }
	.fn.page-id-225 .fn__testimonial-card { padding: 10px 20px 20px; }
	.fn.page-id-225 .fn__testimonial-dot,
	.fn.page-id-225 .fn__testimonial-dot img { width: calc(41vw - 70px); }
	.fn.page-id-225 .fn-fine--wide { width: calc(90vw - 20px); }
}

@media (max-width: 767px) {
	.fn.page-id-225 > .fn__wrap { padding: 30px 20px 0; }
	.fn.page-id-225 .fn-coaching-hero { left: 5px; width: 330px; }
	.fn.page-id-225 .fn-coaching-lead { left: calc(50% + 5px); width: 340px; font-size: 22px; }
	.fn.page-id-225 .fn-h-lg.fn-red { font-size: 26px; }
	.fn.page-id-225 .fn-h-lg.fn-purple { font-size: 30px; }
	.fn.page-id-225 .fn-h-xl.fn-red { font-size: 34px; }
	.fn.page-id-225 .fn-h-xl.fn-green { font-size: 40px; }
	.fn.page-id-225 .fn-h-lg.fn-green { font-size: 20px; }
	.fn.page-id-225 .fn-h-lg.fn-red.fn-coaching-section,
	.fn.page-id-225 .fn-h-lg.fn-red.fn-coaching-ready { font-size: 26px; }
	.fn.page-id-225 .fn-coaching-card-title { font-size: 24px; }
	.fn.page-id-225 .fn-coaching-click { font-size: 22px; }
	.fn.page-id-225 .fn__agreement { width: 310px; margin-left: 40px; font-size: 20px; }
	.fn.page-id-225 .fn__video--wide { width: 340px; margin-bottom: 30px; }
	.fn.page-id-225 .fn__guide-grid { margin-inline: 0; }
	.fn.page-id-225 .fn__guide-grid { min-height: 0; padding-right: 0; }
	.fn.page-id-225 .fn__portrait img { width: 200px; margin-inline: auto; }
	.fn.page-id-225 .fn__portrait--mobile { display: block; }
	.fn.page-id-225 .fn__portrait--desktop { display: none; }
	.fn.page-id-225 a.fn__accept--xl { width: 343px; height: 85px; padding: 16px 40px; font-size: 24px; }
	.fn.page-id-225 .fn__steps,
	.fn.page-id-225 .fn__guarantees,
	.fn.page-id-225 .fn__testimonials { grid-template-columns: 1fr; width: 330px; }
	.fn.page-id-225 .fn__steps { gap: 49px; }
	.fn.page-id-225 .fn__step-card .fn__step-image { margin-top: 22px; }
	.fn.page-id-225 .fn__guarantees { gap: var(--cgm, 30px); }
	.fn.page-id-225 .fn__testimonials { width: 350px; gap: var(--cgm, 29px); }
	.fn.page-id-225 .fn__step-card,
	.fn.page-id-225 .fn__guarantee-card { padding: 10px; }
	.fn.page-id-225 .fn__testimonial-card p { font-size: 20px; }
	.fn.page-id-225 .fn__testimonial-dot,
	.fn.page-id-225 .fn__testimonial-dot img { width: 330px; }
	.fn.page-id-225 p.fn-fine { font-size: var(--hm); }
}

/* $1 coaching trial downsell. */
.fn.page-id-227 {
	--fn-width: 972px;
	color: #000;
	font-family: "Noto Sans", var(--fn-sans);
	font-size: 20px;
	line-height: 1.5;
}
.fn.page-id-227 > .fn__wrap { padding-top: 40px; }
.fn.page-id-227 p { font-size: 20px; line-height: 1.5; }
.fn.page-id-227 .fn-h-lg.fn-red {
	font-family: "Noto Serif", var(--fn-serif);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}
.fn.page-id-227 p,
.fn.page-id-227 .fn-h-lg.fn-red {
	overflow-wrap: break-word;
	word-break: break-word;
}
.fn.page-id-227 .fn-h-lg.fn-red.fn-ds-large { font-size: 36px; }
.fn.page-id-227 .fn-ds-wide {
	position: relative;
	left: 50%;
	width: min(951px, calc(100vw - 40px));
	max-width: none;
	transform: translateX(-50%);
}
.fn.page-id-227 a.fn__accept--ds2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 558.227px;
	max-width: 100%;
	height: 94px;
	margin-top: 30px;
	padding: 16px 40px;
	font-size: 30px;
	line-height: normal;
	border: 1px solid #fff;
}
.fn.page-id-227 a.fn__accept--ds2 .fn__accept-sub {
	margin-top: 0;
	font-size: 16px;
	line-height: normal;
}
/* Top margins only: the badge's own bottom margin was collapsing over the
   skip link's and holding the pair 16px apart too far. */
.fn.page-id-227 .fn__trust--ds2 { width: 300px; margin-inline: auto; margin-bottom: 0; }
.fn.page-id-227 .fn__trust--ds2 img { width: 300px; height: auto; border-radius: 0; }
.fn.page-id-227 a.fn__skip--ds2 {
	position: relative;
	display: block;
	left: 50%;
	width: min(951px, calc(100vw - 40px));
	max-width: none;
	height: 23.4px;
	min-height: 0;
	margin: 20px auto 0;
	font-size: 18px;
	line-height: 23.4px;
	color: rgb(0 0 0 / 50%);
	text-align: center;
	transform: translateX(-50%);
}
.fn.page-id-227 a.fn__skip--ds2::before {
	content: "";
	position: absolute;
	inset: -10px 0;
}
.fn.page-id-227 .fn__dark-footer {
	position: relative;
	left: 50%;
	width: 100vw;
	padding: 30px 10px 33px;
	background: #0e100f;
	transform: translateX(-50%);
}
.fn.page-id-227 .fn__footer-logo { margin-inline: auto; }
.fn.page-id-227 .fn__footer-logo img { width: 120px; height: 40px; margin-inline: auto; }
.fn.page-id-227 .fn-fine--wide {
	position: relative;
	left: 50%;
	width: min(1033px, calc(100vw - 20px));
	max-width: none;
	transform: translateX(-50%);
}
.fn.page-id-227 .fn-fine--compact { letter-spacing: -.7px; }
.fn.page-id-227 p.fn-fine { font-size: var(--h); line-height: var(--hl); }

@media (max-width: 767px) {
	.fn.page-id-227 > .fn__wrap { padding: 30px 20px 0; }
	.fn.page-id-227 .fn-h-lg.fn-red,
	.fn.page-id-227 .fn-h-lg.fn-red.fn-ds-large { font-size: 26px; }
	.fn.page-id-227 a.fn__accept--ds2 { width: 350px; height: 161px; font-size: 24px; }
	.fn.page-id-227 .fn__trust--ds2 { width: 300px; }
	.fn.page-id-227 .fn__trust--ds2 img { width: 300px; }
	.fn.page-id-227 p.fn-fine { font-size: var(--hm); }
}

/* Order confirmation. */
.fn.postid-436 {
	--fn-width: 1120px;
	background: linear-gradient(#f1f4f8 900px, #fff 900px);
	font-family: "Open Sans", var(--fn-sans);
	font-size: 20px;
	line-height: 1.3;
}
.fn.postid-436 > .fn__wrap { max-width: 1120px; padding: 0; }
.fn.postid-436 .fn-ty-header {
	position: relative;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100px;
	background: #1b191d;
	transform: translateX(-50%);
}
.fn.postid-436 .fn-ty-logo,
.fn.postid-436 .fn-ty-footer-logo { margin: 0; }
.fn.postid-436 .fn-ty-logo img { width: 150px; height: 50px; border-radius: 0; object-fit: cover; }
.fn.postid-436 .fn-ty-card {
	padding: 20px 30px 40px;
	background: #fff;
	box-shadow: 0 5px 10px silver;
}
.fn.postid-436 .fn-ty-kicker,
.fn.postid-436 .fn-ty-title,
.fn.postid-436 .fn-ty-lead {
	width: 924px;
	margin-inline: auto;
	text-align: center;
}
.fn.postid-436 .fn-ty-kicker { margin-top: 20px; font-size: 26px; line-height: 1.3; }
.fn.postid-436 .fn-ty-title { margin-top: 4px; font-size: 60px; line-height: 1.3; }
.fn.postid-436 .fn-ty-lead { margin-top: 10px; font-size: 26px; line-height: 1.3; }
.fn.postid-436 .fn-ty-panel { width: 1060px; margin-top: 30px; }
.fn.postid-436 .fn-ty-panel-head {
	min-height: 79px;
	padding: 20px 35px;
	background: #006376;
}
.fn.postid-436 .fn-ty-panel-title {
	margin: 0;
	color: #fff;
	font-family: "Open Sans", var(--fn-sans);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	text-align: left;
}
.fn.postid-436 .fn-ty-panel-body {
	padding: 33px 25px 30px;
	border: 3px solid #006376;
	border-top: 0;
}
.fn.postid-436 .fn-ty-panel-body p {
	margin: 0 0 26px;
	font-size: 20px;
	line-height: 1.3;
}
.fn.postid-436 .fn-ty-panel-body p:last-of-type { margin-bottom: 0; }
.fn.postid-436 .fn-ty-panel--bonus .fn-ty-panel-body { padding-bottom: 30px; }
.fn.postid-436 .fn-ty-cta {
	justify-content: flex-start;
	width: 422px;
	min-height: 54px;
	margin: 20px 0 0;
	padding: 15px 30px;
	background: #090;
	border: 1px solid #fff;
	color: #fff;
	font-size: 16px;
	font-family: "Open Sans", var(--fn-sans);
	font-weight: 400;
	line-height: normal;
}
.fn.postid-436 .fn-ty-cta span { font-size: 18px; font-weight: 700; }
.fn.postid-436 .fn-ty-footer {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-top: 60px;
	padding: 32px 10px 13px;
	background: #0e100f;
	color: #b0b0b0;
	transform: translateX(-50%);
}
.fn.postid-436 .fn-ty-footer-logo { width: 120px; margin-inline: auto; }
.fn.postid-436 .fn-ty-footer-logo img { width: 120px; height: 40px; border-radius: 0; object-fit: cover; }
.fn.postid-436 .fn-ty-footer p {
	width: min(1033px, calc(100vw - 20px));
	margin: 15px auto 0;
	color: #b0b0b0;
	font-size: 12px;
	font-family: "Open Sans", var(--fn-sans);
	line-height: 1.3;
	text-align: center;
}
.fn.postid-436 .fn-ty-footer p:first-of-type { font-size: 14px; }
.fn.postid-436 .fn-ty-footer a { color: #b0b0b0; }

@media (max-width: 767px) {
	.fn.postid-436 { background: #fff; }
	.fn.postid-436 > .fn__wrap { width: 100%; }
	.fn.postid-436 .fn-ty-card { padding: 20px 15px 40px; }
	.fn.postid-436 .fn-ty-kicker,
	.fn.postid-436 .fn-ty-title,
	.fn.postid-436 .fn-ty-lead { width: 340px; }
	.fn.postid-436 .fn-ty-kicker { margin-top: 19px; font-size: 22px; }
	.fn.postid-436 .fn-ty-title { margin-top: 5px; font-size: 30px; }
	.fn.postid-436 .fn-ty-lead { margin-top: 10px; font-size: 18px; }
	.fn.postid-436 .fn-ty-panel { width: 360px; }
	.fn.postid-436 .fn-ty-panel-head {
		min-height: 71px;
		padding: 20px 10px;
	}
	.fn.postid-436 .fn-ty-panel-title {
		font-size: 24px;
	}
	.fn.postid-436 .fn-ty-panel-body { padding: 33px 10px 30px; }
	.fn.postid-436 .fn-ty-panel-body p { margin-bottom: 23px; font-size: 18px; }
	.fn.postid-436 .fn-ty-cta { width: 315px; margin-top: 20px; padding-inline: 15px; justify-content: center; }
	.fn.postid-436 .fn-ty-cta span { font-size: 14px; }
	.fn.postid-436 .fn-ty-footer { padding-top: 32px; }
	.fn.postid-436 .fn-ty-footer p { font-size: 10px; }
	.fn.postid-436 .fn-ty-footer p:first-of-type { font-size: 10px; }
}

/* Main checkout shell. FunnelKit owns everything inside its form. */
.fn.postid-433 {
	--fn-width: 1112px;
	font-family: "Roboto", var(--fn-sans);
	color: #000;
}
.fn.postid-433 > .fn__wrap { padding-top: 0; }
.fn.postid-433 .fn__logo { margin: 0; }
.fn.postid-433 .fn__logo img {
	width: 1080px;
	max-width: 100%;
	margin-inline: auto;
	border-radius: 0;
}
.fn.postid-433 .fn__timerbar {
	width: 726px;
	height: 54px;
	margin: 5px auto 0;
	gap: 10px;
}
.fn.postid-433 .fn__timerbar > .wp-block-column { flex: 0 0 358px; }
.fn.postid-433 .fn__reserve {
	margin: 0;
	font-family: "Roboto", var(--fn-sans);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	transform: translateY(11px);
}
.fn.postid-433 .fn__timer { width: 358px; }
.fn.postid-433 .fn__timer .olt-row { gap: 30px; }
.fn.postid-433 .fn__timer .olt-row { height: 54px; }
.fn.postid-433 .fn__timer .count { font-size: 30px; line-height: 1; }
.fn.postid-433 .fn__timer .label { font-size: 16px; line-height: 1.1; }
.fn.postid-433 .fn__securebar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 55px;
	margin-top: 2px;
	background: #e3e3e7;
}
.fn.postid-433 .fn__securebar::before {
	content: "";
	position: absolute;
	left: calc(50% - 130px);
	width: 21px;
	height: 21px;
	margin-right: 10px;
	background: #000;
	-webkit-mask: var(--fn-lock) center / contain no-repeat;
	mask: var(--fn-lock) center / contain no-repeat;
}
.fn.postid-433 .fn__secure {
	display: block;
	width: 1060px;
	margin: 0;
	padding: 0;
	background: transparent;
	font-family: "Roboto", var(--fn-sans);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	transform: translateY(3px);
}
.fn.postid-433 .fn__secure::before { content: none; }
.fn.postid-433 .fn__checkout-cols {
	display: grid;
	grid-template-columns: 527px 463px;
	height: 932px;
	gap: 50px;
	margin-top: 43px;
	align-items: start;
}
.fn.postid-433 .fn__checkout-cols > .wp-block-column { width: 100%; }
.fn.postid-433 .fn__checkout-cols > .wp-block-column:last-child figure {
	width: 463px;
	margin: 0;
}
.fn.postid-433 .fn__checkout-cols > .wp-block-column:last-child figure + figure { margin-top: 30px; }
.fn.postid-433 .fn__checkout-cols > .wp-block-column:last-child img { width: 100%; border-radius: 0; }
.fn.postid-433 .fn__about {
	width: 483px;
	margin: 30px 0 0 -10px;
	font-family: "Roboto", var(--fn-sans);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}
.fn.postid-433 .fn__benefit {
	position: relative;
	width: 447px;
	margin: 20px 0 0 26px;
	font-size: 18px;
	line-height: 1.5;
}
.fn.postid-433 .fn__benefit::before {
	content: "";
	position: absolute;
	left: -26px;
	top: 4px;
	width: 18px;
	height: 18px;
	background: #16a34a;
	-webkit-mask: var(--fn-check) center / contain no-repeat;
	mask: var(--fn-check) center / contain no-repeat;
}
.fn.postid-433 .fn__legal-rule {
	width: 168px;
	margin: 80px auto 54px;
	border-top-color: #aaa;
}
.fn.postid-433 .fn__legal-rule--second { width: 70px; margin: 27px auto 23px; }
.fn.postid-433 p.fn-fine {
	width: 700px;
	margin: 0 auto;
	color: #8a8a8a;
	font-family: "Roboto", var(--fn-sans);
	font-size: 12px;
	line-height: 1.3;
}
.fn.postid-433 p.fn-fine + p.fn-fine { margin-top: 15px; }
.fn.postid-433 .fn__legal-rule--second + p.fn-fine { margin-top: 0; }
.fn.postid-433 p.fn-fine:last-of-type { margin-top: 10px; }
.fn.postid-433 p.fn-fine a { color: #8a8a8a; }

@media (max-width: 860px) {
	.fn.postid-433 > .fn__wrap { padding-inline: 10px; }
	.fn.postid-433 .fn__logo img { width: 370px; }
	.fn.postid-433 .fn__timerbar {
		flex-direction: column;
		flex-wrap: nowrap !important;
		width: 350px;
		height: 66px;
		margin-top: 5px;
		gap: 0;
	}
	.fn.postid-433 .fn__timerbar > .wp-block-column { flex: 0 0 auto !important; width: 350px; }
	.fn.postid-433 .fn__reserve { font-size: 18px; line-height: 1.3; transform: none; }
	.fn.postid-433 .fn__timer { width: 350px; }
	.fn.postid-433 .fn__timer .olt-row { height: 43px; }
	.fn.postid-433 .fn__timer .count { font-size: 20px; }
	.fn.postid-433 .fn__timer .label { font-size: 16px; }
	.fn.postid-433 .fn__securebar { height: 56px; margin-top: 0; }
	.fn.postid-433 .fn__secure { width: 350px; font-size: 20px; transform: translateY(1px); }
	.fn.postid-433 .fn__securebar::before { left: calc(50% - 105px); width: 18px; height: 18px; margin-right: 8px; }
	.fn.postid-433 .fn__checkout-cols {
		display: flex;
		flex-direction: column;
		height: auto;
		gap: 54px;
		margin-top: 20px;
	}
	.fn.postid-433 .fn__checkout-cols > .wp-block-column:last-child figure { width: 330px; margin-inline: auto; }
	.fn.postid-433 .fn__checkout-cols > .wp-block-column:last-child figure + figure { margin-top: 30px; }
	.fn.postid-433 .fn__about { width: 350px; margin: 29px auto 0; font-size: 25px; }
	.fn.postid-433 .fn__benefit { width: 316px; margin: 20px 0 0 44px; font-size: 17px; line-height: 1.5; }
	.fn.postid-433 .fn__benefit::before { left: -29px; top: 4px; width: 16px; height: 16px; }
	.fn.postid-433 .fn__legal-rule { width: 80px; margin: 80px auto 54px; }
	.fn.postid-433 .fn__legal-rule--second { width: 40px; margin: 27px auto 23px; }
	.fn.postid-433 p.fn-fine { width: 370px; font-size: 10px; line-height: 1.3; }
	.fn.postid-433 p.fn-fine + p.fn-fine { margin-top: 13px; }
	.fn.postid-433 p.fn-fine:last-of-type { margin-top: 10px; }
}

/* $67 Autonomous Man video upsell. */
.fn.page-id-222 {
	--fn-width: 1124px;
	font-family: "Open Sans", var(--fn-sans);
}
.fn.page-id-222 > .fn__wrap { padding-inline: 16px; }
.fn.page-id-222 .fn-oto3-title {
	margin: 40px 0 0;
	font-family: "Open Sans", var(--fn-sans);
	font-size: 44px;
	font-weight: 700;
	line-height: 1.3;
}
.fn.page-id-222 .fn-oto3-lead {
	margin: 10px 0 0;
	font-size: 30px;
	line-height: 1.3;
	text-align: center;
}
.fn.page-id-222 .fn__video--oto3 { width: 400px; max-width: calc(100vw - 50px); margin: 20px auto 0; }
.fn.page-id-222 .fn__video--oto3 video {
	width: 100%;
	height: 696px;
	aspect-ratio: auto;
	border: 10px solid #000;
	border-radius: 10px;
}
.fn.page-id-222 .fn__video--oto3 .fn__poke { display: none; }
.fn.page-id-222 .fn__gated.is-revealed { animation: fn-in .4s ease both; }
.fn.page-id-222 .fn-oto3-offer-title,
.fn.page-id-222 .fn-oto3-price {
	width: 916px;
	max-width: 100%;
	margin: 20px auto 0;
	font-family: "Open Sans", var(--fn-sans);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
}
.fn.page-id-222 .fn-oto3-product { width: 600px; margin: 20px auto 0; }
.fn.page-id-222 .fn-oto3-product img { width: 600px; border-radius: 0; }
.fn.page-id-222 .fn-oto3-price { margin-top: 10px; }
.fn.page-id-222 a.fn__accept {
	width: 440px;
	height: 99px;
	margin-top: 30px;
	border: 1px solid #fff;
	line-height: normal;
}
.fn.page-id-222 a.fn__accept .fn__accept-sub { font-size: 22px; line-height: normal; }
.fn.page-id-222 a.fn__decline {
	position: relative;
	width: 340px;
	min-height: 34px;
	height: 34px;
	margin: 10px auto 0;
	padding: 5px 40px;
	border: 1px solid #fff;
}
.fn.page-id-222 a.fn__decline::before { content: ""; position: absolute; inset: -5px 0; }
.fn.page-id-222 .fn-oto3-footer {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-top: 100px;
	padding: 30px 10px 13px;
	background: #0e100f;
	transform: translateX(-50%);
}
.fn.page-id-222 .fn-oto3-footer-logo { width: 120px; margin: 0 auto; }
.fn.page-id-222 .fn-oto3-footer-logo img { width: 120px; height: 40px; border-radius: 0; object-fit: cover; }
.fn.page-id-222 .fn-oto3-footer p.fn-fine {
	width: min(1033px, calc(100vw - 20px));
	margin: 14px auto 0;
	color: #b0b0b0;
	font-family: "Open Sans", var(--fn-sans);
	font-size: 12px;
	line-height: 1.3;
}
.fn.page-id-222 .fn-oto3-footer p.fn-fine:first-of-type { font-size: 14px; }
.fn.page-id-222 .fn-oto3-footer p.fn-fine + p.fn-fine { margin-top: 16px; }
.fn.page-id-222 .fn-oto3-footer p.fn-fine:last-of-type { margin-top: 15px; }

@media (max-width: 767px) {
	.fn.page-id-222 > .fn__wrap { padding-inline: 25px; }
	.fn.page-id-222 .fn-oto3-title { font-size: 22px; }
	.fn.page-id-222 .fn-oto3-lead { font-size: 18px; }
	.fn.page-id-222 .fn__video--oto3 video { height: 589px; }
	.fn.page-id-222 .fn-oto3-offer-title,
	.fn.page-id-222 .fn-oto3-price { width: 340px; font-size: 22px; }
	.fn.page-id-222 .fn-oto3-product { width: 320px; margin-top: 20px; }
	.fn.page-id-222 .fn-oto3-product img { width: 320px; }
	.fn.page-id-222 a.fn__accept { width: 276px; height: 71px; margin-top: 29px; font-size: 14px; }
	.fn.page-id-222 a.fn__accept .fn__accept-sub { font-size: 14px; }
	.fn.page-id-222 a.fn__decline { width: 278px; }
	.fn.page-id-222 .fn-oto3-footer { margin-top: 99px; }
	.fn.page-id-222 .fn-oto3-footer p.fn-fine { font-size: 10px; }
	.fn.page-id-222 .fn-oto3-footer p.fn-fine:first-of-type { margin-top: 15px; font-size: 10px; }
	.fn.page-id-222 .fn-oto3-footer p.fn-fine + p.fn-fine { margin-top: 15px; }
	.fn.page-id-222 .fn-oto3-footer p.fn-fine:last-of-type { margin-top: 13px; }
}