/* ============================================================
   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 <768px) ---- */
.topbar {
	display: flex;
	flex-direction: column;        /* stack on mobile */
	justify-content: center;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	background: var(--teal-900);
	color: rgba(255, 255, 255, 0.78);
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-align: center;
	box-sizing: border-box;
	/* If a side has nowrap and overflows on a tiny viewport, let it scroll
	   horizontally instead of breaking layout. Hidden on desktop via the
	   ≥1025px media query below. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;          /* Firefox */
}
.topbar::-webkit-scrollbar { display: none; }   /* Safari/Chrome */

.topbar .left,
.topbar .right {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;              /* mobile: keep right group on one line */
	gap: 8px;
	min-width: 0;
}

/* Defensive: keep each text segment from breaking mid-line when nowrap on
   inner groups would otherwise let long content collapse the parent. Visual
   parity with source (which renders on one line on desktop anyway). */
.topbar .topbar__brand,
.topbar .topbar__hours,
.topbar .topbar__phone,
.topbar .topbar__status,
.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 — horizontal row, no scroll ---- */
@media (min-width: 768px) {
	.topbar {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		text-align: left;
		gap: 16px;
		padding: 8px 32px;
		overflow: visible;
	}
	.topbar .left,
	.topbar .right {
		gap: 18px;
	}
}

/* ---- Desktop ≥ 1025px — match source styles.css :92-99 verbatim ---- */
@media (min-width: 1025px) {
	.topbar {
		padding: 8px 56px;
	}
	.topbar .left,
	.topbar .right {
		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 */
	white-space: nowrap;
	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; }
.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;
}
.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: space-between; 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;
}
.lp-promo .l, .lp-promo .r { display: flex; gap: 18px; align-items: center; }
.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%; }
.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: center; padding: 10px 20px; }
  .st-lp-promo-wrapper { flex-direction: column; gap: 8px; }
  .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; }
}