/* =====================================================================
   Shift4 Direct — standalone landing pages (/social, /aff)
   Loaded ONLY on page-social.php and page-aff.php.

   Every selector is prefixed `s4d-lp-` and every token is scoped to
   `.s4d-lp`. Nothing here can reach an existing page, and these pages
   deliberately do not inherit the site's chrome or palette: they are
   standalone paid-traffic destinations with their own design system,
   per the design handoff.
   ===================================================================== */

/* Manrope, self-hosted. The theme dropped Google Fonts in 1.0.3 for
   performance and to avoid a third-party request on every page; these pages
   follow that decision rather than the handoff's `link` to fonts.googleapis.
   Latin subset, variable weight 500–800, SIL Open Font License. */
@font-face {
	font-family: 'Manrope';
	src: url('../fonts/manrope.woff2') format('woff2');
	font-weight: 500 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
		U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
		U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.s4d-lp {
	--lp-navy: #0A1E46;
	--lp-deep: #071733;
	--lp-radial: #123468;
	--lp-blue: #0B5FFF;
	--lp-blue-dark: #0A57EB;
	--lp-sky: #8FB8FF;
	--lp-light: #F4F8FE;
	--lp-border: #DCE5F2;
	--lp-border-2: #E3EAF4;
	--lp-input: #C9D6E8;
	--lp-body: #44546B;
	--lp-muted: #6B7A93;
	--lp-muted-2: #8896AC;
	--lp-marquee: #93A2B8;
	--lp-dark-body: #B9C9E4;
	--lp-dark-border: #2A3F66;
	--lp-dark-muted: #7E90B4;
	--lp-dark-muted-2: #8FA5C9;
	--lp-success: #15A05A;
	--lp-maxw: 1360px;
	--lp-pad: 40px;

	margin: 0;
	font-family: 'Manrope', 'Segoe UI', Helvetica, Arial, sans-serif;
	color: var(--lp-navy);
	background: #fff;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.s4d-lp *, .s4d-lp *::before, .s4d-lp *::after { box-sizing: border-box; }
/* No `height: auto` in this reset. `.s4d-lp img` is specificity (0,1,1) and
   would beat every single-class image rule below — the nav logo rendered at
   full size because of exactly that. Aspect ratio is preserved per-image
   instead, where the rule can also be read. */
.s4d-lp img { max-width: 100%; display: block; }
.s4d-lp h1, .s4d-lp h2, .s4d-lp h3 { margin: 0; font-weight: 800; }
.s4d-lp p { margin: 0; }
/* Deliberately sets no colour. `.s4d-lp a` is specificity (0,1,1) and would
   beat every single-class button rule below: it painted `.s4d-lp-btn--primary`
   labels blue on a blue background, i.e. an invisible primary CTA. Link colour
   is set per-component instead. */
.s4d-lp a { text-decoration: none; }

.s4d-lp-sr {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.s4d-lp-skip:focus {
	position: fixed; top: 8px; left: 8px; z-index: 200; width: auto; height: auto;
	clip: auto; clip-path: none; background: var(--lp-navy); color: #fff;
	padding: 10px 16px; border-radius: 8px; font-weight: 800;
}

.s4d-lp-wrap { width: 100%; max-width: var(--lp-maxw); margin: 0 auto; padding: 0 var(--lp-pad); }
.s4d-lp-sec { padding: 52px 0; }

/* ------------------------------------------------------------------ */
/* Buttons                                                            */
/* ------------------------------------------------------------------ */
.s4d-lp-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	font-family: inherit; font-weight: 800; font-size: 15px; line-height: 1;
	padding: 14px 24px; border-radius: 9px; border: 2px solid transparent;
	cursor: pointer; text-align: center; min-height: 46px;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .08s ease;
	touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
/* A tap is acknowledged the instant it lands, before any scroll or request
   has had a chance to show — a working button must never look dead. */
.s4d-lp-btn:active { transform: translateY(1px) scale(.98); filter: brightness(.92); }

/* Offer copy that visitors tap expecting it to do something (Clarity,
   2026-09-09..14). It jumps to the quiz; the look is unchanged. */
.s4d-lp-jump { cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .08s ease; }
.s4d-lp-jump:active { transform: scale(.985); }
.s4d-lp-jump:focus-visible { outline: 2px solid var(--lp-sky); outline-offset: 4px; }
.s4d-lp-btn--primary { background: var(--lp-blue); border-color: var(--lp-blue); color: #fff; }
.s4d-lp-btn--primary:hover, .s4d-lp-btn--primary:focus-visible { background: var(--lp-blue-dark); border-color: var(--lp-blue-dark); color: #fff; }
.s4d-lp-btn--ghost { background: transparent; border-color: var(--lp-navy); color: var(--lp-navy); }
.s4d-lp-btn--ghost:hover, .s4d-lp-btn--ghost:focus-visible { background: var(--lp-navy); color: #fff; }
.s4d-lp-btn--ondark { background: transparent; border-color: #3D5A94; color: #fff; }
.s4d-lp-btn--ondark:hover, .s4d-lp-btn--ondark:focus-visible { background: #fff; border-color: #fff; color: var(--lp-navy); }
.s4d-lp-btn--sm { font-size: 14px; padding: 11px 20px; min-height: 44px; }

/* ------------------------------------------------------------------ */
/* Slim nav                                                           */
/* ------------------------------------------------------------------ */
.s4d-lp-nav__inner {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	padding-top: 14px; padding-bottom: 14px;
}
.s4d-lp-nav__brand { display: flex; align-items: center; gap: 10px; }
/* The lock-up is a link to the quiz (theme 1.4.26): no link styling. */
.s4d-lp .s4d-lp-nav__brand--jump { color: inherit; text-decoration: none; cursor: pointer; border-radius: 6px; }
.s4d-lp .s4d-lp-nav__brand--jump:focus-visible { outline: 2px solid var(--lp-sky); outline-offset: 4px; }
.s4d-lp-nav__logo { height: 26px; width: auto; }
.s4d-lp-nav__tag { font-size: 11px; font-weight: 700; line-height: 1.3; padding-left: 10px; }
.s4d-lp-nav__actions { display: flex; align-items: center; gap: 20px; }
.s4d-lp-nav__phone { font-weight: 800; font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; }
.s4d-lp-nav__call { display: none; }

.s4d-lp-nav--dark { background: var(--lp-deep); }
.s4d-lp-nav--dark .s4d-lp-nav__tag { color: var(--lp-dark-muted); border-left: 1px solid var(--lp-dark-border); }
.s4d-lp-nav--dark .s4d-lp-nav__phone { color: #fff; }

.s4d-lp-nav--light { background: #fff; border-bottom: 1px solid var(--lp-border-2); }
.s4d-lp-nav--light .s4d-lp-nav__tag { color: var(--lp-muted); border-left: 1px solid #D5DEEB; }
.s4d-lp-nav--light .s4d-lp-nav__phone { color: var(--lp-navy); }

/* ------------------------------------------------------------------ */
/* Dark offer hero (/social)                                          */
/* ------------------------------------------------------------------ */
.s4d-lp-hero {
	background: radial-gradient(900px 500px at 50% -10%, var(--lp-radial) 0%, var(--lp-deep) 65%);
	padding: 64px 0 56px;
}
.s4d-lp-hero__inner { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.s4d-lp-badge {
	border: 1px solid var(--lp-dark-border); color: var(--lp-sky);
	font-size: 12px; font-weight: 800; letter-spacing: .08em;
	padding: 7px 14px; border-radius: 999px;
}
.s4d-lp-hero__h1 { font-size: 56px; line-height: 1.05; color: #fff; max-width: 860px; text-wrap: pretty; }
.s4d-lp-hero__sub { font-size: 18px; color: var(--lp-dark-body); max-width: 620px; }
.s4d-lp-offers { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; justify-content: center; }
.s4d-lp-offer {
	background: rgba(255, 255, 255, .06); border: 1px solid var(--lp-dark-border);
	border-radius: 14px; padding: 22px 28px; min-width: 210px;
}
.s4d-lp-offer--accent { background: var(--lp-blue); border-color: var(--lp-blue); }
.s4d-lp-offer__num { font-size: 36px; font-weight: 800; color: #fff; line-height: 1.1; }
.s4d-lp-offer__label { font-size: 13px; color: var(--lp-dark-body); font-weight: 700; margin-top: 4px; }
.s4d-lp-offer--accent .s4d-lp-offer__label { color: #DCE9FF; }
/* The $5,000 box on /social is a link (theme 1.4.8). Same look as its
   neighbours: its spans behave like the divs they replace, and the pointer,
   pressed and focus styles come from .s4d-lp-jump. */
.s4d-lp-offer--link { display: block; color: inherit; }
.s4d-lp-offer--link .s4d-lp-offer__num,
.s4d-lp-offer--link .s4d-lp-offer__label { display: block; }
.s4d-lp-terms { font-size: 12px; color: var(--lp-dark-muted); }
/* Hero order since theme 1.4.0 (client, 2026-09-17): badge -> boxes -> terms
   -> copy. The terms line still hugs the boxes whose asterisk points at it,
   so it is pulled up out of the column gap and the copy sits below it. */
.s4d-lp-hero__inner .s4d-lp-terms { margin-top: -8px; }
.s4d-lp-terms + .s4d-lp-hero__sub { margin-top: 4px; }

/* ------------------------------------------------------------------ */
/* Proof hero (/aff)                                                  */
/* ------------------------------------------------------------------ */
.s4d-lp-phero { background: var(--lp-light); padding: 52px 0; }
.s4d-lp-phero__grid { display: grid; grid-template-columns: 1fr 460px; gap: 44px; align-items: center; }
.s4d-lp-phero__copy { display: flex; flex-direction: column; gap: 16px; }
.s4d-lp-badge--navy {
	background: var(--lp-navy); color: #fff; border: 0; width: fit-content;
	font-size: 12px; font-weight: 800; letter-spacing: .06em; padding: 7px 14px; border-radius: 999px;
}
.s4d-lp-phero__h1 { font-size: 48px; line-height: 1.08; color: var(--lp-navy); text-wrap: pretty; }
.s4d-lp-phero__body { font-size: 17px; color: var(--lp-body); line-height: 1.55; max-width: 540px; }
.s4d-lp-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.s4d-lp-stats { display: flex; gap: 28px; margin-top: 10px; flex-wrap: wrap; }
.s4d-lp-stat__num { font-size: 26px; font-weight: 800; color: var(--lp-navy); }
.s4d-lp-stat__label { font-size: 12px; color: var(--lp-muted); font-weight: 700; }
.s4d-lp-phero__img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 16px 40px rgba(10, 30, 70, .18); }

/* ------------------------------------------------------------------ */
/* Quiz                                                               */
/* ------------------------------------------------------------------ */
.s4d-lp-quizwrap { transform: translateY(-34px); display: flex; justify-content: center; }
.s4d-lp-quizwrap .s4d-lp-quiz { width: 720px; max-width: 100%; }

.s4d-lp-quiz {
	background: #fff; border: 1px solid #D5DEEB; border-radius: 16px;
	box-shadow: 0 18px 44px rgba(10, 30, 70, .16);
	padding: 30px 34px; display: flex; flex-direction: column; gap: 18px;
	scroll-margin-top: 24px;
}
.s4d-lp-quiz__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.s4d-lp-quiz__title { font-size: 20px; font-weight: 800; color: var(--lp-navy); }
.s4d-lp-quiz__count { font-size: 12px; font-weight: 800; color: var(--lp-blue); white-space: nowrap; }
.s4d-lp-quiz__bars { display: flex; gap: 6px; }
.s4d-lp-quiz__bar { flex: 1; height: 5px; border-radius: 3px; background: var(--lp-border-2); }
.s4d-lp-quiz__bar.is-on { background: var(--lp-blue); }
.s4d-lp-quiz__q { font-size: 16px; font-weight: 800; color: var(--lp-navy); }
.s4d-lp-quiz__foot { font-size: 12px; color: var(--lp-muted-2); text-align: center; }
/* "Prefer talking to an expert?" (theme 1.4.33): quieter than the button,
   full-height tap target, gone out of hours. */
.s4d-lp-quiz__expert { margin: 10px 0 4px; text-align: center; font-size: 13px; line-height: 1.3; }
.s4d-lp-quiz__expert-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 6px; color: var(--lp-body); text-decoration: none; }
.s4d-lp-quiz__expert-icon { flex: none; color: var(--lp-blue); }
.s4d-lp-quiz__expert-num { font-weight: 700; color: var(--lp-navy); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.s4d-lp-quiz__expert-link:hover .s4d-lp-quiz__expert-num,
.s4d-lp-quiz__expert-link:focus-visible .s4d-lp-quiz__expert-num { color: var(--lp-blue); }
html.s4d-phone-off .s4d-lp-quiz__expert { display: none !important; }

.s4d-lp-step { display: none; flex-direction: column; gap: 18px; }
.s4d-lp-step.is-active { display: flex; }

/* Options are real radios so the quiz works without JS and is reachable by
   keyboard and screen readers; JS only advances the step on change. */
.s4d-lp-opts { display: grid; gap: 10px; }
.s4d-lp-opts--4 { grid-template-columns: repeat(4, 1fr); }
.s4d-lp-opts--3 { grid-template-columns: repeat(3, 1fr); }
.s4d-lp-opt { position: relative; display: block; }
.s4d-lp-opt input {
	position: absolute; opacity: 0; width: 100%; height: 100%; top: 0; left: 0;
	margin: 0; cursor: pointer;
}
.s4d-lp-opt span {
	display: flex; align-items: center; justify-content: center; text-align: center;
	border: 1.5px solid var(--lp-input); border-radius: 10px;
	padding: 14px 10px; min-height: 48px;
	font-weight: 700; color: var(--lp-navy); font-size: 13.5px;
	transition: border-color .12s ease, background-color .12s ease;
}
.s4d-lp-opt:hover span { border-color: var(--lp-blue); background: #EAF1FF; }
.s4d-lp-opt input:focus-visible + span { outline: 2px solid var(--lp-blue); outline-offset: 2px; }
.s4d-lp-opt input:checked + span { border-color: var(--lp-blue); background: #EAF1FF; }

.s4d-lp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.s4d-lp-field { display: flex; flex-direction: column; gap: 5px; }
.s4d-lp-field--full { grid-column: 1 / -1; }
.s4d-lp-field label { font-size: 12.5px; font-weight: 800; color: var(--lp-navy); }
.s4d-lp-field input {
	font-family: inherit; font-size: 15px; color: var(--lp-navy);
	border: 1.5px solid var(--lp-input); border-radius: 9px;
	padding: 12px 13px; min-height: 46px; background: #fff;
}
.s4d-lp-field input:focus { outline: 2px solid var(--lp-blue); outline-offset: 1px; border-color: var(--lp-blue); }
.s4d-lp-field input[aria-invalid="true"] { border-color: #C0362C; }
.s4d-lp-field__err { font-size: 12px; font-weight: 700; color: #C0362C; }
.s4d-lp-field__hint { font-size: 11.5px; color: var(--lp-muted-2); }

/* The whole label is the tap target (it wraps the box), and it is kept at
   least 44px tall so a thumb never misses. */
.s4d-lp-consent { display: flex; gap: 10px; align-items: flex-start; grid-column: 1 / -1; min-height: 44px; padding: 3px 0; cursor: pointer; }
.s4d-lp-consent input { margin: 2px 0 0; width: 20px; height: 20px; flex: none; accent-color: var(--lp-blue); cursor: pointer; }
.s4d-lp-consent span { font-size: 12px; color: var(--lp-body); line-height: 1.45; }
.s4d-lp-consent a { color: var(--lp-blue); text-decoration: underline; }

.s4d-lp-quiz__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.s4d-lp-quiz__back {
	background: none; border: 0; padding: 8px 0; font-family: inherit;
	font-size: 13.5px; font-weight: 800; color: var(--lp-muted); cursor: pointer;
}
.s4d-lp-quiz__back:hover { color: var(--lp-navy); }
.s4d-lp-quiz__submit { flex: 1; min-width: 200px; }
/* Step 1's "Next" (theme 1.3.0): same footprint as the submit, so the card
   does not change shape between the first step and the last. */
.s4d-lp-quiz__next { flex: 1; min-width: 200px; }
/* In flight: disabled, "Sending…" (landing-quiz.js) and a spinner. */
.s4d-lp-quiz.is-busy .s4d-lp-quiz__submit { opacity: .8; pointer-events: none; cursor: progress; }
.s4d-lp-quiz.is-busy .s4d-lp-quiz__submit::after {
	content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
	animation: s4d-lp-spin .7s linear infinite;
}
@keyframes s4d-lp-spin { to { transform: rotate(360deg); } }

/* Set by landing-quiz.js for a second after any jump CTA is used: the card
   the page just scrolled to pulses, so the tap visibly did something. */
.s4d-lp-quiz.is-hit { animation: s4d-lp-hit .9s ease-out; }
@keyframes s4d-lp-hit {
	from { box-shadow: 0 0 0 0 rgba(11, 95, 255, .6), 0 18px 44px rgba(10, 30, 70, .16); }
	to   { box-shadow: 0 0 0 16px rgba(11, 95, 255, 0), 0 18px 44px rgba(10, 30, 70, .16); }
}

.s4d-lp-quiz__alert {
	background: #FDECEA; border: 1px solid #E8B4AE; color: #8A2C22;
	border-radius: 9px; padding: 11px 13px; font-size: 13.5px; font-weight: 700;
}
.s4d-lp-quiz__done { display: flex; flex-direction: column; gap: 10px; text-align: center; padding: 14px 0; }
.s4d-lp-quiz__done h2 { font-size: 22px; color: var(--lp-navy); }
.s4d-lp-quiz__done p { font-size: 15px; color: var(--lp-body); }

/* The honeypot must be unreachable, not merely invisible. */
.s4d-lp-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Quiz beside copy (/aff) */
.s4d-lp-quizsplit { display: grid; grid-template-columns: 1fr 620px; gap: 44px; align-items: start; }
.s4d-lp-quizsplit__copy { display: flex; flex-direction: column; gap: 16px; }
.s4d-lp-quizsplit__copy h2 { font-size: 32px; color: var(--lp-navy); line-height: 1.15; }
.s4d-lp-quizsplit__copy p { font-size: 16px; color: var(--lp-body); line-height: 1.55; }
.s4d-lp-checks { display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 700; color: var(--lp-navy); }
.s4d-lp-checks b { color: var(--lp-success); font-weight: 800; }
.s4d-lp-quizsplit .s4d-lp-quiz { box-shadow: 0 14px 36px rgba(10, 30, 70, .12); padding: 28px; }

/* ------------------------------------------------------------------ */
/* Marquee                                                            */
/* ------------------------------------------------------------------ */
/* The home-page marquee, verbatim (theme 1.3.0, client 2026-09-15: "exactly
   like the main site, desktop and mobile"). These are the blocks plugin's
   `.s4d-marquee*` rules (sections.css) renamed into the `s4d-lp-` namespace,
   with the two site tokens they used (--s4d-ink-300 / --s4d-ink-500) written
   in as literals: a fixed label, a masked strip, and a track that holds the
   logo set TWICE and slides left by exactly half its width every 38s, so the
   loop is seamless. Under 640px the label stacks above the strip. Keep this
   block in step with sections.css by hand — there is no shared stylesheet on
   purpose (CONTEXT §14). height/width only on the logo: the `.s4d-lp img`
   reset (0,1,1) sets max-width/display, so this (0,1,0) class must not. */
.s4d-lp-marquee { background: #fff; border-bottom: 1px solid #EDF0F5; }
.s4d-lp-marquee--plain { border-top: 0; }
.s4d-lp-marquee__inner {
	padding-top: clamp(16px, 1.8vw, 26px); padding-bottom: clamp(16px, 1.8vw, 26px);
	display: flex; align-items: center; gap: 24px;
}
.s4d-lp-marquee__label {
	flex: 0 0 auto; max-width: 9em;
	font-size: clamp(10px, 1vw, 11px); font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
	color: #8A93A6;
}
.s4d-lp-marquee__mask {
	flex: 1; min-width: 0; overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.s4d-lp-marquee__track {
	display: flex; align-items: center; gap: clamp(28px, 3.4vw, 56px);
	width: max-content; opacity: .7;
	animation: s4d-lp-marquee 38s linear infinite;
}
.s4d-lp-marquee__item { flex: none; }
.s4d-lp-marquee__logo { height: 44px; width: auto; }
.s4d-lp-marquee__text { font-size: 18px; font-weight: 800; color: #5A6478; white-space: nowrap; }
@keyframes s4d-lp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .s4d-lp-marquee__track { animation: none; flex-wrap: wrap; } }
/* Stacking the label flips the flex axes: width becomes the CROSS axis, so
   `flex: 1` no longer governs it and the mask would size to the full track
   (~2600px) and push the page sideways. The explicit width is load-bearing. */
@media (max-width: 640px) {
	.s4d-lp-marquee__inner { flex-direction: column; align-items: flex-start; }
	.s4d-lp-marquee__mask { width: 100%; }
}

/* Terms line under the /aff offer cards — the target of the "$5,000*"
   asterisk on that page (the /social equivalent is the hero's .s4d-lp-terms). */
.s4d-lp-terms--cards { margin-top: 14px; text-align: center; color: var(--lp-muted-2); }

/* ------------------------------------------------------------------ */
/* Taffer proof block (/social)                                       */
/* ------------------------------------------------------------------ */
.s4d-lp-proof { display: grid; grid-template-columns: 380px 1fr; gap: 40px; align-items: center; }
.s4d-lp-proof__img { width: 100%; height: auto; border-radius: 14px; }
.s4d-lp-proof__copy { display: flex; flex-direction: column; gap: 12px; }
.s4d-lp-eyebrow { font-size: 12px; font-weight: 800; color: var(--lp-blue); letter-spacing: .06em; }
.s4d-lp-proof__copy h2 { font-size: 32px; color: var(--lp-navy); line-height: 1.15; }
.s4d-lp-proof__copy p { font-size: 16px; color: var(--lp-body); line-height: 1.55; max-width: 560px; }
.s4d-lp-proof__copy .s4d-lp-btn { width: fit-content; }

/* ------------------------------------------------------------------ */
/* Freebie band (/social)                                             */
/* ------------------------------------------------------------------ */
.s4d-lp-band { background: var(--lp-light); padding: 48px 0; }
.s4d-lp-band__inner { display: flex; flex-direction: column; gap: 20px; }
.s4d-lp-band h2 { font-size: 30px; color: var(--lp-navy); text-align: center; }
.s4d-lp-pills { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.s4d-lp-pill {
	background: #fff; border: 1px solid var(--lp-border); border-radius: 999px;
	padding: 10px 18px; font-weight: 800; color: var(--lp-navy); font-size: 14px;
}
.s4d-lp-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.s4d-lp-quote { background: #fff; border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 10px; }
.s4d-lp-quote__text { color: var(--lp-navy); font-weight: 700; font-size: 15px; line-height: 1.5; }
.s4d-lp-quote__who { font-size: 13px; color: var(--lp-muted); font-weight: 700; }

/* Dark testimonial band (/aff) */
.s4d-lp-band--dark { background: var(--lp-deep); }
.s4d-lp-band--dark h2 { color: #fff; }
.s4d-lp-band--dark .s4d-lp-quote { background: rgba(255, 255, 255, .06); border: 1px solid var(--lp-dark-border); }
.s4d-lp-band--dark .s4d-lp-quote__text { color: #fff; }
.s4d-lp-band--dark .s4d-lp-quote__who { color: var(--lp-dark-muted-2); }

/* ------------------------------------------------------------------ */
/* Offer cards (/aff)                                                 */
/* ------------------------------------------------------------------ */
.s4d-lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.s4d-lp-card { background: var(--lp-light); border-radius: 12px; padding: 24px; }
.s4d-lp-card__num { font-size: 30px; font-weight: 800; color: var(--lp-blue); }
.s4d-lp-card__title { font-weight: 800; color: var(--lp-navy); font-size: 15px; margin-top: 6px; }
.s4d-lp-card__text { font-size: 13.5px; color: var(--lp-body); line-height: 1.5; margin-top: 4px; }

/* ------------------------------------------------------------------ */
/* FAQ                                                                */
/* ------------------------------------------------------------------ */
.s4d-lp-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.s4d-lp-faq__item { border: 1px solid var(--lp-border); border-radius: 12px; padding: 18px 20px; }
.s4d-lp-faq__q { font-weight: 800; color: var(--lp-navy); font-size: 15px; }
.s4d-lp-faq__a { font-size: 14px; color: var(--lp-body); line-height: 1.5; margin-top: 6px; }

/* ------------------------------------------------------------------ */
/* Closing CTA + disclosure                                           */
/* ------------------------------------------------------------------ */
.s4d-lp-close { background: var(--lp-deep); padding: 44px 0; }
.s4d-lp-close__inner { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.s4d-lp-close__h { color: #fff; font-size: 30px; font-weight: 800; max-width: 640px; line-height: 1.15; }

.s4d-lp-cta-band { background: var(--lp-navy); padding: 40px 0; }
.s4d-lp-cta-band__inner { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.s4d-lp-cta-band__h { color: #fff; font-size: 26px; font-weight: 800; }
.s4d-lp-cta-band__sub { color: var(--lp-dark-body); font-size: 14px; margin-top: 6px; }

.s4d-lp-disclosure {
	background: var(--lp-deep); text-align: center;
}
/* Color/size live on the INNER element, not the wrapper: /aff wraps the
   disclosure in .s4d-lp-disclosure, but /social prints it directly inside the
   dark .s4d-lp-close band with no wrapper — where it used to inherit the
   page's near-black body color on navy and was unreadable (client report,
   2026-09-01). First fix used --lp-dark-muted-2 (6.5:1); client still found
   it too dim, so it is now an explicit light gray (~11:1 on --lp-deep). */
.s4d-lp-disclosure__inner {
	padding-top: 22px; padding-bottom: 22px; max-width: 760px; margin: 0 auto;
	font-size: 11px; line-height: 1.5; color: #C9D2DF; text-align: center;
}
.s4d-lp-close .s4d-lp-disclosure__inner { padding-bottom: 0; }

/* ------------------------------------------------------------------ */
/* Mobile sticky bar (≤768px only)                                    */
/* ------------------------------------------------------------------ */
.s4d-lp-sticky { display: none; }

/* ------------------------------------------------------------------ */
/* ≤768px — the mobile design                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
	.s4d-lp { --lp-pad: 16px; }
	.s4d-lp-sec { padding: 32px 0; }

	/* Mobile nav is logo + Call only, per both mobile references. The primary
	   CTA is carried by the sticky bar, which is always in reach — repeating it
	   here just crowds a 390px row and wrapped to two lines. */
	.s4d-lp-nav__logo { height: 20px; }
	.s4d-lp-nav__tag { display: none; }
	.s4d-lp-nav__phone { display: none; }
	.s4d-lp-nav__actions .s4d-lp-btn--primary { display: none; }
	.s4d-lp-nav__call { display: inline-flex; }
	.s4d-lp-nav--light .s4d-lp-nav__call { border-color: var(--lp-blue); color: var(--lp-blue); }
	.s4d-lp-nav--light .s4d-lp-nav__call:hover { background: var(--lp-blue); color: #fff; }
	.s4d-lp-nav--dark .s4d-lp-nav__call { border-color: #3D5A94; color: #fff; }
	.s4d-lp-nav--dark .s4d-lp-nav__call:hover { background: #fff; color: var(--lp-navy); }

	.s4d-lp-hero { padding: 32px 0; }
	.s4d-lp-hero__h1 { font-size: 32px; line-height: 1.08; }
	.s4d-lp-hero__sub { font-size: 14px; }
	.s4d-lp-offers { gap: 8px; width: 100%; flex-wrap: nowrap; }
	.s4d-lp-offer { flex: 1; min-width: 0; padding: 12px 6px; border-radius: 10px; text-align: center; }
	.s4d-lp-offer__num { font-size: 20px; }
	.s4d-lp-offer__label { font-size: 10px; }

	.s4d-lp-phero { padding: 26px 0; }
	.s4d-lp-phero__h1 { font-size: 28px; line-height: 1.1; }
	.s4d-lp-phero__body { font-size: 15px; }
	.s4d-lp-ctas .s4d-lp-btn { width: 100%; }

	/* The mobile reference puts the proof photo directly under the headline,
	   above the stats and CTA. The copy and the image are separate grid
	   children on desktop, so `display: contents` dissolves the copy wrapper
	   and lets its children be ordered against the image directly — no second
	   copy of the markup, and the desktop two-column layout is untouched. */
	/* align-items must be reset explicitly: the desktop rule centres the two
	   grid columns vertically, and that same declaration would centre every
	   row horizontally once this becomes a column flexbox. */
	.s4d-lp-phero__grid { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
	.s4d-lp-phero__copy { display: contents; }
	.s4d-lp-badge--navy { order: 1; }
	.s4d-lp-phero__h1 { order: 2; }
	.s4d-lp-phero__img { order: 3; border-radius: 12px; box-shadow: none; }
	.s4d-lp-phero__body { order: 4; }
	.s4d-lp-stats { order: 5; }
	.s4d-lp-ctas { order: 6; }

	/* Three stats on mobile, as drawn. The transactions figure is the one the
	   reference drops — it is the least differentiating of the four. */
	.s4d-lp-stats { gap: 10px; justify-content: space-between; flex-wrap: nowrap; }
	.s4d-lp-stat:nth-child(3) { display: none; }
	.s4d-lp-stat__num { font-size: 17px; }
	.s4d-lp-stat__label { font-size: 10px; }

	.s4d-lp-quizwrap { transform: translateY(-20px); padding: 0; }
	.s4d-lp-quiz { padding: 20px 16px; border-radius: 14px; gap: 12px; }
	.s4d-lp-quiz__title { font-size: 15px; }
	.s4d-lp-quiz__count { font-size: 10px; }
	.s4d-lp-quiz__q { font-size: 14px; }
	.s4d-lp-quiz__bar { height: 4px; }
	.s4d-lp-opts--4, .s4d-lp-opts--3 { grid-template-columns: 1fr 1fr; gap: 8px; }
	.s4d-lp-opt span { padding: 13px 8px; font-size: 12.5px; border-radius: 9px; }
	.s4d-lp-fields { grid-template-columns: 1fr; }
	.s4d-lp-quizsplit { grid-template-columns: 1fr; gap: 20px; }
	.s4d-lp-quizsplit__copy h2 { font-size: 24px; }

	/* No marquee overrides here: the strip is the main site's, which keeps
	   44px logos at every width and stacks its label at 640px (see above). */

	.s4d-lp-proof { grid-template-columns: 1fr; gap: 18px; }
	.s4d-lp-proof__copy h2 { font-size: 24px; }
	.s4d-lp-proof__copy .s4d-lp-btn { width: 100%; }

	.s4d-lp-band { padding: 32px 0; }
	.s4d-lp-band h2 { font-size: 22px; }
	.s4d-lp-quotes { grid-template-columns: 1fr; }
	.s4d-lp-cards { grid-template-columns: 1fr; }
	.s4d-lp-faq { grid-template-columns: 1fr; }

	.s4d-lp-close { padding: 32px 0; }
	.s4d-lp-close__h { font-size: 22px; }
	.s4d-lp-close .s4d-lp-ctas { width: 100%; flex-direction: column; }
	.s4d-lp-close .s4d-lp-btn { width: 100%; }
	.s4d-lp-cta-band__inner { flex-direction: column; align-items: flex-start; }
	.s4d-lp-cta-band .s4d-lp-ctas { width: 100%; }
	.s4d-lp-cta-band .s4d-lp-btn { flex: 1; }

	/* Sticky bar. The page reserves space for it with padding-bottom rather
	   than letting it overlay the disclosure, which is a legal notice.

	   It ships HIDDEN and is revealed by landing-quiz.js only once the
	   visitor has scrolled past the bottom of the quiz (client, 2026-09-19:
	   it "is show right away" and must "only appear below the forms").
	   Before this it was painted from page load at bottom: 0 and sat on top
	   of the quiz's own Next / submit button on short mobile viewports, which
	   is the measured candidate cause of the dead clicks Clarity recorded on
	   "Get My Free Demo".

	   `visibility` is part of the transition on purpose, exactly as on the
	   main site (§13): a bar that is only translated off-screen stays in the
	   tab order, so keyboard users tab into something they cannot see. Do
	   not drop it while "simplifying" the animation. */
	.s4d-lp-sticky {
		display: flex; gap: 10px; align-items: center;
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
		background: #fff; padding: 10px 12px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom));
		box-shadow: 0 -6px 20px rgba(10, 30, 70, .14);
		visibility: hidden; opacity: 0; transform: translateY(100%);
		/* `visibility` is a DISCRETE property: give it a duration and the flip
		   waits for the transition to run. On a hidden tab, or anywhere
		   transitions do not progress, the bar would then stay invisible even
		   with `.is-visible` applied — observed while testing this. So it
		   steps at 0s, delayed to the end when hiding so the slide-out is
		   still seen, and immediately when showing. */
		transition: transform .22s ease, opacity .22s ease, visibility 0s linear .22s;
	}
	.s4d-lp-sticky.is-visible {
		visibility: visible; opacity: 1; transform: none;
		transition: transform .22s ease, opacity .22s ease, visibility 0s;
	}
	.s4d-lp-sticky .s4d-lp-btn { flex: 1; min-height: 48px; padding: 13px 8px; font-size: 14px; border-radius: 10px; }
	.s4d-lp-sticky .s4d-lp-btn--primary { flex: 1.4; }
	.s4d-lp-sticky .s4d-lp-btn--ghost { border-color: var(--lp-blue); color: var(--lp-blue); }
	.s4d-lp-sticky .s4d-lp-btn--ghost:hover { background: var(--lp-blue); color: #fff; }
	.s4d-lp-has-sticky { padding-bottom: 86px; }
}

@media (prefers-reduced-motion: reduce) {
	.s4d-lp * { scroll-behavior: auto !important; }
	.s4d-lp-quiz.is-hit { animation: none; outline: 3px solid var(--lp-blue); }
	.s4d-lp-btn:active, .s4d-lp-jump:active { transform: none; }
	/* The bar still appears and disappears at exactly the same points; it
	   just does not slide, and `visibility` still steps rather than fading,
	   so the tab-order behaviour above is unchanged. */
	.s4d-lp-sticky,
	.s4d-lp-sticky.is-visible { transform: none; transition: opacity .01s linear, visibility 0s; }
}

/* ------------------------------------------------------------------ */
/* Phone hours (Settings → S4D Attribution)                            */
/* Outside Mon–Fri business hours (Pacific) the attribution plugin's   */
/* head script sets `s4d-phone-off` on <html>. These pages dequeue     */
/* main.css, so they need their own copy of the rule. Every phone CTA  */
/* here is a tel: link, and each sits beside a form CTA that remains.  */
/* ------------------------------------------------------------------ */
html.s4d-phone-off a[href^="tel:"] { display: none !important; }

/* Phone CTAs SWAP out of hours rather than leaving a hole (2026-09-20).
   Both variants ship in every response and CSS picks, because the HTML is
   edge-cached for up to 30 days and PHP cannot know which is true when it is
   read. `display` is set explicitly, not left to `revert`, since these are
   flex buttons. See s4d_lp_phone_cta() and §18. */
.s4d-lp-phone-off { display: none !important; }
html.s4d-phone-off .s4d-lp-phone-on { display: none !important; }
html.s4d-phone-off a.s4d-lp-phone-off { display: inline-flex !important; }