/* ============================================================
   SmileTrue Elementor widgets stylesheet
   ------------------------------------------------------------
   Populated widget-by-widget during Phase 3. Each widget's rules
   live under its source class name (e.g. .hero-top, .fq-hero)
   so per-instance Elementor `selectors` overrides stack cleanly
   on top of the defaults defined here.

   Mobile-first responsive overrides land here during Phase 3b.
   ============================================================ */


/* ============================================================
   BC Hero form notice + honeypot
   Only render-time impact: the notice is appended inside .bc-form-card
   ONLY when a ?bc_sent query param is present (handler redirect). The
   honeypot is positioned absolutely off-screen so it occupies no layout.
   ============================================================ */

.bc-form-notice {
	padding: 16px 20px;
	margin: 0 0 18px;
	border-radius: 4px;
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.55;
	color: var(--ink);
}
.bc-form-notice strong {
	display: block;
	font-family: var(--serif);
	font-weight: 500;
	font-size: 17px;
	letter-spacing: -0.005em;
	margin-bottom: 4px;
}
.bc-form-notice p {
	margin: 0;
	color: var(--ink-soft);
}
.bc-form-notice--success {
	background: rgba(20, 100, 116, 0.08);
	border-left: 3px solid var(--teal-700);
}
.bc-form-notice--error {
	background: rgba(160, 60, 60, 0.08);
	border-left: 3px solid #a04040;
}

.bc-form-honeypot {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}


/* ============================================================
   smiletrue-topbar
   Source: styles.css :92-99 (base layout)
           animations.css :107-110 (.topbar .dot pulse)
           animations.css :416-423 (.topbar .right span:last-child::before — secondary pulse dot)
   Approach: mobile-first base + tablet & desktop min-width breakpoints.
   ============================================================ */

/* ---- Mobile-first base (default; applies <1025px) ----
   Column stack + wrap-friendly groups. Content genuinely can't fit in a
   single row until ~1025px given the hours string ("Monday-Friday:
   7:00am-11:00pm EST, Saturday-Sunday: 10:00am-6:00pm EST") + phone +
   status. Any attempt to force row before that overlaps groups vertically
   (short .left group centered inside taller multi-line .right group looks
   like text-on-text). Column layout below 1025px keeps them cleanly
   stacked; per-instance Elementor controls can still override. */
.topbar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	flex-wrap: wrap;                /* row-mode fallback if editor sets direction:row here */
	gap: 6px;
	padding: 8px 20px;
	background: var(--teal-900);
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-align: left;
	box-sizing: border-box;
	overflow-x: visible;            /* mobile no longer needs h-scroll — column layout has room */
}

.topbar .left,
.topbar .right {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;                /* mobile: wrap items onto multiple rows rather than overflow */
	row-gap: 4px;
	gap: 8px;
	min-width: 0;                   /* allow shrinking below content width */
	max-width: 100%;                /* never overflow parent */
}

/* Segment wrapping rules — split into "may wrap" vs "must stay whole":
     - .topbar__brand, .topbar__hours, .topbar__status: allow natural
       wrapping. The hours string in particular ("Monday-Friday: 7:00am–
       11:00pm EST, Saturday-Sunday: 10:00am–6:00pm EST") is ~65 chars —
       nowrap on that guarantees horizontal overflow on any phone.
     - .topbar__phone, .topbar__sep: keep whole. Phone numbers must not
       break across lines; the separator is a single character anyway.  */
.topbar .topbar__brand,
.topbar .topbar__hours,
.topbar .topbar__status {
	white-space: normal;
	overflow-wrap: break-word;
	word-break: normal;
}
.topbar .topbar__phone,
.topbar .topbar__sep {
	white-space: nowrap;
}

/* === Source: styles.css :99 + animations.css :107 ============= */
.topbar .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold);
	animation: st-pulse-gold 2.4s ease-out infinite;
}

/* === Phone: neutralize <a> defaults so it visually matches source <span> === */
.topbar .topbar__phone {
	color: inherit;
	text-decoration: none;
}

/* === Source: animations.css :416-417 ========================== */
.topbar .topbar__status {
	position: relative;
	color: var(--gold-soft);
}

/* === Source: animations.css :419-423 — verbatim ============== */
.topbar .topbar__status:not(.topbar__status--no-dot)::before {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold);
	margin-right: 8px;
	vertical-align: middle;
	animation: st-pulse-gold 2s ease-out infinite;
}

/* ---- Tablet ≥ 768px — still column, more padding ----
   Column stack persists here because the hours string alone doesn't fit
   on one row with the brand until ~1025px. Only paddings and gaps grow. */
@media (min-width: 768px) {
	.topbar {
		gap: 8px;
		padding: 8px 32px;
	}
	.topbar .left,
	.topbar .right {
		gap: 16px;
		row-gap: 4px;
	}
}

/* ---- Desktop ≥ 1025px — source layout: row, space-between ---- */
@media (min-width: 1025px) {
	.topbar {
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		padding: 8px 56px;
	}
	.topbar .left,
	.topbar .right {
		flex-wrap: nowrap;
		gap: 24px;
	}
}


/* ============================================================
   smiletrue-navbar
   Source: styles.css :101-110 (.nav, .nav-links, .nav-right, .nav-phone)
           animations.css :113-114 (.nav transition + .frame.scrolled condense)
   Approach: mobile-first base with hamburger drawer; desktop ≥1025px
   wraps source DOM via `display: contents` on the drawer so the source
   .nav { justify-content: space-between } layout is preserved exactly.
   ============================================================ */

/* ---- Mobile-first base (<1025px) ---- */
.nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	background: var(--white);
	border-bottom: 1px solid var(--line);
	transition: padding 0.4s ease, box-shadow 0.4s ease;   /* source animations.css :113 */
	position: relative;
}

/* Drawer wrapper — collapses on desktop via display:contents */
.nav .nav__drawer {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(86vw, 360px);
	background: var(--white);
	padding: 72px 24px 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	transform: translateX(100%);
	transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
	z-index: 1000;
	overflow-y: auto;
	box-shadow: -24px 0 60px -30px rgba(13, 79, 92, 0.25);
}

.nav .nav__drawer.is-open {
	transform: translateX(0);
}

/* Backdrop */
.nav .nav__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(13, 79, 92, 0);
	pointer-events: none;
	transition: background 0.32s ease;
	z-index: 999;
}

.nav.is-open .nav__backdrop {
	background: rgba(13, 79, 92, 0.45);
	pointer-events: auto;
}

/* Hamburger + close buttons */
.nav .nav__toggle,
.nav .nav__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	background: transparent;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: var(--ink);
}

.nav .nav__toggle .nav__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
	position: relative;
}

.nav .nav__toggle .nav__bar::before,
.nav .nav__toggle .nav__bar::after {
	content: "";
	position: absolute;
	left: 0;
	width: 22px;
	height: 2px;
	background: currentColor;
}

.nav .nav__toggle .nav__bar::before { top: -7px; }
.nav .nav__toggle .nav__bar::after  { top:  7px; }

.nav .nav__close {
	position: absolute;
	top: 18px;
	right: 18px;
	font-size: 24px;
	line-height: 1;
}

/* In-drawer nav-links + nav-right stack vertically */
.nav .nav__drawer .nav-links {
	flex-direction: column;
	align-items: stretch;
	gap: 18px;
}

.nav .nav__drawer .nav-right {
	flex-direction: column;
	align-items: stretch;
	gap: 14px;
}

.nav .nav__drawer .nav-right .btn {
	justify-content: center;
}

/* Image / SVG logo variants — opt-in alternatives to the text logo */
.nav .nav-logo__image {
	display: block;
	height: 22px;
	width: auto;
}

.nav .nav-logo--svg svg {
	display: block;
	height: 22px;
	width: auto;
}

/* === Source: styles.css :107 — .nav-links === */
.nav-links {
	display: flex;
	gap: 32px;
	font-size: 14px;
	font-weight: 500;
}

/* === Source: styles.css :108 — .nav-links a === */
.nav-links a {
	color: var(--ink);
	text-decoration: none;
}

/* === Source: styles.css :109 — .nav-right === */
.nav-right {
	display: flex;
	gap: 14px;
	align-items: center;
}

/* === Source: styles.css :110 — .nav-phone === */
.nav-phone {
	font-family: var(--mono);
	font-size: 13px;
	color: var(--ink-soft);
	text-decoration: none;          /* defensive — neutralize <a> */
}

/* ===========================================================
   .nav-phone-block — wraps the optional .nav-hours line above
   the phone link. Mobile/tablet base: stacks left-aligned to
   match other in-drawer items. Desktop override below re-aligns
   to flex-end so the block sits flush against the CTA button.
   =========================================================== */
.nav-phone-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.1;
}

/* .nav-hours — small mono caps line shown above the phone number.
   Editorial controls live in NavBar style tab → "Hours (above phone)".
   Defaults mirror the source TopBar/Footer hours typography. */
.nav-hours {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #a08231;                 /* gold-deep — matches Elementor default */
	/* Was `nowrap` — that prevented editor <br> tags and natural word-wrapping.
	   Switched to `normal` so multi-line phone labels render correctly. */
	white-space: normal;
	line-height: 1.3;
	margin-bottom: 2px;
}

/* ---- Desktop ≥ 1025px — match source styles.css :101-106 verbatim ---- */
@media (min-width: 1025px) {
	.nav {
		padding: 22px 56px;
	}

	/* Drawer collapses; its children become direct children of .nav for the
	   source flex layout. display:contents preserves source DOM behavior. */
	.nav .nav__drawer {
		position: static;
		display: contents;
		width: auto;
		height: auto;
		padding: 0;
		background: transparent;
		transform: none;
		box-shadow: none;
		overflow: visible;
	}

	.nav .nav__drawer .nav-links,
	.nav .nav__drawer .nav-right {
		flex-direction: row;
		align-items: center;
		gap: 32px;            /* nav-links */
	}

	.nav .nav__drawer .nav-right {
		gap: 14px;
	}

	.nav .nav__drawer .nav-right .btn {
		justify-content: center;
	}

	/* Desktop: stack hours+phone right-aligned so the block sits flush
	   against the CTA button (matches the rest of the right cluster). */
	.nav .nav__drawer .nav-phone-block {
		align-items: flex-end;
	}

	.nav .nav__toggle,
	.nav .nav__close,
	.nav .nav__backdrop {
		display: none;
	}
}

/* === Source: animations.css :114 — scroll condense (opt-in via JS toggle) === */
.frame.scrolled .nav,
.nav.is-scrolled {
	padding-top: 14px;
	padding-bottom: 14px;
	box-shadow: 0 1px 0 var(--line), 0 12px 24px -20px rgba(13, 79, 92, 0.15);
}


/* ============================================================
   smiletrue-footer
   Source: styles.css :268-280 (.frame footer / h5 / ul / a / .legal)
           styles.css :2572    (.frame footer a:hover)
           shared.jsx :62-71   (inline-style ports — tagline/doctrine/hours)
   animations.css : 0 footer rules (no reveal, no ::before / ::after).
   Approach: mobile-first base + tablet & desktop min-width breakpoints.
   ============================================================ */

/* ---- Mobile-first base (default; applies <768px) ---- */
.footer {
	display: grid;
	grid-template-columns: 1fr;             /* mobile: single column stack */
	gap: 32px;
	padding: 40px 20px 24px;
	background: var(--ink);                 /* source styles.css :268 */
	color: rgba(255, 255, 255, 0.78);       /* source styles.css :268 */
	box-sizing: border-box;
}

/* === Source: styles.css :272 — `.frame footer h5` === */
.footer h5 {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 16px;
	color: rgba(255, 255, 255, 0.55);
	font-weight: 500;
}

/* === Source: styles.css :273 — `.frame footer ul` === */
.footer ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 13px;
}

/* === Source: styles.css :274 — `.frame footer a` === */
.footer a {
	color: rgba(255, 255, 255, 0.92);
	text-decoration: none;
}

/* === Source: styles.css :2572 — `.frame footer a:hover` === */
.footer a:hover {
	color: rgba(255, 255, 255, 1);
}

/* === Source: styles.css :275-280 — `.frame footer .legal` === */
.footer .legal {
	grid-column: 1 / -1;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding-top: 22px;
	margin-top: 22px;
	display: flex;
	flex-direction: column;                 /* mobile: stack © + HIPAA */
	gap: 8px;                                /* mobile: between stacked lines */
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
}

/* === BEM port of shared.jsx :63 inline style — tagline === */
.footer__tagline {
	font-family: var(--serif);
	font-size: 14px;
	font-style: italic;
	line-height: 1.5;
	margin-top: 16px;
	max-width: 32ch;
	color: rgba(255, 255, 255, 0.85);
}

/* === BEM port of shared.jsx :66 inline style — doctrine === */
.footer__doctrine {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-top: 16px;
	color: rgba(255, 255, 255, 0.42);
}

/* === BEM port of shared.jsx :69 inline style — hours === */
.footer__hours {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	margin-top: 14px;
	color: rgba(255, 255, 255, 0.55);
}

/* Logo wrapper — neutralize <a> defaults so it visually matches source <span class="logo">. */
.footer__logo {
	color: inherit;
	text-decoration: none;
}

/* Image / SVG logo variants — opt-in alternatives to the text logo. */
.footer__logo--image .footer__logo-image,
.footer__logo--svg svg {
	display: block;
	height: 20px;
	width: auto;
}

/* ---- Tablet ≥ 768px — 2-column grid, legal goes row ---- */
@media (min-width: 768px) {
	.footer {
		grid-template-columns: 1fr 1fr;
		padding: 48px 32px 28px;
		gap: 40px;
	}
	.footer .legal {
		flex-direction: row;
		justify-content: space-between;
		gap: 0;
	}
}

/* ---- Desktop ≥ 1025px — match source styles.css :268-280 verbatim ---- */
@media (min-width: 1025px) {
	.footer {
		grid-template-columns: 1.4fr 1fr 1fr 1fr;
		padding: 64px 64px 36px;
		gap: 56px;
	}
}


/* ============================================================
   smiletrue-final-cta
   Source: styles.css :254-265   (.cta base + ::before/::after + h3 + h3 em + .lede + .actions)
           styles.css :2674-2680 (.brand-line)
           styles.css :2683-2688 (.doctrine-line)
           styles.css :582-587   (.system .cta h3 / .cta-reassure)
           styles.css :1064-1066 (.faq-page .fq-cta size overrides)
           styles.css :1723-1735 (.bc-cta-reassure / .bc-cta-alts)
           styles.css :2270-2271 (.to-page .to-cta size overrides)
           styles.css :2564-2568 (.to-cta-reassure)
           how-it-works.css :720-761 (.hiw-cta base + h2 + .sub + .actions)
           animations.css :367-383 (.cta gold-line scaleY + h3 blur-rise + button stagger)
           animations.css :651-656 (.cta.in .btn.gold gold-glow keyframes)
   Reveal: .cta is in reveal seed list (theme reveal.js :52). .hiw-cta is not
           seeded — renders statically per source.
   ============================================================ */

/* ---- Mobile-first base (default; applies <768px) ---- */
.cta {
	background: var(--teal-900);
	color: var(--white);
	padding: 64px 20px;
	text-align: center;
	position: relative;
	box-sizing: border-box;
}

/* === Source: styles.css :255-261 — vertical gold pseudo lines === */
.cta::before,
.cta::after {
	content: "";
	position: absolute;
	width: 1px;
	height: 48px;
	background: var(--gold);
	left: 50%;
	transform: translateX(-50%);
}
.cta::before { top: 0; }
.cta::after  { bottom: 0; }

/* === Source: styles.css :262 — .cta h3 === */
.cta h3 {
	font-family: var(--serif);
	font-size: 40px;                     /* mobile-only — desktop reset to 64 at ≥1025 */
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 22px auto 28px;
	max-width: 18ch;
	text-wrap: balance;
}

/* === Source: styles.css :263 — .cta h3 em === */
.cta h3 em {
	font-style: italic;
	color: var(--gold-soft);
}

/* === Source: styles.css :264 — .cta .lede === */
.cta .lede {
	color: rgba(255, 255, 255, 0.78);
	margin: 0 auto 32px;
	max-width: 56ch;
	font-size: 16px;
}

/* === Source: styles.css :265 — .cta .actions === */
.cta .actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;                     /* mobile-only fallback so 2 buttons don't overflow */
}

/* === Source: styles.css :2683-2688 — .doctrine-line === */
.doctrine-line {
	margin: 22px 0 0;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
	text-align: center;
}

/* === Source: styles.css :2674-2680 — .brand-line === */
.brand-line {
	margin: 8px 0 0;
	font-family: var(--serif);
	font-style: italic;
	font-size: 18px;
	letter-spacing: -0.005em;
	color: var(--gold-soft);
	line-height: 1.4;
	text-align: center;
}

/* === Source: styles.css :583-587 — .cta-reassure (system / shared base) === */
.cta-reassure,
.to-cta-reassure,
.rp-cta-reassure {
	margin-top: 22px;
	font-family: var(--mono);
	font-size: 12.5px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	opacity: 0.95;
}

/* === Source: styles.css :2564-2568 — .to-cta-reassure tighter margin === */
.to-cta-reassure,
.rp-cta-reassure {
	margin-top: 14px;
}

/* === Source: styles.css :1723-1727 — .bc-cta-reassure === */
.bc-cta-reassure {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--gold);
	margin: 12px 0 18px;
}

/* === Source: styles.css :1728-1735 — .bc-cta-alts === */
.bc-cta-alts {
	margin-top: 22px;
	font-family: var(--serif);
	font-size: 16px;
	color: rgba(243, 237, 224, 0.78);
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;                     /* mobile-only fallback */
}
.bc-cta-alts a {
	color: var(--paper);
	border-bottom: 1px solid var(--gold);
	text-decoration: none;
}
.bc-cta-alts .dot {
	color: rgba(243, 237, 224, 0.4);
}

/* ============================================================
   .cta reveal staggers — source animations.css :367-383 + :651-656.
   Per Rule 5: widget-scoped animations live with their widget.
   Trigger: theme reveal.js adds .in to .cta on intersection.
   ============================================================ */

/* === Source: animations.css :367-371 — gold lines initial === */
.cta::before,
.cta::after {
	transform: translateX(-50%) scaleY(0);
	transform-origin: center center;
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* === Source: animations.css :372-373 — gold lines on .in === */
.cta.in::before {
	transform: translateX(-50%) scaleY(1);
	transition-delay: 0.1s;
}
.cta.in::after {
	transform: translateX(-50%) scaleY(1);
	transition-delay: 0.4s;
}

/* === Source: animations.css :375 — headline initial === */
.cta h3 {
	opacity: 0;
	filter: blur(10px);
	transform: translate3d(0, 12px, 0);
	transition: opacity 1.1s ease 0.35s, filter 1.1s ease 0.35s, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s;
}
/* === Source: animations.css :376 — headline on .in === */
.cta.in h3 {
	opacity: 1;
	filter: blur(0);
	transform: none;
}

/* === Source: animations.css :378-383 — button stagger === */
.cta .actions .btn {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.cta.in .actions .btn:nth-child(1) {
	transition-delay: 0.7s;
	opacity: 1;
	transform: none;
}
.cta.in .actions .btn:nth-child(2) {
	transition-delay: 0.85s;
	opacity: 1;
	transform: none;
}

/* === Source: animations.css :651-656 — gold glow pulse on primary === */
.cta .btn.gold {
	box-shadow: 0 0 0 0 rgba(201, 164, 73, 0);
}
.cta.in .btn.gold {
	animation: st-cta-gold-glow 3.6s ease-in-out 1.6s infinite;
}
@keyframes st-cta-gold-glow {
	0%, 100% { box-shadow: 0 0 0 0   rgba(201, 164, 73, 0); }
	50%      { box-shadow: 0 0 0 12px rgba(201, 164, 73, 0); }
}

/* ============================================================
   .hiw-cta — How-It-Works-only variant.
   Source: how-it-works.css :720-761. Not in reveal seed list (renders static).
   ============================================================ */

/* === Source: how-it-works.css :720-726 — .hiw-cta base === */
.hiw-cta {
	background: var(--teal-900);
	color: var(--white);
	padding: 80px 20px;                  /* mobile-only — desktop reset to 120 64 at ≥1025 */
	text-align: center;
	position: relative;
	box-sizing: border-box;
}

/* === Source: how-it-works.css :727-733 — .hiw-cta horizontal lines === */
.hiw-cta::before,
.hiw-cta::after {
	content: "";
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 64px;
	height: 1px;
	background: var(--gold);
}
.hiw-cta::before { top: 60px; }
.hiw-cta::after  { bottom: 60px; }

/* === Source: how-it-works.css :734-744 — .hiw-cta h2 === */
.hiw-cta h2 {
	font-family: var(--serif);
	font-size: 40px;                     /* mobile-only — desktop reset to 64 at ≥1025 */
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 22px auto 24px;
	max-width: 22ch;
	text-wrap: balance;
}
.hiw-cta h2 em {
	font-style: italic;
	color: var(--gold-soft);
}

/* === Source: how-it-works.css :745-755 — .hiw-cta .sub === */
.hiw-cta .sub {
	font-family: var(--serif);
	font-size: 20px;
	font-style: italic;
	color: rgba(255, 255, 255, 0.8);
	margin: 0 auto 36px;
	max-width: 30ch;
	line-height: 1.5;
}
.hiw-cta .sub span         { display: block; }
.hiw-cta .sub span + span  { margin-top: 4px; }

/* === Source: how-it-works.css :756-761 — .hiw-cta .actions === */
.hiw-cta .actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	flex-wrap: wrap;
}

/* === Source: styles.css :2623-2627 — .hiw-cta-tag === */
.hiw-cta-tag {
	margin: 14px 0 0;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-soft);
	opacity: 0.92;
}

/* ---- Tablet ≥ 768px — looser padding, larger type ---- */
@media (min-width: 768px) {
	.cta {
		padding: 88px 40px;
	}
	.cta h3 {
		font-size: 52px;
	}
	.hiw-cta {
		padding: 100px 40px;
	}
	.hiw-cta h2 {
		font-size: 52px;
	}
}

/* ---- Desktop ≥ 1025px — match source styles.css :254 + how-it-works.css :720 verbatim ---- */
@media (min-width: 1025px) {
	.cta {
		padding: 110px 64px;
	}
	.cta h3 {
		font-size: 64px;
	}
	.hiw-cta {
		padding: 120px 64px;
	}
	.hiw-cta h2 {
		font-size: 64px;
	}
}


/* ============================================================
   smiletrue-relapse-band
   Source: styles.css :1344-1373 — .bc-relapse-band base + inner grid + copy + h2/p + ctas + stat
           styles.css :2603-2607 — .bc-relapse-stat-note
           styles.css :2240-2247 — .to-relapse-band base + h2/p + ctas
           styles.css :1923-1934 — .bc-page-m mobile padding (lifted into mobile-first base)
   No animations.css rules — static band, no reveal.
   Two source variants unified under one widget:
     • .bc-relapse-band = dark (ink) bg, 2-col grid with stat column
     • .to-relapse-band = light (mint) bg, single column
   ============================================================ */

/* ---- Mobile-first base (default; applies <768px) ---- */
.bc-relapse-band {
	background: var(--ink);
	color: var(--paper);
	padding: 36px 22px;                  /* source styles.css :1923 (bc-page-m). */
	box-sizing: border-box;
}
.to-relapse-band {
	background: var(--mint);
	color: var(--ink);
	padding: 36px 22px;                  /* mobile-only; resets to 96px 64px at ≥1025 */
	border-bottom: 1px solid var(--line);
	box-sizing: border-box;
}

/* === Inner layout — mobile-first flex column with CSS order ============
   Source styles.css :1347 — `.bc-relapse-band-inner` is grid 1.6fr 1fr gap 80
   at desktop. Below desktop the source has NO rules; we lift to flex column
   so the buttons can sit next to copy+stat as a sibling — that lets the stat
   visually sit between copy and buttons via CSS order without breaking
   source-exact placement at ≥1025px.
   ====================================================================== */
.bc-relapse-band-inner,
.to-relapse-band-inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
	/* max-width NOT set — defaults to none (matches source BC).
	   Editor's `grid_max_width` control writes max-width here when used. */
}

/* CSS order on mobile/tablet single-column stack:
     copy = 1, stat = 2 (above buttons by default), ctas = 3.
   The `stat-mobile-below` class swaps stat to order 4 so it lands under buttons. */
.bc-relapse-band-inner > .bc-relapse-band-copy,
.to-relapse-band-inner > .to-relapse-band-copy { order: 1; }
.bc-relapse-band-inner > .bc-relapse-band-stat { order: 2; }
.bc-relapse-band-inner > .bc-relapse-band-ctas,
.to-relapse-band-inner > .to-relapse-ctas    { order: 3; }
.bc-relapse-band-inner.stat-mobile-below > .bc-relapse-band-stat { order: 4; }

/* === Source: styles.css :1350-1352 — .bc-relapse-band-copy h2 === */
.bc-relapse-band-copy h2,
.to-relapse-band-copy h2 {
	color: var(--paper);                 /* BC default; TO overrides below */
	font-size: 36px;                     /* mobile-only — resets to 56 at ≥1025 */
	margin: 16px 0 22px;
}

/* TO variant: dark text on light bg */
.to-relapse-band-copy h2 {
	color: var(--ink);
}

/* === Source: styles.css :1353 — .bc-relapse-band-copy h2 em === */
.bc-relapse-band-copy h2 em,
.to-relapse-band-copy h2 em {
	color: var(--gold);
}

/* === Source: styles.css :1354-1357 / :2243-2246 — body paragraph === */
.bc-relapse-band-copy > p,
.to-relapse-band-copy > p:not(.relapse-band__ask) {
	font-family: var(--serif);
	font-size: 17px;                     /* mobile-only — resets to 19 at ≥1025 */
	line-height: 1.55;
	color: rgba(243, 237, 224, 0.78);    /* BC default; TO overrides below */
	margin: 0 0 32px;
	max-width: 60ch;
	font-weight: 400;
}

/* TO variant: ink-soft text on mint bg */
.to-relapse-band-copy > p:not(.relapse-band__ask) {
	color: var(--ink-soft);
}

/* === Source: styles.css :1358 / :2247 — buttons row === */
.bc-relapse-band-ctas,
.to-relapse-ctas {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;                     /* defensive mobile fallback */
}

/* === Bullets list — port of treatment-options.jsx :424 inline styles === */
.relapse-band__bullets {
	margin-top: 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-size: 14px;
}

/* === Ask paragraph — port of treatment-options.jsx :430 inline === */
.relapse-band__ask {
	margin-top: 20px;
}

/* === Source: styles.css :1360-1362 — .bc-relapse-band-stat === */
.bc-relapse-band-stat {
	border-left: 3px solid var(--gold);
	padding: 6px 0 6px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* === Source: styles.css :1364-1369 — stat number gradient text === */
.bc-relapse-band-stat .num {
	font-family: var(--serif);
	font-size: 48px;                     /* mobile-only — resets to 80 at ≥1025 */
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.025em;
	background-image: linear-gradient(180deg, var(--gold) 0%, var(--paper) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;                  /* fallback for non-webkit */
}

/* === Source: styles.css :1370-1373 — stat label === */
.bc-relapse-band-stat .lbl {
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(243, 237, 224, 0.7);
	max-width: 28ch;
	line-height: 1.5;
}

/* === Source: styles.css :2603-2607 — stat note === */
.bc-relapse-band-stat .bc-relapse-stat-note {
	margin-top: 14px;
	font-family: var(--serif);
	font-style: italic;
	font-size: 13.5px;
	color: rgba(255, 255, 255, 0.65);
	line-height: 1.5;
	max-width: 32ch;
}

/* === Content alignment (CHOOSE left/center) =========================== */
.bc-relapse-band-inner.align-center,
.to-relapse-band-inner.align-center {
	text-align: center;
}
.bc-relapse-band-inner.align-center .bc-relapse-band-ctas,
.to-relapse-band-inner.align-center .to-relapse-ctas {
	justify-content: center;
}
.bc-relapse-band-inner.align-center .bc-relapse-band-copy > p,
.bc-relapse-band-inner.align-center .to-relapse-band-copy > p:not(.relapse-band__ask),
.to-relapse-band-inner.align-center .bc-relapse-band-copy > p,
.to-relapse-band-inner.align-center .to-relapse-band-copy > p:not(.relapse-band__ask) {
	margin-left: auto;
	margin-right: auto;
}
.bc-relapse-band-inner.align-center .bc-relapse-band-copy h2,
.bc-relapse-band-inner.align-center .to-relapse-band-copy h2,
.to-relapse-band-inner.align-center .bc-relapse-band-copy h2,
.to-relapse-band-inner.align-center .to-relapse-band-copy h2 {
	margin-left: auto;
	margin-right: auto;
}

/* ---- Tablet ≥ 768px — looser padding, intermediate type ---- */
@media (min-width: 768px) {
	.bc-relapse-band,
	.to-relapse-band {
		padding: 72px 40px;
	}
	.bc-relapse-band-copy h2,
	.to-relapse-band-copy h2 {
		font-size: 44px;
	}
	.bc-relapse-band-copy > p,
	.to-relapse-band-copy > p:not(.relapse-band__ask) {
		font-size: 19px;
	}
	.bc-relapse-band-stat .num {
		font-size: 64px;
	}
}

/* ---- Desktop ≥ 1025px — match source styles.css :1344 + :2240 verbatim ---- */
@media (min-width: 1025px) {
	.bc-relapse-band {
		padding: 110px 64px;
	}
	.to-relapse-band {
		padding: 96px 64px;
	}
	.bc-relapse-band-copy h2 {
		font-size: 56px;
	}
	.to-relapse-band-copy h2 {
		font-size: 52px;                       /* source styles.css :2242 — TO override */
	}
	/* Swap to grid: text + ctas in column 1 (rows 1 & 2), stat in column 2 (span both rows). */
	.bc-relapse-band-inner {
		display: grid;
		grid-template-columns: var(--st-band-copy-col, 1.6fr) 1fr;   /* default 1.6fr per source styles.css :1347 */
		grid-template-rows: auto auto;
		gap: 24px 80px;                       /* row-gap 24, col-gap 80 (source) */
		align-items: center;
	}
	.bc-relapse-band-inner > .bc-relapse-band-copy {
		grid-column: 1;
		grid-row: 1;
	}
	.bc-relapse-band-inner > .bc-relapse-band-ctas {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
	}
	.bc-relapse-band-inner > .bc-relapse-band-stat {
		grid-column: 2;
		grid-row: 1 / 3;
		align-self: center;
	}
	/* When stat is hidden, fall back to single column (copy + ctas stack). */
	.bc-relapse-band-inner.has-no-stat {
		display: flex;
		flex-direction: column;
		gap: 32px;
	}
	/* TO variant: source single-column with max-width 1100. */
	.to-relapse-band-inner {
		display: flex;
		flex-direction: column;
		gap: 24px;
		max-width: 1100px;                    /* source styles.css :2241 */
	}
	.bc-relapse-band-stat .num {
		font-size: 80px;
	}
}


/* ============================================================
   smiletrue-hero-top
   Source: styles.css :285-310 (.system .hero / .hero-top / h1 / .ctas / .cta-row / .hero-pull / .lbl / .ln)
           animations.css :386-407 (.hero-copy + .hero-top staggered fade-up: eyebrow / h1 / lede / ctas)
   Reveal: foundation reveal.js seeds `.system .hero-top` AND we push `.hero-top`
           (the WP widget renders without the `.system` ancestor).
   Source rule asymmetry: h1 initial-state targets `.hero-copy h1` only; the
           `.hero-top.in h1` reveal-state rule applies but with no initial state
           so the h1 stays static. Mirror that — no invented h1 entry animation.
   ============================================================ */

/* ---- Mobile-first base (default; applies <768px) ---- */
.hero {
	background: var(--paper);
	padding: 40px 20px 48px;              /* mobile-only — resets to 64/64/80 at ≥1025 */
	border-bottom: 1px solid var(--line);
	box-sizing: border-box;
}

/* Inner grid container — source styles.css :286 */
.hero-top {
	display: grid;
	grid-template-columns: 1fr;           /* mobile: single column */
	gap: 32px;
	align-items: start;                   /* mobile-only — resets to `end` at ≥1025 */
	margin-bottom: 32px;
}

/* === Source: styles.css :287 — .system .hero-top h1 === */
.hero-top h1 {
	font-size: 40px;                      /* mobile-only — resets to 80 at ≥1025 */
	margin: 18px 0 0;
	font-family: var(--serif);            /* .display foundation */
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.02;
	text-wrap: balance;
}

/* === Source: styles.css :62 — .display em === */
.hero-top h1 em {
	font-style: italic;
	font-weight: 400;
	color: var(--teal-700);
}

/* === Source: styles.css :288 — .system .hero-top .ctas === */
.hero-top .ctas {
	display: flex;
	flex-direction: column;
	gap: 28px;
	align-items: flex-start;
}

/* === Source: styles.css :289 — .system .hero-top .cta-row === */
.hero-top .cta-row {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* === Source: styles.css :292-297 — .system .hero-pull === */
.hero-pull {
	border-left: 3px solid var(--gold);
	padding: 4px 0 4px 22px;
	display: flex;
	flex-direction: column;
	gap: 18px;
	max-width: 38ch;
}

/* === Source: styles.css :298 — .hero-pull .rule === */
.hero-pull .rule {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* === Source: styles.css :299-302 — .hero-pull .lbl === */
.hero-pull .lbl {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--teal-700);
	font-weight: 500;
}

/* === Source: styles.css :303 — .hero-pull .rule.alt .lbl === */
.hero-pull .rule.alt .lbl {
	color: var(--gold-deep);
}

/* === Source: styles.css :304-308 — .hero-pull .ln === */
.hero-pull .ln {
	font-family: var(--serif);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--ink);
	margin: 0;
	text-wrap: pretty;
}

/* === Source: styles.css :309 — .hero-pull .ln em === */
.hero-pull .ln em {
	font-style: italic;
	color: var(--teal-700);
}

/* === Source: styles.css :310 — .hero-pull .rule.alt .ln em === */
.hero-pull .rule.alt .ln em {
	color: var(--gold-deep);
}

/* ============================================================
   .hero-top reveal staggers — source animations.css :386-407.
   Per Rule 5: widget-scoped animations live with their widget.
   Trigger: theme reveal.js adds .in to .hero-top on intersection.
   Disabled via .st-reveal-off when editor toggles show_reveal=no.
   ============================================================ */

/* === Source: animations.css :404-405 — eyebrow initial === */
.hero-top:not(.st-reveal-off) .eyebrow {
	opacity: 0;
	transform: translate3d(0, 6px, 0);
	transition: opacity 0.7s ease 0.05s, transform 0.7s ease 0.05s;
}
/* === Source: animations.css :406-407 — eyebrow on .in === */
.hero-top.in:not(.st-reveal-off) .eyebrow {
	opacity: 1;
	transform: none;
}

/* === Source: animations.css :398-401 — ctas initial + .in === */
.hero-top:not(.st-reveal-off) .ctas {
	opacity: 0;
	transform: translate3d(0, 12px, 0);
	transition: opacity 0.9s ease 0.65s, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.65s;
}
.hero-top.in:not(.st-reveal-off) .ctas {
	opacity: 1;
	transform: none;
}

/* ---- Tablet ≥ 768px — looser padding, intermediate type ---- */
@media (min-width: 768px) {
	.hero {
		padding: 56px 40px 64px;
	}
	.hero-top h1 {
		font-size: 56px;
	}
	.hero-top {
		gap: 48px;
	}
}

/* ---- Desktop ≥ 1025px — match source styles.css :285-289 verbatim ---- */
@media (min-width: 1025px) {
	.hero {
		padding: 64px 64px 80px;
	}
	.hero-top {
		grid-template-columns: var(--st-hero-left-col, 1.2fr) 1fr;
		gap: 80px;
		align-items: end;
		margin-bottom: 64px;
	}
	.hero-top h1 {
		font-size: 80px;
	}
}


/* ============================================================
   smiletrue-system-diagram
   Source: styles.css :312-345 (.diagram + .step + .num + h3 + p + .arrow + .end + .label/.v/.meta)
           animations.css :213-214 (.step transition + :hover)
           animations.css :216-222 (.arrow infinite pulse, staggered nth-child)
           animations.css :224-231 (diagram container + step staggers + end fade-left)
           animations.css :234-239 (.step.active::after gold underline glow)
   Foundation keyframes used (theme animations.css): st-fade-up, st-fade-left
   Per-widget keyframes (defined below): st-arrow-pulse, st-active-glow
   Reveal: theme reveal.js seed `.system .diagram` requires `.system` ancestor;
           we push `.diagram` to the seed list for WP widget instances.
   ============================================================ */

/* Wrapper bounds header + diagram for max-width control. Default 100% (full). */
.st-diagram-wrapper {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* ---- Optional section header (above the grid) ---- */
.st-diagram-header {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-bottom: 40px;
}
.st-diagram-header h2 {
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--ink);
	margin: 0;
	text-wrap: balance;
	font-size: 32px;                      /* mobile-only — resets to 48 at ≥1025 */
}
.st-diagram-header h2 em {
	font-style: italic;
	color: var(--teal-700);
}
.st-diagram-header .lede {
	font-family: var(--sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-soft);
	margin: 0;
	max-width: 56ch;
	text-wrap: pretty;
}

/* ---- Mobile-first base: 1-column stack ---- */
.diagram {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border: 1px solid var(--line);
	background: var(--white);
	box-sizing: border-box;
}

/* === Source: styles.css :319 — .step (mobile: border-bottom between rows) === */
.diagram .step {
	padding: 24px 20px;                   /* mobile-only — resets to 32 28 at ≥1025 */
	display: flex;
	flex-direction: column;
	gap: 14px;
	position: relative;
	background: var(--white);
	border-right: 0;
	border-bottom: 1px solid var(--line); /* mobile: bottom divider between stacked steps */
	transition: background 0.4s ease, transform 0.35s ease;
}
.diagram .step:last-of-type {
	border-bottom: 0;
}

/* === Source: animations.css :214 — :hover === */
.diagram .step:hover {
	background: var(--teal-50);
	transform: translateY(-2px);
}

/* === Source: styles.css :325 — .step.active === */
.diagram .step.active {
	background: var(--teal-50);
}

/* === Source: styles.css :327 — .num === */
.diagram .step .num {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	color: var(--gold-deep);
}

/* === Source: styles.css :328 — .step h3 === */
.diagram .step h3 {
	font-family: var(--serif);
	font-size: 24px;                      /* mobile-only — resets to 30 at ≥1025 */
	font-weight: 500;
	letter-spacing: -0.015em;
	margin: 0;
	line-height: 1;
}

/* === Source: styles.css :329 — .step p === */
.diagram .step p {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--ink-soft);
}

/* === Source: styles.css :330-335 — .step .arrow (hidden until ≥1025) === */
.diagram .step .arrow {
	display: none;                        /* mobile/tablet: no chevron between vertically-stacked cells */
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 16px;
	background: var(--gold);
	clip-path: polygon(0 0, 100% 50%, 0 100%, 35% 50%);
	z-index: 3;
}
/* When editor uploads a custom arrow image, the <img class="arrow"> replaces
   the CSS chevron. Remove bg + clip-path so the image renders as itself. */
img.arrow {
	background: none !important;
	clip-path: none !important;
	object-fit: contain;
}

/* === Source: styles.css :337-342 — .end === */
.diagram .end {
	background: var(--teal-800);
	color: var(--white);
	padding: 24px 20px;                   /* mobile-only — resets to 32 28 at ≥1025 */
	display: flex;
	flex-direction: column;
	gap: 8px;
	justify-content: center;
}

/* === Source: styles.css :343 — .end .label === */
.diagram .end .label {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-soft);
}

/* === Source: styles.css :344 + animations.css :597-602 — .end .v ===
   Base typography from styles.css :344, shimmer text-gradient + animation from
   animations.css :597-602 (DIAGRAM END BADGE — gentle continuous shimmer).
   Foundation `st-shimmer` keyframe lives in theme animations.css.
   Gradient stops + animation duration bound to CSS vars so editor sliders feed
   the keyframe live. Defaults match source exactly. */
.diagram .end .v {
	font-family: var(--serif);
	font-size: 28px;                      /* mobile-only — resets to 32 at ≥1025 */
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1;
	background: linear-gradient(
		110deg,
		var(--st-end-v-grad-start, #ffffff) 0%,
		var(--st-end-v-grad-start, #ffffff) 30%,
		var(--st-end-v-grad-mid,   var(--gold-soft)) 50%,
		var(--st-end-v-grad-end,   #ffffff) 70%,
		var(--st-end-v-grad-end,   #ffffff) 100%
	);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: st-shimmer var(--st-end-v-shimmer-duration, 5s) ease-in-out infinite;
}
/* When editor disables shimmer, restore solid color rendering. */
.diagram .end.shimmer-off .v {
	background: none;
	-webkit-text-fill-color: currentColor;
	animation: none;
}

/* === Source: styles.css :345 — .end .meta === */
.diagram .end .meta {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.7);
	margin-top: 4px;
}

/* ============================================================
   Reveal staggers + arrow pulse + active glow.
   Per Rule 5: widget-scoped animations live with their widget.
   Foundation keyframes st-fade-up / st-fade-left live in theme animations.css.
   ============================================================ */

/* === Source: animations.css :224 — diagram initial === */
.diagram:not(.st-reveal-off) {
	opacity: 0;
	transform: translate3d(0, 30px, 0);
	transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* === Source: animations.css :225 — diagram on .in === */
.diagram.in:not(.st-reveal-off) {
	opacity: 1;
	transform: none;
}

/* === Source: animations.css :227-230 — step children staggers === */
.diagram.in:not(.st-reveal-off) .step:nth-child(1) { animation: st-fade-up 0.7s ease 0.10s both; }
.diagram.in:not(.st-reveal-off) .step:nth-child(2) { animation: st-fade-up 0.7s ease 0.22s both; }
.diagram.in:not(.st-reveal-off) .step:nth-child(3) { animation: st-fade-up 0.7s ease 0.34s both; }
.diagram.in:not(.st-reveal-off) .step:nth-child(4) { animation: st-fade-up 0.7s ease 0.46s both; }

/* === Source: animations.css :231 — end fade-left === */
.diagram.in:not(.st-reveal-off) .end {
	animation: st-fade-left 0.8s ease 0.6s both;
}

/* === Source: animations.css :216-222 — arrow infinite pulse + nth-child delays ===
   Animation params bound to CSS vars so editor's arrow_anim_duration / distance /
   opacity controls feed straight into the keyframes. Defaults match source exactly. */
.diagram:not(.st-arrow-static) .step .arrow {
	animation: st-arrow-pulse var(--st-arrow-duration, 1.8s) ease-in-out infinite;
	transform-origin: center center;
}
.diagram:not(.st-arrow-static) .step:nth-child(1) .arrow { animation-delay: 0s;    }
.diagram:not(.st-arrow-static) .step:nth-child(2) .arrow { animation-delay: 0.45s; }
.diagram:not(.st-arrow-static) .step:nth-child(3) .arrow { animation-delay: 0.9s;  }

/* === Source: animations.css :47-50 — st-arrow-pulse keyframes === */
@keyframes st-arrow-pulse {
	0%, 100% {
		transform: translateY(-50%) translateX(0);
		opacity: var(--st-arrow-opacity-min, 0.85);
	}
	50% {
		transform: translateY(-50%) translateX(var(--st-arrow-distance, 4px));
		opacity: var(--st-arrow-opacity-max, 1);
	}
}

/* === Source: animations.css :234-239 — .step.active::after gold underline glow === */
.diagram .step.active {
	position: relative;
}
.diagram:not(.st-reveal-off) .step.active::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: inset 0 0 0 0 var(--st-active-glow-color, rgba(201, 164, 73, 0.9));
	animation: st-active-glow 2.6s ease-in-out infinite;
}

/* === Source: animations.css :240-243 — st-active-glow keyframes === */
@keyframes st-active-glow {
	0%, 100% { box-shadow: inset 0 0    0 0 rgba(201, 164, 73, 0); }
	50%      { box-shadow: inset 0 -3px 0 0 var(--st-active-glow-color, rgba(201, 164, 73, 0.9)); }
}

/* ---- Tablet ≥ 768px — 2-col grid, end spans both ---- */
@media (min-width: 768px) {
	.st-diagram-header h2 {
		font-size: 40px;
	}
	.diagram {
		grid-template-columns: 1fr 1fr;
	}
	.diagram .step {
		padding: 28px 24px;
	}
	.diagram .step h3 {
		font-size: 28px;
	}
	/* Right border on odd-positioned (left col) cells; no right border on even (right col) */
	.diagram .step:nth-child(odd)  { border-right: 1px solid var(--line); }
	.diagram .step:nth-child(even) { border-right: 0; }
	/* Reset last-of-type bottom border (final step still needs row separation from .end if shown) */
	.diagram .step:last-of-type { border-bottom: 1px solid var(--line); border-right: 0; }
	/* End box spans full width below the steps */
	.diagram .end {
		grid-column: 1 / -1;
		padding: 28px 24px;
	}
}

/* ---- Desktop ≥ 1025px — match source styles.css :312-345 verbatim ---- */
@media (min-width: 1025px) {
	.st-diagram-header h2 {
		font-size: 48px;
	}
	.diagram {
		grid-template-columns: repeat(4, 1fr) auto;
		align-items: stretch;
	}
	.diagram .step {
		padding: 32px 28px;
		border-right: 1px solid var(--line);
		border-bottom: 0;
	}
	.diagram .step:nth-child(even) {
		border-right: 1px solid var(--line);              /* source has no nth-child rules — restore for all */
	}
	/* Source styles.css :326 — last step KEEPS its right border (separator to .end) */
	.diagram .step:last-of-type {
		border-right: 1px solid var(--line);
		border-bottom: 0;
	}
	.diagram .step h3 {
		font-size: 30px;
	}
	.diagram .step .arrow {
		display: block;
	}
	/* Source styles.css :336 — last step's arrow hidden */
	.diagram .step:last-of-type .arrow {
		display: none;
	}
	.diagram .end {
		grid-column: auto;
		padding: 32px 28px;
		min-width: 220px;
	}
	.diagram .end .v {
		font-size: 32px;
	}
}


/* ============================================================
   smiletrue-core-message
   Source: styles.css :436-442 (.core base + core-head + h2 + .reversal grid + col padding + last-child mint)
           styles.css :354-358 (.reversal .col h4 / .v / .v.strike / .v em / p)
           styles.css :2610-2614 (.core-pull)
           animations.css :440-451 (h2 blur+rise, h4 fade, col p staggered fade)
           animations.css :245-260 (.v.strike::after gold-line scaleX draw)
   Reveal: theme reveal.js seed list needs `.core` AND `.core .reversal` pushed
           (source seeds `.system .core` + `.system .reversal` — both require `.system` ancestor).
   ============================================================ */

/* Wrapper bounds content for max-width control. Default 100% (full). */
.st-core-message-wrapper {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

/* ---- Mobile-first base (default; applies <768px) ---- */
.core {
	background: var(--white);
	padding: 48px 20px 56px;             /* mobile-only — resets to 110 64 96 at ≥1025 */
	border-bottom: 1px solid var(--line);
	box-sizing: border-box;
}

/* === Source: styles.css :437 — .core-head === */
.core-head {
	max-width: 1100px;
	margin-bottom: 32px;                 /* mobile-only — resets to 56 at ≥1025 */
}

/* === Source: styles.css :438 — .core-head h2 === */
.core-head h2 {
	font-size: 36px;                     /* mobile-only — resets to 60 at ≥1025 */
	margin: 16px 0 0;
	line-height: 1.05;
	text-wrap: pretty;
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--ink);
}

/* === Source: styles.css :439 — .core-head h2 em === */
.core-head h2 em {
	color: var(--teal-700);
	display: inline;
	font-style: italic;
	font-weight: 400;
}

/* === Source: styles.css :440 — .reversal === */
.reversal {
	border: 1px solid var(--line);
	border-bottom: none;
	display: grid;
	grid-template-columns: 1fr;          /* mobile: single column stack */
}

/* === Source: styles.css :441 — .reversal .col === */
.reversal .col {
	padding: 28px 20px;                  /* mobile-only — resets to 48 48 at ≥1025 */
	border-bottom: 1px solid var(--line); /* mobile: divider between stacked cols */
}
.reversal .col:last-child {
	border-bottom: none;
}

/* Source styles.css :442 — `.col:last-child { background: var(--mint) }` — left as
   editor default (col_bg field), so editor can override per-row. The repeater's
   col_bg field writes `background:` directly via Elementor's CURRENT_ITEM selector. */

/* === Source: styles.css :354 — .reversal .col h4 === */
.reversal .col h4 {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin: 0 0 22px;
	color: var(--ink-mute);
}

/* === Source: styles.css :355 — .reversal .col .v === */
.reversal .col .v {
	font-family: var(--serif);
	font-size: 24px;                     /* mobile-only — resets to 36 at ≥1025 */
	font-weight: 400;
	letter-spacing: -0.015em;
	line-height: 1.1;
	margin: 0 0 16px;
	color: var(--ink);
}

/* === Source: styles.css :356 — .v.strike (no underline, ink-mute, line drawn by ::after) === */
.reversal .col .v.strike {
	color: var(--ink-mute);
	text-decoration: none;               /* source uses ::after pseudo line, not text-decoration */
	position: relative;
}

/* === Source: styles.css :357 — .v em === */
.reversal .col .v em {
	font-style: italic;
	color: var(--teal-700);
}

/* === Source: styles.css :358 — col body paragraph === */
.reversal .col > p:not(.v) {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-soft);
}

/* === Source: styles.css :2610-2614 — .core-pull === */
.core-pull {
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--gold-deep);
	text-align: center;
}

/* ============================================================
   Reveal staggers — source animations.css :440-451 + :245-260.
   Per Rule 5: widget-scoped animations live with their widget.
   Trigger: theme reveal.js adds .in to .core AND .reversal (separately seeded).
   Disabled via .st-reveal-off when editor toggles show_reveal=no.
   ============================================================ */

/* === Source: animations.css :441-444 — h2 initial (blur + translate) === */
.core:not(.st-reveal-off) .core-head h2 {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	filter: blur(6px);
	transition: opacity 1.1s ease 0.1s,
	            transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s,
	            filter 1.1s ease 0.1s;
}
/* === Source: animations.css :445 — h2 on .core.in === */
.core.in:not(.st-reveal-off) .core-head h2 {
	opacity: 1;
	transform: none;
	filter: blur(0);
}

/* === Source: animations.css :447 — h4 initial === */
.core:not(.st-reveal-off) .reversal .col h4 {
	opacity: 0;
	transform: translate3d(0, 10px, 0);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
/* === Source: animations.css :448 — col p initial === */
.core:not(.st-reveal-off) .reversal .col p {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
/* === Source: animations.css :449 — h4 on .reversal.in === */
.core:not(.st-reveal-off) .reversal.in .col h4 {
	opacity: 1;
	transform: none;
	transition-delay: 0.30s;
}
/* === Source: animations.css :450-451 — col p staggered === */
.core:not(.st-reveal-off) .reversal.in .col:nth-child(1) p {
	opacity: 1;
	transform: none;
	transition-delay: 0.45s;
}
.core:not(.st-reveal-off) .reversal.in .col:nth-child(2) p {
	opacity: 1;
	transform: none;
	transition-delay: 0.55s;
}

/* === Source: animations.css :254-259 — .v.strike::after gold line === */
.core:not(.st-reveal-off) .reversal .col .v.strike::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 52%;
	height: 2px;
	background: var(--st-strike-color, var(--gold));
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.7s;
}
/* === Source: animations.css :260 — strike line on .reversal.in === */
.core:not(.st-reveal-off) .reversal.in .col .v.strike::after {
	transform: scaleX(1);
}

/* When reveal disabled, strike line still renders (static) for visual parity. */
.core.st-reveal-off .reversal .col .v.strike::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 52%;
	height: 2px;
	background: var(--st-strike-color, var(--gold));
}

/* ---- Tablet ≥ 768px — 2-col grid, intermediate type ---- */
@media (min-width: 768px) {
	.core {
		padding: 72px 40px 64px;
	}
	.core-head {
		margin-bottom: 40px;
	}
	.core-head h2 {
		font-size: 48px;
	}
	.reversal {
		grid-template-columns: 1fr 1fr;
	}
	.reversal .col {
		padding: 36px 32px;
		border-bottom: none;
		border-right: 1px solid var(--line);
	}
	.reversal .col:last-child {
		border-right: none;
	}
	.reversal .col .v {
		font-size: 30px;
	}
}

/* ---- Desktop ≥ 1025px — match source styles.css :436-442 verbatim ---- */
@media (min-width: 1025px) {
	.core {
		padding: 110px 64px 96px;
	}
	.core-head {
		margin-bottom: 56px;
	}
	.core-head h2 {
		font-size: 60px;
	}
	.reversal .col {
		padding: 48px 48px;
	}
	.reversal .col .v {
		font-size: 36px;
	}
}


/* ===========================================================================
   TIER CARDS (#9) — smiletrue-tier-cards
   Source: styles.css :187-211, animations.css :187-210, :621-648
   Reveal seed: `.choice .paths` already in reveal.js seed list — no push needed.
   =========================================================================== */

/* --- Base styles (shared across all breakpoints) --- */

/* Source: styles.css :187 */
.choice {
	background: var(--teal-900);
	color: var(--white);
}

/* Source: styles.css :188 */
.choice .head {
	display: grid;
	grid-template-columns: 1fr;
	align-items: end;
}

/* Source: styles.css :189 — margin shorthand resets browser default h2 top+bottom margins */
.choice .head h2 {
	color: var(--white);
	margin: 0;
}

/* Source: styles.css :190 */
.choice .head h2 em {
	color: var(--gold-soft);
}

/* Source: styles.css :191 — margin: 0 resets browser default p margins */
.choice .head .sub {
	color: rgba(255,255,255,0.78);
	line-height: 1.6;
	margin: 0;
}

/* Source: styles.css :192 — 1px gap + teal bg = hairline dividers between cards */
.choice .paths {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.08);
}

/* Source: styles.css :193 */
.choice .path {
	background: var(--teal-800);
	display: flex;
	flex-direction: column;
}

/* Source: styles.css :194 */
.choice .path.featured {
	background: var(--white);
	color: var(--ink);
	position: relative;
}

/* Source: styles.css :195 — gold top bar on featured card */
.choice .path.featured::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--gold);
}

/* Source: styles.css :196 — margin: 0 resets browser default h3 top+bottom margins */
.choice .path .name {
	font-family: var(--serif);
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0;
}

/* Source: styles.css :197 */
.choice .path .name em {
	font-style: italic;
	font-weight: 500;
	color: var(--gold-soft);
}

/* Source: styles.css :198 */
.choice .path.featured .name em {
	color: var(--teal-700);
}

/* Source: styles.css :199 */
.choice .path .price {
	font-family: var(--serif);
	font-weight: 400;
	letter-spacing: -0.025em;
	line-height: 1;
}

/* Source: styles.css :200 */
.choice .path .price-note {
	font-family: var(--mono);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.65);
}

/* Source: styles.css :201 */
.choice .path.featured .price-note {
	color: var(--ink-mute);
}

/* Source: styles.css :202 */
.choice .path ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	flex: 1;
	line-height: 1.5;
}

/* Source: styles.css :203 */
.choice .path li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

/* Source: styles.css :204 */
.choice .path li::before {
	content: "+";
	color: var(--gold-soft);
	font-family: var(--mono);
	flex-shrink: 0;
}

/* Source: styles.css :205 */
.choice .path.featured li::before {
	color: var(--teal-700);
}

/* Source: styles.css :206-210 */
.choice .featured-tag {
	position: absolute;
	top: 16px;
	right: 16px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--gold-deep);
	background: var(--gold-50);
	padding: 4px 10px;
}

/* Source: styles.css :445-452 — .system .choice .footnote (system-page override used as default) */
/* margin: 0 resets browser p margins; Elementor footnote_margin_top control adds back top spacing */
.choice .footnote {
	color: rgba(255,255,255,0.78);
	max-width: 60ch;
	line-height: 1.55;
	font-family: var(--serif);
	font-style: italic;
	margin: 0;
}

/* --- Hover lift (source: animations.css :208-210) — not reveal-gated --- */
.choice .path {
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.choice .path:hover {
	transform: translateY(-4px);
}
.choice .path.featured:hover {
	box-shadow: 0 36px 72px -28px rgba(201, 164, 73, 0.7);
}

/* --- Reveal animations — source: animations.css :188-210 --- */

/* Initial hidden state for cards */
.choice:not(.st-reveal-off) .paths .path {
	opacity: 0;
	transform: translate3d(0, 36px, 0);
	transition: opacity 0.9s ease, transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Card rise — staggered on .paths.in */
.choice:not(.st-reveal-off) .paths.in .path:nth-child(1) { transition-delay: 0.10s; opacity: 1; transform: none; }
.choice:not(.st-reveal-off) .paths.in .path:nth-child(2) { transition-delay: 0.25s; opacity: 1; transform: none; }
.choice:not(.st-reveal-off) .paths.in .path:nth-child(3) { transition-delay: 0.40s; opacity: 1; transform: none; }

/* Featured card gold glow on reveal */
.choice:not(.st-reveal-off) .paths.in .path.featured {
	box-shadow: 0 30px 60px -30px rgba(201, 164, 73, 0.55);
}

/* Featured gold top bar — st-line-grow is in theme animations.css */
.choice:not(.st-reveal-off) .paths.in .path.featured::before {
	animation: st-line-grow 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.6s both;
	transform-origin: left center;
}

/* Featured tag fade up */
.choice:not(.st-reveal-off) .paths.in .path.featured .featured-tag {
	animation: st-fade-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.9s both;
}

/* --- Price blur-in — source: animations.css :641-648 --- */

/* Initial state */
.choice:not(.st-reveal-off) .path .price {
	display: inline-block;
	filter: blur(8px);
	opacity: 0;
	transition: filter 0.9s ease, opacity 0.9s ease;
}

/* Reveal per card */
.choice:not(.st-reveal-off) .paths.in .path:nth-child(1) .price { filter: blur(0); opacity: 1; transition-delay: 0.45s; }
.choice:not(.st-reveal-off) .paths.in .path:nth-child(2) .price { filter: blur(0); opacity: 1; transition-delay: 0.60s; }
.choice:not(.st-reveal-off) .paths.in .path:nth-child(3) .price { filter: blur(0); opacity: 1; transition-delay: 0.75s; }

/* --- Bullet stagger — source: animations.css :621-638 --- */

/* Base animation for all revealed bullets */
.choice:not(.st-reveal-off) .paths.in .path li {
	animation: st-fade-up 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Path 1 bullet delays */
.choice:not(.st-reveal-off) .paths.in .path:nth-child(1) li:nth-child(1) { animation-delay: 0.55s; }
.choice:not(.st-reveal-off) .paths.in .path:nth-child(1) li:nth-child(2) { animation-delay: 0.62s; }
.choice:not(.st-reveal-off) .paths.in .path:nth-child(1) li:nth-child(3) { animation-delay: 0.69s; }
.choice:not(.st-reveal-off) .paths.in .path:nth-child(1) li:nth-child(4) { animation-delay: 0.76s; }

/* Path 2 bullet delays */
.choice:not(.st-reveal-off) .paths.in .path:nth-child(2) li:nth-child(1) { animation-delay: 0.70s; }
.choice:not(.st-reveal-off) .paths.in .path:nth-child(2) li:nth-child(2) { animation-delay: 0.77s; }
.choice:not(.st-reveal-off) .paths.in .path:nth-child(2) li:nth-child(3) { animation-delay: 0.84s; }
.choice:not(.st-reveal-off) .paths.in .path:nth-child(2) li:nth-child(4) { animation-delay: 0.91s; }
.choice:not(.st-reveal-off) .paths.in .path:nth-child(2) li:nth-child(5) { animation-delay: 0.98s; }

/* Path 3 bullet delays */
.choice:not(.st-reveal-off) .paths.in .path:nth-child(3) li:nth-child(1) { animation-delay: 0.85s; }
.choice:not(.st-reveal-off) .paths.in .path:nth-child(3) li:nth-child(2) { animation-delay: 0.92s; }
.choice:not(.st-reveal-off) .paths.in .path:nth-child(3) li:nth-child(3) { animation-delay: 0.99s; }
.choice:not(.st-reveal-off) .paths.in .path:nth-child(3) li:nth-child(4) { animation-delay: 1.06s; }
.choice:not(.st-reveal-off) .paths.in .path:nth-child(3) li:nth-child(5) { animation-delay: 1.13s; }

/* --- Tablet ≥ 768px --- */
@media (min-width: 768px) {
	/* Header goes side-by-side at tablet */
	.choice .head {
		grid-template-columns: 1fr 1.2fr;
		gap: 32px;
	}
	/* Cards stay single-column at tablet — 3 cards at ~242px each is too cramped.
	   3-column layout kicks in at ≥1025px below. */
}

/* --- Desktop ≥ 1025px — match source styles.css :187-211 verbatim --- */
@media (min-width: 1025px) {
	.choice .head {
		grid-template-columns: 1fr 1.2fr;
		gap: 60px;
		align-items: end;
		margin-bottom: 56px;
	}
	.choice .head h2 {
		font-size: 60px;
		margin: 16px 0 0;
	}
	.choice .head .sub {
		font-size: 16px;
	}
	.choice .paths {
		grid-template-columns: repeat(3, 1fr);
		gap: 1px;
	}
	.choice .path {
		padding: 36px 32px;
		gap: 14px;
	}
	.choice .path .name {
		font-size: 30px;
	}
	.choice .path .price {
		font-size: 56px;
	}
	.choice .path .price-note {
		font-size: 11px;
	}
	.choice .path ul {
		margin: 16px 0 28px;
		gap: 10px;
		font-size: 13.5px;
	}
	.choice .footnote {
		margin-top: 36px;
		font-size: 14px;
	}
}




/* ============================================================
   HOMEPAGE RELAPSE  (system.jsx :112-143, styles.css :456-486,
                      animations.css :454-485)
   ============================================================ */

.relapse { background: var(--paper); border-bottom: 1px solid var(--line); }
.relapse .relapse-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.relapse .copy h2 { margin: 0; }
.relapse .copy .sub-h {
	font-family: var(--serif); font-style: italic; font-size: 24px;
	color: var(--teal-700); font-weight: 500; margin: 0 0 24px;
}
.relapse .copy .lede { max-width: 50ch; margin: 0; }
.relapse .copy .lede + .lede { margin-top: 14px; }
.relapse .art .art-card {
	border: 1px solid var(--line); background: var(--white);
	padding: 36px 36px 40px; position: relative;
}
.relapse .art-tag {
	font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--gold-deep);
	margin-bottom: 28px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.relapse .art-stat {
	display: grid; grid-template-columns: 64px 1fr; gap: 20px;
	align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line-soft);
}
.relapse .art-stat:last-child { border-bottom: none; }
.relapse .art-stat .num {
	font-family: var(--serif); font-size: 44px; font-weight: 400;
	color: var(--teal-700); line-height: 1; letter-spacing: -0.02em;
}
.relapse .art-stat .lbl {
	font-family: var(--sans); font-size: 14.5px; line-height: 1.4; color: var(--ink-soft);
}

/* Reveal — rebased from .system .relapse in animations.css */
.relapse:not(.st-reveal-off) {
	opacity: 0; transform: translate3d(0, 24px, 0);
	transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.relapse.in { opacity: 1; transform: none; }
.relapse:not(.st-reveal-off) .copy > * {
	opacity: 0; transform: translate3d(-18px, 0, 0);
	transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.relapse.in .copy > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.10s; }
.relapse.in .copy > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.20s; }
.relapse.in .copy > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.30s; }
.relapse.in .copy > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.40s; }
.relapse.in .copy > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.50s; }
.relapse:not(.st-reveal-off) .art .art-card {
	opacity: 0; transform: translate3d(28px, 0, 0);
	transition: opacity 1s ease 0.25s, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.25s, box-shadow 0.4s ease;
	box-shadow: 0 12px 36px -24px rgba(13, 79, 92, 0.18);
}
.relapse.in .art .art-card { opacity: 1; transform: none; }
.relapse .art .art-card:hover {
	box-shadow: 0 30px 60px -28px rgba(13, 79, 92, 0.35); transform: translateY(-4px);
}
.relapse:not(.st-reveal-off) .art-stat {
	opacity: 0; transform: translate3d(0, 12px, 0);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.relapse.in .art-stat:nth-of-type(1) { opacity: 1; transform: none; transition-delay: 0.55s; }
.relapse.in .art-stat:nth-of-type(2) { opacity: 1; transform: none; transition-delay: 0.70s; }
.relapse.in .art-stat:nth-of-type(3) { opacity: 1; transform: none; transition-delay: 0.85s; }
.relapse .art-stat .num {
	background: linear-gradient(180deg, var(--gold) 0%, var(--teal-700) 100%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.relapse .art-stat:hover .num { transform: scale(1.08); }

@media (min-width: 768px) {
	.relapse .relapse-grid { grid-template-columns: 1.1fr 1fr; gap: 60px; }
}
@media (min-width: 1025px) {
	.relapse .relapse-grid { gap: 80px; }
}


/* ============================================================
   WHY SMILETRUE  (system.jsx :146-172, styles.css :489-517,
                   animations.css :488-513)
   ============================================================ */

.why { background: var(--white); border-bottom: 1px solid var(--line); }
.why .head { max-width: 880px; }
.why .head h2 { margin: 0; }
.why .why-grid { display: grid; grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); }
.why .problems { padding: 48px 44px; background: var(--mint); }
.why .problems h4 {
	font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--ink-mute); margin: 0 0 24px;
}
.why .problems ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; }
.why .problems li {
	font-family: var(--serif); font-size: 22px; font-weight: 400; line-height: 1.3;
	color: var(--ink); padding-left: 28px; position: relative;
}
.why .problems li::before {
	content: "\00D7"; position: absolute; left: 0; top: -2px;
	font-family: var(--serif); font-size: 24px; color: var(--gold-deep);
	display: inline-block; transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.why .problems li:hover::before { transform: rotate(90deg) scale(1.2); }
.why .answer {
	padding: 48px 48px; background: var(--white);
	display: flex; flex-direction: column; gap: 18px;
}
.why .answer p {
	margin: 0; font-family: var(--serif); font-size: 22px; line-height: 1.45;
	color: var(--ink); font-weight: 400; letter-spacing: -0.005em;
}
.why .answer p em { font-style: italic; color: var(--teal-700); }
.why .answer .kicker {
	margin-top: 6px; font-family: var(--sans); font-size: 14px; line-height: 1.5;
	color: var(--ink-mute); letter-spacing: 0;
	padding-top: 22px; border-top: 1px solid var(--line);
}

/* Reveal — rebased from .system .why in animations.css */
.why:not(.st-reveal-off) .why-grid {
	opacity: 0; transform: translate3d(0, 26px, 0);
	transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.why.in .why-grid { opacity: 1; transform: none; }
.why:not(.st-reveal-off) .problems li {
	opacity: 0; transform: translate3d(-14px, 0, 0);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.why.in .problems li:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.30s; }
.why.in .problems li:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.45s; }
.why.in .problems li:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.60s; }
.why:not(.st-reveal-off) .answer p {
	opacity: 0; transform: translate3d(14px, 0, 0);
	transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.why.in .answer p:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.45s; }
.why.in .answer p:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.60s; }
.why.in .answer p:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.85s; }

@media (min-width: 1025px) {
	.why .why-grid { grid-template-columns: 1fr 1.4fr; }
	.why .problems { border-right: 1px solid var(--line); }
}


/* ============================================================
   EXPERIENCE BAND  (system.jsx :175-185, styles.css :2638-2656)
   No animations.
   ============================================================ */

.experience-band {
	background: var(--mint); border-bottom: 1px solid var(--line);
	border-top: 1px solid var(--line);
}
.experience-band-inner { max-width: 1000px; margin: 0 auto; text-align: center; }
.experience-band .experience-line {
	font-family: var(--serif); font-size: 28px; line-height: 1.4;
	color: var(--ink); margin: 18px 0 18px; font-weight: 400; letter-spacing: -0.005em;
}
.experience-band .experience-line em { color: var(--teal-700); font-style: italic; font-weight: 500; }
.experience-band .experience-foot {
	font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em;
	text-transform: uppercase; color: var(--ink-soft); margin: 0;
}


/* ============================================================
   HOW IT WORKS  (system.jsx :188-207, styles.css :520-540,
                  animations.css :516-541)
   ============================================================ */

.how { background: var(--paper); border-bottom: 1px solid var(--line); }
.how .head h2 { margin: 0; }
.how .how-grid {
	display: grid; grid-template-columns: 1fr;
	border-top: 2px solid var(--teal-800); position: relative;
}
.how .how-grid::before {
	content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
	background: var(--teal-800);
	transform: scaleX(0); transform-origin: left center;
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.how.in .how-grid::before { transform: scaleX(1); }
.how .how-step {
	padding: 32px 28px 36px;
	display: flex; flex-direction: column; gap: 14px; background: var(--white);
	border-bottom: 1px solid var(--line);
	transition: background 0.3s ease;
}
.how .how-step:last-child { border-bottom: none; }
.how .how-step .n {
	font-family: var(--serif); font-size: 56px; font-weight: 400;
	line-height: 0.9; letter-spacing: -0.03em;
	background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.how .how-step h3 {
	font-family: var(--serif); font-size: 24px; font-weight: 500;
	letter-spacing: -0.01em; margin: 0;
}
.how .how-step p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.how .how-step:hover { background: var(--mint); transform: translateY(-3px); }
.how .how-step:hover .n { transform: translateY(-4px) scale(1.04); }

/* Reveal — rebased from .system .how in animations.css */
.how:not(.st-reveal-off) .how-step {
	opacity: 0; transform: translate3d(0, 26px, 0);
	transition: opacity 0.85s ease, transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s ease;
}
.how.in .how-step:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.20s; }
.how.in .how-step:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.35s; }
.how.in .how-step:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.50s; }
.how.in .how-step:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.65s; }

@media (min-width: 768px) {
	.how .how-grid { grid-template-columns: repeat(2, 1fr); }
	.how .how-step { border-right: 1px solid var(--line); }
	.how .how-step:nth-child(2n) { border-right: none; }
	.how .how-step:nth-last-child(-n+2) { border-bottom: none; }
}
@media (min-width: 1025px) {
	.how .how-grid { grid-template-columns: repeat(4, 1fr); }
	.how .how-step { border-bottom: none; }
	.how .how-step:last-child { border-right: none; }
	.how .how-step:nth-child(2n) { border-right: 1px solid var(--line); }
}


/* ============================================================
   HEALTH BAND  (system.jsx :210-221, styles.css :543-553,
                 animations.css :544-562)
   ============================================================ */

.health {
	background: var(--teal-900); color: var(--white);
	border-bottom: 1px solid rgba(255,255,255,0.06);
	position: relative; overflow: hidden;
}
.health .health-inner { max-width: 720px; }
.health h2 { font-size: 52px; margin: 0; color: var(--white); }
.health h2 em { color: var(--gold-soft); }
.health .lede { color: rgba(255,255,255,0.82); max-width: 60ch; margin: 0; }
.health .lede + .lede { margin-top: 12px; }

/* Ambient glow orb — animations.css :545-552 */
.health::before {
	content: ""; position: absolute;
	width: 480px; height: 480px; border-radius: 50%;
	background: radial-gradient(circle, rgba(201,164,73,0.18) 0%, transparent 70%);
	top: -180px; right: -120px;
	opacity: 0; transform: scale(0.6);
	transition: opacity 1.4s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.health.in::before { opacity: 1; transform: scale(1); }

/* Reveal — rebased from .system .health in animations.css */
.health:not(.st-reveal-off) .health-inner > * {
	opacity: 0; transform: translate3d(0, 18px, 0);
	transition: opacity 0.95s ease, transform 0.95s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.health.in .health-inner > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.10s; }
.health.in .health-inner > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.25s; }
.health.in .health-inner > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.45s; }
.health.in .health-inner > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.60s; }


/* ============================================================
   WHY PATIENTS  (system.jsx :224-245, styles.css :556-579,
                  animations.css :565-594)
   ============================================================ */

.patients { background: var(--white); border-bottom: 1px solid var(--line); }
.patients .head h2 { margin: 0; }
.patients .patients-list {
	list-style: none; padding: 0; margin: 0;
	display: grid; grid-template-columns: 1fr;
	border-top: 1px solid var(--line);
}
.patients .patients-list li {
	display: grid; grid-template-columns: 64px 1fr; gap: 24px; align-items: center;
	padding: 32px 0 32px 0; border-bottom: 1px solid var(--line);
	position: relative;
}
.patients .patients-list .n {
	font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
	color: var(--gold-deep); transition: color 0.3s ease;
}
.patients .patients-list .t {
	font-family: var(--serif); font-size: 22px; font-weight: 500;
	letter-spacing: -0.01em; line-height: 1.3;
}
.patients .patients-list li:hover { background: linear-gradient(90deg, var(--mint), transparent); }
.patients .patients-list li:hover .n { color: var(--teal-700); }

/* Reveal — rebased from .system .patients in animations.css */
.patients:not(.st-reveal-off) .patients-list li {
	opacity: 0; transform: translate3d(-12px, 0, 0);
	transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.3s ease;
}
.patients.in .patients-list li:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.10s; }
.patients.in .patients-list li:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.18s; }
.patients.in .patients-list li:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.26s; }
.patients.in .patients-list li:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.34s; }
.patients.in .patients-list li:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.42s; }
.patients.in .patients-list li:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.50s; }
.patients.in .patients-list li:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.58s; }

@media (min-width: 1025px) {
	.patients .patients-list { grid-template-columns: repeat(2, 1fr); }
	.patients .patients-list li:nth-child(odd) { padding-right: 48px; border-right: 1px solid var(--line); }
	.patients .patients-list li:nth-child(even) { padding-left: 48px; }
}

/* ========================================================================
   How It Works page sections
   Source: how-it-works.css — rebased from .hiw-page .X → bare .X
   ======================================================================== */

/* === HIW Hero === */
.hiw-hero {
  background:
    radial-gradient(ellipse 900px 600px at 88% -10%, rgba(42,129,144,0.06), transparent 70%),
    var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.hiw-hero .display em { color: var(--teal-700); }

/* Gold underline tracks the visible text on each line — ends where the
   heading text ends, never past it. Overrides the theme's inline-block
   + ::after pattern (animations.css :143-163) for this widget only. */
.hiw-hero .display em {
	display: inline;
	background-image: linear-gradient(to right, var(--gold), var(--gold));
	background-repeat: no-repeat;
	background-position: 0 99%;
	background-size: 100% 2px;
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
}
.hiw-hero .display em::after { content: none; }
.hiw-hero-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 72px;
  align-items: start;
}
.hiw-hero h1 {
  font-family: var(--serif);
  font-size: 56px;
  font-weight: 400;
  margin: 22px 0 32px;
  max-width: 18ch;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
.hiw-hero .body {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 54ch;
  margin: 0;
  font-weight: 400;
}
.hiw-hero .body + .body { margin-top: 16px; }
.hiw-hero .actions { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; }

/* Summary box */
.hiw-summary {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 32px 32px 28px;
  position: relative;
  margin-top: 56px;
}
.hiw-summary::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold);
}
.hiw-summary .head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 18px;
}
.hiw-summary .row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.hiw-summary .row:last-child { border-bottom: 0; padding-bottom: 0; }
.hiw-summary .row .k {
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teal-800);
  letter-spacing: 0.01em;
}
.hiw-summary .row .v {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
  margin-top: 4px;
}
.hiw-summary .row .v em { color: var(--teal-700); font-style: italic; }

/* === HIW System Bar === */
.hiw-systembar {
  background: var(--teal-900);
  color: rgba(255,255,255,0.85);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.hiw-systembar .gold {
  color: var(--gold-soft);
  font-style: normal;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* === HIW Process Flow === */
.hiw-flow { background: var(--white); }
.hiw-flow .display em { color: var(--teal-700); }
.hiw-flow .head {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  align-items: end;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--line-soft);
}
.hiw-flow .head h2 {
  font-size: 56px;
  margin: 16px 0 0;
  max-width: 20ch;
  line-height: 1.05;
}
.hiw-flow .head .sub {
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.55;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
  padding-bottom: 6px;
}
.hiw-flow .head .sub strong { font-style: normal; color: var(--teal-700); font-weight: 500; }

.hiw-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  background: var(--line);
  margin-bottom: 32px;
}
.hiw-step {
  background: var(--white);
  padding: 36px 32px 32px;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 280px;
}
.hiw-step .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--teal-700);
  margin-bottom: 14px;
}
.hiw-step h3 {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--ink);
}
.hiw-step h3 em { color: var(--teal-700); font-style: italic; }
.hiw-step p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.hiw-step .footer-line {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: auto;
  padding-top: 20px;
}

.hiw-diff {
  grid-column: 1 / -1;
  background: var(--mint);
  padding: 44px 40px;
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  gap: 40px;
  align-items: center;
  border-top: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
}
.hiw-diff .badge {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hiw-diff .badge .step-mark {
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--teal-800);
  letter-spacing: -0.01em;
}
.hiw-diff h3 {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0 0 14px;
  color: var(--teal-900);
}
.hiw-diff h3 em { font-style: italic; color: var(--teal-700); }
.hiw-diff p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 56ch; }
.hiw-diff .quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--teal-900);
  border-left: 2px solid var(--gold);
  padding: 4px 0 4px 18px;
  margin: 0;
}

.hiw-flow .closing {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 40px;
  padding-top: 32px;
  border-top: 1px solid var(--line-soft);
}
.hiw-flow .closing .lead {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  white-space: nowrap;
}
.hiw-flow .closing .v {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 50ch;
  margin: 0;
}
.hiw-flow .closing .v em { color: var(--teal-700); font-style: italic; }

/* === HIW Care Standards === */
.hiw-care {
  background: var(--paper);
  border-top: 1px solid var(--line-soft);
}
.hiw-care .display em { color: var(--teal-700); }
.hiw-care .head { text-align: center; }
.hiw-care .head h2 {
  font-size: 56px;
  margin: 18px auto 18px;
  max-width: 22ch;
  line-height: 1.05;
}
.hiw-care .head p {
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 52ch;
}
.hiw-care-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  max-width: 1200px;
  margin: 0 auto;
}
.hiw-care-grid .item {
  background: var(--white);
  padding: 40px 32px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 18px;
  align-items: start;
}
.hiw-care-grid .item .check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mint);
  border: 1px solid var(--teal-300);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  flex-shrink: 0;
}
.hiw-care-grid .item .check::before {
  content: "";
  width: 10px; height: 5px;
  border-left: 1.5px solid var(--teal-800);
  border-bottom: 1.5px solid var(--teal-800);
  transform: rotate(-45deg) translate(1px, -2px);
}
.hiw-care-grid .item .t {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink);
  line-height: 1.35;
  display: block;
}
.hiw-care-grid .item .meta {
  display: block;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-mute);
  margin-top: 6px;
}

/* === HIW Health First === */
.hiw-health {
  background: var(--white);
  border-top: 1px solid var(--line-soft);
}
.hiw-health .display em { color: var(--teal-700); }
.hiw-health-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}
.hiw-health h2 {
  font-size: 52px;
  margin: 18px 0 0;
  line-height: 1.05;
}
.hiw-health .hiw-health-sub {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 16px 0 0;
}
.hiw-health .body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 16px;
  max-width: 50ch;
}
.hiw-health .body:first-of-type {
  font-family: var(--serif);
  font-size: 22px;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
  border-left: 2px solid var(--gold);
  padding-left: 22px;
  margin-bottom: 28px;
}
.hiw-health .meta-row {
  display: flex;
  gap: 32px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
  flex-wrap: wrap;
}
.hiw-health .meta-row span::before {
  content: "·";
  color: var(--gold);
  margin-right: 8px;
}

/* === HIW Relapse Band === */
.hiw-relapse {
  background: var(--teal-900);
  color: var(--white);
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 80px;
  align-items: center;
}
.hiw-relapse h2 {
  font-family: var(--serif);
  font-size: 48px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  margin: 18px 0 20px;
  max-width: 16ch;
}
.hiw-relapse h2 em { color: var(--gold-soft); font-style: italic; }
.hiw-relapse .body {
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  color: rgba(255,255,255,0.82);
  margin: 0 0 14px;
  max-width: 52ch;
}
.hiw-relapse .body strong { color: var(--gold-soft); font-weight: 500; }
.hiw-relapse .actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hiw-relapse .pull {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 36px 32px;
  position: relative;
}
.hiw-relapse .pull::before {
  content: "";
  position: absolute; top: -1px; left: 0; width: 80px; height: 2px;
  background: var(--gold);
}
.hiw-relapse .pull .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 18px;
  display: block;
}
.hiw-relapse .pull .v {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--white);
  margin: 0;
}
.hiw-relapse .pull .meta {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}

/* === HIW FAQ Accordion === */
.hiw-faq { background: var(--paper); }
.hiw-faq .display em { color: var(--teal-700); }
.hiw-faq .head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: end;
}
.hiw-faq .head h2 {
  font-size: 56px;
  margin: 16px 0 0;
  max-width: 16ch;
  line-height: 1.06;
}
.hiw-faq .head .sub {
  font-family: var(--serif);
  font-size: 18px;
  font-style: italic;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
  max-width: 40ch;
  padding-bottom: 8px;
}
.hiw-faq-list {
  max-width: 1080px;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line);
}
.hiw-faq-item { border-bottom: 1px solid var(--line); position: relative; }
.hiw-faq-item:last-child { border-bottom: 0; }
.hiw-faq-item.is-open { background: var(--teal-50); }
.hiw-faq-item .row {
  display: grid;
  grid-template-columns: 80px 1fr 56px;
  gap: 32px;
  padding: 28px 36px;
  align-items: center;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}
.hiw-faq-item .row:hover { background: var(--teal-50); }
.hiw-faq-item.is-open .row { background: transparent; padding-bottom: 16px; }
.hiw-faq-item .num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--teal-700);
  margin: 0;
}
.hiw-faq-item .q {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--ink);
  margin: 0;
}
.hiw-faq-item.is-open .q { color: var(--teal-900); }
.hiw-faq-item .toggle {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  position: relative;
  flex-shrink: 0;
  justify-self: end;
  transition: all 0.2s ease;
}
.hiw-faq-item.is-open .toggle { background: var(--teal-800); border-color: var(--teal-800); }
.hiw-faq-item .toggle::before,
.hiw-faq-item .toggle::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--teal-800);
  transition: all 0.2s ease;
  transform: translate(-50%, -50%);
}
.hiw-faq-item .toggle::before { width: 12px; height: 1.5px; }
.hiw-faq-item .toggle::after { width: 1.5px; height: 12px; }
.hiw-faq-item.is-open .toggle::before,
.hiw-faq-item.is-open .toggle::after { background: var(--white); }
.hiw-faq-item.is-open .toggle::after { height: 0; }
.hiw-faq-item .a-wrap { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.hiw-faq-item.is-open .a-wrap { max-height: 400px; }
.hiw-faq-item .a {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
  padding: 0 36px 32px 148px;
  max-width: 72ch;
}

/* === HIW Consultation === */
.hiw-consult {
  background: var(--white);
  border-top: 1px solid var(--line-soft);
}
.hiw-consult .display em { color: var(--teal-700); }
.hiw-consult-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 64px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
}
.hiw-consult h2 {
  font-size: 48px;
  margin: 18px 0 28px;
  max-width: 22ch;
  line-height: 1.06;
}
.hiw-consult .body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 18px;
  max-width: 56ch;
}
.hiw-consult .req { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-soft); }
.hiw-consult .req .lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-700);
  margin-bottom: 14px;
  display: block;
}
.hiw-consult .req ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.hiw-consult .req li {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--ink);
  padding-left: 22px;
  position: relative;
}
.hiw-consult .req li::before {
  content: "";
  position: absolute; left: 0; top: 11px;
  width: 10px; height: 1px;
  background: var(--gold);
}
.hiw-consult .side {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 32px 28px;
  position: relative;
  margin-top: 38px;
}
.hiw-consult .side::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--gold);
}
.hiw-consult .side .lbl {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 18px;
  display: block;
}
.hiw-consult .side .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--line-soft);
}
.hiw-consult .side .row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.hiw-consult .side .row .k {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.hiw-consult .side .row .v {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--teal-700);
  text-transform: uppercase;
}
.hiw-consult .side .note {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.5;
}
.hiw-consult .side .note + .note { margin-top: 12px; padding-top: 0; border-top: 0; }

/* === HIW Responsive === */
@media (max-width: 1024px) {
  .hiw-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .hiw-summary { margin-top: 0; }
  .hiw-flow .head { grid-template-columns: 1fr; gap: 24px; }
  .hiw-steps { grid-template-columns: repeat(2, 1fr); }
  .hiw-diff { grid-template-columns: 180px 1fr; }
  .hiw-diff .quote { display: none; }
  .hiw-health-grid { grid-template-columns: 1fr; gap: 40px; }
  .hiw-health h2 { max-width: none; }
  .hiw-relapse { grid-template-columns: 1fr; gap: 48px; }
  .hiw-faq .head { grid-template-columns: 1fr; gap: 24px; }
  .hiw-consult-grid { grid-template-columns: 1fr; gap: 48px; }
  .hiw-consult .side { margin-top: 0; }
  .hiw-care-grid { grid-template-columns: repeat(2, 1fr); }
  .hiw-flow .closing { flex-direction: column; gap: 12px; }
}

@media (max-width: 767px) {
  .hiw-steps { grid-template-columns: 1fr; }
  .hiw-diff { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; }
  .hiw-diff .quote { display: block; }
  .hiw-care-grid { grid-template-columns: 1fr; }
  .hiw-systembar { flex-direction: column; gap: 12px; text-align: center; }
  .hiw-faq-item .row { grid-template-columns: 56px 1fr 40px; gap: 16px; padding: 20px 20px; }
  .hiw-faq-item .a { padding: 0 20px 24px 20px; }
  .hiw-health .meta-row { gap: 16px; }
}

/* === ST HIW CTA wrapper — max-width centering support === */
.st-hiw-cta-wrapper { width: 100%; }

/* ============================================================
   RELAPSE OPTIONS PAGE — .rp-* widget styles
   Ported from styles.css (stripped .relapse-page scope so
   they apply inside Elementor widget wrappers).
   ============================================================ */

/* === 1 HERO === */
.rp-hero {
  background: var(--paper); padding: 64px 64px 80px;
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.rp-hero::before {
  content: ""; position: absolute;
  width: 540px; height: 540px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,164,73,0.10) 0%, transparent 70%);
  top: -180px; right: -160px; pointer-events: none;
}
.rp-hero-inner {
  display: grid; grid-template-columns: 1.25fr 1fr; gap: 80px;
  align-items: start; position: relative; z-index: 1;
}
.rp-hero-copy h1 { font-size: 76px; margin: 18px 0 28px; }
.rp-hero-copy .lede { max-width: 50ch; margin-bottom: 32px; }
.rp-hero-lede2 { margin-top: 14px; max-width: 60ch; }
.rp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.rp-hero-art { padding-top: 12px; }
.rp-hero-card {
  border: 1px solid var(--line); background: var(--white);
  padding: 36px 36px 32px;
  box-shadow: 0 24px 48px -32px rgba(13,79,92,0.22);
  position: relative;
}
.rp-hero-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 3px;
  background: var(--gold);
}
.rp-hero-tag {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-deep);
  padding-bottom: 18px; margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.rp-hero-stack { display: flex; flex-direction: column; }
.rp-hero-row {
  display: grid; grid-template-columns: 64px 1fr; gap: 18px;
  align-items: center; padding: 20px 0;
  border-bottom: 1px solid var(--line-soft);
}
.rp-hero-row:last-child { border-bottom: none; }
.rp-hero-num {
  font-family: var(--serif); font-size: 40px; font-weight: 400;
  background: linear-gradient(180deg, var(--gold) 0%, var(--teal-700) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1; letter-spacing: -0.02em;
}
.rp-hero-lbl {
  font-family: var(--sans); font-size: 15px; line-height: 1.4; color: var(--ink-soft);
}
.rp-hero-foot {
  margin-top: 18px; padding-top: 18px;
  border-top: 1px solid var(--line);
  font-family: var(--serif); font-style: italic; font-size: 14px;
  color: var(--teal-700);
}

/* === 2 FRAME BAND === */
.rp-frame-band {
  padding: 110px 64px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.rp-frame-band::before {
  content: ""; position: absolute;
  width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,164,73,0.10) 0%, transparent 70%);
  top: -180px; left: -120px; pointer-events: none;
}
.rp-frame-band::after {
  content: ""; position: absolute;
  width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(13,79,92,0.08) 0%, transparent 70%);
  bottom: -160px; right: -80px; pointer-events: none;
}
.rp-frame-inner {
  max-width: 1100px; margin: 0 auto; text-align: center;
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.rp-frame-inner .eyebrow { color: var(--gold-deep); }
.rp-frame-rule {
  width: 72px; height: 2px; background: var(--gold); display: block;
  margin: 4px 0;
}
.rp-frame-line {
  font-family: var(--serif); font-size: 48px; line-height: 1.2;
  letter-spacing: -0.02em; color: var(--ink); margin: 0;
  font-weight: 400; max-width: 22ch; text-wrap: balance;
}
.rp-frame-line em { font-style: italic; color: var(--gold-deep); }
.rp-frame-foot {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 12px;
}

/* === 3 HIGHLIGHT === */
.rp-highlight {
  padding: 110px 64px; background: var(--teal-900); color: var(--white);
  position: relative; overflow: hidden;
}
.rp-highlight::before {
  content: ""; position: absolute;
  width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,164,73,0.16) 0%, transparent 70%);
  bottom: -200px; left: -160px; pointer-events: none;
}
.rp-highlight-inner { max-width: 980px; position: relative; z-index: 1; }
.rp-highlight h2 { font-size: 64px; margin: 16px 0 28px; color: var(--white); }
.rp-highlight h2 em { color: var(--gold-soft); }
.rp-highlight-lede {
  font-family: var(--serif); font-style: italic; font-size: 22px;
  color: rgba(255,255,255,0.85); max-width: 60ch; margin: 0 0 44px; line-height: 1.4;
}
.rp-highlight-rules {
  display: grid; gap: 20px;
  border-top: 1px solid rgba(255,255,255,0.15); padding-top: 32px;
}
.rp-h-rule { display: grid; grid-template-columns: 24px 1fr; gap: 18px; align-items: baseline; }
.rp-h-rule .bullet {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold); margin-top: 10px;
}
.rp-h-rule p {
  margin: 0; font-family: var(--serif); font-size: 24px; font-weight: 400;
  line-height: 1.4; color: var(--white); letter-spacing: -0.01em;
}
.rp-h-rule p em { font-style: italic; color: var(--gold-soft); }

/* === 4 APPROACH === */
.rp-approach {
  padding: 110px 64px; background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.rp-approach-head { max-width: 800px; margin-bottom: 56px; }
.rp-approach-head h2 { font-size: 52px; margin: 16px 0 18px; }
.rp-approach-head .lede { max-width: 56ch; }
.rp-approach-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 2px solid var(--teal-800); position: relative;
}
.rp-approach-grid.four { grid-template-columns: repeat(4, 1fr); }
.rp-approach-step {
  padding: 32px 28px 36px; border-right: 1px solid var(--line);
  background: var(--white); display: flex; flex-direction: column; gap: 14px;
  transition: background 0.3s ease, transform 0.35s ease;
}
.rp-approach-step:last-child { border-right: none; }
.rp-approach-step:hover { background: var(--mint); transform: translateY(-3px); }
.rp-approach-step .n {
  font-family: var(--serif); font-size: 56px; font-weight: 400;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 0.9; letter-spacing: -0.03em;
}
.rp-approach-step h3 {
  font-family: var(--serif); font-size: 24px; font-weight: 500;
  letter-spacing: -0.01em; margin: 0;
}
.rp-approach-step p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); }

/* === 5 WHY === */
.rp-why { padding: 110px 64px; background: var(--white); border-bottom: 1px solid var(--line); }
.rp-why-head { max-width: 880px; margin-bottom: 48px; }
.rp-why-head h2 { font-size: 52px; margin: 16px 0 0; }
.rp-why-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.rp-why-card {
  background: var(--paper); padding: 32px 28px;
  display: flex; flex-direction: column; gap: 12px;
}
.rp-why-card:nth-child(4),
.rp-why-card:nth-child(5) { background: var(--white); }
.rp-why-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--gold-deep); }
.rp-why-card h3 {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em; line-height: 1.25; margin: 0; color: var(--ink);
}
.rp-why-card p {
  margin: 0; font-family: var(--serif); font-size: 15.5px;
  line-height: 1.55; color: var(--ink-soft); font-weight: 400;
}

/* === 6 PRICING === */
.rp-pricing { padding: 110px 64px; background: var(--paper); border-bottom: 1px solid var(--line); }
.rp-pricing-head { max-width: 880px; margin-bottom: 48px; }
.rp-pricing-head h2 { font-size: 52px; margin: 16px 0 14px; }
.rp-pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rp-price-card {
  background: var(--white); border: 1px solid var(--line); padding: 36px 32px 32px;
  display: flex; flex-direction: column; gap: 18px; position: relative;
  box-shadow: 0 24px 48px -36px rgba(13,79,92,0.16);
}
.rp-price-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 3px;
  background: var(--gold);
}
.rp-price-card.featured { background: var(--mint); border-color: var(--teal-700); }
.rp-price-card.featured::before { width: 100%; height: 4px; }
.rp-price-flag {
  position: absolute; top: -14px; left: 32px;
  background: var(--ink); color: var(--paper); padding: 6px 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
}
.rp-price-head { display: flex; flex-direction: column; gap: 8px; }
.rp-price-name {
  font-family: var(--serif); font-size: 38px; font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1;
}
.rp-price-pos {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-deep);
}
.rp-price-figure {
  display: flex; align-items: baseline; gap: 14px;
  padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.rp-price-figure .num {
  font-family: var(--serif); font-size: 44px; font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink); line-height: 1;
}
.rp-price-figure .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.rp-price-note {
  margin: 0; font-family: var(--serif); font-style: italic; font-size: 17px;
  line-height: 1.45; color: var(--ink); font-weight: 400;
}
.rp-price-incl {
  margin-top: auto; padding: 14px 16px; background: var(--paper);
  border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px;
}
.rp-price-card.featured .rp-price-incl { background: var(--white); }
.rp-price-incl .lbl {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-deep);
}
.rp-price-incl p { margin: 0; font-family: var(--serif); font-size: 13.5px; color: var(--ink); }
.rp-pricing-foot {
  margin-top: 32px; font-family: var(--serif); font-style: italic;
  font-size: 16px; color: var(--ink-soft); max-width: 70ch;
}

/* === 7 CONSULT === */
.rp-consult { padding: 110px 64px; background: var(--white); border-bottom: 1px solid var(--line); }
.rp-consult-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; }
.rp-consult-copy h2 { font-size: 44px; margin: 16px 0 22px; line-height: 1.15; }
.rp-consult-copy p {
  font-family: var(--serif); font-size: 17.5px; line-height: 1.6;
  color: var(--ink-soft); margin: 0 0 14px; max-width: 60ch; font-weight: 400;
}
.rp-consult-copy ul {
  list-style: none; padding: 0; margin: 6px 0 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.rp-consult-copy li {
  position: relative; padding-left: 22px;
  font-family: var(--serif); font-size: 17px; line-height: 1.5;
  color: var(--ink); font-weight: 400;
}
.rp-consult-copy li::before {
  content: "→"; position: absolute; left: 0; color: var(--teal-700); font-family: var(--mono);
}
.rp-consult-pull {
  font-style: italic; color: var(--ink); font-size: 19px;
  padding: 18px 22px; background: var(--mint);
  border-left: 3px solid var(--gold); margin-top: 18px;
}
.rp-consult-card {
  background: var(--paper); border: 1px solid var(--line);
  padding: 32px; display: flex; flex-direction: column; gap: 18px;
}
.rp-consult-row {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.rp-consult-row:last-child { border-bottom: 0; padding-bottom: 0; }
.rp-consult-row .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal-700);
}
.rp-consult-row.alt .lbl { color: var(--gold-deep); }
.rp-consult-row p {
  margin: 0; font-family: var(--serif); font-size: 17px; font-weight: 500;
  letter-spacing: -0.005em; color: var(--ink); line-height: 1.4;
}

/* === 8 ALONE === */
.rp-alone { padding: 110px 64px; background: var(--mint); border-bottom: 1px solid var(--line); }
.rp-alone-inner { max-width: 880px; }
.rp-alone h2 { font-size: 52px; margin: 16px 0 24px; }
.rp-alone p {
  font-family: var(--serif); font-size: 19px; line-height: 1.55;
  color: var(--ink); margin: 0 0 16px; max-width: 60ch; font-weight: 400;
}
.rp-alone-pull {
  padding: 20px 24px; background: var(--white);
  border-left: 3px solid var(--gold); margin-top: 24px; font-style: italic;
}
.rp-alone-pull strong { font-style: normal; font-weight: 600; color: var(--ink); }
.rp-alone-doctrine {
  font-family: var(--serif); font-style: italic; font-size: 17px;
  color: var(--ink-soft); margin-top: 24px;
}

/* === 9 FAQ === */
.rp-faq { padding: 110px 64px; background: var(--white); border-bottom: 1px solid var(--line); }
.rp-faq-head { max-width: 880px; margin-bottom: 48px; }
.rp-faq-head h2 { font-size: 48px; margin: 16px 0 0; }
.rp-faq-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.rp-faq-card {
  background: var(--paper); padding: 28px 28px 30px;
  display: flex; flex-direction: column; gap: 10px;
}
.rp-faq-card:nth-child(4),
.rp-faq-card:nth-child(5),
.rp-faq-card:nth-child(6) { background: var(--white); }
.rp-faq-card .n {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--gold-deep);
}
.rp-faq-card h3 {
  font-family: var(--serif); font-size: 19px; font-weight: 500;
  letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); margin: 0;
}
.rp-faq-card p {
  font-family: var(--serif); font-size: 14.5px; line-height: 1.55;
  color: var(--ink-soft); margin: 0; font-weight: 400;
}
.rp-faq-foot { margin-top: 32px; }

/* === 10 CTA (rp-cta overrides shared .cta) === */
.rp-cta h3 { font-size: 60px; }
.rp-cta-reassure {
  margin-top: 14px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); opacity: 0.95;
}

/* === Wrapper full-width resets === */
.st-rp-hero-wrapper,
.st-rp-frame-band-wrapper,
.st-rp-highlight-wrapper,
.st-rp-approach-wrapper,
.st-rp-why-wrapper,
.st-rp-pricing-wrapper,
.st-rp-consult-wrapper,
.st-rp-alone-wrapper,
.st-rp-faq-wrapper,
.st-rp-cta-wrapper { width: 100%; }

/* === SCROLL-REVEAL STAGGER SEQUENCES (ported from animations.css, .relapse-page scope stripped) === */

/* --- Hero: child pre-states --- */
.rp-hero-copy h1,
.rp-hero-copy .lede,
.rp-cta-row,
.rp-hero-card {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 0.95s ease, transform 0.95s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rp-hero.in .rp-hero-copy h1  { opacity: 1; transform: none; transition-delay: 0.10s; }
.rp-hero.in .rp-hero-copy .lede { opacity: 1; transform: none; transition-delay: 0.25s; }
.rp-hero.in .rp-hero-card      { opacity: 1; transform: none; transition-delay: 0.30s; }
.rp-hero.in .rp-cta-row        { opacity: 1; transform: none; transition-delay: 0.55s; }

/* Hero: card row stagger */
.rp-hero-row {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rp-hero.in .rp-hero-row:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.55s; }
.rp-hero.in .rp-hero-row:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.68s; }
.rp-hero.in .rp-hero-row:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.81s; }

/* Hero: number bounce on row hover */
.rp-hero-num { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.rp-hero-row:hover .rp-hero-num { transform: scale(1.08); }

/* --- Approach: line draw + head + step stagger --- */
.rp-approach-grid::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px;
  background: var(--teal-800);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rp-approach-head {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 0.95s ease, transform 0.95s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rp-approach-step {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 0.95s ease, transform 0.95s cubic-bezier(0.2, 0.7, 0.2, 1),
              background 0.3s ease;
}
.rp-approach.in .rp-approach-head                    { opacity: 1; transform: none; transition-delay: 0.10s; }
.rp-approach.in .rp-approach-grid::before            { transform: scaleX(1); transition-delay: 0.20s; }
.rp-approach.in .rp-approach-step:nth-child(1)       { opacity: 1; transform: none; transition-delay: 0.30s; }
.rp-approach.in .rp-approach-step:nth-child(2)       { opacity: 1; transform: none; transition-delay: 0.45s; }
.rp-approach.in .rp-approach-step:nth-child(3)       { opacity: 1; transform: none; transition-delay: 0.60s; }
.rp-approach.in .rp-approach-step:nth-child(4)       { opacity: 1; transform: none; transition-delay: 0.75s; }

/* Override hover transform after reveal (step is no longer translate3d'd) */
.rp-approach.in .rp-approach-step:hover { transform: translateY(-3px); }

/* --- Highlight: child stagger + bullet pop --- */
.rp-highlight-inner > * {
  opacity: 0; transform: translate3d(0, 22px, 0);
  transition: opacity 0.95s ease, transform 0.95s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.rp-highlight.in .rp-highlight-inner > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.10s; }
.rp-highlight.in .rp-highlight-inner > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.25s; }
.rp-highlight.in .rp-highlight-inner > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.40s; }
.rp-highlight.in .rp-highlight-inner > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.55s; }

/* Highlight: bullet pop-in */
.rp-h-rule .bullet {
  transform: scale(0.4); opacity: 0;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
}
.rp-highlight.in .rp-h-rule:nth-child(1) .bullet { transform: scale(1); opacity: 1; transition-delay: 0.65s; }
.rp-highlight.in .rp-h-rule:nth-child(2) .bullet { transform: scale(1); opacity: 1; transition-delay: 0.78s; }
.rp-highlight.in .rp-h-rule:nth-child(3) .bullet { transform: scale(1); opacity: 1; transition-delay: 0.91s; }

/* ============================================================
   TREATMENT OPTIONS PAGE — .to-* widget styles
   Source: styles.css (stripped of .to-page scope)
   ============================================================ */

/* === 1 HERO === */
.to-hero {
  background: var(--paper); padding: 64px 64px 88px;
  border-bottom: 1px solid var(--line); position: relative; overflow: hidden;
}
.to-hero::before {
  content: ""; position: absolute; width: 540px; height: 540px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,164,73,0.10) 0%, transparent 70%);
  top: -180px; right: -160px; pointer-events: none;
}
.to-hero-inner {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px;
  align-items: start; position: relative; z-index: 1;
}
.to-hero-copy h1 { font-size: 80px; margin: 18px 0 28px; }
.to-hero-copy .lede { max-width: 56ch; margin-bottom: 32px; }
.to-hero-lede2 {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-deep); margin: -16px 0 28px;
}
.to-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.to-hero-meta {
  border-left: 3px solid var(--gold); padding: 4px 0 4px 22px;
  display: flex; flex-direction: column; gap: 22px;
}
.to-meta-row { display: flex; flex-direction: column; gap: 6px; }
.to-meta-row .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--teal-700); font-weight: 500;
}
.to-meta-row.alt .lbl { color: var(--gold-deep); }
.to-meta-row p { font-family: var(--serif); font-size: 18px; line-height: 1.4; color: var(--ink); font-weight: 400; margin: 0; }

/* === 2 CARDS === */
.to-cards-sec { padding: 110px 64px; background: var(--white); border-bottom: 1px solid var(--line); }
.to-cards-head { max-width: 800px; margin-bottom: 56px; }
.to-cards-head h2 { font-size: 56px; margin: 16px 0 16px; }
.to-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.to-card {
  background: var(--paper); border: 1px solid var(--line);
  padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 20px;
  position: relative; box-shadow: 0 24px 48px -36px rgba(13,79,92,0.16);
}
.to-card::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 3px; background: var(--gold); }
.to-card.featured { background: var(--mint); border-color: var(--teal-700); }
.to-card.featured::before { width: 100%; height: 4px; }
.to-card-flag {
  position: absolute; top: -14px; left: 32px;
  background: var(--ink); color: var(--paper); padding: 6px 12px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
}
.to-card-head { display: flex; flex-direction: column; gap: 8px; }
.to-card-name { font-family: var(--serif); font-size: 38px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.to-card-pos { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.to-card-price { display: flex; align-items: baseline; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.to-card-price .num { font-family: var(--serif); font-size: 44px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.to-card-price .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }
.to-card-blurb { margin: 0; font-family: var(--serif); font-style: italic; font-size: 18px; line-height: 1.45; color: var(--ink); font-weight: 400; }
.to-card-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.to-card-bullets li { position: relative; padding-left: 22px; font-family: var(--serif); font-size: 15.5px; line-height: 1.5; color: var(--ink-soft); font-weight: 400; }
.to-card-bullets li::before { content: "·"; position: absolute; left: 4px; top: -4px; color: var(--gold-deep); font-size: 22px; font-weight: 700; }
.to-card .btn { align-self: flex-start; }

/* === 3 DOCTOR BAND === */
.to-doctor-band { padding: 110px 64px; background: var(--ink); color: var(--paper); }
.to-doctor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.to-doctor-copy h2 { color: var(--paper); font-size: 56px; margin: 16px 0 22px; }
.to-doctor-copy h2 em { color: var(--gold); }
.to-doctor-copy p { font-family: var(--serif); font-size: 18px; line-height: 1.6; color: rgba(243,237,224,0.78); margin: 0 0 18px; font-weight: 400; max-width: 56ch; }
.to-doctor-pull { margin-top: 24px; padding: 18px 22px; background: rgba(201,164,73,0.10); border-left: 3px solid var(--gold); color: var(--paper); font-style: italic; font-size: 19px; }
.to-doctor-pull strong { color: var(--gold); font-weight: 600; }
.to-doctor-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 22px; }
.to-doctor-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid rgba(243,237,224,0.16); }
.to-doctor-steps li:last-child { border-bottom: 0; }
.to-doctor-steps .n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--gold); padding-top: 4px; }
.to-doctor-steps h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--paper); margin: 0 0 6px; }
.to-doctor-steps p { font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: rgba(243,237,224,0.7); margin: 0; font-weight: 400; }

/* === 4 COMPARE === */
.to-compare { padding: 110px 64px; background: var(--paper); border-bottom: 1px solid var(--line); }
.to-compare-head { max-width: 800px; margin-bottom: 48px; }
.to-compare-head h2 { font-size: 52px; margin: 16px 0 0; }
.to-compare-table { background: var(--white); border: 1px solid var(--line); }
.to-row { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; border-bottom: 1px solid var(--line); }
.to-row:last-child { border-bottom: 0; }
.to-row-head { background: var(--ink); color: var(--paper); }
.to-row-head .to-cell { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; padding: 18px 24px; color: var(--paper); }
.to-row-head .to-cell-feat { color: var(--gold); }
.to-cell { padding: 22px 24px; font-family: var(--serif); font-size: 16.5px; color: var(--ink); line-height: 1.4; border-right: 1px solid var(--line); }
.to-cell:last-child { border-right: 0; }
.to-cell-feat { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); background: var(--paper); }
.to-cell.strong { font-weight: 500; font-size: 22px; letter-spacing: -0.015em; }
.to-compare-foot { margin: 22px 0 0; font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-soft); max-width: 70ch; }

/* === 5 EXPECT === */
.to-expect { padding: 110px 64px; background: var(--white); border-bottom: 1px solid var(--line); }
.to-expect-head { max-width: 800px; margin-bottom: 48px; }
.to-expect-head h2 { font-size: 52px; margin: 16px 0 16px; }
.to-expect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.to-expect-card { background: var(--paper); border: 1px solid var(--line); padding: 32px 28px; display: flex; flex-direction: column; gap: 22px; position: relative; }
.to-expect-card::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 3px; background: var(--gold); }
.to-expect-card header { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.to-expect-name { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.to-expect-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.to-expect-block { display: flex; flex-direction: column; gap: 10px; }
.to-expect-block .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-700); font-weight: 500; }
.to-expect-block ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.to-expect-block li { position: relative; padding-left: 18px; font-family: var(--serif); font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.to-expect-block li::before { content: "·"; position: absolute; left: 4px; top: -4px; color: var(--gold-deep); font-size: 22px; font-weight: 700; }
.to-expect-foot { margin-top: 32px; font-family: var(--serif); font-style: italic; font-size: 16px; color: var(--ink-soft); }
.to-expect-foot strong { font-style: normal; font-weight: 600; color: var(--ink); }

/* === 6 INCLUDED === */
.to-included { padding: 110px 64px; background: var(--paper); border-bottom: 1px solid var(--line); }
.to-included-head { max-width: 800px; margin-bottom: 48px; }
.to-included-head h2 { font-size: 52px; margin: 16px 0 14px; }
.to-included-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.to-incl-card { background: var(--white); padding: 28px 28px 30px; display: flex; flex-direction: column; gap: 10px; }
.to-incl-card .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--gold-deep); }
.to-incl-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin: 0; color: var(--ink); line-height: 1.2; }
.to-incl-card p { margin: 0; font-family: var(--serif); font-size: 15px; line-height: 1.55; color: var(--ink-soft); font-weight: 400; }

/* === 7 TRANSPARENCY === */
.to-transparency { padding: 110px 64px; background: var(--paper); border-bottom: 1px solid var(--line); }
.to-transparency-inner { max-width: 900px; }
.to-transparency h2 { font-size: 52px; margin: 16px 0 18px; }
.to-transparency-foot { margin: 0 0 16px; font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.5; color: var(--ink-soft); max-width: 60ch; }
.to-transparency-pull { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); max-width: 60ch; margin-left: auto; margin-right: auto; line-height: 1.6; }

/* === 8 FLOW === */
.to-flow { padding: 110px 64px; background: var(--ink); color: var(--paper); border-bottom: 1px solid rgba(243,237,224,0.08); }
.to-flow-head { max-width: 800px; margin-bottom: 48px; }
.to-flow-head h2 { font-size: 52px; margin: 16px 0 16px; color: var(--paper); }
.to-flow-head h2 em { color: var(--gold); }
.to-flow-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--gold); }
.to-flow-step { padding: 32px 28px; border-right: 1px solid rgba(243,237,224,0.12); border-bottom: 1px solid rgba(243,237,224,0.12); display: flex; flex-direction: column; gap: 12px; }
.to-flow-step:nth-child(3n) { border-right: 0; }
.to-flow-step:nth-last-child(-n+3) { border-bottom: 0; }
.to-flow-step .n { font-family: var(--serif); font-size: 44px; font-weight: 400; background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 0.9; letter-spacing: -0.02em; }
.to-flow-step h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--paper); margin: 0; }
.to-flow-step p { margin: 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.6; color: rgba(243,237,224,0.7); font-weight: 400; }

/* === 9 CONSULT === */
.to-consult { padding: 110px 64px; background: var(--white); border-bottom: 1px solid var(--line); }
.to-consult-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; }
.to-consult-copy h2 { font-size: 48px; margin: 16px 0 22px; }
.to-consult-copy p { font-family: var(--serif); font-size: 17.5px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 16px; max-width: 60ch; font-weight: 400; }
.to-consult-copy strong { color: var(--ink); font-weight: 600; }
.to-consult-card { background: var(--paper); border: 1px solid var(--line); padding: 32px 32px 28px; display: flex; flex-direction: column; gap: 18px; }
.to-consult-row { display: flex; flex-direction: column; gap: 6px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.to-consult-row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.to-consult-row .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-700); }
.to-consult-row.alt .lbl { color: var(--gold-deep); }
.to-consult-row p { margin: 0; font-family: var(--serif); font-size: 18px; font-weight: 500; letter-spacing: -0.005em; color: var(--ink); line-height: 1.3; }
.to-consult-price { font-size: 42px; font-weight: 500; letter-spacing: -0.02em; line-height: 1; background: linear-gradient(180deg, var(--gold) 0%, var(--teal-700) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.to-consult-row-primary p { font-size: 20px; font-weight: 600; color: var(--ink); }
.to-consult-row-secondary .lbl { color: var(--ink-soft); opacity: 0.75; }
.to-consult-row .sub { font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--ink-soft); }
.to-consult-foot { margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--serif); font-style: italic; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

/* === 10 RELAPSE BAND === */
.to-relapse-band { padding: 96px 64px; background: var(--mint); border-bottom: 1px solid var(--line); }
.to-relapse-band-inner { max-width: 1100px; }
.to-relapse-band-copy h2 { font-size: 52px; margin: 16px 0 22px; }
.to-relapse-band-copy h2 em { font-style: italic; }
.to-relapse-key { color: var(--ink); font-style: italic; font-weight: 600; }
.to-relapse-band-copy p { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 16px; max-width: 60ch; font-weight: 400; }
.to-relapse-checks { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; font-family: var(--serif); font-size: 14px; color: var(--ink); }
.to-relapse-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }

/* === 11 FAQ === */
.to-faq { padding: 110px 64px; background: var(--paper); border-bottom: 1px solid var(--line); }
.to-faq-head { max-width: 800px; margin-bottom: 48px; }
.to-faq-head h2 { font-size: 52px; margin: 16px 0 0; }
.to-faq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.to-faq-card { background: var(--white); padding: 36px 32px; display: flex; flex-direction: column; gap: 10px; }
.to-faq-card .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--gold-deep); }
.to-faq-card h3 { font-family: var(--serif); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; color: var(--ink); margin: 0; }
.to-faq-card p { font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; font-weight: 400; }
.to-faq-foot { margin-top: 32px; }

/* === 12 CTA === */
.to-cta h3 { font-size: 56px; }
.to-cta .to-cta-reassure {
  margin-top: 14px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); opacity: 0.95;
}

/* === Wrapper full-width resets === */
.st-to-hero-wrapper,
.st-to-cards-wrapper,
.st-to-doctor-band-wrapper,
.st-to-compare-wrapper,
.st-to-expect-wrapper,
.st-to-included-wrapper,
.st-to-transparency-wrapper,
.st-to-flow-wrapper,
.st-to-consult-wrapper,
.st-to-relapse-band-wrapper,
.st-to-faq-wrapper,
.st-to-cta-wrapper { width: 100%; }

/* ==========================================================================
   CONSULTATION PAGE — bc-* widgets
   Source: SmileTrueFinalNew/styles.css (stripped .bc-page scope prefix)
   ========================================================================== */

/* Wrapper resets */
.st-bc-hero-wrapper,
.st-bc-process-wrapper,
.st-bc-guarantee-wrapper,
.st-bc-why-wrapper,
.st-bc-paths-wrapper,
.st-bc-format-wrapper,
.st-bc-prep-wrapper,
.st-bc-qs-wrapper,
.st-bc-youchoose-wrapper,
.st-bc-after-wrapper,
.st-bc-faq-wrapper,
.st-bc-relapse-band-wrapper,
.st-bc-address-wrapper,
.st-bc-cta-wrapper { width: 100%; }

/* HERO */
.bc-hero {
  background: var(--paper); padding: 64px 64px 96px;
  border-bottom: 1px solid var(--line);
  position: relative; overflow: hidden;
}
.bc-hero::before {
  content: ""; position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,164,73,0.10) 0%, transparent 70%);
  top: -160px; right: -140px; pointer-events: none;
}
.bc-hero-grid {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px;
  align-items: start; position: relative; z-index: 1;
}
.bc-hero-left h1 { font-size: 76px; margin: 18px 0 26px; }
.bc-hero-left .lede { max-width: 52ch; margin-bottom: 32px; }
.bc-hero-pull {
  font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.5;
  color: var(--gold-deep); margin: -8px 0 28px; max-width: 52ch;
  padding-left: 18px; border-left: 2px solid var(--gold);
}

/* Call card */
.bc-call-card {
  background: var(--white); border: 1px solid var(--line);
  padding: 32px 36px 26px; margin-bottom: 32px;
  box-shadow: 0 24px 48px -32px rgba(13,79,92,0.18);
  position: relative;
}
.bc-call-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 3px; background: var(--gold);
}
.bc-call-row {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px;
  padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 18px;
}
.bc-call-lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: 8px;
}
.bc-call-tel {
  font-family: var(--serif); font-size: 44px; font-weight: 500;
  letter-spacing: -0.02em; color: var(--ink); text-decoration: none;
  line-height: 1; display: block;
}
.bc-call-hours p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.4; color: var(--ink); font-weight: 400; }
.bc-call-hours strong { font-weight: 600; }
.bc-call-foot { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--ink-soft); line-height: 1.5; }

/* Hero meta row */
.bc-hero-meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  border-top: 1px solid var(--line); padding-top: 24px;
}
.bc-hero-meta .lbl {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal-700); display: block; margin-bottom: 6px;
}
.bc-hero-meta p { margin: 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.45; color: var(--ink); font-weight: 400; }

/* Form card */
.bc-form-card {
  background: var(--white); border: 1px solid var(--line);
  padding: 40px 40px 36px; position: sticky; top: 24px;
  box-shadow: 0 32px 64px -36px rgba(13,79,92,0.20);
}
.bc-form-head { margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.bc-form-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }
.bc-form-head h2 { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; margin: 12px 0 12px; color: var(--ink); }
.bc-form-head p { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--ink-soft); font-weight: 400; }
.bc-form { display: flex; flex-direction: column; gap: 20px; }
/* Form-fields flex-wrap — per-field --field-cols (integer 1-100) sets
   width via calc(cols% - column-gap). N fields per row fit inside the
   container. Switched from a 100-column CSS grid because its 99 × 16px
   gaps (1584px) exceed the form width and collapse tracks to 0. Below
   768px collapses to a flex column (every field 100%) for readability. */
.bc-form-fields {
  display: flex;
  flex-wrap: wrap;
  row-gap: 20px;
  column-gap: 16px;
}
.bc-form-fields > .bc-field {
  flex: 0 0 auto;
  min-width: 0;
  box-sizing: border-box;
  width: calc(var(--field-cols, 100) * 1% - 16px);
}
.bc-form-fields > .bc-field[style*="--field-cols: 100"] {
  width: 100%;
}
@media (max-width: 767px) {
  .bc-form-fields {
    flex-direction: column;
    gap: 16px;
  }
  .bc-form-fields > .bc-field,
  .bc-form-fields > .bc-field[style*="--field-cols"] { width: 100%; }
}
.bc-field { display: flex; flex-direction: column; gap: 8px; }
.bc-field-lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); font-weight: 500; }
.bc-field-lbl em { font-style: normal; color: var(--ink-mute); font-weight: 400; }
.bc-form input,
.bc-form select,
.bc-form textarea {
  font-family: var(--serif); font-size: 17px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  padding: 14px 16px; line-height: 1.4;
  transition: border-color 0.2s ease, background 0.2s ease;
  width: 100%; box-sizing: border-box;
}
/* Checkbox / radio reset — the .bc-form input selector above is text-input
   styling (width 100%, big padding, background, border). Applied to
   checkbox/radio inputs it makes them square, huge, and pushes their label
   text into a narrow adjacent column. This reset restores native form
   controls for the shared acceptance / radio / checkbox / honeypot patterns
   the Field_Types helper renders. */
.bc-form input[type="checkbox"],
.bc-form input[type="radio"] {
  width: auto;
  padding: 0;
  background: transparent;
  border: 0;
  min-height: 0;
  line-height: normal;
  transition: none;
  accent-color: var(--teal-700, #146474);
  flex-shrink: 0;
}
.bc-form input[type="hidden"] {
  width: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.bc-form input::placeholder,
.bc-form textarea::placeholder { color: var(--ink-mute); font-style: italic; }
.bc-form input:focus,
.bc-form select:focus,
.bc-form textarea:focus { outline: none; border-color: var(--teal-700); background: var(--white); }
.bc-form textarea { resize: vertical; min-height: 100px; }
.bc-form .btn.full { width: 100%; margin-top: 6px; }
.bc-form-fineprint { margin: 4px 0 0; font-family: var(--serif); font-style: italic; font-size: 13.5px; color: var(--ink-mute); text-align: center; }
.bc-relapse-inline {
  display: flex; gap: 14px; padding: 18px 20px;
  background: var(--mint); border-left: 3px solid var(--gold); margin: 4px 0 4px;
}
.bc-relapse-inline .ico { font-family: var(--mono); font-size: 22px; color: var(--gold-deep); line-height: 1.1; }
.bc-relapse-inline p { margin: 0; font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--ink); font-weight: 400; }
.bc-relapse-inline strong { font-weight: 600; }

/* PROCESS */
.bc-process { padding: 110px 64px; background: var(--white); border-bottom: 1px solid var(--line); }
.bc-process-head { max-width: 760px; margin-bottom: 56px; }
.bc-process-head h2 { font-size: 56px; margin: 16px 0 18px; max-width: 22ch; }
.bc-process-head .lede { max-width: 56ch; }
.bc-process-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.bc-process-item {
  display: grid; grid-template-columns: 110px 1fr;
  gap: 36px; padding: 32px 0;
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s ease;
}
.bc-process-item:hover { padding-left: 14px; background: var(--paper); }
.bc-process-n { font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; color: var(--gold-deep); padding-top: 6px; }
.bc-process-body h3 { font-family: var(--serif); font-size: 26px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; margin: 0 0 10px; color: var(--ink); }
.bc-process-body p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink-soft); font-weight: 400; max-width: 70ch; }
.bc-process-row { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 10px; flex-wrap: wrap; }
.bc-process-time {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--teal-700);
  padding: 6px 12px; border: 1px solid var(--line); background: var(--paper); white-space: nowrap;
}
.bc-process-pull {
  margin-top: 12px !important; padding: 10px 18px;
  background: var(--mint); border-left: 2px solid var(--gold);
  font-style: italic; color: var(--ink) !important; font-size: 16px !important; max-width: 52ch;
}
.bc-process-foot {
  margin-top: 48px; padding: 28px 32px; background: var(--ink);
  display: grid; grid-template-columns: 1fr 1fr; gap: 32px; color: var(--paper);
}
.bc-process-foot div { display: flex; flex-direction: column; gap: 6px; }
.bc-process-foot .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }
.bc-process-foot strong { font-family: var(--serif); font-size: 24px; font-weight: 500; letter-spacing: -0.01em; color: var(--paper); }

/* GUARANTEE */
.bc-guarantee { padding: 110px 64px; background: var(--paper); border-bottom: 1px solid var(--line); }
.bc-guarantee-inner { max-width: 1100px; }
.bc-guarantee-inner h2 { font-size: 56px; margin: 16px 0 40px; max-width: 22ch; }
.bc-guarantee-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 24px; margin-bottom: 32px; }
.bc-guarantee-card { padding: 40px 36px; position: relative; display: flex; flex-direction: column; gap: 14px; border: 1px solid var(--line); }
.bc-guarantee-card.free { background: var(--mint); }
.bc-guarantee-card.cond { background: var(--white); }
.bc-guarantee-card::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 3px; background: var(--gold); }
.bc-guarantee-num { font-family: var(--serif); font-size: 80px; font-weight: 400; line-height: 1; letter-spacing: -0.025em; color: var(--ink); }
.bc-guarantee-card.free .bc-guarantee-num {
  background: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bc-guarantee-lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); }
.bc-guarantee-card p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink-soft); font-weight: 400; }
.bc-guarantee-foot { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--gold-deep); margin: 0; }

/* WHY DIFFERENT */
.bc-why { padding: 110px 64px; background: var(--white); border-bottom: 1px solid var(--line); }
.bc-why-head { max-width: 800px; margin-bottom: 56px; }
.bc-why-head h2 { font-size: 56px; margin: 16px 0 0; }
.bc-why-sub { margin: 14px 0 0; max-width: 56ch; font-family: var(--serif); font-size: 17px; font-style: italic; color: var(--ink-soft); line-height: 1.55; }
.bc-why-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.bc-why-card { background: var(--paper); padding: 36px 28px 32px; display: flex; flex-direction: column; gap: 14px; }
.bc-why-n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--gold-deep); }
.bc-why-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.25; margin: 0; color: var(--ink); }
.bc-why-card p { margin: 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); font-weight: 400; }

/* HOW TO BOOK — paths */
.bc-paths { padding: 110px 64px; background: var(--paper); border-bottom: 1px solid var(--line); }
.bc-paths-head { max-width: 800px; margin-bottom: 56px; }
.bc-paths-head h2 { font-size: 56px; margin: 16px 0 0; }
.bc-paths-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bc-path-card {
  background: var(--white); border: 1px solid var(--line);
  padding: 36px 32px 32px; position: relative;
  display: flex; flex-direction: column; gap: 16px;
}
.bc-path-card::before { content: ""; position: absolute; top: 0; left: 0; width: 56px; height: 3px; background: var(--gold); }
.bc-path-n { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; color: var(--gold-deep); }
.bc-path-card h3 { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; margin: 0; color: var(--ink); }
.bc-path-card > p { margin: 0; font-family: var(--serif); font-size: 16px; line-height: 1.55; color: var(--ink-soft); font-weight: 400; }
.bc-path-meta { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.bc-path-meta li { display: flex; justify-content: space-between; gap: 12px; }
.bc-path-meta span { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }
.bc-path-meta strong { font-family: var(--serif); font-size: 15.5px; color: var(--ink); font-weight: 500; }
.bc-path-meta a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }
.bc-path-card .btn { margin-top: auto; align-self: flex-start; }

/* IN-PERSON vs VIRTUAL */
.bc-format { padding: 110px 64px; background: var(--white); border-bottom: 1px solid var(--line); }
.bc-format-head { max-width: 800px; margin-bottom: 56px; }
.bc-format-head h2 { font-size: 52px; margin: 16px 0 0; }
.bc-format-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.bc-format-card { background: var(--paper); border: 1px solid var(--line); padding: 40px 36px 36px; display: flex; flex-direction: column; gap: 18px; }
.bc-format-card.alt { background: var(--mint); }
.bc-format-tag {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold-deep);
  padding: 6px 12px; background: var(--white); border: 1px solid var(--line); align-self: flex-start;
}
.bc-format-card h3 { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.25; margin: 0; color: var(--ink); max-width: 26ch; }
.bc-format-card p { margin: 0; font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--ink-soft); font-weight: 400; max-width: 50ch; }
.bc-format-card ul { list-style: none; padding: 0; margin: 8px 0 0; border-top: 1px solid rgba(11,42,49,0.16); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.bc-format-card li { position: relative; padding-left: 22px; font-family: var(--serif); font-size: 16px; line-height: 1.45; color: var(--ink); }
.bc-format-card li::before { content: "✓"; position: absolute; left: 0; color: var(--teal-700); font-family: var(--mono); font-weight: 700; }

/* HOW TO PREPARE */
.bc-prep { padding: 110px 64px; background: var(--paper); border-bottom: 1px solid var(--line); }
.bc-prep-head { max-width: 800px; margin-bottom: 48px; }
.bc-prep-head h2 { font-size: 52px; margin: 16px 0 0; }
.bc-prep-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bc-prep-card { background: var(--white); border: 1px solid var(--line); padding: 32px 28px; display: flex; flex-direction: column; gap: 18px; position: relative; }
.bc-prep-card::before { content: ""; position: absolute; top: 0; left: 0; width: 48px; height: 3px; background: var(--gold); }
.bc-prep-lbl { font-family: var(--mono); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }
.bc-prep-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.bc-prep-card li { position: relative; padding-left: 22px; font-family: var(--serif); font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.bc-prep-card li::before { content: "•"; position: absolute; left: 4px; color: var(--gold-deep); font-weight: 700; }
.bc-prep-foot { margin-top: 32px; font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink-soft); padding-left: 18px; border-left: 2px solid var(--gold); }

/* QUESTIONS TO ASK */
.bc-qs { padding: 110px 64px; background: var(--white); border-bottom: 1px solid var(--line); }
.bc-qs-head { max-width: 800px; margin-bottom: 48px; }
.bc-qs-head h2 { font-size: 52px; margin: 16px 0 14px; }
.bc-qs-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.bc-qs-card { background: var(--paper); padding: 28px 22px 26px; display: flex; flex-direction: column; gap: 14px; }
.bc-qs-card h3 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); margin: 0; }
.bc-qs-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.bc-qs-card li { position: relative; padding-left: 18px; font-family: var(--serif); font-size: 15.5px; line-height: 1.45; color: var(--ink); font-style: italic; }
.bc-qs-card li::before { content: "?"; position: absolute; left: 0; color: var(--teal-700); font-family: var(--mono); font-style: normal; font-weight: 700; }

/* YOU CHOOSE */
.bc-youchoose { padding: 110px 64px; background: var(--mint); border-bottom: 1px solid var(--line); }
.bc-youchoose-inner { max-width: 920px; }
.bc-youchoose h2 { font-size: 52px; margin: 16px 0 28px; }
.bc-youchoose-lede { font-family: var(--serif); font-size: 19px; line-height: 1.6; color: var(--ink-soft); margin: 0 0 24px; max-width: 64ch; }
.bc-youchoose-pull { font-family: var(--serif); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--ink); margin: 0; max-width: 60ch; padding-left: 20px; border-left: 2px solid var(--gold); }

/* AFTER CONSULTATION */
.bc-after { padding: 110px 64px; background: var(--ink); color: var(--paper); }
.bc-after-inner { max-width: 1100px; }
.bc-after-inner h2 { font-family: var(--serif); font-size: 56px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; color: var(--paper); margin: 16px 0 36px; }
.bc-after-inner h2 em { color: var(--gold); }
.bc-after-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 36px; border-top: 1px solid rgba(243,237,224,0.16); padding-top: 32px; }
.bc-after-list li { position: relative; padding-left: 30px; font-family: var(--serif); font-size: 18px; line-height: 1.5; color: rgba(243,237,224,0.92); font-weight: 400; }
.bc-after-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--gold); font-family: var(--mono); font-weight: 700; font-size: 18px; }
.bc-after-foot { margin: 36px 0 0; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--gold); font-weight: 400; }

/* CONSULTATION FAQ */
.bc-faq { padding: 110px 64px; background: var(--paper); border-bottom: 1px solid var(--line); }
.bc-faq-head { max-width: 800px; margin-bottom: 48px; }
.bc-faq-head h2 { font-size: 52px; margin: 16px 0 0; }
.bc-faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.bc-faq-card { background: var(--white); padding: 28px 28px 26px; display: flex; flex-direction: column; gap: 12px; }
.bc-faq-card .n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--gold-deep); }
.bc-faq-card h3 { font-family: var(--serif); font-size: 21px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; margin: 0; color: var(--ink); }
.bc-faq-card p { margin: 0; font-family: var(--serif); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); font-weight: 400; }

/* RELAPSE BAND */
.bc-relapse-band { padding: 110px 64px; background: var(--ink); color: var(--paper); }
.bc-relapse-band-inner { display: grid; grid-template-columns: 1.6fr 1fr; gap: 80px; align-items: center; }
.bc-relapse-band-copy h2 { color: var(--paper); font-size: 56px; margin: 16px 0 22px; }
.bc-relapse-band-copy h2 em { color: var(--gold); }
.bc-relapse-band-copy p { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: rgba(243,237,224,0.78); margin: 0 0 32px; max-width: 60ch; font-weight: 400; }
.bc-relapse-band-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.bc-relapse-band-stat { border-left: 3px solid var(--gold); padding: 6px 0 6px 28px; display: flex; flex-direction: column; gap: 14px; }
.bc-relapse-band-stat .num {
  font-family: var(--serif); font-size: 80px; font-weight: 400; line-height: 1; letter-spacing: -0.025em;
  background: linear-gradient(180deg, var(--gold) 0%, var(--paper) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.bc-relapse-band-stat .lbl { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243,237,224,0.7); max-width: 28ch; line-height: 1.5; }
.bc-relapse-stat-note { margin-top: 14px; font-family: var(--serif); font-style: italic; font-size: 13.5px; color: rgba(255,255,255,0.65); line-height: 1.5; max-width: 32ch; }

/* ADDRESS */
.bc-address { padding: 64px; background: var(--paper); border-bottom: 1px solid var(--line); }
.bc-address-inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 48px; border-top: 1px solid var(--ink); padding-top: 36px; }
.bc-address-cell .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); display: block; margin-bottom: 10px; }
.bc-address-cell p { margin: 0; font-family: var(--serif); font-size: 18px; line-height: 1.45; color: var(--ink); font-weight: 500; }
.bc-address-cell a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }

/* CTA additions */
.bc-cta-reassure { font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 12px 0 18px; }
.bc-cta-alts { margin-top: 22px; font-family: var(--serif); font-size: 16px; color: rgba(243,237,224,0.78); display: flex; gap: 14px; align-items: center; justify-content: center; }
.bc-cta-alts a { color: var(--paper); border-bottom: 1px solid var(--gold); text-decoration: none; }
.bc-cta-alts .dot { color: rgba(243,237,224,0.4); }
.bc-cta h3 { font-size: 56px; }

/* ============================================================
   FAQ PAGE — .fq-* section styles
   Source: SmileTrueFinalNew/styles.css — .faq-page .fq-* (page-scope stripped)
   ============================================================ */

/* HERO */
.fq-hero { background: var(--paper); padding: 64px 64px 80px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.fq-hero::before { content: ""; position: absolute; width: 540px; height: 540px; border-radius: 50%; background: radial-gradient(circle, rgba(201,164,73,0.10) 0%, transparent 70%); top: -180px; right: -160px; pointer-events: none; }
.fq-hero-inner { display: grid; grid-template-columns: 1.35fr 1fr; gap: 80px; align-items: start; position: relative; z-index: 1; }
.fq-hero-copy h1 { font-size: 80px; margin: 18px 0 28px; }
.fq-hero-copy .lede { max-width: 52ch; margin-bottom: 32px; }
.fq-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.fq-hero-meta { border-left: 3px solid var(--gold); padding: 4px 0 4px 22px; display: flex; flex-direction: column; gap: 22px; max-width: 44ch; }
.fq-meta-row { display: flex; flex-direction: column; gap: 6px; }
.fq-meta-row .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal-700); font-weight: 500; }
.fq-meta-row.alt .lbl { color: var(--gold-deep); }
.fq-meta-row p { font-family: var(--serif); font-size: 19px; font-weight: 400; line-height: 1.35; letter-spacing: -0.005em; color: var(--ink); margin: 0; }
.fq-meta-foot { margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 14px; }
.fq-meta-foot .num { font-family: var(--serif); font-size: 44px; font-weight: 400; line-height: 1; letter-spacing: -0.025em; background: linear-gradient(180deg, var(--gold) 0%, var(--teal-700) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.fq-meta-foot .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); }

/* JUMP TO CATEGORY */
.fq-jump { padding: 110px 64px; background: var(--white); border-bottom: 1px solid var(--line); }
.fq-jump-head { max-width: 800px; margin-bottom: 56px; }
.fq-jump-head h2 { font-size: 56px; margin: 16px 0 0; }
.fq-jump-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.fq-jump-card { background: var(--white); padding: 28px 24px 28px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--ink); position: relative; transition: background 0.3s ease, transform 0.3s ease; }
.fq-jump-card:hover { background: var(--mint); }
.fq-jump-card:nth-child(8) { background: var(--mint); }
.fq-jump-card:nth-child(8):hover { background: var(--teal-50); }
.fq-jump-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--gold-deep); }
.fq-jump-card h3 { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin: 0; color: var(--ink); line-height: 1.2; }
.fq-jump-card p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); }
.fq-jump-arrow { margin-top: 8px; font-family: var(--mono); font-size: 18px; color: var(--teal-700); transition: transform 0.3s ease; }
.fq-jump-card:hover .fq-jump-arrow { transform: translateX(6px); }

/* HIGHLIGHTS */
.fq-highlights { padding: 110px 64px; background: var(--paper); border-bottom: 1px solid var(--line); }
.fq-highlights-head { max-width: 880px; margin-bottom: 48px; }
.fq-highlights-head h2 { font-size: 52px; margin: 16px 0 0; }
.fq-highlights-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.fq-highlight { background: var(--white); border: 1px solid var(--line); padding: 40px 40px 36px; position: relative; box-shadow: 0 24px 48px -32px rgba(13,79,92,0.18); }
.fq-highlight::before { content: ""; position: absolute; top: 0; left: 0; width: 64px; height: 3px; background: var(--gold); }
.fq-h-tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); padding-bottom: 18px; margin-bottom: 22px; border-bottom: 1px solid var(--line); }
.fq-h-q { font-family: var(--serif); font-size: 30px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; margin: 0 0 18px; color: var(--ink); }
.fq-h-a { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--ink); margin: 0 0 22px; font-weight: 400; }
.fq-h-foot { font-family: var(--serif); font-style: italic; font-size: 14px; color: var(--teal-700); padding-top: 18px; border-top: 1px solid var(--line); }

/* GROUPS (accordion) */
.fq-groups { background: var(--white); }
.fq-group { padding: 116px 64px; border-bottom: 1px solid var(--line); }
.fq-group:nth-child(even) { background: var(--paper); }
.fq-group-head { max-width: 800px; margin-bottom: 40px; }
.fq-group-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-deep); }
.fq-group-title { font-size: 48px; margin: 14px 0 14px; }
.fq-group-blurb { font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink-soft); margin: 0; max-width: 56ch; }
.fq-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.fq-item { border-bottom: 1px solid var(--line); transition: background 0.2s ease; }
.fq-item:hover { background: rgba(0,0,0,0.012); }
.fq-q { width: 100%; min-width: 0; max-width: 100%; background: transparent; border: 0; -webkit-appearance: none; cursor: pointer; display: grid; grid-template-columns: 60px 1fr auto; gap: 28px; align-items: center; padding: 32px 4px; text-align: left; font: inherit; color: var(--ink); transition: background 0.3s ease, padding-left 0.3s ease, opacity 0.2s ease; }
.fq-q:hover { background: var(--mint); padding-left: 16px;color: var(--ink); }
.fq-q:focus,:focus-visible{color: var(--ink);}
.fq-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--gold-deep); }
/* overflow-wrap: anywhere (not break-word) is the key — it lets the browser
   count the break opportunities when computing the button's intrinsic size,
   so the 1fr grid column shrinks to viewport on mobile and the text wraps
   instead of pushing the toggle off-screen. */
.fq-q-text { font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.fq-toggle { font-family: var(--sans); font-size: 18px; font-weight: 200; color: var(--teal-700); transition: transform 0.35s cubic-bezier(0.2,0.7,0.2,1), color 0.25s ease; display: inline-block; line-height: 1; width: 24px; text-align: center; }
.fq-item.open .fq-toggle { transform: rotate(45deg); color: var(--gold-deep); }
.fq-item.open .fq-q { background: var(--mint); padding-left: 16px; }
.fq-a { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.55s cubic-bezier(0.2,0.7,0.2,1), opacity 0.4s ease, padding 0.4s ease; padding: 0 4px 0 92px; }
.fq-item.open .fq-a { max-height: 3000px; opacity: 1; padding: 6px 4px 36px 92px; }
.fq-a p { margin: 0 0 12px; font-family: var(--sans); font-size: 15.5px; line-height: 1.7; color: var(--ink-soft); max-width: 76ch; white-space: pre-line; }
.fq-a p:last-child { margin-bottom: 0; }

/* STILL HAVE QUESTIONS */
.fq-still { padding: 110px 64px; background: var(--mint); border-bottom: 1px solid var(--line); }
.fq-still-inner { max-width: 1100px; }
.fq-still h2 { font-size: 52px; margin: 16px 0 18px; }
.fq-still .lede { max-width: 60ch; margin-bottom: 40px; }
.fq-still-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); padding-top: 40px; gap: 48px; }
.fq-still-cell { display: flex; flex-direction: column; gap: 6px; }
.fq-still-cell .lbl { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-700); }
.fq-still-cell p { margin: 0; font-family: var(--serif); font-size: 22px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.fq-still-reassure { margin: 36px 0 0; font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--ink-soft); line-height: 1.5; }
.fq-still-brand { color: var(--gold-soft); }

/* CTA tweaks */
.fq-cta h3 { font-size: 56px; margin-bottom: 24px; }
.fq-cta .lede { margin-bottom: 0; max-width: 52ch; }
.fq-cta .actions { margin-top: 40px; gap: 16px; }

/* =========================================================================
   LANDING PAGE WIDGETS (LP1-Offer + shared LP chrome)
   Source: SmileTrueFinalNew/landings.css — .lp-page scope stripped
   ========================================================================= */

/* ----- PROMO BAR ----- */
.lp-promo {
  display: flex; justify-content: flex-start; align-items: center;
  padding: 9px 56px; background: var(--teal-900); color: rgba(255,255,255,0.86);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em;
  text-align: left;
  box-sizing: border-box;
}
.lp-promo .l, .lp-promo .r { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; row-gap: 4px; min-width: 0; max-width: 100%; }
.lp-promo .gold { color: var(--gold-soft); }
.lp-promo a { color: inherit; text-decoration: none; }
/* Wrapper provides max-width; must be flex to space .l and .r */
.st-lp-promo-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; flex-wrap: wrap; row-gap: 4px; }
/* Allow long segments (like the hours string) to wrap on any viewport instead
   of forcing horizontal overflow. Individual <a> phone links stay whole. */
.lp-promo .l > span, .lp-promo .r > span:not(.desktop-only) {
  white-space: normal;
  overflow-wrap: break-word;
}
.lp-promo a { white-space: nowrap; }
.lp-promo .pulse {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(201,164,73,0.7);
  animation: lp-pulse 2.4s infinite;
}
@keyframes lp-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,164,73,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(201,164,73,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,164,73,0); }
}

/* ----- NAV ----- */
.lp-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 56px; background: var(--white);
  border-bottom: 1px solid var(--line);
}
.lp-logo {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink);
}
.lp-nav-links {
  display: flex; gap: 28px; font-size: 13.5px; font-weight: 500;
}
.lp-nav-links a { color: var(--ink); text-decoration: none; }
.lp-nav-right { display: flex; align-items: center; gap: 18px; }
.lp-nav-call {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 0;
  text-decoration: none;
}
.lp-nav-call .l {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-deep);
}
.lp-nav-call .v {
  font-family: var(--serif); font-size: 17px; font-weight: 600;
  color: var(--ink); letter-spacing: -0.01em; line-height: 1.1;
}
/* Wrapper provides max-width; must be flex to space logo, links, nav-right */
.st-lp-nav-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100%; }

/* ----- HERO ----- */
.lp-hero {
  padding: 80px 56px; background: var(--paper); border-bottom: 1px solid var(--line);
}
.lp-hero-inner {
  max-width: 900px; margin: 0 auto; text-align: center;
}
.lp-hero-headline {
  font-family: var(--serif); font-size: 64px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.1; color: var(--ink);
  margin: 0 0 24px;
}
.lp-hero-subhead {
  font-family: var(--serif); font-size: 20px; line-height: 1.5;
  color: var(--ink-soft); margin: 0 0 36px;
}
.lp-hero-ctas {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px;
}
.lp-hero-reassure {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0;
}

/* ----- HOW IT WORKS ----- */
.lp-how-it-works {
  padding: 100px 56px; background: var(--white); border-bottom: 1px solid var(--line);
}
.lp-how-head { max-width: 800px; margin-bottom: 56px; }
.lp-how-head h2 { font-size: 52px; margin: 16px 0 0; color: var(--ink); }
.lp-how-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px;
}
.lp-how-step { display: flex; flex-direction: column; gap: 16px; }
.lp-how-num {
  font-family: var(--serif); font-size: 56px; font-weight: 400;
  background: linear-gradient(180deg, var(--gold) 0%, var(--gold-deep) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1; letter-spacing: -0.02em;
}
.lp-how-step h3 {
  font-family: var(--serif); font-size: 22px; font-weight: 500;
  letter-spacing: -0.01em; margin: 0; line-height: 1.2; color: var(--ink);
}
.lp-how-step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--ink-soft); }

/* ----- PATHWAY ----- */
.lp-pathway {
  padding: 72px 56px; background: var(--mint); border-bottom: 1px solid var(--line);
}
.lp-pathway-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.lp-pathway-inner h2 { font-size: 36px; margin: 16px 0 48px; color: var(--ink); letter-spacing: -0.01em; }
.lp-pathway-steps {
  list-style: none; padding: 0; margin: 0;
  display: flex; align-items: flex-start; justify-content: center; gap: 0;
}
.lp-pathway-step {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  flex: 1; position: relative;
}
.lp-pathway-step:not(:last-child)::after {
  content: ""; position: absolute;
  top: 20px; left: calc(50% + 20px); right: calc(-50% + 20px);
  height: 1px; background: var(--teal-700); opacity: 0.3;
}
.lp-pathway-num {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--teal-800); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-size: 18px; font-weight: 600;
  position: relative; z-index: 1; flex-shrink: 0;
}
.lp-pathway-label {
  font-family: var(--serif); font-size: 15px; color: var(--ink);
  line-height: 1.4; max-width: 130px; text-align: center;
}

/* ----- PRICING ----- */
.lp-pricing {
  padding: 100px 56px; background: var(--white); border-bottom: 1px solid var(--line);
}
.lp-pricing-head {
  display: block; max-width: 900px; margin: 0 auto 56px; text-align: center;
}
.lp-pricing-head h2 { font-size: 48px; margin: 16px 0 0; color: var(--ink); letter-spacing: -0.01em; }
.lp-pricing-head .sub {
  font-family: var(--serif); font-size: 18px; line-height: 1.5; color: var(--ink-soft); max-width: 50ch;
  margin: 12px auto 0;
}
.lp-pricing-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  background: transparent; border: none;
  max-width: 1000px; margin: 0 auto;
}
.lp-price {
  background: var(--white); padding: 40px 32px; border: 1px solid #d4d4d4;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  display: flex; flex-direction: column; gap: 16px; position: relative;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.lp-price:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.12); border-color: var(--teal-700); }
.lp-price-name {
  font-family: var(--serif); font-size: 32px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink); margin: 0;
}
.lp-price-fig {
  font-family: var(--serif); font-size: 56px; font-weight: 500;
  letter-spacing: -0.025em; color: var(--teal-800); margin: 0;
}
.lp-price-sets {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0;
}
.lp-price-blurb {
  margin: 4px 0 6px; font-family: var(--serif); font-style: italic; font-size: 16px;
  line-height: 1.4; color: var(--ink-soft);
}
.lp-price-bullets {
  list-style: none; padding: 0; margin: 12px 0 24px;
  display: flex; flex-direction: column; gap: 12px;
  font-size: 15px; line-height: 1.6; flex: 1; color: var(--ink);
}
.lp-price-bullets li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-soft); }
.lp-price-bullets li::before {
  content: "✓"; color: var(--teal-700); font-family: var(--mono); flex-shrink: 0;
  font-weight: bold; font-size: 14px;
}
.lp-price-actions { display: flex; flex-direction: column; gap: 12px; margin-top: auto; }
.lp-price-actions .btn { width: 100%; font-size: 14px; padding: 12px 16px; }

/* ----- RELAPSE OPTIONS ----- */
.lp-relapse-options {
  padding: 100px 56px; background: #f5f3f0; border-bottom: 1px solid var(--line);
  border-left: 4px solid var(--teal-700);
}
.lp-relapse-options-head { max-width: 900px; margin: 0 auto 48px; text-align: center; }
.lp-relapse-options-head h2 { font-size: 48px; margin: 16px 0 12px; color: var(--ink); letter-spacing: -0.01em; }
.lp-relapse-subtext {
  font-family: var(--serif); font-size: 16px; color: var(--ink-mute);
  margin: 0 auto; line-height: 1.6; max-width: 700px;
}
.lp-relapse-options .lp-pricing-grid { max-width: 800px; margin: 0 auto; }
.lp-price.relapse { background: var(--white); border: 1px solid var(--line); }

/* ----- WHAT'S DIFFERENT ----- */
.lp-whats-different {
  padding: 100px 56px; background: var(--paper); border-bottom: 1px solid var(--line);
}
.lp-whats-different-head { max-width: 800px; margin-bottom: 40px; }
.lp-whats-different-head h2 { font-size: 52px; margin: 16px 0 0; }
.lp-whats-different-anchor {
  font-family: var(--serif); font-style: italic; font-size: 17px;
  color: var(--ink-soft); line-height: 1.65; margin: 18px 0 0; max-width: 60ch;
}
.lp-whats-different-list { max-width: 700px; }
.lp-whats-different-list ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 16px;
}
.lp-whats-different-list li {
  font-family: var(--serif); font-size: 18px; color: var(--ink);
  line-height: 1.5; padding-left: 28px; position: relative;
}
.lp-whats-different-list li::before {
  content: "•"; position: absolute; left: 0; color: var(--teal-700); font-weight: bold; font-size: 20px;
}

/* ----- REASSURANCE ----- */
.lp-reassurance {
  padding: 120px 56px; background: var(--mint); border-bottom: 1px solid var(--line);
  text-align: center;
}
.lp-reassurance-inner { max-width: 700px; margin: 0 auto; }
.lp-reassurance h2 {
  font-size: 52px; font-weight: 600; margin: 0 0 20px; color: var(--ink);
  letter-spacing: -0.01em;
}
.lp-reassurance p {
  font-family: var(--serif); font-size: 20px; line-height: 1.6; color: var(--ink-soft); margin: 0;
}

/* ----- FINAL CTA ----- */
.lp-final-cta {
  padding: 120px 56px; background: var(--teal-900); color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,0.1); text-align: center;
  position: relative; overflow: hidden;
}
.lp-final-cta::before {
  content: ""; position: absolute;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(201,164,73,0.08) 0%, transparent 70%);
  top: -200px; right: -150px; pointer-events: none;
}
.lp-final-cta h2 {
  font-family: var(--serif); font-size: 48px; font-weight: 600;
  margin: 0 0 16px; color: var(--white); position: relative; z-index: 1;
}
.lp-final-cta-actions {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  margin: 32px 0 24px; position: relative; z-index: 1;
}
.lp-final-cta-note {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: rgba(255,255,255,0.66); margin: 0;
  position: relative; z-index: 1;
}
.lp-final-cta-consult {
  font-family: var(--serif); font-size: 14px; font-style: italic;
  color: rgba(255,255,255,0.55); margin: 6px 0 0; line-height: 1.5;
  position: relative; z-index: 1;
}
.lp-brand-line {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); margin: 16px 0 0;
  position: relative; z-index: 1;
}

/* ----- FOOTER CONTENT ----- */
.lp-footer-content {
  padding: 60px 56px; background: var(--white); border-bottom: 1px solid var(--line);
}
.lp-footer-items {
  max-width: 1000px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
}
.lp-footer-item {
  text-align: center;
  font-family: var(--serif); font-size: 16px; font-weight: 500;
  color: var(--ink); line-height: 1.5;
  padding: 28px 16px 16px; position: relative;
}
.lp-footer-item::before {
  content: "✓"; position: absolute; top: -4px; left: 50%;
  transform: translateX(-50%);
  font-size: 22px; color: var(--teal-700); font-weight: bold;
}

/* =========================================================================
   LP2 — Why Different section
   ========================================================================= */
.lp-why-different {
  padding: 100px 56px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.lp-why-different-inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.lp-why-different-inner h2 {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--ink);
}
.lp-why-different-inner p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 12px;
}

/* =========================================================================
   LP2 — Trust section
   ========================================================================= */
.lp-trust {
  padding: 120px 56px;
  background: var(--mint);
  border-bottom: 1px solid var(--line);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lp-trust::before {
  content: "";
  position: absolute;
  width: 450px; height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,164,73,0.12) 0%, transparent 70%);
  top: -150px; right: -100px;
  pointer-events: none;
}
.lp-trust::after {
  content: "";
  position: absolute;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(13,79,92,0.08) 0%, transparent 70%);
  bottom: -120px; left: -80px;
  pointer-events: none;
}
.lp-trust-head {
  max-width: 700px;
  margin: 0 auto 56px;
  text-align: center;
  position: relative;
  z-index: 1;
}
.lp-trust-head h2 {
  font-size: 52px;
  font-weight: 600;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.lp-trust-list {
  max-width: 800px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
  position: relative;
  z-index: 1;
}
.lp-trust-list li {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--ink);
  line-height: 1.6;
  padding: 24px;
  border-radius: 8px;
  position: relative;
  text-align: left;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.8);
}
.lp-trust-list li::before {
  content: "✓";
  position: absolute;
  left: 12px; top: 22px;
  color: var(--teal-700);
  font-family: var(--mono);
  font-weight: bold;
  font-size: 20px;
}

/* =========================================================================
   LP3 — The Difference section
   ========================================================================= */
.lp-the-difference {
  padding: 100px 56px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
.lp-the-difference-inner {
  max-width: 700px;
  margin: 0 auto;
  text-align: center;
}
.lp-the-difference-inner h2 {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 600;
  margin: 0 0 20px;
  color: var(--ink);
}
.lp-the-difference-inner p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.lp-the-difference-inner strong {
  color: var(--ink);
  font-weight: 600;
  display: block;
  margin-top: 8px;
}

/* =========================================================================
   LP3 — Reassurance Section
   ========================================================================= */
.lp-reassurance-section {
  padding: 120px 56px;
  background: var(--mint);
  border-bottom: 1px solid var(--line);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lp-reassurance-section::before {
  content: "";
  position: absolute;
  width: 450px; height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(144,210,193,0.15) 0%, transparent 70%);
  top: -150px; right: -100px;
  pointer-events: none;
}
.lp-reassurance-section::after {
  content: "";
  position: absolute;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,164,73,0.08) 0%, transparent 70%);
  bottom: -120px; left: -80px;
  pointer-events: none;
}
.lp-reassurance-section-inner {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.lp-reassurance-section h2 {
  font-size: 52px;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.lp-reassurance-section p {
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0;
}
.lp-reassurance-section p:first-of-type {
  font-size: 20px;
  font-weight: 500;
  margin: 0 0 12px;
}
.lp-reassurance-section p:last-of-type {
  margin-top: 16px;
}

/* =========================================================================
   RESPONSIVE OVERRIDES — RP / TO / BC / FQ / LP  (desktop-first sections)
   Breakpoints mirror the HIW section: max-width 1024px (tablet) and 767px (mobile)
   ========================================================================= */

/* ---- Tablet ≤ 1024px ---- */
@media (max-width: 1024px) {

  /* === Shared padding helper — all big sections === */
  .rp-frame-band, .rp-highlight, .rp-approach, .rp-why, .rp-pricing, .rp-consult,
  .rp-alone, .rp-faq,
  .to-cards-sec, .to-doctor-band, .to-compare, .to-expect, .to-included,
  .to-transparency, .to-flow, .to-consult, .to-relapse-band, .to-faq,
  .bc-process, .bc-guarantee, .bc-why, .bc-paths, .bc-format, .bc-prep,
  .bc-qs, .bc-youchoose, .bc-after, .bc-faq, .bc-relapse-band,
  .fq-jump, .fq-highlights, .fq-group, .fq-still,
  .lp-how-it-works, .lp-whats-different, .lp-reassurance, .lp-final-cta,
  .lp-pricing, .lp-relapse-options,
  .lp-why-different, .lp-trust,
  .lp-the-difference, .lp-reassurance-section { padding-left: 40px; padding-right: 40px; }

  .rp-hero, .to-hero, .bc-hero, .fq-hero { padding: 48px 40px 64px; }
  .bc-address { padding: 48px 40px; }
  .lp-pathway { padding: 56px 40px; }
  .lp-footer-content { padding: 48px 40px; }
  .lp-promo, .lp-nav { padding-left: 32px; padding-right: 32px; }

  /* === RP hero === */
  .rp-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .rp-hero-copy h1 { font-size: 56px; }
  .rp-frame-line { font-size: 38px; }
  .rp-highlight h2 { font-size: 48px; }
  .rp-h-rule p { font-size: 20px; }

  /* === RP grids === */
  .rp-approach-grid,
  .rp-approach-grid.four { grid-template-columns: repeat(2, 1fr); }
  .rp-why-grid { grid-template-columns: repeat(2, 1fr); }
  .rp-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .rp-consult-grid { grid-template-columns: 1fr; gap: 40px; }
  .rp-faq-grid { grid-template-columns: repeat(2, 1fr); }

  /* === TO hero & grids === */
  .to-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .to-hero-copy h1 { font-size: 60px; }
  .to-cards-head h2, .to-cards-grid { }
  .to-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .to-doctor-grid { grid-template-columns: 1fr; gap: 40px; }
  .to-doctor-copy h2 { font-size: 44px; }
  .to-expect-grid { grid-template-columns: repeat(2, 1fr); }
  .to-included-grid { grid-template-columns: repeat(2, 1fr); }
  .to-flow-grid { grid-template-columns: repeat(2, 1fr); }
  .to-consult-grid { grid-template-columns: 1fr; gap: 40px; }
  .to-faq-grid { grid-template-columns: repeat(2, 1fr); }

  /* compare table — allow horizontal scroll */
  .to-compare-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .to-row { min-width: 640px; }

  /* === BC hero & grids === */
  .bc-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .bc-hero-left h1 { font-size: 56px; }
  .bc-form-card { position: static; }
  .bc-process-item { grid-template-columns: 80px 1fr; gap: 24px; }
  .bc-guarantee-grid { grid-template-columns: 1fr; }
  .bc-why-grid { grid-template-columns: repeat(3, 1fr); }
  .bc-paths-grid { grid-template-columns: repeat(2, 1fr); }
  .bc-format-grid { grid-template-columns: 1fr; }
  .bc-prep-grid { grid-template-columns: repeat(2, 1fr); }
  .bc-qs-grid { grid-template-columns: repeat(3, 1fr); }
  .bc-after-list { grid-template-columns: 1fr; gap: 12px; }
  .bc-relapse-band-inner { grid-template-columns: 1fr; gap: 40px; }
  .bc-relapse-band-copy h2 { font-size: 44px; }
  .bc-address-inner { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .bc-process-head h2, .bc-guarantee-inner h2, .bc-why-head h2,
  .bc-paths-head h2 { font-size: 44px; }

  /* === FQ hero & grids === */
  .fq-hero-inner { grid-template-columns: 1fr; gap: 48px; }
  .fq-hero-copy h1 { font-size: 60px; }
  .fq-jump-grid { grid-template-columns: repeat(2, 1fr); }
  .fq-highlights-grid { grid-template-columns: 1fr; }
  .fq-group { padding: 72px 40px; }
  .fq-group-title { font-size: 40px; }
  .fq-still-row { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .fq-q { grid-template-columns: 44px 1fr auto; gap: 18px; padding: 26px 4px; }
  .fq-a { padding-left: 66px; }
  .fq-item.open .fq-a { padding: 6px 4px 28px 66px; }

  /* === LP sections === */
  .st-lp-nav-wrapper { flex-wrap: wrap; gap: 16px; }
  .lp-nav-links { display: none; }   /* collapse nav links on tablet */
  .lp-promo .desktop-only { display: none; }
  .lp-hero-headline { font-size: 50px; }
  .lp-how-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .lp-how-head h2 { font-size: 42px; }
  .lp-pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .lp-relapse-options .lp-pricing-grid { grid-template-columns: 1fr 1fr; }
  .lp-pricing-head h2 { font-size: 40px; }
  .lp-relapse-options-head h2 { font-size: 40px; }
  .lp-whats-different-head h2, .lp-reassurance h2 { font-size: 42px; }
  .lp-final-cta h2 { font-size: 40px; }
  .lp-why-different { padding-top: 72px; padding-bottom: 72px; }
  .lp-why-different-inner h2 { font-size: 36px; }
  .lp-trust { padding-top: 80px; padding-bottom: 80px; }
  .lp-trust-head h2 { font-size: 40px; }
  .lp-the-difference { padding-top: 72px; padding-bottom: 72px; }
  .lp-the-difference-inner h2 { font-size: 36px; }
  .lp-reassurance-section { padding-top: 80px; padding-bottom: 80px; }
  .lp-reassurance-section h2 { font-size: 40px; }
  .lp-footer-items { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .lp-pathway-steps { flex-wrap: wrap; gap: 24px; }
  .lp-pathway-step:not(:last-child)::after { display: none; }
  .lp-pathway-step { flex: 0 0 calc(50% - 12px); }
}

/* ---- Mobile ≤ 767px ---- */
@media (max-width: 767px) {

  /* === Shared padding — all big sections === */
  .rp-frame-band, .rp-highlight, .rp-approach, .rp-why, .rp-pricing, .rp-consult,
  .rp-alone, .rp-faq,
  .to-cards-sec, .to-doctor-band, .to-compare, .to-expect, .to-included,
  .to-transparency, .to-flow, .to-consult, .to-relapse-band, .to-faq,
  .bc-process, .bc-guarantee, .bc-why, .bc-paths, .bc-format, .bc-prep,
  .bc-qs, .bc-youchoose, .bc-after, .bc-faq, .bc-relapse-band,
  .fq-jump, .fq-highlights, .fq-group, .fq-still,
  .lp-how-it-works, .lp-whats-different, .lp-reassurance, .lp-final-cta,
  .lp-pricing, .lp-relapse-options { padding-left: 20px; padding-right: 20px; }

  .rp-hero, .to-hero, .bc-hero, .fq-hero { padding: 36px 20px 48px; }
  .bc-address { padding: 36px 20px; }
  .lp-pathway { padding: 40px 20px; }
  .lp-footer-content { padding: 36px 20px; }
  .lp-promo { text-align: left; padding: 10px 20px; }
  .lp-promo, .lp-promo .l, .lp-promo .r { justify-content: flex-start; align-items: flex-start; }
  .st-lp-promo-wrapper { flex-direction: column; gap: 8px; align-items: flex-start; }
  .lp-nav { padding: 14px 20px; }

  /* === RP hero & sections === */
  .rp-hero-copy h1 { font-size: 40px; }
  .rp-frame-band { padding-top: 56px; padding-bottom: 56px; }
  .rp-frame-line { font-size: 28px; }
  .rp-highlight { padding-top: 56px; padding-bottom: 56px; }
  .rp-highlight h2 { font-size: 36px; }
  .rp-h-rule p { font-size: 18px; }
  .rp-approach, .rp-why, .rp-pricing, .rp-consult, .rp-alone, .rp-faq { padding-top: 56px; padding-bottom: 56px; }
  .rp-approach-grid,
  .rp-approach-grid.four { grid-template-columns: 1fr; }
  .rp-approach-step { border-right: none; border-bottom: 1px solid var(--line); }
  .rp-approach-step:last-child { border-bottom: none; }
  .rp-approach-head h2 { font-size: 36px; }
  .rp-why-grid { grid-template-columns: 1fr; }
  .rp-pricing-grid { grid-template-columns: 1fr; }
  .rp-pricing-head h2 { font-size: 36px; }
  .rp-faq-grid { grid-template-columns: 1fr; }

  /* === TO hero & sections === */
  .to-hero-copy h1 { font-size: 44px; }
  .to-cards-sec, .to-doctor-band, .to-compare, .to-expect, .to-included,
  .to-transparency, .to-flow, .to-consult, .to-relapse-band, .to-faq { padding-top: 56px; padding-bottom: 56px; }
  .to-cards-head h2 { font-size: 40px; }
  .to-cards-grid { grid-template-columns: 1fr; }
  .to-doctor-copy h2 { font-size: 36px; }
  .to-expect-grid { grid-template-columns: 1fr; }
  .to-included-grid { grid-template-columns: 1fr; }
  .to-flow-grid { grid-template-columns: 1fr; }
  .to-flow-step { border-right: none; }
  .to-faq-grid { grid-template-columns: 1fr; }
  .to-faq-head h2, .to-expect-head h2, .to-included-head h2,
  .to-flow-head h2, .to-consult-copy h2, .to-compare-head h2 { font-size: 36px; }

  /* === BC hero & sections === */
  .bc-hero-left h1 { font-size: 40px; }
  .bc-call-row { grid-template-columns: 1fr; gap: 20px; }
  .bc-call-tel { font-size: 34px; }
  .bc-hero-meta { grid-template-columns: 1fr; gap: 16px; }
  .bc-process, .bc-guarantee, .bc-why, .bc-paths, .bc-format, .bc-prep,
  .bc-qs, .bc-youchoose, .bc-after, .bc-faq, .bc-relapse-band { padding-top: 56px; padding-bottom: 56px; }
  .bc-process-head h2, .bc-guarantee-inner h2, .bc-why-head h2,
  .bc-paths-head h2 { font-size: 36px; }
  .bc-process-item { grid-template-columns: 60px 1fr; gap: 16px; }
  .bc-process-foot { grid-template-columns: 1fr; }
  .bc-why-grid { grid-template-columns: repeat(2, 1fr); }
  .bc-paths-grid { grid-template-columns: 1fr; }
  .bc-prep-grid { grid-template-columns: 1fr; }
  .bc-qs-grid { grid-template-columns: repeat(2, 1fr); }
  .bc-youchoose h2, .bc-after-inner h2 { font-size: 36px; }
  .bc-address-inner { grid-template-columns: 1fr; gap: 24px; }
  .bc-relapse-band { padding-top: 56px; padding-bottom: 56px; }
  .bc-relapse-band-copy h2 { font-size: 36px; }
  .bc-guarantee-num { font-size: 60px; }

  /* === FQ hero & sections === */
  .fq-hero-copy h1 { font-size: 44px; }
  .fq-jump, .fq-highlights, .fq-still { padding-top: 56px; padding-bottom: 56px; }
  .fq-jump-grid { grid-template-columns: 1fr; }
  .fq-jump-head h2 { font-size: 40px; }
  .fq-highlights-head h2 { font-size: 36px; }
  .fq-group { padding: 48px 20px; }
  .fq-group-title { font-size: 32px; }
  .fq-still h2 { font-size: 36px; }
  .fq-still-row { grid-template-columns: 1fr; gap: 24px; }
  .fq-q { grid-template-columns: 36px 1fr auto; gap: 12px; padding: 20px 4px; }
  .fq-q-text { font-size: 17px; width: 100%; text-wrap: auto; }
  .fq-a { padding-left: 48px; }
  .fq-item.open .fq-a { padding: 4px 4px 22px 48px; }
  .fq-a p { font-size: 14.5px; }

  /* === LP sections === */
  .lp-hero { padding: 48px 20px 56px; }
  .lp-hero-headline { font-size: 36px; }
  .lp-hero-subhead { font-size: 17px; }
  .lp-how-it-works { padding-top: 56px; padding-bottom: 56px; }
  .lp-how-grid { grid-template-columns: 1fr; gap: 28px; }
  .lp-how-head h2 { font-size: 34px; }
  .lp-pricing-grid { grid-template-columns: 1fr; }
  .lp-relapse-options .lp-pricing-grid { grid-template-columns: 1fr; }
  .lp-pricing-head h2 { font-size: 34px; }
  .lp-relapse-options-head h2 { font-size: 34px; }
  .lp-whats-different-head h2 { font-size: 34px; }
  .lp-reassurance h2 { font-size: 34px; }
  .lp-reassurance p { font-size: 17px; }
  .lp-final-cta h2 { font-size: 30px; }
  .lp-final-cta { padding: 72px 20px; }
  .lp-footer-items { grid-template-columns: 1fr; gap: 20px; }
  .lp-pathway-step { flex: 0 0 100%; }
  .lp-pathway-inner h2 { font-size: 28px; margin-bottom: 32px; }
  .lp-price-fig { font-size: 44px; }
  .lp-nav-right { gap: 10px; }
  .lp-why-different { padding-top: 48px; padding-bottom: 48px; }
  .lp-why-different-inner h2 { font-size: 28px; }
  .lp-why-different-inner p { font-size: 16px; }
  .lp-trust { padding-top: 56px; padding-bottom: 56px; }
  .lp-trust-head h2 { font-size: 32px; }
  .lp-trust-list { grid-template-columns: 1fr; gap: 20px; }
  .lp-the-difference { padding-top: 48px; padding-bottom: 48px; }
  .lp-the-difference-inner h2 { font-size: 28px; }
  .lp-the-difference-inner p { font-size: 16px; }
  .lp-reassurance-section { padding-top: 56px; padding-bottom: 56px; }
  .lp-reassurance-section h2 { font-size: 32px; }
  .lp-reassurance-section p:first-of-type { font-size: 17px; }
}

/* =========================================================================
   RESPONSIVE PASS 2 — Vertical padding reductions + missed fixes
   These supplement the max-width breakpoints above.
   ========================================================================= */

/* ---- Tablet ≤ 1024px: reduce tall vertical padding on desktop-first sections ---- */
@media (max-width: 1024px) {

  /* RP page — 110px → 72px */
  .rp-frame-band { padding-top: 72px; padding-bottom: 72px; }
  .rp-highlight   { padding-top: 72px; padding-bottom: 72px; }
  .rp-approach    { padding-top: 72px; padding-bottom: 72px; }
  .rp-why         { padding-top: 72px; padding-bottom: 72px; }
  .rp-pricing     { padding-top: 72px; padding-bottom: 72px; }
  .rp-consult     { padding-top: 72px; padding-bottom: 72px; }
  .rp-alone       { padding-top: 72px; padding-bottom: 72px; }
  .rp-faq         { padding-top: 72px; padding-bottom: 72px; }

  /* TO page — 110px → 72px */
  .to-cards-sec   { padding-top: 72px; padding-bottom: 72px; }
  .to-doctor-band { padding-top: 72px; padding-bottom: 72px; }
  .to-compare     { padding-top: 72px; padding-bottom: 72px; }
  .to-expect      { padding-top: 72px; padding-bottom: 72px; }
  .to-included    { padding-top: 72px; padding-bottom: 72px; }
  .to-transparency { padding-top: 72px; padding-bottom: 72px; }
  .to-flow        { padding-top: 72px; padding-bottom: 72px; }
  .to-consult     { padding-top: 72px; padding-bottom: 72px; }
  .to-relapse-band { padding-top: 72px; padding-bottom: 72px; }
  .to-faq         { padding-top: 72px; padding-bottom: 72px; }

  /* BC page — 110px → 72px */
  .bc-process     { padding-top: 72px; padding-bottom: 72px; }
  .bc-guarantee   { padding-top: 72px; padding-bottom: 72px; }
  .bc-why         { padding-top: 72px; padding-bottom: 72px; }
  .bc-paths       { padding-top: 72px; padding-bottom: 72px; }
  .bc-format      { padding-top: 72px; padding-bottom: 72px; }
  .bc-prep        { padding-top: 72px; padding-bottom: 72px; }
  .bc-qs          { padding-top: 72px; padding-bottom: 72px; }
  .bc-youchoose   { padding-top: 72px; padding-bottom: 72px; }
  .bc-after       { padding-top: 72px; padding-bottom: 72px; }
  .bc-faq         { padding-top: 72px; padding-bottom: 72px; }
  .bc-relapse-band { padding-top: 72px; padding-bottom: 72px; }

  /* FQ page */
  .fq-jump        { padding-top: 72px; padding-bottom: 72px; }
  .fq-highlights  { padding-top: 72px; padding-bottom: 72px; }
  .fq-still       { padding-top: 72px; padding-bottom: 72px; }

  /* LP page */
  .lp-how-it-works   { padding-top: 72px; padding-bottom: 72px; }
  .lp-whats-different { padding-top: 72px; padding-bottom: 72px; }
  .lp-reassurance    { padding-top: 80px; padding-bottom: 80px; }
  .lp-final-cta      { padding-top: 80px; padding-bottom: 80px; }
  .lp-pricing        { padding-top: 72px; padding-bottom: 72px; }
  .lp-relapse-options { padding-top: 72px; padding-bottom: 72px; }

  /* LP nav: show links on tablet but allow wrap */
  .lp-nav-links { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12.5px; }

  /* BC relapse band inner: force single column (overrides desktop-only grid) */
  .bc-relapse-band-inner { display: flex; flex-direction: column; gap: 36px; }

  /* FQ accordion answer indent — reduce at tablet */
  .fq-a { padding-left: 72px; }
  .fq-item.open .fq-a { padding: 6px 4px 28px 72px; }

  /* TO cards — reduce h2 font sizes */
  .to-cards-head h2  { font-size: 44px; }
  .to-faq-head h2    { font-size: 40px; }
  .to-expect-head h2 { font-size: 40px; }
  .to-relapse-band-copy h2 { font-size: 44px; }

  /* RP font sizes */
  .rp-approach-head h2 { font-size: 42px; }
  .rp-why-head h2      { font-size: 42px; }
  .rp-pricing-head h2  { font-size: 42px; }
  .rp-faq-head h2      { font-size: 38px; }
  .rp-alone h2         { font-size: 42px; }

  /* BC heading sizes */
  .bc-format-head h2 { font-size: 42px; }
  .bc-prep-head h2   { font-size: 40px; }
  .bc-qs-head h2     { font-size: 40px; }
  .bc-faq-head h2    { font-size: 40px; }
  .bc-youchoose h2   { font-size: 42px; }
  .bc-after-inner h2 { font-size: 42px; }

  /* LP heading sizes at tablet */
  .lp-how-head h2 { font-size: 40px; }
}

/* ---- Mobile ≤ 767px: additional vertical padding reduction pass ---- */
@media (max-width: 767px) {

  /* RP — 56px already set for most in Pass 1 */
  .rp-hero        { padding-top: 40px; padding-bottom: 48px; }

  /* BC-specific missing reductions */
  .bc-address      { padding: 32px 20px; }
  .bc-call-tel     { font-size: 30px; }
  .bc-process-item { grid-template-columns: 1fr; gap: 8px; }
  .bc-process-n    { padding-top: 0; }
  .bc-process-foot { padding: 20px; }

  /* LP nav — mobile: logo + phone only */
  .lp-nav             { padding: 12px 16px; }
  .st-lp-nav-wrapper  { gap: 12px; }
  .lp-nav-links       { display: none; }
  .lp-nav-call .v     { font-size: 15px; }

  /* RP highlight rule font */
  .rp-h-rule p    { font-size: 17px; }
  .rp-highlight-lede { font-size: 18px; }

  /* TO doctor band responsive */
  .to-doctor-copy h2 { font-size: 34px; }
  .to-doctor-steps li { grid-template-columns: 40px 1fr; gap: 14px; }

  /* TO compare — horizontal scroll */
  .to-compare-table { overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; }
  .to-row { min-width: 560px; }
  .to-cell { padding: 14px 16px; font-size: 14px; }

  /* FQ jump missing mobile */
  .fq-jump-head h2 { font-size: 34px; }
  .fq-highlights-head h2 { font-size: 32px; }
  .fq-h-q         { font-size: 24px; }

  /* FQ group blurb */
  .fq-group-blurb { font-size: 16px; }

  /* LP pricing: price figure size */
  .lp-price-name  { font-size: 26px; }
  .lp-price-fig   { font-size: 40px; }

  /* LP relapse subtext */
  .lp-relapse-subtext { font-size: 15px; }

  /* LP footer item padding */
  .lp-footer-item { padding-top: 22px; font-size: 14px; }

  /* BC guarantee grid — 1 col on mobile */
  .bc-guarantee-grid { grid-template-columns: 1fr; }
  .bc-why-grid { grid-template-columns: 1fr 1fr; }

  /* BC relapse band — ensure clean override */
  .bc-relapse-band-inner { display: flex; flex-direction: column; gap: 28px; }
  .bc-relapse-band-stat .num { font-size: 64px; }

  /* Shared relapse-band widget also at mobile */
  .bc-relapse-band { padding-top: 48px; padding-bottom: 48px; }

  /* LP brand line spacing */
  .lp-brand-line { margin-top: 12px; }

  /* LP final CTA actions stack */
  .lp-final-cta-actions { flex-direction: column; align-items: center; gap: 10px; }
  .lp-final-cta-actions .btn { width: 100%; max-width: 320px; }

  /* RP consult card */
  .rp-consult-card { padding: 24px; }
  .rp-pricing-foot { font-size: 14px; }

  /* TO transparency */
  .to-transparency h2 { font-size: 36px; }
  .to-flow-head h2    { font-size: 36px; }
}

/* =========================================================================
   RESPONSIVE PASS 3 — Remaining gaps found in final audit
   ========================================================================= */

/* ---- Tablet ≤ 1024px: heading font-sizes not covered in Pass 1/2 ---- */
@media (max-width: 1024px) {

  /* LP hero — CSS fallback (Elementor responsive controls also handle this) */
  .lp-hero { padding-top: 56px; padding-bottom: 64px; padding-left: 40px; padding-right: 40px; }

  /* TO sections missing from Pass 1/2 */
  .to-compare-head h2  { font-size: 40px; }
  .to-included-head h2 { font-size: 40px; }
  .to-consult-copy h2  { font-size: 38px; }

  /* FQ sections missing from Pass 1/2 */
  .fq-jump-head h2       { font-size: 42px; }
  .fq-highlights-head h2 { font-size: 40px; }
  .fq-still h2           { font-size: 40px; }

  /* BC guarantee num — large stat in stacked card at tablet */
  .bc-guarantee-num { font-size: 64px; }
}

/* ---- Mobile ≤ 767px: remaining grid collapses and overrides ---- */
@media (max-width: 767px) {

  /* LP hero — restore correct mobile padding (overrides the ≤1024px rule above) */
  .lp-hero { padding-top: 40px; padding-bottom: 48px; padding-left: 20px; padding-right: 20px; }

  /* BC FAQ grid — missing mobile collapse */
  .bc-faq-grid { grid-template-columns: 1fr; }

  /* FQ highlight question — reduce further on mobile */
  .fq-h-q { font-size: 22px; }

  /* TO heading overrides at mobile (keep them smaller than the tablet values above) */
  .to-compare-head h2  { font-size: 32px; }
  .to-included-head h2 { font-size: 32px; }
  .to-consult-copy h2  { font-size: 32px; }

  /* FQ heading overrides at mobile */
  .fq-jump-head h2       { font-size: 34px; }
  .fq-highlights-head h2 { font-size: 32px; }
  .fq-still h2           { font-size: 32px; }

  /* FAQ answer indent — restore 48px (Pass 2 tablet block later in file overrides Pass 1 mobile) */
  .fq-a { padding-left: 48px; }
  .fq-item.open .fq-a { padding: 4px 4px 22px 48px; }

  /* FAQ groups — mobile layout improvements */
  .fq-group-head { margin-bottom: 24px; }
  .fq-q { align-items: start; }
}

/* =========================================================================
   SM T&C — Terms & Conditions widget
   ========================================================================= */
.sm-tc {
  width: 100%;
  box-sizing: border-box;
}
.st-sm-tc-wrapper {
  width: 100%;
}
.sm-tc-head {
  margin-bottom: 32px;
}
.sm-tc-head .eyebrow {
  display: inline-block;
  margin-bottom: 12px;
}
.sm-tc-head h1 {
  margin: 0 0 12px;
  font-size: 48px;
  line-height: 1.15;
  font-weight: 700;
}
.sm-tc-updated {
  margin: 0;
  font-size: 14px;
  opacity: 0.7;
}
.sm-tc-intro {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 40px;
}
.sm-tc-intro p:last-child { margin-bottom: 0; }
.sm-tc-sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sm-tc-section {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 28px;
}
.sm-tc-section:first-child {
  border-top: none;
  padding-top: 0;
}
.sm-tc-section-title {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
}
.sm-tc-section-body {
  font-size: 16px;
  line-height: 1.65;
}
.sm-tc-section-body p:last-child { margin-bottom: 0; }
.sm-tc-section-body ul,
.sm-tc-section-body ol {
  padding-left: 1.25em;
  margin: 0.5em 0;
}
.sm-tc-section-body a { text-decoration: underline; }
.sm-tc-contact {
  margin-top: 48px;
  padding: 24px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
}
.sm-tc-contact-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}
.sm-tc-contact-body {
  font-size: 16px;
  line-height: 1.6;
}
.sm-tc-contact-body p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
  .sm-tc-head h1 { font-size: 38px; }
}
@media (max-width: 767px) {
  .sm-tc-head h1 { font-size: 30px; }
  .sm-tc-section-title { font-size: 20px; }
  .sm-tc-intro { font-size: 16px; }
}

/* =========================================================================
   SM PP — Privacy Policy widget
   (mirrors SM T&C fonts, sizing & spacing)
   ========================================================================= */
.sm-pp {
  width: 100%;
  box-sizing: border-box;
}
.st-sm-pp-wrapper {
  width: 100%;
}
.sm-pp-head {
  margin-bottom: 32px;
}
.sm-pp-head .eyebrow {
  display: inline-block;
  margin-bottom: 12px;
}
.sm-pp-head h1 {
  margin: 0 0 12px;
  font-size: 48px;
  line-height: 1.15;
  font-weight: 700;
}
.sm-pp-updated {
  margin: 0;
  font-size: 14px;
  opacity: 0.7;
}
.sm-pp-intro {
  font-size: 17px;
  line-height: 1.6;
  margin-bottom: 40px;
}
.sm-pp-intro p:last-child { margin-bottom: 0; }
.sm-pp-sections {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sm-pp-section {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 28px;
}
.sm-pp-section:first-child {
  border-top: none;
  padding-top: 0;
}
.sm-pp-section-title {
  margin: 0 0 12px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 600;
}
.sm-pp-section-body {
  font-size: 16px;
  line-height: 1.65;
}
.sm-pp-section-body p:last-child { margin-bottom: 0; }
.sm-pp-section-body ul,
.sm-pp-section-body ol {
  padding-left: 1.25em;
  margin: 0.5em 0;
}
.sm-pp-section-body a { text-decoration: underline; }
.sm-pp-contact {
  margin-top: 48px;
  padding: 24px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
}
.sm-pp-contact-title {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
}
.sm-pp-contact-body {
  font-size: 16px;
  line-height: 1.6;
}
.sm-pp-contact-body p:last-child { margin-bottom: 0; }

@media (max-width: 1024px) {
  .sm-pp-head h1 { font-size: 38px; }
}
@media (max-width: 767px) {
  .sm-pp-head h1 { font-size: 30px; }
  .sm-pp-section-title { font-size: 20px; }
  .sm-pp-intro { font-size: 16px; }
}


/* ============================================================
   DOCTOR AFFILIATE LANDING PAGE — shared foundation classes
   Ported from _ds/smiletrue-design-system/colors_and_type.css +
   ui_kits/_shared.css. Used by every smiletrue-aff-* widget.
   Every value here maps to a token from tokens.css so the affiliate
   page inherits the same brand identity as the rest of the site.
   ============================================================ */

/* --- Big serif numeral (01/02/03 badges) --- */
.st-numeral {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 48px;
	line-height: 1;
	color: var(--color-accent);
	display: inline-block;
	letter-spacing: -0.01em;
}
.st-numeral.clip {
	background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-primary-deep) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* --- Sub-section serif headline (CTA bands, mid-tier heads) --- */
.st-h2-band {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 46px;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--color-text);
	margin: 0;
	text-wrap: balance;
}
.st-h2-band em {
	font-style: italic;
	font-weight: 400;
	color: var(--color-primary-deep);
}
.on-dark .st-h2-band { color: var(--color-text-on-dark, #ffffff); }
.on-dark .st-h2-band em { color: var(--color-accent-soft, #e2c984); }

/* --- Check-chip — check-prefix inline item --- */
.check-chip {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--sans);
	font-size: 14px;
	line-height: 1.45;
	color: var(--color-text);
	padding: 0;
}
.check-chip::before {
	content: "✓";
	flex-shrink: 0;
	color: var(--color-primary-deep);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.45;
	display: inline-block;
}
.on-dark .check-chip { color: var(--color-text-on-dark, #ffffff); }
.on-dark .check-chip::before { color: var(--color-accent, #c9a449); }

/* --- Section-head — flex column at top of each affiliate section.
       Base max-width is 100% (fills the container). Per-widget
       section_head_max_width control can constrain it if desired.
       The h2's `text-wrap: balance` handles natural line breaking so
       the head reads editorially even without a hard cap. --- */
.aff-section-head {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 100%;
}
.aff-section-head .eyebrow { align-self: flex-start; }
.aff-section-head.on-dark { color: var(--color-text-on-dark, #ffffff); }

/* --- .card.gold-bar / .card.gold-left — accent variants --- */
.aff-card.gold-bar {
	position: relative;
	background: var(--color-surface, #ffffff);
	border: 1px solid var(--color-border, #d8dfe1);
	border-radius: 4px;
	padding: 32px;
}
.aff-card.gold-bar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 3px;
	background: var(--color-accent, #c9a449);
}
.aff-card.gold-left {
	border-left: 3px solid var(--color-accent, #c9a449);
}

/* ============================================================
   smiletrue-aff-hero — Doctor Affiliate Page hero
   Layout: mobile stacks; ≥1025px 2-col grid (copy | photo).
   Reveal: data-st-reveal="1" → theme reveal.js fade-up.
   ============================================================ */
.aff-hero {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	padding: 80px 20px;
	/* Warm cream → paper gradient — matches the source screenshot's
	   `--paper-warm` (#f5f3ee) tint at the top blending to `--paper`
	   (#fafbfb) at the bottom. Editor can override via the Style tab →
	   Section Background group control (color / gradient with multiple
	   stops / image / overlay). */
	background: linear-gradient(180deg, #f5f3ee 0%, #fafbfb 55%);
	border-bottom: 1px solid var(--color-border, #d8dfe1);
	box-sizing: border-box;
}
.aff-hero-copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	max-width: 640px;
	/* Reorder via CSS var — widget's Order (Copy) responsive control emits this. */
	order: var(--aff-hero-copy-order, 1);
}
.aff-hero-copy .display {
	font-family: var(--serif);
	font-weight: 400;
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--color-text);
	margin: 0;
	text-wrap: balance;
}
.aff-hero-copy .display em {
	font-style: italic;
	color: var(--color-primary-deep);
}
.aff-hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.aff-hero-actions .btn .arrow {
	display: inline-block;
	margin-left: 8px;
	transition: transform 0.2s ease;
}
.aff-hero-actions .btn:hover .arrow { transform: translateX(4px); }
.aff-trust {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 28px;
	margin-top: 8px;
}
.aff-hero-art {
	position: relative;
	display: flex;
	align-items: stretch;
	justify-content: center;
	min-height: 320px;
	/* Reorder via CSS var — widget's Order (Photo) responsive control emits this. */
	order: var(--aff-hero-art-order, 2);
}
.aff-hero-photo {
	position: relative;
	width: 100%;
	aspect-ratio: 1040 / 1200;
	max-width: 520px;
	background: var(--color-primary-tint, #dfecee);
	border: 1px solid var(--color-border, #d8dfe1);
	border-radius: 4px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.aff-hero-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.aff-hero-photo-label {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-text-muted, #6e7b80);
	text-align: center;
	padding: 20px;
}

/* Reveal */
.aff-hero[data-st-reveal] { opacity: 0; transform: translateY(16px); }
.aff-hero[data-st-reveal].in {
	opacity: 1;
	transform: none;
	transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
	.aff-hero[data-st-reveal],
	.aff-hero[data-st-reveal].in { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 768px) {
	.aff-hero { padding: 96px 40px; gap: 56px; }
}
@media (min-width: 1025px) {
	.aff-hero {
		grid-template-columns: 1.15fr 1fr;
		gap: 80px;
		padding: 110px 64px;
		align-items: center;
	}
	.aff-hero-copy { max-width: none; }
	.aff-hero-art { min-height: 480px; }
}

/* ============================================================
   smiletrue-aff-cta-band — dark 2-column CTA band w/ gold divider
   Layout: mobile stacks; ≥1025px 3-col (col | 1px gold | col).
   ============================================================ */
.aff-cta-band {
	position: relative;
	background: var(--color-primary-dark, #0a3a44);
	color: var(--color-text-on-dark, #ffffff);
	padding: 56px 20px;
	text-align: center;
	box-sizing: border-box;
}
/* Flex-wrap layout — any number of columns (from repeater) flow into
   auto-wrapping rows. Dividers are siblings inline in the flex flow.
   The `flex: 1 1 var(--aff-cta-col-min)` lets columns grow evenly on
   wide screens and stack to full-width when they can't fit the min-width. */
.aff-cta-band-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	max-width: 980px;
	margin: 0 auto;
	align-items: center;
	justify-content: center;
}
.aff-cta-band-col {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0 24px;
	text-align: center;
	flex: 1 1 var(--aff-cta-col-min, 260px);
	min-width: 200px;
	max-width: 480px;
}
.aff-cta-band-headline {
	font-family: var(--serif);
	font-weight: 400;
	font-size: 28px;
	line-height: 1.15;
	letter-spacing: -0.02em;
	color: var(--color-text-on-dark, #ffffff);
	margin: 0;
	text-wrap: balance;
}
.aff-cta-band-headline em {
	font-style: italic;
	color: var(--color-accent-soft, #e2c984);
}
.aff-cta-band-sub {
	font-family: var(--sans);
	font-size: 14.5px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
	text-wrap: pretty;
}
/* Divider — default (auto) orientation.
   Two-part structure: the wrapper (.aff-cta-band-divider) owns the flex-row
   footprint — 100% wide on mobile so it forces its own row via flex-basis
   between stacked columns. The visible bar is painted by a ::before
   pseudo-element whose length is driven by --aff-divider-length (editor's
   Length control) and colored by --aff-divider-color (Color control).
   This separation is why the color control uses a CSS var instead of
   background — painting the wrapper directly would show a full-width bar
   on mobile because the wrapper spans the row. */
.aff-cta-band-divider {
	background: transparent;
	width: 100%;
	height: 1px;
	flex-basis: 100%;      /* forces own row on mobile between stacked cols */
	margin: 0;
	align-self: center;    /* vertical center in row */
	position: relative;
}
.aff-cta-band-divider::before {
	content: '';
	display: block;
	width: var(--aff-divider-length, 40px);
	height: 100%;
	background: var(--aff-divider-color, var(--color-accent, #c9a449));
	margin: 0 auto;        /* horizontal center */
}

/* Reveal */
.aff-cta-band[data-st-reveal] { opacity: 0; transform: translateY(16px); }
.aff-cta-band[data-st-reveal].in {
	opacity: 1;
	transform: none;
	transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
	.aff-cta-band[data-st-reveal],
	.aff-cta-band[data-st-reveal].in { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 768px) {
	.aff-cta-band { padding: 64px 40px; }
	.aff-cta-band-headline { font-size: 32px; }
}
/* Divider orientation flips at ≥768px (auto mode) because that's the width
   at which the flex-wrap columns (min-width ~260px each + gap) can fit
   side-by-side. Force-orient classes (below) override the breakpoint logic. */
@media (min-width: 768px) {
	.aff-cta-band-divider {
		width: 1px;
		height: var(--aff-divider-length, 64px);
		flex-basis: auto;   /* release own-row when columns are side-by-side */
	}
	.aff-cta-band-divider::before {
		width: 100%;
		height: 100%;
		margin: 0;
	}
}

/* --- Force-orient overrides — editor's Divider Orientation control adds
       one of these two classes to .aff-cta-band. Overrides the auto
       breakpoint logic regardless of viewport width. --- */

/* Always vertical — 1px wide, tall, centered vertically in row */
.aff-cta-band.divider-force-vertical .aff-cta-band-divider {
	width: 1px;
	height: var(--aff-divider-length, 64px);
	flex-basis: auto;
}
.aff-cta-band.divider-force-vertical .aff-cta-band-divider::before {
	width: 100%;
	height: 100%;
	margin: 0;
}

/* Always horizontal — short bar, own row, centered horizontally */
.aff-cta-band.divider-force-horizontal .aff-cta-band-divider {
	width: 100%;
	height: 1px;
	flex-basis: 100%;
}
.aff-cta-band.divider-force-horizontal .aff-cta-band-divider::before {
	width: var(--aff-divider-length, 40px);
	height: 100%;
	margin: 0 auto;
}

@media (min-width: 1025px) {
	.aff-cta-band { padding: 64px 64px; }
	.aff-cta-band-inner { gap: 0; }
	.aff-cta-band-col { padding: 0 48px; }
}

/* ============================================================
   smiletrue-aff-opportunity — 3-card numbered grid
   Layout: mobile stacks; ≥1025px 3-col grid with 1px gap.
   ============================================================ */
.aff-opportunity {
	background: var(--color-surface, #ffffff);
	padding: 80px 20px;
	border-bottom: 1px solid var(--color-border, #d8dfe1);
	box-sizing: border-box;
}
.aff-opportunity-inner {
	max-width: 1200px;
	margin: 0 auto;
}
/* Grid driven by --aff-opp-cols CSS variable (set by the widget's
   columns_per_row control). Default column count per breakpoint below.
   Adding more cards to the repeater just wraps into more rows. */
.aff-opportunity-grid {
	display: grid;
	grid-template-columns: repeat(var(--aff-opp-cols, 1), 1fr);
	gap: 1px;
	background: var(--color-border, #d8dfe1);
	border: 1px solid var(--color-border, #d8dfe1);
	margin-top: 40px;
}
.aff-opportunity-card {
	background: var(--color-surface, #ffffff);
	padding: 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	transition: background-color 240ms ease, box-shadow 240ms ease, transform 240ms ease;
}
.aff-opportunity-card:hover {
	/* Hover state — override colors + shadow via editor controls */
	background: var(--color-surface, #ffffff);
}
.aff-opportunity-card .st-numeral { margin-bottom: 4px; }
.aff-opportunity-card h3 {
	font-family: var(--serif);
	font-weight: 500;
	font-size: 26px;
	line-height: 1.18;
	letter-spacing: -0.01em;
	color: var(--color-text);
	margin: 0;
	text-wrap: balance;
}
.aff-opportunity-card p {
	font-family: var(--sans);
	font-weight: 400;
	font-size: 15px;
	line-height: 1.6;
	color: var(--color-text-soft, #3e4f53);
	margin: 0;
	text-wrap: pretty;
}

/* Reveal */
.aff-opportunity[data-st-reveal] { opacity: 0; transform: translateY(16px); }
.aff-opportunity[data-st-reveal].in {
	opacity: 1;
	transform: none;
	transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
	.aff-opportunity[data-st-reveal],
	.aff-opportunity[data-st-reveal].in { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 768px) {
	.aff-opportunity { padding: 96px 40px; }
	.aff-opportunity-grid {
		grid-template-columns: repeat(var(--aff-opp-cols-tab, 2), 1fr);
		margin-top: 48px;
	}
}
@media (min-width: 1025px) {
	.aff-opportunity { padding: 110px 64px; }
	.aff-opportunity-grid {
		grid-template-columns: repeat(var(--aff-opp-cols-desk, 3), 1fr);
		margin-top: 56px;
	}
}

/* ============================================================
   smiletrue-aff-how-it-works — 2-col responsibility split
   Mobile-first: stacked; ≥768px 2-col via CSS-var column count.
   ============================================================ */
.aff-hiw {
	background: #f5f3ee;
	padding: 64px 24px;
	--aff-hiw-cols: 1;
}
.aff-hiw-head {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 100%;
}
.aff-hiw-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #146474;
}
.aff-hiw-eyebrow::before {
	content: '';
	width: 18px;
	height: 1px;
	background: #c9a449;
	display: inline-block;
}
.aff-hiw-headline {
	font-family: var(--serif, 'Source Serif 4', serif);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: #1a2628;
	margin: 0;
	text-wrap: balance;
}
.aff-hiw-headline em {
	font-style: italic;
	color: #146474;
}
.aff-hiw-lede {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 17px;
	line-height: 1.6;
	color: #3e4f53;
	max-width: 56ch;
	text-wrap: pretty;
	margin: 0;
}
.aff-hiw-grid {
	display: grid;
	grid-template-columns: repeat(var(--aff-hiw-cols, 1), 1fr);
	gap: 1px;
	background: #d8dfe1;
	border-top: 2px solid #0d4f5c;
	margin-top: 32px;
}
.aff-hiw-col {
	background: #ffffff;
	padding: 24px;
}
.aff-hiw-col-label {
	display: inline-block;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #146474;
}
.aff-hiw-col-2 .aff-hiw-col-label { color: #a08231; }
.aff-hiw-chips {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.aff-hiw-chip {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 13.5px;
	line-height: 1.5;
	color: #3e4f53;
}
.aff-hiw-chip::before {
	content: '✓';
	color: #146474;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	flex-shrink: 0;
}
.aff-hiw-disclaimer {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-style: italic;
	font-size: 15px;
	color: #3e4f53;
	text-align: center;
	margin: 36px 0 0;
}
.aff-hiw[data-st-reveal] { opacity: 0; transform: translateY(16px); }
.aff-hiw[data-st-reveal].in {
	opacity: 1;
	transform: none;
	transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
	.aff-hiw[data-st-reveal],
	.aff-hiw[data-st-reveal].in { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 768px) {
	.aff-hiw { padding: 88px 40px; }
	.aff-hiw-headline { font-size: 42px; }
	.aff-hiw-grid { --aff-hiw-cols: 2; margin-top: 40px; }
	.aff-hiw-col { padding: 32px; }
}
@media (min-width: 1025px) {
	.aff-hiw { padding: 110px 64px; }
	.aff-hiw-headline { font-size: 56px; }
	.aff-hiw-grid { margin-top: 56px; }
	.aff-hiw-col { padding: 40px; }
}

/* ============================================================
   smiletrue-aff-compensation — fee schedule table
   3-col grid rows with CSS-var-driven fr ratios; hairline borders.
   ============================================================ */
.aff-comp {
	background: #ffffff;
	padding: 64px 24px;
}
.aff-comp-head { display: flex; flex-direction: column; gap: 20px; max-width: 100%; }
.aff-comp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #146474;
}
.aff-comp-eyebrow::before {
	content: '';
	width: 18px;
	height: 1px;
	background: #c9a449;
	display: inline-block;
}
.aff-comp-headline {
	font-family: var(--serif, 'Source Serif 4', serif);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: #1a2628;
	margin: 0;
	text-wrap: balance;
}
.aff-comp-headline em { font-style: italic; color: #146474; }
.aff-comp-lede {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 17px;
	line-height: 1.6;
	color: #3e4f53;
	max-width: 56ch;
	text-wrap: pretty;
	margin: 0;
}
.aff-comp-table {
	border-top: 2px solid #0d4f5c;
	border-left: 1px solid #d8dfe1;
	margin-top: 32px;
}
.aff-comp-row {
	display: grid;
	grid-template-columns: 1fr;
	border-right: 1px solid #d8dfe1;
	border-bottom: 1px solid #d8dfe1;
}
.aff-comp-cell {
	padding: 16px 18px;
}
.aff-comp-name {
	font-family: var(--serif, 'Source Serif 4', serif);
	font-weight: 500;
	font-size: 17px;
	color: #1a2628;
}
.aff-comp-fee {
	font-family: var(--serif, 'Source Serif 4', serif);
	font-weight: 400;
	font-size: 22px;
	color: #1a2628;
}
.aff-comp-note {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 13.5px;
	line-height: 1.5;
	color: #3e4f53;
	display: flex;
	align-items: center;
}
.aff-comp-footnote {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 13.5px;
	line-height: 1.5;
	color: #6e7b80;
	margin: 24px 0 0;
	max-width: 70ch;
}
.aff-comp[data-st-reveal] { opacity: 0; transform: translateY(16px); }
.aff-comp[data-st-reveal].in {
	opacity: 1;
	transform: none;
	transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
	.aff-comp[data-st-reveal],
	.aff-comp[data-st-reveal].in { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 768px) {
	.aff-comp { padding: 88px 40px; }
	.aff-comp-headline { font-size: 42px; }
	.aff-comp-row {
		grid-template-columns: var(--aff-comp-name-fr, 1.4fr) var(--aff-comp-fee-fr, 1fr) var(--aff-comp-note-fr, 1.6fr);
	}
	.aff-comp-cell { padding: 18px 22px; }
	.aff-comp-table { margin-top: 40px; }
}
@media (min-width: 1025px) {
	.aff-comp { padding: 110px 64px; }
	.aff-comp-headline { font-size: 56px; }
	.aff-comp-cell { padding: 22px 28px; }
	.aff-comp-table { margin-top: 48px; }
}

/* ============================================================
   smiletrue-aff-territory — prose left + gold-bar card right
   Mobile-first: stacked; ≥768px 2-col via CSS-var column count.
   ============================================================ */
.aff-terr {
	background: #f5f3ee;
	padding: 64px 24px;
}
.aff-terr-grid {
	display: grid;
	grid-template-columns: repeat(var(--aff-terr-cols, 1), 1fr);
	gap: 32px;
}
.aff-terr-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #146474;
}
.aff-terr-eyebrow::before {
	content: '';
	width: 18px;
	height: 1px;
	background: #c9a449;
	display: inline-block;
}
.aff-terr-headline {
	font-family: var(--serif, 'Source Serif 4', serif);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: #1a2628;
	margin: 20px 0 0;
	text-wrap: balance;
}
.aff-terr-headline em { font-style: italic; color: #146474; }
.aff-terr-body {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.6;
	color: #3e4f53;
	margin: 16px 0 0;
}
.aff-terr-body:first-of-type { margin-top: 20px; }
.aff-terr-card {
	position: relative;
	background: #ffffff;
	border: 1px solid #d8dfe1;
	border-radius: 4px;
	padding: 24px;
	align-self: start;
}
.aff-terr-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 3px;
	background: #c9a449;
	display: block;
}
.aff-terr-card-label {
	display: inline-block;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6e7b80;
	margin-top: 16px;
}
.aff-terr-card-body {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.6;
	color: #3e4f53;
	margin: 16px 0 0;
}
.aff-terr-card-caption {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 13px;
	line-height: 1.5;
	color: #6e7b80;
	margin: 14px 0 0;
}
.aff-terr[data-st-reveal] { opacity: 0; transform: translateY(16px); }
.aff-terr[data-st-reveal].in {
	opacity: 1;
	transform: none;
	transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
	.aff-terr[data-st-reveal],
	.aff-terr[data-st-reveal].in { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 768px) {
	.aff-terr { padding: 88px 40px; }
	.aff-terr-grid { --aff-terr-cols: 2; gap: 40px; }
	.aff-terr-headline { font-size: 42px; }
	.aff-terr-card { padding: 28px; }
}
@media (min-width: 1025px) {
	.aff-terr { padding: 110px 64px; }
	.aff-terr-grid { gap: 64px; }
	.aff-terr-headline { font-size: 56px; }
	.aff-terr-card { padding: 32px; }
}

/* ============================================================
   smiletrue-aff-qualifications — 2-col chip grid + callout card
   ============================================================ */
.aff-qual {
	background: #ffffff;
	padding: 64px 24px;
}
.aff-qual-head { display: flex; flex-direction: column; gap: 20px; max-width: 100%; }
.aff-qual-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #146474;
}
.aff-qual-eyebrow::before {
	content: '';
	width: 18px;
	height: 1px;
	background: #c9a449;
	display: inline-block;
}
.aff-qual-headline {
	font-family: var(--serif, 'Source Serif 4', serif);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: #1a2628;
	margin: 0;
	text-wrap: balance;
}
.aff-qual-headline em { font-style: italic; color: #146474; }
.aff-qual-lede {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 17px;
	line-height: 1.6;
	color: #3e4f53;
	max-width: 56ch;
	text-wrap: pretty;
	margin: 0;
}
.aff-qual-grid {
	display: grid;
	grid-template-columns: repeat(var(--aff-qual-cols, 1), 1fr);
	row-gap: 12px;
	column-gap: 24px;
	max-width: 100%;
	margin-top: 28px;
}
.aff-qual-chip {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 13.5px;
	line-height: 1.5;
	color: #3e4f53;
}
.aff-qual-chip::before {
	content: '✓';
	color: #146474;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	flex-shrink: 0;
}
.aff-qual-callout {
	background: #ffffff;
	border: 1px solid #d8dfe1;
	border-radius: 4px;
	border-left: 3px solid #a08231;
	padding: 24px;
	margin-top: 24px;
	max-width: 100%;
}
.aff-qual-callout + .aff-qual-callout { margin-top: 16px; }
.aff-qual-callout-label {
	display: inline-block;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #a08231;
}
.aff-qual-callout-body {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.6;
	color: #3e4f53;
	margin: 12px 0 0;
}
.aff-qual[data-st-reveal] { opacity: 0; transform: translateY(16px); }
.aff-qual[data-st-reveal].in {
	opacity: 1;
	transform: none;
	transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
	.aff-qual[data-st-reveal],
	.aff-qual[data-st-reveal].in { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 768px) {
	.aff-qual { padding: 88px 40px; }
	.aff-qual-headline { font-size: 42px; }
	.aff-qual-grid { --aff-qual-cols: 2; row-gap: 14px; column-gap: 32px; margin-top: 36px; }
	.aff-qual-callout { padding: 28px; margin-top: 28px; }
}
@media (min-width: 1025px) {
	.aff-qual { padding: 110px 64px; }
	.aff-qual-headline { font-size: 56px; }
	.aff-qual-grid { row-gap: 16px; column-gap: 40px; margin-top: 44px; max-width: 920px; }
	.aff-qual-callout { padding: 32px; margin-top: 32px; max-width: 920px; }
}

/* ============================================================
   smiletrue-aff-contact — dedicated affiliate contact line
   Compact section; row of items with pseudo-element divider between.
   ============================================================ */
.aff-contact {
	background: #f5f3ee;
	padding: 48px 24px;
	text-align: center;
}
.aff-contact-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #146474;
	justify-content: center;
}
.aff-contact-eyebrow::before {
	content: '';
	width: 18px;
	height: 1px;
	background: #c9a449;
	display: inline-block;
}
.aff-contact-headline {
	font-family: var(--serif, 'Source Serif 4', serif);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: #1a2628;
	margin: 16px 0 0;
	text-wrap: balance;
}
.aff-contact-headline em { font-style: italic; color: #146474; }
.aff-contact-row {
	display: flex;
	gap: 24px;
	justify-content: center;
	margin-top: 28px;
	flex-wrap: wrap;
	align-items: stretch;
}
.aff-contact-item {
	flex: 0 1 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.aff-contact-label {
	display: inline-block;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #6e7b80;
}
.aff-contact-value {
	font-family: var(--serif, 'Source Serif 4', serif);
	font-size: 20px;
	color: #0d4f5c;
	margin: 8px 0 0;
	text-decoration: none;
}
a.aff-contact-value:hover { color: #146474; }
.aff-contact-caption {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 13px;
	line-height: 1.5;
	color: #6e7b80;
	margin: 6px 0 0;
}
/* Divider: wrapper spans row on mobile (100%), pseudo-element paints the
   visible bar. Same pattern as .aff-cta-band-divider — see the divider
   comments there for the full explanation. */
.aff-contact-divider {
	background: transparent;
	width: 100%;
	height: 1px;
	flex-basis: 100%;
	margin: 0;
	align-self: center;
	position: relative;
}
.aff-contact-divider::before {
	content: '';
	display: block;
	width: var(--aff-contact-divider-length, 40px);
	height: 100%;
	background: var(--aff-contact-divider-color, #d8dfe1);
	margin: 0 auto;
}
.aff-contact[data-st-reveal] { opacity: 0; transform: translateY(16px); }
.aff-contact[data-st-reveal].in {
	opacity: 1;
	transform: none;
	transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
	.aff-contact[data-st-reveal],
	.aff-contact[data-st-reveal].in { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 768px) {
	.aff-contact { padding: 64px 40px; }
	.aff-contact-headline { font-size: 36px; }
	.aff-contact-item { flex: 0 1 200px; }
	.aff-contact-divider {
		width: 1px;
		height: var(--aff-contact-divider-length, 80px);
		flex-basis: auto;
	}
	.aff-contact-divider::before {
		width: 100%;
		height: 100%;
		margin: 0;
	}
	.aff-contact-value { font-size: 24px; }
}
@media (min-width: 1025px) {
	.aff-contact { padding: 72px 64px; }
	.aff-contact-headline { font-size: 46px; }
	.aff-contact-value { font-size: 26px; }
	.aff-contact-row { gap: 40px; }
}
/* Force-orient overrides */
.aff-contact.divider-force-vertical .aff-contact-divider {
	width: 1px;
	height: var(--aff-contact-divider-length, 80px);
	flex-basis: auto;
}
.aff-contact.divider-force-vertical .aff-contact-divider::before {
	width: 100%;
	height: 100%;
	margin: 0;
}
.aff-contact.divider-force-horizontal .aff-contact-divider {
	width: 100%;
	height: 1px;
	flex-basis: 100%;
}
.aff-contact.divider-force-horizontal .aff-contact-divider::before {
	width: var(--aff-contact-divider-length, 40px);
	height: 100%;
	margin: 0 auto;
}

/* ============================================================
   smiletrue-aff-apply-form — dark section + white form card
   ============================================================ */
.aff-apply {
	background: #0a3a44;
	color: rgba(255,255,255,0.82);
	padding: 56px 24px;
}
.aff-apply-inner {
	max-width: 100%;
	margin: 0 auto;
}
/* Bulletproof form-card visuals — legacy widget instances saved before the
   card_bg / inner_max_width controls existed have empty Elementor settings,
   so Elementor emits no CSS for those selectors. These rules give the form
   its white card look regardless. Higher specificity via the `form.aff-apply-form`
   element+class selector so nothing accidentally strips them. */
form.aff-apply-form {
	background-color: #ffffff;
	border-radius: 4px;
	padding: 24px;
	box-sizing: border-box;
}
.aff-apply-head {
	/* Block layout (not flex) so `text-align` on this element controls
	   the horizontal position of the eyebrow (inline-flex) and cascades
	   to headline + lede text. Adjacent-sibling combinator replaces the
	   old `gap: 20px` from the flex-column layout. Changing from flex to
	   block was necessary because the head-align control emits text-align,
	   and text-align does not affect flex-item main-axis position. */
	max-width: 100%;
	margin: 0 auto 32px;
	text-align: center;
}
.aff-apply-head > * { margin: 0; }
.aff-apply-head > * + * { margin-top: 20px; }
.aff-apply-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #e2c984;
}
.aff-apply-eyebrow::before {
	content: '';
	width: 18px;
	height: 1px;
	background: #c9a449;
	display: inline-block;
}
.aff-apply-headline {
	font-family: var(--serif, 'Source Serif 4', serif);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -0.02em;
	color: #ffffff;
	margin: 0;
	text-wrap: balance;
}
.aff-apply-headline em { font-style: italic; color: #e2c984; }
.aff-apply-lede {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 17px;
	line-height: 1.6;
	color: rgba(255,255,255,0.7);
	max-width: 56ch;
	text-wrap: pretty;
	margin-top: 0;
	margin-bottom: 0;
	/* margin-inline: auto centers the lede as a block whenever it's
	   narrower than its parent (max-width: 56ch is ~500px, narrower
	   than the head at desktop). Without this the block stays flush
	   to the left even when the head has text-align: center.
	   Kept as margin-inline (not shorthand) so vertical margins from
	   the head_gap control (.aff-apply-head > * + *) are not overwritten. */
	margin-inline: auto;
}
.aff-apply-form {
	background: #ffffff;
	border-radius: 4px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 22px;
}
/* Field container — flexbox wrap with per-field percentage width via
   --field-cols (integer 1-100). Each field's width = (cols% - column-gap)
   so N fields per row always fit inside 100% container minus one gap
   width of unused space at the row's right edge. This is safer than a
   100-column CSS grid whose 99 × 16px gaps (1584px) exceed the form's
   content width and collapse tracks to 0. Below 768px collapses to a
   single column for readability. */
.aff-apply-form-fields {
	display: flex;
	flex-wrap: wrap;
	row-gap: 22px;
	column-gap: 16px;
}
.aff-apply-field {
	flex: 0 0 auto;
	min-width: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	width: calc(var(--field-cols, 100) * 1% - 16px);
}
/* 100% fields fill the row without reserving column-gap width */
.aff-apply-field[style*="--field-cols: 100"] {
	width: 100%;
}
@media (max-width: 767px) {
	.aff-apply-form-fields {
		flex-direction: column;
		gap: 18px;
	}
	.aff-apply-field,
	.aff-apply-field[style*="--field-cols"] {
		width: 100%;
	}
}
.aff-apply-label {
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #6e7b80;
	display: block;
	margin-bottom: 8px;
}
.aff-apply-input {
	width: 100%;
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 14px;
	color: #1a2628;
	background: #ffffff;
	border: 1px solid #d8dfe1;
	border-radius: 2px;
	padding: 12px 14px;
	transition: border-color 200ms ease;
}
.aff-apply-input:focus {
	outline: none;
	border-color: #146474;
}
select.aff-apply-input { appearance: menulist; }
textarea.aff-apply-input { resize: vertical; font-family: var(--sans, Inter, system-ui, sans-serif); }
.aff-apply-warning {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 12.5px;
	line-height: 1.4;
	color: #a08231;
	margin: 10px 0 0;
}
.aff-apply-error {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 13.5px;
	line-height: 1.4;
	color: #a08231;
	background: #fdf6e0;
	border: 1px solid #e2c984;
	border-radius: 2px;
	padding: 10px 12px;
}
.aff-apply-submit {
	cursor: pointer;
	background: #c9a449;
	color: #0a3a44;
	border: 1px solid #a08231;
	padding: 14px 24px;
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 14.5px;
	font-weight: 600;
	border-radius: 2px;
	align-self: center;
	transition: background 300ms cubic-bezier(0.2,0.7,0.2,1),
	            color 300ms cubic-bezier(0.2,0.7,0.2,1),
	            border-color 300ms cubic-bezier(0.2,0.7,0.2,1),
	            transform 300ms cubic-bezier(0.2,0.7,0.2,1);
	margin-top: 8px;
}
.aff-apply-submit:hover {
	background: #a08231;
	color: #ffffff;
}
.aff-apply-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}
/* Shared form field-type widgets: radio group, checkbox group,
   acceptance, html block, step divider, recaptcha placeholder.
   Used by both ST Aff Apply Form + ST BC Hero via the shared
   Field_Types render helper. */
.st-form-radio-group,
.st-form-checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.st-form-radio-item,
.st-form-checkbox-item {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 14px;
	line-height: 1.4;
	color: #1a2628;
}
.st-form-radio-item input,
.st-form-checkbox-item input {
	margin-top: 3px;
	flex-shrink: 0;
	accent-color: #146474;
}
.st-form-acceptance {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 13.5px;
	line-height: 1.5;
	color: #3e4f53;
}
.st-form-acceptance input {
	margin-top: 3px;
	flex-shrink: 0;
	accent-color: #146474;
}
.st-form-acceptance a {
	color: #146474;
	text-decoration: underline;
}
.st-form-acceptance a:hover { color: #c9a449; }

.st-form-html {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 14px;
	line-height: 1.6;
	color: #3e4f53;
}
.st-form-step {
	border-top: 1px solid #d8dfe1;
	padding-top: 12px;
	margin-top: 4px;
}
.st-form-step-title {
	font-family: var(--mono, ui-monospace, monospace);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #146474;
}
.st-form-recaptcha {
	padding: 12px;
	background: #f5f3ee;
	border: 1px dashed #d8dfe1;
	border-radius: 2px;
	color: #6e7b80;
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 12px;
}

/* Aff Apply Form specials: acceptance/html/step/hidden/honeypot per-type
   wrappers get compact spacing (no label pattern above them). */
.aff-apply-field--acceptance {
	padding-top: 4px;
}
.aff-apply-field--hidden,
.aff-apply-field--honeypot {
	margin: 0;
	padding: 0;
	position: absolute;
	left: -9999px;
	height: 0;
	width: 0;
	overflow: hidden;
}

.aff-apply-success {
	background: #ffffff;
	border: 1px solid #d8dfe1;
	border-radius: 4px;
	padding: 32px;
	text-align: center;
}
.aff-apply-success-icon {
	display: block;
	font-family: var(--serif, 'Source Serif 4', serif);
	font-size: 48px;
	color: #c9a449;
	line-height: 1;
}
.aff-apply-success-headline {
	font-family: var(--serif, 'Source Serif 4', serif);
	font-size: 26px;
	font-weight: 500;
	line-height: 1.18;
	color: #1a2628;
	margin: 16px 0 0;
}
.aff-apply-success-body {
	font-family: var(--sans, Inter, system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.6;
	color: #3e4f53;
	margin: 12px 0 0;
}
.aff-apply[data-st-reveal] { opacity: 0; transform: translateY(16px); }
.aff-apply[data-st-reveal].in {
	opacity: 1;
	transform: none;
	transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
	            transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce) {
	.aff-apply[data-st-reveal],
	.aff-apply[data-st-reveal].in { opacity: 1; transform: none; transition: none; }
}
@media (min-width: 768px) {
	.aff-apply { padding: 80px 40px; }
	.aff-apply-headline { font-size: 42px; }
	.aff-apply-form { padding: 32px; }
	.aff-apply-form-fields { column-gap: 20px; row-gap: 22px; }
	.aff-apply-submit { padding: 16px 26px; }
	.aff-apply-success { padding: 40px; }
}
@media (min-width: 1025px) {
	.aff-apply { padding: 96px 64px; }
	.aff-apply-headline { font-size: 56px; }
	.aff-apply-inner { max-width: 760px; }
	.aff-apply-form { padding: 40px; }
	.aff-apply-submit { padding: 17px 28px; }
	.aff-apply-success { padding: 48px; }
}